@micromag/core 0.2.412 → 0.3.0

package/es/utils.js

@@ -148,7 +148,9 @@ var getFieldFromPath = function getFieldFromPath(path, fields, fieldManager) {
         _foundField$fields = foundField.fields,
         fieldFields = _foundField$fields === void 0 ? null : _foundField$fields,
         _foundField$field = foundField.field,
-        field = _foundField$field === void 0 ? null : _foundField$field;
+        field = _foundField$field === void 0 ? null : _foundField$field,
+        _foundField$itemsFiel = foundField.itemsField,
+        itemsField = _foundField$itemsFiel === void 0 ? null : _foundField$itemsFiel;
     var finalType = field !== null ? field.type || type : type;
 
     var _ref = finalType !== null ? fieldManager.getDefinition(finalType) : foundField,
@@ -157,10 +159,12 @@ var getFieldFromPath = function getFieldFromPath(path, fields, fieldManager) {
         _ref$settings = _ref.settings,
         settings = _ref$settings === void 0 ? null : _ref$settings,
         _ref$itemsField = _ref.itemsField,
-        itemsField = _ref$itemsField === void 0 ? null : _ref$itemsField;
+        defItemsField = _ref$itemsField === void 0 ? null : _ref$itemsField;
 
-    if (itemsField !== null && key.match(/^[0-9]+$/)) {
-      return _objectSpread(_objectSpread({}, itemsField), {}, {
+    var finalItemsField = itemsField || defItemsField;
+
+    if (finalItemsField !== null && key.match(/^[0-9]+$/)) {
+      return _objectSpread(_objectSpread({}, finalItemsField), {}, {
         name: path.join('/'),
         listItems: true
       });
@@ -417,7 +421,7 @@ var getStyleFromBorder = function getStyleFromBorder(value) {
   } : null), getStyleFromColor(color, 'borderColor'));
 };
 
-var getStyleFromButton = function getStyleFromButton(value) {
+var getStyleFromBox = function getStyleFromBox(value) {
   if (value === null) {
     return null;
   }
@@ -426,6 +430,7 @@ var getStyleFromButton = function getStyleFromButton(value) {
       backgroundColor = _value$backgroundColo === void 0 ? null : _value$backgroundColo,
       _value$borderRadius = value.borderRadius,
       borderRadius = _value$borderRadius === void 0 ? null : _value$borderRadius,
+      padding = value.padding,
       _value$borderWidth = value.borderWidth,
       borderWidth = _value$borderWidth === void 0 ? null : _value$borderWidth,
       _value$borderStyle = value.borderStyle,
@@ -437,9 +442,11 @@ var getStyleFromButton = function getStyleFromButton(value) {
     style: borderStyle,
     color: borderColor
   };
-  return _objectSpread(_objectSpread(_objectSpread({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromColor(backgroundColor, 'backgroundColor')), borderRadius !== null ? {
     borderRadius: borderRadius
-  } : null), getStyleFromBorder(border));
+  } : null), getStyleFromBorder(border)), {}, {
+    padding: padding
+  });
 };
 
 var getStyleFromContainer = function getStyleFromContainer(value) {
@@ -732,4 +739,4 @@ var validateFields = function validateFields(fields, value) {
   }, true);
 };
 
-export { convertStyleToString, createNullableOnChange, createUseEvent, getColorAsString, getComponentFromName, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getStyleFromBorder, getStyleFromButton, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+export { convertStyleToString, createNullableOnChange, createUseEvent, getColorAsString, getComponentFromName, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };

package/lib/components.js

@@ -76,7 +76,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 = {
@@ -183,25 +183,25 @@ var Button$1 = function Button(_ref) {
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
   var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hasInlineIcon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$s.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
+    className: classNames__default["default"]([styles$t.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$s.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
+    className: classNames__default["default"]([styles$t.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$s.left, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames__default["default"]([styles$t.left, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$s.center, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
+    className: classNames__default["default"]([styles$t.center, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
   }, text), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$s.right, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames__default["default"]([styles$t.right, _defineProperty__default["default"]({}, 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__default["default"]([(_ref7 = {
     btn: withStyle
-  }, _defineProperty__default["default"](_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty__default["default"](_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty__default["default"](_ref7, "active", !withoutStyle && active), _ref7), styles$s.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$s.withoutStyle, withoutStyle), _defineProperty__default["default"](_ref8, styles$s.withIcon, hasIcon), _defineProperty__default["default"](_ref8, styles$s.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref8, styles$s.withText, text !== null), _defineProperty__default["default"](_ref8, styles$s.withShadow, withShadow), _defineProperty__default["default"](_ref8, styles$s.isSmall, small), _defineProperty__default["default"](_ref8, styles$s.isBig, big), _defineProperty__default["default"](_ref8, styles$s.isLink, href !== null), _defineProperty__default["default"](_ref8, styles$s.asLink, asLink), _defineProperty__default["default"](_ref8, styles$s.isDisabled, disabled), _defineProperty__default["default"](_ref8, styles$s.isLoading, loading), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)]);
+  }, _defineProperty__default["default"](_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty__default["default"](_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty__default["default"](_ref7, "active", !withoutStyle && active), _ref7), styles$t.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$t.withoutStyle, withoutStyle), _defineProperty__default["default"](_ref8, styles$t.withIcon, hasIcon), _defineProperty__default["default"](_ref8, styles$t.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref8, styles$t.withText, text !== null), _defineProperty__default["default"](_ref8, styles$t.withShadow, withShadow), _defineProperty__default["default"](_ref8, styles$t.isSmall, small), _defineProperty__default["default"](_ref8, styles$t.isBig, big), _defineProperty__default["default"](_ref8, styles$t.isLink, href !== null), _defineProperty__default["default"](_ref8, styles$t.asLink, asLink), _defineProperty__default["default"](_ref8, styles$t.isDisabled, disabled), _defineProperty__default["default"](_ref8, styles$t.isLoading, loading), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)]);
 
   if (href !== null) {
     var linkClassNames = classNames__default["default"]([buttonClassNames, _defineProperty__default["default"]({
       disabled: disabled
-    }, styles$s.linkDisabled, disabled)]);
+    }, styles$t.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
@@ -231,7 +231,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 = {
@@ -262,7 +262,7 @@ var Buttons = function Buttons(_ref) {
       buttonClassName = _ref.buttonClassName,
       className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['btn-group', _defineProperty__default["default"]({}, "btn-group-".concat(size), size !== null), styles$r.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"](['btn-group', _defineProperty__default["default"]({}, "btn-group-".concat(size), size !== null), styles$s.container, _defineProperty__default["default"]({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
     var _ref4;
@@ -277,7 +277,7 @@ var Buttons = function Buttons(_ref) {
 
     var fixedProps = {
       key: "button-".concat(index),
-      className: classNames__default["default"]([styles$r.button, (_ref4 = {}, _defineProperty__default["default"](_ref4, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref4, customClassName, customClassName !== null), _ref4)]),
+      className: classNames__default["default"]([styles$s.button, (_ref4 = {}, _defineProperty__default["default"](_ref4, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref4, customClassName, customClassName !== null), _ref4)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -421,7 +421,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__default["default"].string.isRequired,
@@ -600,7 +600,7 @@ var Form = function Form(_ref) {
 
   return /*#__PURE__*/React__default["default"].createElement("form", {
     action: action,
-    className: classNames__default["default"]([styles$q.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$r.container, _defineProperty__default["default"]({}, className, className !== null)]),
     method: method,
     onSubmit: onSubmit
   }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -610,7 +610,7 @@ var Form = function Form(_ref) {
     outline: true,
     onClick: closeFieldForm
   })) : null, fields && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$q.panel]),
+    className: classNames__default["default"](['w-100', styles$r.panel]),
     key: "field"
   }, /*#__PURE__*/React__default["default"].createElement(FieldForm, {
     name: fieldParams.replace(/\//g, '.'),
@@ -626,11 +626,11 @@ var Form = function Form(_ref) {
     onChange: setValue,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
-    className: classNames__default["default"]([styles$q.fields, _defineProperty__default["default"]({}, fieldsClassName, fieldsClassName !== null)])
+    className: classNames__default["default"]([styles$r.fields, _defineProperty__default["default"]({}, fieldsClassName, fieldsClassName !== null)])
   }) : null, generalError ? /*#__PURE__*/React__default["default"].createElement("p", {
     className: "text-danger my-1"
   }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$q.actions, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$q[actionsAlign], actionsAlign), _defineProperty__default["default"](_ref4, actionsClassName, actionsClassName !== null), _ref4)])
+    className: classNames__default["default"]([styles$r.actions, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$r[actionsAlign], actionsAlign), _defineProperty__default["default"](_ref4, actionsClassName, actionsClassName !== null), _ref4)])
   }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React__default["default"].createElement(Button$1, {
     type: "button",
     onClick: onCancel,
@@ -638,7 +638,7 @@ var Form = function Form(_ref) {
     theme: "secondary",
     outline: true,
     disabled: status === 'loading',
-    className: classNames__default["default"](['mr-2', _defineProperty__default["default"]({}, cancelClassName, cancelClassName !== null)])
+    className: classNames__default["default"](['me-2', _defineProperty__default["default"]({}, cancelClassName, cancelClassName !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
     id: "PyxZY2",
     defaultMessage: [{
@@ -647,7 +647,7 @@ var Form = function Form(_ref) {
     }]
   })) : null, buttons !== null ? /*#__PURE__*/React__default["default"].createElement(Buttons, {
     buttons: buttons,
-    className: styles$q.buttons
+    className: styles$r.buttons
   }) : /*#__PURE__*/React__default["default"].createElement(Button$1, {
     type: "submit",
     theme: "primary",
@@ -666,7 +666,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 = {
@@ -699,12 +699,12 @@ var Link = function Link(_ref) {
       props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
 
   return external ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({
-    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$p.withoutStyle, withoutStyle)]),
+    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$q.withoutStyle, withoutStyle)]),
     href: href,
     target: target,
     rel: rel
   }, props), /*#__PURE__*/React__default["default"].createElement(Label, null, children)) : /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, Object.assign({
-    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$p.withoutStyle, withoutStyle)]),
+    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$q.withoutStyle, withoutStyle)]),
     to: href
   }, props), /*#__PURE__*/React__default["default"].createElement(Label, null, children));
 };
@@ -853,7 +853,7 @@ var Card = function Card(_ref) {
   if (onClick !== null) {
     return /*#__PURE__*/React__default["default"].createElement("button", {
       type: "button",
-      className: classNames__default["default"](['p-0', 'text-left', cardClassName]),
+      className: classNames__default["default"](['p-0', 'text-start', cardClassName]),
       onClick: onClick
     }, cardInner);
   }
@@ -939,7 +939,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 = {
@@ -963,14 +963,14 @@ var FormPanel = function FormPanel(_ref) {
       props = _objectWithoutProperties__default["default"](_ref, _excluded$2);
 
   return /*#__PURE__*/React__default["default"].createElement(Card, Object.assign({
-    className: classNames__default["default"]([styles$o.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"]([styles$p.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, props), description, loading ? /*#__PURE__*/React__default["default"].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: core.PropTypes.menuItems,
@@ -999,7 +999,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("nav", {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement("ol", {
-    className: classNames__default["default"]([styles$n.container, 'breadcrumb', 'mb-0', {
+    className: classNames__default["default"]([styles$o.container, 'breadcrumb', 'mb-0', {
       'p-0': withoutBar,
       'bg-transparent': withoutBar,
       'rounded-0': withoutBar,
@@ -1017,7 +1017,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
     return /*#__PURE__*/React__default["default"].createElement("li", {
       className: classNames__default["default"](['breadcrumb-item', (_ref3 = {
         active: active
-      }, _defineProperty__default["default"](_ref3, styles$n.arrow, separator === 'arrow'), _defineProperty__default["default"](_ref3, "text-".concat(theme), active && theme !== null), _ref3)]),
+      }, _defineProperty__default["default"](_ref3, styles$o.arrow, separator === 'arrow'), _defineProperty__default["default"](_ref3, "text-".concat(theme), active && theme !== null), _ref3)]),
       key: "item-".concat(index)
     }, active ? /*#__PURE__*/React__default["default"].createElement(Label, null, label) : null, !active && url ? /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, {
       to: url,
@@ -1033,6 +1033,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: core.PropTypes.menuItems,
@@ -1074,7 +1076,7 @@ var Dropdown = function Dropdown(_ref) {
   }, [refContainer.current, onClickOutside]);
   hooks.useDocumentEvent('click', onDocumentClick, visible);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['dropdown-menu', (_ref2 = {}, _defineProperty__default["default"](_ref2, "dropdown-menu-".concat(align), align !== null), _defineProperty__default["default"](_ref2, "show", visible), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]),
+    className: classNames__default["default"](['dropdown-menu', (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$n[align], align !== null), _defineProperty__default["default"](_ref2, "show", visible), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]),
     ref: refContainer
   }, children !== null ? children : items.map(function (it, index) {
     var _ref3;
@@ -1099,10 +1101,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) {
@@ -1114,16 +1117,16 @@ var Dropdown = function Dropdown(_ref) {
         onClickItem(e);
       }
     } : null;
-    return ItemComponent !== null ? /*#__PURE__*/React__default["default"].createElement(ItemComponent, Object.assign({
+    return ItemComponent !== null ? /*#__PURE__*/React__default["default"].createElement("li", null, /*#__PURE__*/React__default["default"].createElement(ItemComponent, Object.assign({
       key: "item-".concat(index),
-      className: classNames__default["default"](['d-block', 'w-100', (_ref3 = {
-        'dropdown-item': type === 'link',
+      className: classNames__default["default"]([(_ref3 = {
+        'dropdown-item': type === 'link' || type === 'button',
         'dropdown-divider': type === 'divider',
         'dropdown-header': type === 'header',
         active: active
       }, _defineProperty__default["default"](_ref3, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref3, customClassName, customClassName !== null), _ref3)]),
       onClick: finalOnClickItem
-    }, itemProps), label !== null ? /*#__PURE__*/React__default["default"].createElement(Label, null, label) : itemChildren) : null;
+    }, itemProps), label !== null ? /*#__PURE__*/React__default["default"].createElement(Label, null, label) : itemChildren)) : null;
   }));
 };
 
@@ -1332,6 +1335,10 @@ var Navbar = function Navbar(_ref) {
   }, [setMenuVisible, menuVisible]);
   return /*#__PURE__*/React__default["default"].createElement("nav", {
     className: classNames__default["default"](['navbar', (_ref2 = {}, _defineProperty__default["default"](_ref2, "bg-".concat(theme), theme !== null), _defineProperty__default["default"](_ref2, "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), _defineProperty__default["default"](_ref2, "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), _defineProperty__default["default"](_ref2, "navbar-expand-".concat(size), !withoutCollapse), _defineProperty__default["default"](_ref2, 'py-2', compact), _defineProperty__default["default"](_ref2, 'px-2', compact), _defineProperty__default["default"](_ref2, 'flex-nowrap', noWrap), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)])
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classNames__default["default"](['container-fluid', {
+      'px-0': true
+    }])
   }, brand !== null && brandLink !== null ? /*#__PURE__*/React__default["default"].createElement(Link, {
     className: classNames__default["default"](['navbar-brand', _defineProperty__default["default"]({
       'py-0': compact
@@ -1358,7 +1365,7 @@ var Navbar = function Navbar(_ref) {
     className: classNames__default["default"](['navbar-collapse', 'collapse', {
       show: menuVisible
     }])
-  }, children) : children);
+  }, children) : children));
 };
 
 Navbar.propTypes = propTypes$w;
@@ -1716,12 +1723,10 @@ var ModalDialog = function ModalDialog(_ref) {
     className: "modal-title"
   }, /*#__PURE__*/React__default["default"].createElement(Label, null, title)), /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: "close text-light",
+    className: "btn-close",
     "aria-label": "Close",
     onClick: onClickClose
-  }, /*#__PURE__*/React__default["default"].createElement("span", {
-    "aria-hidden": "true"
-  }, "\xD7"))), /*#__PURE__*/React__default["default"].createElement("div", {
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"](['modal-body', styles$i.body, {// [`bg-${theme}`]: theme !== null,
       // 'text-light': theme === 'dark',
     }])
@@ -2300,17 +2305,17 @@ var Media = function Media(_ref) {
       bodyClassName = _ref.bodyClassName,
       titleClassName = _ref.titleClassName;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['media', styles$c.container, _defineProperty__default["default"]({}, className, className !== null)])
+    className: classNames__default["default"](['card', styles$c.container, _defineProperty__default["default"]({}, className, className !== null)])
   }, typeof thumbnail === 'string' ? /*#__PURE__*/React__default["default"].createElement("img", {
     src: thumbnail,
     alt: title,
-    className: classNames__default["default"](['mr-3', styles$c.thumbnail, _defineProperty__default["default"]({
+    className: classNames__default["default"](['me-3', styles$c.thumbnail, _defineProperty__default["default"]({
       'align-self-start': thumbnailAlign === 'top',
       'align-self-center': thumbnailAlign === 'center',
       'align-self-end': thumbnailAlign === 'bottom'
     }, thumbnailClassName, thumbnailClassName !== null)])
   }) : thumbnail, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['media-body', styles$c.body, _defineProperty__default["default"]({}, bodyClassName, bodyClassName !== null)])
+    className: classNames__default["default"](['card-body', styles$c.body, _defineProperty__default["default"]({}, bodyClassName, bodyClassName !== null)])
   }, title !== null ? /*#__PURE__*/React__default["default"].createElement("h5", {
     className: classNames__default["default"](['mt-0', styles$c.title, _defineProperty__default["default"]({}, titleClassName, titleClassName !== null)])
   }, /*#__PURE__*/React__default["default"].createElement(Label, null, title)) : null, children));
@@ -2356,6 +2361,10 @@ var target = PropTypes__default["default"].oneOf(['_blank', '_self', '_parent'])
 var interaction = PropTypes__default["default"].oneOf(['tap', 'swipe']);
 PropTypes__default["default"].arrayOf(interaction);
 PropTypes__default["default"].objectOf(PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].array]));
+PropTypes__default["default"].shape({
+  currentTime: PropTypes__default["default"].number,
+  duration: PropTypes__default["default"].number
+});
 /**
  * Site
  */
@@ -2403,7 +2412,7 @@ PropTypes__default["default"].oneOf(bootstrapThemeStrings);
 PropTypes__default["default"].oneOf([].concat(bootstrapThemeStrings, ['outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-light', 'outline-dark', 'outline-link', null]));
 PropTypes__default["default"].oneOf(['lg', 'sm', null]);
 PropTypes__default["default"].oneOf(['lg', 'sm', null]);
-PropTypes__default["default"].oneOf(['left', 'right']);
+PropTypes__default["default"].oneOf(['start', 'end']);
 var component = PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].func]);
 PropTypes__default["default"].objectOf(component);
 /**
@@ -2754,7 +2763,8 @@ PropTypes__default["default"].shape({
   screen: PropTypes__default["default"].string,
   screens: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
   width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number
+  height: PropTypes__default["default"].number,
+  landscape: PropTypes__default["default"].number
 });
 PropTypes__default["default"].oneOf(['view', 'placeholder', 'edit', 'preview', 'static', 'capture']);
 /**
@@ -3057,7 +3067,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) {
@@ -3349,6 +3359,7 @@ var styles$6 = {"container":"micromag-core-screens-screen-placeholder-container"
 var propTypes$9 = {
   screen: core.PropTypes.storyComponent.isRequired,
   renderContext: core.PropTypes.renderContext,
+  screenState: PropTypes__default["default"].string,
   active: PropTypes__default["default"].bool,
   current: PropTypes__default["default"].bool,
   component: PropTypes__default["default"].node,
@@ -3363,6 +3374,7 @@ var propTypes$9 = {
 var defaultProps$9 = {
   active: false,
   renderContext: null,
+  screenState: null,
   current: false,
   component: null,
   components: null,
@@ -3377,6 +3389,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,
@@ -3393,7 +3406,8 @@ var Screen = function Screen(_ref) {
   var ScreenComponent = CustomScreenComponent || ContextScreenComponent;
   return /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen,
-    renderContext: renderContext
+    renderContext: renderContext,
+    screenState: screenState
   }, ScreenComponent !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: className
   }, /*#__PURE__*/React__default["default"].createElement(ScreenComponent, Object.assign({}, screen, {
@@ -3416,12 +3430,14 @@ var Screen$1 = /*#__PURE__*/React__default["default"].memo(Screen);
 var propTypes$8 = {
   screen: core.PropTypes.component.isRequired,
   layout: PropTypes__default["default"].string,
+  screenState: PropTypes__default["default"].string,
   width: PropTypes__default["default"].number,
   height: PropTypes__default["default"].number,
   className: PropTypes__default["default"].string
 };
 var defaultProps$8 = {
   layout: undefined,
+  screenState: null,
   width: null,
   height: null,
   className: null
@@ -3432,6 +3448,7 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
       layout = _ref.layout,
       width = _ref.width,
       height = _ref.height,
+      screenState = _ref.screenState,
       className = _ref.className;
   var screenSize = React.useMemo(function () {
     return {
@@ -3445,7 +3462,8 @@ var ScreenPlaceholder = function ScreenPlaceholder(_ref) {
     size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen,
-    renderContext: "placeholder"
+    renderContext: "placeholder",
+    screenState: screenState
   }, /*#__PURE__*/React__default["default"].createElement(Screen$1, {
     screen: screen,
     layout: layout,
@@ -3461,11 +3479,13 @@ var styles$5 = {"container":"micromag-core-screens-preview-container"};
 
 var propTypes$7 = {
   screen: core.PropTypes.component.isRequired,
+  screenState: PropTypes__default["default"].string,
   width: PropTypes__default["default"].number,
   height: PropTypes__default["default"].number,
   className: PropTypes__default["default"].string
 };
 var defaultProps$7 = {
+  screenState: null,
   width: null,
   height: null,
   className: null
@@ -3473,6 +3493,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;
@@ -3488,7 +3509,8 @@ var ScreenPreview = function ScreenPreview(_ref) {
     size: screenSize
   }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
     data: screen,
-    renderContext: "preview"
+    renderContext: "preview",
+    screenState: screenState
   }, /*#__PURE__*/React__default["default"].createElement(Screen$1, {
     screen: screen,
     renderContext: "preview",