@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/components/overlay/OverlayTrigger.js

@@ -10,7 +10,6 @@ import { useClickOutsideWithRef } from '../../hooks/useClickOutside';
 import { useChainedTimeout } from '../../hooks/useTimeout';
 import { useUncontrolledProp } from '../../hooks/useUncontrollable';
 const OverlayTrigger = (props) => {
-    var _a, _b;
     const { show: propsShow, defaultShow = false, enablePortal = true, trigger = TRIGGER.HOVER, delay, overlay, placement = 'top', popperConfig, onToggle = () => { }, rootClose = true, children, } = props;
     // Use a hook to handle controlled props that work in pairs like in this case the "show"  and "onToggle"
     // props. It returns a setter function that automatically triggers the callback.
@@ -33,7 +32,7 @@ const OverlayTrigger = (props) => {
     const handleShow = () => {
         timeout.clear();
         hoverStateRef.current = 'show';
-        if (typeof delay === 'number' || !(delay === null || delay === void 0 ? void 0 : delay.show)) {
+        if (typeof delay === 'number' || !delay?.show) {
             setShow(true);
             return;
         }
@@ -41,12 +40,12 @@ const OverlayTrigger = (props) => {
             if (hoverStateRef.current === 'show') {
                 setShow(true);
             }
-        }, typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay.show);
+        }, typeof delay === 'number' ? delay : delay?.show);
     };
     const handleHide = () => {
         timeout.clear();
         hoverStateRef.current = 'hide';
-        if (typeof delay === 'number' || !(delay === null || delay === void 0 ? void 0 : delay.hide)) {
+        if (typeof delay === 'number' || !delay?.hide) {
             setShow(false);
             return;
         }
@@ -54,19 +53,19 @@ const OverlayTrigger = (props) => {
             if (hoverStateRef.current === 'hide') {
                 setShow(false);
             }
-        }, typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay.hide);
+        }, typeof delay === 'number' ? delay : delay?.hide);
     };
     const handleFocus = useCallback((...args) => {
         handleShow();
-        onFocus === null || onFocus === void 0 ? void 0 : onFocus(...args);
+        onFocus?.(...args);
     }, [handleShow, onFocus]);
     const handleBlur = useCallback((...args) => {
         handleHide();
-        onBlur === null || onBlur === void 0 ? void 0 : onBlur(...args);
+        onBlur?.(...args);
     }, [handleHide, onBlur]);
     const handleClick = useCallback((...args) => {
         setShow(!show);
-        onClick === null || onClick === void 0 ? void 0 : onClick(...args);
+        onClick?.(...args);
     }, [onClick, setShow, show]);
     const handleMouseOver = useCallback((...args) => {
         handleMouseOverOut(handleShow, args, 'fromElement');
@@ -79,8 +78,8 @@ const OverlayTrigger = (props) => {
     const [arrowElement, setArrowElement] = useState(null);
     const [arrowPlacement, setArrowPlacement] = useState(placement);
     const handleClickOutside = useCallback((event) => {
-        const isToggleTarget = triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.contains(event.target);
-        const isOverlayTarget = popperElement === null || popperElement === void 0 ? void 0 : popperElement.contains(event.target);
+        const isToggleTarget = triggerNode?.contains(event.target);
+        const isOverlayTarget = popperElement?.contains(event.target);
         // Check if the click occurred outside the trigger element. Clicking on the trigger
         // itself is handled by the onClick handler
         if (show && rootClose && !isToggleTarget && !isOverlayTarget) {
@@ -123,11 +122,17 @@ const OverlayTrigger = (props) => {
         popperConfig.placement = placement;
         // if it has an arrow modifier, inject the arrow element
         const updatedModifiers = [];
-        (_a = popperConfig.modifiers) === null || _a === void 0 ? void 0 : _a.forEach((mod) => {
+        popperConfig.modifiers?.forEach((mod) => {
             if (mod.name !== 'arrow') {
                 return updatedModifiers.push(mod);
             }
-            return updatedModifiers.push(Object.assign(Object.assign({}, mod), { options: Object.assign(Object.assign({}, mod.options), { element: arrowElement }) }));
+            return updatedModifiers.push({
+                ...mod,
+                options: {
+                    ...mod.options,
+                    element: arrowElement,
+                },
+            });
         });
         popperConfig.modifiers = updatedModifiers;
     }
@@ -139,8 +144,18 @@ const OverlayTrigger = (props) => {
             // Adjust arrow styles based on placement if necessary
             setArrowPlacement(popper.state.placement);
         }
-    }, [(_b = popper.state) === null || _b === void 0 ? void 0 : _b.placement]);
-    const overlayElement = React.cloneElement(overlay, Object.assign(Object.assign({}, popper.attributes.popper), { ref: setPopperElement, placement: arrowPlacement, style: Object.assign({}, popper.styles.popper), arrowProps: Object.assign(Object.assign({}, popper.attributes.arrow), { style: popper.styles.arrow, ref: setArrowElement }) }));
+    }, [popper.state?.placement]);
+    const overlayElement = React.cloneElement(overlay, {
+        ...popper.attributes.popper,
+        ref: setPopperElement,
+        placement: arrowPlacement,
+        style: { ...popper.styles.popper },
+        arrowProps: {
+            ...popper.attributes.arrow,
+            style: popper.styles.arrow,
+            ref: setArrowElement,
+        },
+    });
     return (_jsxs(_Fragment, { children: [show && (enablePortal ? ReactDOM.createPortal(overlayElement, document.body) : overlayElement), React.cloneElement(children, triggerProps)] }));
 };
 OverlayTrigger.TRIGGER_CLICK = TRIGGER.CLICK;

package/components/page/Page.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 Page = (props) => {
     const { className, width, orientation = 'portrait', shadow = true, border = false, children } = props;
@@ -13,6 +11,6 @@ const Page = (props) => {
     if (width && !isPortrait) {
         style.height = `${width}px`;
     }
-    return (_jsx("div", Object.assign({ className: wrapperClassNames, style: style }, { children: children })));
+    return (_jsx("div", { className: wrapperClassNames, style: style, children: children }));
 };
 export default Page;

package/components/pager/Pager.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';
@@ -7,25 +6,25 @@ export const PagerVariant = {
     VARIANT_COMPACT: 'compact',
 };
 const Pager = (props) => {
-    const { title, label, alignRight = false, variant = PagerVariant.VARIANT_FULL, disabled = false, onClick, className } = props, remainingProps = __rest(props, ["title", "label", "alignRight", "variant", "disabled", "onClick", "className"]);
+    const { title, label, alignRight = false, variant = PagerVariant.VARIANT_FULL, disabled = false, onClick, className, ...remainingProps } = props;
     const [isHover, setIsHover] = useState(false);
     const handleEnter = () => !disabled && setIsHover(true);
     const handleLeave = () => setIsHover(false);
     const isCompactVariant = variant === Pager.VARIANT_COMPACT;
     const wrapperClassesBase = classNames('Pager', 'bg-white', 'border', 'display-flex justify-space-between align-items-center', isHover && 'border-color-highlight', alignRight && 'flex-row-reverse', disabled && 'pointer-events-none', 'cursor-pointer user-select-none');
-    const iconClassesBase = classNames('rioplyph', disabled ? 'text-color-light' : 'text-color-darker', isHover && 'text-color-highlight');
+    const iconClassesBase = classNames('rioglyph', disabled ? 'text-color-light' : 'text-color-darker', isHover && 'text-color-highlight');
     const titleClassesBase = classNames(disabled ? 'text-color-light' : 'text-color-darker', isHover && 'text-color-highlight');
     // The compact version has a slightly different markup and different classes for the
     // individual parts, hence we extend the base classes
     if (isCompactVariant) {
         const wrapperClassesCompact = classNames(wrapperClassesBase, 'rounded-circle', 'padding-y-5 padding-x-15', 'width-auto', className);
         const iconClassesCompact = classNames(iconClassesBase, alignRight ? 'rioglyph-chevron-left margin-right-5' : 'rioglyph-chevron-right margin-left-5', 'text-size-10');
-        return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassesCompact, onMouseEnter: handleEnter, onMouseLeave: handleLeave, onClick: onClick }, { children: [_jsx("div", Object.assign({ className: `display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}` }, { children: _jsx("div", Object.assign({ className: titleClassesBase }, { children: title })) })), _jsx("span", { className: iconClassesCompact })] })));
+        return (_jsxs("div", { ...remainingProps, className: wrapperClassesCompact, onMouseEnter: handleEnter, onMouseLeave: handleLeave, onClick: onClick, children: [_jsx("div", { className: `display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`, children: _jsx("div", { className: titleClassesBase, children: title }) }), _jsx("span", { className: iconClassesCompact })] }));
     }
     const wrapperClassesFull = classNames(wrapperClassesBase, 'rounded', 'padding-y-15 padding-x-20', 'width-100pct', className);
     const iconClassesFull = classNames(iconClassesBase, alignRight ? 'rioglyph-arrow-left margin-right-10' : 'rioglyph-arrow-right margin-left-10', 'text-size-200pct');
     const titleClassesFull = classNames(titleClassesBase, alignRight && 'text-right', 'text-size-16 text-medium');
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassesFull, onMouseEnter: handleEnter, onMouseLeave: handleLeave, onClick: onClick }, { children: [_jsxs("div", Object.assign({ className: `display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}` }, { children: [_jsx("div", Object.assign({ className: 'text-color-gray line-height-16' }, { children: label })), _jsx("div", Object.assign({ className: titleClassesFull }, { children: title }))] })), _jsx("div", Object.assign({ className: 'text-size-12' }, { children: _jsx("span", { className: iconClassesFull }) }))] })));
+    return (_jsxs("div", { ...remainingProps, className: wrapperClassesFull, onMouseEnter: handleEnter, onMouseLeave: handleLeave, onClick: onClick, children: [_jsxs("div", { className: `display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`, children: [_jsx("div", { className: 'text-color-gray line-height-16', children: label }), _jsx("div", { className: titleClassesFull, children: title })] }), _jsx("div", { className: 'text-size-12 display-grid place-items-center', children: _jsx("span", { className: iconClassesFull }) })] }));
 };
 Pager.VARIANT_FULL = PagerVariant.VARIANT_FULL;
 Pager.VARIANT_COMPACT = PagerVariant.VARIANT_COMPACT;

package/components/popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import React, { type ForwardRefExoticComponent, type RefAttributes, type PropsWithChildren, type ReactNode, type ComponentProps } from 'react';
+import { type ForwardRefExoticComponent, type RefAttributes, type PropsWithChildren, type ReactNode, type ComponentProps } from 'react';
 export declare const PLACEMENT_MAP: {
     readonly AUTO: "auto";
     readonly TOP: "top";
@@ -47,11 +47,11 @@ export type PopoverProps = Omit<ComponentProps<'div'>, 'title'> & {
      */
     className?: string;
 };
-declare const PopoverTitle: ({ className, children }: React.PropsWithChildren<{
-    className?: string | undefined;
+declare const PopoverTitle: ({ className, children }: PropsWithChildren<{
+    className?: string;
 }>) => import("react/jsx-runtime").JSX.Element;
-declare const PopoverContent: ({ className, children }: React.PropsWithChildren<{
-    className?: string | undefined;
+declare const PopoverContent: ({ className, children }: PropsWithChildren<{
+    className?: string;
 }>) => import("react/jsx-runtime").JSX.Element;
 type PopoverType = ForwardRefExoticComponent<PropsWithChildren<PopoverProps> & RefAttributes<HTMLDivElement>> & {
     Title: typeof PopoverTitle;

package/components/popover/Popover.js

@@ -1,7 +1,5 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, isValidElement, useState, useEffect, } from 'react';
-import 'framer-motion';
 import { PLACEMENT } from '../../values/Placement';
 export const PLACEMENT_MAP = {
     AUTO: PLACEMENT.AUTO,
@@ -10,20 +8,20 @@ export const PLACEMENT_MAP = {
     BOTTOM: PLACEMENT.BOTTOM,
     LEFT: PLACEMENT.LEFT,
 };
-const PopoverTitle = ({ className = '', children }) => (_jsx("div", Object.assign({ className: `popover-header popover-title ${className}` }, { children: children })));
-const PopoverContent = ({ className = '', children }) => (_jsx("div", Object.assign({ className: `popover-content popover-body ${className}` }, { children: children })));
+const PopoverTitle = ({ className = '', children }) => (_jsx("div", { className: `popover-header popover-title ${className}`, children: children }));
+const PopoverContent = ({ className = '', children }) => (_jsx("div", { className: `popover-content popover-body ${className}`, children: children }));
 const isPopoverTitleOrContent = (element) => {
     return isValidElement(element) && (element.type === PopoverTitle || element.type === PopoverContent);
 };
 const Popover = forwardRef((props, ref) => {
-    const { placement = 'bottom', arrowProps, title, titleClassName = '', contentClassName = '', children, className = '' } = props, remainingProps = __rest(props, ["placement", "arrowProps", "title", "titleClassName", "contentClassName", "children", "className"]);
+    const { placement = 'bottom', arrowProps, title, titleClassName = '', contentClassName = '', children, className = '', ...remainingProps } = props;
     const hasTitle = !!title;
     const hasCustomContent = React.Children.toArray(children).some(isPopoverTitleOrContent);
     // Mount the component but don't show it yet via CSS.
     // After it is mounted, we set the visibility class to use CSS animation
     const [isMounted, setIsMounted] = useState(false);
     useEffect(() => setIsMounted(true), []);
-    return (_jsxs("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: `popover fade ${isMounted ? 'show' : ''} ${className}` }, { children: [_jsx("div", Object.assign({ className: 'arrow' }, arrowProps)), hasTitle && _jsx(PopoverTitle, Object.assign({ className: titleClassName }, { children: title })), hasCustomContent ? children : _jsx(PopoverContent, Object.assign({ className: contentClassName }, { children: children }))] })));
+    return (_jsxs("div", { ...remainingProps, role: 'tooltip', "x-placement": placement, ref: ref, className: `popover fade ${isMounted ? 'show' : ''} ${className}`, children: [_jsx("div", { className: 'arrow', ...arrowProps }), hasTitle && _jsx(PopoverTitle, { className: titleClassName, children: title }), hasCustomContent ? children : _jsx(PopoverContent, { className: contentClassName, children: children })] }));
 });
 Popover.Title = PopoverTitle;
 Popover.Content = PopoverContent;

package/components/position/Position.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'react';
 const format = (degrees, positivePrefix, negativePrefix) => {
     const prefix = degrees >= 0 ? positivePrefix : negativePrefix;
     const absDegrees = Math.abs(degrees);
@@ -9,6 +8,6 @@ const format = (degrees, positivePrefix, negativePrefix) => {
 };
 const Position = (props) => {
     const { latitude, longitude, address } = props;
-    return (_jsx("span", Object.assign({ className: 'vehiclePositionInfo' }, { children: address || `${format(latitude, 'N', 'S')} ${format(longitude, 'E', 'W')}` })));
+    return (_jsx("span", { className: 'vehiclePositionInfo', children: address || `${format(latitude, 'N', 'S')} ${format(longitude, 'E', 'W')}` }));
 };
 export default Position;

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;