@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/components/selects/Multiselect.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import { useRef, useState } from 'react';
@@ -16,7 +15,7 @@ import useMergeRefs from '../../hooks/useMergeRefs';
 import WithFeedbackAndAddon from './WithFeedbackAndAddon';
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Multiselect = (props) => {
-    const { name, id = name, options = [], value, onChange = noop, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = __rest(props, ["name", "id", "options", "value", "onChange", "placeholder", "isLoading", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "multiline", "noItemMessage", "counterMessage", "renderCounterMessage", "showSelectedItemIcon", "showUnselectedItemIcons", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    const { name, id = name, options = [], value, onChange = noop, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', ...remainingProps } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItemIds, setSelectedItemIds] = useState(value || []);
     const [isFilterActive, setIsFilterActive] = useState(false);
@@ -71,17 +70,17 @@ const Multiselect = (props) => {
         if (counterMessage || renderCounterMessage) {
             return (_jsx(MultiselectToggleCounter, { selectedAmount: selectedItemIds.length, counterMessage: counterMessage, customRenderer: renderCounterMessage }));
         }
-        return (_jsx(MultiselectToggleSelection, Object.assign({ options: options, selectedItemIds: selectedItemIds, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons, onRemoveItem: handleRemoveSelectedItem, multiline: multiline, hasInputAddon: !!inputAddon, hasFilter: useFilter }, { children: multiline && renderFilter() })));
+        return (_jsx(MultiselectToggleSelection, { options: options, selectedItemIds: selectedItemIds, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons, onRemoveItem: handleRemoveSelectedItem, multiline: multiline, hasInputAddon: !!inputAddon, hasFilter: useFilter, children: multiline && renderFilter() }));
     };
     const renderToggle = () => {
         const wrapperClassNames = classNames('dropdown-toggle', 'form-control', 'text-left', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', multiline && 'height-auto', disabled && 'disabled');
         const showPlaceholder = isEmpty(selectedItemIds) && !showUnselectedItemIcons;
         const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;
-        const toggleButton = (_jsxs("button", Object.assign({ type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle }, { children: [showPlaceholder ? (_jsxs(_Fragment, { children: [_jsx(MultiselectTogglePlaceholder, { placeholder: placeholder }), showFilter && renderFilter()] })) : (renderSelection()), showFilter && !multiline && renderFilter(), _jsx("span", { className: 'caret' })] })));
+        const toggleButton = (_jsxs("button", { type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle, children: [showPlaceholder ? (_jsxs(_Fragment, { children: [_jsx(MultiselectTogglePlaceholder, { placeholder: placeholder }), showFilter && renderFilter()] })) : (renderSelection()), showFilter && !multiline && renderFilter(), _jsx("span", { className: 'caret' })] }));
         if (!inputAddon && !errorMessage && !warningMessage) {
             return toggleButton;
         }
-        return (_jsx(WithFeedbackAndAddon, Object.assign({ bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace }, { children: toggleButton })));
+        return (_jsx(WithFeedbackAndAddon, { bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace, children: toggleButton }));
     };
     const renderDropdownMenu = () => {
         const nonSelectedOptions = filteredOptions.map(option => {
@@ -110,7 +109,7 @@ const Multiselect = (props) => {
     };
     const onOptionChange = (currentSelectedItem) => {
         // prevent selecting disabled Items via keyboard
-        if (currentSelectedItem === null || currentSelectedItem === void 0 ? void 0 : currentSelectedItem.disabled) {
+        if (currentSelectedItem?.disabled) {
             return;
         }
         const updatedSelectedItems = currentSelectedItem ? updateSelection(currentSelectedItem.id) : selectedItemIds;
@@ -173,7 +172,6 @@ const Multiselect = (props) => {
         setKeyboardUsed(isKeyboardUsed);
     };
     const closeMenu = () => {
-        var _a;
         if (isOpen) {
             setIsOpen(false);
             setIsFilterActive(false);
@@ -181,10 +179,10 @@ const Multiselect = (props) => {
             setFilteredOptions(options);
             setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
             setKeyboardUsed(false);
-            (_a = refToggle === null || refToggle === void 0 ? void 0 : refToggle.current) === null || _a === void 0 ? void 0 : _a.focus();
+            refToggle?.current?.focus();
         }
     };
     const wrapperClasses = classNames('select', 'multiselect', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClasses, ref: mergedSelectRefs }, { children: [renderToggle(), renderDropdownMenu()] })));
+    return (_jsxs("div", { ...remainingProps, className: wrapperClasses, ref: mergedSelectRefs, children: [renderToggle(), renderDropdownMenu()] }));
 };
 export default Multiselect;

package/components/selects/MultiselectToggleCounter.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 const MultiselectToggleCounter = (props) => {
     const { customRenderer, selectedAmount, counterMessage } = props;
     if (customRenderer) {
@@ -8,7 +6,7 @@ const MultiselectToggleCounter = (props) => {
     }
     if (counterMessage) {
         const message = selectedAmount === 1 ? counterMessage.one : counterMessage.many;
-        return (_jsxs("span", { children: [_jsx("span", Object.assign({ className: 'option-counter margin-right-1' }, { children: selectedAmount })), _jsx("span", Object.assign({ className: 'counter-message margin-left-1' }, { children: message }))] }));
+        return (_jsxs("span", { children: [_jsx("span", { className: 'option-counter margin-right-1', children: selectedAmount }), _jsx("span", { className: 'counter-message margin-left-1', children: message })] }));
     }
 };
 export default MultiselectToggleCounter;

package/components/selects/MultiselectToggleFilter.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
 const MultiselectToggleFilter = (props) => {

package/components/selects/MultiselectTogglePlaceholder.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 const MultiselectTogglePlaceholder = ({ placeholder }) => {
-    return placeholder ? _jsx("span", Object.assign({ className: 'placeholder' }, { children: placeholder })) : _jsx("span", {});
+    return placeholder ? _jsx("span", { className: 'placeholder', children: placeholder }) : _jsx("span", {});
 };
 export default MultiselectTogglePlaceholder;

package/components/selects/MultiselectToggleSelection.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
 const MultiselectToggleSelection = (props) => {
@@ -14,15 +12,15 @@ const MultiselectToggleSelection = (props) => {
     const renderSelectionItem = (item, index) => {
         if (showSelectedItemIcon) {
             const inactiveClassNames = classNames('margin-right-5', !isItemSelected(item) && 'inactiveIcon');
-            return (_jsx("span", Object.assign({ className: inactiveClassNames }, { children: item.icon }), item.id));
+            return (_jsx("span", { className: inactiveClassNames, children: item.icon }, item.id));
         }
-        return (_jsxs("span", Object.assign({ className: 'selected-option' }, { children: [_jsxs("span", Object.assign({ className: 'selected-label' }, { children: [item.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: item.icon })), item.label] })), _jsx("span", Object.assign({ className: 'removeIcon', onClick: event => {
+        return (_jsxs("span", { className: 'selected-option', children: [_jsxs("span", { className: 'selected-label', children: [item.icon && _jsx("span", { className: 'margin-right-5', children: item.icon }), item.label] }), _jsx("span", { className: 'removeIcon', onClick: event => {
                         onRemoveItem(event, item.id);
-                    } }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }))] }), index));
+                    }, children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })] }, index));
     };
     const optionListClassNames = classNames(!showSelectedItemIcon && !showUnselectedItemIcons && 'selected-option-list', multiline && 'flex-wrap', hasInputAddon && 'margin-left-0', hasFilter && 'padding-left-1');
-    return (_jsxs("span", Object.assign({ className: optionListClassNames }, { children: [options
+    return (_jsxs("span", { className: optionListClassNames, children: [options
                 .filter(option => (showUnselectedItemIcons ? !option.header : isItemSelected(option)))
-                .map((option, index) => renderSelectionItem(option, index)), children] })));
+                .map((option, index) => renderSelectionItem(option, index)), children] }));
 };
 export default MultiselectToggleSelection;

package/components/selects/NoItemMessage.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 const NoItemMessage = (props) => {
     const { noItemMessage, className } = props;
     if (!noItemMessage) {
         return null;
     }
-    return (_jsx("ul", Object.assign({ className: className, role: 'menu' }, { children: _jsx("li", Object.assign({ className: 'no-item-message disabled', role: 'presentation' }, { children: _jsx("a", Object.assign({ role: 'menuitem' }, { children: _jsx("i", { children: noItemMessage }) })) })) })));
+    return (_jsx("ul", { className: className, role: 'menu', children: _jsx("li", { className: 'no-item-message disabled', role: 'presentation', children: _jsx("a", { role: 'menuitem', children: _jsx("i", { children: noItemMessage }) }) }) }));
 };
 export default NoItemMessage;

package/components/selects/Select.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import classNames from 'classnames';
@@ -15,7 +14,7 @@ import SelectedOption from './SelectedOption';
 import WithFeedbackAndAddon from './WithFeedbackAndAddon';
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Select = (props) => {
-    const { name, id = name, label, options = [], value, onChange = noop, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = __rest(props, ["name", "id", "label", "options", "value", "onChange", "placeholder", "isLoading", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "useClear", "noItemMessage", "selectedOptionText", "showSelectedItemIcon", "showUnselectedItemIcons", "dropdownClassName", "btnClassName", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    const { name, id = name, label, options = [], value, onChange = noop, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', ...remainingProps } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItem, setSelectedItem] = useState(null);
     const [isFilterActive, setIsFilterActive] = useState(false);
@@ -61,11 +60,11 @@ const Select = (props) => {
     };
     const renderToggle = () => {
         const toggleClasses = classNames('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', disabled && 'disabled');
-        const toggleButton = (_jsxs("button", Object.assign({ type: 'button', id: id, name: name, className: toggleClasses, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, ref: refToggle }, { children: [useFilter && isOpen && (_jsx(SelectFilter, { isFilterActive: isFilterActive, filterValue: filterValue, onChange: handleFilterChange })), selectedOptionText ? (selectedOptionText) : (_jsx(SelectedOption, { label: label, placeholder: placeholder, selectedItem: selectedItem, options: options, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons })), _jsx(ClearButton, { showClear: useClear, selectedItem: selectedItem, onClear: handleClearSelectedItem }), _jsx("span", { className: 'caret' })] })));
+        const toggleButton = (_jsxs("button", { type: 'button', id: id, name: name, className: toggleClasses, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, ref: refToggle, children: [useFilter && isOpen && (_jsx(SelectFilter, { isFilterActive: isFilterActive, filterValue: filterValue, onChange: handleFilterChange })), selectedOptionText ? (selectedOptionText) : (_jsx(SelectedOption, { label: label, placeholder: placeholder, selectedItem: selectedItem, options: options, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons })), _jsx(ClearButton, { showClear: useClear, selectedItem: selectedItem, onClear: handleClearSelectedItem }), _jsx("span", { className: 'caret' })] }));
         if (!inputAddon && !errorMessage && !warningMessage) {
             return toggleButton;
         }
-        return (_jsx(WithFeedbackAndAddon, Object.assign({ bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace }, { children: toggleButton })));
+        return (_jsx(WithFeedbackAndAddon, { bsSize: bsSize, inputAddon: inputAddon, errorMessage: errorMessage, warningMessage: warningMessage, messageWhiteSpace: messageWhiteSpace, children: toggleButton }));
     };
     const renderDropdownMenu = () => {
         // When an option was already selected, highlight this option by setting the focusedItemIndex accordingly.
@@ -116,7 +115,6 @@ const Select = (props) => {
         setKeyboardUsed(isKeyboardUsed);
     };
     const closeMenu = () => {
-        var _a;
         if (isOpen) {
             setIsOpen(false);
             setIsFilterActive(false);
@@ -124,10 +122,10 @@ const Select = (props) => {
             setFilteredOptions(options);
             setKeyboardUsed(false);
             setFocusedItemIndex(DEFAULT_FOCUSED_ITEM_INDEX);
-            (_a = refToggle.current) === null || _a === void 0 ? void 0 : _a.focus();
+            refToggle.current?.focus();
         }
     };
     const classes = classNames('select', 'dropdown', isOpen && 'open', hasError && 'has-error', className && className);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: classes, ref: mergedSelectRefs }, { children: [renderToggle(), renderDropdownMenu()] })));
+    return (_jsxs("div", { ...remainingProps, className: classes, ref: mergedSelectRefs, children: [renderToggle(), renderDropdownMenu()] }));
 };
 export default Select;

package/components/selects/SelectFilter.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 const SelectFilter = (props) => {
     const { isFilterActive, filterValue, onChange } = props;

package/components/selects/SelectedOption.js

@@ -1,13 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SelectedOption = (props) => {
     const { label, placeholder, selectedItem, options, showSelectedItemIcon, showUnselectedItemIcons } = props;
     const renderUnselectedItemIcons = (optionsToRender, currentSelectedItem) => {
         const optionSpans = optionsToRender
             .filter(option => !option.header)
-            .map(option => (_jsx("span", Object.assign({ className: `margin-right-5 ${currentSelectedItem && currentSelectedItem.id === option.id ? '' : 'inactiveIcon'}` }, { children: option.icon }), option.id)));
-        return _jsx("span", { children: optionSpans });
+            .map(option => (_jsx("span", { className: `${currentSelectedItem && currentSelectedItem.id === option.id ? '' : 'inactiveIcon'}`, children: option.icon }, option.id)));
+        return _jsx(_Fragment, { children: optionSpans });
     };
     const getSelectedItemLabel = (item, placeholderValue) => {
         if (showUnselectedItemIcons) {
@@ -15,10 +13,10 @@ const SelectedOption = (props) => {
         }
         if (!item) {
             // render a placeholder or if there is none render a non-breaking space " "
-            return placeholderValue ? _jsx("span", Object.assign({ className: 'placeholder' }, { children: placeholderValue })) : '\u00a0';
+            return placeholderValue ? _jsx("span", { className: 'placeholder', children: placeholderValue }) : '\u00a0';
         }
-        return (_jsxs("span", { children: [item.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: item.icon })), !showSelectedItemIcon && item.label] }));
+        return (_jsxs(_Fragment, { children: [item.icon && _jsx("span", { children: item.icon }), !showSelectedItemIcon && item.label] }));
     };
-    return (_jsxs("span", Object.assign({ className: 'selected-option-text' }, { children: [label && _jsxs("span", Object.assign({ className: 'selected-option-text-label' }, { children: [label, ":"] })), _jsx("span", { children: getSelectedItemLabel(selectedItem, placeholder) })] })));
+    return (_jsxs("span", { className: 'selected-option-text', children: [label && _jsxs("span", { className: 'selected-option-text-label', children: [label, ":"] }), getSelectedItemLabel(selectedItem, placeholder)] }));
 };
 export default SelectedOption;

package/components/selects/WithFeedbackAndAddon.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 const WithFeedbackAndAddon = (props) => {
     const { bsSize = 'md', inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', children } = props;
     const formGroupClassName = classNames('form-group margin-bottom-0', (errorMessage || warningMessage) && 'has-feedback', errorMessage && 'has-error', warningMessage && 'has-warning');
     const inputGroupClassNames = classNames('input-group', bsSize === 'sm' && 'input-group-sm', bsSize === 'lg' && 'input-group-lg');
     const hasFeedbackMessage = errorMessage || warningMessage;
-    return (_jsx("div", Object.assign({ className: formGroupClassName }, { children: _jsxs("div", Object.assign({ className: inputGroupClassNames }, { children: [inputAddon && (_jsx("div", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: inputAddon }) }))), _jsxs("div", Object.assign({ className: 'form-control-feedback-wrapper' }, { children: [children, hasFeedbackMessage && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && (_jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' })), _jsx("span", Object.assign({ className: `help-block white-space-${messageWhiteSpace}` }, { children: _jsx("span", { children: errorMessage || warningMessage }) }))] }))] }))] })) })));
+    return (_jsx("div", { className: formGroupClassName, children: _jsxs("div", { className: inputGroupClassNames, children: [inputAddon && (_jsx("div", { className: 'input-group-addon', children: _jsx("span", { className: inputAddon }) })), _jsxs("div", { className: 'form-control-feedback-wrapper', children: [children, hasFeedbackMessage && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && (_jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' })), _jsx("span", { className: `help-block white-space-${messageWhiteSpace}`, children: _jsx("span", { children: errorMessage || warningMessage }) })] }))] })] }) }));
 };
 export default WithFeedbackAndAddon;

package/components/sidebars/Sidebar.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -54,7 +53,7 @@ const animationVariants = {
     },
 };
 const Sidebar = (props) => {
-    const { fly = false, closed = false, title = '', footer, resizable = false, position, width = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, hasBackdrop = false, hasSmoothScrollbar = false, makeBackdropVisible = false, enableFullscreenToggle = false, fullscreenToggleTooltip, openInFullscreen = false, showHeaderBorder = false, disableClose = false, bodyRef, headerButtons, switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT, onClose = noop, onResizeEnd = noop, onFullScreenChange = noop, onBackdropClick = noop, disableEsc = false, titleClassName = '', bodyClassName = '', headerClassName = '', footerClassName = '', backdropClassName = '', className = '', children } = props, remainingProps = __rest(props, ["fly", "closed", "title", "footer", "resizable", "position", "width", "minWidth", "maxWidth", "hasBackdrop", "hasSmoothScrollbar", "makeBackdropVisible", "enableFullscreenToggle", "fullscreenToggleTooltip", "openInFullscreen", "showHeaderBorder", "disableClose", "bodyRef", "headerButtons", "switchModeBreakpoint", "onClose", "onResizeEnd", "onFullScreenChange", "onBackdropClick", "disableEsc", "titleClassName", "bodyClassName", "headerClassName", "footerClassName", "backdropClassName", "className", "children"]);
+    const { fly = false, closed = false, title = '', footer, resizable = false, position, width = DEFAULT_WIDTH, minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, hasBackdrop = false, hasSmoothScrollbar = false, makeBackdropVisible = false, enableFullscreenToggle = false, fullscreenToggleTooltip, openInFullscreen = false, showHeaderBorder = false, disableClose = false, bodyRef, headerButtons, switchModeBreakpoint = DEFAULT_SWITCH_MODE_BREAKPOINT, onClose = noop, onResizeEnd = noop, onFullScreenChange = noop, onBackdropClick = noop, disableEsc = false, titleClassName = '', bodyClassName = '', headerClassName = '', footerClassName = '', backdropClassName = '', className = '', children, ...remainingProps } = props;
     const [internalWidth, setInternalWidth] = useState(toNumber(width));
     const [sidebarMode, setSidebarMode] = useState(fly ? Sidebar.MODE_FLY : Sidebar.MODE_FLUID);
     const [isFullscreen, setIsFullscreen] = useState(openInFullscreen);
@@ -74,7 +73,7 @@ const Sidebar = (props) => {
     useEffect(() => {
         if (sidebarRef.current && sidebarMode === Sidebar.MODE_FLY) {
             const sidebarLayout = sidebarRef.current.parentNode;
-            if (sidebarLayout === null || sidebarLayout === void 0 ? void 0 : sidebarLayout.className.includes('right')) {
+            if (sidebarLayout?.className.includes('right')) {
                 setIsRight(true);
             }
         }
@@ -116,8 +115,7 @@ const Sidebar = (props) => {
         }
     });
     const adaptSidebarMode = () => {
-        var _a;
-        const moduleContentWidth = (_a = moduleContentRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        const moduleContentWidth = moduleContentRef.current?.clientWidth;
         if (fly || switchModeBreakpoint === DEFAULT_SWITCH_MODE_BREAKPOINT) {
             return;
         }
@@ -152,12 +150,12 @@ const Sidebar = (props) => {
     };
     const handleResizeStart = () => {
         const body = document.body;
-        body === null || body === void 0 ? void 0 : body.classList.add('pointer-events-none');
+        body?.classList.add('pointer-events-none');
         setIsResize(true);
     };
     const handleResizeEnd = () => {
         const body = document.body;
-        body === null || body === void 0 ? void 0 : body.classList.remove('pointer-events-none');
+        body?.classList.remove('pointer-events-none');
         setIsResize(false);
         onResizeEnd();
     };
@@ -173,10 +171,10 @@ const Sidebar = (props) => {
     const resizeLimitClasses = classNames('SidebarResizeLimit', isResize && 'display-block');
     const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
     const resizeLimitStyle = isRight ? { right: resizeIndicatorPosition } : { left: resizeIndicatorPosition };
-    const sidebarContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", Object.assign({ className: 'SidebarContent' }, { children: [_jsxs("div", Object.assign({ className: headerClassNames }, { children: [_jsx("div", Object.assign({ className: titleClassNames }, { children: title })), _jsxs("div", Object.assign({ className: 'SidebarButtons non-printable close' }, { children: [headerButtons, enableFullscreenToggle && (_jsx(SidebarFullscreenToggle, { isFullscreen: isFullscreen, onClick: handleFullscreenChange, tooltip: fullscreenToggleTooltip })), !disableClose && (headerButtons || enableFullscreenToggle) && (_jsx("div", { className: 'SidebarButtons-spacer' })), !disableClose && _jsx(SidebarCloseButton, { onClick: onClose })] }))] })), hasSmoothScrollbar ? (_jsx(SmoothScrollbars, Object.assign({ slideIn: true, className: bodyClassNames, ref: bodyRef }, { children: children }))) : (_jsx("div", Object.assign({ className: bodyClassNames, ref: bodyRef }, { children: children }))), _jsx(SidebarFooter, { footer: footer, className: footerClassName })] })), resizable && (_jsx(Resizer, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer.HORIZONTAL, position: isRight ? Resizer.LEFT : Resizer.RIGHT }))] }));
-    return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, Object.assign({ initial: true, exitBeforeEnter: true }, { children: _jsx(motion.div, Object.assign({}, remainingProps, { initial: previousClosed && 'sidebarEnter', animate: 'sidebarVisible', 
+    const sidebarContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: resizeLimitClasses, style: resizeLimitStyle }), _jsxs("div", { className: 'SidebarContent', children: [_jsxs("div", { className: headerClassNames, children: [_jsx("div", { className: titleClassNames, children: title }), _jsxs("div", { className: 'SidebarButtons non-printable close', children: [headerButtons, enableFullscreenToggle && (_jsx(SidebarFullscreenToggle, { isFullscreen: isFullscreen, onClick: handleFullscreenChange, tooltip: fullscreenToggleTooltip })), !disableClose && (headerButtons || enableFullscreenToggle) && (_jsx("div", { className: 'SidebarButtons-spacer' })), !disableClose && _jsx(SidebarCloseButton, { onClick: onClose })] })] }), hasSmoothScrollbar ? (_jsx(SmoothScrollbars, { slideIn: true, className: bodyClassNames, ref: bodyRef, children: children })) : (_jsx("div", { className: bodyClassNames, ref: bodyRef, children: children })), _jsx(SidebarFooter, { footer: footer, className: footerClassName })] }), resizable && (_jsx(Resizer, { onResizeStart: handleResizeStart, onResize: handleResize, onResizeEnd: handleResizeEnd, direction: Resizer.HORIZONTAL, position: isRight ? Resizer.LEFT : Resizer.RIGHT }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(AnimatePresence, { initial: true, exitBeforeEnter: true, children: _jsx(motion.div, { ...remainingProps, initial: previousClosed && 'sidebarEnter', animate: 'sidebarVisible', 
                     // Cannot exit animation as sidebar is moved to offscreen by CSS class, means is still mounted
-                    exit: 'sidebarExit', variants: animationVariants, custom: { fromRight: isRight, closed }, transition: { duration: ANIMATION_DURATION }, className: wrapperClasses, style: { width: internalWidth }, ref: sidebarRef }, { children: sidebarContent })) })), hasBackdrop && !closed && (_jsx(SidebarBackdrop, { className: backdropClassName, makeBackdropVisible: makeBackdropVisible, onClick: onBackdropClick }))] }));
+                    exit: 'sidebarExit', variants: animationVariants, custom: { fromRight: isRight, closed }, transition: { duration: ANIMATION_DURATION }, className: wrapperClasses, style: { width: internalWidth }, ref: sidebarRef, children: sidebarContent }) }), hasBackdrop && !closed && (_jsx(SidebarBackdrop, { className: backdropClassName, makeBackdropVisible: makeBackdropVisible, onClick: onBackdropClick }))] }));
 };
 Sidebar.LEFT = SidebarPosition.LEFT;
 Sidebar.RIGHT = SidebarPosition.RIGHT;

package/components/sidebars/SidebarBackdrop.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 const SidebarBackdrop = ({ onClick = noop, makeBackdropVisible = false, className = '' }) => {

package/components/sidebars/SidebarCloseButton.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'react';
 import noop from 'lodash/fp/noop';
 import Button from '../button/Button';
 const SidebarCloseButton = ({ onClick = noop }) => {
-    return (_jsx(Button, Object.assign({ bsStyle: Button.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarCloseButton' }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })));
+    return (_jsx(Button, { bsStyle: Button.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarCloseButton', children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }));
 };
 export default SidebarCloseButton;

package/components/sidebars/SidebarFooter.js

@@ -1,12 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 const SidebarFooter = ({ footer, className = '' }) => {
     if (!footer) {
         return null;
     }
     const footerClassNames = classNames('SidebarFooter', className);
-    return _jsx("div", Object.assign({ className: footerClassNames }, { children: footer }));
+    return _jsx("div", { className: footerClassNames, children: footer });
 };
 export default SidebarFooter;

package/components/sidebars/SidebarFullscreenToggle.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import Button from '../button/Button';
 import SimpleTooltip from '../tooltip/SimpleTooltip';
 const SidebarFullscreenToggle = ({ isFullscreen, tooltip, onClick = noop }) => {
     const fullscreenIconClasses = classNames('rioglyph', isFullscreen ? 'rioglyph-resize-small' : 'rioglyph-resize-full');
-    const button = (_jsx(Button, Object.assign({ bsStyle: Button.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarFullscreenToggle' }, { children: _jsx("span", { className: fullscreenIconClasses }) })));
+    const button = (_jsx(Button, { bsStyle: Button.MUTED, iconOnly: true, onClick: onClick, "data-testid": 'sidebarFullscreenToggle', children: _jsx("span", { className: fullscreenIconClasses }) }));
     if (tooltip) {
-        return (_jsx(SimpleTooltip, Object.assign({ content: tooltip, placement: 'bottom' }, { children: button })));
+        return (_jsx(SimpleTooltip, { content: tooltip, placement: 'bottom', children: button }));
     }
     return button;
 };

package/components/slider/RangeSlider.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
@@ -10,7 +9,7 @@ const getRangeValues = (valueLeft, valueRight) => {
     return [finalLeftValue, finalRightValue];
 };
 const RangeSlider = (props) => {
-    const { minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, step = 1, color = 'primary', leftValue, rightValue, className, disabled = false, onChange = noop, onDragEnd = noop } = props, remainingProps = __rest(props, ["minValue", "maxValue", "valueLabels", "valueLabelUnit", "step", "color", "leftValue", "rightValue", "className", "disabled", "onChange", "onDragEnd"]);
+    const { minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, step = 1, color = 'primary', leftValue, rightValue, className, disabled = false, onChange = noop, onDragEnd = noop, ...remainingProps } = props;
     const [activeLeft, setActiveLeft] = useState(false);
     const [activeRight, setActiveRight] = useState(false);
     const [valueLeft, setValueLeft] = useState(leftValue ? leftValue : minValue);
@@ -104,6 +103,6 @@ const RangeSlider = (props) => {
     const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);
     const wrapperClassNames = classNames('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
     const sliderBackgroundColor = getCurrentBackgroundColor(color);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames, style: { color: sliderBackgroundColor } }, { children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` } }, { children: valueLabels && (_jsxs("div", Object.assign({ className: 'user-select-none' }, { children: [_jsx("div", Object.assign({ className: 'range-value' }, { children: _jsx("span", { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue }) })), _jsx("div", Object.assign({ className: 'range-value' }, { children: _jsx("span", { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }) }))] }))) })), _jsx("input", { className: `${isChangingLeft ? 'changing' : ''}`, style: { zIndex: activeLeft ? '6' : '5' }, value: valueLeft, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueLeft, onMouseDown: onMouseDownLeft, onMouseMove: onMouseMoveLeft, onMouseUp: onMouseUpLeft }), _jsx("input", { className: `${isChangingRight ? 'changing' : ''}`, style: { zIndex: activeRight ? '6' : '5' }, value: valueRight, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueRight, onMouseDown: onMouseDownRight, onMouseMove: onMouseMoveRight, onMouseUp: onMouseUpRight })] })));
+    return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, style: { color: sliderBackgroundColor }, children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", { className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` }, children: valueLabels && (_jsxs("div", { className: 'user-select-none', children: [_jsx("div", { className: 'range-value', children: _jsx("span", { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue }) }), _jsx("div", { className: 'range-value', children: _jsx("span", { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }) })] })) }), _jsx("input", { className: `${isChangingLeft ? 'changing' : ''}`, style: { zIndex: activeLeft ? '6' : '5' }, value: valueLeft, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueLeft, onMouseDown: onMouseDownLeft, onMouseMove: onMouseMoveLeft, onMouseUp: onMouseUpLeft }), _jsx("input", { className: `${isChangingRight ? 'changing' : ''}`, style: { zIndex: activeRight ? '6' : '5' }, value: valueRight, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueRight, onMouseDown: onMouseDownRight, onMouseMove: onMouseMoveRight, onMouseUp: onMouseUpRight })] }));
 };
 export default RangeSlider;

package/components/slider/Slider.js

@@ -1,11 +1,10 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
 import { getCurrentBackgroundColor } from '../../utils/currentColors';
 const Slider = (props) => {
-    const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, color = 'primary', step = 1, onChange = noop, onDragEnd = noop, className, disabled = false } = props, remainingProps = __rest(props, ["value", "minValue", "maxValue", "valueLabels", "valueLabelUnit", "largeValueLabels", "hideValueBar", "color", "step", "onChange", "onDragEnd", "className", "disabled"]);
+    const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, color = 'primary', step = 1, onChange = noop, onDragEnd = noop, className, disabled = false, ...remainingProps } = props;
     const [currentValue, setCurrentValue] = useState(value ? value : minValue);
     const [isChanging, setIsChanging] = useState(false);
     useEffect(() => {
@@ -29,6 +28,6 @@ const Slider = (props) => {
     const wrapperClassNames = classNames('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
     const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);
     const sliderBackgroundColor = getCurrentBackgroundColor(color);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames, style: { color: sliderBackgroundColor } }, { children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%` } }, { children: valueLabels && (_jsx("div", Object.assign({ className: 'range-value' }, { children: _jsx("span", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) }))) })), _jsx("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] })));
+    return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, style: { color: sliderBackgroundColor }, children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", { className: 'range-track', style: { width: `${trackWidth}%` }, children: valueLabels && (_jsx("div", { className: 'range-value', children: _jsx("span", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) })) }), _jsx("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] }));
 };
 export default Slider;

package/components/smoothScrollbars/SmoothScrollbars.d.ts

@@ -11,6 +11,6 @@ export type SmoothScrollbarsProps = {
     onScroll?: (event: React.UIEvent<any> | undefined) => void;
 };
 declare const SmoothScrollbars: React.ForwardRefExoticComponent<SmoothScrollbarsProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<any>>;
 export default SmoothScrollbars;

package/components/smoothScrollbars/SmoothScrollbars.js

@@ -36,16 +36,16 @@ const SmoothScrollbars = forwardRef((componentProps, ref) => {
     const renderThumbVerticalNames = classNames('scrollbar-thumb-vertical', largeTrack && 'scrollbar-thumb-size-large');
     const renderTrackHorizontalNames = classNames('scrollbar-track-horizontal', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
     const renderThumbHorizontalNames = classNames('scrollbar-thumb-horizontal', largeTrack && 'scrollbar-thumb-size-large');
-    return (_jsx(Scrollbars, Object.assign({ ref: scrollbarsRef, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
-            return _jsx("div", Object.assign({}, props, { className: 'scrollbar-view' }));
+    return (_jsx(Scrollbars, { ref: scrollbarsRef, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
+            return _jsx("div", { ...props, className: 'scrollbar-view' });
         }, renderTrackVertical: props => {
-            return _jsx("div", Object.assign({}, props, { className: renderTrackVerticalNames }));
+            return _jsx("div", { ...props, className: renderTrackVerticalNames });
         }, renderThumbVertical: props => {
-            return _jsx("div", Object.assign({}, props, { className: renderThumbVerticalNames }));
+            return _jsx("div", { ...props, className: renderThumbVerticalNames });
         }, renderTrackHorizontal: props => {
-            return _jsx("div", Object.assign({}, props, { className: renderTrackHorizontalNames }));
+            return _jsx("div", { ...props, className: renderTrackHorizontalNames });
         }, renderThumbHorizontal: props => {
-            return _jsx("div", Object.assign({}, props, { className: renderThumbHorizontalNames }));
-        } }, { children: _jsx("div", Object.assign({ className: 'scrollbar-content-wrapper', ref: contentRef }, { children: children })) })));
+            return _jsx("div", { ...props, className: renderThumbHorizontalNames });
+        }, children: _jsx("div", { className: 'scrollbar-content-wrapper', ref: contentRef, children: children }) }));
 });
 export default SmoothScrollbars;

package/components/spinner/Spinner.js

@@ -1,24 +1,21 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import Fade from '../fade/Fade';
 const BaseSpinner = (props) => {
-    const { isInverse, isDoubleSized } = props, remainingProps = __rest(props, ["isInverse", "isDoubleSized"]);
+    const { isInverse, isDoubleSized, ...remainingProps } = props;
     const className = classNames('spinner', { inverse: isInverse, double: isDoubleSized });
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: className }, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] })));
+    return (_jsxs("div", { ...remainingProps, className: className, children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", {}), _jsx("div", {})] }));
 };
 const Spinner = (props) => {
-    const { isInverse = false, isFullSized = false, isFullScreen = false, isDoubleSized = false, isInline = false, show = false, text } = props, remainingProps = __rest(props, ["isInverse", "isFullSized", "isFullScreen", "isDoubleSized", "isInline", "show", "text"]);
-    const baseSpinner = _jsx(BaseSpinner, Object.assign({ isDoubleSized: isDoubleSized, isInverse: isInverse }, remainingProps));
+    const { isInverse = false, isFullSized = false, isFullScreen = false, isDoubleSized = false, isInline = false, show = false, text, ...remainingProps } = props;
+    const baseSpinner = _jsx(BaseSpinner, { isDoubleSized: isDoubleSized, isInverse: isInverse, ...remainingProps });
     if (isInline) {
         return baseSpinner;
     }
     const classes = classNames(['spinnerInfoBox', 'display-flex', 'justify-content-center', 'align-items-center', 'height-100pct'], { fullsized: isFullSized, fullscreen: isFullScreen });
-    const wrappedSpinner = (_jsxs("div", Object.assign({ className: classes }, { children: [baseSpinner, text && _jsx("div", Object.assign({ className: 'spinnerText' }, { children: text }))] })));
+    const wrappedSpinner = (_jsxs("div", { className: classes, children: [baseSpinner, text && _jsx("div", { className: 'spinnerText', children: text })] }));
     if (isFullScreen || isFullSized) {
-        return (_jsx(Fade, Object.assign({ show: show, duration: 0.1 }, { children: wrappedSpinner })));
+        return (_jsx(Fade, { show: show, duration: 0.1, children: wrappedSpinner }));
     }
     return wrappedSpinner;
 };

package/components/states/BaseStateProps.js

@@ -1,2 +1 @@
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
+export {};

package/components/states/CustomState.js

@@ -1,7 +1,4 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
 import StateButton from './StateButton';
@@ -17,29 +14,29 @@ const renderButtons = (buttons) => {
         return;
     }
     if (buttons.length === 1) {
-        return (_jsx("div", Object.assign({ className: 'btn-toolbar margin-top-20' }, { children: _jsx(StateButton, Object.assign({}, buttons[0])) })));
+        return (_jsx("div", { className: 'btn-toolbar margin-top-20', children: _jsx(StateButton, { ...buttons[0] }) }));
     }
     if (buttons.length === 2) {
-        return (_jsx("div", Object.assign({ className: 'btn-toolbar margin-top-20 justify-content-center-xs' }, { children: buttons.map((buttonProps, index) => (_jsx(StateButton, Object.assign({}, buttonProps), index))) })));
+        return (_jsx("div", { className: 'btn-toolbar margin-top-20 justify-content-center-xs', children: buttons.map((buttonProps, index) => (_jsx(StateButton, { ...buttonProps }, index))) }));
     }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: 'btn-toolbar margin-top-20 justify-content-center-xs' }, { children: [_jsx(StateButton, Object.assign({}, buttons[0]), '1'), _jsx(StateButton, Object.assign({}, buttons[1]), '2')] })), _jsx("div", Object.assign({ className: 'btn-toolbar' }, { children: buttons.map((buttonProps, index) => {
-                    return index > 1 && _jsx(StateButton, Object.assign({}, buttonProps), index);
-                }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: 'btn-toolbar margin-top-20 justify-content-center-xs', children: [_jsx(StateButton, { ...buttons[0] }, '1'), _jsx(StateButton, { ...buttons[1] }, '2')] }), _jsx("div", { className: 'btn-toolbar', children: buttons.map((buttonProps, index) => {
+                    return index > 1 && _jsx(StateButton, { ...buttonProps }, index);
+                }) })] }));
 };
 const CustomState = (props) => {
-    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName = '', innerClassName = '', children } = props, remainingProps = __rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
+    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName = '', innerClassName = '', children, ...remainingProps } = props;
     const wrapperClasses = classNames('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !hasPaddingClass(outerClassName) && condensed ? 'padding-10' : 'padding-15', outerClassName);
     const innerClassNames = classNames('display-flex', 'flex-column', 'align-items-center', 'text-center', !hasPaddingClass(innerClassName) && condensed ? 'padding-15' : 'padding-25', innerClassName);
     const iconClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');
     const iconsClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20', 'display-flex', 'align-items-center', 'max-width-100pct');
     const headlineClassNames = classNames(condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-xl', 'line-height-125rel', 'text-color-dark', 'text-medium', 'width-500', 'max-width-100pct', 'text-wrap-balance');
-    const renderIcon = (_jsx("div", Object.assign({ className: iconClasses }, { children: _jsx(StateIcon, { name: icon }) })));
-    const renderIcons = (_jsx("div", Object.assign({ className: iconsClasses }, { children: icons.map((iconProps, index) => (_jsx(StateIcon, Object.assign({}, iconProps), index))) })));
-    const renderChildren = _jsx("div", Object.assign({ className: 'width-500 max-width-100pct margin-top-25' }, { children: children }));
-    const renderHeadline = _jsx("div", Object.assign({ className: headlineClassNames }, { children: headline }));
-    const renderMessage = (_jsx("div", Object.assign({ className: 'text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance' }, { children: message })));
+    const renderIcon = (_jsx(_Fragment, { children: icon && (_jsx("div", { className: iconClasses, children: _jsx(StateIcon, { name: icon }) })) }));
+    const renderIcons = (_jsx("div", { className: iconsClasses, children: icons.map((iconProps, index) => (_jsx(StateIcon, { ...iconProps }, index))) }));
+    const renderChildren = _jsx("div", { className: 'width-500 max-width-100pct margin-top-25', children: children });
+    const renderHeadline = _jsx("div", { className: headlineClassNames, children: headline });
+    const renderMessage = (_jsx("div", { className: 'text-color-dark margin-top-15 width-500 max-width-100pct text-wrap-balance', children: message }));
     const singleOrMultiIcon = isEmpty(icons) ? renderIcon : renderIcons;
     const imageOrIcon = image ? image : singleOrMultiIcon;
-    return (_jsx("div", Object.assign({ className: `display-flex ${justify[alignment]} max-width-100pct` }, remainingProps, { children: _jsx("div", Object.assign({ className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: innerClassNames }, { children: [imageOrIcon, headline && renderHeadline, message && renderMessage, renderButtons(buttons), children && renderChildren] })) })) })));
+    return (_jsx("div", { className: `display-flex ${justify[alignment]} max-width-100pct`, ...remainingProps, children: _jsx("div", { className: wrapperClasses, children: _jsxs("div", { className: innerClassNames, children: [imageOrIcon, headline && renderHeadline, message && renderMessage, renderButtons(buttons), children && renderChildren] }) }) }));
 };
 export default CustomState;

package/components/states/EmptyState.js

@@ -1,10 +1,7 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import CustomState from './CustomState';
 const EmptyState = (props) => {
-    const { icon = 'rioglyph-empty' } = props, remainingProps = __rest(props, ["icon"]);
-    return _jsx(CustomState, Object.assign({ icon: icon }, remainingProps));
+    const { icon = 'rioglyph-empty', ...remainingProps } = props;
+    return _jsx(CustomState, { icon: icon, ...remainingProps });
 };
 export default EmptyState;