@micromag/core 0.3.606 → 0.3.608

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!important;justify-content:center;margin:0 8px 0 10px;padding:0 10px;width:18px!important}.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}

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,19 +247,19 @@ 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,
-      customClassName = _button$className === void 0 ? null : _button$className,
+      customClassName = _button$className === undefined ? null : _button$className,
       _button$onClick = button.onClick,
-      _onClick = _button$onClick === void 0 ? null : _button$onClick,
+      _onClick = _button$onClick === undefined ? null : _button$onClick,
       _button$theme = button.theme,
-      buttonTheme = _button$theme === void 0 ? null : _button$theme,
-      buttonProps = _objectWithoutProperties(button, _excluded$a);
+      buttonTheme = _button$theme === undefined ? null : _button$theme,
+      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"];
@@ -337,13 +365,13 @@ var FieldForm = function FieldForm(_ref) {
   var field = getFieldFromPath(name.split('.'), fields, fieldsManager);
   var _ref2 = field || {},
     _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? null : _ref2$type,
+    type = _ref2$type === undefined ? null : _ref2$type,
     fieldProps = _objectWithoutProperties(_ref2, _excluded$8);
   var fieldDefinition = fieldsManager.getDefinition(type) || null;
   var fieldData = fieldDefinition || _objectSpread({}, field);
   var _ref3 = fieldData || {},
     _ref3$component = _ref3.component,
-    fieldComponent = _ref3$component === void 0 ? null : _ref3$component;
+    fieldComponent = _ref3$component === undefined ? null : _ref3$component;
     _ref3.id;
     _ref3.settings;
     var definitionProps = _objectWithoutProperties(_ref3, _excluded2);
@@ -756,7 +784,7 @@ var Card = function Card(_ref) {
   var linksElements = (links || []).map(function (_ref2, index) {
     var label = _ref2.label,
       _ref2$className = _ref2.className,
-      linkClassName = _ref2$className === void 0 ? null : _ref2$className,
+      linkClassName = _ref2$className === undefined ? null : _ref2$className,
       linkProps = _objectWithoutProperties(_ref2, _excluded$6);
     return /*#__PURE__*/React.createElement(Link, Object.assign({
       key: "link-".concat(label, "-").concat(index),
@@ -1168,9 +1196,9 @@ var Breadcrumb = function Breadcrumb(_ref) {
     var url = _ref2.url,
       label = _ref2.label,
       _ref2$active = _ref2.active,
-      active = _ref2$active === void 0 ? false : _ref2$active,
+      active = _ref2$active === undefined ? false : _ref2$active,
       _ref2$onClick = _ref2.onClick,
-      onClick = _ref2$onClick === void 0 ? null : _ref2$onClick;
+      onClick = _ref2$onClick === undefined ? null : _ref2$onClick;
     return /*#__PURE__*/React.createElement("li", {
       className: classNames(['breadcrumb-item', _defineProperty(_defineProperty({
         active: active
@@ -1245,17 +1273,17 @@ var Dropdown = function Dropdown(_ref) {
     ref: refContainer
   }, children !== null ? children : items.map(function (it, index) {
     var _it$type = it.type,
-      type = _it$type === void 0 ? 'link' : _it$type,
+      type = _it$type === undefined ? 'link' : _it$type,
       _it$className = it.className,
-      customClassName = _it$className === void 0 ? null : _it$className,
+      customClassName = _it$className === undefined ? null : _it$className,
       _it$label = it.label,
-      label = _it$label === void 0 ? null : _it$label,
+      label = _it$label === undefined ? null : _it$label,
       _it$children = it.children,
-      itemChildren = _it$children === void 0 ? null : _it$children,
+      itemChildren = _it$children === undefined ? null : _it$children,
       _it$onClick = it.onClick,
-      customOnClick = _it$onClick === void 0 ? null : _it$onClick,
+      customOnClick = _it$onClick === undefined ? null : _it$onClick,
       _it$active = it.active,
-      active = _it$active === void 0 ? false : _it$active,
+      active = _it$active === undefined ? false : _it$active,
       itemProps = _objectWithoutProperties(it, _excluded$4);
     var ItemComponent = 'div';
     if (type === 'link') {
@@ -1360,22 +1388,22 @@ var _Menu = function Menu(_ref) {
   }, children !== null ? children : items.map(function (it, index) {
     var id = it.id,
       _it$className = it.className,
-      customClassName = _it$className === void 0 ? null : _it$className,
+      customClassName = _it$className === undefined ? null : _it$className,
       _it$linkClassName = it.linkClassName,
-      customLinkClassName = _it$linkClassName === void 0 ? null : _it$linkClassName,
+      customLinkClassName = _it$linkClassName === undefined ? null : _it$linkClassName,
       _it$href = it.href,
-      href = _it$href === void 0 ? null : _it$href,
+      href = _it$href === undefined ? null : _it$href,
       label = it.label,
       _it$external = it.external,
-      external = _it$external === void 0 ? false : _it$external,
+      external = _it$external === undefined ? false : _it$external,
       _it$items = it.items,
-      subItems = _it$items === void 0 ? null : _it$items,
+      subItems = _it$items === undefined ? null : _it$items,
       _it$dropdown = it.dropdown,
-      dropdown = _it$dropdown === void 0 ? null : _it$dropdown,
+      dropdown = _it$dropdown === undefined ? null : _it$dropdown,
       _it$active = it.active,
-      active = _it$active === void 0 ? false : _it$active,
+      active = _it$active === undefined ? false : _it$active,
       _it$onClick = it.onClick,
-      customOnClick = _it$onClick === void 0 ? null : _it$onClick,
+      customOnClick = _it$onClick === undefined ? null : _it$onClick,
       itemProps = _objectWithoutProperties(it, _excluded$3);
     var onClickItem = dropdown !== null ? function (e) {
       e.preventDefault();
@@ -1795,9 +1823,9 @@ var ModalPortal = function ModalPortal(_ref) {
   var _useModals = useModals(),
     container = _useModals.container,
     _useModals$register = _useModals.register,
-    register = _useModals$register === void 0 ? null : _useModals$register,
+    register = _useModals$register === undefined ? null : _useModals$register,
     _useModals$unregister = _useModals.unregister,
-    unregister = _useModals$unregister === void 0 ? null : _useModals$unregister;
+    unregister = _useModals$unregister === undefined ? null : _useModals$unregister;
   return /*#__PURE__*/React.createElement(ElementPortal, {
     id: id,
     data: data,
@@ -1957,12 +1985,12 @@ var PanelPortal = function PanelPortal(_ref) {
     children = _ref.children;
   var _usePanels = usePanels(),
     _usePanels$panels = _usePanels.panels,
-    panels = _usePanels$panels === void 0 ? null : _usePanels$panels,
+    panels = _usePanels$panels === undefined ? null : _usePanels$panels,
     container = _usePanels.container,
     _usePanels$register = _usePanels.register,
-    register = _usePanels$register === void 0 ? null : _usePanels$register,
+    register = _usePanels$register === undefined ? null : _usePanels$register,
     _usePanels$unregister = _usePanels.unregister,
-    unregister = _usePanels$unregister === void 0 ? null : _usePanels$unregister;
+    unregister = _usePanels$unregister === undefined ? null : _usePanels$unregister;
   if (panels === null) {
     return children;
   }
@@ -2346,15 +2374,15 @@ Empty.defaultProps = defaultProps$g;
 var getUrlsFromMedia = function getUrlsFromMedia(media, formats) {
   var _ref = media || {},
     _ref$files = _ref.files,
-    files = _ref$files === void 0 ? {} : _ref$files;
+    files = _ref$files === undefined ? {} : _ref$files;
   var _ref2 = files || {},
     _ref2$original = _ref2.original,
-    originalFile = _ref2$original === void 0 ? null : _ref2$original;
+    originalFile = _ref2$original === undefined ? null : _ref2$original;
   var _ref3 = originalFile || {},
     _ref3$name = _ref3.name,
-    originalName = _ref3$name === void 0 ? null : _ref3$name,
+    originalName = _ref3$name === undefined ? null : _ref3$name,
     _ref3$mime = _ref3.mime,
-    originalMime = _ref3$mime === void 0 ? null : _ref3$mime;
+    originalMime = _ref3$mime === undefined ? null : _ref3$mime;
   var urls = formats.reduce(function (currentUrls, format) {
     var finalFormat = isObject(format) ? format.format : format;
     var formatExtension = isObject(format) ? format.name : format;
@@ -2395,11 +2423,11 @@ var FontFaces = function FontFaces(_ref4) {
     return isObject(it) && it.type === 'custom' && (it.media || null) !== null;
   }).reduce(function (fontFontFaces, _ref5) {
     var _ref5$name = _ref5.name,
-      name = _ref5$name === void 0 ? null : _ref5$name,
+      name = _ref5$name === undefined ? null : _ref5$name,
       _ref5$media = _ref5.media,
-      media = _ref5$media === void 0 ? null : _ref5$media,
+      media = _ref5$media === undefined ? null : _ref5$media,
       _ref5$variants = _ref5.variants,
-      variants = _ref5$variants === void 0 ? [] : _ref5$variants;
+      variants = _ref5$variants === undefined ? [] : _ref5$variants;
     if (name === null) {
       return fontFontFaces;
     }
@@ -2408,7 +2436,7 @@ var FontFaces = function FontFaces(_ref4) {
       var weight = _ref6.weight,
         style = _ref6.style,
         _ref6$media = _ref6.media,
-        variantMedia = _ref6$media === void 0 ? null : _ref6$media;
+        variantMedia = _ref6$media === undefined ? null : _ref6$media;
       if (variantMedia == null) {
         return null;
       }
@@ -3098,37 +3126,37 @@ var Meta = function Meta(_ref) {
     children = _ref.children;
   var _ref2 = metadata || {},
     _ref2$canonical = _ref2.canonical,
-    canonical = _ref2$canonical === void 0 ? null : _ref2$canonical,
+    canonical = _ref2$canonical === undefined ? null : _ref2$canonical,
     _ref2$description = _ref2.description,
-    description = _ref2$description === void 0 ? null : _ref2$description,
+    description = _ref2$description === undefined ? null : _ref2$description,
     _ref2$keywords = _ref2.keywords,
-    keywords = _ref2$keywords === void 0 ? null : _ref2$keywords,
+    keywords = _ref2$keywords === undefined ? null : _ref2$keywords,
     _ref2$image = _ref2.image,
-    image = _ref2$image === void 0 ? null : _ref2$image,
+    image = _ref2$image === undefined ? null : _ref2$image,
     _ref2$favicon = _ref2.favicon,
-    favicon = _ref2$favicon === void 0 ? null : _ref2$favicon,
+    favicon = _ref2$favicon === undefined ? null : _ref2$favicon,
     _ref2$rssUrl = _ref2.rssUrl,
-    rssUrl = _ref2$rssUrl === void 0 ? null : _ref2$rssUrl,
+    rssUrl = _ref2$rssUrl === undefined ? null : _ref2$rssUrl,
     _ref2$atomUrl = _ref2.atomUrl,
-    atomUrl = _ref2$atomUrl === void 0 ? null : _ref2$atomUrl,
+    atomUrl = _ref2$atomUrl === undefined ? null : _ref2$atomUrl,
     _ref2$microformats = _ref2.microformats,
-    microformats = _ref2$microformats === void 0 ? [] : _ref2$microformats,
+    microformats = _ref2$microformats === undefined ? [] : _ref2$microformats,
     _ref2$language = _ref2.language,
-    language = _ref2$language === void 0 ? null : _ref2$language;
+    language = _ref2$language === undefined ? null : _ref2$language;
   var realTitle = title !== null ? "".concat(title, " | ").concat(suffix) : fullTitle;
   var _ref3 = image || {},
     _ref3$url = _ref3.url,
-    imageUrl = _ref3$url === void 0 ? null : _ref3$url,
+    imageUrl = _ref3$url === undefined ? null : _ref3$url,
     _ref3$metadata = _ref3.metadata,
-    imageMetadata = _ref3$metadata === void 0 ? {} : _ref3$metadata;
+    imageMetadata = _ref3$metadata === undefined ? {} : _ref3$metadata;
   var _ref4 = imageMetadata || {},
     _ref4$width = _ref4.width,
-    imageWidth = _ref4$width === void 0 ? null : _ref4$width,
+    imageWidth = _ref4$width === undefined ? null : _ref4$width,
     _ref4$height = _ref4.height,
-    imageHeight = _ref4$height === void 0 ? null : _ref4$height;
+    imageHeight = _ref4$height === undefined ? null : _ref4$height;
   var _ref5 = favicon || {},
     _ref5$url = _ref5.url,
-    faviconUrl = _ref5$url === void 0 ? null : _ref5$url;
+    faviconUrl = _ref5$url === undefined ? null : _ref5$url;
   return /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("title", null, realTitle !== null && realTitle.length > 0 ? realTitle : 'Micromag'), description !== null ? /*#__PURE__*/React.createElement("meta", {
     name: "description",
     content: description
@@ -3303,9 +3331,9 @@ var AdImage = function AdImage(_ref) {
 /* eslint-disable react/destructuring-assignment, react/prop-types */
 var Audio = function Audio(_ref) {
   var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
+    width = _ref$width === undefined ? '100%' : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '2em' : _ref$height,
+    height = _ref$height === undefined ? '2em' : _ref$height,
     className = _ref.className;
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
@@ -3368,9 +3396,9 @@ PlaceholderText.defaultProps = defaultProps$b;
 /* eslint-disable react/destructuring-assignment, react/prop-types */
 var Button = function Button(_ref) {
   var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '75%' : _ref$width,
+    width = _ref$width === undefined ? '75%' : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '0.4em' : _ref$height,
+    height = _ref$height === undefined ? '0.4em' : _ref$height,
     className = _ref.className;
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     outline: true,
@@ -3473,13 +3501,13 @@ 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$className = props.className,
-    className = _props$className === void 0 ? null : _props$className,
+    className = _props$className === undefined ? null : _props$className,
     _props$height = props.height,
-    height = _props$height === void 0 ? 0.2 : _props$height,
+    height = _props$height === undefined ? 0.2 : _props$height,
     _props$lines = props.lines,
-    lines = _props$lines === void 0 ? 4 : _props$lines,
+    lines = _props$lines === undefined ? 4 : _props$lines,
     _props$lineMargin = props.lineMargin,
-    lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
+    lineMargin = _props$lineMargin === undefined ? 2 : _props$lineMargin;
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
     height: height,
     lines: lines,
@@ -3498,11 +3526,11 @@ 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,
+    height = _props$height === undefined ? 0.5 : _props$height,
     _props$lines = props.lines,
-    lines = _props$lines === void 0 ? 2 : _props$lines,
+    lines = _props$lines === undefined ? 2 : _props$lines,
     _props$lineMargin = props.lineMargin,
-    lineMargin = _props$lineMargin === void 0 ? 2 : _props$lineMargin;
+    lineMargin = _props$lineMargin === undefined ? 2 : _props$lineMargin;
   return /*#__PURE__*/React.createElement(PlaceholderText, Object.assign({}, props, {
     className: classNames([props.className, styles$d.title]),
     height: height,
@@ -3595,9 +3623,9 @@ var ScreenSizer = function ScreenSizer(_ref) {
   var _useDimensionObserver = useDimensionObserver(),
     refContainer = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.width,
-    calculatedWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
+    calculatedWidth = _useDimensionObserver2 === undefined ? 0 : _useDimensionObserver2,
     _useDimensionObserver3 = _useDimensionObserver.height,
-    calculatedHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
+    calculatedHeight = _useDimensionObserver3 === undefined ? 0 : _useDimensionObserver3;
   var _useMemo = useMemo(function () {
       var containerWidth = width || calculatedWidth || null;
       var containerHeight = height || calculatedHeight || null;
@@ -3632,13 +3660,13 @@ var ScreenSizer = function ScreenSizer(_ref) {
       };
     }, [screenWidth, screenHeight, width, height, fit, calculatedWidth, calculatedHeight, hasSize]),
     _useMemo$width = _useMemo.width,
-    frameWidth = _useMemo$width === void 0 ? null : _useMemo$width,
+    frameWidth = _useMemo$width === undefined ? null : _useMemo$width,
     _useMemo$height = _useMemo.height,
-    frameHeight = _useMemo$height === void 0 ? null : _useMemo$height,
+    frameHeight = _useMemo$height === undefined ? null : _useMemo$height,
     _useMemo$scale = _useMemo.scale,
-    frameScale = _useMemo$scale === void 0 ? null : _useMemo$scale,
+    frameScale = _useMemo$scale === undefined ? null : _useMemo$scale,
     _useMemo$transform = _useMemo.transform,
-    screenTransform = _useMemo$transform === void 0 ? null : _useMemo$transform;
+    screenTransform = _useMemo$transform === undefined ? null : _useMemo$transform;
   var screenSize = useMemo(function () {
     return {
       screen: 'mobile',
@@ -3716,7 +3744,7 @@ var Screen = function Screen(_ref) {
     mediaRef = _ref.mediaRef;
   var _ref2 = screen || {},
     _ref2$type = _ref2.type,
-    type = _ref2$type === void 0 ? null : _ref2$type;
+    type = _ref2$type === undefined ? null : _ref2$type;
   var CustomScreenComponent = components !== null ? getComponentFromName(type, components) || null : null;
   var ContextScreenComponent = useScreenComponent(type);
   var ScreenComponent = CustomScreenComponent || ContextScreenComponent;
@@ -3864,9 +3892,9 @@ var Conversation = function Conversation() {
 /* eslint-disable react/prop-types */
 var InputText = function InputText(_ref) {
   var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '75%' : _ref$width,
+    width = _ref$width === undefined ? '75%' : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '0.5em' : _ref$height,
+    height = _ref$height === undefined ? '0.5em' : _ref$height,
     className = _ref.className;
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     outline: true,
@@ -3880,12 +3908,12 @@ var styles$4 = {"container":"micromag-core-placeholders-quiz-answer-container","
 
 var Answer$1 = function Answer(_ref) {
   var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '75%' : _ref$width,
+    width = _ref$width === undefined ? '75%' : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '0.3em' : _ref$height,
+    height = _ref$height === undefined ? '0.3em' : _ref$height,
     className = _ref.className,
     _ref$good = _ref.good,
-    good = _ref$good === void 0 ? true : _ref$good;
+    good = _ref$good === undefined ? true : _ref$good;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$4.container, _defineProperty(_defineProperty({}, className, className !== null), styles$4.good, good)])
   }, /*#__PURE__*/React.createElement("div", {
@@ -3934,9 +3962,9 @@ var styles$2 = {"container":"micromag-core-placeholders-survey-answer-container"
 
 var Answer = function Answer(_ref) {
   var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '75%' : _ref$width,
+    width = _ref$width === undefined ? '75%' : _ref$width,
     _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '0.3em' : _ref$height,
+    height = _ref$height === undefined ? '0.3em' : _ref$height,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$2.container, _defineProperty({}, className, className !== null)])
@@ -4226,7 +4254,7 @@ function Transitions(_ref) {
     children = _ref.children;
   var _useScreenSize = useScreenSize(),
     _useScreenSize$landsc = _useScreenSize.landscape,
-    landscape = _useScreenSize$landsc === void 0 ? true : _useScreenSize$landsc;
+    landscape = _useScreenSize$landsc === undefined ? true : _useScreenSize$landsc;
   var finalPlaying = playing || landscape;
   var finalTransitions = {
     "in": null,
@@ -4244,17 +4272,17 @@ function Transitions(_ref) {
     } : currentTransition;
   });
   var _finalTransitions$in = finalTransitions["in"],
-    transitionIn = _finalTransitions$in === void 0 ? null : _finalTransitions$in,
+    transitionIn = _finalTransitions$in === undefined ? null : _finalTransitions$in,
     _finalTransitions$out = finalTransitions.out,
-    transitionOut = _finalTransitions$out === void 0 ? null : _finalTransitions$out;
+    transitionOut = _finalTransitions$out === undefined ? null : _finalTransitions$out;
   var finalTransitionIn = transitionIn !== null ? transitionIn : transitionOut;
   var finalTransitionOut = transitionOut !== null ? transitionOut : transitionIn;
   var _ref2 = finalTransitionIn || {},
     _ref2$name = _ref2.name,
-    transitionInName = _ref2$name === void 0 ? null : _ref2$name;
+    transitionInName = _ref2$name === undefined ? null : _ref2$name;
   var _ref3 = finalTransitionOut || {},
     _ref3$name = _ref3.name,
-    transitionOutName = _ref3$name === void 0 ? null : _ref3$name;
+    transitionOutName = _ref3$name === undefined ? null : _ref3$name;
   var sameTransitionInOut = transitionInName === transitionOutName;
   var TransitionIn = finalTransitionIn !== null ? getComponentFromName(transitionInName, TransitionComponents, null) : null;
   var TransitionOut = finalTransitionOut !== null && !sameTransitionInOut ? getComponentFromName(transitionOutName, TransitionComponents, null) : null;
@@ -4314,10 +4342,10 @@ var TransitionsStagger = function TransitionsStagger(_ref) {
       return null;
     }
     var _child$type = child.type,
-      type = _child$type === void 0 ? null : _child$type;
+      type = _child$type === undefined ? null : _child$type;
     var _ref2 = type || {},
       _ref2$withoutTransiti = _ref2.withoutTransitionsWrapper,
-      withoutTransitionsWrapper = _ref2$withoutTransiti === void 0 ? false : _ref2$withoutTransiti;
+      withoutTransitionsWrapper = _ref2$withoutTransiti === undefined ? false : _ref2$withoutTransiti;
     if (disabled || withoutTransitionsWrapper) {
       return child;
     }
@@ -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 };