@micromag/core 0.3.605 → 0.3.607

package/assets/css/styles.css

@@ -1,5 +1,6 @@
 .micromag-core-buttons-button-container.micromag-core-buttons-button-asLink,.micromag-core-buttons-button-container.micromag-core-buttons-button-withoutStyle{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-core-buttons-button-container .micromag-core-buttons-button-icon{display:block;position:relative}.micromag-core-buttons-button-container .micromag-core-buttons-button-icon,.micromag-core-buttons-button-container .micromag-core-buttons-button-label{-webkit-transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:-webkit-transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1);transition:transform .3s cubic-bezier(0,.6,.5,1),-webkit-transform .3s cubic-bezier(0,.6,.5,1)}.micromag-core-buttons-button-container.micromag-core-buttons-button-asLink{color:#a13dff;font-weight:700}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon .micromag-core-buttons-button-label{margin-left:.5em;-webkit-transform-origin:0 50%;-ms-transform-origin:0 50%;transform-origin:0 50%}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon .micromag-core-buttons-button-right{margin-left:.5em}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIcon.micromag-core-buttons-button-withAnimations.micromag-core-buttons-button-icon-right .micromag-core-buttons-button-label{-webkit-transform-origin:100% 50%;-ms-transform-origin:100% 50%;transform-origin:100% 50%}.micromag-core-buttons-button-container.micromag-core-buttons-button-withIconColumns{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.micromag-core-buttons-button-container.micromag-core-buttons-button-linkDisabled{opacity:.4;pointer-events:none;-webkit-text-decoration:none;text-decoration:none}.micromag-core-buttons-button-container:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff;box-shadow:0 0 2px 0 #fff;-webkit-box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff);box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff);outline:2px solid #000}
 
+.micromag-core-buttons-clear-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;display:-ms-flexbox!important;display:flex!important;font-family:inherit;padding:0;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;background-color:#494949!important;border-radius:4px;height:18px;justify-content:center;margin:0 8px 0 10px;padding:0 10px;width:18px}.micromag-core-buttons-clear-container .micromag-core-buttons-clear-icon{display:block}
 .micromag-core-forms-form-actions{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;margin-top:2rem}.micromag-core-forms-form-actions.micromag-core-forms-form-left{-ms-flex-pack:start;justify-content:flex-start}.micromag-core-forms-form-actions.micromag-core-forms-form-right{-ms-flex-pack:end;justify-content:flex-end}
 .micromag-core-partials-link-withoutStyle{color:inherit;-webkit-text-decoration:none;text-decoration:none}.micromag-core-partials-link-withoutStyle:hover{color:inherit;-webkit-text-decoration:none;text-decoration:none}
 @-webkit-keyframes micromag-core-partials-spinner-rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes micromag-core-partials-spinner-rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes micromag-core-partials-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes micromag-core-partials-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.micromag-core-partials-spinner-container{display:block;height:40px;width:40px}.micromag-core-partials-spinner-container .micromag-core-partials-spinner-path{stroke-linecap:round;color:currentColor}.micromag-core-partials-spinner-container.micromag-core-partials-spinner-animated{-webkit-animation:micromag-core-partials-spinner-rotate 2s linear infinite;animation:micromag-core-partials-spinner-rotate 2s linear infinite}.micromag-core-partials-spinner-container.micromag-core-partials-spinner-animated .micromag-core-partials-spinner-path{-webkit-animation:micromag-core-partials-spinner-dash 1.5s ease-in-out infinite;animation:micromag-core-partials-spinner-dash 1.5s ease-in-out infinite}
@@ -25,7 +26,7 @@
 .micromag-core-screens-screen-sizer-container,.micromag-core-screens-screen-sizer-frame{position:relative}.micromag-core-screens-screen-sizer-screen{left:0;position:absolute;top:0;-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}
 .micromag-core-screens-screen-container{font-family:Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.1}.micromag-core-screens-screen-container address,.micromag-core-screens-screen-container blockquote,.micromag-core-screens-screen-container caption,.micromag-core-screens-screen-container dl,.micromag-core-screens-screen-container figure,.micromag-core-screens-screen-container h1,.micromag-core-screens-screen-container h2,.micromag-core-screens-screen-container h3,.micromag-core-screens-screen-container h4,.micromag-core-screens-screen-container h5,.micromag-core-screens-screen-container h6,.micromag-core-screens-screen-container label,.micromag-core-screens-screen-container legend,.micromag-core-screens-screen-container li,.micromag-core-screens-screen-container ol,.micromag-core-screens-screen-container p,.micromag-core-screens-screen-container pre,.micromag-core-screens-screen-container ul{margin:0;padding:0}.micromag-core-screens-screen-container *,.micromag-core-screens-screen-container :after,.micromag-core-screens-screen-container :before{-webkit-box-sizing:border-box;box-sizing:border-box}.micromag-core-screens-screen-container h1,.micromag-core-screens-screen-container h2,.micromag-core-screens-screen-container h3,.micromag-core-screens-screen-container h4,.micromag-core-screens-screen-container h5,.micromag-core-screens-screen-container h6,.micromag-core-screens-screen-container li,.micromag-core-screens-screen-container p{font-weight:inherit}.micromag-core-screens-screen-container{background-color:#1c1c1c;color:#fff}
 .micromag-core-screens-screen-placeholder-screen{background-color:transparent;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
-.micromag-core-screens-preview-stack{overflow:hidden;position:relative}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackScreen{position:relative;z-index:10}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem{background-color:#494949;border:1px solid #adadad;left:0;position:absolute;top:0}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:first-child{z-index:3}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:nth-child(2){z-index:2}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:nth-child(3){z-index:1}.micromag-core-screens-preview-screen{overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-core-screens-preview-screen *{content-visibility:auto}
+.micromag-core-screens-preview-stack{overflow:hidden;position:relative}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackScreen{position:relative;z-index:10}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem{background-color:#494949;border:1px solid #adadad;left:0;position:absolute;top:0}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:first-child{z-index:3}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:nth-child(2){z-index:2}.micromag-core-screens-preview-stack .micromag-core-screens-preview-stackItem:nth-child(3){z-index:1}.micromag-core-screens-preview-screen{overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
 .micromag-core-placeholders-conversation-container{mix-blend-mode:difference;padding:10px;text-align:center}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-icon{color:hsla(0,0%,100%,.6);height:auto;margin:3px auto auto;width:25px}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-message{background-color:hsla(0,0%,100%,.6);height:23px;margin:3px 1px 0;width:80%}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage0{width:65%}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage1{margin-left:auto}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage2{width:65%}.micromag-core-placeholders-conversation-container .micromag-core-placeholders-conversation-placeholderMessage3{margin-left:auto;width:50%}
 .micromag-core-placeholders-quiz-answer-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;mix-blend-mode:difference}.micromag-core-placeholders-quiz-answer-container .micromag-core-placeholders-quiz-answer-block{-ms-flex-positive:1;flex-grow:1}.micromag-core-placeholders-quiz-answer-container .micromag-core-placeholders-quiz-answer-answer{color:hsla(0,0%,100%,.6);margin-right:6px;padding:0 1px;width:12px}.micromag-core-placeholders-quiz-answer-container .micromag-core-placeholders-quiz-answer-answerIcon{color:hsla(0,0%,100%,.6);display:block;height:100%;width:100%}.micromag-core-placeholders-quiz-answer-container.micromag-core-placeholders-quiz-answer-good .micromag-core-placeholders-quiz-answer-answer{padding:0}
 .micromag-core-placeholders-share-options-container .micromag-core-placeholders-share-options-box{background-color:transparent;display:block}.micromag-core-placeholders-share-options-container .micromag-core-placeholders-share-options-icon{color:#1c1c1c;height:auto;width:10px}.micromag-core-placeholders-share-options-item{background-color:#dedede;display:-ms-flexbox;display:flex;padding:3px;width:100%}.micromag-core-placeholders-share-options-item+.micromag-core-placeholders-share-options-item{margin-top:5px}.micromag-core-placeholders-share-options-button{font-size:1rem}

package/es/components.js

@@ -9,6 +9,7 @@ import { FormattedMessage, defineMessages, FormattedDate, FormattedTime } from '
 import { isMessage, getFieldFromPath, getComponentFromName, setFieldValue, validateFields, getDisplayName, pascalCase, convertStyleToString } from '@micromag/core/utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
+import { faClose } from '@fortawesome/free-solid-svg-icons/faClose';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserver } from '@micromag/core/hooks';
@@ -44,12 +45,12 @@ import { useSpring } from '@react-spring/core';
 import { config, animated } from '@react-spring/web';
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$S = {
+var propTypes$T = {
   children: PropTypes.label.isRequired,
   isHtml: PropTypes$1.bool,
   values: PropTypes$1.object // eslint-disable-line react/forbid-prop-types
 };
-var defaultProps$S = {
+var defaultProps$T = {
   isHtml: false,
   values: {}
 };
@@ -62,13 +63,13 @@ var Label = function Label(_ref) {
     values: values
   }, children)) : children;
 };
-Label.propTypes = propTypes$S;
-Label.defaultProps = defaultProps$S;
+Label.propTypes = propTypes$T;
+Label.defaultProps = defaultProps$T;
 
-var styles$x = {"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 styles$y = {"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$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$R = {
+var _excluded$c = ["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$S = {
   type: PropTypes$1.string,
   theme: PropTypes.buttonTheme,
   size: PropTypes.buttonSize,
@@ -101,7 +102,7 @@ var propTypes$R = {
     current: PropTypes$1.any // eslint-disable-line
   })])
 };
-var defaultProps$R = {
+var defaultProps$S = {
   type: 'button',
   theme: null,
   size: null,
@@ -163,7 +164,7 @@ var Button$1 = function Button(_ref) {
     iconClassName = _ref.iconClassName,
     labelClassName = _ref.labelClassName,
     refButton = _ref.refButton,
-    props = _objectWithoutProperties(_ref, _excluded$b);
+    props = _objectWithoutProperties(_ref, _excluded$c);
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
   var hasChildren = label !== null && children !== null;
@@ -171,24 +172,24 @@ 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$x.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$y.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$x.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$y.label, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$x.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames([styles$y.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$x.center, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$y.center, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$x.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames([styles$y.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([!withoutBootstrapStyles ? _defineProperty(_defineProperty(_defineProperty({
     btn: withStyle
-  }, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), "btn-".concat(size), withStyle && size !== null), "active", !withoutStyle && active) : null, styles$x.container, (_ref8 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref8, styles$x.withoutStyle, withoutStyle), styles$x.withIcon, hasIcon), styles$x.withIconColumns, hasIconColumns), styles$x.withText, text !== null), styles$x.withShadow, withShadow), styles$x.isSmall, small), styles$x.isBig, big), styles$x.isLink, href !== null), styles$x.asLink, asLink), styles$x.isDisabled, disabled), _defineProperty(_defineProperty(_ref8, styles$x.isLoading, loading), className, className !== null))]);
+  }, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), "btn-".concat(size), withStyle && size !== null), "active", !withoutStyle && active) : null, styles$y.container, (_ref8 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref8, styles$y.withoutStyle, withoutStyle), styles$y.withIcon, hasIcon), styles$y.withIconColumns, hasIconColumns), styles$y.withText, text !== null), styles$y.withShadow, withShadow), styles$y.isSmall, small), styles$y.isBig, big), styles$y.isLink, href !== null), styles$y.asLink, asLink), styles$y.isDisabled, disabled), _defineProperty(_defineProperty(_ref8, styles$y.isLoading, loading), className, className !== null))]);
   if (href !== null) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
-    }, styles$x.linkDisabled, disabled)]);
+    }, styles$y.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
@@ -213,13 +214,13 @@ var Button$1 = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-Button$1.propTypes = propTypes$R;
-Button$1.defaultProps = defaultProps$R;
+Button$1.propTypes = propTypes$S;
+Button$1.defaultProps = defaultProps$S;
 
-var styles$w = {};
+var styles$x = {};
 
-var _excluded$a = ["className", "onClick", "theme"];
-var propTypes$Q = {
+var _excluded$b = ["className", "onClick", "theme"];
+var propTypes$R = {
   buttons: PropTypes.buttons,
   size: PropTypes.buttonSize,
   theme: PropTypes.buttonTheme,
@@ -228,7 +229,7 @@ var propTypes$Q = {
   className: PropTypes$1.string,
   buttonClassName: PropTypes$1.string
 };
-var defaultProps$Q = {
+var defaultProps$R = {
   buttons: [],
   size: null,
   theme: undefined,
@@ -246,7 +247,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$w.container, _defineProperty({}, className, className !== null)]),
+    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$x.container, _defineProperty({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
     var _button$className = button.className,
@@ -255,10 +256,10 @@ 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$a);
+      buttonProps = _objectWithoutProperties(button, _excluded$b);
     var fixedProps = {
       key: "button-".concat(index),
-      className: classNames([styles$w.button, _defineProperty(_defineProperty({}, buttonClassName, buttonClassName !== null), customClassName, customClassName !== null)]),
+      className: classNames([styles$x.button, _defineProperty(_defineProperty({}, buttonClassName, buttonClassName !== null), customClassName, customClassName !== null)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -272,19 +273,19 @@ var Buttons = function Buttons(_ref) {
     return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React.createElement(Button$1, Object.assign({}, fixedProps, buttonProps));
   }));
 };
-Buttons.propTypes = propTypes$Q;
-Buttons.defaultProps = defaultProps$Q;
+Buttons.propTypes = propTypes$R;
+Buttons.defaultProps = defaultProps$R;
 
-var _excluded$9 = ["className"];
-var propTypes$P = {
+var _excluded$a = ["className"];
+var propTypes$Q = {
   className: PropTypes$1.string
 };
-var defaultProps$P = {
+var defaultProps$Q = {
   className: null
 };
 var BackButton = function BackButton(_ref) {
   var className = _ref.className,
-    props = _objectWithoutProperties(_ref, _excluded$9);
+    props = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/React.createElement(Button$1, Object.assign({
     className: classNames(['px-2', _defineProperty({}, className, className)]),
     size: "sm",
@@ -294,8 +295,35 @@ var BackButton = function BackButton(_ref) {
     })
   }, props));
 };
-BackButton.propTypes = propTypes$P;
-BackButton.defaultProps = defaultProps$P;
+BackButton.propTypes = propTypes$Q;
+BackButton.defaultProps = defaultProps$Q;
+
+var styles$w = {"container":"micromag-core-buttons-clear-container","icon":"micromag-core-buttons-clear-icon"};
+
+var _excluded$9 = ["onClick", "className"];
+var propTypes$P = {
+  onClick: PropTypes$1.func,
+  className: PropTypes$1.string
+};
+var defaultProps$P = {
+  onClick: null,
+  className: null
+};
+var ClearButton = function ClearButton(_ref) {
+  var onClick = _ref.onClick,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded$9);
+  return /*#__PURE__*/React.createElement("button", Object.assign({
+    className: classNames([styles$w.container, _defineProperty({}, className, className)]),
+    onClick: onClick
+  }, props), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    className: styles$w.icon,
+    icon: faClose,
+    size: "md"
+  }));
+};
+ClearButton.propTypes = propTypes$P;
+ClearButton.defaultProps = defaultProps$P;
 
 var _excluded$8 = ["type"],
   _excluded2 = ["component", "id", "settings"];
@@ -4381,4 +4409,4 @@ var LinkStyle = function LinkStyle(_ref) {
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
 
-export { ArrowIcon, BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, Close, CloseIcon, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, FullscreenIcon, HighlightStyle, Label, Link, LinkIcon, LinkStyle, Media, _Menu as Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, MuteIcon, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, PauseIcon, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, PlayIcon, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UnmuteIcon };
+export { ArrowIcon, BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, ClearButton, Close, CloseIcon, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, FullscreenIcon, HighlightStyle, Label, Link, LinkIcon, LinkStyle, Media, _Menu as Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, MuteIcon, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, PauseIcon, AdFrame as PlaceholderAdFrame, AdImage as PlaceholderAdImage, Audio as PlaceholderAudio, Button as PlaceholderButton, Image as PlaceholderImage, Line as PlaceholderLine, Map as PlaceholderMap, MapPath as PlaceholderMapPath, Quote as PlaceholderQuote, ShortText as PlaceholderShortText, Subtitle as PlaceholderSubtitle, TextPlaceholder as PlaceholderText, Timeline as PlaceholderTimeline, Title$1 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, PlayIcon, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UnmuteIcon };

package/es/index.js

@@ -1198,8 +1198,8 @@ var FieldsManager = /*#__PURE__*/function (_DefinitionsManager) {
   }]);
 }(DefinitionsManager);
 
-var _excluded$4 = ["medias"],
-  _excluded2$2 = ["medias"];
+var _excluded$5 = ["medias"],
+  _excluded2$1 = ["medias"];
 var MediasParser = /*#__PURE__*/function () {
   function MediasParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
@@ -1218,7 +1218,7 @@ var MediasParser = /*#__PURE__*/function () {
       if (typeof this.parsedThemesCache[storyId] === 'undefined') {
         var _this$toPath = this.toPath(theme),
           themeMedias = _this$toPath.medias,
-          newTheme = _objectWithoutProperties(_this$toPath, _excluded$4);
+          newTheme = _objectWithoutProperties(_this$toPath, _excluded$5);
         this.parsedThemesCache[storyId] = {
           themeMedias: themeMedias,
           newTheme: newTheme
@@ -1272,7 +1272,7 @@ var MediasParser = /*#__PURE__*/function () {
       if (theme !== null) {
         var _this$getParsedStoryT = this.getParsedStoryTheme(storyId, theme),
           themeMedias = _this$getParsedStoryT.medias,
-          newTheme = _objectWithoutProperties(_this$getParsedStoryT, _excluded2$2);
+          newTheme = _objectWithoutProperties(_this$getParsedStoryT, _excluded2$1);
         return medias !== null || themeMedias !== null ? _objectSpread(_objectSpread({}, story), {}, {
           theme: newTheme,
           components: newComponents,
@@ -1524,7 +1524,7 @@ var ScreensManager = /*#__PURE__*/function (_DefinitionsManager) {
   }]);
 }(DefinitionsManager);
 
-var _excluded$3 = ["fonts"];
+var _excluded$4 = ["fonts"];
 var FontsParser = /*#__PURE__*/function () {
   function FontsParser(_ref) {
     var fieldsManager = _ref.fieldsManager,
@@ -1573,7 +1573,7 @@ var FontsParser = /*#__PURE__*/function () {
         var _this$parse = this.parse(theme),
           _this$parse$fonts = _this$parse.fonts,
           themeFonts = _this$parse$fonts === void 0 ? [] : _this$parse$fonts,
-          newTheme = _objectWithoutProperties(_this$parse, _excluded$3);
+          newTheme = _objectWithoutProperties(_this$parse, _excluded$4);
         return fonts.length > 0 || themeFonts.length > 0 ? _objectSpread(_objectSpread({}, story), {}, {
           theme: newTheme,
           fonts: uniq([].concat(_toConsumableArray(themeFonts), _toConsumableArray(fonts)), 'name')
@@ -1649,19 +1649,82 @@ var FontsParser = /*#__PURE__*/function () {
   }]);
 }();
 
-var _excluded$2 = ["components"],
-  _excluded2$1 = ["shareIncentive", "callToAction"];
+var _excluded$3 = ["shareIncentive", "callToAction"];
+/* eslint-disable class-methods-use-this */
+var ShareCall = /*#__PURE__*/function () {
+  function ShareCall() {
+    _classCallCheck(this, ShareCall);
+  }
+  return _createClass(ShareCall, [{
+    key: "test",
+    value: function test(screen) {
+      var _ref = screen || {},
+        _ref$shareIncentive = _ref.shareIncentive,
+        shareIncentive = _ref$shareIncentive === void 0 ? null : _ref$shareIncentive,
+        _ref$callToAction = _ref.callToAction,
+        callToAction = _ref$callToAction === void 0 ? null : _ref$callToAction;
+      if (shareIncentive === null && callToAction === null) {
+        return false;
+      }
+      return true;
+    }
+  }, {
+    key: "parse",
+    value: function parse(screen) {
+      var _ref2 = screen || {},
+        _ref2$shareIncentive = _ref2.shareIncentive,
+        shareIncentive = _ref2$shareIncentive === void 0 ? null : _ref2$shareIncentive,
+        _ref2$callToAction = _ref2.callToAction,
+        callToAction = _ref2$callToAction === void 0 ? null : _ref2$callToAction,
+        restScreen = _objectWithoutProperties(_ref2, _excluded$3);
+      var _ref3 = screen || {},
+        _ref3$header = _ref3.header,
+        header = _ref3$header === void 0 ? null : _ref3$header,
+        _ref3$footer = _ref3.footer,
+        footer = _ref3$footer === void 0 ? null : _ref3$footer;
+
+      // Carful for recursivity here cause same key name
+      var newHeader = shareIncentive !== null ? _objectSpread(_objectSpread({}, shareIncentive !== null ? {
+        shareIncentive: shareIncentive
+      } : null), header !== null ? {
+        header: header
+      } : null) : header;
+      var newFooter = callToAction !== null ? _objectSpread(_objectSpread({}, callToAction !== null ? {
+        callToAction: callToAction
+      } : null), footer !== null ? {
+        footer: footer
+      } : null) : footer;
+      var newScreen = _objectSpread(_objectSpread(_objectSpread({}, restScreen), newHeader !== null ? {
+        header: newHeader
+      } : null), newFooter !== null ? {
+        footer: newFooter
+      } : null);
+      return newScreen;
+    }
+  }]);
+}();
+
+var migrations = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ShareCall: ShareCall
+});
+
+var _excluded$2 = ["components"];
 var MigrationsParser = /*#__PURE__*/function () {
   function MigrationsParser(_ref) {
     var screensManager = _ref.screensManager;
     _classCallCheck(this, MigrationsParser);
     this.screensManager = screensManager;
+    this.parsers = Object.keys(migrations).map(function (migration) {
+      return new migrations[migration]();
+    });
   }
 
   // eslint-disable-next-line class-methods-use-this
   return _createClass(MigrationsParser, [{
     key: "parse",
     value: function parse(story) {
+      var _this = this;
       if (story === null) {
         return story;
       }
@@ -1670,37 +1733,12 @@ var MigrationsParser = /*#__PURE__*/function () {
         components = _ref2$components === void 0 ? [] : _ref2$components,
         restStory = _objectWithoutProperties(_ref2, _excluded$2);
       var finalComponents = components.reduce(function (currentComponents, screen) {
-        var _ref3 = screen || {},
-          _ref3$shareIncentive = _ref3.shareIncentive,
-          shareIncentive = _ref3$shareIncentive === void 0 ? null : _ref3$shareIncentive,
-          _ref3$callToAction = _ref3.callToAction,
-          callToAction = _ref3$callToAction === void 0 ? null : _ref3$callToAction,
-          restScreen = _objectWithoutProperties(_ref3, _excluded2$1);
-        if (shareIncentive === null && callToAction === null) {
-          return [].concat(_toConsumableArray(currentComponents), [restScreen]);
-        }
-        var _ref4 = screen || {},
-          _ref4$header = _ref4.header,
-          header = _ref4$header === void 0 ? null : _ref4$header,
-          _ref4$footer = _ref4.footer,
-          footer = _ref4$footer === void 0 ? null : _ref4$footer;
-
-        // Carful for recursivity here cause same key name
-        var newHeader = shareIncentive !== null ? _objectSpread(_objectSpread({}, shareIncentive !== null ? {
-          shareIncentive: shareIncentive
-        } : null), header !== null ? {
-          header: header
-        } : null) : header;
-        var newFooter = callToAction !== null ? _objectSpread(_objectSpread({}, callToAction !== null ? {
-          callToAction: callToAction
-        } : null), footer !== null ? {
-          footer: footer
-        } : null) : footer;
-        var newScreen = _objectSpread(_objectSpread(_objectSpread({}, restScreen), newHeader !== null ? {
-          header: newHeader
-        } : null), newFooter !== null ? {
-          footer: newFooter
-        } : null);
+        var newScreen = _this.parsers.reduce(function (currentScreen, parser) {
+          if (parser.test(currentScreen)) {
+            return parser.parse(currentScreen);
+          }
+          return currentScreen;
+        }, screen);
         return [].concat(_toConsumableArray(currentComponents), [newScreen]);
       }, []);
       return _objectSpread(_objectSpread({}, restStory), {}, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.605",
+    "version": "0.3.607",
     "private": false,
     "description": "",
     "keywords": [
@@ -144,5 +144,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "6cdf9b727b794de87e0cfe2e7cf437859661d6b8"
+    "gitHead": "635ee4c6bf057273a9c90bde7c80134ad92ebb9c"
 }