@aivenio/aquarium 1.1.0 → 1.2.0

package/dist/src/utils/table/types.d.ts

@@ -0,0 +1,129 @@
+import React, { AriaAttributes } from 'react';
+import { ChipStatus } from '../../../src/components/Chip/Chip';
+import { ActionType } from '../../../types/ActionType';
+import { RequireAtLeastOne } from '../../../types/utils';
+import { Weight } from '../../../src/components/Template/Template';
+export declare type TextAlign = 'left' | 'center' | 'right';
+export declare type SortDirection = AriaAttributes['aria-sort'];
+export declare type Column = {
+    /**
+     * Type of the column.
+     */
+    type: 'text' | 'number' | 'action' | 'custom' | 'status' | 'item';
+    /**
+     * Display name for the column.
+     */
+    headerName: string;
+};
+declare type Formatter<R, K extends keyof R, V = R[K]> = (value: V, row: R, index: number, rows: R[]) => string;
+export declare type FieldColumn<T, K extends keyof T = keyof T> = K extends keyof T ? {
+    /**
+     * Name of the property field that this column represents in the data rows.
+     */
+    field: K;
+    /**
+     * When true, user will be able to sort data rows by clicking this column header.
+     */
+    sortable?: boolean;
+    /**
+     * Formatter function. Use for example for formatting dates or capitalizing words.
+     * Sorting will still be based on the unformatted value.
+     */
+    formatter?: Formatter<T, K>;
+} : never;
+export declare type TextColumn<R> = FieldColumn<R> & {
+    /**
+     * Type of the column.
+     */
+    type: 'text';
+};
+export declare type NumberColumn<R> = FieldColumn<R> & {
+    /**
+     * Type of the column.
+     */
+    type: 'number';
+};
+export declare type ActionColumn<R> = {
+    /**
+     * Type of the column.
+     */
+    type: 'action';
+    /**
+     * Callback function that resolves to Button props.
+     */
+    action: (row: R, index: number, rows: R[]) => ActionType;
+};
+export declare type CustomColumn<R> = {
+    /**
+     * Type of the column.
+     */
+    type: 'custom';
+    /**
+     * Unsafe render method. Consider consulting the designer instead of using this.
+     * Using render callback will also disallow sorting on that column.
+     */
+    UNSAFE_render: (row: R, index: number, rows: R[]) => React.ReactNode;
+};
+export declare type TableItem = RequireAtLeastOne<{
+    title: React.ReactNode;
+    caption?: React.ReactNode;
+    image?: string;
+    imageAlt?: string;
+    imageSize?: number;
+}, 'caption' | 'image'>;
+declare type ItemColumn<T> = Column & {
+    /**
+     * Type of the column.
+     */
+    type: 'item';
+    /**
+     * Callback function that resolves to TableItem props
+     */
+    item: (row: T, index: number, rows: T[]) => TableItem;
+};
+declare type StatusColumn<R> = {
+    /**
+     * Type of the column.
+     */
+    type: 'status';
+    /**
+     * Callback function that resolves to StatusChip props
+     */
+    status: (row: R, index: number, rows: R[]) => {
+        status: ChipStatus;
+        text: string | number;
+    };
+};
+declare type ListColumn = Column & {
+    /**
+     * Width of the column. Number for pixels and string for percentages
+     */
+    width?: number | Weight;
+};
+declare type TableColumn = Column & {
+    /**
+     * Width of the column. Number for pixels and string for percentages
+     */
+    width?: number | `${number}%`;
+};
+export declare type DataListColumn<R extends DataTableRow> = DataColumn<R, ListColumn>;
+export declare type DataTableColumn<R extends DataTableRow> = DataColumn<R, TableColumn>;
+declare type DataColumn<R extends DataTableRow, C extends Column> = C & (TextColumn<R> | CustomColumn<R> | StatusColumn<R> | NumberColumn<R> | ActionColumn<R> | ItemColumn<R>);
+export declare type DataTableRow = Record<string, any> & {
+    /**
+     * Assigned ID for each data row.
+     * Used as a key. Use something unqiue derived from the data, not index.
+     */
+    id: string | number;
+};
+export declare type Sort<R extends DataTableRow> = {
+    key: keyof R;
+    direction: SortDirection;
+};
+export declare const toSortDirection: (direction: SortDirection | undefined) => 'asc' | 'desc' | false;
+declare type CellProps = {
+    key: string;
+    align: TextAlign;
+};
+export declare const cellProps: <C extends Column>(column: C) => CellProps;
+export {};

package/dist/src/utils/table/types.js

@@ -0,0 +1,6 @@
+export const toSortDirection = (direction) => direction === 'ascending' ? 'asc' : direction === 'descending' ? 'desc' : false;
+export const cellProps = (column) => ({
+    key: column.headerName,
+    align: column.type === 'number' || column.type === 'action' ? 'right' : 'left',
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdXRpbHMvdGFibGUvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNklBLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxDQUFDLFNBQW9DLEVBQTBCLEVBQUUsQ0FDOUYsU0FBUyxLQUFLLFdBQVcsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxTQUFTLEtBQUssWUFBWSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztBQU9sRixNQUFNLENBQUMsTUFBTSxTQUFTLEdBQUcsQ0FBbUIsTUFBUyxFQUFhLEVBQUUsQ0FBQyxDQUFDO0lBQ3BFLEdBQUcsRUFBRSxNQUFNLENBQUMsVUFBVTtJQUN0QixLQUFLLEVBQUUsTUFBTSxDQUFDLElBQUksS0FBSyxRQUFRLElBQUksTUFBTSxDQUFDLElBQUksS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsTUFBTTtDQUMvRSxDQUFDLENBQUMifQ==

package/dist/src/utils/table/useScrollTarget.d.ts

@@ -0,0 +1,2 @@
+import React, { RefObject } from 'react';
+export declare const useScrollTarget: <T extends HTMLElement>(callback?: () => void) => React.RefObject<T>;

package/dist/src/utils/table/useScrollTarget.js

@@ -0,0 +1,16 @@
+import React from 'react';
+export const useScrollTarget = (callback) => {
+    const targetRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+        const observer = new IntersectionObserver((entries) => entries[0].isIntersecting && callback && callback(), {
+            root: null,
+            rootMargin: `0px 0px 200px 0px`,
+        });
+        if (targetRef.current) {
+            observer.observe(targetRef.current);
+        }
+        return () => observer.disconnect();
+    }, []);
+    return targetRef;
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU2Nyb2xsVGFyZ2V0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3V0aWxzL3RhYmxlL3VzZVNjcm9sbFRhcmdldC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQW9CLE1BQU0sT0FBTyxDQUFDO0FBRXpDLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxDQUF3QixRQUFxQixFQUFnQixFQUFFO0lBQzVGLE1BQU0sU0FBUyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQUksSUFBSSxDQUFDLENBQUM7SUFFeEMsS0FBSyxDQUFDLGVBQWUsQ0FBQyxHQUFHLEVBQUU7UUFDekIsTUFBTSxRQUFRLEdBQUcsSUFBSSxvQkFBb0IsQ0FBQyxDQUFDLE9BQU8sRUFBRSxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLGNBQWMsSUFBSSxRQUFRLElBQUksUUFBUSxFQUFFLEVBQUU7WUFDMUcsSUFBSSxFQUFFLElBQUk7WUFDVixVQUFVLEVBQUUsbUJBQW1CO1NBQ2hDLENBQUMsQ0FBQztRQUNILElBQUksU0FBUyxDQUFDLE9BQU8sRUFBRTtZQUNyQixRQUFRLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsQ0FBQztTQUNyQztRQUNELE9BQU8sR0FBRyxFQUFFLENBQUMsUUFBUSxDQUFDLFVBQVUsRUFBRSxDQUFDO0lBQ3JDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUVQLE9BQU8sU0FBUyxDQUFDO0FBQ25CLENBQUMsQ0FBQyJ9

package/dist/src/{common/Table/Table.utils.d.ts → utils/table/useTableSelect.d.ts}

@@ -1,5 +1,3 @@
-import React, { RefObject, AriaAttributes } from 'react';
-export declare type SortDirection = AriaAttributes['aria-sort'];
 declare type AnyObject = {
     [key: string]: any;
 };
@@ -15,5 +13,4 @@ declare type TableSelectControls = {
     selectOnlyOne: (dot: AnyObject) => void;
 };
 export declare const useTableSelect: (data: AnyObject[], { key }: TableSelectOptions) => TableSelectControls;
-export declare const useScrollTarget: <T extends HTMLElement>(callback?: () => void) => React.RefObject<T>;
 export {};

package/dist/src/utils/table/useTableSelect.js

@@ -0,0 +1,27 @@
+import React from 'react';
+export const useTableSelect = (data, { key }) => {
+    const [selected, setSelected] = React.useState([]);
+    const allSelected = selected.length === data.length;
+    const isSelected = (dot) => selected.includes(dot[key]);
+    const selectAll = () => setSelected(data.map((dot) => dot[key]));
+    const selectOnlyOne = (dot) => setSelected([dot[key]]);
+    const unselectAll = () => setSelected([]);
+    const toggle = (dot) => {
+        if (isSelected(dot)) {
+            setSelected((current) => current.filter((selectedDot) => selectedDot !== dot[key]));
+        }
+        else {
+            setSelected((current) => [...current, dot[key]]);
+        }
+    };
+    const toggleAll = () => (allSelected ? unselectAll() : selectAll());
+    return {
+        selected,
+        allSelected,
+        toggle,
+        toggleAll,
+        isSelected,
+        selectOnlyOne,
+    };
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlVGFibGVTZWxlY3QuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdXRpbHMvdGFibGUvdXNlVGFibGVTZWxlY3QudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBaUIxQixNQUFNLENBQUMsTUFBTSxjQUFjLEdBQUcsQ0FBQyxJQUFpQixFQUFFLEVBQUUsR0FBRyxFQUFzQixFQUF1QixFQUFFO0lBQ3BHLE1BQU0sQ0FBQyxRQUFRLEVBQUUsV0FBVyxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBVyxFQUFFLENBQUMsQ0FBQztJQUM3RCxNQUFNLFdBQVcsR0FBRyxRQUFRLENBQUMsTUFBTSxLQUFLLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDcEQsTUFBTSxVQUFVLEdBQUcsQ0FBQyxHQUFjLEVBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7SUFDNUUsTUFBTSxTQUFTLEdBQUcsR0FBRyxFQUFFLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDakUsTUFBTSxhQUFhLEdBQUcsQ0FBQyxHQUFjLEVBQUUsRUFBRSxDQUFDLFdBQVcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDbEUsTUFBTSxXQUFXLEdBQUcsR0FBRyxFQUFFLENBQUMsV0FBVyxDQUFDLEVBQUUsQ0FBQyxDQUFDO0lBQzFDLE1BQU0sTUFBTSxHQUFHLENBQUMsR0FBYyxFQUFFLEVBQUU7UUFDaEMsSUFBSSxVQUFVLENBQUMsR0FBRyxDQUFDLEVBQUU7WUFDbkIsV0FBVyxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUMsV0FBVyxFQUFFLEVBQUUsQ0FBQyxXQUFXLEtBQUssR0FBRyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQztTQUNyRjthQUFNO1lBQ0wsV0FBVyxDQUFDLENBQUMsT0FBTyxFQUFFLEVBQUUsQ0FBQyxDQUFDLEdBQUcsT0FBTyxFQUFFLEdBQUcsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUM7U0FDbEQ7SUFDSCxDQUFDLENBQUM7SUFDRixNQUFNLFNBQVMsR0FBRyxHQUFHLEVBQUUsQ0FBQyxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsV0FBVyxFQUFFLENBQUMsQ0FBQyxDQUFDLFNBQVMsRUFBRSxDQUFDLENBQUM7SUFFcEUsT0FBTztRQUNMLFFBQVE7UUFDUixXQUFXO1FBQ1gsTUFBTTtRQUNOLFNBQVM7UUFDVCxVQUFVO1FBQ1YsYUFBYTtLQUNkLENBQUM7QUFDSixDQUFDLENBQUMifQ==

package/dist/src/utils/table/useTableSort.d.ts

@@ -0,0 +1,2 @@
+import { DataTableRow, Sort } from '../../../src/utils/table/types';
+export declare const useTableSort: <T extends DataTableRow>() => [Sort<T> | undefined, (field: keyof T) => void];

package/dist/src/utils/table/useTableSort.js

@@ -0,0 +1,19 @@
+import React from 'react';
+export const useTableSort = () => {
+    const [sort, setSort] = React.useState();
+    const handleSortClick = (field) => {
+        if ((sort === null || sort === void 0 ? void 0 : sort.key) === field) {
+            if (sort.direction === 'ascending') {
+                setSort({ key: field, direction: 'descending' });
+            }
+            else {
+                setSort(undefined);
+            }
+        }
+        else {
+            setSort({ key: field, direction: 'ascending' });
+        }
+    };
+    return [sort, handleSortClick];
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlVGFibGVTb3J0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3V0aWxzL3RhYmxlL3VzZVRhYmxlU29ydC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBRzFCLE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxHQUE0RSxFQUFFO0lBQ3hHLE1BQU0sQ0FBQyxJQUFJLEVBQUUsT0FBTyxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBVyxDQUFDO0lBQ2xELE1BQU0sZUFBZSxHQUFHLENBQUMsS0FBYyxFQUFFLEVBQUU7UUFDekMsSUFBSSxDQUFBLElBQUksYUFBSixJQUFJLHVCQUFKLElBQUksQ0FBRSxHQUFHLE1BQUssS0FBSyxFQUFFO1lBQ3ZCLElBQUksSUFBSSxDQUFDLFNBQVMsS0FBSyxXQUFXLEVBQUU7Z0JBQ2xDLE9BQU8sQ0FBQyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxDQUFDLENBQUM7YUFDbEQ7aUJBQU07Z0JBQ0wsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDO2FBQ3BCO1NBQ0Y7YUFBTTtZQUNMLE9BQU8sQ0FBQyxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLFdBQVcsRUFBRSxDQUFDLENBQUM7U0FDakQ7SUFDSCxDQUFDLENBQUM7SUFFRixPQUFPLENBQUMsSUFBSSxFQUFFLGVBQWUsQ0FBQyxDQUFDO0FBQ2pDLENBQUMsQ0FBQyJ9

package/dist/styles.css

@@ -715,9 +715,6 @@ input[type='number'].no-arrows {
 .mt-4 {
   margin-top: 12px !important;
 }
-.ml-4 {
-  margin-left: 12px !important;
-}
 .mb-5 {
   margin-bottom: 16px !important;
 }
@@ -766,6 +763,9 @@ input[type='number'].no-arrows {
 .table {
   display: table !important;
 }
+.\!table {
+  display: table !important;
+}
 .grid {
   display: grid !important;
 }
@@ -838,6 +838,9 @@ input[type='number'].no-arrows {
 .min-h-full {
   min-height: 100% !important;
 }
+.min-h-\[50px\] {
+  min-height: 50px !important;
+}
 .w-full {
   width: 100% !important;
 }
@@ -958,6 +961,15 @@ input[type='number'].no-arrows {
 .resize {
   resize: both !important;
 }
+.snap-x {
+  scroll-snap-type: x var(--tw-scroll-snap-strictness) !important;
+}
+.snap-mandatory {
+  --tw-scroll-snap-strictness: mandatory !important;
+}
+.snap-start {
+  scroll-snap-align: start !important;
+}
 .appearance-none {
   -webkit-appearance: none !important;
      -moz-appearance: none !important;
@@ -966,6 +978,9 @@ input[type='number'].no-arrows {
 .auto-cols-fr {
   grid-auto-columns: minmax(0, 1fr) !important;
 }
+.grid-flow-col {
+  grid-auto-flow: column !important;
+}
 .grid-cols-\[auto_1fr_auto\] {
   grid-template-columns: auto 1fr auto !important;
 }
@@ -990,6 +1005,9 @@ input[type='number'].no-arrows {
 .flex-row {
   flex-direction: row !important;
 }
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
 .flex-col {
   flex-direction: column !important;
 }
@@ -1002,6 +1020,12 @@ input[type='number'].no-arrows {
 .items-center {
   align-items: center !important;
 }
+.items-stretch {
+  align-items: stretch !important;
+}
+.justify-start {
+  justify-content: flex-start !important;
+}
 .justify-end {
   justify-content: flex-end !important;
 }
@@ -1072,6 +1096,12 @@ input[type='number'].no-arrows {
 .overflow-x-hidden {
   overflow-x: hidden !important;
 }
+.overflow-x-scroll {
+  overflow-x: scroll !important;
+}
+.scroll-smooth {
+  scroll-behavior: smooth !important;
+}
 .whitespace-nowrap {
   white-space: nowrap !important;
 }
@@ -1277,12 +1307,12 @@ input[type='number'].no-arrows {
 .p-5 {
   padding: 16px !important;
 }
-.p-3 {
-  padding: 8px !important;
-}
 .p-6 {
   padding: 24px !important;
 }
+.p-3 {
+  padding: 8px !important;
+}
 .p-2 {
   padding: 4px !important;
 }
@@ -2013,6 +2043,18 @@ input[type='number'].no-arrows {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0) !important;
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0)) !important;
 }
+.focus-visible\:ring-1.focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0)) !important;
+}
+.focus-visible\:ring-1:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0)) !important;
+}
 .focus-visible\:ring-inset.focus-visible {
   --tw-ring-inset: inset !important;
 }
@@ -2035,6 +2077,14 @@ input[type='number'].no-arrows {
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(120 120 133 / var(--tw-ring-opacity)) !important;
 }
+.focus-visible\:ring-info-70.focus-visible {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity)) !important;
+}
+.focus-visible\:ring-info-70:focus-visible {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity)) !important;
+}
 .active\:bg-primary-90:active {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(198 4 67 / var(--tw-bg-opacity)) !important;
@@ -2118,9 +2168,16 @@ input[type='number'].no-arrows {
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(210 210 214 / var(--tw-ring-opacity)) !important;
 }
+.group:last-child .group-last\:border-b-0 {
+  border-bottom-width: 0px !important;
+}
 .group:hover .group-hover\:visible {
   visibility: visible !important;
 }
+.group:hover .group-hover\:bg-grey-0 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
+}
 .group:hover .group-hover\:bg-grey-30 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;

package/dist/styles_timescaledb.css

@@ -715,9 +715,6 @@ input[type='number'].no-arrows {
 .mt-4 {
   margin-top: 12px !important;
 }
-.ml-4 {
-  margin-left: 12px !important;
-}
 .mb-5 {
   margin-bottom: 16px !important;
 }
@@ -766,6 +763,9 @@ input[type='number'].no-arrows {
 .table {
   display: table !important;
 }
+.\!table {
+  display: table !important;
+}
 .grid {
   display: grid !important;
 }
@@ -838,6 +838,9 @@ input[type='number'].no-arrows {
 .min-h-full {
   min-height: 100% !important;
 }
+.min-h-\[50px\] {
+  min-height: 50px !important;
+}
 .w-full {
   width: 100% !important;
 }
@@ -958,6 +961,15 @@ input[type='number'].no-arrows {
 .resize {
   resize: both !important;
 }
+.snap-x {
+  scroll-snap-type: x var(--tw-scroll-snap-strictness) !important;
+}
+.snap-mandatory {
+  --tw-scroll-snap-strictness: mandatory !important;
+}
+.snap-start {
+  scroll-snap-align: start !important;
+}
 .appearance-none {
   -webkit-appearance: none !important;
      -moz-appearance: none !important;
@@ -966,6 +978,9 @@ input[type='number'].no-arrows {
 .auto-cols-fr {
   grid-auto-columns: minmax(0, 1fr) !important;
 }
+.grid-flow-col {
+  grid-auto-flow: column !important;
+}
 .grid-cols-\[auto_1fr_auto\] {
   grid-template-columns: auto 1fr auto !important;
 }
@@ -990,6 +1005,9 @@ input[type='number'].no-arrows {
 .flex-row {
   flex-direction: row !important;
 }
+.flex-row-reverse {
+  flex-direction: row-reverse !important;
+}
 .flex-col {
   flex-direction: column !important;
 }
@@ -1002,6 +1020,12 @@ input[type='number'].no-arrows {
 .items-center {
   align-items: center !important;
 }
+.items-stretch {
+  align-items: stretch !important;
+}
+.justify-start {
+  justify-content: flex-start !important;
+}
 .justify-end {
   justify-content: flex-end !important;
 }
@@ -1072,6 +1096,12 @@ input[type='number'].no-arrows {
 .overflow-x-hidden {
   overflow-x: hidden !important;
 }
+.overflow-x-scroll {
+  overflow-x: scroll !important;
+}
+.scroll-smooth {
+  scroll-behavior: smooth !important;
+}
 .whitespace-nowrap {
   white-space: nowrap !important;
 }
@@ -1277,12 +1307,12 @@ input[type='number'].no-arrows {
 .p-5 {
   padding: 16px !important;
 }
-.p-3 {
-  padding: 8px !important;
-}
 .p-6 {
   padding: 24px !important;
 }
+.p-3 {
+  padding: 8px !important;
+}
 .p-2 {
   padding: 4px !important;
 }
@@ -2013,6 +2043,18 @@ input[type='number'].no-arrows {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0) !important;
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0)) !important;
 }
+.focus-visible\:ring-1.focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0)) !important;
+}
+.focus-visible\:ring-1:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0)) !important;
+}
 .focus-visible\:ring-inset.focus-visible {
   --tw-ring-inset: inset !important;
 }
@@ -2035,6 +2077,14 @@ input[type='number'].no-arrows {
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(120 120 133 / var(--tw-ring-opacity)) !important;
 }
+.focus-visible\:ring-info-70.focus-visible {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity)) !important;
+}
+.focus-visible\:ring-info-70:focus-visible {
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(3 153 227 / var(--tw-ring-opacity)) !important;
+}
 .active\:bg-primary-90:active {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(1 116 186 / var(--tw-bg-opacity)) !important;
@@ -2118,9 +2168,16 @@ input[type='number'].no-arrows {
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(210 210 214 / var(--tw-ring-opacity)) !important;
 }
+.group:last-child .group-last\:border-b-0 {
+  border-bottom-width: 0px !important;
+}
 .group:hover .group-hover\:visible {
   visibility: visible !important;
 }
+.group:hover .group-hover\:bg-grey-0 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
+}
 .group:hover .group-hover\:bg-grey-30 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;