@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

package/lib/es/components/calendarStripe/CalendarStripe.d.ts

@@ -1,3 +1,67 @@
-export default CalendarStripe;
-declare const CalendarStripe: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from "react";
+import React from 'react';
+export type CalendarStripeProps = {
+    /**
+     * The minimum width in pixel of a single day column
+     *
+     * This value determines how many days are shown per page depending on the parent width.
+     *
+     * @default 200
+     */
+    minDayWith?: number;
+    /**
+     * The minimum amount of days that should be shown per page.
+     *
+     * @default 1
+     */
+    minDays?: number;
+    /**
+     * The maximum amount of days that should be shown per page.
+     *
+     * @default 7
+     */
+    maxDays?: number;
+    /**
+     * @deprecated Please use `renderDay` instead.
+     */
+    render?: React.ReactNode;
+    /**
+     * A function that renders each individual day to be displayed.
+     *
+     * @param date The day to render
+     */
+    renderDay?: (date: Date) => React.JSX.Element;
+    /**
+     * Defines whether the days for the weekends are included.
+     *
+     * @default false
+     */
+    skipWeekends?: boolean;
+    /**
+     * The date of the first day that are rendered.
+     *
+     * @default the current date
+     */
+    startDate?: Date;
+    /**
+     * Callback function for when the next button is clicked.
+     *
+     * @param newStartDate Date value that is now the start of the stripe.
+     */
+    onNextClick?: (newStartDate: Date) => void;
+    /**
+     * Callback function for when the previous button is clicked.
+     *
+     * @param newStartDate Date value that is now the start of the stripe.
+     */
+    onPreviousClick?: (newStartDate: Date) => void;
+    /**
+     * Additional classes set to the navigation buttons.
+     */
+    buttonClassName?: string;
+    /**
+     * Additional classes set to the calendar element.
+     */
+    className?: string;
+};
+declare const CalendarStripe: React.ForwardRefExoticComponent<CalendarStripeProps & React.RefAttributes<HTMLDivElement>>;
+export default CalendarStripe;

package/lib/es/components/calendarStripe/CalendarStripe.js

@@ -1,148 +1,124 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importStar(require("react"));
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const useAfterMount_1 = tslib_1.__importDefault(require("../../hooks/useAfterMount"));
-const useElementSize_1 = tslib_1.__importDefault(require("../../hooks/useElementSize"));
-const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
-const DEFAULT_MIN_WITH = 200;
-const DEFAULT_MIN_DAYS = 1;
-const DEFAULT_MAX_DAYS = 7;
-const ANIMATION_DURATION = 0.2;
-const ANIMATION_NEXT = 'page';
-const ANIMATION_BACK = 'pageBack';
-const ITEM_NAME = 'ColumnItem';
-const variants = {
-    pageEnter: pageDirection => {
-        return {
-            x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
-            opacity: 0,
-        };
-    },
-    pageCenter: () => {
-        return {
-            x: 0,
-            opacity: 1,
-        };
-    },
-};
-const getDateString = date => date.toISOString().split('T').at(0);
-const getFirstColumnItem = node => {
-    if ([...node.classList].includes(ITEM_NAME)) {
-        return node;
-    }
-    return getFirstColumnItem(node.children[0]);
-};
-const CalendarStripe = (0, react_1.forwardRef)((props, ref) => {
-    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, skipWeekends, startDate = new Date(), onNextClick, onPreviousClick, buttonClassName, className, } = props;
-    const [firstDate, setFirstDate] = (0, react_1.useState)(startDate);
-    const [amountOfDaysToShow, setAmountOfDaysToShow] = (0, react_1.useState)(1);
-    const [enableInitialAnimation, setEnableInitialAnimation] = (0, react_1.useState)(false);
-    // The base for reacting on changing width of the wrapping element.
-    // It uses a ResizeObserver under the hood.
-    const columnWrapperRef = (0, react_1.useRef)();
-    const [columnWrapperWidth] = (0, useElementSize_1.default)(columnWrapperRef);
-    const previous = (0, usePrevious_1.default)(getDateString(firstDate));
-    const animationDirection = getDateString(firstDate) > previous ? ANIMATION_NEXT : ANIMATION_BACK;
-    // Update startDate from outside
-    const [previousStartDate, setPreviousStartDate] = (0, react_1.useState)(startDate);
-    if (getDateString(startDate) !== getDateString(previousStartDate)) {
-        setFirstDate(startDate);
-        setPreviousStartDate(startDate);
-    }
-    (0, useAfterMount_1.default)(() => {
-        setEnableInitialAnimation(true);
-    });
-    (0, react_1.useLayoutEffect)(() => {
-        if (!columnWrapperRef.current) {
-            return;
-        }
-        const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
-        if (!firstItem) {
-            return;
-        }
-        // Get the width of the first column to calculate how many columns fit on one page
-        // according to the given minWidth per column
-        const columnWidth = firstItem.getBoundingClientRect().width;
-        // Limit columns per page for given min and max values
-        const allowForLessColumns = amountOfDaysToShow - 1 >= minDays;
-        const allowForMoreColumns = amountOfDaysToShow + 1 <= maxDays;
-        const goSmaller = allowForLessColumns && columnWidth <= minDayWith;
-        const goBigger = allowForMoreColumns && (amountOfDaysToShow + 1) * minDayWith <= columnWrapperWidth;
-        if (goBigger) {
-            const newValue = amountOfDaysToShow + 1;
-            setAmountOfDaysToShow(newValue);
-            return;
-        }
-        if (goSmaller) {
-            const newValue = amountOfDaysToShow - 1;
-            setAmountOfDaysToShow(newValue);
-            return;
-        }
-    }, [columnWrapperWidth, columnWrapperRef.current, amountOfDaysToShow, firstDate]);
-    const handleNext = () => {
-        const newFirstDate = new Date(firstDate);
-        newFirstDate.setDate(newFirstDate.getDate() + amountOfDaysToShow);
-        setFirstDate(newFirstDate);
-        onNextClick(newFirstDate);
-    };
-    const handlePrev = () => {
-        const newFirstDate = new Date(firstDate);
-        newFirstDate.setDate(newFirstDate.getDate() - amountOfDaysToShow);
-        setFirstDate(newFirstDate);
-        onPreviousClick(newFirstDate);
-    };
-    // Re-calculate the dates to show depending on the amount of days to show
-    const dates = [];
-    let addDays = true;
-    let index = 1;
-    while (addDays) {
-        const currentDate = new Date(firstDate);
-        currentDate.setDate(firstDate.getDate() + index);
-        const isSaturday = currentDate.getDay() === 6;
-        const isSunday = currentDate.getDay() === 0;
-        const isWeekend = isSaturday || isSunday;
-        if (isWeekend && !skipWeekends) {
-            dates.push(currentDate);
-        }
-        else if (!isWeekend) {
-            dates.push(currentDate);
-        }
-        index++;
-        if (dates.length === amountOfDaysToShow) {
-            addDays = false;
-        }
-    }
-    const wrapperClassName = (0, classnames_1.default)('CalenderStripe', 'display-flex', 'align-items-center', 'overflow-hidden', 'bg-white', 'border', 'rounded', className);
-    const baseButtonClassName = (0, classnames_1.default)('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12', buttonClassName);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: wrapperClassName }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassName, onClick: handlePrev }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'ColumnWrapper display-flex space-x--1 user-select-none' }, { children: dates.map(date => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${ITEM_NAME} flex-1-1` }, { children: react_1.default.cloneElement(render, {
-                                    date,
-                                }) }), `${getDateString(date)}`))) })) }), getDateString(firstDate)) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassName, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] })));
-});
-CalendarStripe.defaultProps = {
-    minDayWith: DEFAULT_MIN_WITH,
-    minDays: DEFAULT_MIN_DAYS,
-    maxDays: DEFAULT_MAX_DAYS,
-    skipWeekends: false,
-    onNextClick: () => { },
-    onPreviousClick: () => { },
-    buttonClassName: '',
-    className: '',
-};
-CalendarStripe.propTypes = {
-    minDayWith: prop_types_1.default.number,
-    minDays: prop_types_1.default.number,
-    maxDays: prop_types_1.default.number,
-    render: prop_types_1.default.node.isRequired,
-    skipWeekends: prop_types_1.default.bool,
-    startDate: prop_types_1.default.instanceOf(Date),
-    onNextClick: prop_types_1.default.func,
-    onPreviousClick: prop_types_1.default.func,
-    buttonClassName: prop_types_1.default.string,
-    className: prop_types_1.default.string,
-};
-exports.default = CalendarStripe;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const useAfterMount_1 = tslib_1.__importDefault(require("../../hooks/useAfterMount"));
+const useElementSize_1 = tslib_1.__importDefault(require("../../hooks/useElementSize"));
+const usePrevious_1 = tslib_1.__importDefault(require("../../hooks/usePrevious"));
+const DEFAULT_MIN_WITH = 200;
+const DEFAULT_MIN_DAYS = 1;
+const DEFAULT_MAX_DAYS = 7;
+const ANIMATION_DURATION = 0.2;
+const ANIMATION_NEXT = 'page';
+const ANIMATION_BACK = 'pageBack';
+const ITEM_NAME = 'ColumnItem';
+const variants = {
+    pageEnter: (pageDirection) => ({
+        x: pageDirection === ANIMATION_NEXT ? '60%' : '-60%',
+        opacity: 0,
+    }),
+    pageCenter: () => ({ x: 0, opacity: 1 }),
+};
+const getDateString = (date) => date.toISOString().split('T').at(0);
+const getFirstColumnItem = (node) => {
+    if ([...node.classList].includes(ITEM_NAME)) {
+        return node;
+    }
+    return getFirstColumnItem(node.children[0]);
+};
+const CalendarStripe = (0, react_1.forwardRef)((props, ref) => {
+    const { minDayWith = DEFAULT_MIN_WITH, minDays = DEFAULT_MIN_DAYS, maxDays = DEFAULT_MAX_DAYS, render, renderDay, skipWeekends = false, startDate = new Date(), onNextClick = noop_1.default, onPreviousClick = noop_1.default, buttonClassName = '', className = '', } = props;
+    if (render) {
+        console.warn('CalendarStripe has set the "render" prop deprecated. This will be removed in the upcoming releases,' +
+            ' Please use the "renderDay" prop instead.');
+    }
+    if (!render && !renderDay) {
+        console.error('CalendarStripe component is missing the required "renderDay" prop');
+    }
+    const [firstDate, setFirstDate] = (0, react_1.useState)(startDate);
+    const [amountOfDaysToShow, setAmountOfDaysToShow] = (0, react_1.useState)(1);
+    const [enableInitialAnimation, setEnableInitialAnimation] = (0, react_1.useState)(false);
+    // The base for reacting on changing width of the wrapping element.
+    // It uses a ResizeObserver under the hood.
+    const columnWrapperRef = (0, react_1.useRef)(null);
+    const [columnWrapperWidth] = (0, useElementSize_1.default)(columnWrapperRef);
+    const previous = (0, usePrevious_1.default)(getDateString(firstDate));
+    const animationDirection = getDateString(firstDate) > previous ? ANIMATION_NEXT : ANIMATION_BACK;
+    // Update startDate from outside
+    const [previousStartDate, setPreviousStartDate] = (0, react_1.useState)(startDate);
+    if (getDateString(startDate) !== getDateString(previousStartDate)) {
+        setFirstDate(startDate);
+        setPreviousStartDate(startDate);
+    }
+    (0, useAfterMount_1.default)(() => {
+        setEnableInitialAnimation(true);
+    }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!columnWrapperRef.current) {
+            return;
+        }
+        const firstItem = getFirstColumnItem(columnWrapperRef.current.children[0]);
+        if (!firstItem) {
+            return;
+        }
+        // Get the width of the first column to calculate how many columns fit on one page
+        // according to the given minWidth per column
+        const columnWidth = firstItem.getBoundingClientRect().width;
+        // Limit columns per page for given min and max values
+        const allowForLessColumns = amountOfDaysToShow - 1 >= minDays;
+        const allowForMoreColumns = amountOfDaysToShow + 1 <= maxDays;
+        const goSmaller = allowForLessColumns && columnWidth <= minDayWith;
+        const goBigger = allowForMoreColumns && (amountOfDaysToShow + 1) * minDayWith <= columnWrapperWidth;
+        if (goBigger) {
+            const newValue = amountOfDaysToShow + 1;
+            setAmountOfDaysToShow(newValue);
+            return;
+        }
+        if (goSmaller) {
+            const newValue = amountOfDaysToShow - 1;
+            setAmountOfDaysToShow(newValue);
+            return;
+        }
+    }, [columnWrapperWidth, columnWrapperRef.current, amountOfDaysToShow, firstDate]);
+    const handleNext = () => {
+        const newFirstDate = new Date(firstDate);
+        newFirstDate.setDate(newFirstDate.getDate() + amountOfDaysToShow);
+        setFirstDate(newFirstDate);
+        onNextClick(newFirstDate);
+    };
+    const handlePrev = () => {
+        const newFirstDate = new Date(firstDate);
+        newFirstDate.setDate(newFirstDate.getDate() - amountOfDaysToShow);
+        setFirstDate(newFirstDate);
+        onPreviousClick(newFirstDate);
+    };
+    // Re-calculate the dates to show depending on the amount of days to show
+    const dates = [];
+    let addDays = true;
+    let index = 1;
+    while (addDays) {
+        const currentDate = new Date(firstDate);
+        currentDate.setDate(firstDate.getDate() + index);
+        const isSaturday = currentDate.getDay() === 6;
+        const isSunday = currentDate.getDay() === 0;
+        const isWeekend = isSaturday || isSunday;
+        if (isWeekend && !skipWeekends) {
+            dates.push(currentDate);
+        }
+        else if (!isWeekend) {
+            dates.push(currentDate);
+        }
+        index++;
+        if (dates.length === amountOfDaysToShow) {
+            addDays = false;
+        }
+    }
+    const wrapperClassName = (0, classnames_1.default)('CalenderStripe', 'display-flex', 'align-items-center', 'overflow-hidden', 'bg-white', 'border', 'rounded', className);
+    const baseButtonClassName = (0, classnames_1.default)('align-items-center', 'align-self-stretch', 'display-flex', 'hover-scale-105', 'hover-text-color-darkest', 'padding-10', 'cursor-pointer', 'text-color-darker', 'text-size-12', buttonClassName);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ ref: ref, className: wrapperClassName }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassName, onClick: handlePrev }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-left' }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'flex-1-1 overflow-hidden', ref: columnWrapperRef }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, Object.assign({ exitBeforeEnter: true, custom: animationDirection }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, Object.assign({ variants: variants, initial: enableInitialAnimation ? 'pageEnter' : false, animate: 'pageCenter', custom: animationDirection, transition: { duration: ANIMATION_DURATION } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'ColumnWrapper display-flex space-x--1 user-select-none' }, { children: dates.map(date => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${ITEM_NAME} flex-1-1` }, { children: [renderDay ? renderDay(date) : null, render && react_1.default.cloneElement((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: render }), { date })] }), `${getDateString(date)}`))) })) }), getDateString(firstDate)) })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: baseButtonClassName, onClick: handleNext }, { children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-chevron-right' }) }))] })));
+});
+exports.default = CalendarStripe;

package/lib/es/components/carousel/Carousel.d.ts

@@ -1,2 +1,8 @@
-export { _Carousel as default };
-import { default as _Carousel } from "react-bootstrap/Carousel";
+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';
+};
+export default Carousel;

package/lib/es/components/carousel/Carousel.js

@@ -1,13 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-// import { default as BSCarousel } from 'react-bootstrap/Carousel';
-// import { default as _Carousel } from 'react-bootstrap/Carousel';
-// const Carousel = props => {
-//     return <_Carousel {...props} />;
-// };
-// export default Carousel;
-const Carousel_1 = tslib_1.__importDefault(require("react-bootstrap/Carousel"));
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return Carousel_1.default; } });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const Carousel_1 = tslib_1.__importDefault(require("react-bootstrap/Carousel"));
+const Carousel = Carousel_1.default;
+Carousel.PREV = 'prev';
+Carousel.NEXT = 'next';
+exports.default = Carousel;

package/lib/es/components/charts/Area.d.ts

@@ -1,13 +1,13 @@
-export default Area;
-declare function Area(): null;
-declare namespace Area {
-    namespace defaultProps {
-        const dataKey: string;
-        const dataUnit: string;
-        const strokeColor: string;
-        const gradientId: string;
-        const legendType: string;
-        const type: string;
-        const isAnimationActive: boolean;
-    }
-}
+export default Area;
+declare function Area(): null;
+declare namespace Area {
+    namespace defaultProps {
+        const dataKey: string;
+        const dataUnit: string;
+        const strokeColor: string;
+        const gradientId: string;
+        const legendType: string;
+        const type: string;
+        const isAnimationActive: boolean;
+    }
+}

package/lib/es/components/charts/Area.js

@@ -1,13 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const Area = () => null;
-Area.defaultProps = {
-    dataKey: 'value',
-    dataUnit: '',
-    strokeColor: 'color-coldplay-fountain',
-    gradientId: 'areaGradient',
-    legendType: 'square',
-    type: 'monotone',
-    isAnimationActive: true,
-};
-exports.default = Area;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const Area = () => null;
+Area.defaultProps = {
+    dataKey: 'value',
+    dataUnit: '',
+    strokeColor: 'color-coldplay-fountain',
+    gradientId: 'areaGradient',
+    legendType: 'square',
+    type: 'monotone',
+    isAnimationActive: true,
+};
+exports.default = Area;

package/lib/es/components/charts/AreaChart.d.ts

@@ -1,17 +1,17 @@
-export default AreaChart;
-declare function AreaChart(props: any): JSX.Element;
-declare namespace AreaChart {
-    namespace defaultProps {
-        const width: number;
-        const height: number;
-        const data: never[];
-        const dataUnit: string;
-        const gradients: never[];
-        const areas: never[];
-        const showXAxis: boolean;
-        const showYAxis: boolean;
-        const showGrid: boolean;
-        const brush: boolean;
-        const tooltip: JSX.Element;
-    }
-}
+export default AreaChart;
+declare function AreaChart(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace AreaChart {
+    namespace defaultProps {
+        const width: number;
+        const height: number;
+        const data: never[];
+        const dataUnit: string;
+        const gradients: never[];
+        const areas: never[];
+        const showXAxis: boolean;
+        const showYAxis: boolean;
+        const showGrid: boolean;
+        const brush: boolean;
+        const tooltip: import("react/jsx-runtime").JSX.Element;
+    }
+}

package/lib/es/components/charts/AreaChart.js

@@ -1,42 +1,42 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = tslib_1.__importDefault(require("react"));
-const recharts_1 = require("recharts");
-const chartHelper_1 = require("./chartHelper");
-const AreaGradient_1 = tslib_1.__importDefault(require("./AreaGradient"));
-const ChartTooltip_1 = tslib_1.__importDefault(require("./ChartTooltip"));
-const AreaChart = props => {
-    const { width, height, data, dataUnit, dataKey, gradients, areas, xAxisOptions, yAxisOptions, gridOptions, showXAxis, showYAxis, showGrid, legend, brush, tooltip } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "xAxisOptions", "yAxisOptions", "gridOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
-    const areasWithGradient = areas.map(area => {
-        const _a = area.props, { strokeColor } = _a, remainingAreaProps = tslib_1.__rest(_a, ["strokeColor"]);
-        const gradientId = area.key;
-        const stroke = (0, chartHelper_1.getColor)(strokeColor);
-        return {
-            area: (0, react_1.createElement)(recharts_1.Area, Object.assign({}, remainingAreaProps, { key: area.key, stroke: stroke, fill: `url(#${gradientId})` })),
-            gradient: (0, jsx_runtime_1.jsx)(AreaGradient_1.default, { id: gradientId, color: strokeColor }, area.key),
-        };
-    });
-    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({ width: '100%', height: '100%' }, { children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [(0, jsx_runtime_1.jsxs)("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, Object.assign({}, tooltip.props)), legend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ wrapperStyle: legend.props.verticalAlign === 'bottom' ? { bottom: 0 } : legend.props.wrapperStyle }, legend.props))), areasWithGradient.map(areaWithGradient => areaWithGradient.area), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
-};
-AreaChart.defaultProps = {
-    width: 480,
-    height: 200,
-    data: [],
-    dataUnit: '',
-    // dataKey,
-    gradients: [],
-    areas: [],
-    // xAxisOptions,
-    // yAxisOptions,
-    // gridOptions,
-    showXAxis: true,
-    showYAxis: false,
-    showGrid: false,
-    // legend,
-    brush: false,
-    tooltip: (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, {}),
-};
-exports.default = AreaChart;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = tslib_1.__importDefault(require("react"));
+const recharts_1 = require("recharts");
+const chartHelper_1 = require("./chartHelper");
+const AreaGradient_1 = tslib_1.__importDefault(require("./AreaGradient"));
+const ChartTooltip_1 = tslib_1.__importDefault(require("./ChartTooltip"));
+const AreaChart = props => {
+    const { width, height, data, dataUnit, dataKey, gradients, areas, xAxisOptions, yAxisOptions, gridOptions, showXAxis, showYAxis, showGrid, legend, brush, tooltip } = props, remainingProps = tslib_1.__rest(props, ["width", "height", "data", "dataUnit", "dataKey", "gradients", "areas", "xAxisOptions", "yAxisOptions", "gridOptions", "showXAxis", "showYAxis", "showGrid", "legend", "brush", "tooltip"]);
+    const areasWithGradient = areas.map(area => {
+        const _a = area.props, { strokeColor } = _a, remainingAreaProps = tslib_1.__rest(_a, ["strokeColor"]);
+        const gradientId = area.key;
+        const stroke = (0, chartHelper_1.getColor)(strokeColor);
+        return {
+            area: (0, react_1.createElement)(recharts_1.Area, Object.assign({}, remainingAreaProps, { key: area.key, stroke: stroke, fill: `url(#${gradientId})` })),
+            gradient: (0, jsx_runtime_1.jsx)(AreaGradient_1.default, { id: gradientId, color: strokeColor }, area.key),
+        };
+    });
+    return ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, Object.assign({ width: '100%', height: '100%' }, { children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, Object.assign({ width: width, height: height, data: data, margin: { top: 15, right: 15, left: 15, bottom: 15 } }, remainingProps, { children: [(0, jsx_runtime_1.jsxs)("defs", { children: [gradients, areasWithGradient.map(areaWithGradient => areaWithGradient.gradient)] }), showGrid && (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, Object.assign({ strokeDasharray: '3 3' }, (0, chartHelper_1.mapGridOptions)(gridOptions))), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, Object.assign({ hide: !showXAxis, dataKey: dataKey }, xAxisOptions)), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, Object.assign({ hide: !showYAxis, unit: dataUnit }, yAxisOptions)), tooltip && (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, Object.assign({}, tooltip.props)), legend && ((0, jsx_runtime_1.jsx)(recharts_1.Legend, Object.assign({ wrapperStyle: legend.props.verticalAlign === 'bottom' ? { bottom: 0 } : legend.props.wrapperStyle }, legend.props))), areasWithGradient.map(areaWithGradient => areaWithGradient.area), brush && (0, jsx_runtime_1.jsx)(recharts_1.Brush, { stroke: (0, chartHelper_1.getColor)('gray') })] })) })));
+};
+AreaChart.defaultProps = {
+    width: 480,
+    height: 200,
+    data: [],
+    dataUnit: '',
+    // dataKey,
+    gradients: [],
+    areas: [],
+    // xAxisOptions,
+    // yAxisOptions,
+    // gridOptions,
+    showXAxis: true,
+    showYAxis: false,
+    showGrid: false,
+    // legend,
+    brush: false,
+    tooltip: (0, jsx_runtime_1.jsx)(ChartTooltip_1.default, {}),
+};
+exports.default = AreaChart;

package/lib/es/components/charts/AreaGradient.d.ts

@@ -1,11 +1,11 @@
-export default AreaGradient;
-declare function AreaGradient({ id, color }: {
-    id: any;
-    color: any;
-}): JSX.Element;
-declare namespace AreaGradient {
-    namespace defaultProps {
-        const id: string;
-        const color: string;
-    }
-}
+export default AreaGradient;
+declare function AreaGradient({ id, color }: {
+    id: any;
+    color: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace AreaGradient {
+    namespace defaultProps {
+        const id: string;
+        const color: string;
+    }
+}

package/lib/es/components/charts/AreaGradient.js

@@ -1,12 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("react"));
-const chartHelper_1 = require("./chartHelper");
-const AreaGradient = ({ id, color }) => ((0, jsx_runtime_1.jsxs)("linearGradient", Object.assign({ id: id, x1: '0', y1: '0', x2: '0', y2: '1' }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: '5%', stopColor: (0, chartHelper_1.getColor)(color), stopOpacity: 0.8 }), (0, jsx_runtime_1.jsx)("stop", { offset: '95%', stopColor: (0, chartHelper_1.getColor)(color), stopOpacity: 0 })] }), id));
-AreaGradient.defaultProps = {
-    id: 'areaGradient',
-    color: 'color-coldplay-fountain',
-};
-exports.default = AreaGradient;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const chartHelper_1 = require("./chartHelper");
+const AreaGradient = ({ id, color }) => ((0, jsx_runtime_1.jsxs)("linearGradient", Object.assign({ id: id, x1: '0', y1: '0', x2: '0', y2: '1' }, { children: [(0, jsx_runtime_1.jsx)("stop", { offset: '5%', stopColor: (0, chartHelper_1.getColor)(color), stopOpacity: 0.8 }), (0, jsx_runtime_1.jsx)("stop", { offset: '95%', stopColor: (0, chartHelper_1.getColor)(color), stopOpacity: 0 })] }), id));
+AreaGradient.defaultProps = {
+    id: 'areaGradient',
+    color: 'color-coldplay-fountain',
+};
+exports.default = AreaGradient;

package/lib/es/components/charts/Bar.d.ts

@@ -1,10 +1,10 @@
-export default Bar;
-declare function Bar(): null;
-declare namespace Bar {
-    namespace defaultProps {
-        const isAnimationActive: boolean;
-        const dataKey: string;
-        const dataUnit: string;
-        const color: string;
-    }
-}
+export default Bar;
+declare function Bar(): null;
+declare namespace Bar {
+    namespace defaultProps {
+        const isAnimationActive: boolean;
+        const dataKey: string;
+        const dataUnit: string;
+        const color: string;
+    }
+}