@micromag/core 0.3.252 → 0.3.262

package/assets/css/styles.css

@@ -14,12 +14,12 @@
 .micromag-core-panels-container{position:static}
 .micromag-core-panels-panel-container{position:static}
 .micromag-core-partials-collapsable-panel-container .micromag-core-partials-collapsable-panel-top{border-bottom:1px solid #dedede}.micromag-core-partials-collapsable-panel-container .micromag-core-partials-collapsable-panel-button{display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;padding:.25rem 0;font-size:.9rem;font-weight:700;text-align:left}.micromag-core-partials-collapsable-panel-container .micromag-core-partials-collapsable-panel-label{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.micromag-core-partials-collapsable-panel-container .micromag-core-partials-collapsable-panel-content{max-height:0;padding-top:1rem;overflow:hidden;-webkit-transition:max-height .2s ease-out;-o-transition:max-height .2s ease-out;transition:max-height .2s ease-out}.micromag-core-partials-collapsable-panel-container.micromag-core-partials-collapsable-panel-isOpened .micromag-core-partials-collapsable-panel-content{max-height:500px}
-.micromag-core-partials-placeholder-block-container{padding:2px;mix-blend-mode:difference}.micromag-core-partials-placeholder-block-container .micromag-core-partials-placeholder-block-box{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0 auto;background-color:hsla(0,0%,100%,.6)}.micromag-core-partials-placeholder-block-container.micromag-core-partials-placeholder-block-outline{margin:2px 0;border:2px solid hsla(0,0%,100%,.6)}.micromag-core-partials-placeholder-block-container.micromag-core-partials-placeholder-block-outline .micromag-core-partials-placeholder-block-box{background-color:rgba(0,0,0,0)}
+.micromag-core-partials-placeholder-block-container{padding:2px}.micromag-core-partials-placeholder-block-container.micromag-core-partials-placeholder-block-outline{margin:2px 0;border:2px solid hsla(0,0%,100%,.6)}.micromag-core-partials-placeholder-block-container.micromag-core-partials-placeholder-block-withInvertedColors{mix-blend-mode:difference}.micromag-core-partials-placeholder-block-box{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0 auto;background-color:currentColor}.micromag-core-partials-placeholder-block-withInvertedColors .micromag-core-partials-placeholder-block-box{background-color:hsla(0,0%,100%,.6)}.micromag-core-partials-placeholder-block-outline .micromag-core-partials-placeholder-block-box{background-color:rgba(0,0,0,0)}
 .micromag-core-partials-empty-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;border:2px dashed #6c6c6c;color:#6c6c6c}.micromag-core-partials-empty-container .micromag-core-partials-empty-middle{text-align:center}.micromag-core-partials-empty-container.micromag-core-partials-empty-withoutBorder{border:0}.micromag-core-partials-empty-container.micromag-core-partials-empty-invertColor{border:2px dashed #343434;color:#343434}
 
 .micromag-core-partials-slideshow-container{position:relative;overflow:hidden}.micromag-core-partials-slideshow-container .micromag-core-partials-slideshow-item,.micromag-core-partials-slideshow-container .micromag-core-partials-slideshow-items{width:100%;height:100%}.micromag-core-partials-slideshow-container .micromag-core-partials-slideshow-item{position:absolute;-webkit-transition:-webkit-transform .3s ease-out;transition:-webkit-transform .3s ease-out;-o-transition:transform .3s ease-out;transition:transform .3s ease-out;transition:transform .3s ease-out, -webkit-transform .3s ease-out}.micromag-core-partials-slideshow-container .micromag-core-partials-slideshow-item.micromag-core-partials-slideshow-prev{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%)}.micromag-core-partials-slideshow-container .micromag-core-partials-slideshow-item.micromag-core-partials-slideshow-current{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.micromag-core-partials-slideshow-container .micromag-core-partials-slideshow-item.micromag-core-partials-slideshow-next{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}
 .micromag-core-placeholders-icon{color:#1c1c1c}
-.micromag-core-partials-placeholder-text-container{width:100%;padding:2px;mix-blend-mode:difference}.micromag-core-partials-placeholder-text-container .micromag-core-partials-placeholder-text-line{height:16px;background-color:hsla(0,0%,100%,.6)}
+.micromag-core-partials-placeholder-text-container{width:100%;padding:2px}.micromag-core-partials-placeholder-text-container.micromag-core-partials-placeholder-text-withInvertedColors{mix-blend-mode:difference}.micromag-core-partials-placeholder-text-line{height:16px;background-color:currentColor}.micromag-core-partials-placeholder-text-withInvertedColors .micromag-core-partials-placeholder-text-line{background-color:hsla(0,0%,100%,.6)}
 .micromag-core-placeholders-map-container:before{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-core-placeholders-map-container{position:relative}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon{position:absolute;width:15%;height:15%;color:#1c1c1c}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:first-child{top:10%;left:40%}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:nth-child(2){top:35%;left:60%}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:nth-child(3){top:50%;left:15%}.micromag-core-placeholders-map-container .micromag-core-placeholders-map-icon:nth-child(4){top:70%;left:60%}.micromag-core-placeholders-map-container:before{content:"";display:block;opacity:.2;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKwAAAEyCAYAAABnKjtfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDU4NzhDN0UyODU2MTFFQkI3MTBBRTZGMTAwMEE1QTAiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDU4NzhDN0QyODU2MTFFQkI3MTBBRTZGMTAwMEE1QTAiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowNTg3OEM3OTI4NTYxMUVCQjcxMEFFNkYxMDAwQTVBMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowNTg3OEM3QTI4NTYxMUVCQjcxMEFFNkYxMDAwQTVBMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpB4mwIAAAxNSURBVHja7J1B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");background-size:cover}
 .micromag-core-placeholders-video-360-container .micromag-core-placeholders-video-360-box{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.micromag-core-placeholders-video-360-container .micromag-core-placeholders-video-360-icon{margin-bottom:5px;color:#1c1c1c}.micromag-core-placeholders-video-360-container .micromag-core-placeholders-video-360-label{color:#1c1c1c;font-size:.75em}
 .micromag-core-screens-screen-sizer-container,.micromag-core-screens-screen-sizer-frame{position:relative}.micromag-core-screens-screen-sizer-screen{position:absolute;top:0;left:0;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}

package/es/components.js

@@ -70,7 +70,7 @@ Label.defaultProps = defaultProps$L;
 
 var styles$w = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withAnimations":"micromag-core-buttons-button-withAnimations","icon-right":"micromag-core-buttons-button-icon-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
 
-var _excluded$a = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
+var _excluded$b = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
 var propTypes$K = {
   type: PropTypes$1.string,
   theme: PropTypes.buttonTheme,
@@ -169,7 +169,7 @@ var Button$1 = function Button(_ref) {
       iconClassName = _ref.iconClassName,
       labelClassName = _ref.labelClassName,
       refButton = _ref.refButton,
-      props = _objectWithoutProperties(_ref, _excluded$a);
+      props = _objectWithoutProperties(_ref, _excluded$b);
 
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
@@ -228,7 +228,7 @@ Button$1.defaultProps = defaultProps$K;
 
 var styles$v = {};
 
-var _excluded$9 = ["className", "onClick", "theme"];
+var _excluded$a = ["className", "onClick", "theme"];
 var propTypes$J = {
   buttons: PropTypes.buttons,
   size: PropTypes.buttonSize,
@@ -268,7 +268,7 @@ var Buttons = function Buttons(_ref) {
         _onClick = _button$onClick === void 0 ? null : _button$onClick,
         _button$theme = button.theme,
         buttonTheme = _button$theme === void 0 ? null : _button$theme,
-        buttonProps = _objectWithoutProperties(button, _excluded$9);
+        buttonProps = _objectWithoutProperties(button, _excluded$a);
 
     var fixedProps = {
       key: "button-".concat(index),
@@ -291,7 +291,7 @@ var Buttons = function Buttons(_ref) {
 Buttons.propTypes = propTypes$J;
 Buttons.defaultProps = defaultProps$J;
 
-var _excluded$8 = ["className"];
+var _excluded$9 = ["className"];
 var propTypes$I = {
   className: PropTypes$1.string
 };
@@ -301,7 +301,7 @@ var defaultProps$I = {
 
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$8);
+      props = _objectWithoutProperties(_ref, _excluded$9);
 
   return /*#__PURE__*/React.createElement(Button$1, Object.assign({
     className: classNames(['px-2', _defineProperty({}, className, className)]),
@@ -318,7 +318,7 @@ BackButton.defaultProps = defaultProps$I;
 
 var styles$u = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
-var _excluded$7 = ["type"],
+var _excluded$8 = ["type"],
     _excluded2 = ["component", "id", "settings"];
 var propTypes$H = {
   name: PropTypes$1.string,
@@ -362,7 +362,7 @@ var FieldForm = function FieldForm(_ref) {
   var _ref2 = field || {},
       _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? null : _ref2$type,
-      fieldProps = _objectWithoutProperties(_ref2, _excluded$7);
+      fieldProps = _objectWithoutProperties(_ref2, _excluded$8);
 
   var fieldDefinition = fieldsManager.getDefinition(type) || null;
 
@@ -670,7 +670,7 @@ Form.defaultProps = defaultProps$G;
 
 var styles$t = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
-var _excluded$6 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
+var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
 var propTypes$F = {
   href: PropTypes$1.string,
   external: PropTypes$1.bool,
@@ -698,7 +698,7 @@ var Link = function Link(_ref) {
       rel = _ref.rel,
       className = _ref.className,
       withoutStyle = _ref.withoutStyle,
-      props = _objectWithoutProperties(_ref, _excluded$6);
+      props = _objectWithoutProperties(_ref, _excluded$7);
 
   return external ? /*#__PURE__*/React.createElement("a", Object.assign({
     className: classNames([className, _defineProperty({}, styles$t.withoutStyle, withoutStyle)]),
@@ -714,7 +714,7 @@ var Link = function Link(_ref) {
 Link.propTypes = propTypes$F;
 Link.defaultProps = defaultProps$F;
 
-var _excluded$5 = ["label", "className"];
+var _excluded$6 = ["label", "className"];
 var propTypes$E = {
   href: PropTypes$1.string,
   header: PropTypes$1.node,
@@ -802,7 +802,7 @@ var Card = function Card(_ref) {
     var label = _ref2.label,
         _ref2$className = _ref2.className,
         linkClassName = _ref2$className === void 0 ? null : _ref2$className,
-        linkProps = _objectWithoutProperties(_ref2, _excluded$5);
+        linkProps = _objectWithoutProperties(_ref2, _excluded$6);
 
     return /*#__PURE__*/React.createElement(Link, Object.assign({
       key: "link-".concat(label, "-").concat(index),
@@ -943,7 +943,7 @@ Spinner.defaultProps = defaultProps$D;
 
 var styles$s = {};
 
-var _excluded$4 = ["description", "loading", "children", "className"];
+var _excluded$5 = ["description", "loading", "children", "className"];
 var propTypes$C = {
   description: PropTypes$1.node,
   loading: PropTypes$1.bool,
@@ -962,7 +962,7 @@ var FormPanel = function FormPanel(_ref) {
       loading = _ref.loading,
       children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$4);
+      props = _objectWithoutProperties(_ref, _excluded$5);
 
   return /*#__PURE__*/React.createElement(Card, Object.assign({
     className: classNames([styles$s.container, _defineProperty({}, className, className !== null)])
@@ -1035,7 +1035,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
 Breadcrumb.propTypes = propTypes$B;
 Breadcrumb.defaultProps = defaultProps$B;
 
-var _excluded$3 = ["type", "className", "label", "children", "onClick", "active"];
+var _excluded$4 = ["type", "className", "label", "children", "onClick", "active"];
 var propTypes$A = {
   items: PropTypes.menuItems,
   children: PropTypes$1.node,
@@ -1108,7 +1108,7 @@ var Dropdown = function Dropdown(_ref) {
         customOnClick = _it$onClick === void 0 ? null : _it$onClick,
         _it$active = it.active,
         active = _it$active === void 0 ? false : _it$active,
-        itemProps = _objectWithoutProperties(it, _excluded$3);
+        itemProps = _objectWithoutProperties(it, _excluded$4);
 
     var ItemComponent = 'div';
 
@@ -1147,7 +1147,7 @@ var Dropdown = function Dropdown(_ref) {
 Dropdown.propTypes = propTypes$A;
 Dropdown.defaultProps = defaultProps$A;
 
-var _excluded$2 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
+var _excluded$3 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
 var propTypes$z = {
   items: PropTypes.menuItems,
   tagName: PropTypes$1.string,
@@ -1237,7 +1237,7 @@ var Menu = function Menu(_ref) {
         active = _it$active === void 0 ? false : _it$active,
         _it$onClick = it.onClick,
         customOnClick = _it$onClick === void 0 ? null : _it$onClick,
-        itemProps = _objectWithoutProperties(it, _excluded$2);
+        itemProps = _objectWithoutProperties(it, _excluded$3);
 
     var onClickItem = dropdown !== null ? function (e) {
       e.preventDefault();
@@ -2181,7 +2181,7 @@ var Detector = function Detector(_ref) {
 Detector.propTypes = propTypes$j;
 Detector.defaultProps = defaultProps$j;
 
-var styles$h = {"container":"micromag-core-partials-placeholder-block-container","box":"micromag-core-partials-placeholder-block-box","outline":"micromag-core-partials-placeholder-block-outline"};
+var styles$h = {"container":"micromag-core-partials-placeholder-block-container","outline":"micromag-core-partials-placeholder-block-outline","withInvertedColors":"micromag-core-partials-placeholder-block-withInvertedColors","box":"micromag-core-partials-placeholder-block-box"};
 
 var propTypes$i = {
   width: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
@@ -2189,7 +2189,8 @@ var propTypes$i = {
   outline: PropTypes$1.bool,
   className: PropTypes$1.string,
   boxClassName: PropTypes$1.string,
-  children: PropTypes$1.node
+  children: PropTypes$1.node,
+  withInvertedColors: PropTypes$1.bool
 };
 var defaultProps$i = {
   width: '100%',
@@ -2197,7 +2198,8 @@ var defaultProps$i = {
   outline: false,
   className: null,
   boxClassName: null,
-  children: null
+  children: null,
+  withInvertedColors: true
 };
 
 var PlaceholderBlock = function PlaceholderBlock(_ref) {
@@ -2208,9 +2210,10 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
       outline = _ref.outline,
       className = _ref.className,
       boxClassName = _ref.boxClassName,
+      withInvertedColors = _ref.withInvertedColors,
       children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$h.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$h.outline, outline), _ref2)])
+    className: classNames([styles$h.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$h.outline, outline), _defineProperty(_ref2, styles$h.withInvertedColors, withInvertedColors), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$h.box, _defineProperty({}, boxClassName, boxClassName !== null)]),
     style: {
@@ -3268,7 +3271,7 @@ var Audio = function Audio(_ref) {
   }));
 };
 
-var styles$c = {"container":"micromag-core-partials-placeholder-text-container","line":"micromag-core-partials-placeholder-text-line"};
+var styles$c = {"container":"micromag-core-partials-placeholder-text-container","withInvertedColors":"micromag-core-partials-placeholder-text-withInvertedColors","line":"micromag-core-partials-placeholder-text-line"};
 
 var propTypes$b = {
   lines: PropTypes$1.number,
@@ -3276,7 +3279,8 @@ var propTypes$b = {
   width: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
   height: PropTypes$1.oneOfType([PropTypes$1.number, PropTypes$1.string]),
   fontSize: PropTypes$1.number,
-  className: PropTypes$1.string
+  className: PropTypes$1.string,
+  withInvertedColors: PropTypes$1.bool
 };
 var defaultProps$b = {
   lines: 1,
@@ -3284,20 +3288,24 @@ var defaultProps$b = {
   width: '100%',
   height: null,
   fontSize: 16,
-  className: null
+  className: null,
+  withInvertedColors: true
 };
 
 var PlaceholderText = function PlaceholderText(_ref) {
+  var _ref2;
+
   var lines = _ref.lines,
       lineMargin = _ref.lineMargin,
       width = _ref.width,
       height = _ref.height,
       fontSize = _ref.fontSize,
-      className = _ref.className;
+      className = _ref.className,
+      withInvertedColors = _ref.withInvertedColors;
   var lineHeight = height !== null && isNumber(height) ? "".concat(Math.round(height * fontSize), "px") : height;
-  var oddWidth = isNumber(width) ? width * 0.9 : '90%';
+  var oddWidth = isNumber(width) ? width * 0.9 : '80%';
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$c.container, _defineProperty({}, className, className)])
+    className: classNames([styles$c.container, (_ref2 = {}, _defineProperty(_ref2, className, className), _defineProperty(_ref2, styles$c.withInvertedColors, withInvertedColors), _ref2)])
   }, _toConsumableArray(Array(lines)).map(function (e, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: "line-".concat(index),
@@ -3333,16 +3341,18 @@ var Button = function Button(_ref) {
   }));
 };
 
-/* eslint-disable react/prop-types */
+var _excluded$2 = ["width", "height", "className"];
 var Image = function Image(_ref) {
   var width = _ref.width,
       height = _ref.height,
-      className = _ref.className;
-  return /*#__PURE__*/React.createElement(PlaceholderBlock, {
+      className = _ref.className,
+      props = _objectWithoutProperties(_ref, _excluded$2);
+
+  return /*#__PURE__*/React.createElement(PlaceholderBlock, Object.assign({}, props, {
     width: width,
     height: height,
     className: className
-  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faImage,
     className: styles$d.icon
   }));
@@ -3422,7 +3432,9 @@ var Subtitle = function Subtitle(props) {
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 
 var TextPlaceholder = function TextPlaceholder(props) {
-  var _props$height = props.height,
+  var _props$className = props.className,
+      className = _props$className === void 0 ? null : _props$className,
+      _props$height = props.height,
       height = _props$height === void 0 ? 0.2 : _props$height,
       _props$lines = props.lines,
       lines = _props$lines === void 0 ? 4 : _props$lines,
@@ -3432,7 +3444,7 @@ var TextPlaceholder = function TextPlaceholder(props) {
     height: height,
     lines: lines,
     lineMargin: lineMargin,
-    className: classNames([props.className, styles$d.text])
+    className: classNames([className, styles$d.text])
   }));
 };
 
@@ -3445,11 +3457,17 @@ var Timeline = function Timeline(props) {
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Title$1 = function Title(props) {
+  var _props$height = props.height,
+      height = _props$height === void 0 ? 0.5 : _props$height,
+      _props$lines = props.lines,
+      lines = _props$lines === void 0 ? 2 : _props$lines,
+      _props$lineMargin = props.lineMargin,
+      lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
     className: classNames([props.className, styles$d.title]),
-    height: 0.5,
-    lines: 2,
-    lineMargin: 4
+    height: height,
+    lines: lines,
+    lineMargin: lineMargin
   }));
 };
 

package/es/utils.js

@@ -638,6 +638,38 @@ function getShadowCoords(angle, distance) {
   };
 }
 
+// import isObject from 'lodash/isObject';
+function getJustifyContent(horizontal) {
+  if (horizontal === 'left') return 'flex-start';
+  if (horizontal === 'middle') return 'center';
+  if (horizontal === 'right') return 'flex-end';
+  return null;
+}
+
+function getAlignItems(vertical) {
+  if (vertical === 'top') return 'flex-start';
+  if (vertical === 'middle') return 'center';
+  if (vertical === 'bottom') return 'flex-end';
+  return null;
+}
+
+var getStyleFromAlignment = function getStyleFromAlignment(value) {
+  if (value === null) {
+    return null;
+  }
+
+  var _value$horizontal = value.horizontal,
+      horizontal = _value$horizontal === void 0 ? null : _value$horizontal,
+      _value$vertical = value.vertical,
+      vertical = _value$vertical === void 0 ? null : _value$vertical;
+  var justifyContent = getJustifyContent(horizontal);
+  var alignItems = getAlignItems(vertical);
+  return {
+    justifyContent: justifyContent,
+    alignItems: alignItems
+  };
+};
+
 var getStyleFromColor = function getStyleFromColor() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'backgroundColor';
@@ -1109,4 +1141,4 @@ var getContrastingColor = function getContrastingColor(backgroundColor) {
   return tinycolor(color).spin(30).toString();
 };
 
-export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, getVideoSupportedMimes, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+export { convertStyleToString, copyToClipboard, createNullableOnChange, createUseEvent, easings, getColorAsString, getComponentFromName, getContrastingColor, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayersFromBackground, getLayoutParts, getMediaFilesAsArray, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getShadowCoords, getStyleFromAlignment, getStyleFromBorder, getStyleFromBox, getStyleFromColor, getStyleFromContainer, getStyleFromHighlight, getStyleFromImage, getStyleFromLink, getStyleFromMargin, getStyleFromText, getVideoSupportedMimes, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };

package/lib/components.js

@@ -111,7 +111,7 @@ Label.defaultProps = defaultProps$L;
 
 var styles$w = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withAnimations":"micromag-core-buttons-button-withAnimations","icon-right":"micromag-core-buttons-button-icon-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
 
-var _excluded$a = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
+var _excluded$b = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
 var propTypes$K = {
   type: PropTypes__default["default"].string,
   theme: core.PropTypes.buttonTheme,
@@ -210,7 +210,7 @@ var Button$1 = function Button(_ref) {
       iconClassName = _ref.iconClassName,
       labelClassName = _ref.labelClassName,
       refButton = _ref.refButton,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$a);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$b);
 
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React__default["default"].createElement(Label, null, finalLabel) : null;
@@ -269,7 +269,7 @@ Button$1.defaultProps = defaultProps$K;
 
 var styles$v = {};
 
-var _excluded$9 = ["className", "onClick", "theme"];
+var _excluded$a = ["className", "onClick", "theme"];
 var propTypes$J = {
   buttons: core.PropTypes.buttons,
   size: core.PropTypes.buttonSize,
@@ -309,7 +309,7 @@ var Buttons = function Buttons(_ref) {
         _onClick = _button$onClick === void 0 ? null : _button$onClick,
         _button$theme = button.theme,
         buttonTheme = _button$theme === void 0 ? null : _button$theme,
-        buttonProps = _objectWithoutProperties__default["default"](button, _excluded$9);
+        buttonProps = _objectWithoutProperties__default["default"](button, _excluded$a);
 
     var fixedProps = {
       key: "button-".concat(index),
@@ -332,7 +332,7 @@ var Buttons = function Buttons(_ref) {
 Buttons.propTypes = propTypes$J;
 Buttons.defaultProps = defaultProps$J;
 
-var _excluded$8 = ["className"];
+var _excluded$9 = ["className"];
 var propTypes$I = {
   className: PropTypes__default["default"].string
 };
@@ -342,7 +342,7 @@ var defaultProps$I = {
 
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$9);
 
   return /*#__PURE__*/React__default["default"].createElement(Button$1, Object.assign({
     className: classNames__default["default"](['px-2', _defineProperty__default["default"]({}, className, className)]),
@@ -359,7 +359,7 @@ BackButton.defaultProps = defaultProps$I;
 
 var styles$u = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
-var _excluded$7 = ["type"],
+var _excluded$8 = ["type"],
     _excluded2 = ["component", "id", "settings"];
 var propTypes$H = {
   name: PropTypes__default["default"].string,
@@ -403,7 +403,7 @@ var FieldForm = function FieldForm(_ref) {
   var _ref2 = field || {},
       _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? null : _ref2$type,
-      fieldProps = _objectWithoutProperties__default["default"](_ref2, _excluded$7);
+      fieldProps = _objectWithoutProperties__default["default"](_ref2, _excluded$8);
 
   var fieldDefinition = fieldsManager.getDefinition(type) || null;
 
@@ -711,7 +711,7 @@ Form.defaultProps = defaultProps$G;
 
 var styles$t = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
-var _excluded$6 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
+var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
 var propTypes$F = {
   href: PropTypes__default["default"].string,
   external: PropTypes__default["default"].bool,
@@ -739,7 +739,7 @@ var Link = function Link(_ref) {
       rel = _ref.rel,
       className = _ref.className,
       withoutStyle = _ref.withoutStyle,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$6);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
 
   return external ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({
     className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$t.withoutStyle, withoutStyle)]),
@@ -755,7 +755,7 @@ var Link = function Link(_ref) {
 Link.propTypes = propTypes$F;
 Link.defaultProps = defaultProps$F;
 
-var _excluded$5 = ["label", "className"];
+var _excluded$6 = ["label", "className"];
 var propTypes$E = {
   href: PropTypes__default["default"].string,
   header: PropTypes__default["default"].node,
@@ -843,7 +843,7 @@ var Card = function Card(_ref) {
     var label = _ref2.label,
         _ref2$className = _ref2.className,
         linkClassName = _ref2$className === void 0 ? null : _ref2$className,
-        linkProps = _objectWithoutProperties__default["default"](_ref2, _excluded$5);
+        linkProps = _objectWithoutProperties__default["default"](_ref2, _excluded$6);
 
     return /*#__PURE__*/React__default["default"].createElement(Link, Object.assign({
       key: "link-".concat(label, "-").concat(index),
@@ -984,7 +984,7 @@ Spinner.defaultProps = defaultProps$D;
 
 var styles$s = {};
 
-var _excluded$4 = ["description", "loading", "children", "className"];
+var _excluded$5 = ["description", "loading", "children", "className"];
 var propTypes$C = {
   description: PropTypes__default["default"].node,
   loading: PropTypes__default["default"].bool,
@@ -1003,7 +1003,7 @@ var FormPanel = function FormPanel(_ref) {
       loading = _ref.loading,
       children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$5);
 
   return /*#__PURE__*/React__default["default"].createElement(Card, Object.assign({
     className: classNames__default["default"]([styles$s.container, _defineProperty__default["default"]({}, className, className !== null)])
@@ -1076,7 +1076,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
 Breadcrumb.propTypes = propTypes$B;
 Breadcrumb.defaultProps = defaultProps$B;
 
-var _excluded$3 = ["type", "className", "label", "children", "onClick", "active"];
+var _excluded$4 = ["type", "className", "label", "children", "onClick", "active"];
 var propTypes$A = {
   items: core.PropTypes.menuItems,
   children: PropTypes__default["default"].node,
@@ -1149,7 +1149,7 @@ var Dropdown = function Dropdown(_ref) {
         customOnClick = _it$onClick === void 0 ? null : _it$onClick,
         _it$active = it.active,
         active = _it$active === void 0 ? false : _it$active,
-        itemProps = _objectWithoutProperties__default["default"](it, _excluded$3);
+        itemProps = _objectWithoutProperties__default["default"](it, _excluded$4);
 
     var ItemComponent = 'div';
 
@@ -1188,7 +1188,7 @@ var Dropdown = function Dropdown(_ref) {
 Dropdown.propTypes = propTypes$A;
 Dropdown.defaultProps = defaultProps$A;
 
-var _excluded$2 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
+var _excluded$3 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
 var propTypes$z = {
   items: core.PropTypes.menuItems,
   tagName: PropTypes__default["default"].string,
@@ -1278,7 +1278,7 @@ var Menu = function Menu(_ref) {
         active = _it$active === void 0 ? false : _it$active,
         _it$onClick = it.onClick,
         customOnClick = _it$onClick === void 0 ? null : _it$onClick,
-        itemProps = _objectWithoutProperties__default["default"](it, _excluded$2);
+        itemProps = _objectWithoutProperties__default["default"](it, _excluded$3);
 
     var onClickItem = dropdown !== null ? function (e) {
       e.preventDefault();
@@ -2222,7 +2222,7 @@ var Detector = function Detector(_ref) {
 Detector.propTypes = propTypes$j;
 Detector.defaultProps = defaultProps$j;
 
-var styles$h = {"container":"micromag-core-partials-placeholder-block-container","box":"micromag-core-partials-placeholder-block-box","outline":"micromag-core-partials-placeholder-block-outline"};
+var styles$h = {"container":"micromag-core-partials-placeholder-block-container","outline":"micromag-core-partials-placeholder-block-outline","withInvertedColors":"micromag-core-partials-placeholder-block-withInvertedColors","box":"micromag-core-partials-placeholder-block-box"};
 
 var propTypes$i = {
   width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
@@ -2230,7 +2230,8 @@ var propTypes$i = {
   outline: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   boxClassName: PropTypes__default["default"].string,
-  children: PropTypes__default["default"].node
+  children: PropTypes__default["default"].node,
+  withInvertedColors: PropTypes__default["default"].bool
 };
 var defaultProps$i = {
   width: '100%',
@@ -2238,7 +2239,8 @@ var defaultProps$i = {
   outline: false,
   className: null,
   boxClassName: null,
-  children: null
+  children: null,
+  withInvertedColors: true
 };
 
 var PlaceholderBlock = function PlaceholderBlock(_ref) {
@@ -2249,9 +2251,10 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
       outline = _ref.outline,
       className = _ref.className,
       boxClassName = _ref.boxClassName,
+      withInvertedColors = _ref.withInvertedColors,
       children = _ref.children;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$h.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$h.outline, outline), _ref2)])
+    className: classNames__default["default"]([styles$h.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$h.outline, outline), _defineProperty__default["default"](_ref2, styles$h.withInvertedColors, withInvertedColors), _ref2)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames__default["default"]([styles$h.box, _defineProperty__default["default"]({}, boxClassName, boxClassName !== null)]),
     style: {
@@ -3309,7 +3312,7 @@ var Audio = function Audio(_ref) {
   }));
 };
 
-var styles$c = {"container":"micromag-core-partials-placeholder-text-container","line":"micromag-core-partials-placeholder-text-line"};
+var styles$c = {"container":"micromag-core-partials-placeholder-text-container","withInvertedColors":"micromag-core-partials-placeholder-text-withInvertedColors","line":"micromag-core-partials-placeholder-text-line"};
 
 var propTypes$b = {
   lines: PropTypes__default["default"].number,
@@ -3317,7 +3320,8 @@ var propTypes$b = {
   width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   height: PropTypes__default["default"].oneOfType([PropTypes__default["default"].number, PropTypes__default["default"].string]),
   fontSize: PropTypes__default["default"].number,
-  className: PropTypes__default["default"].string
+  className: PropTypes__default["default"].string,
+  withInvertedColors: PropTypes__default["default"].bool
 };
 var defaultProps$b = {
   lines: 1,
@@ -3325,20 +3329,24 @@ var defaultProps$b = {
   width: '100%',
   height: null,
   fontSize: 16,
-  className: null
+  className: null,
+  withInvertedColors: true
 };
 
 var PlaceholderText = function PlaceholderText(_ref) {
+  var _ref2;
+
   var lines = _ref.lines,
       lineMargin = _ref.lineMargin,
       width = _ref.width,
       height = _ref.height,
       fontSize = _ref.fontSize,
-      className = _ref.className;
+      className = _ref.className,
+      withInvertedColors = _ref.withInvertedColors;
   var lineHeight = height !== null && isNumber__default["default"](height) ? "".concat(Math.round(height * fontSize), "px") : height;
-  var oddWidth = isNumber__default["default"](width) ? width * 0.9 : '90%';
+  var oddWidth = isNumber__default["default"](width) ? width * 0.9 : '80%';
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$c.container, _defineProperty__default["default"]({}, className, className)])
+    className: classNames__default["default"]([styles$c.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className), _defineProperty__default["default"](_ref2, styles$c.withInvertedColors, withInvertedColors), _ref2)])
   }, _toConsumableArray__default["default"](Array(lines)).map(function (e, index) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: "line-".concat(index),
@@ -3374,16 +3382,18 @@ var Button = function Button(_ref) {
   }));
 };
 
-/* eslint-disable react/prop-types */
+var _excluded$2 = ["width", "height", "className"];
 var Image = function Image(_ref) {
   var width = _ref.width,
       height = _ref.height,
-      className = _ref.className;
-  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, {
+      className = _ref.className,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$2);
+
+  return /*#__PURE__*/React__default["default"].createElement(PlaceholderBlock, Object.assign({}, props, {
     width: width,
     height: height,
     className: className
-  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
+  }), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
     icon: faImage.faImage,
     className: styles$d.icon
   }));
@@ -3463,7 +3473,9 @@ var Subtitle = function Subtitle(props) {
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 
 var TextPlaceholder = function TextPlaceholder(props) {
-  var _props$height = props.height,
+  var _props$className = props.className,
+      className = _props$className === void 0 ? null : _props$className,
+      _props$height = props.height,
       height = _props$height === void 0 ? 0.2 : _props$height,
       _props$lines = props.lines,
       lines = _props$lines === void 0 ? 4 : _props$lines,
@@ -3473,7 +3485,7 @@ var TextPlaceholder = function TextPlaceholder(props) {
     height: height,
     lines: lines,
     lineMargin: lineMargin,
-    className: classNames__default["default"]([props.className, styles$d.text])
+    className: classNames__default["default"]([className, styles$d.text])
   }));
 };
 
@@ -3486,11 +3498,17 @@ var Timeline = function Timeline(props) {
 
 /* eslint-disable react/jsx-props-no-spreading, react/destructuring-assignment, react/prop-types */
 var Title$1 = function Title(props) {
+  var _props$height = props.height,
+      height = _props$height === void 0 ? 0.5 : _props$height,
+      _props$lines = props.lines,
+      lines = _props$lines === void 0 ? 2 : _props$lines,
+      _props$lineMargin = props.lineMargin,
+      lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
   return /*#__PURE__*/React__default["default"].createElement(PlaceholderText, Object.assign({}, props, {
     className: classNames__default["default"]([props.className, styles$d.title]),
-    height: 0.5,
-    lines: 2,
-    lineMargin: 4
+    height: height,
+    lines: lines,
+    lineMargin: lineMargin
   }));
 };
 

package/lib/utils.js

@@ -657,6 +657,38 @@ function getShadowCoords(angle, distance) {
   };
 }
 
+// import isObject from 'lodash/isObject';
+function getJustifyContent(horizontal) {
+  if (horizontal === 'left') return 'flex-start';
+  if (horizontal === 'middle') return 'center';
+  if (horizontal === 'right') return 'flex-end';
+  return null;
+}
+
+function getAlignItems(vertical) {
+  if (vertical === 'top') return 'flex-start';
+  if (vertical === 'middle') return 'center';
+  if (vertical === 'bottom') return 'flex-end';
+  return null;
+}
+
+var getStyleFromAlignment = function getStyleFromAlignment(value) {
+  if (value === null) {
+    return null;
+  }
+
+  var _value$horizontal = value.horizontal,
+      horizontal = _value$horizontal === void 0 ? null : _value$horizontal,
+      _value$vertical = value.vertical,
+      vertical = _value$vertical === void 0 ? null : _value$vertical;
+  var justifyContent = getJustifyContent(horizontal);
+  var alignItems = getAlignItems(vertical);
+  return {
+    justifyContent: justifyContent,
+    alignItems: alignItems
+  };
+};
+
 var getStyleFromColor = function getStyleFromColor() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
   var property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'backgroundColor';
@@ -1159,6 +1191,7 @@ exports.getOptimalImageUrl = getOptimalImageUrl;
 exports.getScreenExtraField = getScreenExtraField;
 exports.getSecondsFromTime = getSecondsFromTime;
 exports.getShadowCoords = getShadowCoords;
+exports.getStyleFromAlignment = getStyleFromAlignment;
 exports.getStyleFromBorder = getStyleFromBorder;
 exports.getStyleFromBox = getStyleFromBox;
 exports.getStyleFromColor = getStyleFromColor;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.252",
+    "version": "0.3.262",
     "description": "",
     "keywords": [
         "javascript"
@@ -133,5 +133,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "67a8b8144a40086a6dfd98c9eb8c4b6b8ebb05b0"
+    "gitHead": "2299eaeb150cfdd14b4da321bf9089ab1e6383c2"
 }