@aivenio/aquarium 1.52.2 → 1.54.0

package/dist/src/molecules/Section/Section.js

@@ -22,11 +22,13 @@ import { DropdownMenu } from '../../../src/molecules/DropdownMenu/DropdownMenu';
 import { LineClamp } from '../../../src/molecules/LineClamp/LineClamp';
 import { SelectBase } from '../../../src/molecules/Select/Select';
 import { Switch } from '../../../src/molecules/Switch/Switch';
+import { createTabsComponent, ModalTab, TabItem, Tabs } from '../../../src/molecules/Tabs/Tabs';
 import { TagLabel } from '../../../src/molecules/TagLabel/TagLabel';
 import { Section as BaseSection } from '../../../src/atoms/Section/Section';
 import { renderAction } from '../../../src/utils/actions';
 import { tw } from '../../../src/utils/tailwind';
 import { useMeasure } from '../../../src/utils/useMeasure';
+import { isComponentType } from '../../../types/utils';
 import more from '../../../src/icons/more';
 export const Section = (props) => {
     var _a, _b, _c, _d, _e;
@@ -72,6 +74,7 @@ export const Section = (props) => {
     const toggleId = useId();
     const regionId = useId();
     const titleId = useId();
+    const hasTabs = isComponentType(children, Tabs);
     return (React.createElement(BaseSection, { "aria-label": title, className: "Aquarium-Section" },
         title && (React.createElement(React.Fragment, null,
             React.createElement(BaseSection.Header, { expanded: _collapsible && !isCollapsed },
@@ -97,9 +100,9 @@ export const Section = (props) => {
                             .map((action) => renderAction({ kind: 'secondary', action })),
                     props.switch && React.createElement(Switch, Object.assign({}, props.switch)),
                     props.select && React.createElement(SelectBase, Object.assign({ "aria-labelledby": titleId }, props.select))))),
-            React.createElement(animated.div, { className: tw(`h-[1px]`), style: { backgroundColor } }))),
+            !hasTabs && React.createElement(animated.div, { className: tw(`h-[1px]`), style: { backgroundColor } }))),
         React.createElement(animated.div, { id: regionId, "aria-hidden": _collapsible ? (isCollapsed ? true : undefined) : undefined, style: spring, className: tw({ 'overflow-hidden': _collapsible }) },
-            React.createElement("div", { ref: ref },
-                React.createElement(BaseSection.Body, null, children)))));
+            React.createElement("div", { ref: ref }, hasTabs ? (React.createElement(SectionTabs, Object.assign({}, children.props, { className: tw('[&>div:first-child]:px-3 grow flex flex-col overflow-y-auto') }))) : (React.createElement(BaseSection.Body, null, children))))));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDMUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUN4RCxPQUFPLFNBQVMsTUFBTSxrQkFBa0IsQ0FBQztBQUN6QyxPQUFPLFdBQVcsTUFBTSxvQkFBb0IsQ0FBQztBQUM3QyxPQUFPLFlBQVksTUFBTSxxQkFBcUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3JELE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUF3QixNQUFNLHlCQUF5QixDQUFDO0FBQ2pGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUN2RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDOUQsT0FBTyxFQUFtQixVQUFVLEVBQXdCLE1BQU0sNkJBQTZCLENBQUM7QUFDaEcsT0FBTyxFQUFFLE1BQU0sRUFBb0IsTUFBTSw2QkFBNkIsQ0FBQztBQUN2RSxPQUFPLEVBQUUsUUFBUSxFQUFzQixNQUFNLGlDQUFpQyxDQUFDO0FBRS9FLE9BQU8sRUFBRSxPQUFPLElBQUksV0FBVyxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFHbkUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ2pELE9BQU8sRUFBRSxFQUFFLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQUN4QyxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sc0JB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
+const SectionTabs = createTabsComponent(ModalTab, TabItem, 'SectionTabs', (children, selected) => (React.createElement(BaseSection.Body, null, children.find((node, index) => (node === null || node === void 0 ? void 0 : node.props.value) === selected || index === selected))));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiU2VjdGlvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9tb2xlY3VsZXMvU2VjdGlvbi9TZWN0aW9uLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFDMUMsT0FBTyxFQUFFLFFBQVEsRUFBRSxTQUFTLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUN4RCxPQUFPLFNBQVMsTUFBTSxrQkFBa0IsQ0FBQztBQUN6QyxPQUFPLFdBQVcsTUFBTSxvQkFBb0IsQ0FBQztBQUM3QyxPQUFPLFlBQVksTUFBTSxxQkFBcUIsQ0FBQztBQUUvQyxPQUFPLEVBQUUsR0FBRyxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLE1BQU0sRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3JELE9BQU8sRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUF3QixNQUFNLHlCQUF5QixDQUFDO0FBQ2pGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSx5Q0FBeUMsQ0FBQztBQUN2RSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDOUQsT0FBTyxFQUFtQixVQUFVLEVBQXdCLE1BQU0sNkJBQTZCLENBQUM7QUFDaEcsT0FBTyxFQUFFLE1BQU0sRUFBb0IsTUFBTSw2QkFBNkIsQ0FBQztBQUN2RSxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBaUIsSUFBSSxFQUFFLE1BQU0seUJBQXlCLENBQUM7QUFDdEcsT0FBTyxFQUFFLFFBQVEsRUFBc0IsTUFBTSxpQ0FBaUMsQ0FBQztBQUUvRSxPQUFPLEVBQUUsT0FBTyxJQUFJLFdBQVcsRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBR25FLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztB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

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

@@ -1,7 +1,8 @@
 import React from 'react';
+import { type BoxProps } from '../../../src/molecules/Box/Box';
 import type twTheme from '../../../tailwind.theme.json';
-export declare type Weight = 'auto' | `${number}`;
-declare type TemplateProps = {
+export declare type Weight = 'auto' | `${number}` | `fit-content(${string})`;
+export declare type TemplateProps = Pick<BoxProps, 'alignContent' | 'alignItems' | 'alignSelf' | 'gap' | 'grow' | 'justifyContent' | 'justifySelf' | 'role' | 'style'> & {
     /**
      * Provide a number for amount of columns. Columns created this way have equal weight.
      *
@@ -10,16 +11,9 @@ declare type TemplateProps = {
      * Array value of Weight is considered as a weight in relation to other columns.
      */
     columns: Array<Weight | number> | number;
-    alignContent?: React.CSSProperties['alignContent'];
-    alignSelf?: React.CSSProperties['alignSelf'];
-    alignItems?: React.CSSProperties['alignItems'];
-    justifySelf?: React.CSSProperties['justifySelf'];
-    gap?: keyof (typeof twTheme)['gap'];
     columnGap?: keyof (typeof twTheme)['gap'];
     rowGap?: keyof (typeof twTheme)['gap'];
     fullHeight?: boolean;
     className?: string;
-    role?: React.HTMLProps<HTMLDivElement>['role'];
 };
 export declare const Template: React.FC<React.PropsWithChildren<TemplateProps>>;
-export {};

package/dist/src/molecules/Template/Template.js

@@ -1,23 +1,41 @@
+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 from 'react';
+import { Box } from '../../../src/molecules/Box/Box';
 import { useStyle } from '../../../src/utils/useStyle';
-export const Template = ({ children, columns, alignSelf, alignContent, alignItems, justifySelf, gap, columnGap, rowGap, fullHeight, className, role, }) => {
+export const Template = (_a) => {
+    var { columns, columnGap, rowGap, fullHeight, style } = _a, props = __rest(_a, ["columns", "columnGap", "rowGap", "fullHeight", "style"]);
     const gridTemplateColumns = typeof columns === 'number'
         ? '1fr '.repeat(columns)
         : columns
-            .map((column) => (typeof column === 'number' ? `${column}px` : column === 'auto' ? column : `${column}fr`))
+            .map((column) => {
+            if (typeof column === 'number') {
+                return `${column}px`;
+            }
+            if (column === 'auto') {
+                return column;
+            }
+            if (column.startsWith('fit-content')) {
+                return column;
+            }
+            return `${column}fr`;
+        })
             .join(' ');
     const styles = useStyle({
         height: fullHeight ? '100%' : undefined,
-        display: 'grid',
         gridTemplateColumns,
-        alignSelf,
-        alignContent,
-        alignItems,
-        justifySelf,
-        gap,
         rowGap,
         columnGap,
     });
-    return (React.createElement("div", { role: role, className: className, style: Object.assign({}, styles) }, children));
+    return React.createElement(Box, Object.assign({}, props, { display: "grid", style: Object.assign(Object.assign({}, styles), style) }));
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGVtcGxhdGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL1RlbXBsYXRlL1RlbXBsYXRlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFFMUIsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBMkI5QyxNQUFNLENBQUMsTUFBTSxRQUFRLEdBQXFELENBQUMsRUFDekUsUUFBUSxFQUNSLE9BQU8sRUFDUCxTQUFTLEVBQ1QsWUFBWSxFQUNaLFVBQVUsRUFDVixXQUFXLEVBQ1gsR0FBRyxFQUNILFNBQVMsRUFDVCxNQUFNLEVBQ04sVUFBVSxFQUNWLFNBQVMsRUFDVCxJQUFJLEdBQ0wsRUFBRSxFQUFFO0lBQ0gsTUFBTSxtQkFBbUIsR0FDdkIsT0FBTyxPQUFPLEtBQUssUUFBUTtRQUN6QixDQUFDLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUM7UUFDeEIsQ0FBQyxDQUFDLE9BQU87YUFDSixHQUFHLENBQUMsQ0FBQyxNQUFNLEVBQUUsRUFBRSxDQUFDLENBQUMsT0FBTyxNQUFNLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxHQUFHLE1BQU0sSUFBSSxDQUFDLENBQUMsQ0FBQyxNQUFNLEtBQUssTUFBTSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQzthQUMxRyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFFbkIsTUFBTSxNQUFNLEdBQUcsUUFBUSxDQUFDO1FBQ3RCLE1BQU0sRUFBRSxVQUFVLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsU0FBUztRQUN2QyxPQUFPLEVBQUUsTUFBTTtRQUNmLG1CQUFtQjtRQUNuQixTQUFTO1FBQ1QsWUFBWTtRQUNaLFVBQVU7UUFDVixXQUFXO1FBQ1gsR0FBRztRQUNILE1BQU07UUFDTixTQUFTO0tBQ1YsQ0FBQyxDQUFDO0lBQ0gsT0FBTyxDQUNMLDZCQUFLLElBQUksRUFBRSxJQUFJLEVBQUUsU0FBUyxFQUFFLFNBQVMsRUFBRSxLQUFLLG9CQUFPLE1BQU0sS0FDdEQsUUFBUSxDQUNMLENBQ1AsQ0FBQztBQUNKLENBQUMsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVGVtcGxhdGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbW9sZWN1bGVzL1RlbXBsYXRlL1RlbXBsYXRlLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLE9BQU8sS0FBSyxNQUFNLE9BQU8sQ0FBQztBQUUxQixPQUFPLEVBQUUsR0FBRyxFQUFpQixNQUFNLHVCQUF1QixDQUFDO0FBRTNELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQztBQTRCOUMsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFxRCxDQUFDLEVBTzFFLEVBQUUsRUFBRTtRQVBzRSxFQUN6RSxPQUFPLEVBQ1AsU0FBUyxFQUNULE1BQU0sRUFDTixVQUFVLEVBQ1YsS0FBSyxPQUVOLEVBREksS0FBSyxjQU5pRSx5REFPMUUsQ0FEUztJQUVSLE1BQU0sbUJBQW1CLEdBQ3ZCLE9BQU8sT0FBTyxLQUFLLFFBQVE7UUFDekIsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDO1FBQ3hCLENBQUMsQ0FBQyxPQUFPO2FBQ0osR0FBRyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUU7WUFDZCxJQUFJLE9BQU8sTUFBTSxLQUFLLFFBQVEsRUFBRTtnQkFDOUIsT0FBTyxHQUFHLE1BQU0sSUFBSSxDQUFDO2FBQ3RCO1lBQ0QsSUFBSSxNQUFNLEtBQUssTUFBTSxFQUFFO2dCQUNyQixPQUFPLE1BQU0sQ0FBQzthQUNmO1lBQ0QsSUFBSSxNQUFNLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxFQUFFO2dCQUNwQyxPQUFPLE1BQU0sQ0FBQzthQUNmO1lBQ0QsT0FBTyxHQUFHLE1BQU0sSUFBSSxDQUFDO1FBQ3ZCLENBQUMsQ0FBQzthQUNELElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUVuQixNQUFNLE1BQU0sR0FBRyxRQUFRLENBQUM7UUFDdEIsTUFBTSxFQUFFLFVBQVUsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxTQUFTO1FBQ3ZDLG1CQUFtQjtRQUNuQixNQUFNO1FBQ04sU0FBUztLQUNWLENBQUMsQ0FBQztJQUVILE9BQU8sb0JBQUMsR0FBRyxvQkFBSyxLQUFLLElBQUUsT0FBTyxFQUFDLE1BQU0sRUFBQyxLQUFLLGtDQUFPLE1BQU0sR0FBSyxLQUFLLEtBQU0sQ0FBQztBQUMzRSxDQUFDLENBQUMifQ==

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

@@ -34,6 +34,7 @@ export * from './Input/Input';
 export * from './LineClamp/LineClamp';
 export * from './Link/Link';
 export * from './List/List';
+export * from './List/useStaticInfiniteList';
 export * from './ListItem/ListItem';
 export * from './Modal/Modal';
 export * from './MultiInput/MultiInput';

package/dist/src/molecules/index.js

@@ -35,6 +35,7 @@ export * from './Input/Input';
 export * from './LineClamp/LineClamp';
 export * from './Link/Link';
 export * from './List/List';
+export * from './List/useStaticInfiniteList';
 export * from './ListItem/ListItem';
 export * from './Modal/Modal';
 export * from './MultiInput/MultiInput';
@@ -75,4 +76,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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbW9sZWN1bGVzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUVoRCxzREFBc0Q7QUFDdEQsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxXQUFXLENBQUM7QUFDMUIsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSwwQkFBMEIsQ0FBQztBQUM3RCxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMscUNBQXFDLENBQUM7QUFDcEQsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLHFDQUFxQyxDQUFDO0FBQ3BELGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMseUJBQXlCLENBQUM7QUFFeEMsdUNBQXVDO0FBQ3ZDLGNBQWMsc0JBQXNCLENBQUM7QUFDckMsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsNkJBQTZCLENBQUM7QUFDNUMsY0FBYyw0QkFBNEIsQ0FBQztBQUUzQyxNQUFNLENBQUMsTUFBTSxVQUFVLEdBQUcsTUFBTSxDQUFDLElBQUksQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbW9sZWN1bGVzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUVoRCxzREFBc0Q7QUFDdEQsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3RDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxXQUFXLENBQUM7QUFDMUIsY0FBYywyQkFBMkIsQ0FBQztBQUMxQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLCtCQUErQixDQUFDO0FBQzlDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLDZCQUE2QixDQUFDO0FBQzVDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsdUJBQXVCLENBQUM7QUFDdEMsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHVCQUF1QixDQUFDO0FBQ3RDLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMsYUFBYSxDQUFDO0FBQzVCLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLGVBQWUsQ0FBQztBQUM5QixjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMseUJBQXlCLENBQUM7QUFDeEMsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQzdELGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyxxQ0FBcUMsQ0FBQztBQUNwRCxjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMscUNBQXFDLENBQUM7QUFDcEQsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxtQkFBbUIsQ0FBQztBQUNsQyxjQUFjLGlCQUFpQixDQUFDO0FBQ2hDLGNBQWMsMkJBQTJCLENBQUM7QUFDMUMsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxhQUFhLENBQUM7QUFDNUIsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLDJCQUEyQixDQUFDO0FBQzFDLGNBQWMscUJBQXFCLENBQUM7QUFDcEMsY0FBYyxxQkFBcUIsQ0FBQztBQUNwQyxjQUFjLHFCQUFxQixDQUFDO0FBQ3BDLGNBQWMsZUFBZSxDQUFDO0FBQzlCLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyx5QkFBeUIsQ0FBQztBQUV4Qyx1Q0FBdUM7QUFDdkMsY0FBYyxzQkFBc0IsQ0FBQztBQUNyQyxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsK0JBQStCLENBQUM7QUFDOUMsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLDRCQUE0QixDQUFDO0FBRTNDLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxNQUFNLENBQUMsSUFBSSxDQUFDIn0=

package/dist/src/utils/mocks/mockIntersectionObserver.js

@@ -4,9 +4,10 @@ export const mockIntersectionObserver = () => {
             writable: true,
             value: jest.fn().mockImplementation(() => ({
                 observe: () => jest.fn(),
+                unobserve: () => jest.fn(),
                 disconnect: () => jest.fn(),
             })),
         });
     });
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9ja0ludGVyc2VjdGlvbk9ic2VydmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3V0aWxzL21vY2tzL21vY2tJbnRlcnNlY3Rpb25PYnNlcnZlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsTUFBTSx3QkFBd0IsR0FBRyxHQUFHLEVBQUU7SUFDM0MsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLE1BQU0sQ0FBQyxjQUFjLENBQUMsTUFBTSxFQUFFLHNCQUFzQixFQUFFO1lBQ3BELFFBQVEsRUFBRSxJQUFJO1lBQ2QsS0FBSyxFQUFFLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDO2dCQUN6QyxPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRTtnQkFDeEIsVUFBVSxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUU7YUFDNUIsQ0FBQyxDQUFDO1NBQ0osQ0FBQyxDQUFDO0lBQ0wsQ0FBQyxDQUFDLENBQUM7QUFDTCxDQUFDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9ja0ludGVyc2VjdGlvbk9ic2VydmVyLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL3V0aWxzL21vY2tzL21vY2tJbnRlcnNlY3Rpb25PYnNlcnZlci50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxNQUFNLENBQUMsTUFBTSx3QkFBd0IsR0FBRyxHQUFHLEVBQUU7SUFDM0MsU0FBUyxDQUFDLEdBQUcsRUFBRTtRQUNiLE1BQU0sQ0FBQyxjQUFjLENBQUMsTUFBTSxFQUFFLHNCQUFzQixFQUFFO1lBQ3BELFFBQVEsRUFBRSxJQUFJO1lBQ2QsS0FBSyxFQUFFLElBQUksQ0FBQyxFQUFFLEVBQUUsQ0FBQyxrQkFBa0IsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDO2dCQUN6QyxPQUFPLEVBQUUsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEVBQUUsRUFBRTtnQkFDeEIsU0FBUyxFQUFFLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLEVBQUU7Z0JBQzFCLFVBQVUsRUFBRSxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFO2FBQzVCLENBQUMsQ0FBQztTQUNKLENBQUMsQ0FBQztJQUNMLENBQUMsQ0FBQyxDQUFDO0FBQ0wsQ0FBQyxDQUFDIn0=

package/dist/src/utils/setupTests.js

@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom';
+import { faker } from '@faker-js/faker';
 import failOnConsole from 'jest-fail-on-console';
 import { mockDynamicIds } from './mocks/mockDynamicIds';
 import { mockIntersectionObserver } from './mocks/mockIntersectionObserver';
@@ -17,4 +18,6 @@ mockDynamicIds();
 mockIntersectionObserver();
 mockResizeObserver();
 mockRecharts();
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0dXBUZXN0cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy9zZXR1cFRlc3RzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sMkJBQTJCLENBQUM7QUFFbkMsT0FBTyxhQUFhLE1BQU0sc0JBQXNCLENBQUM7QUFFakQsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3hELE9BQU8sRUFBRSx3QkFBd0IsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQzVFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNwRCxPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUVsRSxrR0FBa0c7QUFDbEcsYUFBYSxDQUFDO0lBQ1osZ0JBQWdCLEVBQUUsSUFBSTtJQUN0QixpQkFBaUIsRUFBRSxJQUFJO0lBQ3ZCLGtCQUFrQixFQUFFLEtBQUs7SUFDekIsaUJBQWlCLEVBQUUsS0FBSztJQUN4QixlQUFlLEVBQUUsS0FBSztJQUN0QixnQkFBZ0IsRUFBRSxLQUFLO0NBQ3hCLENBQUMsQ0FBQztBQUVILGNBQWMsRUFBRSxDQUFDO0FBQ2pCLHdCQUF3QixFQUFFLENBQUM7QUFDM0Isa0JBQWtCLEVBQUUsQ0FBQztBQUNyQixZQUFZLEVBQUUsQ0FBQyJ9
+// Use static seed for faker to get consistent results.
+faker.seed(42);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2V0dXBUZXN0cy5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy91dGlscy9zZXR1cFRlc3RzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sMkJBQTJCLENBQUM7QUFFbkMsT0FBTyxFQUFFLEtBQUssRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3hDLE9BQU8sYUFBYSxNQUFNLHNCQUFzQixDQUFDO0FBRWpELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsd0JBQXdCLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUM1RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDcEQsT0FBTyxFQUFFLGtCQUFrQixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFFbEUsa0dBQWtHO0FBQ2xHLGFBQWEsQ0FBQztJQUNaLGdCQUFnQixFQUFFLElBQUk7SUFDdEIsaUJBQWlCLEVBQUUsSUFBSTtJQUN2QixrQkFBa0IsRUFBRSxLQUFLO0lBQ3pCLGlCQUFpQixFQUFFLEtBQUs7SUFDeEIsZUFBZSxFQUFFLEtBQUs7SUFDdEIsZ0JBQWdCLEVBQUUsS0FBSztDQUN4QixDQUFDLENBQUM7QUFFSCxjQUFjLEVBQUUsQ0FBQztBQUNqQix3QkFBd0IsRUFBRSxDQUFDO0FBQzNCLGtCQUFrQixFQUFFLENBQUM7QUFDckIsWUFBWSxFQUFFLENBQUM7QUFFZix1REFBdUQ7QUFDdkQsS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQyJ9

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

@@ -7,7 +7,7 @@ import { type ActionType } from '../../../types/ActionType';
 import { type CommonContextualMenuProps } from '../../../types/ContextualMenu';
 import { type AllOrNone, type RequireAtLeastOne } from '../../../types/utils';
 import type React from 'react';
-export declare type TextAlign = 'center' | 'left' | 'right';
+export declare type TextAlign = 'center' | 'left' | 'right' | 'stretch';
 export declare type SortDirection = AriaAttributes['aria-sort'];
 export declare type Column = {
     /**
@@ -36,8 +36,8 @@ export declare type ColumnBase<R> = {
      */
     headerTooltip?: Pick<TooltipProps, 'content' | 'placement'>;
 };
-declare type Tooltip<R> = (row: R, index: number, rows: R[]) => Pick<TooltipProps, 'content' | 'placement'>;
-declare type Formatter<R, K extends keyof R, V = R[K]> = (value: V, row: R, index: number, rows: R[]) => string;
+declare type Tooltip<R> = (row: R, index: number, rows: R[] | undefined) => Pick<TooltipProps, 'content' | 'placement'>;
+declare type Formatter<R, K extends keyof R, V = R[K]> = (value: V, row: R, index: number, rows: R[] | undefined) => string;
 declare type CustomSortable<R> = {
     /**
      * Optional compare function for sorting.
@@ -81,7 +81,7 @@ export declare type ActionColumn<R> = CustomSortable<R> & {
     /**
      * Callback function that resolves to Button props.
      */
-    action: (row: R, index: number, rows: R[]) => ActionType;
+    action: (row: R, index: number, rows: R[] | undefined) => ActionType;
 };
 export declare type CustomColumn<R> = CustomSortable<R> & {
     /**
@@ -92,7 +92,7 @@ export declare type CustomColumn<R> = CustomSortable<R> & {
      * 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;
+    UNSAFE_render: (row: R, index: number, rows: R[] | undefined) => React.ReactNode;
 };
 export declare type TableItem = RequireAtLeastOne<{
     title: React.ReactNode;
@@ -109,7 +109,7 @@ declare type ItemColumn<R> = Column & CustomSortable<R> & {
     /**
      * Callback function that resolves to TableItem props
      */
-    item: (row: R, index: number, rows: R[]) => TableItem | undefined;
+    item: (row: R, index: number, rows: R[] | undefined) => TableItem | undefined;
 };
 export declare type TableStatus = {
     status: ChipStatus;
@@ -123,7 +123,7 @@ declare type StatusColumn<R> = Column & CustomSortable<R> & {
     /**
      * Callback function that resolves to StatusChip props
      */
-    status: (row: R, index: number, rows: R[]) => TableStatus | undefined;
+    status: (row: R, index: number, rows: R[] | undefined) => TableStatus | undefined;
 };
 declare type ListColumn = Column & {
     /**
@@ -147,15 +147,19 @@ export declare type DataTableRow = Record<string, any> & {
      */
     id: number | string;
 };
+export declare type DataListGroupedRows<R extends DataTableRow> = {
+    [K in string]: DataListGroupedRows<R> | R[];
+};
 export declare type Sort<C> = {
     column: C;
     direction: SortDirection;
 };
+export declare const areRowsGrouped: <R extends DataTableRow>(rows: DataListGroupedRows<R> | R[]) => rows is DataListGroupedRows<R>;
 export declare const toSortDirection: (direction: SortDirection | undefined) => 'asc' | 'desc' | false;
 export declare type StickyColumn = 'left' | 'right';
 declare type CellProps = {
     key: string;
-    align: TextAlign;
+    align: TextAlign | undefined;
     stickyColumn?: StickyColumn;
 };
 export declare const cellProps: <C extends Column>(column: C) => CellProps;

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

@@ -1,11 +1,33 @@
+import isArray from 'lodash/isArray';
+export const areRowsGrouped = (rows) => {
+    return !isArray(rows);
+};
 export const toSortDirection = (direction) => direction === 'ascending' ? 'asc' : direction === 'descending' ? 'desc' : false;
-export const cellProps = (column) => ({
-    key: column.key || column.headerName,
-    align: column.type === 'number' || column.type === 'action' ? 'right' : 'left',
-    stickyColumn: column.sticky,
-});
+export const cellProps = (column) => {
+    var _a;
+    let align;
+    switch (column.type) {
+        case 'action':
+        case 'number': {
+            align = 'right';
+            break;
+        }
+        case 'custom': {
+            align = 'stretch';
+            break;
+        }
+        default: {
+            align = 'left';
+        }
+    }
+    return {
+        key: (_a = column.key) !== null && _a !== void 0 ? _a : column.headerName,
+        align,
+        stickyColumn: column.sticky,
+    };
+};
 export const columnIsFieldColumn = (column) => Boolean(column && column.field);
 export function isOnSortChangedDirection(value) {
     return value === undefined || ['ascending', 'descending'].includes(value);
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdXRpbHMvdGFibGUvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBOExBLE1BQU0sQ0FBQyxNQUFNLGVBQWUsR0FBRyxDQUFDLFNBQW9DLEVBQTBCLEVBQUUsQ0FDOUYsU0FBUyxLQUFLLFdBQVcsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxTQUFTLEtBQUssWUFBWSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQztBQVVsRixNQUFNLENBQUMsTUFBTSxTQUFTLEdBQUcsQ0FBbUIsTUFBUyxFQUFhLEVBQUUsQ0FBQyxDQUFDO0lBQ3BFLEdBQUcsRUFBRSxNQUFNLENBQUMsR0FBRyxJQUFJLE1BQU0sQ0FBQyxVQUFVO0lBQ3BDLEtBQUssRUFBRSxNQUFNLENBQUMsSUFBSSxLQUFLLFFBQVEsSUFBSSxNQUFNLENBQUMsSUFBSSxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxNQUFNO0lBQzlFLFlBQVksRUFBRSxNQUFNLENBQUMsTUFBTTtDQUM1QixDQUFDLENBQUM7QUFFSCxNQUFNLENBQUMsTUFBTSxtQkFBbUIsR0FBRyxDQUF5QixNQUEyQixFQUE0QixFQUFFLENBQ25ILE9BQU8sQ0FBQyxNQUFNLElBQUssTUFBeUIsQ0FBQyxLQUFLLENBQUMsQ0FBQztBQTJCdEQsTUFBTSxVQUFVLHdCQUF3QixDQUFDLEtBQXlCO0lBQ2hFLE9BQU8sS0FBSyxLQUFLLFNBQVMsSUFBSSxDQUFDLFdBQVcsRUFBRSxZQUFZLENBQUMsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7QUFDNUUsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvdXRpbHMvdGFibGUvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxPQUFPLE1BQU0sZ0JBQWdCLENBQUM7QUFnTXJDLE1BQU0sQ0FBQyxNQUFNLGNBQWMsR0FBRyxDQUM1QixJQUFrQyxFQUNGLEVBQUU7SUFDbEMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQztBQUN4QixDQUFDLENBQUM7QUFFRixNQUFNLENBQUMsTUFBTSxlQUFlLEdBQUcsQ0FBQyxTQUFvQyxFQUEwQixFQUFFLENBQzlGLFNBQVMsS0FBSyxXQUFXLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsU0FBUyxLQUFLLFlBQVksQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUM7QUFVbEYsTUFBTSxDQUFDLE1BQU0sU0FBUyxHQUFHLENBQW1CLE1BQVMsRUFBYSxFQUFFOztJQUNsRSxJQUFJLEtBQTRCLENBQUM7SUFFakMsUUFBUSxNQUFNLENBQUMsSUFBSSxFQUFFO1FBQ25CLEtBQUssUUFBUSxDQUFDO1FBQ2QsS0FBSyxRQUFRLENBQUMsQ0FBQztZQUNiLEtBQUssR0FBRyxPQUFPLENBQUM7WUFDaEIsTUFBTTtTQUNQO1FBRUQsS0FBSyxRQUFRLENBQUMsQ0FBQztZQUNiLEtBQUssR0FBRyxTQUFTLENBQUM7WUFDbEIsTUFBTTtTQUNQO1FBRUQsT0FBTyxDQUFDLENBQUM7WUFDUCxLQUFLLEdBQUcsTUFBTSxDQUFDO1NBQ2hCO0tBQ0Y7SUFFRCxPQUFPO1FBQ0wsR0FBRyxFQUFFLE1BQUEsTUFBTSxDQUFDLEdBQUcsbUNBQUksTUFBTSxDQUFDLFVBQVU7UUFDcEMsS0FBSztRQUNMLFlBQVksRUFBRSxNQUFNLENBQUMsTUFBTTtLQUM1QixDQUFDO0FBQ0osQ0FBQyxDQUFDO0FBRUYsTUFBTSxDQUFDLE1BQU0sbUJBQW1CLEdBQUcsQ0FBeUIsTUFBMkIsRUFBNEIsRUFBRSxDQUNuSCxPQUFPLENBQUMsTUFBTSxJQUFLLE1BQXlCLENBQUMsS0FBSyxDQUFDLENBQUM7QUEyQnRELE1BQU0sVUFBVSx3QkFBd0IsQ0FBQyxLQUF5QjtJQUNoRSxPQUFPLEtBQUssS0FBSyxTQUFTLElBQUksQ0FBQyxXQUFXLEVBQUUsWUFBWSxDQUFDLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO0FBQzVFLENBQUMifQ==

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

@@ -0,0 +1,17 @@
+import React from 'react';
+export declare type UseInViewCallback = (inView: boolean, entry: IntersectionObserverEntry) => void;
+export declare type UseInViewOptions = IntersectionObserverInit & {
+    /**
+     * Callback to be invoked when the target element changes from being in view to not being in view and vice-versa.
+     * @param inView True, if the target element is in view. False, if the target element is not in view.
+     * @param entry The entry for the target element in the IntersectionObserverEntry list.
+     */
+    onChange?: UseInViewCallback;
+    /**
+     * If true, the observer will be skipped and the onChange callback will not be invoked.
+     */
+    skip?: boolean;
+};
+declare type UseInViewResult = [React.RefObject<HTMLDivElement>, boolean, IntersectionObserverEntry | undefined];
+export declare const useInView: ({ onChange, skip, root, rootMargin, threshold, }: UseInViewOptions) => UseInViewResult;
+export {};

package/dist/src/utils/useInView.js

@@ -0,0 +1,35 @@
+import React from 'react';
+export const useInView = ({ onChange, skip, root = document, rootMargin, threshold = 0, }) => {
+    const ref = React.useRef(null);
+    const [state, setState] = React.useState({
+        inView: false,
+        entry: undefined,
+    });
+    React.useEffect(() => {
+        const target = ref.current;
+        // Ensure we have target ref and that we shouldn't skip observing.
+        if (skip || !target) {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.target === ref.current) {
+                    setState({ inView: entry.isIntersecting, entry });
+                    onChange === null || onChange === void 0 ? void 0 : onChange(entry.isIntersecting, entry);
+                }
+            });
+        }, {
+            root,
+            rootMargin,
+            threshold,
+        });
+        observer.observe(target);
+        return () => {
+            if (target) {
+                observer.unobserve(target);
+            }
+        };
+    }, [ref, skip, root, rootMargin, threshold, onChange]);
+    return [ref, state.inView, state.entry];
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlSW5WaWV3LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL3V0aWxzL3VzZUluVmlldy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUF5QjFCLE1BQU0sQ0FBQyxNQUFNLFNBQVMsR0FBRyxDQUFDLEVBQ3hCLFFBQVEsRUFDUixJQUFJLEVBQ0osSUFBSSxHQUFHLFFBQVEsRUFDZixVQUFVLEVBQ1YsU0FBUyxHQUFHLENBQUMsR0FDSSxFQUFtQixFQUFFO0lBQ3RDLE1BQU0sR0FBRyxHQUFHLEtBQUssQ0FBQyxNQUFNLENBQWlCLElBQUksQ0FBQyxDQUFDO0lBQy9DLE1BQU0sQ0FBQyxLQUFLLEVBQUUsUUFBUSxDQUFDLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBYztRQUNwRCxNQUFNLEVBQUUsS0FBSztRQUNiLEtBQUssRUFBRSxTQUFTO0tBQ2pCLENBQUMsQ0FBQztJQUVILEtBQUssQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ25CLE1BQU0sTUFBTSxHQUFHLEdBQUcsQ0FBQyxPQUFPLENBQUM7UUFDM0Isa0VBQWtFO1FBQ2xFLElBQUksSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ25CLE9BQU87U0FDUjtRQUVELE1BQU0sUUFBUSxHQUFHLElBQUksb0JBQW9CLENBQ3ZDLENBQUMsT0FBTyxFQUFFLEVBQUU7WUFDVixPQUFPLENBQUMsT0FBTyxDQUFDLENBQUMsS0FBSyxFQUFFLEVBQUU7Z0JBQ3hCLElBQUksS0FBSyxDQUFDLE1BQU0sS0FBSyxHQUFHLENBQUMsT0FBTyxFQUFFO29CQUNoQyxRQUFRLENBQUMsRUFBRSxNQUFNLEVBQUUsS0FBSyxDQUFDLGNBQWMsRUFBRSxLQUFLLEVBQUUsQ0FBQyxDQUFDO29CQUNsRCxRQUFRLGFBQVIsUUFBUSx1QkFBUixRQUFRLENBQUcsS0FBSyxDQUFDLGNBQWMsRUFBRSxLQUFLLENBQUMsQ0FBQztpQkFDekM7WUFDSCxDQUFDLENBQUMsQ0FBQztRQUNMLENBQUMsRUFDRDtZQUNFLElBQUk7WUFDSixVQUFVO1lBQ1YsU0FBUztTQUNWLENBQ0YsQ0FBQztRQUVGLFFBQVEsQ0FBQyxPQUFPLENBQUMsTUFBTSxDQUFDLENBQUM7UUFFekIsT0FBTyxHQUFHLEVBQUU7WUFDVixJQUFJLE1BQU0sRUFBRTtnQkFDVixRQUFRLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FBQyxDQUFDO2FBQzVCO1FBQ0gsQ0FBQyxDQUFDO0lBQ0osQ0FBQyxFQUFFLENBQUMsR0FBRyxFQUFFLElBQUksRUFBRSxJQUFJLEVBQUUsVUFBVSxFQUFFLFNBQVMsRUFBRSxRQUFRLENBQUMsQ0FBQyxDQUFDO0lBRXZELE9BQU8sQ0FBQyxHQUFHLEVBQUUsS0FBSyxDQUFDLE1BQU0sRUFBRSxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7QUFDMUMsQ0FBQyxDQUFDIn0=

package/dist/styles.css

@@ -466,6 +466,10 @@ img,video {
   --aquarium-box-shadow-4dp: 0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20);
   --aquarium-box-shadow-2dp: 0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24);
   --aquarium-box-shadow-white-inset: inset 0 0 0 3px rgba(255,255,255,1);
+  --aquarium-box-shadow-card-default: 0px 3px 3px rgba(0, 0, 0, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.05);
+  --aquarium-box-shadow-card-hover: 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05);
+  --aquarium-box-shadow-card-active: 0px 1px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05);
+  --aquarium-box-shadow-card-checked: 0px -1px 1px 0px rgba(53, 69, 190, 0.05), 0px 3px 3px 0px rgba(53, 69, 190, 0.20);
   --aquarium-screens-default: 0px;
   --aquarium-screens-xs: 320px;
   --aquarium-screens-sm: 672px;
@@ -541,7 +545,7 @@ 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{
+.recharts-cartesian-axis-tick-value,.recharts-label{
   font-family: Inter;
   font-size: 12px;
   font-weight: 400;
@@ -551,6 +555,12 @@ input[type='number'].no-arrows {
   fill: #787885;
   fill: var(--aquarium-colors-grey-50, #787885);
 }
+.recharts-label{
+  stroke: none;
+}
+.recharts-yAxis .recharts-label {
+  text-anchor: middle;
+}
 .recharts-tooltip-wrapper{
   font-family: Inter;
   font-size: 16px;
@@ -1643,9 +1653,6 @@ input[type='number'].no-arrows {
 .border-2{
   border-width: 2px;
 }
-.border-t{
-  border-top-width: 1px;
-}
 .border-b{
   border-bottom-width: 1px;
 }
@@ -1683,6 +1690,10 @@ input[type='number'].no-arrows {
   border-color: #ededf0;
   border-color: var(--aquarium-colors-grey-5, #ededf0);
 }
+.border-primary-80{
+  border-color: #3545be;
+  border-color: var(--aquarium-colors-primary-80, #3545be);
+}
 .border-transparent{
   border-color: transparent;
   border-color: var(--aquarium-colors-transparent, transparent);
@@ -1691,10 +1702,6 @@ input[type='number'].no-arrows {
   border-color: #e1e1e3;
   border-color: var(--aquarium-colors-grey-10, #e1e1e3);
 }
-.border-primary-80{
-  border-color: #3545be;
-  border-color: var(--aquarium-colors-primary-80, #3545be);
-}
 .border-primary-40{
   border-color: #b9c5ef;
   border-color: var(--aquarium-colors-primary-40, #b9c5ef);
@@ -2442,6 +2449,30 @@ input[type='number'].no-arrows {
 .opacity-40{
   opacity: 0.4;
 }
+.opacity-100{
+  opacity: 1;
+}
+.opacity-0{
+  opacity: 0;
+}
+.shadow-card-default{
+  --tw-shadow: var(--aquarium-box-shadow-card-default, 0px 3px 3px rgba(0, 0, 0, 0.1), 0px -1px 1px rgba(0, 0, 0, 0.05));
+  --tw-shadow-colored: 0px 3px 3px 0px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
+.shadow-card-checked{
+  --tw-shadow: var(--aquarium-box-shadow-card-checked, 0px -1px 1px 0px rgba(53, 69, 190, 0.05), 0px 3px 3px 0px rgba(53, 69, 190, 0.20));
+  --tw-shadow-colored: 0px -1px 1px 0px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
+.shadow-card-active{
+  --tw-shadow: var(--aquarium-box-shadow-card-active, 0px 1px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05));
+  --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
 .shadow-16dp{
   --tw-shadow: var(--aquarium-box-shadow-16dp, 0px 16px 32px rgba(90, 91, 106, 0.12), 0px 8px 16px rgba(58, 58, 68, 0.12));
   --tw-shadow-colored: 0px 16px 32px 0px var(--tw-shadow-color);
@@ -2523,12 +2554,20 @@ input[type='number'].no-arrows {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
+.transition-opacity{
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .delay-150{
   transition-delay: 150ms;
 }
 .duration-300{
   transition-duration: 300ms;
 }
+.duration-200{
+  transition-duration: 200ms;
+}
 .ease-in-out{
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -2633,6 +2672,10 @@ input[type='number'].no-arrows {
   border-color: #d2d2d6;
   border-color: var(--aquarium-colors-grey-20, #d2d2d6);
 }
+.hover\:bg-primary-5:hover{
+  background-color: #f3f6ff;
+  background-color: var(--aquarium-colors-primary-5, #f3f6ff);
+}
 .hover\:bg-grey-0:hover{
   background-color: #f7f7fa;
   background-color: var(--aquarium-colors-grey-0, #f7f7fa);
@@ -2649,10 +2692,6 @@ input[type='number'].no-arrows {
   background-color: #222f95;
   background-color: var(--aquarium-colors-primary-90, #222f95);
 }
-.hover\:bg-primary-5:hover{
-  background-color: #f3f6ff;
-  background-color: var(--aquarium-colors-primary-5, #f3f6ff);
-}
 .hover\:bg-error-10:hover{
   background-color: #ffcbd2;
   background-color: var(--aquarium-colors-error-10, #ffcbd2);
@@ -2685,6 +2724,12 @@ input[type='number'].no-arrows {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
+.hover\:shadow-card-hover:hover{
+  --tw-shadow: var(--aquarium-box-shadow-card-hover, 0px 3px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05));
+  --tw-shadow-colored: 0px 3px 3px 0px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
 .hover\:ring-primary-90:hover{
   --tw-ring-color: var(--aquarium-colors-primary-90, #222f95);
 }
@@ -2842,9 +2887,9 @@ input[type='number'].no-arrows {
 .focus-visible\:ring-info-70:focus-visible{
   --tw-ring-color: var(--aquarium-colors-info-70, #0399e3);
 }
-.active\:bg-grey-5:active{
-  background-color: #ededf0;
-  background-color: var(--aquarium-colors-grey-5, #ededf0);
+.active\:bg-white:active{
+  background-color: white;
+  background-color: var(--aquarium-colors-white, white);
 }
 .active\:bg-primary-90:active{
   background-color: #222f95;
@@ -2858,6 +2903,10 @@ input[type='number'].no-arrows {
   background-color: transparent;
   background-color: var(--aquarium-colors-transparent, transparent);
 }
+.active\:bg-grey-5:active{
+  background-color: #ededf0;
+  background-color: var(--aquarium-colors-grey-5, #ededf0);
+}
 .active\:bg-grey-10:active{
   background-color: #e1e1e3;
   background-color: var(--aquarium-colors-grey-10, #e1e1e3);
@@ -2874,6 +2923,12 @@ input[type='number'].no-arrows {
   color: #4a4b57;
   color: var(--aquarium-colors-grey-70, #4a4b57);
 }
+.active\:shadow-card-active:active{
+  --tw-shadow: var(--aquarium-box-shadow-card-active, 0px 1px 3px rgba(0, 0, 0, 0.2), 0px -1px 1px rgba(0, 0, 0, 0.05));
+  --tw-shadow-colored: 0px 1px 3px 0px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
 .active\:ring-0:active{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -2998,16 +3053,14 @@ input[type='number'].no-arrows {
   stroke: #e3e9ff;
   stroke: var(--aquarium-colors-primary-10, #e3e9ff);
 }
-.\[\&\>\.group\>\*\]\:bg-grey-0>.group>*{
+.\[\&\>\*\]\:bg-primary-5>*{
+  background-color: #f3f6ff;
+  background-color: var(--aquarium-colors-primary-5, #f3f6ff);
+}
+.\[\&\>\*\]\:hover\:bg-grey-0:hover>*{
   background-color: #f7f7fa;
   background-color: var(--aquarium-colors-grey-0, #f7f7fa);
 }
-.\[\&\>\.group\>\*\:first-child\]\:border-b-0>.group>*:first-child{
-  border-bottom-width: 0px;
-}
-.\[\&\:last-child\>\*\:first-child\]\:border-t:last-child>*:first-child{
-  border-top-width: 1px;
-}
 .\[\&\>button\]\:p-0>button{
   padding: 0;
 }
@@ -3026,3 +3079,7 @@ input[type='number'].no-arrows {
   padding-left: 16px;
   padding-right: 16px;
 }
+.\[\&\>div\:first-child\]\:px-3>div:first-child{
+  padding-left: 8px;
+  padding-right: 8px;
+}