@aivenio/aquarium 1.24.0 → 1.26.0-rc1

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

@@ -5,13 +5,13 @@ import { type Weight } from '../../../src/molecules/Template/Template';
 import { type ActionType } from '../../../types/ActionType';
 import { type AllOrNone, type RequireAtLeastOne } from '../../../types/utils';
 import type React from 'react';
-export declare type TextAlign = 'left' | 'center' | 'right';
+export declare type TextAlign = 'center' | 'left' | 'right';
 export declare type SortDirection = AriaAttributes['aria-sort'];
 export declare type Column = {
     /**
      * Type of the column.
      */
-    type: 'text' | 'number' | 'action' | 'custom' | 'status' | 'item';
+    type: 'action' | 'custom' | 'item' | 'number' | 'status' | 'text';
     /**
      * Display name for the column.
      */
@@ -37,7 +37,7 @@ declare type Sortable = {
      */
     sortable?: boolean;
 };
-export declare type FieldColumn<R, K extends keyof R = keyof R> = K extends keyof R ? {
+export declare type FieldColumn<R, K extends keyof R = keyof R> = K extends keyof R ? CustomSortable<R> & Sortable & {
     /**
      * Name of the property field that this column represents in the data rows.
      */
@@ -47,7 +47,7 @@ export declare type FieldColumn<R, K extends keyof R = keyof R> = K extends keyo
      * Sorting will still be based on the unformatted value.
      */
     formatter?: Formatter<R, K>;
-} & Sortable & CustomSortable<R> : never;
+} : never;
 export declare type TextColumn<R> = FieldColumn<R> & {
     /**
      * Type of the column.
@@ -108,14 +108,14 @@ declare type StatusColumn<R> = Column & CustomSortable<R> & {
      */
     status: (row: R, index: number, rows: R[]) => {
         status: ChipStatus;
-        text: string | number;
+        text: number | string;
     };
 };
 declare type ListColumn = Column & {
     /**
      * Width of the column. Number for pixels and string for percentages
      */
-    width?: number | Weight;
+    width?: Weight | number;
 };
 declare type TableColumn = Column & {
     /**
@@ -125,13 +125,13 @@ declare type TableColumn = Column & {
 };
 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>);
+declare type DataColumn<R extends DataTableRow, C extends Column> = C & (ActionColumn<R> | CustomColumn<R> | ItemColumn<R> | NumberColumn<R> | StatusColumn<R> | TextColumn<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;
+    id: number | string;
 };
 export declare type Sort<C> = {
     column: C;
@@ -162,7 +162,7 @@ export declare type DataTableMenuProps<R extends DataTableRow> = AllOrNone<{
      * @param row currently selected row
      * @param index currectly selected row index
      */
-    onAction: (action: string | number, row: R, index: number) => void;
+    onAction: (action: number | string, row: R, index: number) => void;
     /**
      * Handler that is called when the menu's open state changes.
      */

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

@@ -1,2 +1,2 @@
 import { type DataListColumn, type DataTableColumn, type DataTableRow, type Sort } from '../../../src/utils/table/types';
-export declare const useTableSort: <C extends DataTableColumn<R> | DataListColumn<R>, R extends DataTableRow>() => [Sort<C> | undefined, (column: C) => void];
+export declare const useTableSort: <C extends DataListColumn<R> | DataTableColumn<R>, R extends DataTableRow>() => [Sort<C> | undefined, (column: C) => void];

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

@@ -1,2 +1,2 @@
 import { type DataListColumn, type DataTableColumn, type DataTableRow, type Sort } from '../../../src/utils/table/types';
-export declare const sortRowsBy: <C extends DataTableColumn<R> | DataListColumn<R>, R extends DataTableRow>(rows: R[], sort: Sort<C> | undefined) => R[];
+export declare const sortRowsBy: <C extends DataListColumn<R> | DataTableColumn<R>, R extends DataTableRow>(rows: R[], sort: Sort<C> | undefined) => R[];

package/dist/src/utils/tailwind.js

@@ -3,9 +3,11 @@ function cleanClassNames(classNames) {
     const tokens = classNames.split(/\s+/);
     return tokens.filter((item) => item).join(' ');
 }
-// Wrapper function for 'classnames' module that requires more strict typing
-// Note: Adding many parameters was the only way I was aware of to get inference
-//       working for each parameter separately
+/*
+ * Wrapper function for 'classnames' module that requires more strict typing
+ * Note: Adding many parameters was the only way I was aware of to get inference
+ *       working for each parameter separately
+ */
 export function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10) {
     const result = originalClassNames(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10);
     return cleanClassNames(result);
@@ -15,4 +17,4 @@ export const classNames = (...args) => {
     const result = originalClassNames(...args);
     return cleanClassNames(result);
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFpbHdpbmQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdXRpbHMvdGFpbHdpbmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxrQkFBcUMsTUFBTSxZQUFZLENBQUM7QUFJL0QsU0FBUyxlQUFlLENBQUMsVUFBa0I7SUFDekMsTUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2QyxPQUFPLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztBQUNqRCxDQUFDO0FBRUQsNEVBQTRFO0FBQzVFLGdGQUFnRjtBQUNoRiw4Q0FBOEM7QUFDOUMsTUFBTSxVQUFVLEVBQUUsQ0FDaEIsbUJBQXFELEVBQ3JELG1CQUFxRCxFQUNyRCxtQkFBcUQsRUFDckQsbUJBQXFELEVBQ3JELG1CQUFxRCxFQUNyRCxtQkFBcUQsRUFDckQsbUJBQXFELEVBQ3JELG1CQUFxRCxFQUNyRCxtQkFBcUQsRUFDckQsb0JBQXVEO0lBRXZELE1BQU0sTUFBTSxHQUFHLGtCQUFrQixDQUMvQixtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ25CLG1CQUFtQixFQUNuQixtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ25CLG1CQUFtQixFQUNuQixtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ25CLG1CQUFtQixFQUNuQixvQkFBb0IsQ0FDckIsQ0FBQztJQUVGLE9BQU8sZUFBZSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0FBQ2pDLENBQUM7QUFFRCw0Q0FBNEM7QUFDNUMsTUFBTSxDQUFDLE1BQU0sVUFBVSxHQUFHLENBQUMsR0FBRyxJQUFnQixFQUFVLEVBQUU7SUFDeEQsTUFBTSxNQUFNLEdBQUcsa0JBQWtCLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQztJQUMzQyxPQUFPLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztBQUNqQyxDQUFDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFpbHdpbmQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdXRpbHMvdGFpbHdpbmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxrQkFBcUMsTUFBTSxZQUFZLENBQUM7QUFJL0QsU0FBUyxlQUFlLENBQUMsVUFBa0I7SUFDekMsTUFBTSxNQUFNLEdBQUcsVUFBVSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUN2QyxPQUFPLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQyxJQUFJLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztBQUNqRCxDQUFDO0FBRUQ7Ozs7R0FJRztBQUNILE1BQU0sVUFBVSxFQUFFLENBQ2hCLG1CQUFxRCxFQUNyRCxtQkFBcUQsRUFDckQsbUJBQXFELEVBQ3JELG1CQUFxRCxFQUNyRCxtQkFBcUQsRUFDckQsbUJBQXFELEVBQ3JELG1CQUFxRCxFQUNyRCxtQkFBcUQsRUFDckQsbUJBQXFELEVBQ3JELG9CQUF1RDtJQUV2RCxNQUFNLE1BQU0sR0FBRyxrQkFBa0IsQ0FDL0IsbUJBQW1CLEVBQ25CLG1CQUFtQixFQUNuQixtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ25CLG1CQUFtQixFQUNuQixtQkFBbUIsRUFDbkIsbUJBQW1CLEVBQ25CLG1CQUFtQixFQUNuQixtQkFBbUIsRUFDbkIsb0JBQW9CLENBQ3JCLENBQUM7SUFFRixPQUFPLGVBQWUsQ0FBQyxNQUFNLENBQUMsQ0FBQztBQUNqQyxDQUFDO0FBRUQsNENBQTRDO0FBQzVDLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBRyxDQUFDLEdBQUcsSUFBZ0IsRUFBVSxFQUFFO0lBQ3hELE1BQU0sTUFBTSxHQUFHLGtCQUFrQixDQUFDLEdBQUcsSUFBSSxDQUFDLENBQUM7SUFDM0MsT0FBTyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUM7QUFDakMsQ0FBQyxDQUFDIn0=

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

@@ -0,0 +1,2 @@
+export declare const sampleCustomVariables = "\n:root {\n  --aquarium-colors-primary-100: #5a40e2;\n  --aquarium-colors-primary-90: #6447fb;\n  --aquarium-colors-primary-80: #7459fb;\n  --aquarium-colors-primary-70: #836cfc;\n  --aquarium-colors-primary-60: #937efc;\n  --aquarium-colors-primary-50: #a291fd;\n  --aquarium-colors-primary-40: #b2a3fd;\n  --aquarium-colors-primary-30: #c1b5fd;\n  --aquarium-colors-primary-20: #d1c8fe;\n  --aquarium-colors-primary-10: #e0dafe;\n  --aquarium-colors-primary-5: #f0edff;\n  .Aquarium-Button {\n    --aquarium-border-radius-sm: 1.5rem;\n    --aquarium-colors-primary-80: #000000;\n  }\n}\n";
+export declare const timescaleDBCustomVariables = "\n:root {\n  --aquarium-colors-primary-100: #6447fb;\n  --aquarium-colors-primary-90: #6447fb;\n  --aquarium-colors-primary-80: #6447fb;\n  --aquarium-colors-primary-70: #b0c0fb;\n  --aquarium-colors-primary-60: #c8d3fd;\n  --aquarium-colors-primary-50: #d0d9fd;\n  --aquarium-colors-primary-40: #d7dffc;\n  --aquarium-colors-primary-30: #dfe6fd;\n  --aquarium-colors-primary-20: #e8edfe;\n  --aquarium-colors-primary-10: #eff2fe;\n  --aquarium-colors-primary-5: #f8f9ff;\n  --aquarium-colors-primary-0: #f8f9ff;\n  --aquarium-colors-grey-100: #000;\n  --aquarium-colors-grey-90: #000;\n  --aquarium-colors-grey-80: #444;\n  --aquarium-colors-grey-70: #444;\n  --aquarium-colors-grey-60: #6a6a6a;\n  --aquarium-colors-grey-50: #7e7e7e;\n  --aquarium-colors-grey-40: #939393;\n  --aquarium-colors-grey-30: #a5a5a5;\n  --aquarium-colors-grey-20: #bdbdbd;\n  --aquarium-colors-grey-10: #ebebeb;\n  --aquarium-colors-grey-5: #ebebeb;\n  --aquarium-colors-grey-0: #f8f8f8;\n}\n\n.Aquarium-Button {\n  font-weight: 600;\n  border-radius: 24px;\n}\n\n.Aquarium-Button.Primary {\n  color: var(--aquarium-colors-white);\n  background-color: var(--aquarium-colors-grey-100);\n\n  &:hover {\n    background-color: var(--aquarium-colors-grey-80);\n  }\n\n  &:active {\n    background-color: var(--aquarium-colors-grey-70);\n  }\n\n  &:disabled {\n    color: var(--aquarium-colors-grey-20);\n    background-color: var(--aquarium-colors-grey-5);\n  }\n}\n\n.Aquarium-Button.Secondary {\n  color: var(--aquarium-colors-grey-100);\n  background-color: var(--aquarium-colors-white);\n  border: 1.5px solid var(--aquarium-colors-grey-100);\n  box-shadow: none;\n\n  &:hover {\n    color: var(--aquarium-colors-grey-100);\n    background-color: var(--aquarium-colors-primary-10);\n  }\n\n  &:active {\n    color: var(--aquarium-colors-grey-100);\n    background-color: var(--aquarium-colors-primary-20);\n  }\n\n  &:focus-visible {\n    color: var(--aquarium-colors-grey-100);\n    box-shadow: none;\n  }\n\n  &:disabled {\n    color: var(--aquarium-colors-grey-20);\n    background-color: var(--aquarium-colors-white);\n    border-color: var(--aquarium-colors-grey-20);\n\n    &:hover {\n      background-color: var(--aquarium-colors-white);\n    }\n  }\n}\n\n.Aquarium-Button.Ghost {\n  padding: var(--aquarium-spacing-2) var(--aquarium-spacing-3);\n\n  &.Aquarium-Dense {\n    padding: var(--aquarium-spacing-2) var(--aquarium-spacing-2);\n  }\n\n  &:hover {\n    color: var(--aquarium-colors-primary-90);\n    background-color: var(--aquarium-colors-primary-10);\n  }\n\n  &:active {\n    background-color: var(--aquarium-colors-primary-20);\n  }\n\n  &:disabled {\n    color: var(--aquarium-colors-grey-20);\n\n    &:hover {\n      background-color: var(--aquarium-colors-transparent);\n    }\n  }\n}\n\n.Aquarium-Modal > [aria-modal*='true'],\n.Aquarium-Dialog > [aria-modal*='true'],\n.Aquarium-EmptyState {\n  border-radius: 16px;\n}\n\n.Aquarium-Modal > [aria-modal*='true'] {\n  overflow: hidden;\n}\n";

package/dist/src/utils/themeVariableSamples.js

@@ -0,0 +1,146 @@
+export const sampleCustomVariables = `
+:root {
+  --aquarium-colors-primary-100: #5a40e2;
+  --aquarium-colors-primary-90: #6447fb;
+  --aquarium-colors-primary-80: #7459fb;
+  --aquarium-colors-primary-70: #836cfc;
+  --aquarium-colors-primary-60: #937efc;
+  --aquarium-colors-primary-50: #a291fd;
+  --aquarium-colors-primary-40: #b2a3fd;
+  --aquarium-colors-primary-30: #c1b5fd;
+  --aquarium-colors-primary-20: #d1c8fe;
+  --aquarium-colors-primary-10: #e0dafe;
+  --aquarium-colors-primary-5: #f0edff;
+  .Aquarium-Button {
+    --aquarium-border-radius-sm: 1.5rem;
+    --aquarium-colors-primary-80: #000000;
+  }
+}
+`;
+/*
+ * Since we can't comment in the constant value below, it causes css not being applied properly.
+ * So adding the comment about the image modal here.
+ *
+ * We need to set overflow: hidden so corner rounding works as it should
+ * when a header image is used with modals.
+ * .Aquarium-Modal > [aria-modal*='true'] { overflow: hidden; }
+ */
+export const timescaleDBCustomVariables = `
+:root {
+  --aquarium-colors-primary-100: #6447fb;
+  --aquarium-colors-primary-90: #6447fb;
+  --aquarium-colors-primary-80: #6447fb;
+  --aquarium-colors-primary-70: #b0c0fb;
+  --aquarium-colors-primary-60: #c8d3fd;
+  --aquarium-colors-primary-50: #d0d9fd;
+  --aquarium-colors-primary-40: #d7dffc;
+  --aquarium-colors-primary-30: #dfe6fd;
+  --aquarium-colors-primary-20: #e8edfe;
+  --aquarium-colors-primary-10: #eff2fe;
+  --aquarium-colors-primary-5: #f8f9ff;
+  --aquarium-colors-primary-0: #f8f9ff;
+  --aquarium-colors-grey-100: #000;
+  --aquarium-colors-grey-90: #000;
+  --aquarium-colors-grey-80: #444;
+  --aquarium-colors-grey-70: #444;
+  --aquarium-colors-grey-60: #6a6a6a;
+  --aquarium-colors-grey-50: #7e7e7e;
+  --aquarium-colors-grey-40: #939393;
+  --aquarium-colors-grey-30: #a5a5a5;
+  --aquarium-colors-grey-20: #bdbdbd;
+  --aquarium-colors-grey-10: #ebebeb;
+  --aquarium-colors-grey-5: #ebebeb;
+  --aquarium-colors-grey-0: #f8f8f8;
+}
+
+.Aquarium-Button {
+  font-weight: 600;
+  border-radius: 24px;
+}
+
+.Aquarium-Button.Primary {
+  color: var(--aquarium-colors-white);
+  background-color: var(--aquarium-colors-grey-100);
+
+  &:hover {
+    background-color: var(--aquarium-colors-grey-80);
+  }
+
+  &:active {
+    background-color: var(--aquarium-colors-grey-70);
+  }
+
+  &:disabled {
+    color: var(--aquarium-colors-grey-20);
+    background-color: var(--aquarium-colors-grey-5);
+  }
+}
+
+.Aquarium-Button.Secondary {
+  color: var(--aquarium-colors-grey-100);
+  background-color: var(--aquarium-colors-white);
+  border: 1.5px solid var(--aquarium-colors-grey-100);
+  box-shadow: none;
+
+  &:hover {
+    color: var(--aquarium-colors-grey-100);
+    background-color: var(--aquarium-colors-primary-10);
+  }
+
+  &:active {
+    color: var(--aquarium-colors-grey-100);
+    background-color: var(--aquarium-colors-primary-20);
+  }
+
+  &:focus-visible {
+    color: var(--aquarium-colors-grey-100);
+    box-shadow: none;
+  }
+
+  &:disabled {
+    color: var(--aquarium-colors-grey-20);
+    background-color: var(--aquarium-colors-white);
+    border-color: var(--aquarium-colors-grey-20);
+
+    &:hover {
+      background-color: var(--aquarium-colors-white);
+    }
+  }
+}
+
+.Aquarium-Button.Ghost {
+  padding: var(--aquarium-spacing-2) var(--aquarium-spacing-3);
+
+  &.Aquarium-Dense {
+    padding: var(--aquarium-spacing-2) var(--aquarium-spacing-2);
+  }
+
+  &:hover {
+    color: var(--aquarium-colors-primary-90);
+    background-color: var(--aquarium-colors-primary-10);
+  }
+
+  &:active {
+    background-color: var(--aquarium-colors-primary-20);
+  }
+
+  &:disabled {
+    color: var(--aquarium-colors-grey-20);
+
+    &:hover {
+      background-color: var(--aquarium-colors-transparent);
+    }
+  }
+}
+
+.Aquarium-Modal > [aria-modal*='true'],
+.Aquarium-Dialog > [aria-modal*='true'],
+.Aquarium-EmptyState {
+  border-radius: 16px;
+}
+
+.Aquarium-Modal > [aria-modal*='true'] {
+  overflow: hidden;
+}
+`;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGhlbWVWYXJpYWJsZVNhbXBsZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdXRpbHMvdGhlbWVWYXJpYWJsZVNhbXBsZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxDQUFDLE1BQU0scUJBQXFCLEdBQUc7Ozs7Ozs7Ozs7Ozs7Ozs7OztDQWtCcEMsQ0FBQztBQUVGOzs7Ozs7O0dBT0c7QUFDSCxNQUFNLENBQUMsTUFBTSwwQkFBMEIsR0FBRzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0NBcUh6QyxDQUFDIn0=

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

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { type Breakpointable } from '../../types/tailwind';
 declare type StylesObject = {
-    [key in keyof React.CSSProperties]: {
+    [key in keyof React.CSSProperties]: Breakpointable<any> | {
         value: Breakpointable<any>;
-        transformer?: (val: any) => string | number;
-    } | Breakpointable<any>;
+        transformer?: (val: any) => number | string;
+    };
 };
 export declare function resolveTailwindThemeValue(key: string, val: any): any;
 export declare function useStyle(styles: StylesObject): React.CSSProperties;

package/dist/src/utils/useStyle.js

@@ -17,25 +17,29 @@ const THEME_MAPPING = {
     rowGap: 'gap',
     columnGap: 'gap',
 };
-// Disabled because any felt better as a whole. The function usage becomes
-// more complicated with a type parameter
+/*
+ * Disabled because any felt better as a whole. The function usage becomes
+ * more complicated with a type parameter
+ */
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function resolveTailwindThemeValue(key, val) {
-    // If tailwind theme has the mapping for value, use it to get value.
-    // For example the theme has:
-    //
-    // "gridRow": {
-    //   "auto": "auto",
-    //   "span-1": "span 1 / span 1",
-    //   "span-2": "span 2 / span 2",
-    //   "span-3": "span 3 / span 3",
-    //   "span-4": "span 4 / span 4",
-    //   "span-5": "span 5 / span 5",
-    //   "span-6": "span 6 / span 6",
-    //   "span-full": "1 / -1"
-    // },
-    //
-    // key would be "gridRow", and val could be e.g. "span-5"
+    /*
+     * If tailwind theme has the mapping for value, use it to get value.
+     * For example the theme has:
+     *
+     * "gridRow": {
+     *   "auto": "auto",
+     *   "span-1": "span 1 / span 1",
+     *   "span-2": "span 2 / span 2",
+     *   "span-3": "span 3 / span 3",
+     *   "span-4": "span 4 / span 4",
+     *   "span-5": "span 5 / span 5",
+     *   "span-6": "span 6 / span 6",
+     *   "span-full": "1 / -1"
+     * },
+     *
+     * key would be "gridRow", and val could be e.g. "span-5"
+     */
     const resolvedKey = key in THEME_MAPPING ? THEME_MAPPING[key] : key;
     const found = get(partialTheme, [resolvedKey, val], undefined);
     if (!isUndefined(found)) {
@@ -46,8 +50,10 @@ export function resolveTailwindThemeValue(key, val) {
 export function useStyle(styles) {
     const context = useContext(DesignSystemContext);
     return Object.keys(styles).reduce((acc, key) => {
-        // This was the only way I got tsc happy. We are iterating the object keys,
-        // so we know the property must exist.
+        /*
+         * This was the only way I got tsc happy. We are iterating the object keys,
+         * so we know the property must exist.
+         */
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const property = styles[key];
         const isStylesObject = isPlainObject(property) && 'value' in property;
@@ -60,11 +66,13 @@ export function useStyle(styles) {
                 (val) => resolveTailwindThemeValue(key, property.transformer(val));
         const cssPropertyValue = transformer(resolvedValue);
         if (isUndefined(cssPropertyValue)) {
-            // If style value is undefined, we omit the key from the object
-            // this should reduce unwanted {key: "undefined"} noise
+            /*
+             * If style value is undefined, we omit the key from the object
+             * this should reduce unwanted {key: "undefined"} noise
+             */
             return acc;
         }
         return Object.assign(Object.assign({}, acc), { [key]: cssPropertyValue });
     }, {});
 }
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU3R5bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdXRpbHMvdXNlU3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUNuQyxPQUFPLEdBQUcsTUFBTSxZQUFZLENBQUM7QUFDN0IsT0FBTyxhQUFhLE1BQU0sc0JBQXNCLENBQUM7QUFDakQsT0FBTyxXQUFXLE1BQU0sb0JBQW9CLENBQUM7QUFDN0MsT0FBTyxZQUFZLE1BQU0scUJBQXFCLENBQUM7QUFFL0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFFcEUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFZOUQsTUFBTSxhQUFhLEdBQTJCO0lBQzVDLFVBQVUsRUFBRSxTQUFTO0lBQ3JCLGFBQWEsRUFBRSxTQUFTO0lBQ3hCLFdBQVcsRUFBRSxTQUFTO0lBQ3RCLFlBQVksRUFBRSxTQUFTO0lBQ3ZCLFNBQVMsRUFBRSxRQUFRO0lBQ25CLFlBQVksRUFBRSxRQUFRO0lBQ3RCLFVBQVUsRUFBRSxRQUFRO0lBQ3BCLFdBQVcsRUFBRSxRQUFRO0lBQ3JCLE1BQU0sRUFBRSxLQUFLO0lBQ2IsU0FBUyxFQUFFLEtBQUs7Q0FDakIsQ0FBQztBQUVGLDBFQUEwRTtBQUMxRSx5Q0FBeUM7QUFDekMsNkVBQTZFO0FBQzdFLE1BQU0sVUFBVSx5QkFBeUIsQ0FBQyxHQUFXLEVBQUUsR0FBUTtJQUM3RCxvRUFBb0U7SUFDcEUsNkJBQTZCO0lBQzdCLEVBQUU7SUFDRixlQUFlO0lBQ2Ysb0JBQW9CO0lBQ3BCLGlDQUFpQztJQUNqQyxpQ0FBaUM7SUFDakMsaUNBQWlDO0lBQ2pDLGlDQUFpQztJQUNqQyxpQ0FBaUM7SUFDakMsaUNBQWlDO0lBQ2pDLDBCQUEwQjtJQUMxQixLQUFLO0lBQ0wsRUFBRTtJQUNGLHlEQUF5RDtJQUN6RCxNQUFNLFdBQVcsR0FBRyxHQUFHLElBQUksYUFBYSxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQztJQUNwRSxNQUFNLEtBQUssR0FBRyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUMsV0FBVyxFQUFFLEdBQUcsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDO0lBQy9ELElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLEVBQUU7UUFDdkIsT0FBTyxLQUFLLENBQUM7S0FDZDtJQUVELE9BQU8sR0FBRyxDQUFDO0FBQ2IsQ0FBQztBQUVELE1BQU0sVUFBVSxRQUFRLENBQUMsTUFBb0I7SUFDM0MsTUFBTSxPQUFPLEdBQUcsVUFBVSxDQUFDLG1CQUFtQixDQUFDLENBQUM7SUFFaEQsT0FBTyxNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRTtRQUM3QywyRUFBMkU7UUFDM0Usc0NBQXNDO1FBQ3RDLG9FQUFvRTtRQUNwRSxNQUFNLFFBQVEsR0FBRyxNQUFNLENBQUMsR0FBeUIsQ0FBRSxDQUFDO1FBRXBELE1BQU0sY0FBYyxHQUFHLGFBQWEsQ0FBQyxRQUFRLENBQUMsSUFBSSxPQUFPLElBQUksUUFBUSxDQUFDO1FBQ3RFLE1BQU0sS0FBSyxHQUFHLGNBQWMsQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsUUFBUSxDQUFDO1FBQ3pELE1BQU0sYUFBYSxHQUFHLHFCQUFxQixDQUFDLEtBQUssRUFBRSxPQUFPLENBQUMsaUJBQWlCLENBQUMsQ0FBQztRQUU5RSxNQUFNLFdBQVcsR0FBRyxXQUFXLENBQUMsUUFBUSxhQUFSLFFBQVEsdUJBQVIsUUFBUSxDQUFFLFdBQVcsQ0FBQztZQUNwRCxDQUFDLENBQUMsQ0FBQyxHQUFRLEVBQUUsRUFBRSxDQUFDLHlCQUF5QixDQUFDLEdBQUcsRUFBRSxHQUFHLENBQUM7WUFDbkQsQ0FBQyxDQUFDLHlFQUF5RTtnQkFDekUsNERBQTREO2dCQUM1RCxDQUFDLEdBQVEsRUFBRSxFQUFFLENBQUMseUJBQXlCLENBQUMsR0FBRyxFQUFFLFFBQVEsQ0FBQyxXQUFXLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUU1RSxNQUFNLGdCQUFnQixHQUFHLFdBQVcsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUNwRCxJQUFJLFdBQVcsQ0FBQyxnQkFBZ0IsQ0FBQyxFQUFFO1lBQ2pDLCtEQUErRDtZQUMvRCx1REFBdUQ7WUFDdkQsT0FBTyxHQUFHLENBQUM7U0FDWjtRQUVELHVDQUNLLEdBQUcsS0FDTixDQUFDLEdBQUcsQ0FBQyxFQUFFLGdCQUFnQixJQUN2QjtJQUNKLENBQUMsRUFBRSxFQUF5QixDQUFDLENBQUM7QUFDaEMsQ0FBQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlU3R5bGUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvdXRpbHMvdXNlU3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUNuQyxPQUFPLEdBQUcsTUFBTSxZQUFZLENBQUM7QUFDN0IsT0FBTyxhQUFhLE1BQU0sc0JBQXNCLENBQUM7QUFDakQsT0FBTyxXQUFXLE1BQU0sb0JBQW9CLENBQUM7QUFDN0MsT0FBTyxZQUFZLE1BQU0scUJBQXFCLENBQUM7QUFFL0MsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0sK0JBQStCLENBQUM7QUFFcEUsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFZOUQsTUFBTSxhQUFhLEdBQTJCO0lBQzVDLFVBQVUsRUFBRSxTQUFTO0lBQ3JCLGFBQWEsRUFBRSxTQUFTO0lBQ3hCLFdBQVcsRUFBRSxTQUFTO0lBQ3RCLFlBQVksRUFBRSxTQUFTO0lBQ3ZCLFNBQVMsRUFBRSxRQUFRO0lBQ25CLFlBQVksRUFBRSxRQUFRO0lBQ3RCLFVBQVUsRUFBRSxRQUFRO0lBQ3BCLFdBQVcsRUFBRSxRQUFRO0lBQ3JCLE1BQU0sRUFBRSxLQUFLO0lBQ2IsU0FBUyxFQUFFLEtBQUs7Q0FDakIsQ0FBQztBQUVGOzs7R0FHRztBQUNILDZFQUE2RTtBQUM3RSxNQUFNLFVBQVUseUJBQXlCLENBQUMsR0FBVyxFQUFFLEdBQVE7SUFDN0Q7Ozs7Ozs7Ozs7Ozs7Ozs7T0FnQkc7SUFDSCxNQUFNLFdBQVcsR0FBRyxHQUFHLElBQUksYUFBYSxDQUFDLENBQUMsQ0FBQyxhQUFhLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQztJQUNwRSxNQUFNLEtBQUssR0FBRyxHQUFHLENBQUMsWUFBWSxFQUFFLENBQUMsV0FBVyxFQUFFLEdBQUcsQ0FBQyxFQUFFLFNBQVMsQ0FBQyxDQUFDO0lBQy9ELElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLEVBQUU7UUFDdkIsT0FBTyxLQUFLLENBQUM7S0FDZDtJQUVELE9BQU8sR0FBRyxDQUFDO0FBQ2IsQ0FBQztBQUVELE1BQU0sVUFBVSxRQUFRLENBQUMsTUFBb0I7SUFDM0MsTUFBTSxPQUFPLEdBQUcsVUFBVSxDQUFDLG1CQUFtQixDQUFDLENBQUM7SUFFaEQsT0FBTyxNQUFNLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLEdBQUcsRUFBRSxHQUFHLEVBQUUsRUFBRTtRQUM3Qzs7O1dBR0c7UUFDSCxvRUFBb0U7UUFDcEUsTUFBTSxRQUFRLEdBQUcsTUFBTSxDQUFDLEdBQXlCLENBQUUsQ0FBQztRQUVwRCxNQUFNLGNBQWMsR0FBRyxhQUFhLENBQUMsUUFBUSxDQUFDLElBQUksT0FBTyxJQUFJLFFBQVEsQ0FBQztRQUN0RSxNQUFNLEtBQUssR0FBRyxjQUFjLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLFFBQVEsQ0FBQztRQUN6RCxNQUFNLGFBQWEsR0FBRyxxQkFBcUIsQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDLGlCQUFpQixDQUFDLENBQUM7UUFFOUUsTUFBTSxXQUFXLEdBQUcsV0FBVyxDQUFDLFFBQVEsYUFBUixRQUFRLHVCQUFSLFFBQVEsQ0FBRSxXQUFXLENBQUM7WUFDcEQsQ0FBQyxDQUFDLENBQUMsR0FBUSxFQUFFLEVBQUUsQ0FBQyx5QkFBeUIsQ0FBQyxHQUFHLEVBQUUsR0FBRyxDQUFDO1lBQ25ELENBQUMsQ0FBQyx5RUFBeUU7Z0JBQ3pFLDREQUE0RDtnQkFDNUQsQ0FBQyxHQUFRLEVBQUUsRUFBRSxDQUFDLHlCQUF5QixDQUFDLEdBQUcsRUFBRSxRQUFRLENBQUMsV0FBVyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFFNUUsTUFBTSxnQkFBZ0IsR0FBRyxXQUFXLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDcEQsSUFBSSxXQUFXLENBQUMsZ0JBQWdCLENBQUMsRUFBRTtZQUNqQzs7O2VBR0c7WUFDSCxPQUFPLEdBQUcsQ0FBQztTQUNaO1FBRUQsdUNBQ0ssR0FBRyxLQUNOLENBQUMsR0FBRyxDQUFDLEVBQUUsZ0JBQWdCLElBQ3ZCO0lBQ0osQ0FBQyxFQUFFLEVBQXlCLENBQUMsQ0FBQztBQUNoQyxDQUFDIn0=

package/dist/system.cjs

@@ -6836,9 +6836,8 @@ function Tailwindify(Component) {
       return import_react15.default.cloneElement(child, newProps);
     });
     return /* @__PURE__ */ import_react15.default.createElement(Component, __spreadValues({
-      className,
-      children: childrenWithProps
-    }, componentProps));
+      className
+    }, componentProps), childrenWithProps);
   };
 }
 
@@ -7825,7 +7824,7 @@ var asCrumb = (Component, displayName, options = { isActive: false }) => {
       role: "link"
     }), /* @__PURE__ */ import_react28.default.createElement("span", {
       className: (0, import_classnames3.default)(
-        tw("flex flex-row flex-nowrap items-center gap-x-3 ", {
+        tw("flex flex-row flex-nowrap items-center gap-x-3 whitespace-nowrap", {
           "text-primary-80 hover:text-primary-70": !options.isActive,
           "text-grey-90": options.isActive
         })
@@ -11041,6 +11040,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         index,
         selected,
         onSelected,
+        showNotification = false,
         className
       } = _b, rest = __objRest(_b, [
         "id",
@@ -11053,6 +11053,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         "index",
         "selected",
         "onSelected",
+        "showNotification",
         "className"
       ]);
       const _id = id != null ? id : (0, import_kebabCase.default)(title);
@@ -11090,8 +11091,13 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         variant: "small",
         color: selected ? "primary-80" : disabled ? "grey-20" : "current",
         className: tw("inline-flex items-center gap-3")
+      }, showNotification ? /* @__PURE__ */ import_react82.default.createElement(Badge.Notification, {
+        right: "-4px",
+        top: "3px"
       }, /* @__PURE__ */ import_react82.default.createElement("span", {
         className: tw("whitespace-nowrap")
+      }, title)) : /* @__PURE__ */ import_react82.default.createElement("span", {
+        className: tw("whitespace-nowrap")
       }, title), (0, import_isNumber5.default)(badge) && /* @__PURE__ */ import_react82.default.createElement(Typography2, {
         htmlTag: "span",
         variant: "small",
@@ -11399,7 +11405,7 @@ var InputChip = import_react84.default.forwardRef(
         "hover:bg-grey-10 focus:bg-grey-20": !invalid && !disabled
       }),
       role: "button",
-      "aria-label": `Remove ${children}`
+      "aria-label": `Remove ${String(children)}`
     }), /* @__PURE__ */ import_react84.default.createElement(Icon, {
       icon: import_smallCross2.default,
       className: tw({
@@ -11555,7 +11561,7 @@ var MultiInputBase = (_a) => {
   return /* @__PURE__ */ import_react85.default.createElement("div", {
     className: "Aquarium-MultiInputBase"
   }, /* @__PURE__ */ import_react85.default.createElement(Select.InputContainer, {
-    variant: disabled ? "disabled" : valid === false ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
+    variant: disabled ? "disabled" : !valid ? "error" : readOnly ? "readOnly" : hasFocus ? "focused" : "default"
   }, /* @__PURE__ */ import_react85.default.createElement("div", {
     className: "grow inline-flex flex-row flex-wrap gap-y-2"
   }, inline && renderChips(), /* @__PURE__ */ import_react85.default.createElement(Select.Input, __spreadProps(__spreadValues({
@@ -12100,9 +12106,11 @@ PageHeader.TitleContainer = (_a) => {
   }, rest), children);
 };
 PageHeader.Title = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react90.default.createElement(Typography2.Heading, __spreadProps(__spreadValues({}, rest), {
-    color: "grey-100"
+  var _b = _a, { isSubHeader = false, children } = _b, rest = __objRest(_b, ["isSubHeader", "children"]);
+  return /* @__PURE__ */ import_react90.default.createElement(Typography2, __spreadProps(__spreadValues({}, rest), {
+    color: "grey-100",
+    variant: isSubHeader ? "subheading" : "heading",
+    htmlTag: isSubHeader ? "h2" : "h1"
   }), children);
 };
 PageHeader.Subtitle = (_a) => {
@@ -12125,31 +12133,49 @@ PageHeader.Actions = (_a) => {
 };
 
 // src/molecules/PageHeader/PageHeader.tsx
-var PageHeader2 = ({
+var import_more4 = __toESM(require_more());
+var CommonPageHeader = ({
   title,
   subtitle,
   image,
   imageAlt,
   primaryAction,
-  secondaryActions,
+  secondaryAction,
+  secondaryActions = secondaryAction ? [secondaryAction] : void 0,
   chips = [],
-  breadcrumbs
+  breadcrumbs,
+  menu,
+  menuLabel = "Context menu",
+  onAction,
+  onMenuOpenChange,
+  isSubHeader = false
 }) => {
   return /* @__PURE__ */ import_react91.default.createElement(PageHeader, {
     className: "Aquarium-PageHeader"
   }, /* @__PURE__ */ import_react91.default.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ import_react91.default.createElement(Box, {
     marginBottom: image ? "3" : void 0
-  }, /* @__PURE__ */ import_react91.default.createElement(Breadcrumbs, null, breadcrumbs)), /* @__PURE__ */ import_react91.default.createElement(Flexbox, {
+  }, /* @__PURE__ */ import_react91.default.createElement(Breadcrumbs, null, breadcrumbs)), /* @__PURE__ */ import_react91.default.createElement(Spacing, {
+    row: true,
     gap: "5"
   }, image && /* @__PURE__ */ import_react91.default.createElement("img", {
     src: image,
     alt: imageAlt,
     className: tw("w-[56px] h-[56px]")
-  }), /* @__PURE__ */ import_react91.default.createElement(PageHeader.TitleContainer, null, /* @__PURE__ */ import_react91.default.createElement(PageHeader.Title, null, title), chips.length > 0 && /* @__PURE__ */ import_react91.default.createElement(PageHeader.Chips, null, chips.map((chip) => /* @__PURE__ */ import_react91.default.createElement(Chip2, {
+  }), /* @__PURE__ */ import_react91.default.createElement(PageHeader.TitleContainer, null, /* @__PURE__ */ import_react91.default.createElement(PageHeader.Title, {
+    isSubHeader
+  }, title), chips.length > 0 && /* @__PURE__ */ import_react91.default.createElement(PageHeader.Chips, null, chips.map((chip) => /* @__PURE__ */ import_react91.default.createElement(Chip2, {
     key: chip,
     dense: true,
     text: chip
-  }))), subtitle && /* @__PURE__ */ import_react91.default.createElement(PageHeader.Subtitle, null, subtitle)))), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react91.default.createElement(PageHeader.Actions, null, secondaryActions && (0, import_castArray3.default)(secondaryActions).filter(Boolean).map(
+  }))), subtitle && /* @__PURE__ */ import_react91.default.createElement(PageHeader.Subtitle, null, subtitle)))), (secondaryActions || primaryAction || secondaryAction || menu) && /* @__PURE__ */ import_react91.default.createElement(PageHeader.Actions, null, menu && /* @__PURE__ */ import_react91.default.createElement(Box.Flex, {
+    alignItems: "center"
+  }, /* @__PURE__ */ import_react91.default.createElement(DropdownMenu2, {
+    onAction: (action) => onAction == null ? void 0 : onAction(action),
+    onOpenChange: onMenuOpenChange
+  }, /* @__PURE__ */ import_react91.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react91.default.createElement(Button.Icon, {
+    "aria-label": menuLabel,
+    icon: import_more4.default
+  })), menu)), secondaryActions && (0, import_castArray3.default)(secondaryActions).filter(Boolean).map(
     (action) => !isLink(action) ? /* @__PURE__ */ import_react91.default.createElement(Button.Secondary, __spreadValues({
       key: action.text
     }, (0, import_omit13.default)(action, "text")), action.text) : /* @__PURE__ */ import_react91.default.createElement(Button.ExternalLink, __spreadValues({
@@ -12163,6 +12189,13 @@ var PageHeader2 = ({
     kind: "primary"
   }, (0, import_omit13.default)(primaryAction, "text")), primaryAction.text))));
 };
+var PageHeader2 = (props) => /* @__PURE__ */ import_react91.default.createElement(CommonPageHeader, __spreadValues({}, props));
+PageHeader2.displayName = "PageHeader";
+var SubHeader = (props) => /* @__PURE__ */ import_react91.default.createElement(CommonPageHeader, __spreadProps(__spreadValues({}, props), {
+  isSubHeader: true
+}));
+PageHeader2.SubHeader = SubHeader;
+PageHeader2.SubHeader.displayName = "PageHeader.SubHeader";
 
 // src/molecules/Pagination/Pagination.tsx
 var import_react93 = __toESM(require("react"));