@aivenio/aquarium 1.23.0 → 1.25.0

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

@@ -3565,11 +3565,11 @@ var require_loading = __commonJS({
   "src/icons/loading.js"(exports) {
     "use strict";
     var data = {
-      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
+      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
       "left": 0,
       "top": 0,
-      "width": 40,
-      "height": 40
+      "width": 38,
+      "height": 38
     };
     exports.__esModule = true;
     exports.default = data;
@@ -5059,6 +5059,7 @@ __export(system_exports, {
   Textarea: () => Textarea,
   TextareaBase: () => TextareaBase,
   Timeline: () => Timeline2,
+  ToastComponent: () => ToastComponent,
   ToastProvider: () => ToastProvider,
   Tooltip: () => Tooltip,
   Typography: () => Typography2,
@@ -5199,6 +5200,7 @@ __export(molecules_exports, {
   Textarea: () => Textarea,
   TextareaBase: () => TextareaBase,
   Timeline: () => Timeline2,
+  ToastComponent: () => ToastComponent,
   ToastProvider: () => ToastProvider,
   Tooltip: () => Tooltip,
   Typography: () => Typography2,
@@ -6834,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);
   };
 }
 
@@ -7623,7 +7624,21 @@ var createBadge = (type, displayName) => {
   Component.Skeleton.displayName = `${displayName}.Skeleton`;
   return Component;
 };
+var NotificationBadge = ({
+  children,
+  top = "-2px",
+  right = "-2px"
+}) => {
+  return /* @__PURE__ */ import_react25.default.createElement("div", {
+    className: tw("relative inline-flex")
+  }, children, /* @__PURE__ */ import_react25.default.createElement("span", {
+    style: { top, right },
+    className: tw("absolute rounded-full w-[6px] h-[6px] bg-error-70")
+  }));
+};
 var Badge = createBadge("default", "Badge");
+Badge.Notification = NotificationBadge;
+Badge.Notification.displayName = "Badge.Notification";
 var TabBadge = createBadge("tab", "TabBadge");
 var ChipBadge = createBadge("chip", "ChipBadge");
 
@@ -9476,7 +9491,7 @@ var Group2 = import_react55.default.forwardRef(
 DropdownMenu.Group = Group2;
 var Item2 = import_react55.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { kind, highlighted, selected, className, icon, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "children"]);
+    var _b = _a, { kind, highlighted, selected, className, icon, showNotification = false, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "showNotification", "children"]);
     return /* @__PURE__ */ import_react55.default.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
@@ -9485,7 +9500,9 @@ var Item2 = import_react55.default.forwardRef(
         "text-primary-80": kind === "action",
         "text-grey-20 cursor-not-allowed": props.disabled
       })
-    }, props), icon && /* @__PURE__ */ import_react55.default.createElement(InlineIcon, {
+    }, props), icon && showNotification && /* @__PURE__ */ import_react55.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react55.default.createElement(InlineIcon, {
+      icon
+    })), icon && !showNotification && /* @__PURE__ */ import_react55.default.createElement(InlineIcon, {
       icon
     }), /* @__PURE__ */ import_react55.default.createElement("span", {
       className: tw("grow")
@@ -9676,7 +9693,7 @@ var ItemWrapper = ({ item, state }) => {
     state,
     ref
   );
-  const { icon, description, kind = "default" } = item.props;
+  const { icon, description, kind = "default", showNotification = false } = item.props;
   return /* @__PURE__ */ import_react56.default.createElement(DropdownMenu.Item, __spreadProps(__spreadValues({
     ref
   }, menuItemProps), {
@@ -9684,7 +9701,8 @@ var ItemWrapper = ({ item, state }) => {
     selected: isSelected,
     highlighted: isFocused,
     disabled: isDisabled,
-    icon
+    icon,
+    showNotification
   }), item.rendered, description && /* @__PURE__ */ import_react56.default.createElement(DropdownMenu.Description, __spreadValues({
     disabled: isDisabled
   }, descriptionProps), description));
@@ -10952,7 +10970,8 @@ var Link2 = (_a) => {
 // src/molecules/ListItem/ListItem.tsx
 var import_react81 = __toESM(require("react"));
 var ListItem = ({ name, icon, active = false }) => {
-  return /* @__PURE__ */ import_react81.default.createElement(Flexbox, {
+  return /* @__PURE__ */ import_react81.default.createElement(Box.Flex, {
+    className: "Aquarium-ListItem",
     alignItems: "center"
   }, /* @__PURE__ */ import_react81.default.createElement(Typography2, {
     variant: active ? "small-strong" : "small",
@@ -11021,6 +11040,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         index,
         selected,
         onSelected,
+        showNotification = false,
         className
       } = _b, rest = __objRest(_b, [
         "id",
@@ -11033,6 +11053,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         "index",
         "selected",
         "onSelected",
+        "showNotification",
         "className"
       ]);
       const _id = id != null ? id : (0, import_kebabCase.default)(title);
@@ -11070,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",
@@ -11379,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({
@@ -11535,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({
@@ -12029,8 +12055,20 @@ var Navigation2 = (_a) => {
   }, props));
 };
 var Item6 = (_a) => {
-  var _b = _a, { children, icon } = _b, rest = __objRest(_b, ["children", "icon"]);
-  return /* @__PURE__ */ import_react89.default.createElement(Navigation.Item, __spreadValues({}, rest), icon && /* @__PURE__ */ import_react89.default.createElement(InlineIcon, {
+  var _b = _a, {
+    children,
+    icon,
+    showNotification = false
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "icon",
+    "showNotification"
+  ]);
+  return /* @__PURE__ */ import_react89.default.createElement(Navigation.Item, __spreadValues({}, rest), icon && showNotification && /* @__PURE__ */ import_react89.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react89.default.createElement(InlineIcon, {
+    icon,
+    width: "20px",
+    height: "20px"
+  })), icon && !showNotification && /* @__PURE__ */ import_react89.default.createElement(InlineIcon, {
     icon,
     width: "20px",
     height: "20px"
@@ -12068,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) => {
@@ -12093,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({
@@ -12131,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"));
@@ -13635,6 +13700,7 @@ var system_default = __spreadProps(__spreadValues({}, molecules_exports), {
   Textarea,
   TextareaBase,
   Timeline,
+  ToastComponent,
   ToastProvider,
   Tooltip,
   Typography,

package/dist/system.mjs

@@ -3563,11 +3563,11 @@ var require_loading = __commonJS({
   "src/icons/loading.js"(exports) {
     "use strict";
     var data = {
-      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="3" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
+      "body": '<g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)"><circle cx="18" cy="18" r="18" stroke-opacity=".5"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" dur="1s" from="0 18 18" repeatCount="indefinite" to="360 18 18" type="rotate"/></path></g>',
       "left": 0,
       "top": 0,
-      "width": 40,
-      "height": 40
+      "width": 38,
+      "height": 38
     };
     exports.__esModule = true;
     exports.default = data;
@@ -5054,6 +5054,7 @@ __export(molecules_exports, {
   Textarea: () => Textarea,
   TextareaBase: () => TextareaBase,
   Timeline: () => Timeline2,
+  ToastComponent: () => ToastComponent,
   ToastProvider: () => ToastProvider,
   Tooltip: () => Tooltip,
   Typography: () => Typography2,
@@ -6692,9 +6693,8 @@ function Tailwindify(Component) {
       return React12.cloneElement(child, newProps);
     });
     return /* @__PURE__ */ React12.createElement(Component, __spreadValues({
-      className,
-      children: childrenWithProps
-    }, componentProps));
+      className
+    }, componentProps), childrenWithProps);
   };
 }
 
@@ -7481,7 +7481,21 @@ var createBadge = (type, displayName) => {
   Component.Skeleton.displayName = `${displayName}.Skeleton`;
   return Component;
 };
+var NotificationBadge = ({
+  children,
+  top = "-2px",
+  right = "-2px"
+}) => {
+  return /* @__PURE__ */ React21.createElement("div", {
+    className: tw("relative inline-flex")
+  }, children, /* @__PURE__ */ React21.createElement("span", {
+    style: { top, right },
+    className: tw("absolute rounded-full w-[6px] h-[6px] bg-error-70")
+  }));
+};
 var Badge = createBadge("default", "Badge");
+Badge.Notification = NotificationBadge;
+Badge.Notification.displayName = "Badge.Notification";
 var TabBadge = createBadge("tab", "TabBadge");
 var ChipBadge = createBadge("chip", "ChipBadge");
 
@@ -9334,7 +9348,7 @@ var Group2 = React50.forwardRef(
 DropdownMenu.Group = Group2;
 var Item2 = React50.forwardRef(
   (_a, ref) => {
-    var _b = _a, { kind, highlighted, selected, className, icon, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "children"]);
+    var _b = _a, { kind, highlighted, selected, className, icon, showNotification = false, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "showNotification", "children"]);
     return /* @__PURE__ */ React50.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
@@ -9343,7 +9357,9 @@ var Item2 = React50.forwardRef(
         "text-primary-80": kind === "action",
         "text-grey-20 cursor-not-allowed": props.disabled
       })
-    }, props), icon && /* @__PURE__ */ React50.createElement(InlineIcon, {
+    }, props), icon && showNotification && /* @__PURE__ */ React50.createElement(Badge.Notification, null, /* @__PURE__ */ React50.createElement(InlineIcon, {
+      icon
+    })), icon && !showNotification && /* @__PURE__ */ React50.createElement(InlineIcon, {
       icon
     }), /* @__PURE__ */ React50.createElement("span", {
       className: tw("grow")
@@ -9534,7 +9550,7 @@ var ItemWrapper = ({ item, state }) => {
     state,
     ref
   );
-  const { icon, description, kind = "default" } = item.props;
+  const { icon, description, kind = "default", showNotification = false } = item.props;
   return /* @__PURE__ */ React51.createElement(DropdownMenu.Item, __spreadProps(__spreadValues({
     ref
   }, menuItemProps), {
@@ -9542,7 +9558,8 @@ var ItemWrapper = ({ item, state }) => {
     selected: isSelected,
     highlighted: isFocused,
     disabled: isDisabled,
-    icon
+    icon,
+    showNotification
   }), item.rendered, description && /* @__PURE__ */ React51.createElement(DropdownMenu.Description, __spreadValues({
     disabled: isDisabled
   }, descriptionProps), description));
@@ -10810,7 +10827,8 @@ var Link2 = (_a) => {
 // src/molecules/ListItem/ListItem.tsx
 import React75 from "react";
 var ListItem = ({ name, icon, active = false }) => {
-  return /* @__PURE__ */ React75.createElement(Flexbox, {
+  return /* @__PURE__ */ React75.createElement(Box.Flex, {
+    className: "Aquarium-ListItem",
     alignItems: "center"
   }, /* @__PURE__ */ React75.createElement(Typography2, {
     variant: active ? "small-strong" : "small",
@@ -10879,6 +10897,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         index,
         selected,
         onSelected,
+        showNotification = false,
         className
       } = _b, rest = __objRest(_b, [
         "id",
@@ -10891,6 +10910,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         "index",
         "selected",
         "onSelected",
+        "showNotification",
         "className"
       ]);
       const _id = id != null ? id : kebabCase(title);
@@ -10928,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",
@@ -11237,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({
@@ -11393,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({
@@ -11887,8 +11912,20 @@ var Navigation2 = (_a) => {
   }, props));
 };
 var Item6 = (_a) => {
-  var _b = _a, { children, icon } = _b, rest = __objRest(_b, ["children", "icon"]);
-  return /* @__PURE__ */ React83.createElement(Navigation.Item, __spreadValues({}, rest), icon && /* @__PURE__ */ React83.createElement(InlineIcon, {
+  var _b = _a, {
+    children,
+    icon,
+    showNotification = false
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "icon",
+    "showNotification"
+  ]);
+  return /* @__PURE__ */ React83.createElement(Navigation.Item, __spreadValues({}, rest), icon && showNotification && /* @__PURE__ */ React83.createElement(Badge.Notification, null, /* @__PURE__ */ React83.createElement(InlineIcon, {
+    icon,
+    width: "20px",
+    height: "20px"
+  })), icon && !showNotification && /* @__PURE__ */ React83.createElement(InlineIcon, {
     icon,
     width: "20px",
     height: "20px"
@@ -11926,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) => {
@@ -11951,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({
@@ -11989,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";
@@ -13493,6 +13557,7 @@ export {
   Textarea,
   TextareaBase,
   Timeline2 as Timeline,
+  ToastComponent,
   ToastProvider,
   Tooltip,
   Typography2 as Typography,