@rio-cloud/rio-uikit 1.6.0 → 1.7.0

package/components/bottomSheet/BottomSheet.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useState, } from 'react';
 import { createPortal } from 'react-dom';
@@ -9,7 +8,7 @@ import { getOrCreatePortalRoot } from '../../utils/portalRoot';
 const OFFSET_POSITION = -1000;
 const DEFAULT_OFFSET_PX = 15;
 const BottomSheet = (props) => {
-    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, hasBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { } } = props, remainingProps = __rest(props, ["show", "onClose", "width", "height", "title", "detach", "detachOffset", "hasBackdrop", "showCloseButton", "showMaximizeButton", "onHeightChange", "bodyRef", "bodyClassName", "className", "children", "onBackdropClick"]);
+    const { show = false, onClose, width, height, title, detach = false, detachOffset = DEFAULT_OFFSET_PX, hasBackdrop = false, showCloseButton = true, showMaximizeButton = false, onHeightChange = () => { }, bodyRef, bodyClassName, className, children, onBackdropClick = () => { }, ...remainingProps } = props;
     const [isShown, setIsShown] = useState(show);
     const [isMaxHeight, setIsMaxHeight] = useState(false);
     useEffect(() => setIsShown(show), [show]);
@@ -39,7 +38,7 @@ const BottomSheet = (props) => {
     // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.
     // That is the reason why there is no "AnimatePresence" with an "exit" animation here.
     // Instead, we change the "animate" values.
-    return createPortal(_jsxs(_Fragment, { children: [_jsxs(motion.div, Object.assign({}, remainingProps, { className: sheetClasses, style: {
+    return createPortal(_jsxs(_Fragment, { children: [_jsxs(motion.div, { ...remainingProps, className: sheetClasses, style: {
                     width,
                     maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',
                     margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,
@@ -48,8 +47,8 @@ const BottomSheet = (props) => {
                     y: 0,
                     bottom: isShown ? 0 : OFFSET_POSITION,
                     height: isShown ? sheetHeight : 0,
-                } }, { children: [_jsxs("div", Object.assign({ className: 'bottom-sheet-header' }, { children: [title && (_jsx("div", Object.assign({ className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' +
-                                    'border border-top-none border-left-none border-right-none border-color-lighter' }, { children: _jsx("div", Object.assign({ className: 'text-size-18' }, { children: title })) }))), showCloseButton && (_jsx("div", Object.assign({ className: 'bottom-sheet-close position-absolute top-10 right-10' }, { children: _jsx("button", Object.assign({ type: 'button', className: 'btn btn-muted btn-sm btn-icon-only', onClick: handleToggle }, { children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) })) }))), showMaximizeButton && (_jsx("div", Object.assign({ className: 'bottom-sheet-maximize height-30 ' +
-                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize }, { children: _jsx("div", { className: 'height-5 width-40 rounded bg-lighter' }) })))] })), _jsx("div", Object.assign({ className: sheetBodyClasses, ref: bodyRef }, { children: isShown && children }))] })), hasBackdrop && isShown && _jsx("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
+                }, children: [_jsxs("div", { className: 'bottom-sheet-header', children: [title && (_jsx("div", { className: 'bottom-sheet-title display-flex justify-content-between padding-15 ' +
+                                    'border border-top-none border-left-none border-right-none border-color-lighter', children: _jsx("div", { className: 'text-size-18', children: title }) })), showCloseButton && (_jsx("div", { className: 'bottom-sheet-close position-absolute top-10 right-10', children: _jsx("button", { type: 'button', className: 'btn btn-muted btn-sm btn-icon-only', onClick: handleToggle, children: _jsx("span", { className: 'rioglyph rioglyph-remove' }) }) })), showMaximizeButton && (_jsx("div", { className: 'bottom-sheet-maximize height-30 ' +
+                                    'position-absolute top-5 left-50pct translate-x-50 cursor-pointer', onClick: handleMaximize, children: _jsx("div", { className: 'height-5 width-40 rounded bg-lighter' }) }))] }), _jsx("div", { className: sheetBodyClasses, ref: bodyRef, children: isShown && children })] }), hasBackdrop && isShown && _jsx("div", { className: 'bottom-sheet-backdrop', onClick: handleBackdropClick })] }), modalRoot);
 };
 export default BottomSheet;

package/components/bottomSheet/TimedBottomSheet.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import noop from 'lodash/fp/noop';
@@ -6,7 +5,7 @@ import BottomSheet from './BottomSheet';
 import useTimeout from '../../hooks/useTimeout';
 import useLocalStorage from '../../useLocalStorage';
 const DEFAULT_SHOW_AFTER = 0; // immediately after mount
-const DEFAULT_HIDE_AFTER = 3600000; // after 1 hour
+const DEFAULT_HIDE_AFTER = 3_600_000; // after 1 hour
 const sanitizeFeatureName = (value) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`.replaceAll(' ', '');
 /**
  * A wrapper component for the BottomSheet that allows to control it's visibility via timers and to use
@@ -40,7 +39,7 @@ const sanitizeFeatureName = (value) => `${value.charAt(0).toUpperCase()}${value.
     );
  */
 export const TimedBottomSheet = (props) => {
-    const { dismissed = false, featureName, showAfter = DEFAULT_SHOW_AFTER, hideAfter = DEFAULT_HIDE_AFTER, alwaysOn = false, showCloseButton = true, width, cleanupLocalStorage = false, onClose = noop, bodyClassName = 'padding-25 margin-right-25', localStoragePrefix = '', className, children } = props, remainingProps = __rest(props, ["dismissed", "featureName", "showAfter", "hideAfter", "alwaysOn", "showCloseButton", "width", "cleanupLocalStorage", "onClose", "bodyClassName", "localStoragePrefix", "className", "children"]);
+    const { dismissed = false, featureName, showAfter = DEFAULT_SHOW_AFTER, hideAfter = DEFAULT_HIDE_AFTER, alwaysOn = false, showCloseButton = true, width, cleanupLocalStorage = false, onClose = noop, bodyClassName = 'padding-25 margin-right-25', localStoragePrefix = '', className, children, ...remainingProps } = props;
     const [showBottomSheet, setShowBottomSheet] = useState(false);
     const [isHiddenByUser, setIsHiddenByUser, removeIsHiddenFlag] = useLocalStorage(`${localStoragePrefix}hide${sanitizeFeatureName(featureName)}`, false);
     // In case the visibility is controlled by the outside, means the user clicked on the
@@ -72,6 +71,6 @@ export const TimedBottomSheet = (props) => {
         setIsHiddenByUser(true);
         onClose();
     };
-    return (_jsx("div", Object.assign({}, remainingProps, { children: _jsx(BottomSheet, Object.assign({ show: showBottomSheet, width: width, detach: true, showCloseButton: showCloseButton, onClose: handleCloseBottomSheet, className: className, bodyClassName: bodyClassName }, { children: children })) })));
+    return (_jsx("div", { ...remainingProps, children: _jsx(BottomSheet, { show: showBottomSheet, width: width, detach: true, showCloseButton: showCloseButton, onClose: handleCloseBottomSheet, className: className, bodyClassName: bodyClassName, children: children }) }));
 };
 export default TimedBottomSheet;

package/components/button/Button.d.ts

@@ -9,6 +9,7 @@ export declare const STYLES_MAP: {
     readonly DANGER: "danger";
     readonly SUCCESS: "success";
     readonly MUTED: "muted";
+    readonly MUTED_FILLED: "muted-filled";
 };
 export type BUTTON_STYLE = ObjectValues<typeof STYLES_MAP>;
 export declare const VARIANTS_MAP: {
@@ -131,6 +132,7 @@ type ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElem
     DANGER: 'danger';
     SUCCESS: 'success';
     MUTED: 'muted';
+    MUTED_FILLED: 'muted-filled';
     VARIANT_LINK: 'link';
     VARIANT_LINK_INLINE: 'link-inline';
     VARIANT_OUTLINE: 'outline';

package/components/button/Button.js

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, } from 'react';
 import classNames from 'classnames';
@@ -14,6 +13,7 @@ export const STYLES_MAP = {
     DANGER: 'danger',
     SUCCESS: 'success',
     MUTED: 'muted',
+    MUTED_FILLED: 'muted-filled',
 };
 export const VARIANTS_MAP = {
     VARIANT_LINK: 'link',
@@ -28,7 +28,7 @@ export const SIZES_MAP = {
     LG: 'lg',
 };
 const Button = forwardRef((props, ref) => {
-    const { active = false, disabled = false, asToggle = false, onClick = noop, bsStyle = 'default', bsSize, variant, iconOnly = false, iconName, iconRight = false, multiline = false, block = false, className = '', noRippleEffect = false, type = 'button', tabIndex = 0, children } = props, remainingProps = __rest(props, ["active", "disabled", "asToggle", "onClick", "bsStyle", "bsSize", "variant", "iconOnly", "iconName", "iconRight", "multiline", "block", "className", "noRippleEffect", "type", "tabIndex", "children"]);
+    const { active = false, disabled = false, asToggle = false, onClick = noop, bsStyle = 'default', bsSize, variant, iconOnly = false, iconName, iconRight = false, multiline = false, block = false, className = '', noRippleEffect = false, type = 'button', tabIndex = 0, children, ...remainingProps } = props;
     const [isToggled, setIsToggled] = useState(active);
     const btnRef = useRef(null);
     const buttonRef = useMergeRefs(btnRef, ref);
@@ -40,7 +40,6 @@ const Button = forwardRef((props, ref) => {
         setPreviousActive(active);
     }
     const handleClick = (event) => {
-        var _a;
         if (!noRippleEffect) {
             createButtonRipple(event.nativeEvent, event.currentTarget);
         }
@@ -49,7 +48,7 @@ const Button = forwardRef((props, ref) => {
             const newIsToggled = !isToggled;
             setIsToggled(newIsToggled);
             if (newIsToggled) {
-                (_a = btnRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+                btnRef.current?.blur();
             }
             onClick(newIsToggled);
         }
@@ -58,7 +57,7 @@ const Button = forwardRef((props, ref) => {
         }
     };
     const buttonClassNames = classNames('btn', `btn-${bsStyle}`, variant === VARIANTS_MAP.VARIANT_LINK && 'btn-link', variant === VARIANTS_MAP.VARIANT_LINK_INLINE && 'btn-link btn-link-inline', variant === VARIANTS_MAP.VARIANT_OUTLINE && 'btn-outline', variant === VARIANTS_MAP.VARIANT_ACTION && 'btn-action', bsSize && `btn-${bsSize}`, asToggle && 'btn-toggle', isToggled && 'active', iconOnly && 'btn-icon-only', iconRight && 'btn-icon-right', multiline && 'btn-multiline', block && 'btn-block', 'btn-component', className);
-    return (_jsxs("button", Object.assign({ ref: buttonRef, type: type }, remainingProps, { className: buttonClassNames, onClick: handleClick, disabled: disabled, tabIndex: tabIndex }, { children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), children] })));
+    return (_jsxs("button", { ref: buttonRef, type: type, ...remainingProps, className: buttonClassNames, onClick: handleClick, disabled: disabled, tabIndex: tabIndex, children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), children] }));
 });
 Object.assign(Button, STYLES_MAP);
 Object.assign(Button, VARIANTS_MAP);

package/components/button/ButtonToolbar.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentProps, type PropsWithChildren } from 'react';
+export type ButtonToolbarProps = ComponentProps<'div'> & {
+    /**
+     * Align buttons to a defined side or set them apart.
+     */
+    alignment?: 'left' | 'right' | 'space-between';
+    /**
+     * Additional classes set to the outer element.
+     */
+    className?: string;
+};
+declare const ButtonToolbar: (props: PropsWithChildren<ButtonToolbarProps>) => import("react/jsx-runtime").JSX.Element;
+export default ButtonToolbar;

package/components/button/ButtonToolbar.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const ButtonToolbar = (props) => {
+    const { className = '', alignment, children, ...remainingProps } = props;
+    const classes = classNames(className, 'btn-toolbar', alignment === 'left' && 'justify-content-start', alignment === 'right' && 'justify-content-end', alignment === 'space-between' && 'justify-content-between');
+    return (_jsx("div", { ...remainingProps, className: classes, children: children }));
+};
+export default ButtonToolbar;

package/components/button/StepButton.d.ts

@@ -0,0 +1,12 @@
+import { type PropsWithChildren } from 'react';
+import { type ButtonProps } from './Button';
+export type StepButtonProps = ButtonProps & {
+    /**
+     * Defines the chevron icon for the respective direction.
+     *
+     * @default 'next'
+     */
+    direction?: 'next' | 'previous';
+};
+declare const StepButton: (props: PropsWithChildren<StepButtonProps>) => import("react/jsx-runtime").JSX.Element;
+export default StepButton;

package/components/button/StepButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Button from './Button';
+const StepButton = (props) => {
+    const { direction = 'next', ...remainingProps } = props;
+    const iconName = direction === 'next' ? 'rioglyph-chevron-right' : 'rioglyph-chevron-left';
+    return _jsx(Button, { ...remainingProps, iconName: iconName, iconRight: direction === 'next' });
+};
+export default StepButton;

package/components/button/ToggleButton.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import Button from './Button';
 // @ts-ignore - the Button throws TS error due to refs that may be checked at a later point in time
-const ToggleButton = (props) => _jsx(Button, Object.assign({}, props, { asToggle: true }));
+const ToggleButton = (props) => _jsx(Button, { ...props, asToggle: true });
 export default ToggleButton;

package/components/calendarStripe/CalendarStripe.js

@@ -119,6 +119,6 @@ const CalendarStripe = forwardRef((props, ref) => {
     const baseButtonClassNames = classNames(!hasAlignItemsClass(buttonClassName) && 'align-items-center', !hasDisplayClass(buttonClassName) && 'display-flex', !hasHoverScaleClass(buttonClassName) && 'hover-scale-105', !hasHoverTextColorClass(buttonClassName) && 'hover-text-color-darkest', !hasPaddingClass(buttonClassName) && 'padding-10', !hasCursorClass(buttonClassName) && 'cursor-pointer', !hasTextColorClass(buttonClassName) && 'text-color-darker', !hasTextSizeClass(buttonClassName) && 'text-size-12', !hasAlignSelfClass(buttonClassName) && 'align-self-stretch', buttonClassName);
     const daysWrapperClassNames = classNames(!hasDisplayClass(daysWrapperClassName) && 'display-flex', !hasSpaceClass(daysWrapperClassName) && 'space-x--1', !hasUserSelectClass(daysWrapperClassName) && 'user-select-none', daysWrapperClassName);
     const dayWrapperClassNames = classNames(ITEM_NAME, !hasFlexClass(dayWrapperClassName) && 'flex-1-1-0', !hasSpaceClass(dayWrapperClassName) && 'space-x--1', !hasUserSelectClass(dayWrapperClassName) && 'user-select-none', dayWrapperClassName);
-    return (_jsxs("div", Object.assign({ ref: ref, className: wrapperClassNames }, { children: [_jsx("div", Object.assign({ className: baseButtonClassNames, onClick: handlePrev }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) })), _jsx("div", Object.assign({ className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: _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: { duration: ANIMATION_DURATION } }, { children: _jsx("div", Object.assign({ className: daysWrapperClassNames }, { children: dates.map(date => (_jsxs("div", Object.assign({ className: dayWrapperClassNames }, { children: [renderDay ? renderDay(date) : null, render && React.cloneElement(_jsx(_Fragment, { children: render }), { date })] }), `${getDateString(date)}`))) })) }), getDateString(firstDate)) })) })), _jsx("div", Object.assign({ className: baseButtonClassNames, onClick: handleNext }, { children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] })));
+    return (_jsxs("div", { ref: ref, className: wrapperClassNames, children: [_jsx("div", { className: baseButtonClassNames, onClick: handlePrev, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-left' }) }), _jsx("div", { className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef, children: _jsx(AnimatePresence, { exitBeforeEnter: true, custom: animationDirection, children: _jsx(motion.div, { variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION }, children: _jsx("div", { className: daysWrapperClassNames, children: dates.map(date => (_jsxs("div", { className: dayWrapperClassNames, children: [renderDay ? renderDay(date) : null, render && React.cloneElement(_jsx(_Fragment, { children: render }), { date })] }, `${getDateString(date)}`))) }) }, getDateString(firstDate)) }) }), _jsx("div", { className: baseButtonClassNames, onClick: handleNext, children: _jsx("span", { className: 'rioglyph rioglyph-chevron-right' }) })] }));
 });
 export default CalendarStripe;

package/components/card/Card.d.ts

@@ -0,0 +1,21 @@
+import { type ComponentProps, type PropsWithChildren } from 'react';
+export type CardProps = ComponentProps<'div'> & {
+    /**
+     * Shadow classes.
+     *
+     * @default 'default'
+     */
+    shadow?: 'subtle' | 'muted' | 'accent' | 'default' | 'smooth' | 'muted-down' | 'default-down' | 'none';
+    /**
+     * Card padding.
+     *
+     * @default 15
+     */
+    padding?: 0 | 5 | 10 | 15 | 20 | 25 | 50;
+    /**
+     * Additional classes set to the outer element.
+     */
+    className?: string;
+};
+declare const Card: (props: PropsWithChildren<CardProps>) => import("react/jsx-runtime").JSX.Element;
+export default Card;

package/components/card/Card.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+const Card = (props) => {
+    const { className = '', shadow = 'default', padding = 15, children, ...remainingProps } = props;
+    const classes = classNames('bg-white', 'rounded', 'border', `shadow-${shadow}`, `padding-${padding}`, className);
+    return (_jsx("div", { ...remainingProps, className: classes, children: children }));
+};
+export default Card;

package/components/carousel/Carousel.d.ts

@@ -1,8 +1,6 @@
-declare const Carousel: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("react-bootstrap/Carousel").CarouselProps> & {
-    Caption: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", unknown>;
-    Item: import("react-bootstrap/esm/CarouselItem").default;
-} & {
-    PREV: 'prev';
-    NEXT: 'next';
+import OriginalCarousel from 'react-bootstrap/Carousel';
+declare const Carousel: typeof OriginalCarousel & {
+    PREV: "prev";
+    NEXT: "next";
 };
 export default Carousel;

package/components/charts/AreaChart.js

@@ -1,8 +1,5 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import { AreaChart as RechartsAreaChart, Area as RechartsArea, Legend as RechartsLegend, Brush, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from 'recharts';
 import isObject from 'lodash/fp/isObject';
 import { getColor, mapGridOptions } from './chartHelper';
@@ -13,19 +10,19 @@ import { renderAxis } from './XAxis';
 import { getAreaDefaultProps } from './Area';
 import { renderReferenceLine } from './ReferenceLine';
 const AreaChart = (props) => {
-    const { width, height, data = [], dataUnit = '', dataKey = 'value', gradients = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, additionalAxes = [], showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "additionalAxes", "showGrid", "legend", "brush", "tooltip"]);
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', gradients = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, additionalAxes = [], showGrid = false, legend, brush = false, tooltip = true, ...remainingProps } = props;
     const areasWithGradient = areas.map(area => {
-        const areaPropsWithDefault = Object.assign(Object.assign({}, getAreaDefaultProps()), area.props);
-        const { strokeColor } = areaPropsWithDefault, remainingAreaProps = __rest(areaPropsWithDefault, ["strokeColor"]);
+        const areaPropsWithDefault = { ...getAreaDefaultProps(), ...area.props };
+        const { strokeColor, ...remainingAreaProps } = areaPropsWithDefault;
         const gradientId = area.key;
         const stroke = getColor(strokeColor);
         return {
-            area: (_createElement(RechartsArea, Object.assign({}, remainingAreaProps, { key: area.key, stroke: stroke, fill: `url(#${gradientId})` }))),
+            area: (_createElement(RechartsArea, { ...remainingAreaProps, key: area.key, stroke: stroke, fill: `url(#${gradientId})` })),
             gradient: _jsx(AreaGradient, { id: gradientId || DEFAULT_ARIA_GRADIENT_ID, color: strokeColor }, area.key),
         };
     });
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
-    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsAreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [_jsxs("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(RechartsXAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(RechartsYAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && legendProps && (_jsx(_Fragment, { children: _jsx(RechartsLegend, Object.assign({ wrapperStyle: legendProps.verticalAlign === 'bottom' ? { bottom: 0 } : legendProps.wrapperStyle }, legendProps)) })), areasWithGradient.map(areaWithGradient => areaWithGradient.area), referenceLines.map(renderReferenceLine), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsAreaChart, { width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 }, ...remainingProps, children: [_jsxs("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && legendProps && (_jsx(_Fragment, { children: _jsx(RechartsLegend, { wrapperStyle: legendProps.verticalAlign === 'bottom' ? { bottom: 0 } : legendProps.wrapperStyle, ...legendProps }) })), areasWithGradient.map(areaWithGradient => areaWithGradient.area), referenceLines.map(renderReferenceLine), brush && _jsx(Brush, { stroke: getColor('gray') })] }) }));
 };
 export default AreaChart;

package/components/charts/AreaGradient.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import 'react';
 import { getColor } from './chartHelper';
 export const DEFAULT_ARIA_GRADIENT_ID = 'areaGradient';
 const AreaGradient = (props) => {
     const { id = DEFAULT_ARIA_GRADIENT_ID, color = 'color-coldplay-fountain' } = props;
-    return (_jsxs("linearGradient", Object.assign({ id: id, x1: '0', y1: '0', x2: '0', y2: '1' }, { children: [_jsx("stop", { offset: '5%', stopColor: getColor(color), stopOpacity: 0.8 }), _jsx("stop", { offset: '95%', stopColor: getColor(color), stopOpacity: 0 })] }), id));
+    return (_jsxs("linearGradient", { id: id, x1: '0', y1: '0', x2: '0', y2: '1', children: [_jsx("stop", { offset: '5%', stopColor: getColor(color), stopOpacity: 0.8 }), _jsx("stop", { offset: '95%', stopColor: getColor(color), stopOpacity: 0 })] }, id));
 };
 export default AreaGradient;

package/components/charts/BarChart.js

@@ -1,7 +1,4 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import { BarChart as RechartsBarChart, Bar as RechartsBar, Legend as RechartsLegend, Brush, Cell, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from 'recharts';
 import isFunction from 'lodash/fp/isFunction';
 import isObject from 'lodash/fp/isObject';
@@ -11,26 +8,30 @@ import { getLegendDefaultProps } from './Legend';
 import { renderAxis } from './XAxis';
 import { getBarDefaultProps } from './Bar';
 const BarChart = (props) => {
-    const { width, height, data = [], dataUnit, dataKey = 'value', layout = 'horizontal', legend = false, bars = [], xAxisOptions, yAxisOptions, additionalAxes = [], gridOptions, containerOptions, showGrid = false, showXAxis = true, showYAxis = true, useDataColors = false, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "additionalAxes", "gridOptions", "containerOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"]);
+    const { width, height, data = [], dataUnit, dataKey = 'value', layout = 'horizontal', legend = false, bars = [], xAxisOptions, yAxisOptions, additionalAxes = [], gridOptions, containerOptions, showGrid = false, showXAxis = true, showYAxis = true, useDataColors = false, brush = false, tooltip = true, ...remainingProps } = props;
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
     let legendPayload;
     if (useDataColors) {
         legendPayload = data.map((entry, index) => {
             const legendColor = getColor(entry.color) || getFromDefaultColors(index);
-            return Object.assign(Object.assign({}, entry), { value: isFunction(dataKey) ? dataKey(entry) : entry[dataKey], color: legendColor });
+            return {
+                ...entry,
+                value: isFunction(dataKey) ? dataKey(entry) : entry[dataKey],
+                color: legendColor,
+            };
         });
     }
-    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsBarChart, Object.assign({ layout: layout, width: width, height: height, data: data }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(RechartsXAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(RechartsYAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltipProps)), legend && _jsx(RechartsLegend, Object.assign({ payload: useDataColors ? legendPayload : undefined }, legendProps)), bars.map(bar => {
-                    const barPropsWithDefault = Object.assign(Object.assign({}, getBarDefaultProps()), bar.props);
-                    const { color } = barPropsWithDefault, remainingBarProps = __rest(barPropsWithDefault, ["color"]);
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsBarChart, { layout: layout, width: width, height: height, data: data, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { cursor: { fill: CURSOR_BACKGROUND_COLOR }, ...tooltipProps }), legend && _jsx(RechartsLegend, { payload: useDataColors ? legendPayload : undefined, ...legendProps }), bars.map(bar => {
+                    const barPropsWithDefault = { ...getBarDefaultProps(), ...bar.props };
+                    const { color, ...remainingBarProps } = barPropsWithDefault;
                     const cellColor = color && getColor(color);
-                    return (_jsx(RechartsBar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }, { children: useDataColors &&
+                    return (_jsx(RechartsBar, { unit: dataUnit, ...remainingBarProps, fill: cellColor, children: useDataColors &&
                             data.map((entry, index) => {
                                 const entryCellColor = getColor(entry.color) || getFromDefaultColors(index);
                                 // biome-ignore lint/suspicious/noArrayIndexKey: unknown key
                                 return _jsx(Cell, { fill: entryCellColor }, `cell-${index}`);
-                            }) }), bar.key));
-                }), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
+                            }) }, bar.key));
+                }), brush && _jsx(Brush, { stroke: getColor('gray') })] }) }));
 };
 export default BarChart;

package/components/charts/ChartGrid.js

@@ -1 +1 @@
-import 'react';
+export {};

package/components/charts/ChartLabel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { LabelProps as RechartsLabelProps } from 'recharts';
 export type LabelProps = Omit<RechartsLabelProps, 'ref'> & {};
 declare const ChartLabel: React.FC<LabelProps>;

package/components/charts/ChartNeedle.js

@@ -1,9 +1,18 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'react';
 const ChartNeedle = (props) => {
     const { width = '5px', height = '65px', x = '-50%', y = '-100%', rotation = 0, className = '', style } = props;
-    const needleStyle = Object.assign({ width,
-        height, transformOrigin: 'bottom', transform: `translate(${x}, ${y}) rotate(${rotation}deg)`, borderBottomLeftRadius: '4px', borderBottomRightRadius: '4px', borderTopLeftRadius: '100%', borderTopRightRadius: '100%', display: 'inline-block' }, style);
-    return (_jsx("div", Object.assign({ className: 'position-relative' }, { children: _jsx("div", { className: `position-absolute bg-dark ${className}`, style: needleStyle }) })));
+    const needleStyle = {
+        width,
+        height,
+        transformOrigin: 'bottom',
+        transform: `translate(${x}, ${y}) rotate(${rotation}deg)`,
+        borderBottomLeftRadius: '4px',
+        borderBottomRightRadius: '4px',
+        borderTopLeftRadius: '100%',
+        borderTopRightRadius: '100%',
+        display: 'inline-block',
+        ...style,
+    };
+    return (_jsx("div", { className: 'position-relative', children: _jsx("div", { className: `position-absolute bg-dark ${className}`, style: needleStyle }) }));
 };
 export default ChartNeedle;

package/components/charts/ComposedChart.js

@@ -1,8 +1,5 @@
-import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import { ComposedChart as RechartsComposedChart, Line as RechartsLine, Bar as RechartsBar, Area as RechartsArea, Legend as RechartsLegend, Brush, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from 'recharts';
 import isObject from 'lodash/fp/isObject';
 import { getColor, mapGridOptions } from './chartHelper';
@@ -14,22 +11,22 @@ import { renderReferenceLine } from './ReferenceLine';
 import { getLineDefaultProps } from './Line';
 import { getAreaDefaultProps } from './Area';
 const ComposedChart = (props) => {
-    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], bars = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, additionalAxes = [], gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "bars", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "additionalAxes", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], bars = [], areas = [], referenceLines = [], xAxisOptions, yAxisOptions, additionalAxes = [], gridOptions, containerOptions, showXAxis = true, showYAxis = false, showGrid = false, legend, brush = false, tooltip = true, ...remainingProps } = props;
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
-    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsComposedChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(RechartsXAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(RechartsYAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(RechartsLegend, Object.assign({}, legendProps)), areas.map(area => {
-                    const areaPropsWithDefault = Object.assign(Object.assign({}, getAreaDefaultProps()), area.props);
-                    const { strokeColor, fill } = areaPropsWithDefault, remainingAreaProps = __rest(areaPropsWithDefault, ["strokeColor", "fill"]);
-                    return (_createElement(RechartsArea, Object.assign({}, remainingAreaProps, { key: area.key, stroke: getColor(strokeColor), fill: getColor(fill) })));
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsComposedChart, { width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 }, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && _jsx(RechartsLegend, { ...legendProps }), areas.map(area => {
+                    const areaPropsWithDefault = { ...getAreaDefaultProps(), ...area.props };
+                    const { strokeColor, fill, ...remainingAreaProps } = areaPropsWithDefault;
+                    return (_createElement(RechartsArea, { ...remainingAreaProps, key: area.key, stroke: getColor(strokeColor), fill: getColor(fill) }));
                 }), bars.map(bar => {
-                    const barPropsWithDefault = Object.assign(Object.assign({}, getBarDefaultProps()), bar.props);
-                    const { color } = barPropsWithDefault, remainingBarProps = __rest(barPropsWithDefault, ["color"]);
+                    const barPropsWithDefault = { ...getBarDefaultProps(), ...bar.props };
+                    const { color, ...remainingBarProps } = barPropsWithDefault;
                     const cellColor = color && getColor(color);
-                    return _jsx(RechartsBar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }), bar.key);
+                    return _jsx(RechartsBar, { unit: dataUnit, ...remainingBarProps, fill: cellColor }, bar.key);
                 }), lines.map(line => {
-                    const linePropsWithDefault = Object.assign(Object.assign({}, getLineDefaultProps()), line.props);
-                    const { strokeColor } = linePropsWithDefault, remainingLineProps = __rest(linePropsWithDefault, ["strokeColor"]);
-                    return (_createElement(RechartsLine, Object.assign({}, remainingLineProps, { key: line.key, stroke: getColor(strokeColor) })));
-                }), referenceLines.map(renderReferenceLine), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
+                    const linePropsWithDefault = { ...getLineDefaultProps(), ...line.props };
+                    const { strokeColor, ...remainingLineProps } = linePropsWithDefault;
+                    return (_createElement(RechartsLine, { ...remainingLineProps, key: line.key, stroke: getColor(strokeColor) }));
+                }), referenceLines.map(renderReferenceLine), brush && _jsx(Brush, { stroke: getColor('gray') })] }) }));
 };
 export default ComposedChart;

package/components/charts/Legend.js

@@ -1,5 +1,3 @@
-// @ts-ignore importsNotUsedAsValues
-import 'react';
 export const getLegendDefaultProps = () => ({
     iconType: 'circle',
     iconSize: 12,

package/components/charts/LineChart.js

@@ -1,8 +1,5 @@
-import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import { LineChart as RechartsLineChart, Line as RechartsLine, Legend as RechartsLegend, Brush, CartesianGrid, ResponsiveContainer, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from 'recharts';
 import isObject from 'lodash/fp/isObject';
 import { getColor, mapGridOptions } from './chartHelper';
@@ -12,13 +9,13 @@ import { renderAxis } from './XAxis';
 import { getLineDefaultProps } from './Line';
 import { renderReferenceLine } from './ReferenceLine';
 const LineChart = (props) => {
-    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, additionalAxes = [], showGrid = false, legend, brush = false, tooltip = true, brushOptions = {} } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "additionalAxes", "showGrid", "legend", "brush", "tooltip", "brushOptions"]);
+    const { width, height, data = [], dataUnit = '', dataKey = 'value', lines = [], referenceLines = [], xAxisOptions, yAxisOptions, gridOptions, containerOptions, showXAxis = true, showYAxis = false, additionalAxes = [], showGrid = false, legend, brush = false, tooltip = true, brushOptions = {}, ...remainingProps } = props;
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
-    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsLineChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [showGrid && _jsx(CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, mapGridOptions(gridOptions))), _jsx(RechartsXAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(RechartsYAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(RechartsLegend, Object.assign({}, legendProps)), lines.map(line => {
-                    const linePropsWithDefault = Object.assign(Object.assign({}, getLineDefaultProps()), line.props);
-                    const { strokeColor } = linePropsWithDefault, remainingLineProps = __rest(linePropsWithDefault, ["strokeColor"]);
-                    return (_createElement(RechartsLine, Object.assign({}, remainingLineProps, { key: line.key, stroke: getColor(strokeColor) })));
-                }), referenceLines.map(renderReferenceLine), brush && _jsx(Brush, Object.assign({}, brushOptions, { stroke: getColor('gray') }))] })) })));
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsLineChart, { width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 }, ...remainingProps, children: [showGrid && _jsx(CartesianGrid, { strokeDasharray: '3 3', ...mapGridOptions(gridOptions) }), _jsx(RechartsXAxis, { hide: !showXAxis, dataKey: dataKey, ...xAxisOptions }), _jsx(RechartsYAxis, { hide: !showYAxis, unit: dataUnit, ...yAxisOptions }), additionalAxes.map(renderAxis), tooltip && _jsx(ChartTooltip, { ...tooltipProps }), legend && _jsx(RechartsLegend, { ...legendProps }), lines.map(line => {
+                    const linePropsWithDefault = { ...getLineDefaultProps(), ...line.props };
+                    const { strokeColor, ...remainingLineProps } = linePropsWithDefault;
+                    return (_createElement(RechartsLine, { ...remainingLineProps, key: line.key, stroke: getColor(strokeColor) }));
+                }), referenceLines.map(renderReferenceLine), brush && _jsx(Brush, { ...brushOptions, stroke: getColor('gray') })] }) }));
 };
 export default LineChart;

package/components/charts/PieChart.js

@@ -1,7 +1,4 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import { PieChart as RechartsPieChart, Legend as RechartsLegend, Pie, Cell, ResponsiveContainer, } from 'recharts';
 import isFunction from 'lodash/fp/isFunction';
 import isObject from 'lodash/fp/isObject';
@@ -13,21 +10,21 @@ const renderCustomInnerLabel = (dataUnit) => ({ cx, cy, midAngle, innerRadius, o
     const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
     const x = cx + radius * Math.cos(-midAngle * RADIAN);
     const y = cy + radius * Math.sin(-midAngle * RADIAN);
-    return (_jsx("text", Object.assign({ x: x, y: y, fill: 'white', textAnchor: x > cx ? 'start' : 'end', dominantBaseline: 'central' }, { children: `${value} ${dataUnit}` })));
+    return (_jsx("text", { x: x, y: y, fill: 'white', textAnchor: x > cx ? 'start' : 'end', dominantBaseline: 'central', children: `${value} ${dataUnit}` }));
 };
 const PieChart = (props) => {
-    const { width, height, innerRadius, outerRadius, data = [], dataKey = 'value', dataUnit = '', nameKey = 'name', color, filled = false, labels = true, innerLabels = false, paddingAngle = 3, legend = _jsx(RechartsLegend, {}), tooltip = true, pieOptions, containerOptions } = props, remainingProps = __rest(props, ["width", "height", "innerRadius", "outerRadius", "data", "dataKey", "dataUnit", "nameKey", "color", "filled", "labels", "innerLabels", "paddingAngle", "legend", "tooltip", "pieOptions", "containerOptions"]);
+    const { width, height, innerRadius, outerRadius, data = [], dataKey = 'value', dataUnit = '', nameKey = 'name', color, filled = false, labels = true, innerLabels = false, paddingAngle = 3, legend = _jsx(RechartsLegend, {}), tooltip = true, pieOptions, containerOptions, ...remainingProps } = props;
     // biome-ignore lint/suspicious/noExplicitAny:
     const renderLabels = (entry) => `${isFunction(dataKey) ? dataKey(entry) : entry[dataKey]} ${dataUnit}`;
     const pieLabel = labels && (innerLabels ? renderCustomInnerLabel(dataUnit) : renderLabels);
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
-    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsPieChart, Object.assign({ width: width, height: height }, remainingProps, { children: [legend && (_jsx(RechartsLegend, Object.assign({ formatter: (value, entry) => (_jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), _jsx(Pie, Object.assign({ data: data, isAnimationActive: true, nameKey: nameKey, dataKey: dataKey, label: pieLabel, 
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsPieChart, { width: width, height: height, ...remainingProps, children: [legend && (_jsx(RechartsLegend, { formatter: (value, entry) => (_jsx("span", { className: 'text-color-darker', children: value })), ...legendProps })), _jsx(Pie, { data: data, isAnimationActive: true, nameKey: nameKey, dataKey: dataKey, label: pieLabel, 
                     // cx={Math.max(outerRadius, width / 3)}
                     // cy={height / 2}
-                    innerRadius: filled ? 0 : innerRadius, outerRadius: outerRadius, paddingAngle: filled ? 0 : paddingAngle, labelLine: !innerLabels }, pieOptions, { children: data.map((entry, index) => {
+                    innerRadius: filled ? 0 : innerRadius, outerRadius: outerRadius, paddingAngle: filled ? 0 : paddingAngle, labelLine: !innerLabels, ...pieOptions, children: data.map((entry, index) => {
                         const cellColor = getColor(entry.color) || getFromDefaultColors(index);
                         return (_jsx(Cell, { fill: isFunction(color) ? getColor(color(entry)) : cellColor }, `cell-${index}`));
-                    }) })), tooltip && _jsx(ChartTooltip, Object.assign({ formatter: defaultFormatter(dataUnit) }, tooltipProps))] })) })));
+                    }) }), tooltip && _jsx(ChartTooltip, { formatter: defaultFormatter(dataUnit), ...tooltipProps })] }) }));
 };
 export default PieChart;

package/components/charts/RadialBarChart.js

@@ -1,7 +1,4 @@
-import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import { RadialBarChart as RechartsRadialBarChart, RadialBar as RechartsRadialBar, Legend as RechartsLegend, PolarAngleAxis, Cell, ResponsiveContainer, } from 'recharts';
 import isFunction from 'lodash/fp/isFunction';
 import isObject from 'lodash/fp/isObject';
@@ -9,18 +6,18 @@ import { getColor, getFromDefaultColors, CURSOR_BACKGROUND_COLOR } from './chart
 import { getLegendDefaultProps } from './Legend';
 import ChartTooltip from './ChartTooltip';
 const RadialBarChart = (props) => {
-    const { width, height, data = [], dataKey = 'value', startAngle = 180, endAngle = 0, innerRadius = '30%', outerRadius = '100%', legend = _jsx(RechartsLegend, {}), textOptions, radialBarOptions, containerOptions, showBarLabel = false, cornerRadius = 30, background = true, range, tooltip = false } = props, remainingProps = __rest(props, ["width", "height", "data", "dataKey", "startAngle", "endAngle", "innerRadius", "outerRadius", "legend", "textOptions", "radialBarOptions", "containerOptions", "showBarLabel", "cornerRadius", "background", "range", "tooltip"]);
-    const _a = textOptions || {}, { text, size = '500%', weight = 'normal', color = 'gray-darkest' } = _a, remainingTextOptions = __rest(_a, ["text", "size", "weight", "color"]);
+    const { width, height, data = [], dataKey = 'value', startAngle = 180, endAngle = 0, innerRadius = '30%', outerRadius = '100%', legend = _jsx(RechartsLegend, {}), textOptions, radialBarOptions, containerOptions, showBarLabel = false, cornerRadius = 30, background = true, range, tooltip = false, ...remainingProps } = props;
+    const { text, size = '500%', weight = 'normal', color = 'gray-darkest', ...remainingTextOptions } = textOptions || {};
     const textStyle = {
         fontSize: size,
         fontWeight: weight,
         fill: color && getColor(color),
     };
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
-    const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
-    return (_jsx(ResponsiveContainer, Object.assign({}, containerOptions, { children: _jsxs(RechartsRadialBarChart, Object.assign({ width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle }, remainingProps, { children: [_jsx(RechartsRadialBar, Object.assign({ label: showBarLabel && { fill: '#666', position: 'insideStart' }, background: background, dataKey: dataKey, cornerRadius: cornerRadius }, radialBarOptions, { children: data.map((entry, index) => {
+    const legendProps = isObject(legend) ? { ...getLegendDefaultProps(), ...legend.props } : {};
+    return (_jsx(ResponsiveContainer, { ...containerOptions, children: _jsxs(RechartsRadialBarChart, { width: width, height: height, data: data, innerRadius: innerRadius, outerRadius: outerRadius, startAngle: startAngle, endAngle: endAngle, ...remainingProps, children: [_jsx(RechartsRadialBar, { label: showBarLabel && { fill: '#666', position: 'insideStart' }, background: background, dataKey: dataKey, cornerRadius: cornerRadius, ...radialBarOptions, children: data.map((entry, index) => {
                         const cellColor = getColor(entry.color) || getFromDefaultColors(index);
                         return (_jsx(Cell, { fill: isFunction(color) ? color(entry, index) : cellColor }, `cell-${index}`));
-                    }) })), range && _jsx(PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && (_jsx("text", Object.assign({ x: width ? width / 2 : '50%', y: height ? height / 2 : '50%', textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle }, remainingTextOptions, { children: text }))), legend && (_jsx(RechartsLegend, Object.assign({ formatter: (value, entry) => (_jsx("span", Object.assign({ className: 'text-color-darker' }, { children: value }))) }, legendProps))), tooltip && _jsx(ChartTooltip, Object.assign({ cursor: { fill: CURSOR_BACKGROUND_COLOR } }, tooltipProps))] })) })));
+                    }) }), range && _jsx(PolarAngleAxis, { type: 'number', domain: range, angleAxisId: 0, tick: false }), textOptions && (_jsx("text", { x: width ? width / 2 : '50%', y: height ? height / 2 : '50%', textAnchor: 'middle', dominantBaseline: 'middle', className: 'radialbarchart-text', style: textStyle, ...remainingTextOptions, children: text })), legend && (_jsx(RechartsLegend, { formatter: (value, entry) => (_jsx("span", { className: 'text-color-darker', children: value })), ...legendProps })), tooltip && _jsx(ChartTooltip, { cursor: { fill: CURSOR_BACKGROUND_COLOR }, ...tooltipProps })] }) }));
 };
 export default RadialBarChart;

package/components/charts/ReferenceLine.js

@@ -1,16 +1,13 @@
-import { __rest } from "tslib";
 import { createElement as _createElement } from "react";
-// @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
 import { ReferenceLine as RechartsReferenceLine, } from 'recharts';
 import { getColor } from './chartHelper';
 export const getReferenceLineDefaultProps = () => ({
     stroke: 'color-coldplay-fountain',
 });
 export const renderReferenceLine = (element) => {
-    const referenceLinePropsWithDefault = Object.assign(Object.assign({}, getReferenceLineDefaultProps()), element.props);
-    const { stroke } = referenceLinePropsWithDefault, remainingReferenceLineProps = __rest(referenceLinePropsWithDefault, ["stroke"]);
-    return _createElement(RechartsReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: element.key, stroke: getColor(stroke) }));
+    const referenceLinePropsWithDefault = { ...getReferenceLineDefaultProps(), ...element.props };
+    const { stroke, ...remainingReferenceLineProps } = referenceLinePropsWithDefault;
+    return _createElement(RechartsReferenceLine, { ...remainingReferenceLineProps, key: element.key, stroke: getColor(stroke) });
 };
 // This is only used for passing this as prop to the UIKIT charts wrapper.
 // Recharts component need to be direct children of the chart itself and cannot be wrapped again