@aivenio/aquarium 1.24.0 → 1.26.0-rc1

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);
   };
 }
 
@@ -7682,7 +7681,7 @@ var asCrumb = (Component, displayName, options = { isActive: false }) => {
       role: "link"
     }), /* @__PURE__ */ React24.createElement("span", {
       className: classNames3(
-        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
         })
@@ -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";