@aivenio/aquarium 1.0.0 → 1.2.0

package/dist/src/utils/Blueprint.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type BlueprintProps = {
+    width?: React.CSSProperties['width'];
+    height?: React.CSSProperties['height'];
+};
+export declare const Blueprint: React.FC<BlueprintProps>;
+export {};

package/dist/src/utils/Blueprint.js

@@ -0,0 +1,31 @@
+import React, { useState, useLayoutEffect } from 'react';
+export const Blueprint = (props) => {
+    const [width, setWidth] = useState();
+    const [height, setHeight] = useState();
+    const ref = React.useRef(null);
+    useLayoutEffect(() => {
+        const updateSize = () => {
+            var _a, _b;
+            setHeight((_a = ref.current) === null || _a === void 0 ? void 0 : _a.clientHeight);
+            setWidth((_b = ref.current) === null || _b === void 0 ? void 0 : _b.clientWidth);
+        };
+        updateSize();
+        window.addEventListener('resize', updateSize);
+        return () => window.removeEventListener('resize', updateSize);
+    }, []);
+    return (React.createElement("div", { ref: ref, style: {
+            color: 'white',
+            width: props.width,
+            height: props.height,
+            padding: 16,
+            textAlign: 'center',
+            backgroundColor: 'rgb(3, 153, 227)',
+            backgroundImage: 'linear-gradient(rgba(255,255,255,0.2) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,0.2) 2px, transparent 1px), linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)',
+            backgroundSize: '100px 100px, 100px 100px, 20px 20px, 20px 20px',
+            backgroundPosition: '-2px -2px, -2px -2px, -1px -1px, -1px -1px',
+        } },
+        width,
+        " x ",
+        height));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQmx1ZXByaW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3V0aWxzL0JsdWVwcmludC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsZUFBZSxFQUFFLE1BQU0sT0FBTyxDQUFDO0FBT3pELE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBNkIsQ0FBQyxLQUFLLEVBQUUsRUFBRTtJQUMzRCxNQUFNLENBQUMsS0FBSyxFQUFFLFFBQVEsQ0FBQyxHQUFHLFFBQVEsRUFBc0IsQ0FBQztJQUN6RCxNQUFNLENBQUMsTUFBTSxFQUFFLFNBQVMsQ0FBQyxHQUFHLFFBQVEsRUFBc0IsQ0FBQztJQUMzRCxNQUFNLEdBQUcsR0FBRyxLQUFLLENBQUMsTUFBTSxDQUFpQixJQUFJLENBQUMsQ0FBQztJQUUvQyxlQUFlLENBQUMsR0FBRyxFQUFFO1FBQ25CLE1BQU0sVUFBVSxHQUFHLEdBQUcsRUFBRTs7WUFDdEIsU0FBUyxDQUFDLE1BQUEsR0FBRyxDQUFDLE9BQU8sMENBQUUsWUFBWSxDQUFDLENBQUM7WUFDckMsUUFBUSxDQUFDLE1BQUEsR0FBRyxDQUFDLE9BQU8sMENBQUUsV0FBVyxDQUFDLENBQUM7UUFDckMsQ0FBQyxDQUFDO1FBQ0YsVUFBVSxFQUFFLENBQUM7UUFDYixNQUFNLENBQUMsZ0JBQWdCLENBQUMsUUFBUSxFQUFFLFVBQVUsQ0FBQyxDQUFDO1FBQzlDLE9BQU8sR0FBRyxFQUFFLENBQUMsTUFBTSxDQUFDLG1CQUFtQixDQUFDLFFBQVEsRUFBRSxVQUFVLENBQUMsQ0FBQztJQUNoRSxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFFUCxPQUFPLENBQ0wsNkJBQ0UsR0FBRyxFQUFFLEdBQUcsRUFDUixLQUFLLEVBQUU7WUFDTCxLQUFLLEVBQUUsT0FBTztZQUNkLEtBQUssRUFBRSxLQUFLLENBQUMsS0FBSztZQUNsQixNQUFNLEVBQUUsS0FBSyxDQUFDLE1BQU07WUFDcEIsT0FBTyxFQUFFLEVBQUU7WUFDWCxTQUFTLEVBQUUsUUFBUTtZQUNuQixlQUFlLEVBQUUsa0JBQWtCO1lBQ25DLGVBQWUsRUFDYixpUUFBaVE7WUFDblEsY0FBYyxFQUFFLGdEQUFnRDtZQUNoRSxrQkFBa0IsRUFBRSw0Q0FBNEM7U0FDakU7UUFFQSxLQUFLOztRQUFLLE1BQU0sQ0FDYixDQUNQLENBQUM7QUFDSixDQUFDLENBQUMifQ==

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,8 +715,8 @@ input[type='number'].no-arrows {
 .mt-4 {
   margin-top: 12px !important;
 }
-.ml-4 {
-  margin-left: 12px !important;
+.mb-5 {
+  margin-bottom: 16px !important;
 }
 .mr-4 {
   margin-right: 12px !important;
@@ -763,6 +763,9 @@ input[type='number'].no-arrows {
 .table {
   display: table !important;
 }
+.\!table {
+  display: table !important;
+}
 .grid {
   display: grid !important;
 }
@@ -796,12 +799,18 @@ input[type='number'].no-arrows {
 .h-\[50px\] {
   height: 50px !important;
 }
-.h-\[32px\] {
-  height: 32px !important;
+.h-5 {
+  height: 16px !important;
 }
 .h-full {
   height: 100% !important;
 }
+.h-\[6px\] {
+  height: 6px !important;
+}
+.h-\[32px\] {
+  height: 32px !important;
+}
 .h-\[174px\] {
   height: 174px !important;
 }
@@ -811,9 +820,6 @@ input[type='number'].no-arrows {
 .h-1px {
   height: 1px !important;
 }
-.h-5 {
-  height: 16px !important;
-}
 .h-6 {
   height: 24px !important;
 }
@@ -832,12 +838,24 @@ input[type='number'].no-arrows {
 .min-h-full {
   min-height: 100% !important;
 }
+.min-h-\[50px\] {
+  min-height: 50px !important;
+}
 .w-full {
   width: 100% !important;
 }
 .w-3 {
   width: 8px !important;
 }
+.w-5 {
+  width: 16px !important;
+}
+.w-1 {
+  width: 2px !important;
+}
+.w-\[6px\] {
+  width: 6px !important;
+}
 .w-\[32px\] {
   width: 32px !important;
 }
@@ -847,15 +865,9 @@ input[type='number'].no-arrows {
 .w-1px {
   width: 1px !important;
 }
-.w-1 {
-  width: 2px !important;
-}
 .w-2 {
   width: 4px !important;
 }
-.w-5 {
-  width: 16px !important;
-}
 .w-6 {
   width: 24px !important;
 }
@@ -949,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;
@@ -957,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;
 }
@@ -969,6 +993,9 @@ input[type='number'].no-arrows {
 .grid-cols-3 {
   grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
 }
+.grid-cols-\[16px_1fr\] {
+  grid-template-columns: 16px 1fr !important;
+}
 .grid-cols-\[auto_1fr\] {
   grid-template-columns: auto 1fr !important;
 }
@@ -978,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;
 }
@@ -990,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;
 }
@@ -1048,6 +1084,9 @@ input[type='number'].no-arrows {
 .self-center {
   align-self: center !important;
 }
+.justify-self-center {
+  justify-self: center !important;
+}
 .overflow-hidden {
   overflow: hidden !important;
 }
@@ -1057,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;
 }
@@ -1108,22 +1153,22 @@ input[type='number'].no-arrows {
   --tw-border-opacity: 1 !important;
   border-color: rgb(3 153 227 / var(--tw-border-opacity)) !important;
 }
-.border-navyBlue-100 {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
-}
 .border-grey-5 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(237 237 240 / var(--tw-border-opacity)) !important;
 }
-.border-grey-50 {
+.border-navyBlue-100 {
   --tw-border-opacity: 1 !important;
-  border-color: rgb(120 120 133 / var(--tw-border-opacity)) !important;
+  border-color: rgb(48 55 94 / var(--tw-border-opacity)) !important;
 }
 .border-grey-10 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(225 225 227 / var(--tw-border-opacity)) !important;
 }
+.border-grey-50 {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(120 120 133 / var(--tw-border-opacity)) !important;
+}
 .border-grey-40 {
   --tw-border-opacity: 1 !important;
   border-color: rgb(150 150 160 / var(--tw-border-opacity)) !important;
@@ -1166,14 +1211,14 @@ input[type='number'].no-arrows {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(247 247 250 / var(--tw-bg-opacity)) !important;
 }
-.bg-navyBlue-100 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
-}
 .bg-white {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
 }
+.bg-navyBlue-100 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(48 55 94 / var(--tw-bg-opacity)) !important;
+}
 .bg-grey-5 {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(237 237 240 / var(--tw-bg-opacity)) !important;
@@ -1194,6 +1239,10 @@ input[type='number'].no-arrows {
   --tw-bg-opacity: 1 !important;
   background-color: rgb(216 0 5 / var(--tw-bg-opacity)) !important;
 }
+.bg-grey-30 {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(180 180 187 / var(--tw-bg-opacity)) !important;
+}
 .bg-current {
   background-color: currentColor !important;
 }
@@ -1258,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;
 }
@@ -1994,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;
 }
@@ -2016,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;
@@ -2099,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;