@micromag/core 0.3.110 → 0.3.115

package/es/components.js

@@ -2,13 +2,13 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
 import PropTypes$1 from 'prop-types';
-import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
+import React, { useCallback, useState, useEffect, useRef, useMemo, Suspense } from 'react';
 import { Link as Link$1 } from 'react-router-dom';
 import { PropTypes } from '@micromag/core';
 import { FormattedMessage, defineMessages, FormattedDate, FormattedTime } from 'react-intl';
 import { isMessage, getFieldFromPath, getComponentFromName, setFieldValue, validateFields, getDisplayName, pascalCase, convertStyleToString } from '@micromag/core/utils';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleLeft, faAngleUp, faAngleDown, faAd, faImage, faMusic, faMapMarkerAlt, faMapMarkedAlt, faVideo, faPlay, faRedo, faCommentDots, faCheck, faTimes, faPercent } from '@fortawesome/free-solid-svg-icons';
+import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, useUppy, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
@@ -16,29 +16,42 @@ import { useForm, useDocumentEvent, useIntersectionObserver, useResizeObserver }
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import get from 'lodash/get';
 import ReactDOM from 'react-dom';
-import { DashboardModal } from '@uppy/react';
 import isArray from 'lodash/isArray';
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
+import { faAngleUp } from '@fortawesome/free-solid-svg-icons/faAngleUp';
 import dayjs from 'dayjs';
 import throttle from 'lodash/throttle';
 import isObject from 'lodash/isObject';
 import { Helmet } from 'react-helmet';
 import isString from 'lodash/isString';
 import 'snake-case';
+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';
 import isNumber from 'lodash/isNumber';
+import { faMapMarkerAlt } from '@fortawesome/free-solid-svg-icons/faMapMarkerAlt';
+import { faMapMarkedAlt } from '@fortawesome/free-solid-svg-icons/faMapMarkedAlt';
+import { faVideo } from '@fortawesome/free-solid-svg-icons/faVideo';
+import { faPlay } from '@fortawesome/free-solid-svg-icons/faPlay';
+import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { getSizeWithinBounds } from '@folklore/size';
+import { faCommentDots } from '@fortawesome/free-solid-svg-icons/faCommentDots';
+import { faCheck } from '@fortawesome/free-solid-svg-icons/faCheck';
+import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
+import { faPercent } from '@fortawesome/free-solid-svg-icons/faPercent';
 import { useSpring } from '@react-spring/core';
 import { animated } from '@react-spring/web';
 
 var styles$v = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","withIcon":"micromag-core-buttons-button-withIcon","label":"micromag-core-buttons-button-label","right":"micromag-core-buttons-button-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
 
 /* eslint-disable react/jsx-props-no-spreading */
-var propTypes$K = {
+var propTypes$L = {
   children: PropTypes.label.isRequired,
   isHtml: PropTypes$1.bool,
   values: PropTypes$1.object // eslint-disable-line react/forbid-prop-types
 
 };
-var defaultProps$K = {
+var defaultProps$L = {
   isHtml: false,
   values: {}
 };
@@ -53,11 +66,11 @@ var Label = function Label(_ref) {
   }, children)) : children;
 };
 
-Label.propTypes = propTypes$K;
-Label.defaultProps = defaultProps$K;
+Label.propTypes = propTypes$L;
+Label.defaultProps = defaultProps$L;
 
 var _excluded$a = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
-var propTypes$J = {
+var propTypes$K = {
   type: PropTypes$1.string,
   theme: PropTypes.buttonTheme,
   size: PropTypes.buttonSize,
@@ -90,7 +103,7 @@ var propTypes$J = {
 
   })])
 };
-var defaultProps$J = {
+var defaultProps$K = {
   type: 'button',
   theme: null,
   size: null,
@@ -206,13 +219,13 @@ var Button$1 = function Button(_ref) {
   }), content);
 };
 
-Button$1.propTypes = propTypes$J;
-Button$1.defaultProps = defaultProps$J;
+Button$1.propTypes = propTypes$K;
+Button$1.defaultProps = defaultProps$K;
 
 var styles$u = {};
 
 var _excluded$9 = ["className", "onClick", "theme"];
-var propTypes$I = {
+var propTypes$J = {
   buttons: PropTypes.buttons,
   size: PropTypes.buttonSize,
   theme: PropTypes.buttonTheme,
@@ -221,7 +234,7 @@ var propTypes$I = {
   className: PropTypes$1.string,
   buttonClassName: PropTypes$1.string
 };
-var defaultProps$I = {
+var defaultProps$J = {
   buttons: [],
   size: null,
   theme: undefined,
@@ -271,14 +284,14 @@ var Buttons = function Buttons(_ref) {
   }));
 };
 
-Buttons.propTypes = propTypes$I;
-Buttons.defaultProps = defaultProps$I;
+Buttons.propTypes = propTypes$J;
+Buttons.defaultProps = defaultProps$J;
 
 var _excluded$8 = ["className"];
-var propTypes$H = {
+var propTypes$I = {
   className: PropTypes$1.string
 };
-var defaultProps$H = {
+var defaultProps$I = {
   className: null
 };
 
@@ -296,14 +309,14 @@ var BackButton = function BackButton(_ref) {
   }, props));
 };
 
-BackButton.propTypes = propTypes$H;
-BackButton.defaultProps = defaultProps$H;
+BackButton.propTypes = propTypes$I;
+BackButton.defaultProps = defaultProps$I;
 
 var styles$t = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
 var _excluded$7 = ["type"],
     _excluded2 = ["component", "id", "settings"];
-var propTypes$G = {
+var propTypes$H = {
   name: PropTypes$1.string,
   // .isRequired,
   value: PropTypes.component,
@@ -317,7 +330,7 @@ var propTypes$G = {
   fieldContext: PropTypes$1.any // eslint-disable-line react/forbid-prop-types
 
 };
-var defaultProps$G = {
+var defaultProps$H = {
   name: null,
   form: null,
   formComponents: {},
@@ -404,10 +417,10 @@ var FieldForm = function FieldForm(_ref) {
   }, formProps))) : null;
 };
 
-FieldForm.propTypes = propTypes$G;
-FieldForm.defaultProps = defaultProps$G;
+FieldForm.propTypes = propTypes$H;
+FieldForm.defaultProps = defaultProps$H;
 
-var propTypes$F = {
+var propTypes$G = {
   action: PropTypes$1.string.isRequired,
   method: PropTypes$1.string,
   fields: PropTypes.formFields,
@@ -434,7 +447,7 @@ var propTypes$F = {
   actionsClassName: PropTypes$1.string,
   cancelClassName: PropTypes$1.string
 };
-var defaultProps$F = {
+var defaultProps$G = {
   method: 'POST',
   fields: [],
   initialValue: null,
@@ -648,13 +661,13 @@ var Form = function Form(_ref) {
   })) : null) : null);
 };
 
-Form.propTypes = propTypes$F;
-Form.defaultProps = defaultProps$F;
+Form.propTypes = propTypes$G;
+Form.defaultProps = defaultProps$G;
 
 var styles$s = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
 var _excluded$6 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
-var propTypes$E = {
+var propTypes$F = {
   href: PropTypes$1.string,
   external: PropTypes$1.bool,
   target: PropTypes$1.string,
@@ -663,7 +676,7 @@ var propTypes$E = {
   withoutStyle: PropTypes$1.bool,
   className: PropTypes$1.string
 };
-var defaultProps$E = {
+var defaultProps$F = {
   href: '',
   external: false,
   target: '_blank',
@@ -694,11 +707,11 @@ var Link = function Link(_ref) {
   }, props), /*#__PURE__*/React.createElement(Label, null, children));
 };
 
-Link.propTypes = propTypes$E;
-Link.defaultProps = defaultProps$E;
+Link.propTypes = propTypes$F;
+Link.defaultProps = defaultProps$F;
 
 var _excluded$5 = ["label", "className"];
-var propTypes$D = {
+var propTypes$E = {
   href: PropTypes$1.string,
   header: PropTypes$1.node,
   image: PropTypes$1.node,
@@ -727,7 +740,7 @@ var propTypes$D = {
   onClickBody: PropTypes$1.func,
   onClickFooter: PropTypes$1.func
 };
-var defaultProps$D = {
+var defaultProps$E = {
   href: null,
   header: null,
   image: null,
@@ -848,15 +861,15 @@ var Card = function Card(_ref) {
   }, cardInner);
 };
 
-Card.propTypes = propTypes$D;
-Card.defaultProps = defaultProps$D;
+Card.propTypes = propTypes$E;
+Card.defaultProps = defaultProps$E;
 
-var propTypes$C = {
+var propTypes$D = {
   animated: PropTypes$1.bool,
   color: PropTypes$1.string,
   className: PropTypes$1.string
 };
-var defaultProps$C = {
+var defaultProps$D = {
   animated: true,
   color: 'currentColor',
   className: null
@@ -921,19 +934,19 @@ var Spinner = function Spinner(_ref) {
   }) : null))));
 };
 
-Spinner.propTypes = propTypes$C;
-Spinner.defaultProps = defaultProps$C;
+Spinner.propTypes = propTypes$D;
+Spinner.defaultProps = defaultProps$D;
 
 var styles$r = {};
 
 var _excluded$4 = ["description", "loading", "children", "className"];
-var propTypes$B = {
+var propTypes$C = {
   description: PropTypes$1.node,
   loading: PropTypes$1.bool,
   children: PropTypes$1.node,
   className: PropTypes$1.string
 };
-var defaultProps$B = {
+var defaultProps$C = {
   description: null,
   loading: false,
   children: null,
@@ -952,12 +965,12 @@ var FormPanel = function FormPanel(_ref) {
   }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner, null) : children);
 };
 
-FormPanel.propTypes = propTypes$B;
-FormPanel.defaultProps = defaultProps$B;
+FormPanel.propTypes = propTypes$C;
+FormPanel.defaultProps = defaultProps$C;
 
 var styles$q = {"container":"micromag-core-menus-breadcrumb-container","arrow":"micromag-core-menus-breadcrumb-arrow"};
 
-var propTypes$A = {
+var propTypes$B = {
   items: PropTypes.menuItems,
   theme: PropTypes.bootstrapThemes,
   separator: PropTypes$1.oneOf([null, 'arrow']),
@@ -965,7 +978,7 @@ var propTypes$A = {
   noWrap: PropTypes$1.bool,
   className: PropTypes$1.string
 };
-var defaultProps$A = {
+var defaultProps$B = {
   items: [],
   theme: null,
   separator: null,
@@ -1015,11 +1028,11 @@ var Breadcrumb = function Breadcrumb(_ref) {
   })));
 };
 
-Breadcrumb.propTypes = propTypes$A;
-Breadcrumb.defaultProps = defaultProps$A;
+Breadcrumb.propTypes = propTypes$B;
+Breadcrumb.defaultProps = defaultProps$B;
 
 var _excluded$3 = ["type", "className", "label", "children", "onClick", "active"];
-var propTypes$z = {
+var propTypes$A = {
   items: PropTypes.menuItems,
   children: PropTypes$1.node,
   visible: PropTypes$1.bool,
@@ -1029,7 +1042,7 @@ var propTypes$z = {
   onClickItem: PropTypes$1.func,
   onClickOutside: PropTypes$1.func
 };
-var defaultProps$z = {
+var defaultProps$A = {
   items: [],
   children: null,
   visible: false,
@@ -1127,11 +1140,11 @@ var Dropdown = function Dropdown(_ref) {
   }));
 };
 
-Dropdown.propTypes = propTypes$z;
-Dropdown.defaultProps = defaultProps$z;
+Dropdown.propTypes = propTypes$A;
+Dropdown.defaultProps = defaultProps$A;
 
 var _excluded$2 = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
-var propTypes$y = {
+var propTypes$z = {
   items: PropTypes.menuItems,
   tagName: PropTypes$1.string,
   itemTagName: PropTypes$1.string,
@@ -1150,7 +1163,7 @@ var propTypes$y = {
   dropdownLinkClassName: PropTypes$1.string,
   dropdownAlign: PropTypes.dropdownAlign
 };
-var defaultProps$y = {
+var defaultProps$z = {
   items: [],
   tagName: 'ul',
   itemTagName: 'li',
@@ -1274,12 +1287,12 @@ var Menu = function Menu(_ref) {
   }));
 };
 
-Menu.propTypes = propTypes$y;
-Menu.defaultProps = defaultProps$y;
+Menu.propTypes = propTypes$z;
+Menu.defaultProps = defaultProps$z;
 
 var styles$p = {"collapse":"micromag-core-menus-navbar-collapse"};
 
-var propTypes$x = {
+var propTypes$y = {
   brand: PropTypes$1.node,
   brandLink: PropTypes$1.string,
   breadcrumbs: PropTypes$1.node,
@@ -1295,7 +1308,7 @@ var propTypes$x = {
   breadCrumbsClassName: PropTypes$1.string,
   collapseClassName: PropTypes$1.string
 };
-var defaultProps$x = {
+var defaultProps$y = {
   brand: null,
   brandLink: null,
   breadcrumbs: null,
@@ -1371,8 +1384,8 @@ var Navbar = function Navbar(_ref) {
   }, children) : children));
 };
 
-Navbar.propTypes = propTypes$x;
-Navbar.defaultProps = defaultProps$x;
+Navbar.propTypes = propTypes$y;
+Navbar.defaultProps = defaultProps$y;
 
 var styles$o = {};
 
@@ -1392,7 +1405,7 @@ var messages = defineMessages({
     }]
   }
 });
-var propTypes$w = {
+var propTypes$x = {
   page: PropTypes$1.number,
   total: PropTypes$1.number,
   url: PropTypes$1.string,
@@ -1403,7 +1416,7 @@ var propTypes$w = {
   linkClassName: PropTypes$1.string,
   onClickPage: PropTypes$1.func
 };
-var defaultProps$w = {
+var defaultProps$x = {
   page: 1,
   total: 1,
   url: null,
@@ -1477,12 +1490,12 @@ var PaginationMenu = function PaginationMenu(_ref) {
   }, /*#__PURE__*/React.createElement(Label, null, messages.next))) : null));
 };
 
-PaginationMenu.propTypes = propTypes$w;
-PaginationMenu.defaultProps = defaultProps$w;
+PaginationMenu.propTypes = propTypes$x;
+PaginationMenu.defaultProps = defaultProps$x;
 
 var styles$n = {"container":"micromag-core-menus-tabs-container"};
 
-var propTypes$v = {
+var propTypes$w = {
   items: PropTypes.menuItems,
   size: PropTypes.buttonSize,
   theme: PropTypes.buttonTheme,
@@ -1491,7 +1504,7 @@ var propTypes$v = {
   className: PropTypes$1.string,
   onClickItem: PropTypes$1.func
 };
-var defaultProps$v = {
+var defaultProps$w = {
   items: [],
   size: null,
   theme: 'secondary',
@@ -1522,17 +1535,17 @@ var TabsMenu = function TabsMenu(_ref) {
   }));
 };
 
-TabsMenu.propTypes = propTypes$v;
-TabsMenu.defaultProps = defaultProps$v;
+TabsMenu.propTypes = propTypes$w;
+TabsMenu.defaultProps = defaultProps$w;
 
 var styles$m = {"container":"micromag-core-modals-container","modals":"micromag-core-modals-modals","hasModals":"micromag-core-modals-hasModals"};
 
-var propTypes$u = {
+var propTypes$v = {
   modals: PropTypes.modals.isRequired,
   setModalsContainer: PropTypes$1.func.isRequired,
   className: PropTypes$1.string
 };
-var defaultProps$u = {
+var defaultProps$v = {
   className: null
 };
 
@@ -1552,12 +1565,12 @@ var ModalsContainer = function ModalsContainer(_ref) {
   }));
 };
 
-ModalsContainer.propTypes = propTypes$u;
-ModalsContainer.defaultProps = defaultProps$u;
+ModalsContainer.propTypes = propTypes$v;
+ModalsContainer.defaultProps = defaultProps$v;
 var Modals = withModals(ModalsContainer);
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$t = {
+var propTypes$u = {
   id: PropTypes$1.string,
   data: PropTypes$1.object,
   // eslint-disable-line react/forbid-prop-types
@@ -1567,7 +1580,7 @@ var propTypes$t = {
   unregister: PropTypes$1.func,
   children: PropTypes$1.node
 };
-var defaultProps$t = {
+var defaultProps$u = {
   id: null,
   data: null,
   container: null,
@@ -1600,17 +1613,17 @@ var ElementPortal = function ElementPortal(_ref) {
   return container !== null ? /*#__PURE__*/ReactDOM.createPortal(children, container) : null;
 };
 
-ElementPortal.propTypes = propTypes$t;
-ElementPortal.defaultProps = defaultProps$t;
+ElementPortal.propTypes = propTypes$u;
+ElementPortal.defaultProps = defaultProps$u;
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$s = {
+var propTypes$t = {
   id: PropTypes$1.string,
   data: PropTypes$1.object,
   // eslint-disable-line react/forbid-prop-types
   children: PropTypes$1.node
 };
-var defaultProps$s = {
+var defaultProps$t = {
   id: null,
   data: null,
   children: null
@@ -1637,18 +1650,18 @@ var ModalPortal = function ModalPortal(_ref) {
   }, children);
 };
 
-ModalPortal.propTypes = propTypes$s;
-ModalPortal.defaultProps = defaultProps$s;
+ModalPortal.propTypes = propTypes$t;
+ModalPortal.defaultProps = defaultProps$t;
 
 var styles$l = {"container":"micromag-core-modals-modal-container","center":"micromag-core-modals-modal-center","inner":"micromag-core-modals-modal-inner","top":"micromag-core-modals-modal-top"};
 
-var propTypes$r = {
+var propTypes$s = {
   id: PropTypes$1.string,
   title: PropTypes$1.string,
   position: PropTypes$1.oneOf(['center', 'top']),
   children: PropTypes$1.node
 };
-var defaultProps$r = {
+var defaultProps$s = {
   id: null,
   title: null,
   position: 'center',
@@ -1678,12 +1691,12 @@ var Modal = function Modal(_ref) {
   }, children)));
 };
 
-Modal.propTypes = propTypes$r;
-Modal.defaultProps = defaultProps$r;
+Modal.propTypes = propTypes$s;
+Modal.defaultProps = defaultProps$s;
 
 var styles$k = {"container":"micromag-core-modals-dialog-container"};
 
-var propTypes$q = {
+var propTypes$r = {
   title: PropTypes.label,
   header: PropTypes$1.node,
   children: PropTypes$1.node,
@@ -1693,7 +1706,7 @@ var propTypes$q = {
   onClickClose: PropTypes$1.func,
   className: PropTypes$1.string
 };
-var defaultProps$q = {
+var defaultProps$r = {
   title: null,
   header: null,
   children: null,
@@ -1741,18 +1754,26 @@ var ModalDialog = function ModalDialog(_ref) {
   }) : null) : null));
 };
 
-ModalDialog.propTypes = propTypes$q;
-ModalDialog.defaultProps = defaultProps$q;
+ModalDialog.propTypes = propTypes$r;
+ModalDialog.defaultProps = defaultProps$r;
 
 // import classNames from 'classnames';
-var propTypes$p = {
+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$p = {
+var defaultProps$q = {
   type: null,
   opened: false,
   sources: ['webcam', 'facebook', 'instagram', 'dropbox', 'google-drive'],
@@ -1760,12 +1781,12 @@ var defaultProps$p = {
   onRequestClose: null
 };
 
-var UploadModal = function UploadModal(_ref) {
-  var type = _ref.type,
-      opened = _ref.opened,
-      sources = _ref.sources,
-      onUploaded = _ref.onUploaded,
-      onRequestClose = _ref.onRequestClose;
+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);
@@ -1792,26 +1813,28 @@ var UploadModal = function UploadModal(_ref) {
       uppy.reset();
     }
   }, [uppy, opened]);
-  return uppy !== null ? /*#__PURE__*/React.createElement(DashboardModal, {
+  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;
+  })) : null;
 };
 
-UploadModal.propTypes = propTypes$p;
-UploadModal.defaultProps = defaultProps$p;
+UploadModal.propTypes = propTypes$q;
+UploadModal.defaultProps = defaultProps$q;
 
 var styles$j = {"container":"micromag-core-panels-container"};
 
-var propTypes$o = {
+var propTypes$p = {
   panels: PropTypes.panels,
   setPanelsContainer: PropTypes$1.func,
   className: PropTypes$1.string
 };
-var defaultProps$o = {
+var defaultProps$p = {
   panels: [],
   setPanelsContainer: null,
   className: null
@@ -1833,18 +1856,18 @@ var PanelsContainer = function PanelsContainer(_ref) {
   }));
 };
 
-PanelsContainer.propTypes = propTypes$o;
-PanelsContainer.defaultProps = defaultProps$o;
+PanelsContainer.propTypes = propTypes$p;
+PanelsContainer.defaultProps = defaultProps$p;
 var Panels = withPanels(PanelsContainer);
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$n = {
+var propTypes$o = {
   id: PropTypes$1.string,
   data: PropTypes$1.object,
   // eslint-disable-line react/forbid-prop-types
   children: PropTypes$1.node
 };
-var defaultProps$n = {
+var defaultProps$o = {
   id: null,
   data: null,
   children: null
@@ -1877,18 +1900,18 @@ var PanelPortal = function PanelPortal(_ref) {
   }, children);
 };
 
-PanelPortal.propTypes = propTypes$n;
-PanelPortal.defaultProps = defaultProps$n;
+PanelPortal.propTypes = propTypes$o;
+PanelPortal.defaultProps = defaultProps$o;
 
 var styles$i = {"container":"micromag-core-panels-panel-container"};
 
 /* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
-var propTypes$m = {
+var propTypes$n = {
   id: PropTypes$1.string,
   title: PropTypes$1.string,
   children: PropTypes$1.node
 };
-var defaultProps$m = {
+var defaultProps$n = {
   id: null,
   title: null,
   children: null
@@ -1914,12 +1937,12 @@ var Panel = function Panel(_ref) {
   }, children));
 };
 
-Panel.propTypes = propTypes$m;
-Panel.defaultProps = defaultProps$m;
+Panel.propTypes = propTypes$n;
+Panel.defaultProps = defaultProps$n;
 
 var styles$h = {"container":"micromag-core-partials-collapsable-panel-container","top":"micromag-core-partials-collapsable-panel-top","button":"micromag-core-partials-collapsable-panel-button","label":"micromag-core-partials-collapsable-panel-label","content":"micromag-core-partials-collapsable-panel-content","isOpened":"micromag-core-partials-collapsable-panel-isOpened"};
 
-var propTypes$l = {
+var propTypes$m = {
   title: PropTypes$1.node,
   children: PropTypes$1.node,
   className: PropTypes$1.string,
@@ -1928,7 +1951,7 @@ var propTypes$l = {
   openedClassName: PropTypes$1.string,
   buttonClassName: PropTypes$1.string
 };
-var defaultProps$l = {
+var defaultProps$m = {
   title: null,
   children: null,
   className: null,
@@ -1976,8 +1999,62 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
   }, children));
 };
 
-CollapsablePanel.propTypes = propTypes$l;
-CollapsablePanel.defaultProps = defaultProps$l;
+CollapsablePanel.propTypes = propTypes$m;
+CollapsablePanel.defaultProps = defaultProps$m;
+
+var propTypes$l = {
+  stroke: PropTypes$1.string,
+  border: PropTypes$1.string,
+  fill: PropTypes$1.string,
+  className: PropTypes$1.string
+};
+var defaultProps$l = {
+  stroke: 'currentColor',
+  border: 'rgba(0,0,0,0.67)',
+  fill: '#fff',
+  className: null
+};
+
+var Close = function Close(_ref) {
+  var stroke = _ref.stroke,
+      border = _ref.border,
+      fill = _ref.fill,
+      className = _ref.className;
+  return /*#__PURE__*/React.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "42.9",
+    height: "42.9",
+    viewBox: "0 0 42.9 42.9",
+    className: className
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(-352.531 -47.531)"
+  }, border ? /*#__PURE__*/React.createElement("path", {
+    fill: border,
+    d: "M374,47.5c11.9,0,21.5,9.6,21.5,21.5s-9.6,21.5-21.5,21.5s-21.5-9.6-21.5-21.5c0,0,0,0,0,0 C352.5,57.1,362.1,47.5,374,47.5z"
+  }) : null, /*#__PURE__*/React.createElement("path", {
+    fill: fill,
+    d: "M374,50c10.5,0,19,8.5,19,19s-8.5,19-19,19s-19-8.5-19-19S363.5,50,374,50z"
+  }), /*#__PURE__*/React.createElement("g", {
+    transform: "translate(366.893 61.893)"
+  }, /*#__PURE__*/React.createElement("g", {
+    transform: "translate(0 0)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: fill,
+    stroke: stroke,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    d: "M14.2,0.3L0,13.9"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: fill,
+    stroke: stroke,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    d: "M0.3,0l13.7,14.2"
+  })))));
+};
+
+Close.propTypes = propTypes$l;
+Close.defaultProps = defaultProps$l;
 
 /* eslint-disable react/jsx-props-no-spreading */
 var propTypes$k = {
@@ -4266,4 +4343,4 @@ var LinkStyle = function LinkStyle(_ref) {
 LinkStyle.propTypes = propTypes;
 LinkStyle.defaultProps = defaultProps;
 
-export { BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, HighlightStyle, Label, Link, LinkStyle, Media, Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, 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 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UploadModal };
+export { BackButton, Breadcrumb, Button$1 as Button, Buttons, Card, Close, CollapsablePanel, Date$1 as Date, Detector, Dropdown as DropdownMenu, ElementComponent as Element, Empty, FieldForm, FontFaces, Form, FormPanel, HighlightStyle, Label, Link, LinkStyle, Media, Menu, Meta, Modal, ModalDialog, ModalPortal, Modals, Navbar, PaginationMenu as Pagination, Panel, PanelPortal, Panels, 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 as PlaceholderTitle, Video as PlaceholderVideo, Video360 as PlaceholderVideo360, VideoLoop as PlaceholderVideoLoop, Screen$1 as Screen, ScreenElement, Placeholder as ScreenPlaceholder, Preview as ScreenPreview, ScreenSizer, Screens, Slideshow, Spinner, TabsMenu as Tabs, Transitions, TransitionsStagger, UploadModal };