@aivenio/aquarium 1.24.0 → 1.25.0

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);
   };
 }
 
@@ -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"));

package/dist/system.mjs

@@ -6693,9 +6693,8 @@ function Tailwindify(Component) {
       return React12.cloneElement(child, newProps);
     });
     return /* @__PURE__ */ React12.createElement(Component, __spreadValues({
-      className,
-      children: childrenWithProps
-    }, componentProps));
+      className
+    }, componentProps), childrenWithProps);
   };
 }
 
@@ -10898,6 +10897,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         index,
         selected,
         onSelected,
+        showNotification = false,
         className
       } = _b, rest = __objRest(_b, [
         "id",
@@ -10910,6 +10910,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         "index",
         "selected",
         "onSelected",
+        "showNotification",
         "className"
       ]);
       const _id = id != null ? id : kebabCase(title);
@@ -10947,8 +10948,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__ */ React76.createElement(Badge.Notification, {
+        right: "-4px",
+        top: "3px"
       }, /* @__PURE__ */ React76.createElement("span", {
         className: tw("whitespace-nowrap")
+      }, title)) : /* @__PURE__ */ React76.createElement("span", {
+        className: tw("whitespace-nowrap")
       }, title), isNumber5(badge) && /* @__PURE__ */ React76.createElement(Typography2, {
         htmlTag: "span",
         variant: "small",
@@ -11256,7 +11262,7 @@ var InputChip = React78.forwardRef(
         "hover:bg-grey-10 focus:bg-grey-20": !invalid && !disabled
       }),
       role: "button",
-      "aria-label": `Remove ${children}`
+      "aria-label": `Remove ${String(children)}`
     }), /* @__PURE__ */ React78.createElement(Icon, {
       icon: import_smallCross2.default,
       className: tw({
@@ -11412,7 +11418,7 @@ var MultiInputBase = (_a) => {
   return /* @__PURE__ */ React79.createElement("div", {
     className: "Aquarium-MultiInputBase"
   }, /* @__PURE__ */ React79.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__ */ React79.createElement("div", {
     className: "grow inline-flex flex-row flex-wrap gap-y-2"
   }, inline && renderChips(), /* @__PURE__ */ React79.createElement(Select.Input, __spreadProps(__spreadValues({
@@ -11957,9 +11963,11 @@ PageHeader.TitleContainer = (_a) => {
   }, rest), children);
 };
 PageHeader.Title = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React84.createElement(Typography2.Heading, __spreadProps(__spreadValues({}, rest), {
-    color: "grey-100"
+  var _b = _a, { isSubHeader = false, children } = _b, rest = __objRest(_b, ["isSubHeader", "children"]);
+  return /* @__PURE__ */ React84.createElement(Typography2, __spreadProps(__spreadValues({}, rest), {
+    color: "grey-100",
+    variant: isSubHeader ? "subheading" : "heading",
+    htmlTag: isSubHeader ? "h2" : "h1"
   }), children);
 };
 PageHeader.Subtitle = (_a) => {
@@ -11982,31 +11990,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__ */ React85.createElement(PageHeader, {
     className: "Aquarium-PageHeader"
   }, /* @__PURE__ */ React85.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ React85.createElement(Box, {
     marginBottom: image ? "3" : void 0
-  }, /* @__PURE__ */ React85.createElement(Breadcrumbs, null, breadcrumbs)), /* @__PURE__ */ React85.createElement(Flexbox, {
+  }, /* @__PURE__ */ React85.createElement(Breadcrumbs, null, breadcrumbs)), /* @__PURE__ */ React85.createElement(Spacing, {
+    row: true,
     gap: "5"
   }, image && /* @__PURE__ */ React85.createElement("img", {
     src: image,
     alt: imageAlt,
     className: tw("w-[56px] h-[56px]")
-  }), /* @__PURE__ */ React85.createElement(PageHeader.TitleContainer, null, /* @__PURE__ */ React85.createElement(PageHeader.Title, null, title), chips.length > 0 && /* @__PURE__ */ React85.createElement(PageHeader.Chips, null, chips.map((chip) => /* @__PURE__ */ React85.createElement(Chip2, {
+  }), /* @__PURE__ */ React85.createElement(PageHeader.TitleContainer, null, /* @__PURE__ */ React85.createElement(PageHeader.Title, {
+    isSubHeader
+  }, title), chips.length > 0 && /* @__PURE__ */ React85.createElement(PageHeader.Chips, null, chips.map((chip) => /* @__PURE__ */ React85.createElement(Chip2, {
     key: chip,
     dense: true,
     text: chip
-  }))), subtitle && /* @__PURE__ */ React85.createElement(PageHeader.Subtitle, null, subtitle)))), (secondaryActions || primaryAction) && /* @__PURE__ */ React85.createElement(PageHeader.Actions, null, secondaryActions && castArray3(secondaryActions).filter(Boolean).map(
+  }))), subtitle && /* @__PURE__ */ React85.createElement(PageHeader.Subtitle, null, subtitle)))), (secondaryActions || primaryAction || secondaryAction || menu) && /* @__PURE__ */ React85.createElement(PageHeader.Actions, null, menu && /* @__PURE__ */ React85.createElement(Box.Flex, {
+    alignItems: "center"
+  }, /* @__PURE__ */ React85.createElement(DropdownMenu2, {
+    onAction: (action) => onAction == null ? void 0 : onAction(action),
+    onOpenChange: onMenuOpenChange
+  }, /* @__PURE__ */ React85.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React85.createElement(Button.Icon, {
+    "aria-label": menuLabel,
+    icon: import_more4.default
+  })), menu)), secondaryActions && castArray3(secondaryActions).filter(Boolean).map(
     (action) => !isLink(action) ? /* @__PURE__ */ React85.createElement(Button.Secondary, __spreadValues({
       key: action.text
     }, omit14(action, "text")), action.text) : /* @__PURE__ */ React85.createElement(Button.ExternalLink, __spreadValues({
@@ -12020,6 +12046,13 @@ var PageHeader2 = ({
     kind: "primary"
   }, omit14(primaryAction, "text")), primaryAction.text))));
 };
+var PageHeader2 = (props) => /* @__PURE__ */ React85.createElement(CommonPageHeader, __spreadValues({}, props));
+PageHeader2.displayName = "PageHeader";
+var SubHeader = (props) => /* @__PURE__ */ React85.createElement(CommonPageHeader, __spreadProps(__spreadValues({}, props), {
+  isSubHeader: true
+}));
+PageHeader2.SubHeader = SubHeader;
+PageHeader2.SubHeader.displayName = "PageHeader.SubHeader";
 
 // src/molecules/Pagination/Pagination.tsx
 import React87 from "react";