@rio-cloud/rio-uikit 1.6.1 → 1.7.1

package/components/radiobutton/RadioButton.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, } from 'react';
 import classNames from 'classnames';
@@ -11,10 +10,10 @@ const RadioButtonIcon = (props) => {
         fontSize: `${iconSize}px`,
         lineHeight: `${iconSize}px`,
     };
-    return (_jsxs("span", Object.assign({ className: `radio-icon label-${iconLabelPosition}` }, { children: [_jsx("span", { className: `rioglyph ${icon}`, style: iconStyles }), _jsx("span", Object.assign({ className: 'radio-label' }, { children: text }))] })));
+    return (_jsxs("span", { className: `radio-icon label-${iconLabelPosition}`, children: [_jsx("span", { className: `rioglyph ${icon}`, style: iconStyles }), _jsx("span", { className: 'radio-label', children: text })] }));
 };
 const RadioButton = (props) => {
-    const { icon = '', iconLabelPosition = 'vertical', iconSize = 16, label, onClick = noop, onChange = noop, checked, defaultChecked, disabled = false, className, inline = false, right = false, custom = false, name, value, tabIndex = 0, inputRef, children } = props, remainingProps = __rest(props, ["icon", "iconLabelPosition", "iconSize", "label", "onClick", "onChange", "checked", "defaultChecked", "disabled", "className", "inline", "right", "custom", "name", "value", "tabIndex", "inputRef", "children"]);
+    const { icon = '', iconLabelPosition = 'vertical', iconSize = 16, label, onClick = noop, onChange = noop, checked, defaultChecked, disabled = false, className, inline = false, right = false, custom = false, name, value, tabIndex = 0, inputRef, children, ...remainingProps } = props;
     const isControlled = checked !== null && checked !== undefined;
     const labelRef = useRef(null);
     const handleToggleKeyDown = (event) => {
@@ -50,7 +49,7 @@ const RadioButton = (props) => {
     const renderCustomIcon = !!icon;
     const renderCustomContent = custom && children;
     const renderDefault = !icon && !custom;
-    return (_jsxs("label", Object.assign({}, remainingProps, { className: labelClassnames, tabIndex: tabIndex, onKeyDown: handleToggleKeyDown, ref: labelRef }, { children: [_jsx("input", { type: 'radio', defaultChecked: defaultChecked, checked: checked, disabled: disabled, className: inputClassnames, ref: inputRef, onClick: onClick, onChange: onChange, name: name, value: value }), renderCustomIcon && (_jsx(RadioButtonIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (_jsx("span", Object.assign({ className: 'radio-text' }, { children: _jsx("span", { children: text }) }))), renderCustomContent && children] })));
+    return (_jsxs("label", { ...remainingProps, className: labelClassnames, tabIndex: tabIndex, onKeyDown: handleToggleKeyDown, ref: labelRef, children: [_jsx("input", { type: 'radio', defaultChecked: defaultChecked, checked: checked, disabled: disabled, className: inputClassnames, ref: inputRef, onClick: onClick, onChange: onChange, name: name, value: value }), renderCustomIcon && (_jsx(RadioButtonIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (_jsx("span", { className: 'radio-text', children: _jsx("span", { children: text }) })), renderCustomContent && children] }));
 };
 RadioButton.ICON_LABEL_VERTICAL = 'vertical';
 RadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';

package/components/releaseNotes/ReleaseNotes.js

@@ -1,17 +1,14 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import isArray from 'lodash/fp/isArray';
 import map from 'lodash/fp/map';
 import toPairs from 'lodash/fp/toPairs';
 const Note = (props) => {
     const { note, version } = props;
     const { date, content } = note;
-    return (_jsxs("div", Object.assign({ className: 'panel panel-default' }, { children: [_jsx("div", Object.assign({ className: 'panel-heading' }, { children: _jsxs("div", Object.assign({ className: 'display-flex justify-content-between' }, { children: [_jsx("span", Object.assign({ className: 'text-size-16 text-medium' }, { children: `${version}` })), _jsx("span", Object.assign({ className: 'text-thin' }, { children: date }))] })) })), _jsx("div", Object.assign({ className: 'panel-body white-space-pre-line' }, { children: isArray(content) ? (_jsx("ul", Object.assign({ className: 'margin-bottom-0 margin-left-5 padding-left-25' }, { children: map((item) => (_jsx("li", { children: item }, `${version}-note-${Math.random()}`)), content) }))) : (_jsx("div", { children: content })) }))] }), `${version}-note`));
+    return (_jsxs("div", { className: 'panel panel-default', children: [_jsx("div", { className: 'panel-heading', children: _jsxs("div", { className: 'display-flex justify-content-between', children: [_jsx("span", { className: 'text-size-16 text-medium', children: `${version}` }), _jsx("span", { className: 'text-thin', children: date })] }) }), _jsx("div", { className: 'panel-body white-space-pre-line', children: isArray(content) ? (_jsx("ul", { className: 'margin-bottom-0 margin-left-5 padding-left-25', children: map((item) => (_jsx("li", { children: item }, `${version}-note-${Math.random()}`)), content) })) : (_jsx("div", { children: content })) })] }, `${version}-note`));
 };
 const ReleaseNotes = (props) => {
-    const { releaseNotes } = props, remainingProps = __rest(props, ["releaseNotes"]);
-    return (_jsx("div", Object.assign({}, remainingProps, { children: map(([key, note]) => (_jsx(Note, { note: note, version: key }, key)), toPairs(releaseNotes)) })));
+    const { releaseNotes, ...remainingProps } = props;
+    return (_jsx("div", { ...remainingProps, children: map(([key, note]) => (_jsx(Note, { note: note, version: key }, key)), toPairs(releaseNotes)) }));
 };
 export default ReleaseNotes;

package/components/resizer/Resizer.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import classNames from 'classnames';
@@ -30,7 +29,7 @@ const createListeners = (targetNode, onEnd, onMove) => {
     };
 };
 const Resizer = (props) => {
-    const { className = '', direction = HORIZONTAL, position = RIGHT, onResizeStart = noop, onResize = noop, onResizeEnd = noop, children } = props, remainingProps = __rest(props, ["className", "direction", "position", "onResizeStart", "onResize", "onResizeEnd", "children"]);
+    const { className = '', direction = HORIZONTAL, position = RIGHT, onResizeStart = noop, onResize = noop, onResizeEnd = noop, children, ...remainingProps } = props;
     const eventsRef = useRef(null);
     // Use refs here instead of local state as the move event listener fired before the state is set
     // and then it would work with outdated state at that time.
@@ -120,7 +119,7 @@ const Resizer = (props) => {
         }
     };
     const wrapperClasses = classNames('Resizer', direction === 'x' && 'resize-horizontal', direction === 'y' && 'resize-vertical', position === 'left' && 'resize-left', position === 'right' && 'resize-right', position === 'top' && 'resize-top', position === 'bottom' && 'resize-bottom', className && className);
-    return (_jsx("div", Object.assign({ ref: elementRef, className: wrapperClasses, onMouseDown: handleMouseStart, onTouchStart: handleTouchStart }, remainingProps, { children: children })));
+    return (_jsx("div", { ref: elementRef, className: wrapperClasses, onMouseDown: handleMouseStart, onTouchStart: handleTouchStart, ...remainingProps, children: children }));
 };
 Resizer.HORIZONTAL = HORIZONTAL;
 Resizer.VERTICAL = VERTICAL;

package/components/responsiveColumnStripe/ResponsiveColumnStripe.d.ts

@@ -76,6 +76,6 @@ export type ResponsiveColumnStripeProps = {
     className?: string;
 };
 declare const ResponsiveColumnStripe: React.ForwardRefExoticComponent<ResponsiveColumnStripeProps & {
-    children?: React.ReactNode;
+    children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default ResponsiveColumnStripe;

package/components/responsiveColumnStripe/ResponsiveColumnStripe.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, forwardRef, useEffect, useRef, useState, } from 'react';
 import classNames from 'classnames';
@@ -28,7 +27,7 @@ const getFirstColumnItem = (node) => {
     return getFirstColumnItem(node.children[0]);
 };
 const ResponsiveColumnStripe = forwardRef((props, ref) => {
-    const { minColumnWith = 300, minColumns = 1, maxColumns = 5, stretchLastItems = true, activePage = 0, asType: ComponentType = 'div', onPreviousClick = noop, onNextClick = noop, buttonClassName = '', columnsWrapperClassName = '', className = '', disableAnimation = false, children } = props, remainingProps = __rest(props, ["minColumnWith", "minColumns", "maxColumns", "stretchLastItems", "activePage", "asType", "onPreviousClick", "onNextClick", "buttonClassName", "columnsWrapperClassName", "className", "disableAnimation", "children"]);
+    const { minColumnWith = 300, minColumns = 1, maxColumns = 5, stretchLastItems = true, activePage = 0, asType: ComponentType = 'div', onPreviousClick = noop, onNextClick = noop, buttonClassName = '', columnsWrapperClassName = '', className = '', disableAnimation = false, children, ...remainingProps } = props;
     const [currentPage, setCurrentPage] = useState(activePage);
     const [columnsPerPage, setColumnsPerPage] = useState(maxColumns);
     const [enableInitialAnimation, setEnableInitialAnimation] = useState(false);
@@ -125,16 +124,13 @@ const ResponsiveColumnStripe = forwardRef((props, ref) => {
     const columnClassName = disableNextPage && !stretchLastItems ? 'flex-0-1' : 'flex-1-1';
     // Use the given custom component type "div" or any other. Clone the children to inject certain
     // properties that are required to stretch the items and deal with their size.
-    const columns = (_jsx(ComponentType, Object.assign({ className: mergedColumnsWrapperClassName }, { children: Children.map(columnsToDisplay, column => {
-            var _a;
-            return cloneElement(column, {
-                className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${((_a = column.props) === null || _a === void 0 ? void 0 : _a.className) || ''}`,
-                // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
-                'data-key': column.key,
-            });
-        }) })));
-    return (_jsxs("div", Object.assign({}, remainingProps, { ref: ref, className: wrapperClassName }, { children: [showPageButtons && (_jsx("div", Object.assign({ className: previousButtonClassName, onClick: handlePrevClick }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) }))), _jsxs("div", Object.assign({ className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (
+    const columns = (_jsx(ComponentType, { className: mergedColumnsWrapperClassName, children: Children.map(columnsToDisplay, column => cloneElement(column, {
+            className: `${COLUMN_ITEM_CLASSNAME} ${columnClassName} ${column.props?.className || ''}`,
+            // style: { ...column.props?.style, minWidth: `${minColumnWith}px` },
+            'data-key': column.key,
+        })) }));
+    return (_jsxs("div", { ...remainingProps, ref: ref, className: wrapperClassName, children: [showPageButtons && (_jsx("div", { className: previousButtonClassName, onClick: handlePrevClick, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) })), _jsxs("div", { className: 'ColumnsArea flex-1-1 overflow-hidden', ref: columnWrapperRef, children: [disableAnimation || isResizePage ? columns : null, !disableAnimation && !isResizePage && (
                     // @ts-ignore-next-line
-                    _jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: _jsx(motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: DEFAULT_TRANSITION }, { children: columns }), currentPage) })))] })), showPageButtons && (_jsx("div", Object.assign({ className: nextButtonClassName, onClick: handleNextClick }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) })))] })));
+                    _jsx(AnimatePresence, { exitBeforeEnter: true, custom: animationDirection, children: _jsx(motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: DEFAULT_TRANSITION, children: columns }, currentPage) }))] }), showPageButtons && (_jsx("div", { className: nextButtonClassName, onClick: handleNextClick, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] }));
 });
 export default ResponsiveColumnStripe;

package/components/rules/RuleConnector.js

@@ -1,20 +1,17 @@
-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';
 const getBorderColorFromBg = (bg) => bg.replace('bg', 'border-color');
 const commonRoundedClasses = classNames('width-20', 'height-20', 'rounded-circle', 'position-relative', 'z-index-2', 'box-sizing-content-box');
 const commonRoundedBorderClippingClasses = classNames('position-relative', 'width-20', 'height-20');
 const RuleConnector = (props) => {
-    const { placement = 'center', icon = 'rioglyph-plus', hidden = false, background = 'bg-lightest', pageBackground = 'bg-white', contentClassName = 'text-color-light', hasBorder = false, borderColor = '', className = '', children } = props, remainingProps = __rest(props, ["placement", "icon", "hidden", "background", "pageBackground", "contentClassName", "hasBorder", "borderColor", "className", "children"]);
+    const { placement = 'center', icon = 'rioglyph-plus', hidden = false, background = 'bg-lightest', pageBackground = 'bg-white', contentClassName = 'text-color-light', hasBorder = false, borderColor = '', className = '', children, ...remainingProps } = props;
     const wrapperClassNames = classNames('RuleConnector', 'height-20', 'display-flex', `justify-content-${placement}`, 'align-items-center', 'position-relative', hidden && 'opacity-0', className);
     const leftRoundedBox = classNames('margin-right--10', commonRoundedClasses, pageBackground, hasBorder && `border ${borderColor}`);
     const leftRoundedBoxBorderClipping = classNames('right-50pct', commonRoundedBorderClippingClasses, pageBackground);
     const contentWrapperClassNames = classNames('padding-left-20 padding-right-20', 'z-index-1', background, hasBorder && `border ${getBorderColorFromBg(background)}`);
     const rightRoundedBox = classNames('margin-left--10', commonRoundedClasses, pageBackground, hasBorder && `border ${borderColor}`);
     const rightRoundedBoxBorderClipping = classNames('left-50pct', commonRoundedBorderClippingClasses, pageBackground);
-    return (_jsxs("div", Object.assign({ "data-testid": 'ruleConnector' }, remainingProps, { className: wrapperClassNames }, { children: [_jsx("div", Object.assign({ className: leftRoundedBox }, { children: _jsx("div", { className: leftRoundedBoxBorderClipping }) })), _jsx("span", Object.assign({ className: contentWrapperClassNames }, { children: _jsx("span", Object.assign({ className: contentClassName }, { children: children ? children : _jsx("span", { className: `rioglyph ${icon}`, "data-testid": 'ruleConnectorIcon' }) })) })), _jsx("div", Object.assign({ className: rightRoundedBox }, { children: _jsx("div", { className: rightRoundedBoxBorderClipping }) }))] })));
+    return (_jsxs("div", { "data-testid": 'ruleConnector', ...remainingProps, className: wrapperClassNames, children: [_jsx("div", { className: leftRoundedBox, children: _jsx("div", { className: leftRoundedBoxBorderClipping }) }), _jsx("span", { className: contentWrapperClassNames, children: _jsx("span", { className: contentClassName, children: children ? children : _jsx("span", { className: `rioglyph ${icon}`, "data-testid": 'ruleConnectorIcon' }) }) }), _jsx("div", { className: rightRoundedBox, children: _jsx("div", { className: rightRoundedBoxBorderClipping }) })] }));
 };
 RuleConnector.START = 'start';
 RuleConnector.CENTER = 'center';

package/components/rules/RuleContainer.js

@@ -1,17 +1,15 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children } from 'react';
 import classNames from 'classnames';
 import { AnimatePresence, motion } from 'framer-motion';
 import RuleConnector from './RuleConnector';
 const RuleContainer = (props) => {
-    const { show = true, unchecked = false, background = 'bg-lightest', borderColor = '', hideConnector = false, customConnector, className = '', children } = props, remainingProps = __rest(props, ["show", "unchecked", "background", "borderColor", "hideConnector", "customConnector", "className", "children"]);
+    const { show = true, unchecked = false, background = 'bg-lightest', borderColor = '', hideConnector = false, customConnector, className = '', children, ...remainingProps } = props;
     if (!show) {
         return null;
     }
     const boxClassNames = classNames('RuleContainerBox', 'position-relative', 'rounded padding-20', background, unchecked && `border border-width border-style-dashed ${borderColor}`, className);
-    return (_jsxs("div", Object.assign({ className: 'RuleContainer' }, remainingProps, { children: [_jsx("div", Object.assign({ className: boxClassNames, "data-testid": 'ruleContainerBox' }, { children: _jsx(AnimatePresence, Object.assign({ exitBeforeEnter: true }, { children: Children.map(children, child => {
-                        var _a;
+    return (_jsxs("div", { className: 'RuleContainer', ...remainingProps, children: [_jsx("div", { className: boxClassNames, "data-testid": 'ruleContainerBox', children: _jsx(AnimatePresence, { exitBeforeEnter: true, children: Children.map(children, child => {
                         if (!child) {
                             return null;
                         }
@@ -19,7 +17,7 @@ const RuleContainer = (props) => {
                         const childAsElement = child;
                         // In case there are multiple children of RuleContainer, use the
                         // type name or the type itself as a key to animate between the two children
-                        return (_jsx(motion.div, Object.assign({ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }, { children: child }), ((_a = childAsElement.type) === null || _a === void 0 ? void 0 : _a.name) || childAsElement.type));
-                    }) })) })), customConnector ? customConnector : _jsx(RuleConnector, { hidden: unchecked || hideConnector })] })));
+                        return (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: child }, childAsElement.type?.name || childAsElement.type));
+                    }) }) }), customConnector ? customConnector : _jsx(RuleConnector, { hidden: unchecked || hideConnector })] }));
 };
 export default RuleContainer;

package/components/rules/RulesWrapper.js

@@ -1,12 +1,6 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import { AnimatePresence, motion } from 'framer-motion';
-const RulesWrapper = (_a) => {
-    var { children } = _a, remainingProps = __rest(_a, ["children"]);
-    return (
-    // @ts-ignore-next-line
-    _jsx(motion.div, Object.assign({ initial: false, layout: true }, remainingProps, { children: _jsx(AnimatePresence, { children: _jsx(motion.div, Object.assign({ layout: 'position' }, { children: children })) }) })));
-};
+const RulesWrapper = ({ children, ...remainingProps }) => (
+// @ts-ignore-next-line
+_jsx(motion.div, { initial: false, layout: true, ...remainingProps, children: _jsx(AnimatePresence, { children: _jsx(motion.div, { layout: 'position', children: children }) }) }));
 export default RulesWrapper;

package/components/saveableInput/SaveableInput.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
@@ -30,7 +29,7 @@ const useFocus = (isEditable) => {
 // [x] allow for unit and icon
 // [x] disabled input
 const SaveableInput = (props) => {
-    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, onValueChanged = noop, onInputChange, onEsc = noop, onEnterEdit = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className } = props, remainingProps = __rest(props, ["placeholder", "fixedPreviousValue", "previousValue", "value", "isValid", "onValueChanged", "onInputChange", "onEsc", "onEnterEdit", "buttonStyle", "inputClassName", "inputProps", "icon", "unit", "disabled", "className"]);
+    const { placeholder, fixedPreviousValue = '', previousValue = '', value: externalValue = '', isValid = true, onValueChanged = noop, onInputChange, onEsc = noop, onEnterEdit = noop, buttonStyle = DEFAULT_BUTTON_STYLE, inputClassName, inputProps, icon, unit, disabled = false, className, ...remainingProps } = props;
     const externalOldValue = previousValue || fixedPreviousValue;
     const [inputValue, setInputValue] = useState(externalValue);
     const [oldInputValue, setOldInputValue] = useState(externalOldValue);
@@ -90,17 +89,16 @@ const SaveableInput = (props) => {
         }
     };
     const handleInputChange = (event) => {
-        var _a;
         // Only update internal value if the external "onInputChange" callback function is not defined
         // as it will be used in a controlled way
         if (onInputChange) {
             // Use type assertion to access nativeEvent.data
-            const nativeEventData = (_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.data;
+            const nativeEventData = event.nativeEvent?.data;
             // Whe "backspace" is used to remove a value, the nativeEventData is undefined. In this case
             // we need to use the target value for the callback otherwise the user will not be able to
             // remove a character from the input
             const currentInputValue = event.target.value;
-            onInputChange(nativeEventData !== null && nativeEventData !== void 0 ? nativeEventData : currentInputValue, event.currentTarget.value);
+            onInputChange(nativeEventData ?? currentInputValue, event.currentTarget.value);
             return;
         }
         setInputValue(event.target.value);
@@ -114,6 +112,6 @@ const SaveableInput = (props) => {
     const oldValueClasses = classNames('position-absolute', 'top-2', 'left-10', 'margin-left-3', 'text-size-10', 'text-decoration-line-through', icon && 'padding-left-20');
     const buttonIconClasses = classNames('rioglyph', editInput ? 'rioglyph-ok' : 'rioglyph-pencil');
     const disableButton = (editInput && !isValid) || disabled;
-    return (_jsx("div", Object.assign({}, remainingProps, { className: wrapperClasses }, { children: _jsxs("div", Object.assign({ className: 'input-group' }, { children: [icon && (_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) }))), _jsx("input", Object.assign({ type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput }, inputProps)), unit && (_jsx("div", Object.assign({ className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit' }, { children: unit }))), showOldValue && (_jsx("div", Object.assign({ className: oldValueClasses, "aria-label": 'previous value' }, { children: oldInputValue }))), _jsx("div", Object.assign({ className: 'input-group-btn' }, { children: _jsx(Button, Object.assign({ bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton }, { children: _jsx("span", { className: buttonIconClasses }) })) }))] })) })));
+    return (_jsx("div", { ...remainingProps, className: wrapperClasses, children: _jsxs("div", { className: 'input-group', children: [icon && (_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: `rioglyph ${icon}`, "aria-hidden": 'true', "aria-label": 'input icon' }) })), _jsx("input", { type: 'text', ref: inputRef, placeholder: placeholder, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, disabled: !editInput, ...inputProps }), unit && (_jsx("div", { className: 'position-absolute right-0 margin-right-50', "aria-label": 'unit', children: unit })), showOldValue && (_jsx("div", { className: oldValueClasses, "aria-label": 'previous value', children: oldInputValue })), _jsx("div", { className: 'input-group-btn', children: _jsx(Button, { bsStyle: buttonStyle, iconOnly: true, onClick: handleToggleInput, disabled: disableButton, children: _jsx("span", { className: buttonIconClasses }) }) })] }) }));
 };
 export default SaveableInput;

package/components/selects/BaseSelectDropdown.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
@@ -33,10 +33,10 @@ const BaseSelectDropdown = (props) => {
         if (dropdownMenuRef.current) {
             const parent = dropdownMenuRef.current.parentElement;
             if (dropDirection.dropup) {
-                parent === null || parent === void 0 ? void 0 : parent.classList.add('dropup');
+                parent?.classList.add('dropup');
             }
             else {
-                parent === null || parent === void 0 ? void 0 : parent.classList.remove('dropup');
+                parent?.classList.remove('dropup');
             }
         }
     }, [dropDirection, dropdownMenuRef]);
@@ -117,7 +117,7 @@ const BaseSelectDropdown = (props) => {
     };
     const getOptionNodes = () => {
         const node = dropdownMenuRef.current;
-        return (node === null || node === void 0 ? void 0 : node.getElementsByTagName('a')) || [];
+        return node?.getElementsByTagName('a') || [];
     };
     const updateItemDOMValues = () => {
         if (dropdownMenuRef.current) {
@@ -157,20 +157,20 @@ const BaseSelectDropdown = (props) => {
     if (isEmpty(options)) {
         return _jsx(NoItemMessage, { noItemMessage: noItemMessage, className: dropdownMenuClasses });
     }
-    return (_jsxs("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: [isLoading && (_jsx("div", Object.assign({ className: 'display-flex justify-content-center padding-10' }, { children: _jsx(Spinner, {}) }))), !isLoading &&
+    return (_jsxs("ul", { className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu', children: [isLoading && (_jsx("div", { className: 'display-flex justify-content-center padding-10', children: _jsx(Spinner, {}) })), !isLoading &&
                 options.map((option, index) => {
                     if (option.header) {
                         return _jsx(DropdownHeader, { icon: option.icon, label: option.label }, option.id);
                     }
                     // Show focused style only when keyboard is in use
-                    const anchorClassNames = classNames('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
+                    const anchorClassNames = classNames(keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none', 'display-flex align-items-center gap-3');
                     const wrapperClassNames = classNames(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
-                    return (_jsx("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: _jsxs("a", Object.assign({ role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
+                    return (_jsx("li", { className: wrapperClassNames, role: 'listitem', children: _jsxs("a", { role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
                             // Note, we need to assign the click callback only when it's not disabled
                             // otherwise the functions is still triggered
                             // biome-ignore lint/a11y/useValidAnchor: due to old structure + backwards compatibility
-                            onClick: option.disabled ? undefined : handleOptionChange }, { children: [_jsxs("span", { children: [option.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), _jsx("input", { type: 'hidden', value: option.id })] })) }), option.id));
-                })] })));
+                            onClick: option.disabled ? undefined : handleOptionChange, children: [_jsxs("span", { className: 'selected-option-dropdown-item', children: [option.icon && _jsx(_Fragment, { children: option.icon }), option.label] }), _jsx("input", { type: 'hidden', value: option.id })] }) }, option.id));
+                })] }));
 };
 export const filterOptions = (itemDOMValues, filterValue, options) => {
     const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));

package/components/selects/ClearButton.js

@@ -1,11 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import classNames from 'classnames';
 import isNil from 'lodash/fp/isNil';
 const ClearButton = (props) => {
     const { showClear, selectedItem, onClear } = props;
     const clearButtonClassNames = classNames('clearButton', (!showClear || isNil(selectedItem)) && 'hide pointer-events-none');
-    return (_jsx("span", Object.assign({ className: clearButtonClassNames, onClick: onClear }, { children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })));
+    return (_jsx("span", { className: clearButtonClassNames, onClick: onClear, children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) }));
 };
 export default ClearButton;

package/components/selects/DropdownHeader.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 const DropdownHeader = (props) => {
     const { icon, label, center = true, className = '' } = props;
-    return (_jsx("li", Object.assign({ className: `dropdown-header ${center ? 'center' : ''} ${className}` }, { children: _jsxs("span", Object.assign({ className: 'dropdown-header-text' }, { children: [icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: icon })), label] })) })));
+    return (_jsx("li", { className: `dropdown-header ${center ? 'center' : ''} ${className}`, children: _jsxs("span", { className: 'dropdown-header-text', children: [icon && _jsx("span", { className: 'margin-right-5', children: icon }), label] }) }));
 };
 export default DropdownHeader;

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;