@aivenio/aquarium 1.50.0 → 1.52.0

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 02 Jan 2024 15:30:53 GMT
+// Generated on Thu, 18 Jan 2024 12:02:02 GMT
 
 $border-radius-none: 0px !default;
 $border-radius-sm: 0.125rem !default;

package/dist/atoms.cjs

@@ -2951,6 +2951,22 @@ var require_people = __commonJS({
   }
 });
 
+// src/icons/performance.js
+var require_performance = __commonJS({
+  "src/icons/performance.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.646 2-8.164 9.797c-.32.384-.48.576-.482.738-.002.14.06.275.17.363.126.102.376.102.875.102h6.685l-.917 7.333 8.164-9.797c.32-.384.48-.575.482-.737a.458.458 0 00-.17-.364c-.126-.102-.376-.102-.875-.102H10.73L11.646 2Z"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/person.js
 var require_person = __commonJS({
   "src/icons/person.js"(exports) {
@@ -5652,6 +5668,7 @@ var import_package = __toESM(require_package());
 var import_paperclip = __toESM(require_paperclip());
 var import_pause = __toESM(require_pause());
 var import_people = __toESM(require_people());
+var import_performance = __toESM(require_performance());
 var import_person = __toESM(require_person());
 var import_phone = __toESM(require_phone());
 var import_pieChart = __toESM(require_pieChart());
@@ -7090,21 +7107,25 @@ var createBadge = (type, displayName) => {
   Component.Skeleton.displayName = `${displayName}.Skeleton`;
   return Component;
 };
-var NotificationBadge = ({ children, top = "-2px", right = "-2px" }) => {
-  return /* @__PURE__ */ import_react27.default.createElement("div", {
-    className: tw("relative inline-flex")
-  }, children, /* @__PURE__ */ import_react27.default.createElement("span", {
+var NotificationBadge = (_a) => {
+  var _b = _a, { children, top = "-2px", right = "-2px" } = _b, props = __objRest(_b, ["children", "top", "right"]);
+  return /* @__PURE__ */ import_react27.default.createElement("div", __spreadValues({
+    className: classNames("Aquarium-Badge.Notification", tw("relative inline-flex"))
+  }, props), children, /* @__PURE__ */ import_react27.default.createElement("span", {
     style: { top, right },
     className: tw("absolute rounded-full w-[6px] h-[6px] bg-error-70")
   }));
 };
-var DotBadge = ({ dense = false }) => {
-  return /* @__PURE__ */ import_react27.default.createElement("span", {
-    className: tw("rounded-full bg-current", {
-      "w-[6px] h-[6px]": dense,
-      "w-[9px] h-[9px]": !dense
-    })
-  });
+var DotBadge = ({ dense = false }, ...props) => {
+  return /* @__PURE__ */ import_react27.default.createElement("span", __spreadValues({
+    className: classNames(
+      "Aquarium-Badge.Dot",
+      tw("rounded-full bg-current", {
+        "w-[6px] h-[6px]": dense,
+        "w-[9px] h-[9px]": !dense
+      })
+    )
+  }, props));
 };
 var Badge = createBadge("default", "Badge");
 Badge.Notification = NotificationBadge;
@@ -7351,10 +7372,23 @@ var Link = (_a) => {
 // src/atoms/Modal/Modal.tsx
 var import_react32 = __toESM(require("react"));
 var Modal = (_a) => {
-  var _b = _a, { children, className, open } = _b, rest = __objRest(_b, ["children", "className", "open"]);
+  var _b = _a, {
+    children,
+    kind = "dialog",
+    className,
+    open
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "kind",
+    "className",
+    "open"
+  ]);
   return open ? /* @__PURE__ */ import_react32.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("inset-0 overflow-y-auto z-modal flex justify-center items-center fixed py-7"),
+      tw("inset-0 overflow-y-auto z-modal fixed"),
+      {
+        "py-7 justify-center flex items-center": kind === "dialog"
+      },
       className
     )
   }), children) : null;
@@ -7367,27 +7401,30 @@ Modal.BackDrop = (_a) => {
 };
 Modal.Dialog = import_react32.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, className, size = "sm" } = _b, rest = __objRest(_b, ["children", "className", "size"]);
+    var _b = _a, { kind = "dialog", children, className, size = "sm" } = _b, rest = __objRest(_b, ["kind", "children", "className", "size"]);
+    const commonClasses = tw("bg-white max-h-full flex flex-col");
+    const dialogClasses = classNames("relative w-full rounded", {
+      "max-w-[600px]": size === "sm",
+      "max-w-[940px]": size === "md",
+      "min-h-full": size === "full"
+    });
+    const drawerClasses = classNames("absolute h-full", {
+      "w-[360px]": size === "sm",
+      "w-[560px]": size === "md",
+      "w-[1080px]": size === "full"
+    });
     return /* @__PURE__ */ import_react32.default.createElement("div", __spreadProps(__spreadValues({
       ref,
       "aria-modal": "true"
     }, rest), {
-      className: classNames(
-        tw("relative bg-white rounded mx-7 w-full max-h-full flex flex-col"),
-        {
-          "max-w-[600px]": size === "sm",
-          "max-w-[940px]": size === "md",
-          "min-h-full": size === "full"
-        },
-        className
-      )
+      className: classNames(commonClasses, kind === "dialog" ? dialogClasses : drawerClasses, className)
     }), children);
   }
 );
 Modal.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react32.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("px-7 py-6 gap-3 flex items-center"), className)
+    className: classNames(tw("pl-7 pr-[64px] py-6 gap-3 flex items-center"), className)
   }), children);
 };
 Modal.HeaderImage = (_a) => {
@@ -7405,16 +7442,21 @@ Modal.HeaderImage = (_a) => {
 Modal.CloseButtonContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react32.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("absolute top-[20px] right-[28px]"), className)
+    className: classNames(tw("absolute top-[24px] right-[28px]"), className)
   }));
 };
 Modal.Title = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  var _b = _a, { kind = "dialog", children, className } = _b, rest = __objRest(_b, ["kind", "children", "className"]);
   return /* @__PURE__ */ import_react32.default.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
     color: "grey-90",
-    className: classNames(tw("leading-none"), className)
+    className: classNames(
+      tw({
+        "text-ellipsis overflow-x-hidden whitespace-nowrap": kind === "drawer"
+      }),
+      className
+    )
   }, rest), children);
 };
 Modal.Subtitle = (_a) => {
@@ -7427,7 +7469,7 @@ Modal.Subtitle = (_a) => {
 Modal.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react32.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("flex flex-col grow gap-2"), className)
+    className: classNames(tw("flex flex-col grow"), className)
   }), children);
 };
 Modal.Body = (_a) => {
@@ -8008,10 +8050,10 @@ var TableSortCell = (_a) => {
     })
   }, /* @__PURE__ */ import_react40.default.createElement(InlineIcon, {
     icon: import_chevronUp3.default,
-    className: getSortCellIconClassNames(direction === "descending")
+    className: getSortCellIconClassNames(direction === "ascending")
   }), /* @__PURE__ */ import_react40.default.createElement(InlineIcon, {
     icon: import_chevronDown4.default,
-    className: getSortCellIconClassNames(direction === "ascending")
+    className: getSortCellIconClassNames(direction === "descending")
   }))));
 };
 var Caption = ({ children }) => /* @__PURE__ */ import_react40.default.createElement(Typography2.Caption, {

package/dist/atoms.mjs

@@ -2945,6 +2945,22 @@ var require_people = __commonJS({
   }
 });
 
+// src/icons/performance.js
+var require_performance = __commonJS({
+  "src/icons/performance.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.646 2-8.164 9.797c-.32.384-.48.576-.482.738-.002.14.06.275.17.363.126.102.376.102.875.102h6.685l-.917 7.333 8.164-9.797c.32-.384.48-.575.482-.737a.458.458 0 00-.17-.364c-.126-.102-.376-.102-.875-.102H10.73L11.646 2Z"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/person.js
 var require_person = __commonJS({
   "src/icons/person.js"(exports) {
@@ -5609,6 +5625,7 @@ var import_package = __toESM(require_package());
 var import_paperclip = __toESM(require_paperclip());
 var import_pause = __toESM(require_pause());
 var import_people = __toESM(require_people());
+var import_performance = __toESM(require_performance());
 var import_person = __toESM(require_person());
 var import_phone = __toESM(require_phone());
 var import_pieChart = __toESM(require_pieChart());
@@ -7050,21 +7067,25 @@ var createBadge = (type, displayName) => {
   Component.Skeleton.displayName = `${displayName}.Skeleton`;
   return Component;
 };
-var NotificationBadge = ({ children, top = "-2px", right = "-2px" }) => {
-  return /* @__PURE__ */ React23.createElement("div", {
-    className: tw("relative inline-flex")
-  }, children, /* @__PURE__ */ React23.createElement("span", {
+var NotificationBadge = (_a) => {
+  var _b = _a, { children, top = "-2px", right = "-2px" } = _b, props = __objRest(_b, ["children", "top", "right"]);
+  return /* @__PURE__ */ React23.createElement("div", __spreadValues({
+    className: classNames("Aquarium-Badge.Notification", tw("relative inline-flex"))
+  }, props), children, /* @__PURE__ */ React23.createElement("span", {
     style: { top, right },
     className: tw("absolute rounded-full w-[6px] h-[6px] bg-error-70")
   }));
 };
-var DotBadge = ({ dense = false }) => {
-  return /* @__PURE__ */ React23.createElement("span", {
-    className: tw("rounded-full bg-current", {
-      "w-[6px] h-[6px]": dense,
-      "w-[9px] h-[9px]": !dense
-    })
-  });
+var DotBadge = ({ dense = false }, ...props) => {
+  return /* @__PURE__ */ React23.createElement("span", __spreadValues({
+    className: classNames(
+      "Aquarium-Badge.Dot",
+      tw("rounded-full bg-current", {
+        "w-[6px] h-[6px]": dense,
+        "w-[9px] h-[9px]": !dense
+      })
+    )
+  }, props));
 };
 var Badge = createBadge("default", "Badge");
 Badge.Notification = NotificationBadge;
@@ -7311,10 +7332,23 @@ var Link = (_a) => {
 // src/atoms/Modal/Modal.tsx
 import React28 from "react";
 var Modal = (_a) => {
-  var _b = _a, { children, className, open } = _b, rest = __objRest(_b, ["children", "className", "open"]);
+  var _b = _a, {
+    children,
+    kind = "dialog",
+    className,
+    open
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "kind",
+    "className",
+    "open"
+  ]);
   return open ? /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("inset-0 overflow-y-auto z-modal flex justify-center items-center fixed py-7"),
+      tw("inset-0 overflow-y-auto z-modal fixed"),
+      {
+        "py-7 justify-center flex items-center": kind === "dialog"
+      },
       className
     )
   }), children) : null;
@@ -7327,27 +7361,30 @@ Modal.BackDrop = (_a) => {
 };
 Modal.Dialog = React28.forwardRef(
   (_a, ref) => {
-    var _b = _a, { children, className, size = "sm" } = _b, rest = __objRest(_b, ["children", "className", "size"]);
+    var _b = _a, { kind = "dialog", children, className, size = "sm" } = _b, rest = __objRest(_b, ["kind", "children", "className", "size"]);
+    const commonClasses = tw("bg-white max-h-full flex flex-col");
+    const dialogClasses = classNames("relative w-full rounded", {
+      "max-w-[600px]": size === "sm",
+      "max-w-[940px]": size === "md",
+      "min-h-full": size === "full"
+    });
+    const drawerClasses = classNames("absolute h-full", {
+      "w-[360px]": size === "sm",
+      "w-[560px]": size === "md",
+      "w-[1080px]": size === "full"
+    });
     return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({
       ref,
       "aria-modal": "true"
     }, rest), {
-      className: classNames(
-        tw("relative bg-white rounded mx-7 w-full max-h-full flex flex-col"),
-        {
-          "max-w-[600px]": size === "sm",
-          "max-w-[940px]": size === "md",
-          "min-h-full": size === "full"
-        },
-        className
-      )
+      className: classNames(commonClasses, kind === "dialog" ? dialogClasses : drawerClasses, className)
     }), children);
   }
 );
 Modal.Header = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("px-7 py-6 gap-3 flex items-center"), className)
+    className: classNames(tw("pl-7 pr-[64px] py-6 gap-3 flex items-center"), className)
   }), children);
 };
 Modal.HeaderImage = (_a) => {
@@ -7365,16 +7402,21 @@ Modal.HeaderImage = (_a) => {
 Modal.CloseButtonContainer = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("absolute top-[20px] right-[28px]"), className)
+    className: classNames(tw("absolute top-[24px] right-[28px]"), className)
   }));
 };
 Modal.Title = (_a) => {
-  var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
+  var _b = _a, { kind = "dialog", children, className } = _b, rest = __objRest(_b, ["kind", "children", "className"]);
   return /* @__PURE__ */ React28.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
     color: "grey-90",
-    className: classNames(tw("leading-none"), className)
+    className: classNames(
+      tw({
+        "text-ellipsis overflow-x-hidden whitespace-nowrap": kind === "drawer"
+      }),
+      className
+    )
   }, rest), children);
 };
 Modal.Subtitle = (_a) => {
@@ -7387,7 +7429,7 @@ Modal.Subtitle = (_a) => {
 Modal.TitleContainer = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ React28.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("flex flex-col grow gap-2"), className)
+    className: classNames(tw("flex flex-col grow"), className)
   }), children);
 };
 Modal.Body = (_a) => {
@@ -7968,10 +8010,10 @@ var TableSortCell = (_a) => {
     })
   }, /* @__PURE__ */ React36.createElement(InlineIcon, {
     icon: import_chevronUp3.default,
-    className: getSortCellIconClassNames(direction === "descending")
+    className: getSortCellIconClassNames(direction === "ascending")
   }), /* @__PURE__ */ React36.createElement(InlineIcon, {
     icon: import_chevronDown4.default,
-    className: getSortCellIconClassNames(direction === "ascending")
+    className: getSortCellIconClassNames(direction === "descending")
   }))));
 };
 var Caption = ({ children }) => /* @__PURE__ */ React36.createElement(Typography2.Caption, {