@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/components/dropdown/DropdownSubmenu.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import classNames from 'classnames';
@@ -6,7 +5,7 @@ import { usePopper } from 'react-popper';
 import MenuItems from '../menuItems/MenuItems';
 import MenuItemList from '../menuItems/MenuItemList';
 const DropdownSubmenu = (props) => {
-    const { title = '', items = [], disabled = false, className } = props, remainingProps = __rest(props, ["title", "items", "disabled", "className"]);
+    const { title = '', items = [], disabled = false, className, ...remainingProps } = props;
     const classes = classNames('dropdown-submenu', disabled && 'disabled', className);
     const [refParentPopper, setRefParentPopper] = useState(null);
     const [refDropdownSubmenu, setRefDropdownSubmenu] = useState(null);
@@ -27,6 +26,6 @@ const DropdownSubmenu = (props) => {
         ],
     });
     // return a list item that is also automatically the new toggle for the submenu
-    return (_jsxs("li", Object.assign({ ref: setRefParentPopper }, remainingProps, { className: classes, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, { children: [_jsxs("a", Object.assign({ className: 'submenu-title', role: 'menuitem' }, { children: [_jsx("span", Object.assign({ className: 'submenu-title-text' }, { children: title })), _jsx("span", { className: 'rioglyph rioglyph-chevron-right' })] })), isHover && !disabled && (_jsx(MenuItemList, Object.assign({ ref: setRefDropdownSubmenu, style: styles.popper }, attributes.popper, { children: _jsx(MenuItems, { items: items }) })))] })));
+    return (_jsxs("li", { ref: setRefParentPopper, ...remainingProps, className: classes, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [_jsxs("a", { className: 'submenu-title', role: 'menuitem', children: [_jsx("span", { className: 'submenu-title-text', children: title }), _jsx("span", { className: 'rioglyph rioglyph-chevron-right' })] }), isHover && !disabled && (_jsx(MenuItemList, { ref: setRefDropdownSubmenu, style: styles.popper, ...attributes.popper, children: _jsx(MenuItems, { items: items }) }))] }));
 };
 export default DropdownSubmenu;

package/components/dropdown/DropdownToggleButton.js

@@ -1,13 +1,12 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 import Button from '../button/Button';
 import useMergeRefs from '../../hooks/useMergeRefs';
 const DropdownToggleButton = forwardRef((props, ref) => {
-    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children, outerRef } = props, remainingProps = __rest(props, ["id", "disabled", "bsSize", "bsStyle", "variant", "splitButton", "onClick", "className", "children", "outerRef"]);
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children, outerRef, ...remainingProps } = props;
     const toggleRef = useMergeRefs(outerRef, ref);
     const labelButtonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);
-    return (_jsx(Button, Object.assign({}, remainingProps, { id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses }, { children: children })));
+    return (_jsx(Button, { ...remainingProps, id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses, children: children }));
 });
 export default DropdownToggleButton;

package/components/dropdown/SimpleButtonDropdown.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import ButtonDropdown from './ButtonDropdown';
-const SimpleButtonDropdown = (props) => _jsx(ButtonDropdown, Object.assign({}, props, { noCaret: true }));
+const SimpleButtonDropdown = (props) => _jsx(ButtonDropdown, { ...props, noCaret: true });
 export default SimpleButtonDropdown;

package/components/dropdown/SingleButtonDropdown.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import ButtonDropdown from './ButtonDropdown';
-const SingleButtonDropdown = (props) => _jsx(ButtonDropdown, Object.assign({}, props));
+const SingleButtonDropdown = (props) => _jsx(ButtonDropdown, { ...props });
 export default SingleButtonDropdown;

package/components/dropdown/SplitButtonDropdown.js

@@ -1,6 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import ButtonDropdown from './ButtonDropdown';
-const SplitButtonDropdown = (props) => _jsx(ButtonDropdown, Object.assign({}, props, { splitButton: true }));
+const SplitButtonDropdown = (props) => _jsx(ButtonDropdown, { ...props, splitButton: true });
 export default SplitButtonDropdown;

package/components/dropdown/SplitCaretButton.js

@@ -1,12 +1,11 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import classNames from 'classnames';
 import Caret from './Caret';
 import Button from '../button/Button';
 const SplitCaretButton = forwardRef((props, ref) => {
-    const { disabled = false, bsStyle, bsSize, onClick, className } = props, remainingProps = __rest(props, ["disabled", "bsStyle", "bsSize", "onClick", "className"]);
+    const { disabled = false, bsStyle, bsSize, onClick, className, ...remainingProps } = props;
     const splitCaretButtonClasses = classNames('dropdown-toggle', className);
-    return (_jsx(Button, Object.assign({}, remainingProps, { type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, onClick: onClick, className: splitCaretButtonClasses }, { children: _jsx(Caret, {}) })));
+    return (_jsx(Button, { ...remainingProps, type: 'button', ref: ref, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, onClick: onClick, className: splitCaretButtonClasses, children: _jsx(Caret, {}) }));
 });
 export default SplitCaretButton;

package/components/editableContent/EditableContent.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useMemo } from 'react';
 import noop from 'lodash/fp/noop';
@@ -23,7 +22,7 @@ const POPOVER_OFFSET_TOP = -13;
 const POPOVER_OFFSET_LEFT = -18;
 const DEFAULT_TEXTAREA_ROWS = 1;
 const EditableContent = (props) => {
-    const { show = undefined, onSave = noop, onCancel = noop, onFocus = noop, onBlur = noop, onEditMode = noop, onSaveValidation = () => true, isValid = true, errorMessage, allowResize = false, inputRows = DEFAULT_TEXTAREA_ROWS, editorOffsetTop = 0, editorOffsetLeft = 0, customEditor, size = 'md', className = '', inputClassName = '', editorClassName = '', children } = props, remainingProps = __rest(props, ["show", "onSave", "onCancel", "onFocus", "onBlur", "onEditMode", "onSaveValidation", "isValid", "errorMessage", "allowResize", "inputRows", "editorOffsetTop", "editorOffsetLeft", "customEditor", "size", "className", "inputClassName", "editorClassName", "children"]);
+    const { show = undefined, onSave = noop, onCancel = noop, onFocus = noop, onBlur = noop, onEditMode = noop, onSaveValidation = () => true, isValid = true, errorMessage, allowResize = false, inputRows = DEFAULT_TEXTAREA_ROWS, editorOffsetTop = 0, editorOffsetLeft = 0, customEditor, size = 'md', className = '', inputClassName = '', editorClassName = '', children, ...remainingProps } = props;
     const [isEditMode, setIsEditMode] = useState(show);
     const [inputValue, setInputValue] = useState('');
     const [hasError, setHasError] = useState(!isValid);
@@ -37,10 +36,9 @@ const EditableContent = (props) => {
     // Input ref used to focus inside when entering edit mode
     const inputRef = useRef(null);
     useEffect(() => {
-        var _a, _b;
         if (inputRef.current && isEditMode) {
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.select();
+            inputRef.current?.focus();
+            inputRef.current?.select();
         }
     }, [isEditMode, inputRef.current]);
     const customModifier = useMemo(() => ({
@@ -68,9 +66,8 @@ const EditableContent = (props) => {
         onEditMode();
     };
     const enterEditMode = () => {
-        var _a, _b;
         setIsEditMode(true);
-        setInputValue((_b = (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.textContent) === null || _a === void 0 ? void 0 : _a.trimEnd()) !== null && _b !== void 0 ? _b : '');
+        setInputValue(referenceElement?.textContent?.trimEnd() ?? '');
         setHasError(false);
     };
     const handleInputChange = (event) => {
@@ -123,7 +120,7 @@ const EditableContent = (props) => {
         minWidth: '100px',
         resize: allowResize ? 'vertical' : 'none',
     };
-    return (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ ref: setReferenceElement, onClick: handleEditMode, className: textWrapperClasses }, { children: children })), isEditMode &&
-                createPortal(_jsxs("div", Object.assign({ className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper }, attributes.popper, remainingProps, { children: [_jsxs("div", Object.assign({ className: inputWrapperClasses }, { children: [hasCustomControl && customEditor, !hasCustomControl && (_jsx("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && _jsx("div", Object.assign({ className: 'help-block position-relative' }, { children: errorMessage }))] })), _jsxs("div", Object.assign({ className: 'display-flex gap-5' }, { children: [_jsx("button", Object.assign({ type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}`, "aria-label": 'EditableContent cancel button', "data-testid": 'EditableContentCancel' }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })), _jsx("button", Object.assign({ type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}`, "aria-label": 'EditableContent save button', "data-testid": 'EditableContentSave' }, { children: _jsx("span", { className: 'rioglyph rioglyph-ok' }) }))] }))] })), getOrCreatePortalRoot())] }));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { ref: setReferenceElement, onClick: handleEditMode, className: textWrapperClasses, children: children }), isEditMode &&
+                createPortal(_jsxs("div", { className: overlayWrapperClasses, onClick: event => event.stopPropagation(), ref: setPopperElement, style: styles.popper, ...attributes.popper, ...remainingProps, children: [_jsxs("div", { className: inputWrapperClasses, children: [hasCustomControl && customEditor, !hasCustomControl && (_jsx("textarea", { ref: inputRef, className: inputClasses, value: inputValue, onChange: handleInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: handleKeyDown, style: inputStyle, rows: inputRows })), hasError && _jsx("div", { className: 'help-block position-relative', children: errorMessage })] }), _jsxs("div", { className: 'display-flex gap-5', children: [_jsx("button", { type: 'button', onClick: handleCloseEditMode, className: `EditableContentCancel btn btn-default btn-icon-only btn-${size}`, "aria-label": 'EditableContent cancel button', "data-testid": 'EditableContentCancel', children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }), _jsx("button", { type: 'button', onClick: handleSaveChanges, className: `EditableContentSave btn btn-primary btn-icon-only btn-${size}`, "aria-label": 'EditableContent save button', "data-testid": 'EditableContentSave', children: _jsx("span", { className: 'rioglyph rioglyph-ok' }) })] })] }), getOrCreatePortalRoot())] }));
 };
 export default EditableContent;

package/components/expander/ExpanderList.js

@@ -40,19 +40,19 @@ const ExpanderList = (props) => {
         setListItems(updatedListItems);
     };
     const listClassNames = classNames('expander-list list-group', rounded && !hasRoundedClass(className) && 'rounded', bordered && !hasBorderClass(className) && 'border', className);
-    return (_jsx("ul", Object.assign({ className: listClassNames }, { children: listItems.map(item => {
+    return (_jsx("ul", { className: listClassNames, children: listItems.map(item => {
             const isOpen = item.open;
             const itemClassNames = classNames('list-group-item', item.className && item.className, item.body && 'expandable', isOpen && 'open');
-            return (_jsxs("li", Object.assign({ className: itemClassNames }, { children: [_jsx(ExpanderListItemHeader, { item: item, onToggle: handleToggleItem }), item.body && (_jsx(Collapse, Object.assign({ open: isOpen, unmountOnExit: unmountOnExit }, { children: _jsx("div", Object.assign({ className: 'expander-list-body-wrapper' }, { children: _jsx(ExpanderListItemBody, Object.assign({ className: item.bodyClassName }, { children: item.body })) })) })))] }), item.id));
-        }) })));
+            return (_jsxs("li", { className: itemClassNames, children: [_jsx(ExpanderListItemHeader, { item: item, onToggle: handleToggleItem }), item.body && (_jsx(Collapse, { open: isOpen, unmountOnExit: unmountOnExit, children: _jsx("div", { className: 'expander-list-body-wrapper', children: _jsx(ExpanderListItemBody, { className: item.bodyClassName, children: item.body }) }) }))] }, item.id));
+        }) }));
 };
 const ExpanderListItemHeader = ({ item, onToggle }) => {
     const headerClassNames = classNames('expander-list-header', item.headerClassName);
     const iconClassNames = classNames('expander-icon', 'rioglyph', 'rioglyph-chevron-down');
-    return (_jsxs("div", Object.assign({ className: headerClassNames, onClick: () => onToggle(item), "aria-label": 'expander item header' }, { children: [_jsx("span", Object.assign({ className: 'expander-list-header-content' }, { children: item.header })), item.body && _jsx("span", { className: iconClassNames })] })));
+    return (_jsxs("div", { className: headerClassNames, onClick: () => onToggle(item), "aria-label": 'expander item header', children: [_jsx("span", { className: 'expander-list-header-content', children: item.header }), item.body && _jsx("span", { className: iconClassNames })] }));
 };
 const ExpanderListItemBody = ({ className, children }) => {
     const bodyClassNames = classNames('expander-list-body', className);
-    return (_jsx("div", Object.assign({ className: bodyClassNames, "aria-label": 'expander item body' }, { children: children })));
+    return (_jsx("div", { className: bodyClassNames, "aria-label": 'expander item body', children: children }));
 };
 export default ExpanderList;

package/components/expander/ExpanderPanel.js

@@ -1,11 +1,10 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import noop from 'lodash/fp/noop';
 import classNames from 'classnames';
 import Collapse from '../collapse/Collapse';
 const ExpanderPanel = (props) => {
-    const { open = false, iconLeft = false, bsStyle = 'blank', title, headerClassName, titleClassName, bodyClassName, iconClassName, unmountOnExit = true, onEntered = noop, onExited = noop, onAnimationStart = noop, onToggle = noop, className, children } = props, remainingProps = __rest(props, ["open", "iconLeft", "bsStyle", "title", "headerClassName", "titleClassName", "bodyClassName", "iconClassName", "unmountOnExit", "onEntered", "onExited", "onAnimationStart", "onToggle", "className", "children"]);
+    const { open = false, iconLeft = false, bsStyle = 'blank', title, headerClassName, titleClassName, bodyClassName, iconClassName, unmountOnExit = true, onEntered = noop, onExited = noop, onAnimationStart = noop, onToggle = noop, className, children, ...remainingProps } = props;
     const [isOpen, setIsOpen] = useState(open);
     // Update internal state from external prop change
     const [previousOpen, setPreviousOpen] = useState(open);
@@ -24,6 +23,6 @@ const ExpanderPanel = (props) => {
     const titleClassNames = classNames('title', titleClassName && titleClassName);
     const bodyClassNames = classNames('panel-body', bodyClassName && bodyClassName);
     const isRenderCallback = children && typeof children === 'function';
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames, "aria-label": 'expander panel' }, { children: [_jsxs("div", Object.assign({ className: headerClassNames, onClick: handleToggle, "aria-label": 'panel heading' }, { children: [_jsx("span", Object.assign({ className: titleClassNames }, { children: title })), _jsx("span", { className: iconClassNames }), bsStyle === 'separator' && (_jsx("div", Object.assign({ className: 'separator' }, { children: _jsx("hr", {}) })))] })), _jsx(Collapse, Object.assign({ open: isOpen, unmountOnExit: unmountOnExit, onEntered: onEntered, onExited: onExited, onAnimationStart: () => onAnimationStart() }, { children: _jsx("div", { children: _jsx("div", Object.assign({ className: bodyClassNames }, { children: isRenderCallback ? children(isOpen) : children })) }) }))] })));
+    return (_jsxs("div", { ...remainingProps, className: wrapperClassNames, "aria-label": 'expander panel', children: [_jsxs("div", { className: headerClassNames, onClick: handleToggle, "aria-label": 'panel heading', children: [_jsx("span", { className: titleClassNames, children: title }), _jsx("span", { className: iconClassNames }), bsStyle === 'separator' && (_jsx("div", { className: 'separator', children: _jsx("hr", {}) }))] }), _jsx(Collapse, { open: isOpen, unmountOnExit: unmountOnExit, onEntered: onEntered, onExited: onExited, onAnimationStart: () => onAnimationStart(), children: _jsx("div", { children: _jsx("div", { className: bodyClassNames, children: isRenderCallback ? children(isOpen) : children }) }) })] }));
 };
 export default ExpanderPanel;

package/components/fade/Fade.js

@@ -79,10 +79,10 @@ const Fade = (props) => {
     // Disable initial animation on mount. After mount the initial animation step is needed to enable
     // the "fade-in" animation, otherwise it just appears
     const selectedInitial = allowInitialAnimation ? selectedAnimationProps.initial : false;
-    const animationProps = Object.assign(Object.assign({}, selectedAnimationProps), { initial: selectedInitial });
+    const animationProps = { ...selectedAnimationProps, initial: selectedInitial };
     return (
     // @ts-ignore-next-line
-    _jsx(AnimatePresence, Object.assign({ initial: allowInitialAnimation, exitBeforeEnter: exitBeforeEnter, onExitComplete: onExitComplete, custom: custom }, animatePresenceProps, { children: show && (_jsx(motion.div, Object.assign({ transition: { duration }, custom: custom }, animationProps, pageTransitionProps, motionProps, { children: children }), motionDivKey)) })));
+    _jsx(AnimatePresence, { initial: allowInitialAnimation, exitBeforeEnter: exitBeforeEnter, onExitComplete: onExitComplete, custom: custom, ...animatePresenceProps, children: show && (_jsx(motion.div, { transition: { duration }, custom: custom, ...animationProps, ...pageTransitionProps, ...motionProps, children: children }, motionDivKey)) }));
 };
 Fade.FADE = 'fade';
 Fade.FROM_LEFT = 'fromLeft';

package/components/fade/FadeExpander.js

@@ -30,12 +30,12 @@ const FadeExpander = (props) => {
     };
     return (
     // @ts-ignore
-    _jsx(AnimatePresence, Object.assign({ onExitComplete: () => setOverflow('hidden') }, { children: isVisible && (_jsx(motion.div, Object.assign({ initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
+    _jsx(AnimatePresence, { onExitComplete: () => setOverflow('hidden'), children: isVisible && (_jsx(motion.div, { initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: {
                 height: { duration, delay },
                 opacity: { duration, delay },
                 ease: 'easeIn',
             }, 
             // To ensures smooth height transition, the overflow should be "hidden" during the animation
-            style: { overflow }, onAnimationComplete: handleAnimationComplete, className: className }, { children: children }))) })));
+            style: { overflow }, onAnimationComplete: handleAnimationComplete, className: className, children: children })) }));
 };
 export default FadeExpander;

package/components/fade/FadeUp.js

@@ -1,10 +1,9 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { motion } from 'framer-motion';
 import useOnScreen from '../../hooks/useOnScreen';
 const FadeUp = (props) => {
-    const { delay = 0, duration = 0.4, className = '', offset = 15, children } = props, remainingProps = __rest(props, ["delay", "duration", "className", "offset", "children"]);
+    const { delay = 0, duration = 0.4, className = '', offset = 15, children, ...remainingProps } = props;
     const ref = useRef(null);
     const isInView = useOnScreen(ref);
     const [isVisible, setIsVisible] = useState(false);
@@ -23,6 +22,6 @@ const FadeUp = (props) => {
             setIsVisible(true);
         }
     }, [isInView, isVisible]);
-    return (_jsx(motion.div, Object.assign({ ref: ref, variants: variants, initial: 'hidden', animate: isVisible ? 'visible' : 'hidden', transition: { delay, type: 'spring', duration } }, remainingProps, { className: className }, { children: children })));
+    return (_jsx(motion.div, { ref: ref, variants: variants, initial: 'hidden', animate: isVisible ? 'visible' : 'hidden', transition: { delay, type: 'spring', duration }, ...remainingProps, className: className, children: children }));
 };
 export default FadeUp;

package/components/feedback/FeedbackInlineButtons.js

@@ -1,9 +1,6 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 const FeedbackInlineButtons = (props) => {
-    const { buttons = [], headline } = props, remainingProps = __rest(props, ["buttons", "headline"]);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: 'display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none' }, { children: [headline && _jsx("div", Object.assign({ className: 'text-color-dark' }, { children: headline })), _jsx("div", Object.assign({ className: 'btn-toolbar gap-5' }, { children: buttons.map(button => button) }))] })));
+    const { buttons = [], headline, ...remainingProps } = props;
+    return (_jsxs("div", { ...remainingProps, className: 'display-flex flex-wrap align-items-center column-gap-15 row-gap-5 user-select-none', children: [headline && _jsx("div", { className: 'text-color-dark', children: headline }), _jsx("div", { className: 'btn-toolbar gap-5', children: buttons.map(button => button) })] }));
 };
 export default FeedbackInlineButtons;

package/components/feedback/FeedbackRating.js

@@ -1,11 +1,10 @@
-import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import classNames from 'classnames';
 import ToggleButton from '../button/ToggleButton';
 const FeedbackRating = (props) => {
-    const { headline, count = 1, circleButtons = false, buttonLabels, buttonStyles, buttonClassName = '', leftLabel, rightLabel, leadingIcon, trailingIcon, onRatingChanged = () => { } } = props, remainingProps = __rest(props, ["headline", "count", "circleButtons", "buttonLabels", "buttonStyles", "buttonClassName", "leftLabel", "rightLabel", "leadingIcon", "trailingIcon", "onRatingChanged"]);
+    const { headline, count = 1, circleButtons = false, buttonLabels, buttonStyles, buttonClassName = '', leftLabel, rightLabel, leadingIcon, trailingIcon, onRatingChanged = () => { }, ...remainingProps } = props;
     const [rating, setRating] = useState();
     const handleRating = (value) => {
         setRating(value);
@@ -14,10 +13,9 @@ const FeedbackRating = (props) => {
     const hasSubLabels = !!leftLabel || !!rightLabel;
     const buttonWrapperClasses = classNames('display-flex gap-10', hasSubLabels ? 'align-items-start' : 'align-items-center', 'text-size-14', 'margin-bottom-25');
     const leadingTrailingIconClasses = classNames('display-flex align-items-center', 'text-size-200pct', hasSubLabels && 'padding-top-3');
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: 'FeedbackRating' }, { children: [headline && _jsx("div", Object.assign({ className: 'text-medium text-size-16 margin-bottom-10' }, { children: headline })), _jsxs("div", Object.assign({ className: buttonWrapperClasses }, { children: [leadingIcon && _jsx("div", Object.assign({ className: leadingTrailingIconClasses }, { children: leadingIcon })), _jsxs("div", { children: [_jsx("div", Object.assign({ className: 'display-flex flex-wrap gap-10' }, { children: Array.from({ length: count }, (_, index) => {
-                                    var _a, _b;
+    return (_jsxs("div", { ...remainingProps, className: 'FeedbackRating', children: [headline && _jsx("div", { className: 'text-medium text-size-16 margin-bottom-10', children: headline }), _jsxs("div", { className: buttonWrapperClasses, children: [leadingIcon && _jsx("div", { className: leadingTrailingIconClasses, children: leadingIcon }), _jsxs("div", { children: [_jsx("div", { className: 'display-flex flex-wrap gap-10', children: Array.from({ length: count }, (_, index) => {
                                     const indexNumber = index + 1;
-                                    return (_createElement(ToggleButton, Object.assign({}, buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles[index], { key: indexNumber, active: rating === indexNumber, onClick: (toggled) => handleRating(toggled ? indexNumber : undefined), className: `${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${(_a = buttonStyles === null || buttonStyles === void 0 ? void 0 : buttonStyles[index].className) !== null && _a !== void 0 ? _a : ''}` }), (_b = buttonLabels === null || buttonLabels === void 0 ? void 0 : buttonLabels[index]) !== null && _b !== void 0 ? _b : indexNumber));
-                                }) })), hasSubLabels && (_jsxs("div", Object.assign({ className: 'display-flex justify-content-between margin-top-5 gap-25' }, { children: [leftLabel ? _jsx("label", Object.assign({ className: 'word-wrap text-color-dark' }, { children: leftLabel })) : _jsx("div", {}), rightLabel ? _jsx("label", Object.assign({ className: 'word-wrap text-color-dark' }, { children: rightLabel })) : _jsx("div", {})] })))] }), trailingIcon && _jsx("div", Object.assign({ className: leadingTrailingIconClasses }, { children: trailingIcon }))] }))] })));
+                                    return (_createElement(ToggleButton, { ...buttonStyles?.[index], key: indexNumber, active: rating === indexNumber, onClick: (toggled) => handleRating(toggled ? indexNumber : undefined), className: `${circleButtons ? 'rounded-circle aspect-ratio-1' : ''} ${buttonClassName} ${buttonStyles?.[index].className ?? ''}` }, buttonLabels?.[index] ?? indexNumber));
+                                }) }), hasSubLabels && (_jsxs("div", { className: 'display-flex justify-content-between margin-top-5 gap-25', children: [leftLabel ? _jsx("label", { className: 'word-wrap text-color-dark', children: leftLabel }) : _jsx("div", {}), rightLabel ? _jsx("label", { className: 'word-wrap text-color-dark', children: rightLabel }) : _jsx("div", {})] }))] }), trailingIcon && _jsx("div", { className: leadingTrailingIconClasses, children: trailingIcon })] })] }));
 };
 export default FeedbackRating;

package/components/feedback/FeedbackReactions.js

@@ -1,14 +1,13 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from 'react';
 import classNames from 'classnames';
 import { motion } from 'framer-motion';
 import useHover from '../../hooks/useHover';
 const FeedbackReactions = (props) => {
-    const { headline, animated, labelUp, labelDown, labelPosition = 'bottom', size = 'md', colorFillUp = '', colorFillDown = '', colorHoverUp = 'primary', colorHoverDown = 'primary', onVoteUp = () => { }, onVoteDown = () => { }, itemClassName } = props, remainingProps = __rest(props, ["headline", "animated", "labelUp", "labelDown", "labelPosition", "size", "colorFillUp", "colorFillDown", "colorHoverUp", "colorHoverDown", "onVoteUp", "onVoteDown", "itemClassName"]);
+    const { headline, animated, labelUp, labelDown, labelPosition = 'bottom', size = 'md', colorFillUp = '', colorFillDown = '', colorHoverUp = 'primary', colorHoverDown = 'primary', onVoteUp = () => { }, onVoteDown = () => { }, itemClassName, ...remainingProps } = props;
     const hasLabels = !!labelUp || !!labelDown;
     const wrapperClassName = classNames(hasLabels ? 'display-grid grid-cols-2' : 'display-flex', 'gap-15', 'padding-top-5', 'user-select-none');
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassName }, { children: [_jsx(FeedbackItem, { size: size, fillColor: colorFillDown, hoverColor: colorHoverDown, animated: animated, iconName: 'thumbs-down', text: labelDown, labelPosition: labelPosition, onClick: onVoteDown, className: itemClassName }), _jsx(FeedbackItem, { size: size, fillColor: colorFillUp, hoverColor: colorHoverUp, animated: animated, iconName: 'thumbs-up', text: labelUp, labelPosition: labelPosition, onClick: onVoteUp, className: itemClassName })] })));
+    return (_jsxs("div", { ...remainingProps, className: wrapperClassName, children: [_jsx(FeedbackItem, { size: size, fillColor: colorFillDown, hoverColor: colorHoverDown, animated: animated, iconName: 'thumbs-down', text: labelDown, labelPosition: labelPosition, onClick: onVoteDown, className: itemClassName }), _jsx(FeedbackItem, { size: size, fillColor: colorFillUp, hoverColor: colorHoverUp, animated: animated, iconName: 'thumbs-up', text: labelUp, labelPosition: labelPosition, onClick: onVoteUp, className: itemClassName })] }));
 };
 const FeedbackItem = (props) => {
     const { size, text, iconName, onClick, fillColor, hoverColor, animated = false, labelPosition = 'bottom', className, } = props;
@@ -17,10 +16,10 @@ const FeedbackItem = (props) => {
     const iconClasses = classNames(size === 'sm' ? 'width-40' : 'width-50', 'aspect-ratio-1', 'border rounded-circle', fillColor ? `bg-${fillColor} text-color-white` : 'bg-lightest', isHover ? `border-color-${hoverColor} text-color-${hoverColor}` : 'border-color-lightest', 'display-grid place-items-center', 'text-size-14');
     const wrapperClassName = classNames('display-flex', 'gap-10', labelPosition === 'bottom' ? 'flex-column' : '', 'align-items-center', 'text-center', 'cursor-pointer', className);
     const isUp = iconName.includes('up');
-    return (_jsxs("div", Object.assign({ ref: ref, className: wrapperClassName, onClick: onClick }, { children: [_jsx("div", Object.assign({ className: iconClasses }, { children: _jsx(motion.span, { initial: { y: 0, rotate: 0 }, animate: animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }, transition: {
+    return (_jsxs("div", { ref: ref, className: wrapperClassName, onClick: onClick, children: [_jsx("div", { className: iconClasses, children: _jsx(motion.span, { initial: { y: 0, rotate: 0 }, animate: animated && isHover ? { y: [0, isUp ? -3 : 3, 0], rotate: [0, isUp ? -10 : 10, 0] } : { y: 0 }, transition: {
                         duration: 0.6,
                         repeat: isHover ? Number.POSITIVE_INFINITY : 0,
                         repeatType: 'loop',
-                    }, className: `rioglyph rioglyph-${iconName} text-size-200pct` }) })), _jsx("div", Object.assign({ className: `text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}` }, { children: text }))] })));
+                    }, className: `rioglyph rioglyph-${iconName} text-size-200pct` }) }), _jsx("div", { className: `text-wrap-balance line-height-125rel text-medium ${isHover ? `text-color-${hoverColor}` : 'text-color-darker'}`, children: text })] }));
 };
 export default FeedbackReactions;

package/components/filepicker/FilePicker.js

@@ -1,11 +1,10 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useRef } from 'react';
 import Dropzone from 'react-dropzone';
 import noop from 'lodash/noop';
 import Button from '../button/Button';
 const FilePicker = (props) => {
-    const { displayMode = 'button', multiple = true, label = 'Select files', maxSize, onPick = noop, className = '', accept, children } = props, remainingProps = __rest(props, ["displayMode", "multiple", "label", "maxSize", "onPick", "className", "accept", "children"]);
+    const { displayMode = 'button', multiple = true, label = 'Select files', maxSize, onPick = noop, className = '', accept, children, ...remainingProps } = props;
     const dropzoneRef = useRef(null);
     const isFull = displayMode === 'full';
     const showButton = isFull || displayMode === 'button';
@@ -17,10 +16,10 @@ const FilePicker = (props) => {
             : acceptedFiles;
         onPick(files, rejectedFiles);
     }, [onPick, accept]);
-    const handleClick = () => { var _a; return (_a = dropzoneRef.current) === null || _a === void 0 ? void 0 : _a.open(); };
-    return (_jsxs("div", Object.assign({ className: 'FilePicker' }, { children: [showButton && (_jsx(Button, Object.assign({ onClick: handleClick, className: className }, { children: label }))), _jsx(Dropzone, Object.assign({}, remainingProps, { onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef }, { children: ({ getRootProps, getInputProps, isDragActive }) => {
-                    return (_jsxs("div", Object.assign({}, getRootProps(), { children: [_jsx("input", Object.assign({}, getInputProps())), showDropzone && children && children({ isDragActive })] })));
-                } }))] })));
+    const handleClick = () => dropzoneRef.current?.open();
+    return (_jsxs("div", { className: 'FilePicker', children: [showButton && (_jsx(Button, { onClick: handleClick, className: className, children: label })), _jsx(Dropzone, { ...remainingProps, onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef, children: ({ getRootProps, getInputProps, isDragActive }) => {
+                    return (_jsxs("div", { ...getRootProps(), children: [_jsx("input", { ...getInputProps() }), showDropzone && children && children({ isDragActive })] }));
+                } })] }));
 };
 FilePicker.DISPLAY_MODE_BUTTON = 'button';
 FilePicker.DISPLAY_MODE_DROPZONE = 'dropzone';

package/components/formLabel/FormLabel.d.ts

@@ -0,0 +1,13 @@
+import { type PropsWithChildren, type ComponentProps } from 'react';
+export type FormLabelProps = ComponentProps<'label'> & {
+    /**
+     * Additional supporting text displayed next to the label.
+     */
+    supportingText?: string;
+    /**
+     * Additional classes set to the outer element.
+     */
+    className?: string;
+};
+declare const FormLabel: (props: PropsWithChildren<FormLabelProps>) => import("react/jsx-runtime").JSX.Element;
+export default FormLabel;

package/components/formLabel/FormLabel.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+const FormLabel = (props) => {
+    const { className = '', children, supportingText, ...remainingProps } = props;
+    const isLabel = 'htmlFor' in remainingProps;
+    if (isLabel) {
+        const labelClasses = classNames('display-inline-flex flex-wrap justify-content-between width-100pct', className);
+        return (
+        // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
+        _jsxs("label", { ...remainingProps, className: labelClasses, children: [_jsx("span", { children: children }), supportingText && _jsx("span", { className: 'text-italic text-size-12 text-color-gray', children: supportingText })] }));
+    }
+    const classes = classNames('text-size-12 text-color-dark', 'max-width-100pct', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
+    return (
+    // @ts-ignore
+    _jsxs("div", { ...remainingProps, className: classes, children: [children, supportingText && _jsx("span", { className: 'text-italic text-size-12 text-color-gray', children: supportingText })] }));
+};
+export default FormLabel;

package/components/formLabel/LabeledElement.d.ts

@@ -0,0 +1,28 @@
+import React, { type PropsWithChildren } from 'react';
+import { type FormLabelProps } from './FormLabel';
+export type LabeledElementProps = {
+    /**
+     * The text to display for the label.
+     */
+    label: string | React.ReactElement;
+    /**
+     * Optional ID of the element associated with the label.
+     */
+    htmlFor?: string;
+    /**
+     * Additional props for the FormLabel, excluding children and htmlFor.
+     */
+    labelProps?: Omit<FormLabelProps, 'children'>;
+    /**
+     * If true, removes the bottom margin from the label.
+     *
+     * @default false
+     */
+    noGap?: boolean;
+    /**
+     * Additional classes for styling the wrapper.
+     */
+    className?: string;
+};
+declare const LabeledElement: (props: PropsWithChildren<LabeledElementProps>) => import("react/jsx-runtime").JSX.Element;
+export default LabeledElement;

package/components/formLabel/LabeledElement.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import FormLabel from './FormLabel';
+const LabeledElement = (props) => {
+    const { label, htmlFor, labelProps = {}, noGap = false, className = '', children, ...remainingProps } = props;
+    // Extract and handle the `className` prop separately for the label
+    const { className: labelClassName, ...otherLabelProps } = labelProps;
+    const combinedLabelClassName = classNames(labelClassName, noGap && 'margin-bottom-0');
+    return (_jsxs("div", { ...remainingProps, className: classNames('LabeledElement display-flex flex-column', className), children: [_jsx(FormLabel, { htmlFor: htmlFor, ...otherLabelProps, className: combinedLabelClassName, children: label }), children] }));
+};
+export default LabeledElement;

package/components/groupedItemList/GroupedItemList.js

@@ -35,7 +35,7 @@ const GroupedItemList = (props) => {
     // };
     const getGroupKey = typeof groupBy === 'function'
         ? groupBy
-        : (item) => { var _a, _b, _c; return (_c = (_b = (_a = item[groupBy]) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()) !== null && _c !== void 0 ? _c : ''; };
+        : (item) => item[groupBy]?.[0]?.toUpperCase() ?? '';
     // Group items by the specified property
     // const allGroups = useMemo(
     //     () =>
@@ -69,9 +69,6 @@ const GroupedItemList = (props) => {
     const ListElement = listElement;
     // Sort groups using the provided sort function
     const sortedGroups = useMemo(() => groupSortFn(groupedItems), [groupedItems, groupSortFn]);
-    return (_jsx("div", Object.assign({ className: `grouped-item-list ${className !== null && className !== void 0 ? className : ''}` }, { children: sortedGroups.map(group => (_jsxs(React.Fragment, { children: [_jsx("div", Object.assign({ className: `group-divider ${dividerElementClassName !== null && dividerElementClassName !== void 0 ? dividerElementClassName : ''}` }, { children: renderDivider ? renderDivider(group.groupKey) : group.groupKey })), _jsx(ListElement, Object.assign({ className: listElementClassName }, { children: itemSortFn(group.items).map(item => {
-                        var _a;
-                        return renderItem ? (renderItem(item)) : (_jsx(React.Fragment, { children: _jsx("div", Object.assign({ className: 'item-name' }, { children: item.name })) }, (_a = item.id) !== null && _a !== void 0 ? _a : crypto.randomUUID()));
-                    }) }))] }, group.groupKey))) })));
+    return (_jsx("div", { className: `grouped-item-list ${className ?? ''}`, children: sortedGroups.map(group => (_jsxs(React.Fragment, { children: [_jsx("div", { className: `group-divider ${dividerElementClassName ?? ''}`, children: renderDivider ? renderDivider(group.groupKey) : group.groupKey }), _jsx(ListElement, { className: listElementClassName, children: itemSortFn(group.items).map(item => renderItem ? (renderItem(item)) : (_jsx(React.Fragment, { children: _jsx("div", { className: 'item-name', children: item.name }) }, item.id ?? crypto.randomUUID()))) })] }, group.groupKey))) }));
 };
 export default GroupedItemList;

package/components/licensePlate/LicensePlate.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
-const euStars = (_jsx("svg", Object.assign({ xmlns: 'http://www.w3.org/2000/svg', width: '10', height: '10' }, { children: _jsx("path", { fill: '#FFC200', fillRule: 'nonzero', d: 'M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z' }) })));
+const euStars = (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: '10', height: '10', children: _jsx("path", { fill: '#FFC200', fillRule: 'nonzero', d: 'M5.143.439H5.6L5.23.71l.141.438L5 .88l-.371.27.14-.438L4.4.439h.459L5 0zm2.198.594h.458l-.37.272.141.44-.371-.271-.372.27.142-.439-.372-.271h.46l.142-.44zm1.607 1.625h.458l-.37.272.141.44-.371-.271-.372.27.142-.438-.371-.272.459-.001.142-.438zm.593 2.208H10l-.37.272.14.44-.37-.272-.372.271.14-.438-.37-.272.46-.001.141-.438zm-.59 2.214h.459l-.37.271.14.44-.37-.271-.372.271.141-.439-.371-.271.46-.001.141-.439zM7.337 8.701h.459l-.371.272.141.44-.371-.27-.371.27.14-.44-.37-.27.459-.002.142-.438zm-2.201.588h.458l-.37.272.141.439-.371-.27-.372.27.142-.439-.372-.271.46-.001.142-.438zM2.938 8.7h.458l-.37.273.141.439-.371-.27-.372.27.141-.44-.37-.27h.459l.142-.44zM1.33 7.083h.458l-.37.272.14.44-.371-.271-.372.27.142-.439-.37-.271h.458l.143-.44zM.743 4.869H1.2l-.37.272.141.439-.371-.27-.372.27.142-.439L0 4.87l.459-.001L.6 4.43zm.581-2.217h.459l-.37.272.14.439-.37-.27-.372.27.14-.439-.37-.271h.459l.142-.44zM2.94 1.03h.459l-.37.272.14.44-.37-.272-.372.271.14-.439-.37-.271.458-.001.143-.439z' }) }));
 const LicensePlate = (props) => {
     const { countryCode, hideStars, className = '', children } = props;
     let letterCount = '';
-    if ((countryCode === null || countryCode === void 0 ? void 0 : countryCode.length) === 2)
+    if (countryCode?.length === 2)
         letterCount = 'two-letters';
-    if ((countryCode === null || countryCode === void 0 ? void 0 : countryCode.length) === 3)
+    if (countryCode?.length === 3)
         letterCount = 'three-letters';
-    return (_jsx("div", Object.assign({ className: `license-plate ${className}` }, { children: _jsxs("div", Object.assign({ className: 'plate-content' }, { children: [countryCode && (_jsxs("div", Object.assign({ className: 'plate-country' }, { children: [!hideStars && _jsx("span", Object.assign({ className: 'stars' }, { children: euStars })), _jsx("span", Object.assign({ className: `plate-country-code ${letterCount}` }, { children: countryCode }))] }))), _jsx("div", Object.assign({ className: 'plate-number' }, { children: children }))] })) })));
+    return (_jsx("div", { className: `license-plate ${className}`, children: _jsxs("div", { className: 'plate-content', children: [countryCode && (_jsxs("div", { className: 'plate-country', children: [!hideStars && _jsx("span", { className: 'stars', children: euStars }), _jsx("span", { className: `plate-country-code ${letterCount}`, children: countryCode })] })), _jsx("div", { className: 'plate-number', children: children })] }) }));
 };
 export default LicensePlate;

package/components/listMenu/ListMenu.d.ts

@@ -1,5 +1,6 @@
 import React, { type ReactNode } from 'react';
 import { type ListMenuNavItem, type ListMenuItem } from './ListMenuGroup';
+export type { ListMenuNavItem, ListMenuItem } from './ListMenuGroup';
 export type ListMenuProps<T extends ListMenuNavItem> = {
     /**
      * List of menu item groups to be shown.

package/components/listMenu/ListMenu.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useRef, useState } from 'react';
 import isEmpty from 'lodash/fp/isEmpty';
@@ -13,10 +12,13 @@ import useWindowResize from '../../hooks/useWindowResize';
 import useKey from '../../hooks/useKey';
 const RESIZE_THROTTLING = 10;
 const MOBILE_MAX_WIDTH = 580;
-const filterMenuItems = (items, value, filterKey) => items.map(item => (Object.assign(Object.assign({}, item), { navItems: item.navItems.filter(navItem => navItem[filterKey].toLowerCase().includes(value.toLowerCase())) })));
+const filterMenuItems = (items, value, filterKey) => items.map(item => ({
+    ...item,
+    navItems: item.navItems.filter(navItem => navItem[filterKey].toLowerCase().includes(value.toLowerCase())),
+}));
 const hasMenuItems = (items) => items.find(({ navItems }) => !isEmpty(navItems));
 const ListMenu = (props) => {
-    const { menuItems, focusFilter = false, enableFilter = false, filterPlaceholder, onFilterChange = () => { }, notFoundMessage, className = '', groupClassName = '', responsive = true, autoClose = true, filterKey = 'key', trailingInputAddon } = props, remainingProps = __rest(props, ["menuItems", "focusFilter", "enableFilter", "filterPlaceholder", "onFilterChange", "notFoundMessage", "className", "groupClassName", "responsive", "autoClose", "filterKey", "trailingInputAddon"]);
+    const { menuItems, focusFilter = false, enableFilter = false, filterPlaceholder, onFilterChange = () => { }, notFoundMessage, className = '', groupClassName = '', responsive = true, autoClose = true, filterKey = 'key', trailingInputAddon, ...remainingProps } = props;
     const [filterValue, setFilterValue] = useState('');
     const [isMobileMode, setIsMobileMode] = useState(false);
     const [isExpanderOpen, setIsExpanderOpen] = useState(false);
@@ -26,7 +28,7 @@ const ListMenu = (props) => {
     const buildMobileHeader = () => {
         if (responsive && listRef.current) {
             const [activeElement] = listRef.current.getElementsByClassName('active');
-            setMobileHeader(_jsxs("div", Object.assign({ className: 'display-flex align-items-center' }, { children: [_jsx("span", { className: 'rioglyph rioglyph-menu-hamburger margin-right-10' }), _jsx("span", { children: activeElement === null || activeElement === void 0 ? void 0 : activeElement.innerText })] })));
+            setMobileHeader(_jsxs("div", { className: 'display-flex align-items-center', children: [_jsx("span", { className: 'rioglyph rioglyph-menu-hamburger margin-right-10' }), _jsx("span", { children: activeElement?.innerText })] }));
         }
     };
     // clear filter input on esc
@@ -42,8 +44,7 @@ const ListMenu = (props) => {
     });
     useWindowResize(handleResize);
     const focusInput = () => {
-        var _a;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        inputRef.current?.focus();
     };
     useKey((event) => {
         if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
@@ -63,16 +64,15 @@ const ListMenu = (props) => {
     };
     const filteredMenuItems = filterMenuItems(menuItems, filterValue, filterKey);
     const handleExpanderBodyClick = (event) => {
-        var _a;
-        const isListItem = ((_a = event.target.parentElement) === null || _a === void 0 ? void 0 : _a.tagName.toLowerCase()) === 'li';
+        const isListItem = event.target.parentElement?.tagName.toLowerCase() === 'li';
         if (autoClose && isListItem) {
             setIsExpanderOpen(false);
         }
     };
-    const formClassNames = classNames('form-group', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0');
-    const listMenu = (_jsxs("div", Object.assign({}, remainingProps, { className: `ListMenu ${className}`, ref: listRef }, { children: [enableFilter && (_jsx("div", Object.assign({ className: formClassNames }, { children: _jsxs("div", Object.assign({ className: 'input-group width-100pct' }, { children: [_jsx("span", Object.assign({ className: 'input-group-addon' }, { children: _jsx("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) })), _jsx(ClearableInput, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear }), trailingInputAddon && trailingInputAddon] })) }))), !hasMenuItems(filteredMenuItems) && (_jsx("div", Object.assign({ className: 'padding-top-25 text-center text-color-gray' }, { children: notFoundMessage }))), filteredMenuItems.map(menuGroup => (_jsx(ListMenuGroup, { className: groupClassName, menuGroup: menuGroup }, crypto.randomUUID())))] })));
+    const formClassNames = classNames('form-group', 'margin-bottom-5', 'padding-left-15', 'padding-right-15', 'padding-bottom-15', 'position-sticky', 'top-0', 'z-index-1');
+    const listMenu = (_jsxs("div", { ...remainingProps, className: `ListMenu ${className} ${filterValue ? 'filtered' : ''}`, ref: listRef, children: [enableFilter && (_jsx("div", { className: formClassNames, children: _jsxs("div", { className: 'input-group width-100pct', children: [_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-search', "aria-hidden": 'true' }) }), _jsx(ClearableInput, { value: filterValue, inputRef: inputRef, placeholder: filterPlaceholder, onChange: handleFilterChange, onClear: handleClear }), trailingInputAddon && trailingInputAddon] }) })), !hasMenuItems(filteredMenuItems) && (_jsx("div", { className: 'padding-top-25 text-center text-color-gray', children: notFoundMessage })), filteredMenuItems.map(menuGroup => (_jsx(ListMenuGroup, { className: groupClassName, menuGroup: menuGroup }, crypto.randomUUID())))] }));
     if (responsive && isMobileMode) {
-        return (_jsx(ExpanderPanel, Object.assign({ title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), unmountOnExit: false, className: 'shadow-default' }, { children: _jsx("div", Object.assign({ onClick: handleExpanderBodyClick }, { children: listMenu })) })));
+        return (_jsx(ExpanderPanel, { title: mobileHeader, bsStyle: 'default', open: isExpanderOpen, onToggle: () => setIsExpanderOpen(!isExpanderOpen), unmountOnExit: false, className: 'shadow-default', children: _jsx("div", { onClick: handleExpanderBodyClick, children: listMenu }) }));
     }
     return listMenu;
 };

package/components/listMenu/ListMenuGroup.d.ts

@@ -39,6 +39,23 @@ export type ListMenuItem<T extends ListMenuNavItem = ListMenuNavItem> = {
      * case, the `group` prop can be omitted.
      */
     groupNavItem?: string | ReactNode;
+    /**
+     * The optional badge displayed alongside the group or nav items.
+     *
+     * This can be text or a React node for additional flexibility.
+     */
+    badge?: string | ReactNode;
+    /**
+     * The type of badge to display.
+     *
+     * Determines the visual style of the badge. Available types include:
+     * - `muted`: A subdued badge style.
+     * - `success`: Indicates a successful state.
+     * - `info`: Represents informational content.
+     * - `warning`: Warns of potential issues.
+     * - `danger`: Highlights a critical state.
+     */
+    badgeType?: 'muted' | 'success' | 'info' | 'warning' | 'danger';
     /**
      * The list of all menu items of a group.
      */