@rio-cloud/rio-uikit 1.4.1 → 1.5.1

package/FadeExpander.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/fade/FadeExpander';
+export * from './components/fade/FadeExpander';

package/FadeExpander.js

@@ -0,0 +1,2 @@
+export { default } from './components/fade/FadeExpander';
+export * from './components/fade/FadeExpander';

package/FadeUp.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/fade/FadeUp';
+export * from './components/fade/FadeUp';

package/FadeUp.js

@@ -0,0 +1,2 @@
+export { default } from './components/fade/FadeUp';
+export * from './components/fade/FadeUp';

package/XAxis.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/XAxis';
+export * from './components/charts/XAxis';

package/XAxis.js

@@ -0,0 +1,2 @@
+export { default } from './components/charts/XAxis';
+export * from './components/charts/XAxis';

package/YAxis.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/YAxis';
+export * from './components/charts/YAxis';

package/YAxis.js

@@ -0,0 +1,2 @@
+export { default } from './components/charts/YAxis';
+export * from './components/charts/YAxis';

package/components/applicationLayout/ApplicationLayoutBody.d.ts

@@ -12,6 +12,11 @@ export type ApplicationLayoutBodyProps = {
      * @default true
      */
     forceScrollbar?: boolean;
+    /**
+     * Prop to trigger scroll reset from outside. This comes in handy when changing the body content
+     * and to reset the scrolling like when the pathname changes from an body internal menu.
+     */
+    scrollResetTrigger?: any;
     /**
      * The ApplicationLayoutBodyBanner component.
      */

package/components/applicationLayout/ApplicationLayoutBody.js

@@ -7,11 +7,20 @@ import SmoothScrollbars from '../smoothScrollbars/SmoothScrollbars';
 const RESIZE_THROTTLING = 200;
 const DEFAULT_BOTTOM_BAR_HEIGHT = 54;
 const ApplicationLayoutBody = forwardRef((props, ref) => {
-    const { className, innerClassName, forceScrollbar = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, children } = props, remainingProps = __rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "children"]);
+    const { className, innerClassName, forceScrollbar = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, scrollResetTrigger, children } = props, remainingProps = __rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "scrollResetTrigger", "children"]);
     const [offset, setOffset] = useState(0);
     const moduleContentRef = useRef(null);
     const layoutBodyRef = useRef(null);
     useImperativeHandle(ref, () => layoutBodyRef, []);
+    // Reset scroll position when children are different. This fixes the issue of
+    // changing body content (like in another route) and still having the same scroll position
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+        if (moduleContentRef.current) {
+            moduleContentRef.current.scrollTop(0);
+            setOffset(0);
+        }
+    }, [scrollResetTrigger]);
     useEffect(() => {
         var _a;
         if (((_a = layoutBodyRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) instanceof HTMLElement) {

package/components/charts/Area.d.ts

@@ -1,12 +1,20 @@
-/// <reference types="react" />
 import type { AreaProps as RechartsAreaProps } from 'recharts';
+import type { CurveType } from 'recharts/types/shape/Curve';
 export type AreaProps = Omit<RechartsAreaProps, 'ref'> & {
     strokeColor?: string;
     dataKey?: string;
     unit?: string;
     legendType?: string;
-    type?: string;
+    type?: CurveType;
     isAnimationActive?: boolean;
 };
-declare const Area: React.FC<AreaProps>;
+export declare const getAreaDefaultProps: () => {
+    dataKey: string;
+    unit: string;
+    strokeColor: string;
+    legendType: string;
+    type: string;
+    isAnimationActive: boolean;
+};
+declare const Area: (props: AreaProps) => null;
 export default Area;

package/components/charts/Area.js

@@ -1,2 +1,10 @@
-const Area = ({ dataKey = 'value', unit = '', strokeColor = 'color-coldplay-fountain', legendType = 'square', type = 'monotone', isAnimationActive = true, }) => null;
+export const getAreaDefaultProps = () => ({
+    dataKey: 'value',
+    unit: '',
+    strokeColor: 'color-coldplay-fountain',
+    legendType: 'square',
+    type: 'monotone',
+    isAnimationActive: true,
+});
+const Area = (props) => null;
 export default Area;

package/components/charts/AreaChart.d.ts

@@ -3,10 +3,10 @@ import { AreaChart as RechartsAreaChart, type XAxisProps, type YAxisProps } from
 import { type AreaGradientProps } from './AreaGradient';
 import { type ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';
-import type { AreaProps } from './Area';
+import { type AreaProps } from './Area';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
-import type { ReferenceLineProps } from './ReferenceLine';
+import { type ReferenceLineProps } from './ReferenceLine';
 type RechartsAreaChartProps = React.ComponentProps<typeof RechartsAreaChart>;
 export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'data'> & {
     width?: number;
@@ -19,11 +19,12 @@ export type AreaChartProps<T extends object> = Omit<RechartsAreaChartProps, 'dat
     referenceLines?: React.ReactElement<ReferenceLineProps>[];
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
     gridOptions?: GridProps;
+    showGrid?: boolean;
     containerOptions?: ResponsiveContainerProps;
     showXAxis?: boolean;
     showYAxis?: boolean;
-    showGrid?: boolean;
     legend?: React.ReactElement<LegendProps> | boolean;
     tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
     brush?: boolean;

package/components/charts/AreaChart.js

@@ -3,28 +3,29 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { createElement as _createElement } from "react";
 // @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
-import { AreaChart as RechartsAreaChart, Area as RechartsArea, ReferenceLine as RechartsReferenceLine, Legend as RechartsLegend, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
+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';
 import AreaGradient, { DEFAULT_ARIA_GRADIENT_ID } from './AreaGradient';
 import ChartTooltip from './ChartTooltip';
 import { getLegendDefaultProps } from './Legend';
+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, 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", "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 } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "additionalAxes", "showGrid", "legend", "brush", "tooltip"]);
     const areasWithGradient = areas.map(area => {
-        const _a = area.props, { strokeColor } = _a, remainingAreaProps = __rest(_a, ["strokeColor"]);
+        const areaPropsWithDefault = Object.assign(Object.assign({}, getAreaDefaultProps()), area.props);
+        const { strokeColor } = areaPropsWithDefault, remainingAreaProps = __rest(areaPropsWithDefault, ["strokeColor"]);
         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, Object.assign({}, 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(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), 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(referenceLine => {
-                    const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = __rest(_a, ["stroke"]);
-                    return (_createElement(RechartsReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: getColor(stroke) })));
-                }), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
+    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') })] })) })));
 };
 export default AreaChart;

package/components/charts/Bar.d.ts

@@ -1,5 +1,9 @@
-/// <reference types="react" />
 import type { BarProps as RechartsBarProps } from 'recharts';
 export type BarProps = Omit<RechartsBarProps, 'ref'> & {};
-declare const Bar: React.FC<BarProps>;
+export declare const getBarDefaultProps: () => {
+    dataKey: string;
+    color: string;
+    isAnimationActive: boolean;
+};
+declare const Bar: (props: BarProps) => null;
 export default Bar;

package/components/charts/Bar.js

@@ -1,8 +1,7 @@
-const Bar = () => null;
-Bar.defaultProps = {
+export const getBarDefaultProps = () => ({
     dataKey: 'value',
-    unit: '',
     color: 'color-coldplay-fountain',
     isAnimationActive: true,
-};
+});
+const Bar = (props) => null;
 export default Bar;

package/components/charts/BarChart.d.ts

@@ -3,7 +3,7 @@ import { BarChart as RechartsBarChart, type XAxisProps, type YAxisProps } from '
 import { type DataType } from './chartHelper';
 import { type ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';
-import type { BarProps } from './Bar';
+import { type BarProps } from './Bar';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
 export type BarChartDataType = DataType;
@@ -22,6 +22,7 @@ export type BarChartProps<T extends DataType> = Omit<RechartsBarChartProps, with
     useDataColors?: boolean;
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
     gridOptions?: GridProps;
     containerOptions?: ResponsiveContainerProps;
     legend?: React.ReactElement<LegendProps> | boolean;

package/components/charts/BarChart.js

@@ -2,14 +2,16 @@ 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, XAxis, YAxis, Brush, Cell, CartesianGrid, ResponsiveContainer, } from 'recharts';
+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';
 import { getFromDefaultColors, getColor, mapGridOptions, CURSOR_BACKGROUND_COLOR } from './chartHelper';
 import ChartTooltip from './ChartTooltip';
 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, 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", "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 } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "layout", "legend", "bars", "xAxisOptions", "yAxisOptions", "additionalAxes", "gridOptions", "containerOptions", "showGrid", "showXAxis", "showYAxis", "useDataColors", "brush", "tooltip"]);
     const tooltipProps = isObject(tooltip) ? tooltip.props : {};
     const legendProps = isObject(legend) ? Object.assign(Object.assign({}, getLegendDefaultProps()), legend.props) : {};
     let legendPayload;
@@ -19,12 +21,14 @@ const BarChart = (props) => {
             return Object.assign(Object.assign({}, 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(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), 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 _a = bar.props, { color } = _a, remainingBarProps = __rest(_a, ["color"]);
+    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"]);
                     const cellColor = color && getColor(color);
                     return (_jsx(RechartsBar, Object.assign({ 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') })] })) })));

package/components/charts/ComposedChart.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { ComposedChart as RechartsComposedChart, type XAxisProps, type YAxisProps } from 'recharts';
-import { ChartTooltipProps } from './ChartTooltip';
+import { type ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';
-import type { LineProps } from './Line';
-import type { BarProps } from './Bar';
-import type { ReferenceLineProps } from './ReferenceLine';
+import { type BarProps } from './Bar';
+import { type ReferenceLineProps } from './ReferenceLine';
+import { type LineProps } from './Line';
+import { type AreaProps } from './Area';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
-import type { AreaProps } from './Area';
 type RechartsComposedChartProps = React.ComponentProps<typeof RechartsComposedChart>;
 export type ComposedChartProps<T extends object> = Omit<RechartsComposedChartProps, 'data'> & {
     width?: number;
@@ -21,6 +21,7 @@ export type ComposedChartProps<T extends object> = Omit<RechartsComposedChartPro
     referenceLines?: React.ReactElement<ReferenceLineProps>[];
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
     gridOptions?: GridProps;
     containerOptions?: ResponsiveContainerProps;
     showXAxis?: boolean;

package/components/charts/ComposedChart.js

@@ -3,28 +3,33 @@ 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, ReferenceLine as RechartsReferenceLine, Legend as RechartsLegend, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
+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';
 import ChartTooltip from './ChartTooltip';
 import { getLegendDefaultProps } from './Legend';
+import { renderAxis } from './XAxis';
+import { getBarDefaultProps } from './Bar';
+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, 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", "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 } = 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 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(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(RechartsLegend, Object.assign({}, legendProps)), areas.map(area => {
-                    const _a = area.props, { strokeColor, fill } = _a, remainingAreaProps = __rest(_a, ["strokeColor", "fill"]);
+    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) })));
                 }), bars.map(bar => {
-                    const _a = bar.props, { color } = _a, remainingBarProps = __rest(_a, ["color"]);
+                    const barPropsWithDefault = Object.assign(Object.assign({}, getBarDefaultProps()), bar.props);
+                    const { color } = barPropsWithDefault, remainingBarProps = __rest(barPropsWithDefault, ["color"]);
                     const cellColor = color && getColor(color);
                     return _jsx(RechartsBar, Object.assign({ unit: dataUnit }, remainingBarProps, { fill: cellColor }), bar.key);
                 }), lines.map(line => {
-                    const _a = line.props, { strokeColor } = _a, remainingLineProps = __rest(_a, ["strokeColor"]);
-                    return _createElement(RechartsLine, Object.assign({}, remainingLineProps, { key: line.key, stroke: getColor(strokeColor) }));
-                }), referenceLines.map(referenceLine => {
-                    const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = __rest(_a, ["stroke"]);
-                    return (_createElement(RechartsReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: getColor(stroke) })));
-                }), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
+                    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') })] })) })));
 };
 export default ComposedChart;

package/components/charts/Line.d.ts

@@ -1,12 +1,20 @@
-/// <reference types="react" />
 import type { LineProps as RechartsLineProps } from 'recharts';
+import type { CurveType } from 'recharts/types/shape/Curve';
 export type LineProps = Omit<RechartsLineProps, 'ref'> & {
     strokeColor?: string;
     dataKey?: string;
     unit?: string;
     legendType?: string;
-    type?: string;
+    type?: CurveType;
     isAnimationActive?: boolean;
 };
-declare const Line: React.FC<LineProps>;
+export declare const getLineDefaultProps: () => {
+    dataKey: string;
+    unit: string;
+    strokeColor: string;
+    legendType: string;
+    type: string;
+    isAnimationActive: boolean;
+};
+declare const Line: (props: LineProps) => null;
 export default Line;

package/components/charts/Line.js

@@ -1,2 +1,10 @@
-const Line = ({ dataKey = 'value', unit = '', strokeColor = 'color-coldplay-fountain', legendType = 'square', type = 'monotone', isAnimationActive = true, }) => null;
+export const getLineDefaultProps = () => ({
+    dataKey: 'value',
+    unit: '',
+    strokeColor: 'color-coldplay-fountain',
+    legendType: 'square',
+    type: 'monotone',
+    isAnimationActive: true,
+});
+const Line = (props) => null;
 export default Line;

package/components/charts/LineChart.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { LineChart as RechartsLineChart, type XAxisProps, type YAxisProps } from 'recharts';
-import { ChartTooltipProps } from './ChartTooltip';
+import { LineChart as RechartsLineChart, type XAxisProps, type YAxisProps, type BrushProps } from 'recharts';
+import { type ChartTooltipProps } from './ChartTooltip';
 import { type LegendProps } from './Legend';
-import type { LineProps } from './Line';
-import type { ReferenceLineProps } from './ReferenceLine';
+import { type LineProps } from './Line';
+import { type ReferenceLineProps } from './ReferenceLine';
 import type { GridProps } from './ChartGrid';
 import type { ResponsiveContainerProps } from './ResponsiveContainer';
 type RechartsLineChartProps = React.ComponentProps<typeof RechartsLineChart>;
@@ -17,6 +17,7 @@ export type LineChartProps<T extends object> = Omit<RechartsLineChartProps, 'dat
     referenceLines?: React.ReactElement<ReferenceLineProps>[];
     xAxisOptions?: XAxisProps;
     yAxisOptions?: YAxisProps;
+    additionalAxes?: React.ReactElement<XAxisProps | YAxisProps>[];
     gridOptions?: GridProps;
     containerOptions?: ResponsiveContainerProps;
     showXAxis?: boolean;
@@ -25,6 +26,7 @@ export type LineChartProps<T extends object> = Omit<RechartsLineChartProps, 'dat
     legend?: React.ReactElement<LegendProps> | boolean;
     tooltip?: React.ReactElement<ChartTooltipProps> | boolean;
     brush?: boolean;
+    brushOptions?: BrushProps;
 };
 declare const LineChart: <T extends object>(props: LineChartProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default LineChart;

package/components/charts/LineChart.js

@@ -3,21 +3,22 @@ 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, ReferenceLine as RechartsReferenceLine, Legend as RechartsLegend, XAxis, YAxis, Brush, CartesianGrid, ResponsiveContainer, } from 'recharts';
+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';
 import ChartTooltip from './ChartTooltip';
 import { getLegendDefaultProps } from './Legend';
+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, showGrid = false, legend, brush = false, tooltip = true } = props, remainingProps = __rest(props, ["width", "height", "data", "dataUnit", "dataKey", "lines", "referenceLines", "xAxisOptions", "yAxisOptions", "gridOptions", "containerOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+    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 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(XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), _jsx(YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && _jsx(ChartTooltip, Object.assign({}, tooltipProps)), legend && _jsx(RechartsLegend, Object.assign({}, legendProps)), lines.map(line => {
-                    const _a = line.props, { strokeColor } = _a, remainingLineProps = __rest(_a, ["strokeColor"]);
-                    return _createElement(RechartsLine, Object.assign({}, remainingLineProps, { key: line.key, stroke: getColor(strokeColor) }));
-                }), referenceLines.map(referenceLine => {
-                    const _a = referenceLine.props, { stroke } = _a, remainingReferenceLineProps = __rest(_a, ["stroke"]);
-                    return (_createElement(RechartsReferenceLine, Object.assign({}, remainingReferenceLineProps, { key: referenceLine.key, stroke: getColor(stroke) })));
-                }), brush && _jsx(Brush, { stroke: getColor('gray') })] })) })));
+    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') }))] })) })));
 };
 export default LineChart;

package/components/charts/ReferenceLine.d.ts

@@ -1,7 +1,11 @@
-/// <reference types="react" />
-import type { ReferenceLineProps as RechartsReferenceLineProps } from 'recharts';
+import React from 'react';
+import { type ReferenceLineProps as RechartsReferenceLineProps } from 'recharts';
 export type ReferenceLineProps = Omit<RechartsReferenceLineProps, 'ref'> & {
     stroke?: string;
 };
-declare const Line: React.FC<ReferenceLineProps>;
-export default Line;
+export declare const getReferenceLineDefaultProps: () => {
+    stroke: string;
+};
+export declare const renderReferenceLine: (element: React.ReactElement<ReferenceLineProps>) => import("react/jsx-runtime").JSX.Element;
+declare const ReferenceLine: (props: ReferenceLineProps) => null;
+export default ReferenceLine;

package/components/charts/ReferenceLine.js

@@ -1,2 +1,18 @@
-const Line = ({ stroke = 'color-coldplay-fountain' }) => null;
-export default Line;
+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) }));
+};
+// 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
+const ReferenceLine = (props) => null;
+export default ReferenceLine;

package/components/charts/XAxis.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type XAxisProps as XAxisPropsProps } from 'recharts';
+import { type YAxisProps } from './YAxis';
+export type XAxisProps = Partial<XAxisPropsProps> & {};
+export declare const renderAxis: (axis: React.ReactElement<XAxisProps | YAxisProps>, index: number) => import("react/jsx-runtime").JSX.Element | null;
+declare const XAxis: React.FC<XAxisProps>;
+export default XAxis;

package/components/charts/XAxis.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { XAxis as RechartsXAxis, YAxis as RechartsYAxis } from 'recharts';
+import YAxis from './YAxis';
+export const renderAxis = (axis, index) => {
+    const key = `additional-axis-${index}`;
+    if (React.isValidElement(axis)) {
+        if (axis.type === XAxis) {
+            return _jsx(RechartsXAxis, Object.assign({}, axis.props), key);
+        }
+        if (axis.type === YAxis) {
+            return _jsx(RechartsYAxis, Object.assign({}, axis.props), key);
+        }
+    }
+    return null;
+};
+const XAxis = props => null;
+export default XAxis;

package/components/charts/YAxis.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { YAxisProps as YAxisPropsProps } from 'recharts';
+export type YAxisProps = Omit<YAxisPropsProps, 'ref'> & {};
+declare const YAxis: React.FC<YAxisProps>;
+export default YAxis;

package/components/charts/YAxis.js

@@ -0,0 +1,2 @@
+const YAxis = props => null;
+export default YAxis;

package/components/collapse/Collapse.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import noop from 'lodash/fp/noop';
-const DEFAULT_ANIMATION_TIME_IN_MS = 270;
+const DEFAULT_ANIMATION_TIME_IN_MS = 200;
 const Collapse = (props) => {
     const { open = false, unmountOnExit = false, appear = false, timeout = DEFAULT_ANIMATION_TIME_IN_MS, onEntered = noop, onExited = noop, onAnimationStart = noop, children, } = props;
     const shouldKeepContentInDom = !unmountOnExit;
@@ -20,6 +20,7 @@ const Collapse = (props) => {
         open: { opacity: 1, height: 'auto' },
         collapsed: { opacity: 0, height: 0 },
     };
-    return (_jsx(_Fragment, { children: _jsx(AnimatePresence, Object.assign({ initial: appear, exitBeforeEnter: true }, { children: (open || shouldKeepContentInDom) && (_jsx(motion.div, Object.assign({ initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: [0.04, 0.62, 0.23, 0.98] }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart }, { children: children }), 'content')) })) }));
+    return (_jsx(_Fragment, { children: _jsx(AnimatePresence, Object.assign({ initial: appear, exitBeforeEnter: true }, { children: (open || shouldKeepContentInDom) && (_jsx(motion.div, Object.assign({ initial: 'collapsed', animate: open ? 'open' : 'collapsed', exit: 'collapsed', className: 'collapse display-block width-100pct', variants: variants, transition: { duration: timeout / 1000, ease: 'easeIn' }, onAnimationComplete: handleAnimationComplete, onAnimationStart: handleAnimationStart }, { children: children }), 'content')) })) }));
 };
+//
 export default Collapse;

package/components/fade/FadeExpander.d.ts

@@ -0,0 +1,27 @@
+import { type PropsWithChildren } from 'react';
+type FadeExpanderProps = {
+    /**
+     * Defines if the content is shown or not.
+     *
+     * @default false
+     */
+    show: boolean;
+    /**
+     * Allows customization of animation duration.
+     *
+     * @default 0.2
+     */
+    duration?: number;
+    /**
+     * Delay in seconds before starting the animation.
+     *
+     * @default 0
+     */
+    delay?: number;
+    /**
+     * Additional classes set to the wrapper element.
+     */
+    className?: string;
+};
+declare const FadeExpander: (props: PropsWithChildren<FadeExpanderProps>) => import("react/jsx-runtime").JSX.Element;
+export default FadeExpander;