@aivenio/aquarium 1.18.0-rc1 → 1.18.0-rc3

package/dist/src/molecules/Notification/Notification.js

@@ -0,0 +1,88 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { createContext, useContext, useEffect, useReducer } from 'react';
+import groupBy from 'lodash/groupBy';
+import { Alert } from '../../../src/molecules/Alert/Alert';
+import { Spacing } from '../../../src/molecules/Spacing/Spacing';
+import { ActionTypes, } from './types';
+const NotificationContext = createContext(null);
+export const useNotificationContext = () => {
+    const context = useContext(NotificationContext);
+    if (context === null) {
+        throw new Error('NotificationContext was used outside of provider.');
+    }
+    return context;
+};
+export const useNotification = () => {
+    const [_, dispatch] = useNotificationContext();
+    return (notification) => {
+        dispatch({ type: ActionTypes.Notify, notification });
+    };
+};
+const toNotification = (_a) => {
+    var { id, variant, position, duration } = _a, notification = __rest(_a, ["id", "variant", "position", "duration"]);
+    return (Object.assign(Object.assign({}, notification), { id: id || crypto.randomUUID(), variant: variant || 'default', position: position || 'top', duration: duration || variant === 'danger' ? Infinity : 6000 }));
+};
+const reducer = (state, action) => {
+    switch (action.type) {
+        case ActionTypes.Notify:
+            return Object.assign(Object.assign({}, state), { notifications: [...state.notifications, toNotification(action.notification)] });
+        case ActionTypes.Dismiss:
+            return Object.assign(Object.assign({}, state), { notifications: state.notifications.filter((notification) => notification.id !== action.notificationId) });
+        default:
+            throw new Error('Unsupported action type.');
+    }
+};
+export const NotificationProvider = ({ children }) => {
+    const [state, dispatch] = useReducer(reducer, { notifications: [] });
+    return React.createElement(NotificationContext.Provider, { value: [state, dispatch] }, children);
+};
+const isCentered = (position) => position === 'top' || position === 'bottom';
+const PADDING = 20;
+const Notification = ({ notification, onDismiss }) => {
+    const { id, message, title, variant, duration } = notification;
+    useEffect(() => {
+        let timer;
+        if (duration !== Infinity) {
+            timer = setTimeout(() => {
+                onDismiss(id);
+            }, duration);
+        }
+        return () => {
+            if (timer) {
+                clearTimeout(timer);
+            }
+        };
+    }, [duration]);
+    return (React.createElement(Alert, { title: title, type: variant === 'danger' ? 'error' : 'information' }, message));
+};
+export const NotificationConsumer = () => {
+    const [state, dispatch] = useNotificationContext();
+    const notificationsByPosition = groupBy(state.notifications, 'position');
+    const positions = Object.keys(notificationsByPosition);
+    const onDismiss = (notificationId) => {
+        dispatch({ type: ActionTypes.Dismiss, notificationId });
+    };
+    return (React.createElement("div", null, positions.map((position) => {
+        var _a;
+        return (React.createElement(Spacing, { gap: "3", key: position, style: {
+                position: 'fixed',
+                bottom: position.includes('bottom') ? PADDING : undefined,
+                top: position.includes('top') ? PADDING : undefined,
+                right: position.includes('right') ? PADDING : undefined,
+                left: isCentered(position) ? '50%' : position.includes('left') ? PADDING : undefined,
+                transform: isCentered(position) ? 'translateX(-50%)' : undefined,
+                zIndex: 9000,
+            } }, (_a = notificationsByPosition[position]) === null || _a === void 0 ? void 0 : _a.map((notification) => (React.createElement(Notification, { key: notification.id, notification: notification, onDismiss: onDismiss })))));
+    })));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTm90aWZpY2F0aW9uLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL21vbGVjdWxlcy9Ob3RpZmljYXRpb24vTm90aWZpY2F0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxFQUFFLEVBQWlCLGFBQWEsRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLFVBQVUsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUMvRixPQUFPLE9BQU8sTUFBTSxnQkFBZ0IsQ0FBQztBQUVyQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDbEQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBRXhELE9BQU8sRUFPTCxXQUFXLEdBQ1osTUFBTSxTQUFTLENBQUM7QUFFakIsTUFBTSxtQkFBbUIsR0FBRyxhQUFhLENBQW9DLElBQUksQ0FBQyxDQUFDO0FBRW5GLE1BQU0sQ0FBQyxNQUFNLHNCQUFzQixHQUFHLEdBQUcsRUFBRTtJQUN6QyxNQUFNLE9BQU8sR0FBRyxVQUFVLENBQUMsbUJBQW1CLENBQUMsQ0FBQztJQUNoRCxJQUFJLE9BQU8sS0FBSyxJQUFJLEVBQUU7UUFDcEIsTUFBTSxJQUFJLEtBQUssQ0FBQyxtREFBbUQsQ0FBQyxDQUFDO0tBQ3RFO0lBQ0QsT0FBTyxPQUFPLENBQUM7QUFDakIsQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sZUFBZSxHQUFHLEdBQUcsRUFBRTtJQUNsQyxNQUFNLENBQUMsQ0FBQyxFQUFFLFFBQVEsQ0FBQyxHQUFHLHNCQUFzQixFQUFFLENBQUM7SUFDL0MsT0FBTyxDQUFDLFlBQXNDLEVBQUUsRUFBRTtRQUNoRCxRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsV0FBVyxDQUFDLE1BQU0sRUFBRSxZQUFZLEVBQUUsQ0FBQyxDQUFDO0lBQ3ZELENBQUMsQ0FBQztBQUNKLENBQUMsQ0FBQztBQUVGLE1BQU0sY0FB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

package/dist/src/molecules/Notification/Notification.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/molecules/Notification/Notification.spec.js

@@ -0,0 +1,44 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Button, NotificationConsumer, NotificationProvider, useNotification } from '../../../src/system';
+describe('<Notification />', () => {
+    let user;
+    beforeEach(() => {
+        user = userEvent.setup();
+        render(React.createElement(Context, null));
+    });
+    const Context = () => (React.createElement(NotificationProvider, null,
+        React.createElement(Component, null),
+        React.createElement(NotificationConsumer, null)));
+    const Component = () => {
+        const notify = useNotification();
+        const onClick = () => {
+            notify({ message: 'Hello World', id: 'uuid-' + Math.random });
+        };
+        return React.createElement(Button, { onClick: onClick }, "Notify");
+    };
+    it('dispatched notifications are rendered', () => __awaiter(void 0, void 0, void 0, function* () {
+        const button = screen.getByRole('button', { name: 'Notify' });
+        yield user.click(button);
+        yield screen.findByText('Hello World');
+    }));
+    it('multiple notifications are rendered', () => __awaiter(void 0, void 0, void 0, function* () {
+        const button = screen.getByRole('button', { name: 'Notify' });
+        yield user.click(button);
+        yield user.click(button);
+        yield user.click(button);
+        const notifications = yield screen.findAllByText('Hello World');
+        expect(notifications.length).toBe(3);
+    }));
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTm90aWZpY2F0aW9uLnNwZWMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL05vdGlmaWNhdGlvbi9Ob3RpZmljYXRpb24uc3BlYy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDeEQsT0FBTyxTQUFTLE1BQU0sNkJBQTZCLENBQUM7QUFFcEQsT0FBTyxFQUFFLE1BQU0sRUFBRSxvQkFBb0IsRUFBRSxvQkFBb0IsRUFBRSxlQUFlLEVBQUUsTUFBTSxZQUFZLENBQUM7QUFFakcsUUFBUSxDQUFDLGtCQUFrQixFQUFFLEdBQUcsRUFBRTtJQUNoQyxJQUFJLElBQXdDLENBQUM7SUFFN0MsVUFBVSxDQUFDLEdBQUcsRUFBRTtRQUNkLElBQUksR0FBRyxTQUFTLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDekIsTUFBTSxDQUFDLG9CQUFDLE9BQU8sT0FBRyxDQUFDLENBQUM7SUFDdEIsQ0FBQyxDQUFDLENBQUM7SUFFSCxNQUFNLE9BQU8sR0FBYSxHQUFHLEVBQUUsQ0FBQyxDQUM5QixvQkFBQyxvQkFBb0I7UUFDbkIsb0JBQUMsU0FBUyxPQUFHO1FBQ2Isb0JBQUMsb0JBQW9CLE9BQUcsQ0FDSCxDQUN4QixDQUFDO0lBRUYsTUFBTSxTQUFTLEdBQUcsR0FBRyxFQUFFO1FBQ3JCLE1BQU0sTUFBTSxHQUFHLGVBQWUsRUFBRSxDQUFDO1FBQ2pDLE1BQU0sT0FBTyxHQUFHLEdBQUcsRUFBRTtZQUNuQixNQUFNLENBQUMsRUFBRSxPQUFPLEVBQUUsYUFBYSxFQUFFLEVBQUUsRUFBRSxPQUFPLEdBQUcsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7UUFDaEUsQ0FBQyxDQUFDO1FBQ0YsT0FBTyxvQkFBQyxNQUFNLElBQUMsT0FBTyxFQUFFLE9BQU8sYUFBaUIsQ0FBQztJQUNuRCxDQUFDLENBQUM7SUFFRixFQUFFLENBQUMsdUNBQXVDLEVBQUUsR0FBUyxFQUFFO1FBQ3JELE1BQU0sTUFBTSxHQUFHLE1BQU0sQ0FBQyxTQUFTLENBQUMsUUFBUSxFQUFFLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUM7UUFDOUQsTUFBTSxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3pCLE1BQU0sTUFBTSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUN6QyxDQUFDLENBQUEsQ0FBQyxDQUFDO0lBRUgsRUFBRSxDQUFDLHFDQUFxQyxFQUFFLEdBQVMsRUFBRTtRQUNuRCxNQUFNLE1BQU0sR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDLFFBQVEsRUFBRSxFQUFFLElBQUksRUFBRSxRQUFRLEVBQUUsQ0FBQyxDQUFDO1FBQzlELE1BQU0sSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUN6QixNQUFNLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDekIsTUFBTSxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3pCLE1BQU0sYUFBYSxHQUFHLE1BQU0sTUFBTSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUNoRSxNQUFNLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsQ0FBQztJQUN2QyxDQUFDLENBQUEsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyxDQUFDLENBQUMifQ==

package/dist/src/molecules/Notification/types.d.ts

@@ -0,0 +1,37 @@
+export declare type Position = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'top' | 'bottom';
+export declare type NotificationId = ReturnType<typeof crypto.randomUUID> | string;
+export declare type Variant = 'danger' | 'default';
+declare type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+export declare type Notification = {
+    /**
+     * The duration to show the notification in milliseconds. Set to {@link Infinity} to
+     * make the notification persistent. Persistent notifications can only be hidden by user
+     * input. type "danger" is persistent by default.
+     */
+    duration: number;
+    position: Position;
+    title?: string;
+    message: string;
+    variant: Variant;
+    /**
+     * Either ID provided by the dispatcher or if not provided it will be generated.
+     * This will be used to dismiss and control the notification you have dispatched.
+     */
+    id: NotificationId;
+};
+export declare type DispatchableNotification = PartialBy<Notification, 'id' | 'duration' | 'position' | 'variant'>;
+export declare type State = {
+    notifications: Notification[];
+};
+export declare enum ActionTypes {
+    Notify = 0,
+    Dismiss = 1
+}
+export declare type Actions = {
+    type: ActionTypes.Notify;
+    notification: DispatchableNotification;
+} | {
+    type: ActionTypes.Dismiss;
+    notificationId: NotificationId;
+};
+export {};

package/dist/src/molecules/Notification/types.js

@@ -0,0 +1,6 @@
+export var ActionTypes;
+(function (ActionTypes) {
+    ActionTypes[ActionTypes["Notify"] = 0] = "Notify";
+    ActionTypes[ActionTypes["Dismiss"] = 1] = "Dismiss";
+})(ActionTypes || (ActionTypes = {}));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL05vdGlmaWNhdGlvbi90eXBlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2QkEsTUFBTSxDQUFOLElBQVksV0FHWDtBQUhELFdBQVksV0FBVztJQUNyQixpREFBTSxDQUFBO0lBQ04sbURBQU8sQ0FBQTtBQUNULENBQUMsRUFIVyxXQUFXLEtBQVgsV0FBVyxRQUd0QiJ9

package/dist/src/molecules/Popover/PopoverOverlay.d.ts

@@ -3,7 +3,7 @@ import { type AriaOverlayProps } from '@react-aria/overlays';
 import { type OverlayTriggerState } from '@react-stately/overlays';
 import { type PositionProps } from '@react-types/overlays';
 import { type PopoverPlacement } from './Popover';
-export declare const PopoverOverlay: React.ForwardRefExoticComponent<AriaOverlayProps & Pick<PositionProps, "offset" | "shouldFlip" | "crossOffset"> & {
+export declare const PopoverOverlay: React.ForwardRefExoticComponent<AriaOverlayProps & Pick<PositionProps, "offset" | "crossOffset" | "shouldFlip"> & {
     id?: string | undefined;
     role?: React.AriaRole | undefined;
     triggerRef: React.RefObject<Element>;

package/dist/src/molecules/Spacing/Spacing.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type BoxProps } from '../../../src/molecules/Box/Box';
 import type twTheme from '../../../tailwind.theme.json';
-export declare type SpacingProps = Pick<BoxProps<'div'>, 'alignContent' | 'alignItems' | 'alignSelf' | 'justifyContent'> & {
+export declare type SpacingProps = Pick<BoxProps<'div'>, 'alignContent' | 'alignItems' | 'alignSelf' | 'justifyContent' | 'style'> & {
     /**
      * Gap between children elements.
      */

package/dist/src/molecules/Spacing/Spacing.js

@@ -15,4 +15,4 @@ export const Spacing = (_a) => {
     var { gap, row } = _a, rest = __rest(_a, ["gap", "row"]);
     return React.createElement(Box, Object.assign({}, rest, { display: "flex", flexDirection: row ? 'row' : 'column', gap: gap }));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2luZy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU3BhY2luZy9TcGFjaW5nLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQWlCLEdBQUcsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBZTNELE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBMkIsQ0FBQyxFQUFxQixFQUFFLEVBQUU7UUFBekIsRUFBRSxHQUFHLEVBQUUsR0FBRyxPQUFXLEVBQU4sSUFBSSxjQUFuQixjQUFxQixDQUFGO0lBQ2pFLE9BQU8sb0JBQUMsR0FBRyxvQkFBSyxJQUFJLElBQUUsT0FBTyxFQUFDLE1BQU0sRUFBQyxhQUFhLEVBQUUsR0FBRyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFFBQVEsRUFBRSxHQUFHLEVBQUUsR0FBRyxJQUFJLENBQUM7QUFDM0YsQ0FBQyxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU3BhY2luZy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU3BhY2luZy9TcGFjaW5nLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQWlCLEdBQUcsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBa0IzRCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQTJCLENBQUMsRUFBcUIsRUFBRSxFQUFFO1FBQXpCLEVBQUUsR0FBRyxFQUFFLEdBQUcsT0FBVyxFQUFOLElBQUksY0FBbkIsY0FBcUIsQ0FBRjtJQUNqRSxPQUFPLG9CQUFDLEdBQUcsb0JBQUssSUFBSSxJQUFFLE9BQU8sRUFBQyxNQUFNLEVBQUMsYUFBYSxFQUFFLEdBQUcsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxRQUFRLEVBQUUsR0FBRyxFQUFFLEdBQUcsSUFBSSxDQUFDO0FBQzNGLENBQUMsQ0FBQyJ9

package/dist/src/molecules/index.d.ts

@@ -39,6 +39,7 @@ export * from './MultiInput/MultiInput';
 export * from './MultiSelect/MultiSelect';
 export * from './NativeSelect/NativeSelect';
 export * from './Navigation/Navigation';
+export * from './Notification/Notification';
 export * from './PageHeader/PageHeader';
 export * from './Pagination/Pagination';
 export * from './Popover/Popover';

package/dist/src/molecules/index.js

@@ -40,6 +40,7 @@ export * from './MultiInput/MultiInput';
 export * from './MultiSelect/MultiSelect';
 export * from './NativeSelect/NativeSelect';
 export * from './Navigation/Navigation';
+export * from './Notification/Notification';
 export * from './PageHeader/PageHeader';
 export * from './Pagination/Pagination';
 export * from './Popover/Popover';
@@ -73,4 +74,4 @@ export * from '../utils/table/useTableSelect';
 export * from '../utils/table/useTableSort';
 export * from './Pagination/usePagination';
 export const SelectItem = Select.Item;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbW9sZWN1bGVzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUVoRCxzREFBc0Q7QUFDdEQsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxXQUFXLENBQUM7QUFDMUIsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sMEJBQTBCLENBQUM7QUFDN0QsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHFDQUFxQyxDQUFDO0FBQ3BELGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxxQ0FBcUMsQ0FBQztBQUNwRCxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHlCQUF5QixDQUFDO0FBRXhDLHVDQUF1QztBQUN2QyxjQUFjLHNCQUFzQixDQUFDO0FBQ3JDLGNBQWMsZ0NBQWdDLENBQUM7QUFDL0MsY0FBYywrQkFBK0IsQ0FBQztBQUM5QyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsNEJBQTRCLENBQUM7QUFFM0MsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLE1BQU0sQ0FBQyxJQUFJLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbW9sZWN1bGVzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUVoRCxzREFBc0Q7QUFDdEQsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxXQUFXLENBQUM7QUFDMUIsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyx1QkFBdUIsQ0FBQztBQUN0QyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUM3RCxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMscUNBQXFDLENBQUM7QUFDcEQsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHFDQUFxQyxDQUFDO0FBQ3BELGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMseUJBQXlCLENBQUM7QUFFeEMsdUNBQXVDO0FBQ3ZDLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyw0QkFBNEIsQ0FBQztBQUUzQyxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyJ9

package/dist/src/utils/setupTests.js

@@ -1,2 +1,17 @@
 import '@testing-library/jest-dom';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0dXBUZXN0cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy9zZXR1cFRlc3RzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sMkJBQTJCLENBQUMifQ==
+jest.mock('lodash/uniqueId', () => {
+    return {
+        __esModule: true,
+        default: jest.fn(() => 'abcde'),
+    };
+});
+beforeAll(() => {
+    Object.defineProperty(window, 'IntersectionObserver', {
+        writable: true,
+        value: jest.fn().mockImplementation(() => ({
+            observe: () => jest.fn(),
+            disconnect: () => jest.fn(),
+        })),
+    });
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0dXBUZXN0cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy9zZXR1cFRlc3RzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sMkJBQTJCLENBQUM7QUFFbkMsSUFBSSxDQUFDLElBQUksQ0FBQyxpQkFBaUIsRUFBRSxHQUFHLEVBQUU7SUFDaEMsT0FBTztRQUNMLFVBQVUsRUFBRSxJQUFJO1FBQ2hCLE9BQU8sRUFBRSxJQUFJLENBQUMsRUFBRSxDQUFDLEdBQUcsRUFBRSxDQUFDLE9BQU8sQ0FBQztLQUNoQyxDQUFDO0FBQ0osQ0FBQyxDQUFDLENBQUM7QUFFSCxTQUFTLENBQUMsR0FBRyxFQUFFO0lBQ2IsTUFBTSxDQUFDLGNBQWMsQ0FBQyxNQUFNLEVBQUUsc0JBQXNCLEVBQUU7UUFDcEQsUUFBUSxFQUFFLElBQUk7UUFDZCxLQUFLLEVBQUUsSUFBSSxDQUFDLEVBQUUsRUFBRSxDQUFDLGtCQUFrQixDQUFDLEdBQUcsRUFBRSxDQUFDLENBQUM7WUFDekMsT0FBTyxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUU7WUFDeEIsVUFBVSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUU7U0FDNUIsQ0FBQyxDQUFDO0tBQ0osQ0FBQyxDQUFDO0FBQ0wsQ0FBQyxDQUFDLENBQUMifQ==

package/dist/styles.css

@@ -362,6 +362,42 @@ input[type='number'].no-arrows::-webkit-inner-spin-button,input[type='number'].n
 input[type='number'].no-arrows {
   -moz-appearance: textfield; /* Firefox */
 }
+.recharts-cartesian-axis-tick-value {
+  font-family: Inter;
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.26;
+  text-transform: none;
+  fill: #787885;
+}
+.recharts-tooltip-wrapper {
+  font-family: Inter;
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.26;
+  text-transform: none;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.recharts-tooltip-item {
+  align-items: center;
+}
+.recharts-tooltip-item::before {
+  display: inline-block;
+  content: ' ';
+  width: 10px;
+  height: 10px;
+  margin-right: 4px;
+  background: currentColor;
+}
+.recharts-tooltip-item>span {
+  color: white;
+}
+.recharts-tooltip-item-separator {
+  margin-right: 2px;
+}
 .container {
   width: 100%;
 }
@@ -687,8 +723,7 @@ input[type='number'].no-arrows {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity));
 }
-/* Because our current icons are with stroke-width: 1.5 which works for everything else except icon inside button. so we adjust it manually here */
-button svg path {
+.icon-stroke-2 svg path {
   stroke-width: 2;
 }
 .pointer-events-none {

package/dist/styles_timescaledb.css

@@ -362,6 +362,42 @@ input[type='number'].no-arrows::-webkit-inner-spin-button,input[type='number'].n
 input[type='number'].no-arrows {
   -moz-appearance: textfield; /* Firefox */
 }
+.recharts-cartesian-axis-tick-value {
+  font-family: Inter;
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.26;
+  text-transform: none;
+  fill: #787885;
+}
+.recharts-tooltip-wrapper {
+  font-family: Inter;
+  font-size: 12px;
+  font-weight: 400;
+  font-style: normal;
+  line-height: 1.26;
+  text-transform: none;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.recharts-tooltip-item {
+  align-items: center;
+}
+.recharts-tooltip-item::before {
+  display: inline-block;
+  content: ' ';
+  width: 10px;
+  height: 10px;
+  margin-right: 4px;
+  background: currentColor;
+}
+.recharts-tooltip-item>span {
+  color: white;
+}
+.recharts-tooltip-item-separator {
+  margin-right: 2px;
+}
 .container {
   width: 100%;
 }
@@ -686,8 +722,7 @@ input[type='number'].no-arrows {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity));
 }
-/* Because our current icons are with stroke-width: 1.5 which works for everything else except icon inside button. so we adjust it manually here */
-button svg path {
+.icon-stroke-2 svg path {
   stroke-width: 2;
 }
 .pointer-events-none {