@micromag/core 0.4.38 → 0.4.40

package/es/components.js

@@ -1,9 +1,9 @@
 import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { Link as Link$1 } from 'wouter';
 import { FormattedMessage, defineMessages, FormattedDate, FormattedTime } from 'react-intl';
 import { isMessage, getFieldFromPath, getComponentFromName, setFieldValue, validateFields, getDisplayName, pascalCase, convertStyleToString } from '@micromag/core/utils';
@@ -60,7 +60,7 @@ var styles$y = {"container":"micromag-core-buttons-button-container","icon":"mic
 
 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"];
 function Button$1(_ref) {
-  var _ref8;
+  var _ref3;
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     _ref$theme = _ref.theme,
@@ -127,20 +127,20 @@ function Button$1(_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$y.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$y.icon, iconClassName])
   }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$y.label, labelClassName])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames([styles$y.left, iconPosition === 'left' ? iconClassName : null])
   }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.center, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$y.center, labelClassName])
   }, text), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$y.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames([styles$y.right, iconPosition === 'right' ? iconClassName : null])
   }, 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$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))]);
+  }, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), "btn-".concat(size), withStyle && size !== null), "active", !withoutStyle && active) : null, styles$y.container, (_ref3 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref3, 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(_ref3, styles$y.isLoading, loading)), className]);
   if (href !== null) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
@@ -190,7 +190,7 @@ function Buttons(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$x.container, _defineProperty({}, className, className !== null)]),
+    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$x.container, className]),
     role: "group"
   }, buttons.map(function (button, index) {
     var id = button.id;
@@ -203,7 +203,7 @@ function Buttons(_ref) {
       buttonTheme = _button$theme === void 0 ? null : _button$theme,
       buttonProps = _objectWithoutProperties(button, _excluded$b);
     var fixedProps = {
-      className: classNames([styles$x.button, _defineProperty(_defineProperty({}, buttonClassName, buttonClassName !== null), customClassName, customClassName !== null)]),
+      className: classNames([styles$x.button, customClassName, buttonClassName, {}]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -229,7 +229,7 @@ function BackButton(_ref) {
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$a);
   return /*#__PURE__*/React.createElement(Button$1, Object.assign({
-    className: classNames(['px-2', _defineProperty({}, className, className)]),
+    className: classNames(['px-2', className]),
     size: "sm",
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: faAngleLeft,
@@ -248,7 +248,7 @@ function ClearButton(_ref) {
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$9);
   return /*#__PURE__*/React.createElement("button", Object.assign({
-    className: classNames([styles$w.container, _defineProperty({}, className, className)]),
+    className: classNames([styles$w.container, className]),
     onClick: onClick
   }, props), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     className: styles$w.icon,
@@ -483,7 +483,9 @@ function Form(_ref) {
 
   return /*#__PURE__*/React.createElement("form", {
     action: action,
-    className: classNames([styles$v.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$v.container, className, {
+      // 'was-validated': status !== null,
+    }]),
     method: method,
     onSubmit: onSubmit
   }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
@@ -510,11 +512,11 @@ function Form(_ref) {
     onChange: setValue,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
-    className: classNames([styles$v.fields, _defineProperty({}, fieldsClassName, fieldsClassName !== null)])
+    className: classNames([styles$v.fields, fieldsClassName])
   }) : 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, _defineProperty(_defineProperty({}, styles$v[actionsAlign], actionsAlign), actionsClassName, actionsClassName !== null)])
+    className: classNames([styles$v.actions, actionsClassName, _defineProperty({}, styles$v[actionsAlign], actionsAlign)])
   }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React.createElement(Button$1, {
     type: "button",
     onClick: onCancel,
@@ -522,7 +524,7 @@ function Form(_ref) {
     theme: cancelButtonTheme || 'secondary',
     outline: true,
     disabled: status === 'loading',
-    className: classNames(['me-2', _defineProperty({}, cancelClassName, cancelClassName !== null)])
+    className: classNames(['me-2', cancelClassName])
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "PyxZY2",
     defaultMessage: [{
@@ -634,44 +636,46 @@ function Card(_ref) {
       linkProps = _objectWithoutProperties(_ref2, _excluded$6);
     return /*#__PURE__*/React.createElement(Link, Object.assign({
       key: "link-".concat(label, "-").concat(index),
-      className: classNames(['card-link', _defineProperty({}, linkClassName, linkClassName !== null)])
+      className: classNames(['card-link', linkClassName])
     }, linkProps), label);
   });
   var bodyInner = title !== null || subtitle !== null || children !== null || links !== null && linksInSameBody ? /*#__PURE__*/React.createElement(React.Fragment, null, title !== null ? /*#__PURE__*/React.createElement("h5", {
-    className: classNames(['card-title', _defineProperty({}, titleClassName, titleClassName !== null)])
+    className: classNames(['card-title', titleClassName])
   }, /*#__PURE__*/React.createElement(Label, null, title)) : null, subtitle !== null ? /*#__PURE__*/React.createElement("h6", {
-    className: classNames(['card-subtitle', _defineProperty({}, subtitleClassName, subtitleClassName !== null)])
+    className: classNames(['card-subtitle', subtitleClassName])
   }, /*#__PURE__*/React.createElement(Label, null, subtitle)) : null, children, links !== null && linksInSameBody ? /*#__PURE__*/React.createElement("div", {
     className: "d-flex"
   }, linksElements) : null) : null;
   var cardInner = /*#__PURE__*/React.createElement(React.Fragment, null, header !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card-header', _defineProperty({}, headerClassName, headerClassName !== null)])
+    className: classNames(['card-header', headerClassName])
   }, /*#__PURE__*/React.createElement(Label, null, header)) : null, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
     src: image,
     alt: imageAlt,
-    className: classNames(['card-img-top', _defineProperty({}, imageClassName, imageClassName !== null)])
+    className: classNames(['card-img-top', imageClassName])
   }) : image, beforeBody, bodyInner !== null ? onClickBody !== null ? /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames(_defineProperty({
+    className: classNames([bodyClassName, {
       'card-body': !imageOverlay,
       'card-img-overlay': imageOverlay
-    }, bodyClassName, bodyClassName !== null)),
+    }]),
     onClick: onClickBody
   }, bodyInner) : /*#__PURE__*/React.createElement("div", {
-    className: classNames(_defineProperty({
+    className: classNames([bodyClassName, {
       'card-body': !imageOverlay,
       'card-img-overlay': imageOverlay
-    }, bodyClassName, bodyClassName !== null))
+    }])
   }, bodyInner) : null, afterBody, links !== null && linksElements !== null && !linksInSameBody ? /*#__PURE__*/React.createElement("div", {
     className: "card-body"
   }, linksElements) : null, footer !== null ? onClickFooter !== null ? /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: classNames(['card-footer', _defineProperty({}, footerClassName, footerClassName !== null)]),
+    className: classNames(['card-footer', footerClassName]),
     onClick: onClickFooter
   }, /*#__PURE__*/React.createElement(Label, null, footer)) : /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card-footer', _defineProperty({}, footerClassName, footerClassName !== null)])
+    className: classNames(['card-footer', footerClassName])
   }, /*#__PURE__*/React.createElement(Label, null, footer)) : null);
-  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)]);
+  var cardClassName = classNames(['card', _defineProperty(_defineProperty(_defineProperty(_defineProperty({
+    className: className
+  }, "bg-".concat(theme), !imageOverlay && theme !== 'dark'), 'bg-dark', imageOverlay || theme === 'dark'), 'text-dark', theme === 'light'), 'text-light', imageOverlay || theme === 'dark' || theme === 'primary')]);
   if (href !== null) {
     return /*#__PURE__*/React.createElement(Link, {
       href: href,
@@ -702,7 +706,7 @@ function Spinner(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
   return /*#__PURE__*/React.createElement("svg", {
-    className: classNames([styles$t.container, _defineProperty(_defineProperty({}, styles$t.animated, animated), className, className !== null)]),
+    className: classNames([styles$t.container, className, _defineProperty({}, styles$t.animated, animated)]),
     width: "40",
     height: "40",
     viewBox: "0 0 40 40",
@@ -732,7 +736,7 @@ function FormPanel(_ref) {
     className = _ref$className === void 0 ? null : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded$5);
   return /*#__PURE__*/React.createElement(Card, Object.assign({
-    className: classNames([styles$s.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$s.container, className])
   }, props), description, loading ? /*#__PURE__*/React.createElement(Spinner, null) : children);
 }
 
@@ -1007,7 +1011,9 @@ function Dropdown(_ref) {
     };
   }, [visible, setEnabled]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['dropdown-menu', _defineProperty(_defineProperty(_defineProperty({}, "dropdown-menu-".concat(align), align !== null), "show", visible), className, className !== null)]),
+    className: classNames(['dropdown-menu', _defineProperty(_defineProperty({
+      className: className
+    }, "dropdown-menu-".concat(align), align !== null), "show", visible)]),
     ref: refContainer
   }, children !== null ? children : items.map(function (it, index) {
     var _it$type = it.type,
@@ -1044,12 +1050,12 @@ 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([_defineProperty(_defineProperty({
+      className: classNames([customClassName, itemClassName, {
         'dropdown-item': type === 'link' || type === 'button',
         'dropdown-divider': type === 'divider',
         'dropdown-header': type === 'header',
         active: active
-      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null)]),
+      }]),
       onClick: finalOnClickItem
     }, itemProps), label !== null ? /*#__PURE__*/React.createElement(Label, null, label) : itemChildren)) : null;
   }));
@@ -1137,34 +1143,38 @@ function Menu(_ref) {
       onClick: onClickItem,
       href: href,
       external: external,
-      className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+      className: classNames([itemClassName, customClassName, linkClassName, customLinkClassName, {
         active: active
-      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null), linkClassName, linkClassName !== null), customLinkClassName, customLinkClassName !== null))
+      }])
     }), label) : /*#__PURE__*/React.createElement(ItemComponent, {
       key: "item-".concat(id || index),
-      className: classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+      className: classNames([itemClassName, customClassName, _defineProperty(_defineProperty({
         dropdown: dropdown !== null,
         active: active
-      }, itemClassName, itemClassName !== null), customClassName, customClassName !== null), hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), hasDropdownClassName, subItems !== null && hasDropdownClassName !== 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(_defineProperty(_defineProperty(_defineProperty({}, linkClassName, linkClassName !== null), 'dropdown-toggle', dropdown !== null), customLinkClassName, customLinkClassName !== null))
+      className: classNames([linkClassName, customLinkClassName, {
+        'dropdown-toggle': dropdown !== null
+      }])
     }), label) : null, href === null && onClickItem !== null ? /*#__PURE__*/React.createElement(Button$1, Object.assign({}, itemProps, {
       onClick: onClickItem,
-      className: classNames(_defineProperty(_defineProperty(_defineProperty({}, linkClassName, linkClassName !== null), 'dropdown-toggle', dropdown !== null), customLinkClassName, customLinkClassName !== null))
+      className: classNames([linkClassName, customLinkClassName, {
+        'dropdown-toggle': dropdown !== null
+      }])
     }), label) : null, subItems !== null ? /*#__PURE__*/React.createElement(Menu, {
       items: subItems,
       className: subMenuClassName,
-      itemClassName: classNames(_defineProperty(_defineProperty({}, subMenuItemClassName, subMenuItemClassName !== null), itemClassName, subMenuItemClassName === null && itemClassName !== null)),
-      linkClassName: classNames(_defineProperty(_defineProperty({}, subMenuLinkClassName, subMenuLinkClassName !== null), linkClassName, subMenuLinkClassName === null && linkClassName !== null))
+      itemClassName: classNames([subMenuItemClassName, _defineProperty({}, itemClassName, subMenuItemClassName === null && itemClassName !== null)]),
+      linkClassName: classNames([subMenuLinkClassName, _defineProperty({}, linkClassName, subMenuLinkClassName === null && linkClassName !== null)])
     }) : null, dropdown !== null ? /*#__PURE__*/React.createElement(Dropdown, {
       items: dropdown,
       visible: dropdownsVisible[index] || false,
       className: dropdownClassName,
-      itemClassName: classNames(_defineProperty(_defineProperty({}, dropdownItemClassName, dropdownItemClassName !== null), itemClassName, dropdownItemClassName === null && itemClassName !== null)),
-      linkClassName: classNames(_defineProperty(_defineProperty({}, dropdownLinkClassName, dropdownLinkClassName !== null), linkClassName, dropdownLinkClassName === null && linkClassName !== null)),
+      itemClassName: classNames([dropdownItemClassName, _defineProperty({}, itemClassName, dropdownItemClassName === null && itemClassName !== null)]),
+      linkClassName: classNames([dropdownLinkClassName, _defineProperty({}, linkClassName, dropdownLinkClassName === null && linkClassName !== null)]),
       align: dropdownAlign,
       onClickItem: closeDropdown,
       onClickOutside: closeDropdown
@@ -1211,24 +1221,24 @@ function Navbar(_ref) {
     return setMenuVisible(!menuVisible);
   }, [setMenuVisible, menuVisible]);
   return /*#__PURE__*/React.createElement("nav", {
-    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)])
+    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), "className", className), "navbar-expand-".concat(size), !withoutCollapse), 'navbar-expand', withoutCollapse), 'py-2', compact), 'px-2', compact), 'flex-nowrap', noWrap)])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames(['container-fluid', {
       'px-0': compact
     }])
   }, brand !== null && brandLink !== null ? /*#__PURE__*/React.createElement(Link, {
-    className: classNames(['navbar-brand', _defineProperty({
+    className: classNames(['navbar-brand', brandClassName, {
       'py-0': compact
-    }, brandClassName, brandClassName !== null)]),
+    }]),
     href: brandLink
   }, brand) : null, brand !== null && brandLink === null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames(['navbar-brand', _defineProperty({
+    className: classNames(['navbar-brand', brandClassName, {
       'py-0': compact
-    }, brandClassName, brandClassName !== null)])
+    }])
   }, brand) : null, breadcrumbs !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames(['navbar-breadcrumbs', _defineProperty({
+    className: classNames(['navbar-breadcrumbs', breadCrumbsClassName, {
       'py-0': compact
-    }, breadCrumbsClassName, breadCrumbsClassName !== null)])
+    }])
   }, breadcrumbs) : null, !withoutCollapse && !withoutCollapseToggle ? /*#__PURE__*/React.createElement(Button$1, {
     className: "navbar-toggler",
     onClick: onClickMenu,
@@ -1239,7 +1249,9 @@ 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, _defineProperty(_defineProperty({}, collapseClassName, collapseClassName !== null), "show", menuVisible)])
+    className: classNames(['navbar-collapse', 'collapse', styles$q.collapse, collapseClassName, {
+      show: menuVisible
+    }])
   }, children) : children));
 }
 
@@ -1320,51 +1332,52 @@ function PaginationMenu(_ref) {
   }, []) : pageNumbers;
   var pages = strippedPages.length > 0 ? strippedPages : [1];
   return /*#__PURE__*/React.createElement("nav", {
-    className: classNames([styles$p.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$p.container, className])
   }, /*#__PURE__*/React.createElement("ul", {
-    className: classNames(['pagination', _defineProperty({}, paginationClassName, paginationClassName !== null)])
+    className: classNames(['pagination', paginationClassName])
   }, withPreviousNext ? /*#__PURE__*/React.createElement("li", {
-    className: classNames(['page-item', _defineProperty({
+    className: classNames(['page-item', itemClassName, {
       disabled: page <= 1
-    }, itemClassName, itemClassName !== null)])
+    }])
   }, page > 1 ? /*#__PURE__*/React.createElement(Link, {
-    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
+    className: classNames(['page-link', linkClassName]),
     href: getUrl(page - 1),
     onClick: onClickPage !== null ? function () {
       return onClickPage(page - 1);
     } : null
   }, messages.previous) : /*#__PURE__*/React.createElement("span", {
-    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)])
+    className: classNames(['page-link', linkClassName])
   }, /*#__PURE__*/React.createElement(Label, null, messages.previous))) : null, pages.map(function (pageNumber) {
     return /*#__PURE__*/React.createElement("li", {
       key: "page-".concat(pageNumber),
-      className: classNames(['page-item', _defineProperty({
+      className: classNames(['page-item', itemClassName, {
         active: pageNumber === page
-      }, itemClassName, itemClassName !== null)])
+      }])
     }, /*#__PURE__*/React.createElement(Link, {
-      className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
+      className: classNames(['page-link', linkClassName]),
       href: getUrl(pageNumber),
       onClick: onClickPage !== null ? function () {
         return onClickPage(pageNumber);
       } : null
     }, pageNumber));
   }), withPreviousNext ? /*#__PURE__*/React.createElement("li", {
-    className: classNames(['page-item', _defineProperty({
+    className: classNames(['page-item', itemClassName, {
       disabled: page >= total
-    }, itemClassName, itemClassName !== null)])
+    }])
   }, page < total ? /*#__PURE__*/React.createElement(Link, {
-    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)]),
+    className: classNames(['page-link', linkClassName]),
     href: getUrl(page + 1),
     onClick: onClickPage !== null ? function () {
       return onClickPage(page + 1);
     } : null
   }, messages.next) : /*#__PURE__*/React.createElement("span", {
-    className: classNames(['page-link', _defineProperty({}, linkClassName, linkClassName !== null)])
+    className: classNames(['page-link', linkClassName])
   }, /*#__PURE__*/React.createElement(Label, null, messages.next))) : null));
 }
 
 var styles$o = {"container":"micromag-core-menus-tabs-container"};
 
+/* eslint-disable react/no-array-index-key, react/jsx-props-no-spreading */
 var emptyArray$4 = [];
 function TabsMenu(_ref) {
   var _ref$items = _ref.items,
@@ -1382,7 +1395,7 @@ function TabsMenu(_ref) {
     _ref$onClickItem = _ref.onClickItem,
     onClickItem = _ref$onClickItem === void 0 ? null : _ref$onClickItem;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$o.container, _defineProperty({}, className, className)])
+    className: classNames([styles$o.container, className])
   }, /*#__PURE__*/React.createElement(Buttons, {
     buttons: items,
     size: size,
@@ -1390,7 +1403,7 @@ function TabsMenu(_ref) {
     renderButton: renderItemButton,
     onClickButton: onClickItem,
     className: styles$o.buttons,
-    buttonClassName: classNames([styles$o.button, _defineProperty({}, buttonClassName, buttonClassName !== null)])
+    buttonClassName: classNames([styles$o.button, buttonClassName])
   }));
 }
 
@@ -1406,7 +1419,7 @@ function ModalsContainer(_ref) {
     setModalsContainer(containerRef.current);
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$n.container, _defineProperty({}, className, className)])
+    className: classNames([styles$n.container, className])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$n.modals, _defineProperty({}, styles$n.hasModals, modals.length > 0)]),
     ref: containerRef
@@ -1518,7 +1531,7 @@ function ModalDialog(_ref) {
     _ref$bodyClassName = _ref.bodyClassName,
     bodyClassName = _ref$bodyClassName === void 0 ? null : _ref$bodyClassName;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$l.container, 'modal-dialog', _defineProperty(_defineProperty({}, "modal-".concat(size), size !== null), className, className)]),
+    className: classNames([styles$l.container, 'modal-dialog', className, _defineProperty({}, "modal-".concat(size), size !== null)]),
     role: "dialog"
   }, /*#__PURE__*/React.createElement("div", {
     className: "modal-content"
@@ -1532,7 +1545,7 @@ function ModalDialog(_ref) {
     "aria-label": "Close",
     onClick: onClose
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames(['modal-body', 'p-2', _defineProperty({}, bodyClassName, bodyClassName !== null)])
+    className: classNames(['modal-body', 'p-2', bodyClassName])
   }, children), footer !== null || buttons !== null ? /*#__PURE__*/React.createElement("div", {
     className: classNames(['modal-footer', 'p-2', styles$l.footer])
   }, footer, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
@@ -1556,7 +1569,7 @@ function PanelsContainer(_ref) {
     setPanelsContainer(containerRef.current);
   }, []);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$k.container, _defineProperty({}, className, className)])
+    className: classNames([styles$k.container, className])
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$k.panels, _defineProperty({}, styles$k.hasPanels, panels.length > 0)]),
     ref: containerRef
@@ -1643,12 +1656,12 @@ function CollapsablePanel(_ref) {
     return setOpened(!opened);
   }, [opened, setOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.container, _defineProperty(_defineProperty(_defineProperty({}, styles$i.isOpened, opened), openedClassName, opened && openedClassName !== null), className, className !== null)])
+    className: classNames([styles$i.container, className, _defineProperty(_defineProperty({}, styles$i.isOpened, opened), openedClassName, opened && openedClassName !== null)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.top, _defineProperty({}, topClassName, topClassName !== null)])
+    className: classNames([styles$i.top, topClassName])
   }, /*#__PURE__*/React.createElement(Button$1, {
     withoutStyle: true,
-    className: classNames([styles$i.button, _defineProperty({}, buttonClassName, buttonClassName !== null)]),
+    className: classNames([styles$i.button, buttonClassName]),
     icon: /*#__PURE__*/React.createElement(FontAwesomeIcon, {
       icon: opened ? faAngleUp : faAngleDown,
       className: styles$i.icon
@@ -1657,7 +1670,7 @@ function CollapsablePanel(_ref) {
     labelClassName: styles$i.label,
     onClick: onClick
   }, title)), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$i.content, _defineProperty({}, contentClassName, contentClassName !== null)])
+    className: classNames([styles$i.content, contentClassName])
   }, children));
 }
 
@@ -1806,9 +1819,9 @@ function PlaceholderBlock(_ref) {
     _ref$children = _ref.children,
     children = _ref$children === void 0 ? null : _ref$children;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$h.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles$h.outline, outline), styles$h.withInvertedColors, withInvertedColors)])
+    className: classNames([styles$h.container, className, _defineProperty(_defineProperty({}, styles$h.outline, outline), styles$h.withInvertedColors, withInvertedColors)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$h.box, _defineProperty({}, boxClassName, boxClassName !== null)]),
+    className: classNames([styles$h.box, boxClassName]),
     style: {
       width: width,
       height: height
@@ -1858,7 +1871,7 @@ function Empty(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$g.container, _defineProperty(_defineProperty(_defineProperty({}, styles$g.withoutBorder, withoutBorder), styles$g.light, light), className, className)])
+    className: classNames([styles$g.container, className, _defineProperty(_defineProperty({}, styles$g.withoutBorder, withoutBorder), styles$g.light, light)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$g.middle
   }, /*#__PURE__*/React.createElement(Label, null, children)));
@@ -1974,6 +1987,7 @@ function FontFaces(_ref4) {
 
 var styles$f = {"container":"micromag-core-partials-media-container"};
 
+/* eslint-disable react/jsx-props-no-spreading */
 function Media(_ref) {
   var _ref$thumbnail = _ref.thumbnail,
     thumbnail = _ref$thumbnail === void 0 ? null : _ref$thumbnail,
@@ -1992,19 +2006,19 @@ function Media(_ref) {
     _ref$titleClassName = _ref.titleClassName,
     titleClassName = _ref$titleClassName === void 0 ? null : _ref$titleClassName;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card', styles$f.container, _defineProperty({}, className, className !== null)])
+    className: classNames(['card', styles$f.container, className])
   }, typeof thumbnail === 'string' ? /*#__PURE__*/React.createElement("img", {
     src: thumbnail,
     alt: title,
-    className: classNames(['me-3', styles$f.thumbnail, _defineProperty({
+    className: classNames(['me-3', styles$f.thumbnail, thumbnailClassName, {
       'align-self-start': thumbnailAlign === 'top',
       'align-self-center': thumbnailAlign === 'center',
       'align-self-end': thumbnailAlign === 'bottom'
-    }, thumbnailClassName, thumbnailClassName !== null)])
+    }])
   }) : thumbnail, title !== null || children !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['card-body', styles$f.body, _defineProperty({}, bodyClassName, bodyClassName !== null)])
+    className: classNames(['card-body', styles$f.body, bodyClassName])
   }, title !== null ? /*#__PURE__*/React.createElement("h5", {
-    className: classNames(['mt-0', 'text-truncate', styles$f.title, _defineProperty({}, titleClassName, titleClassName !== null)])
+    className: classNames(['mt-0', 'text-truncate', styles$f.title, titleClassName])
   }, /*#__PURE__*/React.createElement(Label, null, title)) : null, children) : null);
 }
 
@@ -2171,7 +2185,7 @@ function Slideshow(_ref) {
     height: height
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$e.container, _defineProperty({}, className, className)]),
+    className: classNames([styles$e.container, className]),
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$e.items
@@ -2252,7 +2266,7 @@ 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, _defineProperty(_defineProperty({}, className, className), styles$c.withInvertedColors, withInvertedColors)])
+    className: classNames([styles$c.container, className, _defineProperty({}, styles$c.withInvertedColors, withInvertedColors)])
   }, _toConsumableArray(Array(lines)).map(function (e, index) {
     return /*#__PURE__*/React.createElement("div", {
       key: "line-".concat(index),
@@ -2430,6 +2444,7 @@ function Video(_ref) {
 
 var styles$a = {"container":"micromag-core-placeholders-video-360-container","box":"micromag-core-placeholders-video-360-box","icon":"micromag-core-placeholders-video-360-icon","label":"micromag-core-placeholders-video-360-label"};
 
+/* eslint-disable react/prop-types */
 function Video360(_ref) {
   var width = _ref.width,
     height = _ref.height,
@@ -2437,7 +2452,7 @@ function Video360(_ref) {
   return /*#__PURE__*/React.createElement(PlaceholderBlock, {
     width: width,
     height: height,
-    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$a.container, className]),
     boxClassName: styles$a.box
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faVideo,
@@ -2467,6 +2482,7 @@ function VideoLoop(_ref) {
 
 var styles$9 = {"container":"micromag-core-screens-screen-sizer-container","frame":"micromag-core-screens-screen-sizer-frame","screen":"micromag-core-screens-screen-sizer-screen"};
 
+/* eslint-disable react/jsx-props-no-spreading */
 function ScreenSizer(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? null : _ref$width,
@@ -2542,7 +2558,7 @@ function ScreenSizer(_ref) {
   }, [screenWidth, screenHeight, frameScale]);
   var hasFrameSize = frameWidth !== null && frameHeight !== null;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$9.container, className]),
     ref: !hasSize ? refContainer : null
   }, hasFrameSize ? /*#__PURE__*/React.createElement("div", {
     className: styles$9.frame,
@@ -2567,6 +2583,7 @@ function ScreenSizer(_ref) {
 
 var styles$8 = {"container":"micromag-core-screens-screen-container"};
 
+/* eslint-disable react/jsx-props-no-spreading */
 function Screen(_ref) {
   var screen = _ref.screen,
     _ref$renderContext = _ref.renderContext,
@@ -2600,7 +2617,7 @@ function Screen(_ref) {
     renderContext: renderContext,
     screenState: screenState
   }, ScreenComponent !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$8.container, className])
   }, /*#__PURE__*/React.createElement(ScreenComponent, Object.assign({}, screen, {
     index: index,
     active: active,
@@ -2729,7 +2746,7 @@ function Answer$1(_ref) {
     _ref$good = _ref.good,
     good = _ref$good === void 0 ? true : _ref$good;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, _defineProperty(_defineProperty({}, className, className !== null), styles$4.good, good)])
+    className: classNames([styles$4.container, className, _defineProperty({}, styles$4.good, good)])
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$4.answer
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
@@ -2774,6 +2791,7 @@ function Title(props) {
 
 var styles$2 = {"container":"micromag-core-placeholders-survey-answer-container","block":"micromag-core-placeholders-survey-answer-block","percent":"micromag-core-placeholders-survey-answer-percent","percentIcon":"micromag-core-placeholders-survey-answer-percentIcon"};
 
+/* eslint-disable react/destructuring-assignment, react/prop-types */
 function Answer(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '75%' : _ref$width,
@@ -2781,7 +2799,7 @@ function Answer(_ref) {
     height = _ref$height === void 0 ? '0.3em' : _ref$height,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$2.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$2.container, className])
   }, /*#__PURE__*/React.createElement(PlaceholderBlock, {
     outline: true,
     width: width,
@@ -2870,7 +2888,7 @@ function Screens(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? null : _ref$className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$1.container, _defineProperty({}, className, className)])
+    className: classNames([styles$1.container, className])
   }, screens.map(function (screen) {
     var id = screen.id;
     return /*#__PURE__*/React.createElement(Screen, {
@@ -2950,7 +2968,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, _defineProperty(_defineProperty({}, className, className !== null), styles.fullscreen, fullscreen)])
+    className: classNames([styles.container, className, _defineProperty({}, styles.fullscreen, fullscreen)])
   }, children);
 }