@micromag/core 0.3.516 → 0.3.518

package/es/components.js

@@ -1,6 +1,6 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import PropTypes$1 from 'prop-types';
-import React, { useCallback, useState, useEffect, useRef, useMemo, Suspense } from 'react';
+import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
 import { PropTypes } from '@micromag/core';
 import { isMessage, getFieldFromPath, getComponentFromName, setFieldValue, validateFields, getDisplayName, pascalCase, convertStyleToString } from '@micromag/core/utils';
 import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
@@ -19,8 +19,6 @@ import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserve
 import get from 'lodash/get';
 import queryString from 'query-string';
 import ReactDOM from 'react-dom';
-import isArray from 'lodash/isArray';
-import { useUppy } from '@panneau/uppy';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
 import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp';
 import dayjs from 'dayjs';
@@ -28,6 +26,7 @@ import throttle from 'lodash/throttle';
 import isObject from 'lodash/isObject';
 import { Helmet } from 'react-helmet';
 import isString from 'lodash/isString';
+import isArray from 'lodash/isArray';
 import { faAd } from '@fortawesome/free-solid-svg-icons/faAd';
 import { faImage } from '@fortawesome/free-solid-svg-icons/faImage';
 import { faMusic } from '@fortawesome/free-solid-svg-icons/faMusic';
@@ -45,12 +44,12 @@ import { faCircle } from '@fortawesome/free-solid-svg-icons/faCircle';
 import { faPercent } from '@fortawesome/free-solid-svg-icons/faPercent';
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$T = {
+var propTypes$S = {
   children: PropTypes.label.isRequired,
   isHtml: PropTypes$1.bool,
   values: PropTypes$1.object // eslint-disable-line react/forbid-prop-types
 };
-var defaultProps$T = {
+var defaultProps$S = {
   isHtml: false,
   values: {}
 };
@@ -63,14 +62,14 @@ var Label = function Label(_ref) {
     values: values
   }, children)) : children;
 };
-Label.propTypes = propTypes$T;
-Label.defaultProps = defaultProps$T;
+Label.propTypes = propTypes$S;
+Label.defaultProps = defaultProps$S;
 var Label$1 = Label;
 
 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 _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$S = {
+var propTypes$R = {
   type: PropTypes$1.string,
   theme: PropTypes.buttonTheme,
   size: PropTypes.buttonSize,
@@ -103,7 +102,7 @@ var propTypes$S = {
     current: PropTypes$1.any // eslint-disable-line
   })])
 };
-var defaultProps$S = {
+var defaultProps$R = {
   type: 'button',
   theme: null,
   size: null,
@@ -215,14 +214,14 @@ var Button$2 = function Button(_ref) {
     tabIndex: focusable ? '0' : '-1'
   }), content);
 };
-Button$2.propTypes = propTypes$S;
-Button$2.defaultProps = defaultProps$S;
+Button$2.propTypes = propTypes$R;
+Button$2.defaultProps = defaultProps$R;
 var Button$3 = Button$2;
 
 var styles$w = {};
 
 var _excluded$a = ["className", "onClick", "theme"];
-var propTypes$R = {
+var propTypes$Q = {
   buttons: PropTypes.buttons,
   size: PropTypes.buttonSize,
   theme: PropTypes.buttonTheme,
@@ -231,7 +230,7 @@ var propTypes$R = {
   className: PropTypes$1.string,
   buttonClassName: PropTypes$1.string
 };
-var defaultProps$R = {
+var defaultProps$Q = {
   buttons: [],
   size: null,
   theme: undefined,
@@ -275,15 +274,15 @@ var Buttons = function Buttons(_ref) {
     return renderButton !== null ? renderButton(button, index, fixedProps) : /*#__PURE__*/React.createElement(Button$3, Object.assign({}, fixedProps, buttonProps));
   }));
 };
-Buttons.propTypes = propTypes$R;
-Buttons.defaultProps = defaultProps$R;
+Buttons.propTypes = propTypes$Q;
+Buttons.defaultProps = defaultProps$Q;
 var Buttons$1 = Buttons;
 
 var _excluded$9 = ["className"];
-var propTypes$Q = {
+var propTypes$P = {
   className: PropTypes$1.string
 };
-var defaultProps$Q = {
+var defaultProps$P = {
   className: null
 };
 var BackButton = function BackButton(_ref) {
@@ -298,13 +297,13 @@ var BackButton = function BackButton(_ref) {
     })
   }, props));
 };
-BackButton.propTypes = propTypes$Q;
-BackButton.defaultProps = defaultProps$Q;
+BackButton.propTypes = propTypes$P;
+BackButton.defaultProps = defaultProps$P;
 var BackButton$1 = BackButton;
 
 var _excluded$8 = ["type"],
   _excluded2 = ["component", "id", "settings"];
-var propTypes$P = {
+var propTypes$O = {
   name: PropTypes$1.string,
   // .isRequired,
   value: PropTypes.component,
@@ -317,7 +316,7 @@ var propTypes$P = {
   closeFieldForm: PropTypes$1.func.isRequired,
   fieldContext: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
 };
-var defaultProps$P = {
+var defaultProps$O = {
   name: null,
   form: null,
   formComponents: {},
@@ -394,13 +393,13 @@ var FieldForm = function FieldForm(_ref) {
     isForm: true
   }, formProps))) : null;
 };
-FieldForm.propTypes = propTypes$P;
-FieldForm.defaultProps = defaultProps$P;
+FieldForm.propTypes = propTypes$O;
+FieldForm.defaultProps = defaultProps$O;
 var FieldForm$1 = FieldForm;
 
 var styles$v = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
-var propTypes$O = {
+var propTypes$N = {
   action: PropTypes$1.string.isRequired,
   method: PropTypes$1.string,
   fields: PropTypes.formFields,
@@ -429,7 +428,7 @@ var propTypes$O = {
   actionsClassName: PropTypes$1.string,
   cancelClassName: PropTypes$1.string
 };
-var defaultProps$O = {
+var defaultProps$N = {
   method: 'POST',
   fields: [],
   initialValue: null,
@@ -632,14 +631,14 @@ var Form = function Form(_ref) {
     }]
   })) : null) : null);
 };
-Form.propTypes = propTypes$O;
-Form.defaultProps = defaultProps$O;
+Form.propTypes = propTypes$N;
+Form.defaultProps = defaultProps$N;
 var Form$1 = Form;
 
 var styles$u = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
 var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
-var propTypes$N = {
+var propTypes$M = {
   href: PropTypes$1.string,
   external: PropTypes$1.bool,
   target: PropTypes$1.string,
@@ -648,7 +647,7 @@ var propTypes$N = {
   withoutStyle: PropTypes$1.bool,
   className: PropTypes$1.string
 };
-var defaultProps$N = {
+var defaultProps$M = {
   href: '',
   external: false,
   target: '_blank',
@@ -676,12 +675,12 @@ var Link = function Link(_ref) {
     href: href
   }, props), /*#__PURE__*/React.createElement(Label$1, null, children));
 };
-Link.propTypes = propTypes$N;
-Link.defaultProps = defaultProps$N;
+Link.propTypes = propTypes$M;
+Link.defaultProps = defaultProps$M;
 var Link$1 = Link;
 
 var _excluded$6 = ["label", "className"];
-var propTypes$M = {
+var propTypes$L = {
   href: PropTypes$1.string,
   header: PropTypes$1.node,
   image: PropTypes$1.node,
@@ -710,7 +709,7 @@ var propTypes$M = {
   onClickBody: PropTypes$1.func,
   onClickFooter: PropTypes$1.func
 };
-var defaultProps$M = {
+var defaultProps$L = {
   href: null,
   header: null,
   image: null,
@@ -823,19 +822,19 @@ var Card = function Card(_ref) {
     className: cardClassName
   }, cardInner);
 };
-Card.propTypes = propTypes$M;
-Card.defaultProps = defaultProps$M;
+Card.propTypes = propTypes$L;
+Card.defaultProps = defaultProps$L;
 var Card$1 = Card;
 
 var styles$t = {"container":"micromag-core-partials-spinner-container","path":"micromag-core-partials-spinner-path","animated":"micromag-core-partials-spinner-animated","rotate":"micromag-core-partials-spinner-rotate","dash":"micromag-core-partials-spinner-dash"};
 
-var propTypes$L = {
+var propTypes$K = {
   animated: PropTypes$1.bool,
   color: PropTypes$1.string,
   strokeWidth: PropTypes$1.number,
   className: PropTypes$1.string
 };
-var defaultProps$L = {
+var defaultProps$K = {
   animated: true,
   color: 'currentColor',
   strokeWidth: 3,
@@ -862,20 +861,20 @@ var Spinner = function Spinner(_ref) {
     strokeWidth: strokeWidth
   }));
 };
-Spinner.propTypes = propTypes$L;
-Spinner.defaultProps = defaultProps$L;
+Spinner.propTypes = propTypes$K;
+Spinner.defaultProps = defaultProps$K;
 var Spinner$1 = Spinner;
 
 var styles$s = {};
 
 var _excluded$5 = ["description", "loading", "children", "className"];
-var propTypes$K = {
+var propTypes$J = {
   description: PropTypes$1.node,
   loading: PropTypes$1.bool,
   children: PropTypes$1.node,
   className: PropTypes$1.string
 };
-var defaultProps$K = {
+var defaultProps$J = {
   description: null,
   loading: false,
   children: null,
@@ -891,15 +890,15 @@ var FormPanel = function FormPanel(_ref) {
     className: classNames([styles$s.container, _defineProperty({}, className, className !== null)])
   }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner$1, null) : children);
 };
-FormPanel.propTypes = propTypes$K;
-FormPanel.defaultProps = defaultProps$K;
+FormPanel.propTypes = propTypes$J;
+FormPanel.defaultProps = defaultProps$J;
 var FormPanel$1 = FormPanel;
 
-var propTypes$J = {
+var propTypes$I = {
   className: PropTypes$1.string,
   color: PropTypes$1.string
 };
-var defaultProps$J = {
+var defaultProps$I = {
   className: null,
   color: '#fff'
 };
@@ -920,15 +919,15 @@ var ArrowIcon = function ArrowIcon(_ref) {
     fill: color
   }));
 };
-ArrowIcon.propTypes = propTypes$J;
-ArrowIcon.defaultProps = defaultProps$J;
+ArrowIcon.propTypes = propTypes$I;
+ArrowIcon.defaultProps = defaultProps$I;
 var ArrowIcon$1 = ArrowIcon;
 
-var propTypes$I = {
+var propTypes$H = {
   className: PropTypes$1.string,
   color: PropTypes$1.string
 };
-var defaultProps$I = {
+var defaultProps$H = {
   className: null,
   color: '#fff'
 };
@@ -954,15 +953,15 @@ var CloseIcon = function CloseIcon(_ref) {
     strokeLinecap: "round"
   }));
 };
-CloseIcon.propTypes = propTypes$I;
-CloseIcon.defaultProps = defaultProps$I;
+CloseIcon.propTypes = propTypes$H;
+CloseIcon.defaultProps = defaultProps$H;
 var CloseIcon$1 = CloseIcon;
 
-var propTypes$H = {
+var propTypes$G = {
   className: PropTypes$1.string,
   color: PropTypes$1.string
 };
-var defaultProps$H = {
+var defaultProps$G = {
   className: null,
   color: '#fff'
 };
@@ -981,15 +980,15 @@ var FullscreenIcon = function FullscreenIcon(_ref) {
     fill: color
   }));
 };
-FullscreenIcon.propTypes = propTypes$H;
-FullscreenIcon.defaultProps = defaultProps$H;
+FullscreenIcon.propTypes = propTypes$G;
+FullscreenIcon.defaultProps = defaultProps$G;
 var FullscreenIcon$1 = FullscreenIcon;
 
-var propTypes$G = {
+var propTypes$F = {
   className: PropTypes$1.string,
   color: PropTypes$1.string
 };
-var defaultProps$G = {
+var defaultProps$F = {
   className: null,
   color: '#fff'
 };
@@ -1017,15 +1016,15 @@ var LinkIcon = function LinkIcon(_ref) {
     strokeLinejoin: "round"
   }));
 };
-LinkIcon.propTypes = propTypes$G;
-LinkIcon.defaultProps = defaultProps$G;
+LinkIcon.propTypes = propTypes$F;
+LinkIcon.defaultProps = defaultProps$F;
 var LinkIcon$1 = LinkIcon;
 
-var propTypes$F = {
+var propTypes$E = {
   className: PropTypes$1.string,
   color: PropTypes$1.string
 };
-var defaultProps$F = {
+var defaultProps$E = {
   className: null,
   color: '#fff'
 };
@@ -1050,15 +1049,15 @@ var MuteIcon = function MuteIcon(_ref) {
     stroke: color
   }));
 };
-MuteIcon.propTypes = propTypes$F;
-MuteIcon.defaultProps = defaultProps$F;
+MuteIcon.propTypes = propTypes$E;
+MuteIcon.defaultProps = defaultProps$E;
 var MuteIcon$1 = MuteIcon;
 
-var propTypes$E = {
+var propTypes$D = {
   className: PropTypes$1.string,
   color: PropTypes$1.string
 };
-var defaultProps$E = {
+var defaultProps$D = {
   className: null,
   color: '#fff'
 };
@@ -1085,15 +1084,15 @@ var PauseIcon = function PauseIcon(_ref) {
     fill: color
   }));
 };
-PauseIcon.propTypes = propTypes$E;
-PauseIcon.defaultProps = defaultProps$E;
+PauseIcon.propTypes = propTypes$D;
+PauseIcon.defaultProps = defaultProps$D;
 var PauseIcon$1 = PauseIcon;
 
-var propTypes$D = {
+var propTypes$C = {
   className: PropTypes$1.string,
   color: PropTypes$1.string
 };
-var defaultProps$D = {
+var defaultProps$C = {
   className: null,
   color: '#fff'
 };
@@ -1113,15 +1112,15 @@ var PlayIcon = function PlayIcon(_ref) {
     stroke: color
   }));
 };
-PlayIcon.propTypes = propTypes$D;
-PlayIcon.defaultProps = defaultProps$D;
+PlayIcon.propTypes = propTypes$C;
+PlayIcon.defaultProps = defaultProps$C;
 var PlayIcon$1 = PlayIcon;
 
-var propTypes$C = {
+var propTypes$B = {
   className: PropTypes$1.string,
   color: PropTypes$1.string
 };
-var defaultProps$C = {
+var defaultProps$B = {
   className: null,
   color: '#fff'
 };
@@ -1145,13 +1144,13 @@ var UnmuteIcon = function UnmuteIcon(_ref) {
     fill: color
   }));
 };
-UnmuteIcon.propTypes = propTypes$C;
-UnmuteIcon.defaultProps = defaultProps$C;
+UnmuteIcon.propTypes = propTypes$B;
+UnmuteIcon.defaultProps = defaultProps$B;
 var UnmuteIcon$1 = UnmuteIcon;
 
 var styles$r = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
 
-var propTypes$B = {
+var propTypes$A = {
   items: PropTypes.menuItems,
   theme: PropTypes.bootstrapThemes,
   separator: PropTypes$1.oneOf([null, 'arrow']),
@@ -1159,7 +1158,7 @@ var propTypes$B = {
   noWrap: PropTypes$1.bool,
   className: PropTypes$1.string
 };
-var defaultProps$B = {
+var defaultProps$A = {
   items: [],
   theme: null,
   separator: null,
@@ -1205,12 +1204,12 @@ var Breadcrumb = function Breadcrumb(_ref) {
     }, /*#__PURE__*/React.createElement(Label$1, null, label)) : null);
   })));
 };
-Breadcrumb.propTypes = propTypes$B;
-Breadcrumb.defaultProps = defaultProps$B;
+Breadcrumb.propTypes = propTypes$A;
+Breadcrumb.defaultProps = defaultProps$A;
 var Breadcrumb$1 = Breadcrumb;
 
 var _excluded$4 = ["type", "className", "label", "children", "onClick", "active"];
-var propTypes$A = {
+var propTypes$z = {
   items: PropTypes.menuItems,
   children: PropTypes$1.node,
   visible: PropTypes$1.bool,
@@ -1220,7 +1219,7 @@ var propTypes$A = {
   onClickItem: PropTypes$1.func,
   onClickOutside: PropTypes$1.func
 };
-var defaultProps$A = {
+var defaultProps$z = {
   items: [],
   children: null,
   visible: false,
@@ -1308,12 +1307,12 @@ var Dropdown = function Dropdown(_ref) {
     }, itemProps), label !== null ? /*#__PURE__*/React.createElement(Label$1, null, label) : itemChildren)) : null;
   }));
 };
-Dropdown.propTypes = propTypes$A;
-Dropdown.defaultProps = defaultProps$A;
+Dropdown.propTypes = propTypes$z;
+Dropdown.defaultProps = defaultProps$z;
 var Dropdown$1 = Dropdown;
 
 var _excluded$3 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
-var propTypes$z = {
+var propTypes$y = {
   items: PropTypes.menuItems,
   tagName: PropTypes$1.string,
   itemTagName: PropTypes$1.string,
@@ -1332,7 +1331,7 @@ var propTypes$z = {
   dropdownLinkClassName: PropTypes$1.string,
   dropdownAlign: PropTypes.dropdownAlign
 };
-var defaultProps$z = {
+var defaultProps$y = {
   items: [],
   tagName: 'ul',
   itemTagName: 'li',
@@ -1448,13 +1447,13 @@ var Menu = function Menu(_ref) {
     }) : null);
   }));
 };
-Menu.propTypes = propTypes$z;
-Menu.defaultProps = defaultProps$z;
+Menu.propTypes = propTypes$y;
+Menu.defaultProps = defaultProps$y;
 var Menu$1 = Menu;
 
 var styles$q = {"collapse":"micromag-core-menus-navbar-collapse"};
 
-var propTypes$y = {
+var propTypes$x = {
   brand: PropTypes$1.node,
   brandLink: PropTypes$1.string,
   breadcrumbs: PropTypes$1.node,
@@ -1470,7 +1469,7 @@ var propTypes$y = {
   breadCrumbsClassName: PropTypes$1.string,
   collapseClassName: PropTypes$1.string
 };
-var defaultProps$y = {
+var defaultProps$x = {
   brand: null,
   brandLink: null,
   breadcrumbs: null,
@@ -1540,8 +1539,8 @@ var Navbar = function Navbar(_ref) {
     className: classNames(['navbar-collapse', 'collapse', styles$q.collapse, _defineProperty(_defineProperty({}, collapseClassName, collapseClassName !== null), "show", menuVisible)])
   }, children) : children));
 };
-Navbar.propTypes = propTypes$y;
-Navbar.defaultProps = defaultProps$y;
+Navbar.propTypes = propTypes$x;
+Navbar.defaultProps = defaultProps$x;
 var Navbar$1 = Navbar;
 
 var styles$p = {};
@@ -1562,7 +1561,7 @@ var messages = defineMessages({
     }]
   }
 });
-var propTypes$x = {
+var propTypes$w = {
   page: PropTypes$1.number,
   lastPage: PropTypes$1.number,
   maxPages: PropTypes$1.number,
@@ -1577,7 +1576,7 @@ var propTypes$x = {
   linkClassName: PropTypes$1.string,
   onClickPage: PropTypes$1.func
 };
-var defaultProps$x = {
+var defaultProps$w = {
   page: 1,
   lastPage: 1,
   maxPages: 10,
@@ -1680,13 +1679,13 @@ var PaginationMenu = function PaginationMenu(_ref) {
     className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)])
   }, /*#__PURE__*/React.createElement(Label$1, null, messages.next))) : null));
 };
-PaginationMenu.propTypes = propTypes$x;
-PaginationMenu.defaultProps = defaultProps$x;
+PaginationMenu.propTypes = propTypes$w;
+PaginationMenu.defaultProps = defaultProps$w;
 var PaginationMenu$1 = PaginationMenu;
 
 var styles$o = {"container":"micromag-core-menus-tabs-container"};
 
-var propTypes$w = {
+var propTypes$v = {
   items: PropTypes.menuItems,
   size: PropTypes.buttonSize,
   theme: PropTypes.buttonTheme,
@@ -1695,7 +1694,7 @@ var propTypes$w = {
   className: PropTypes$1.string,
   onClickItem: PropTypes$1.func
 };
-var defaultProps$w = {
+var defaultProps$v = {
   items: [],
   size: null,
   theme: 'secondary',
@@ -1724,18 +1723,18 @@ var TabsMenu = function TabsMenu(_ref) {
     buttonClassName: classNames([styles$o.button, _defineProperty({}, buttonClassName, buttonClassName !== null)])
   }));
 };
-TabsMenu.propTypes = propTypes$w;
-TabsMenu.defaultProps = defaultProps$w;
+TabsMenu.propTypes = propTypes$v;
+TabsMenu.defaultProps = defaultProps$v;
 var TabsMenu$1 = TabsMenu;
 
 var styles$n = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
 
-var propTypes$v = {
+var propTypes$u = {
   modals: PropTypes.modals.isRequired,
   setModalsContainer: PropTypes$1.func.isRequired,
   className: PropTypes$1.string
 };
-var defaultProps$v = {
+var defaultProps$u = {
   className: null
 };
 var ModalsContainer = function ModalsContainer(_ref) {
@@ -1753,14 +1752,14 @@ var ModalsContainer = function ModalsContainer(_ref) {
     ref: containerRef
   }));
 };
-ModalsContainer.propTypes = propTypes$v;
-ModalsContainer.defaultProps = defaultProps$v;
+ModalsContainer.propTypes = propTypes$u;
+ModalsContainer.defaultProps = defaultProps$u;
 var Modals = withModals(ModalsContainer);
 
 var styles$m = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$u = {
+var propTypes$t = {
   id: PropTypes$1.string,
   data: PropTypes$1.object,
   // eslint-disable-line react/forbid-prop-types
@@ -1770,7 +1769,7 @@ var propTypes$u = {
   unregister: PropTypes$1.func,
   children: PropTypes$1.node
 };
-var defaultProps$u = {
+var defaultProps$t = {
   id: null,
   data: null,
   container: null,
@@ -1800,18 +1799,18 @@ var ElementPortal = function ElementPortal(_ref) {
   }, [finalId, data]);
   return container !== null ? /*#__PURE__*/ReactDOM.createPortal(children, container) : null;
 };
-ElementPortal.propTypes = propTypes$u;
-ElementPortal.defaultProps = defaultProps$u;
+ElementPortal.propTypes = propTypes$t;
+ElementPortal.defaultProps = defaultProps$t;
 var ElementPortal$1 = ElementPortal;
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$t = {
+var propTypes$s = {
   id: PropTypes$1.string,
   data: PropTypes$1.object,
   // eslint-disable-line react/forbid-prop-types
   children: PropTypes$1.node
 };
-var defaultProps$t = {
+var defaultProps$s = {
   id: null,
   data: null,
   children: null
@@ -1834,17 +1833,17 @@ var ModalPortal = function ModalPortal(_ref) {
     unregister: unregister
   }, children);
 };
-ModalPortal.propTypes = propTypes$t;
-ModalPortal.defaultProps = defaultProps$t;
+ModalPortal.propTypes = propTypes$s;
+ModalPortal.defaultProps = defaultProps$s;
 var Portal$1 = ModalPortal;
 
-var propTypes$s = {
+var propTypes$r = {
   id: PropTypes$1.string,
   title: PropTypes$1.string,
   position: PropTypes$1.oneOf(['center', 'top']),
   children: PropTypes$1.node
 };
-var defaultProps$s = {
+var defaultProps$r = {
   id: null,
   title: null,
   position: 'center',
@@ -1872,33 +1871,31 @@ var Modal = function Modal(_ref) {
     className: classNames([styles$m.inner, 'bg-dark'])
   }, children)));
 };
-Modal.propTypes = propTypes$s;
-Modal.defaultProps = defaultProps$s;
+Modal.propTypes = propTypes$r;
+Modal.defaultProps = defaultProps$r;
 var Modal$1 = Modal;
 
 var styles$l = {"container":"micromag-core-modals-dialog-container"};
 
-var propTypes$r = {
+var propTypes$q = {
   title: PropTypes.label,
   header: PropTypes$1.node,
   children: PropTypes$1.node,
   footer: PropTypes$1.node,
   size: PropTypes$1.string,
   buttons: PropTypes.buttons,
-  // theme: PropTypes.oneOf([null, 'dark', 'light']),
-  onClickClose: PropTypes$1.func,
+  onClose: PropTypes$1.func,
   className: PropTypes$1.string,
   bodyClassName: PropTypes$1.string
 };
-var defaultProps$r = {
+var defaultProps$q = {
   title: null,
   header: null,
   children: null,
   footer: null,
   size: null,
   buttons: null,
-  // theme: 'dark',
-  onClickClose: null,
+  onClose: null,
   className: null,
   bodyClassName: null
 };
@@ -1909,7 +1906,7 @@ var ModalDialog = function ModalDialog(_ref) {
     buttons = _ref.buttons,
     footer = _ref.footer,
     size = _ref.size,
-    onClickClose = _ref.onClickClose,
+    onClose = _ref.onClose,
     className = _ref.className,
     bodyClassName = _ref.bodyClassName;
   return /*#__PURE__*/React.createElement("div", {
@@ -1918,100 +1915,27 @@ var ModalDialog = function ModalDialog(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "modal-content"
   }, header || /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-header', 'p-2', 'd-flex', 'justify-content-between', styles$l.header, {
-      // 'bg-dark': theme === 'dark',
-      // 'border-dark': theme === 'dark',
-      // 'text-light': theme === 'dark',
-    }])
+    className: classNames(['modal-header', 'p-2', 'd-flex', 'justify-content-between', styles$l.header])
   }, /*#__PURE__*/React.createElement("h5", {
     className: "modal-title"
   }, /*#__PURE__*/React.createElement(Label$1, null, title)), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "btn btn-close p-2",
     "aria-label": "Close",
-    onClick: onClickClose
+    onClick: onClose
   })), /*#__PURE__*/React.createElement("div", {
     className: classNames(['modal-body', 'p-2', _defineProperty({}, bodyClassName, bodyClassName !== null)])
   }, children), footer !== null || buttons !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-footer', styles$l.footer])
+    className: classNames(['modal-footer', 'p-2', styles$l.footer])
   }, footer, buttons !== null ? /*#__PURE__*/React.createElement(Buttons$1, {
     buttons: buttons,
     className: styles$l.buttons
   }) : null) : null));
 };
-ModalDialog.propTypes = propTypes$r;
-ModalDialog.defaultProps = defaultProps$r;
+ModalDialog.propTypes = propTypes$q;
+ModalDialog.defaultProps = defaultProps$q;
 var ModalDialog$1 = ModalDialog;
 
-// import classNames from 'classnames';
-// import { DashboardModal } from '@uppy/react';
-var DashboardModal = /*#__PURE__*/React.lazy(function () {
-  return import('@uppy/react').then(function (_ref) {
-    var Component = _ref.DashboardModal;
-    return {
-      "default": Component
-    };
-  });
-});
-var propTypes$q = {
-  type: PropTypes$1.oneOfType([PropTypes.mediaTypes, PropTypes$1.array]),
-  opened: PropTypes$1.bool,
-  sources: PropTypes$1.arrayOf(PropTypes$1.string),
-  onUploaded: PropTypes$1.func,
-  onRequestClose: PropTypes$1.func
-};
-var defaultProps$q = {
-  type: null,
-  opened: false,
-  sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
-  onUploaded: null,
-  onRequestClose: null
-};
-var UploadModal = function UploadModal(_ref2) {
-  var type = _ref2.type,
-    opened = _ref2.opened,
-    sources = _ref2.sources,
-    onUploaded = _ref2.onUploaded,
-    onRequestClose = _ref2.onRequestClose;
-  var onUppyComplete = useCallback(function (response) {
-    if (onUploaded !== null) {
-      onUploaded(response);
-    }
-  }, [onUploaded]);
-  var fileTypes = useMemo(function () {
-    if (isArray(type)) {
-      return type.map(function (t) {
-        return ['image', 'video', 'audio'].indexOf(t) !== -1 ? "".concat(t, "/*") : null;
-      }).filter(function (t) {
-        return t !== null;
-      });
-    }
-    return ['image', 'video', 'audio'].indexOf(type) !== -1 ? ["".concat(type, "/*")] : null;
-  }, [type]);
-  var uppy = useUppy({
-    onComplete: onUppyComplete,
-    sources: sources,
-    allowedFileTypes: fileTypes !== null && fileTypes.length > 0 ? fileTypes : null
-  });
-  useEffect(function () {
-    if (uppy !== null && !opened) {
-      uppy.cancelAll();
-    }
-  }, [uppy, opened]);
-  return uppy !== null ? /*#__PURE__*/React.createElement(Suspense, {
-    fallback: /*#__PURE__*/React.createElement("div", null)
-  }, /*#__PURE__*/React.createElement(DashboardModal, {
-    uppy: uppy,
-    open: opened,
-    closeAfterFinish: true,
-    onRequestClose: onRequestClose,
-    plugins: sources
-  })) : null;
-};
-UploadModal.propTypes = propTypes$q;
-UploadModal.defaultProps = defaultProps$q;
-var UploadModal$1 = UploadModal;
-
 var styles$k = {"container":"micromag-core-panels-container"};
 
 var propTypes$p = {
@@ -4521,4 +4445,4 @@ LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
 var LinkStyle$1 = LinkStyle;
 
-export { ArrowIcon$1 as ArrowIcon, BackButton$1 as BackButton, Breadcrumb$1 as Breadcrumb, Button$3 as Button, Buttons$1 as Buttons, Card$1 as Card, Close$1 as Close, CloseIcon$1 as CloseIcon, CollapsablePanel$1 as CollapsablePanel, Date$2 as Date, Detector$1 as Detector, Dropdown$1 as DropdownMenu, ElementComponent$1 as Element, Empty$1 as Empty, FieldForm$1 as FieldForm, FontFaces$1 as FontFaces, Form$1 as Form, FormPanel$1 as FormPanel, FullscreenIcon$1 as FullscreenIcon, HighlightStyle$1 as HighlightStyle, Label$1 as Label, Link$1 as Link, LinkIcon$1 as LinkIcon, LinkStyle$1 as LinkStyle, Media$1 as Media, Menu$1 as Menu, Meta$1 as Meta, Modal$1 as Modal, ModalDialog$1 as ModalDialog, Portal$1 as ModalPortal, Modals, MuteIcon$1 as MuteIcon, Navbar$1 as Navbar, PaginationMenu$1 as Pagination, Panel$1 as Panel, Portal as PanelPortal, Panels, PauseIcon$1 as PauseIcon, AdFrame$1 as PlaceholderAdFrame, AdImage$1 as PlaceholderAdImage, Audio$1 as PlaceholderAudio, Button$1 as PlaceholderButton, Image$1 as PlaceholderImage, Line$1 as PlaceholderLine, Map$1 as PlaceholderMap, MapPath$1 as PlaceholderMapPath, Quote$1 as PlaceholderQuote, ShortText$1 as PlaceholderShortText, Subtitle$1 as PlaceholderSubtitle, TextPlaceholder$1 as PlaceholderText, Timeline$1 as PlaceholderTimeline, Title$3 as PlaceholderTitle, Video$1 as PlaceholderVideo, Video360$1 as PlaceholderVideo360, VideoLoop$1 as PlaceholderVideoLoop, PlayIcon$1 as PlayIcon, Screen$1 as Screen, ScreenElement$1 as ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer$1 as ScreenSizer, Screens$1 as Screens, Slideshow$1 as Slideshow, Spinner$1 as Spinner, TabsMenu$1 as Tabs, Transitions, TransitionsStagger$1 as TransitionsStagger, UnmuteIcon$1 as UnmuteIcon, UploadModal$1 as UploadModal };
+export { ArrowIcon$1 as ArrowIcon, BackButton$1 as BackButton, Breadcrumb$1 as Breadcrumb, Button$3 as Button, Buttons$1 as Buttons, Card$1 as Card, Close$1 as Close, CloseIcon$1 as CloseIcon, CollapsablePanel$1 as CollapsablePanel, Date$2 as Date, Detector$1 as Detector, Dropdown$1 as DropdownMenu, ElementComponent$1 as Element, Empty$1 as Empty, FieldForm$1 as FieldForm, FontFaces$1 as FontFaces, Form$1 as Form, FormPanel$1 as FormPanel, FullscreenIcon$1 as FullscreenIcon, HighlightStyle$1 as HighlightStyle, Label$1 as Label, Link$1 as Link, LinkIcon$1 as LinkIcon, LinkStyle$1 as LinkStyle, Media$1 as Media, Menu$1 as Menu, Meta$1 as Meta, Modal$1 as Modal, ModalDialog$1 as ModalDialog, Portal$1 as ModalPortal, Modals, MuteIcon$1 as MuteIcon, Navbar$1 as Navbar, PaginationMenu$1 as Pagination, Panel$1 as Panel, Portal as PanelPortal, Panels, PauseIcon$1 as PauseIcon, AdFrame$1 as PlaceholderAdFrame, AdImage$1 as PlaceholderAdImage, Audio$1 as PlaceholderAudio, Button$1 as PlaceholderButton, Image$1 as PlaceholderImage, Line$1 as PlaceholderLine, Map$1 as PlaceholderMap, MapPath$1 as PlaceholderMapPath, Quote$1 as PlaceholderQuote, ShortText$1 as PlaceholderShortText, Subtitle$1 as PlaceholderSubtitle, TextPlaceholder$1 as PlaceholderText, Timeline$1 as PlaceholderTimeline, Title$3 as PlaceholderTitle, Video$1 as PlaceholderVideo, Video360$1 as PlaceholderVideo360, VideoLoop$1 as PlaceholderVideoLoop, PlayIcon$1 as PlayIcon, Screen$1 as Screen, ScreenElement$1 as ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer$1 as ScreenSizer, Screens$1 as Screens, Slideshow$1 as Slideshow, Spinner$1 as Spinner, TabsMenu$1 as Tabs, Transitions, TransitionsStagger$1 as TransitionsStagger, UnmuteIcon$1 as UnmuteIcon };