@micromag/core 0.3.420 → 0.3.429

package/es/components.js

@@ -15,6 +15,7 @@ import { useForm, useDocumentEvent, useIntersectionObserver, useDimensionObserve
 import { useFieldsManager, useFieldComponent, FieldContextProvider, withModals, useModals, useUppy, withPanels, usePanels, ScreenSizeProvider, useScreenComponent, ScreenProvider, useScreenRenderContext, useScreenSize } from '@micromag/core/contexts';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import get from 'lodash/get';
+import queryString from 'query-string';
 import ReactDOM from 'react-dom';
 import isArray from 'lodash/isArray';
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
@@ -24,7 +25,6 @@ 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';
@@ -135,7 +135,7 @@ var defaultProps$S = {
   refButton: null
 };
 var Button$1 = function Button(_ref) {
-  var _ref7, _ref8;
+  var _ref8;
   var type = _ref.type,
     theme = _ref.theme,
     size = _ref.size,
@@ -184,9 +184,9 @@ var Button$1 = function Button(_ref) {
     className: classNames([styles$x.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 ? (_ref7 = {
+  var buttonClassNames = classNames([!withoutBootstrapStyles ? _defineProperty(_defineProperty(_defineProperty({
     btn: withStyle
-  }, _defineProperty(_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty(_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty(_ref7, "active", !withoutStyle && active), _ref7) : null, styles$x.container, (_ref8 = {}, _defineProperty(_ref8, styles$x.withoutStyle, withoutStyle), _defineProperty(_ref8, styles$x.withIcon, hasIcon), _defineProperty(_ref8, styles$x.withIconColumns, hasIconColumns), _defineProperty(_ref8, styles$x.withText, text !== null), _defineProperty(_ref8, styles$x.withShadow, withShadow), _defineProperty(_ref8, styles$x.isSmall, small), _defineProperty(_ref8, styles$x.isBig, big), _defineProperty(_ref8, styles$x.isLink, href !== null), _defineProperty(_ref8, styles$x.asLink, asLink), _defineProperty(_ref8, styles$x.isDisabled, disabled), _defineProperty(_ref8, styles$x.isLoading, loading), _defineProperty(_ref8, className, className !== null), _ref8)]);
+  }, "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))]);
   if (href !== null) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
@@ -251,7 +251,6 @@ var Buttons = function Buttons(_ref) {
     className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$w.container, _defineProperty({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
-    var _ref4;
     var _button$className = button.className,
       customClassName = _button$className === void 0 ? null : _button$className,
       _button$onClick = button.onClick,
@@ -261,7 +260,7 @@ var Buttons = function Buttons(_ref) {
       buttonProps = _objectWithoutProperties(button, _excluded$a);
     var fixedProps = {
       key: "button-".concat(index),
-      className: classNames([styles$w.button, (_ref4 = {}, _defineProperty(_ref4, buttonClassName, buttonClassName !== null), _defineProperty(_ref4, customClassName, customClassName !== null), _ref4)]),
+      className: classNames([styles$w.button, _defineProperty(_defineProperty({}, buttonClassName, buttonClassName !== null), customClassName, customClassName !== null)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -462,7 +461,6 @@ var defaultProps$O = {
   cancelClassName: null
 };
 var Form = function Form(_ref) {
-  var _ref4;
   var action = _ref.action,
     method = _ref.method,
     initialFields = _ref.fields,
@@ -600,7 +598,7 @@ var Form = function Form(_ref) {
   }) : null, generalError ? /*#__PURE__*/React.createElement("p", {
     className: "text-danger my-1"
   }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$v.actions, (_ref4 = {}, _defineProperty(_ref4, styles$v[actionsAlign], actionsAlign), _defineProperty(_ref4, actionsClassName, actionsClassName !== null), _ref4)])
+    className: classNames([styles$v.actions, _defineProperty(_defineProperty({}, styles$v[actionsAlign], actionsAlign), actionsClassName, actionsClassName !== null)])
   }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React.createElement(Button$1, {
     type: "button",
     onClick: onCancel,
@@ -735,7 +733,6 @@ var defaultProps$M = {
   onClickFooter: null
 };
 var Card = function Card(_ref) {
-  var _ref10;
   var href = _ref.href,
     header = _ref.header,
     image = _ref.image,
@@ -804,7 +801,7 @@ var Card = function Card(_ref) {
   }, /*#__PURE__*/React.createElement(Label, null, footer)) : /*#__PURE__*/React.createElement("div", {
     className: classNames(['card-footer', _defineProperty({}, footerClassName, footerClassName !== null)])
   }, /*#__PURE__*/React.createElement(Label, null, footer)) : null);
-  var cardClassName = classNames(['card', (_ref10 = {}, _defineProperty(_ref10, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), _defineProperty(_ref10, 'bg-dark', imageOverlay || theme === 'dark'), _defineProperty(_ref10, 'text-dark', theme === 'light'), _defineProperty(_ref10, 'text-light', imageOverlay || theme === 'dark' || theme === 'primary'), _defineProperty(_ref10, className, className !== null), _ref10)]);
+  var cardClassName = classNames(['card', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), 'bg-dark', imageOverlay || theme === 'dark'), 'text-dark', theme === 'light'), 'text-light', imageOverlay || theme === 'dark' || theme === 'primary'), className, className !== null)]);
   if (href !== null) {
     return /*#__PURE__*/React.createElement(Link, {
       href: href,
@@ -840,13 +837,12 @@ var defaultProps$L = {
   className: null
 };
 var Spinner = function Spinner(_ref) {
-  var _ref2;
   var animated = _ref.animated,
     color = _ref.color,
     strokeWidth = _ref.strokeWidth,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
-    className: classNames([styles$t.container, (_ref2 = {}, _defineProperty(_ref2, styles$t.animated, animated), _defineProperty(_ref2, className, className !== null), _ref2)]),
+    className: classNames([styles$t.container, _defineProperty(_defineProperty({}, styles$t.animated, animated), className, className !== null)]),
     width: "40",
     height: "40",
     viewBox: "0 0 40 40",
@@ -1173,7 +1169,6 @@ var Breadcrumb = function Breadcrumb(_ref) {
       'flex-nowrap': noWrap
     }])
   }, items.map(function (_ref2, index) {
-    var _ref3;
     var url = _ref2.url,
       label = _ref2.label,
       _ref2$active = _ref2.active,
@@ -1181,9 +1176,9 @@ var Breadcrumb = function Breadcrumb(_ref) {
       _ref2$onClick = _ref2.onClick,
       onClick = _ref2$onClick === void 0 ? null : _ref2$onClick;
     return /*#__PURE__*/React.createElement("li", {
-      className: classNames(['breadcrumb-item', (_ref3 = {
+      className: classNames(['breadcrumb-item', _defineProperty(_defineProperty({
         active: active
-      }, _defineProperty(_ref3, styles$r.arrow, separator === 'arrow'), _defineProperty(_ref3, "text-".concat(theme), active && theme !== null), _ref3)]),
+      }, styles$r.arrow, separator === 'arrow'), "text-".concat(theme), active && theme !== null)]),
       key: "item-".concat(index)
     }, active ? /*#__PURE__*/React.createElement(Label, null, label) : null, !active && url ? /*#__PURE__*/React.createElement(Link$1, {
       to: url,
@@ -1220,7 +1215,6 @@ var defaultProps$A = {
   onClickOutside: null
 };
 var Dropdown = function Dropdown(_ref) {
-  var _ref2;
   var items = _ref.items,
     children = _ref.children,
     visible = _ref.visible,
@@ -1251,10 +1245,9 @@ var Dropdown = function Dropdown(_ref) {
     };
   }, [visible, setEnabled]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['dropdown-menu', (_ref2 = {}, _defineProperty(_ref2, "dropdown-menu-".concat(align), align !== null), _defineProperty(_ref2, "show", visible), _defineProperty(_ref2, className, className !== null), _ref2)]),
+    className: classNames(['dropdown-menu', _defineProperty(_defineProperty(_defineProperty({}, "dropdown-menu-".concat(align), align !== null), "show", visible), className, className !== null)]),
     ref: refContainer
   }, children !== null ? children : items.map(function (it, index) {
-    var _ref3;
     var _it$type = it.type,
       type = _it$type === void 0 ? 'link' : _it$type,
       _it$className = it.className,
@@ -1289,12 +1282,12 @@ var Dropdown = function Dropdown(_ref) {
     return ItemComponent !== null ? /*#__PURE__*/React.createElement("div", {
       key: "item-".concat(index + 1, "-").concat(label, "-").concat(type)
     }, /*#__PURE__*/React.createElement(ItemComponent, Object.assign({
-      className: classNames([(_ref3 = {
+      className: classNames([_defineProperty(_defineProperty({
         'dropdown-item': type === 'link' || type === 'button',
         'dropdown-divider': type === 'divider',
         'dropdown-header': type === 'header',
         active: active
-      }, _defineProperty(_ref3, itemClassName, itemClassName !== null), _defineProperty(_ref3, customClassName, customClassName !== null), _ref3)]),
+      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null)]),
       onClick: finalOnClickItem
     }, itemProps), label !== null ? /*#__PURE__*/React.createElement(Label, null, label) : itemChildren)) : null;
   }));
@@ -1369,7 +1362,6 @@ var Menu = function Menu(_ref) {
   return /*#__PURE__*/React.createElement(ListComponent, {
     className: className
   }, children !== null ? children : items.map(function (it, index) {
-    var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6, _classNames7, _classNames8;
     var id = it.id,
       _it$className = it.className,
       customClassName = _it$className === void 0 ? null : _it$className,
@@ -1405,34 +1397,34 @@ var Menu = function Menu(_ref) {
       onClick: onClickItem,
       href: href,
       external: external,
-      className: classNames((_classNames = {
+      className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
         active: active
-      }, _defineProperty(_classNames, itemClassName, itemClassName !== null), _defineProperty(_classNames, customClassName, customClassName !== null), _defineProperty(_classNames, linkClassName, linkClassName !== null), _defineProperty(_classNames, customLinkClassName, customLinkClassName !== null), _classNames))
+      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null), linkClassName, linkClassName !== null), customLinkClassName, customLinkClassName !== null))
     }), label) : /*#__PURE__*/React.createElement(ItemComponent, {
       key: "item-".concat(id || index),
-      className: classNames((_classNames2 = {
+      className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
         dropdown: dropdown !== null,
         active: active
-      }, _defineProperty(_classNames2, itemClassName, itemClassName !== null), _defineProperty(_classNames2, customClassName, customClassName !== null), _defineProperty(_classNames2, hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), _defineProperty(_classNames2, hasDropdownClassName, subItems !== null && hasDropdownClassName !== null), _classNames2))
+      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null), hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), hasDropdownClassName, subItems !== null && hasDropdownClassName !== null))
     }, href !== null ? /*#__PURE__*/React.createElement(Link, Object.assign({}, itemProps, {
       onClick: onClickItem,
       href: href,
       external: external,
-      className: classNames((_classNames3 = {}, _defineProperty(_classNames3, linkClassName, linkClassName !== null), _defineProperty(_classNames3, 'dropdown-toggle', dropdown !== null), _defineProperty(_classNames3, customLinkClassName, customLinkClassName !== null), _classNames3))
+      className: classNames(_defineProperty(_defineProperty(_defineProperty({}, linkClassName, linkClassName !== null), 'dropdown-toggle', dropdown !== null), customLinkClassName, customLinkClassName !== null))
     }), label) : null, href === null && onClickItem !== null ? /*#__PURE__*/React.createElement(Button$1, Object.assign({}, itemProps, {
       onClick: onClickItem,
-      className: classNames((_classNames4 = {}, _defineProperty(_classNames4, linkClassName, linkClassName !== null), _defineProperty(_classNames4, 'dropdown-toggle', dropdown !== null), _defineProperty(_classNames4, customLinkClassName, customLinkClassName !== null), _classNames4))
+      className: classNames(_defineProperty(_defineProperty(_defineProperty({}, linkClassName, linkClassName !== null), 'dropdown-toggle', dropdown !== null), customLinkClassName, customLinkClassName !== null))
     }), label) : null, subItems !== null ? /*#__PURE__*/React.createElement(Menu, {
       items: subItems,
       className: subMenuClassName,
-      itemClassName: classNames((_classNames5 = {}, _defineProperty(_classNames5, subMenuItemClassName, subMenuItemClassName !== null), _defineProperty(_classNames5, itemClassName, subMenuItemClassName === null && itemClassName !== null), _classNames5)),
-      linkClassName: classNames((_classNames6 = {}, _defineProperty(_classNames6, subMenuLinkClassName, subMenuLinkClassName !== null), _defineProperty(_classNames6, linkClassName, subMenuLinkClassName === null && linkClassName !== null), _classNames6))
+      itemClassName: classNames(_defineProperty(_defineProperty({}, subMenuItemClassName, subMenuItemClassName !== null), itemClassName, subMenuItemClassName === null && itemClassName !== null)),
+      linkClassName: classNames(_defineProperty(_defineProperty({}, subMenuLinkClassName, subMenuLinkClassName !== null), linkClassName, subMenuLinkClassName === null && linkClassName !== null))
     }) : null, dropdown !== null ? /*#__PURE__*/React.createElement(Dropdown, {
       items: dropdown,
       visible: dropdownsVisible[index] || false,
       className: dropdownClassName,
-      itemClassName: classNames((_classNames7 = {}, _defineProperty(_classNames7, dropdownItemClassName, dropdownItemClassName !== null), _defineProperty(_classNames7, itemClassName, dropdownItemClassName === null && itemClassName !== null), _classNames7)),
-      linkClassName: classNames((_classNames8 = {}, _defineProperty(_classNames8, dropdownLinkClassName, dropdownLinkClassName !== null), _defineProperty(_classNames8, linkClassName, dropdownLinkClassName === null && linkClassName !== null), _classNames8)),
+      itemClassName: classNames(_defineProperty(_defineProperty({}, dropdownItemClassName, dropdownItemClassName !== null), itemClassName, dropdownItemClassName === null && itemClassName !== null)),
+      linkClassName: classNames(_defineProperty(_defineProperty({}, dropdownLinkClassName, dropdownLinkClassName !== null), linkClassName, dropdownLinkClassName === null && linkClassName !== null)),
       align: dropdownAlign,
       onClickItem: closeDropdown,
       onClickOutside: closeDropdown
@@ -1477,7 +1469,6 @@ var defaultProps$y = {
   collapseClassName: null
 };
 var Navbar = function Navbar(_ref) {
-  var _ref2, _ref6;
   var brand = _ref.brand,
     brandLink = _ref.brandLink,
     breadcrumbs = _ref.breadcrumbs,
@@ -1500,7 +1491,7 @@ var Navbar = function Navbar(_ref) {
     return setMenuVisible(!menuVisible);
   }, [setMenuVisible, menuVisible]);
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames(['navbar', (_ref2 = {}, _defineProperty(_ref2, "bg-".concat(theme), theme !== null), _defineProperty(_ref2, "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), _defineProperty(_ref2, "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), _defineProperty(_ref2, "navbar-expand-".concat(size), !withoutCollapse), _defineProperty(_ref2, 'navbar-expand', withoutCollapse), _defineProperty(_ref2, 'py-2', compact), _defineProperty(_ref2, 'px-2', compact), _defineProperty(_ref2, 'flex-nowrap', noWrap), _defineProperty(_ref2, className, className !== null), _ref2)])
+    className: classNames(['navbar', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "bg-".concat(theme), theme !== null), "navbar-".concat(theme === 'light' ? 'light' : 'dark'), theme !== null), "text-".concat(theme === 'light' ? 'dark' : 'light'), theme !== null), "navbar-expand-".concat(size), !withoutCollapse), 'navbar-expand', withoutCollapse), 'py-2', compact), 'px-2', compact), 'flex-nowrap', noWrap), className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['container-fluid', {
       'px-0': compact
@@ -1528,7 +1519,7 @@ var Navbar = function Navbar(_ref) {
   }, /*#__PURE__*/React.createElement("span", {
     className: "navbar-toggler-icon"
   })) : null, !withoutCollapse ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['navbar-collapse', 'collapse', styles$q.collapse, (_ref6 = {}, _defineProperty(_ref6, collapseClassName, collapseClassName !== null), _defineProperty(_ref6, "show", menuVisible), _ref6)])
+    className: classNames(['navbar-collapse', 'collapse', styles$q.collapse, _defineProperty(_defineProperty({}, collapseClassName, collapseClassName !== null), "show", menuVisible)])
   }, children) : children));
 };
 Navbar.propTypes = propTypes$y;
@@ -1554,8 +1545,12 @@ var messages = defineMessages({
 });
 var propTypes$x = {
   page: PropTypes$1.number,
+  lastPage: PropTypes$1.number,
+  maxPages: PropTypes$1.number,
   total: PropTypes$1.number,
   url: PropTypes$1.string,
+  query: PropTypes$1.object,
+  // eslint-disable-line react/forbid-prop-types
   withPreviousNext: PropTypes$1.bool,
   className: PropTypes$1.string,
   paginationClassName: PropTypes$1.string,
@@ -1565,8 +1560,11 @@ var propTypes$x = {
 };
 var defaultProps$x = {
   page: 1,
+  lastPage: 1,
+  maxPages: 10,
   total: 1,
   url: null,
+  query: null,
   withPreviousNext: false,
   className: null,
   paginationClassName: null,
@@ -1575,9 +1573,12 @@ var defaultProps$x = {
   onClickPage: null
 };
 var PaginationMenu = function PaginationMenu(_ref) {
-  var page = _ref.page,
-    total = _ref.total,
+  var parentPage = _ref.page,
+    parentLastPage = _ref.lastPage,
+    parentMaxPages = _ref.maxPages,
+    parentTotal = _ref.total,
     url = _ref.url,
+    query = _ref.query,
     withPreviousNext = _ref.withPreviousNext,
     className = _ref.className,
     paginationClassName = _ref.paginationClassName,
@@ -1585,11 +1586,38 @@ var PaginationMenu = function PaginationMenu(_ref) {
     linkClassName = _ref.linkClassName,
     onClickPage = _ref.onClickPage;
   var getUrl = useCallback(function (currentPage) {
-    return url !== null ? "".concat(url).concat(url.indexOf('?') !== -1 ? "&page=".concat(currentPage) : "?page=".concat(currentPage)) : null;
-  }, [url]);
-  var pages = _toConsumableArray(Array(total).keys()).map(function (it) {
-    return it + 1;
+    return url !== null ? "".concat(url, "?").concat(queryString.stringify(_objectSpread(_objectSpread({}, query), {}, {
+      page: currentPage
+    }), {
+      arrayFormat: 'bracket'
+    })) : null;
+  }, [url, query]);
+
+  // TODO: test this
+  // const pages = [...Array(total).keys()].map((it) => it + 1);
+
+  var page = parseInt(parentPage, 10);
+  var total = parseInt(parentTotal, 10);
+  var maxPages = parseInt(parentMaxPages, 10);
+  var lastPage = parseInt(parentLastPage, 10);
+  var pageNumbers = Array.from({
+    length: parseInt(lastPage, 10)
+  }, function (_, i) {
+    return i + 1;
   });
+  var stripPages = maxPages !== null && lastPage > maxPages;
+  var startPage = stripPages ? Math.min(Math.max(page - maxPages / 2, 1), lastPage - maxPages) : null;
+  var endPage = stripPages ? startPage + maxPages : null;
+  var strippedPages = stripPages ? pageNumbers.reduce(function (selectedPages, pageNumber) {
+    if (pageNumber === 1 && startPage - 1 > 1) {
+      return [pageNumber, '...'];
+    }
+    if (pageNumber === lastPage && endPage + 1 < lastPage) {
+      return [].concat(_toConsumableArray(selectedPages), ['...', pageNumber]);
+    }
+    return pageNumber >= startPage && pageNumber <= endPage ? [].concat(_toConsumableArray(selectedPages), [pageNumber]) : selectedPages;
+  }, []) : pageNumbers;
+  var pages = strippedPages.length > 0 ? strippedPages : [1];
   return /*#__PURE__*/React.createElement("nav", {
     className: classNames([styles$p.container, _defineProperty({}, className, className !== null)])
   }, /*#__PURE__*/React.createElement("ul", {
@@ -1888,6 +1916,7 @@ ModalDialog.propTypes = propTypes$r;
 ModalDialog.defaultProps = defaultProps$r;
 
 // 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;
@@ -2079,7 +2108,6 @@ var defaultProps$m = {
   buttonClassName: null
 };
 var CollapsablePanel = function CollapsablePanel(_ref) {
-  var _ref2;
   var title = _ref.title,
     children = _ref.children,
     className = _ref.className,
@@ -2095,7 +2123,7 @@ var CollapsablePanel = function CollapsablePanel(_ref) {
     return setOpened(!opened);
   }, [opened, setOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.container, (_ref2 = {}, _defineProperty(_ref2, styles$i.isOpened, opened), _defineProperty(_ref2, openedClassName, opened && openedClassName !== null), _defineProperty(_ref2, className, className !== null), _ref2)])
+    className: classNames([styles$i.container, _defineProperty(_defineProperty(_defineProperty({}, styles$i.isOpened, opened), openedClassName, opened && openedClassName !== null), className, className !== null)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$i.top, _defineProperty({}, topClassName, topClassName !== null)])
   }, /*#__PURE__*/React.createElement(Button$1, {
@@ -2296,7 +2324,6 @@ var defaultProps$i = {
   withInvertedColors: true
 };
 var PlaceholderBlock = function PlaceholderBlock(_ref) {
-  var _ref2;
   var width = _ref.width,
     height = _ref.height,
     outline = _ref.outline,
@@ -2305,7 +2332,7 @@ var PlaceholderBlock = function PlaceholderBlock(_ref) {
     withInvertedColors = _ref.withInvertedColors,
     children = _ref.children;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$h.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$h.outline, outline), _defineProperty(_ref2, styles$h.withInvertedColors, withInvertedColors), _ref2)])
+    className: classNames([styles$h.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$h.outline, outline), styles$h.withInvertedColors, withInvertedColors)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$h.box, _defineProperty({}, boxClassName, boxClassName !== null)]),
     style: {
@@ -2379,13 +2406,12 @@ var defaultProps$g = {
   className: null
 };
 var Empty = function Empty(_ref) {
-  var _ref2;
   var children = _ref.children,
     withoutBorder = _ref.withoutBorder,
     light = _ref.light,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$g.container, (_ref2 = {}, _defineProperty(_ref2, styles$g.withoutBorder, withoutBorder), _defineProperty(_ref2, styles$g.light, light), _defineProperty(_ref2, className, className), _ref2)])
+    className: classNames([styles$g.container, _defineProperty(_defineProperty(_defineProperty({}, styles$g.withoutBorder, withoutBorder), styles$g.light, light), className, className)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$g.middle
   }, /*#__PURE__*/React.createElement(Label, null, children)));
@@ -3297,10 +3323,9 @@ var Slideshow = function Slideshow(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$e.items
   }, items.map(function (it, i) {
-    var _ref3;
     return /*#__PURE__*/React.createElement("div", {
       key: "slide-".concat(i + 1),
-      className: classNames([styles$e.item, (_ref3 = {}, _defineProperty(_ref3, styles$e.prev, i < index), _defineProperty(_ref3, styles$e.current, i === index), _defineProperty(_ref3, styles$e.next, i > index), _ref3)])
+      className: classNames([styles$e.item, _defineProperty(_defineProperty(_defineProperty({}, styles$e.prev, i < index), styles$e.current, i === index), styles$e.next, i > index)])
     }, it);
   })), children);
 };
@@ -3377,7 +3402,6 @@ var defaultProps$b = {
   withInvertedColors: true
 };
 var PlaceholderText = function PlaceholderText(_ref) {
-  var _ref2;
   var lines = _ref.lines,
     lineMargin = _ref.lineMargin,
     width = _ref.width,
@@ -3388,7 +3412,7 @@ var PlaceholderText = function PlaceholderText(_ref) {
   var lineHeight = height !== null && isNumber(height) ? "".concat(Math.round(height * fontSize), "px") : height;
   var oddWidth = isNumber(width) ? width * 0.9 : '80%';
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$c.container, (_ref2 = {}, _defineProperty(_ref2, className, className), _defineProperty(_ref2, styles$c.withInvertedColors, withInvertedColors), _ref2)])
+    className: classNames([styles$c.container, _defineProperty(_defineProperty({}, className, className), styles$c.withInvertedColors, withInvertedColors)])
   }, _toConsumableArray(Array(lines)).map(function (e, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: "line-".concat(index),
@@ -3916,7 +3940,6 @@ var InputText = function InputText(_ref) {
 var styles$4 = {"container":"micromag-core-placeholders-quiz-answer-container","block":"micromag-core-placeholders-quiz-answer-block","answer":"micromag-core-placeholders-quiz-answer-answer","answerIcon":"micromag-core-placeholders-quiz-answer-answerIcon","good":"micromag-core-placeholders-quiz-answer-good"};
 
 var Answer$1 = function Answer(_ref) {
-  var _ref2;
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '75%' : _ref$width,
     _ref$height = _ref.height,
@@ -3925,7 +3948,7 @@ var Answer$1 = function Answer(_ref) {
     _ref$good = _ref.good,
     good = _ref$good === void 0 ? true : _ref$good;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$4.good, good), _ref2)])
+    className: classNames([styles$4.container, _defineProperty(_defineProperty({}, className, className !== null), styles$4.good, good)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$4.answer
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -4142,7 +4165,6 @@ var defaultProps$4 = {
   onComplete: null
 };
 function Transition(_ref) {
-  var _ref2;
   var fullscreen = _ref.fullscreen,
     from = _ref.from,
     to = _ref.to,
@@ -4190,7 +4212,7 @@ function Transition(_ref) {
   }, [playing, direction, delay, duration, reversible, easing, config$1, from, to, setSpringProps, onStart, onComplete]);
   return /*#__PURE__*/React.createElement(animated.div, {
     style: _objectSpread({}, springProps),
-    className: classNames([styles.container, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles.fullscreen, fullscreen), _ref2)])
+    className: classNames([styles.container, _defineProperty(_defineProperty({}, className, className !== null), styles.fullscreen, fullscreen)])
   }, children);
 }
 Transition.propTypes = propTypes$4;

package/es/hooks.js

@@ -309,12 +309,11 @@ var useFormTransition = function useFormTransition() {
     return null;
   }, [paths]);
   var name = useMemo(function () {
-    var _classNames, _classNames2, _classNames3;
     return {
-      enter: classNames((_classNames = {}, _defineProperty(_classNames, styles.enterRight, direction === 'right'), _defineProperty(_classNames, styles.enterLeft, direction === 'left'), _defineProperty(_classNames, styles.enterTop, direction === 'top'), _defineProperty(_classNames, styles.enterBottom, direction === 'bottom'), _classNames)) || 'none',
-      enterActive: classNames((_classNames2 = {}, _defineProperty(_classNames2, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), _defineProperty(_classNames2, styles.enterActiveVertical, direction === 'top' || direction === 'bottom'), _classNames2)) || 'none',
+      enter: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.enterRight, direction === 'right'), styles.enterLeft, direction === 'left'), styles.enterTop, direction === 'top'), styles.enterBottom, direction === 'bottom')) || 'none',
+      enterActive: classNames(_defineProperty(_defineProperty({}, styles.enterActiveHorizontal, direction === 'left' || direction === 'right'), styles.enterActiveVertical, direction === 'top' || direction === 'bottom')) || 'none',
       leave: styles.leave || 'none',
-      leaveActive: classNames((_classNames3 = {}, _defineProperty(_classNames3, styles.leaveActiveRight, direction === 'right'), _defineProperty(_classNames3, styles.leaveActiveLeft, direction === 'left'), _defineProperty(_classNames3, styles.leaveActiveTop, direction === 'top'), _defineProperty(_classNames3, styles.leaveActiveBottom, direction === 'bottom'), _classNames3)) || 'none'
+      leaveActive: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.leaveActiveRight, direction === 'right'), styles.leaveActiveLeft, direction === 'left'), styles.leaveActiveTop, direction === 'top'), styles.leaveActiveBottom, direction === 'bottom')) || 'none'
     };
   }, [direction]);
   return {
@@ -1268,6 +1267,8 @@ function useMediaDuration(element) {
   }
   useEffect(function () {
     if (element === null) {
+      realDuration.current = 0;
+      setDuration(0);
       return function () {};
     }
     function updateDuration() {
@@ -1328,9 +1329,9 @@ function useMediaProgress(media) {
     progress = _useState4[0],
     setProgress = _useState4[1];
   var realProgressRef = useRef(progress);
-  var updateTimeRef = useRef(new Date().getTime());
+  var updateTimeRef = useRef(Date.now() / 1000);
   var updateProgress = useCallback(function (newProgress) {
-    updateTimeRef.current = new Date().getTime();
+    updateTimeRef.current = Date.now() / 1000;
     realProgressRef.current = newProgress;
     setProgress(newProgress);
   }, [setProgress]);
@@ -1398,10 +1399,10 @@ function useMediaProgress(media) {
       if (canceled) {
         return;
       }
-      var newTime = new Date().getTime();
+      var newTime = Date.now() / 1000;
       var elapsed = newTime - updateTimeRef.current;
       updateTimeRef.current = newTime;
-      var step = elapsed / (duration * 1000);
+      var step = elapsed / duration;
       var newProgress = realProgressRef.current + step;
       updateProgress(newProgress);
       handle = raf(tick);