@aivenio/aquarium 1.47.0 → 1.48.1

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 15 Nov 2023 11:37:31 GMT
+// Generated on Fri, 01 Dec 2023 08:04:36 GMT
 
 $border-radius-none: 0px !default;
 $border-radius-sm: 0.125rem !default;

package/dist/atoms.cjs

@@ -4597,6 +4597,7 @@ var require_resolveTheme = __commonJS({
 var atoms_exports = {};
 __export(atoms_exports, {
   Alert: () => Alert,
+  Caption: () => Caption,
   Card: () => Card,
   Checkbox: () => Checkbox,
   Chip: () => Chip,
@@ -4631,6 +4632,7 @@ module.exports = __toCommonJS(atoms_exports);
 
 // src/atoms/Alert/Alert.tsx
 var import_react20 = __toESM(require("react"));
+var import_utils2 = require("@react-aria/utils");
 
 // src/molecules/Button/Button.tsx
 var import_react18 = __toESM(require("react"));
@@ -5252,8 +5254,8 @@ var import_react3 = __toESM(require("react"));
 
 // src/utils/tailwind.ts
 var import_classnames = __toESM(require("classnames"));
-function cleanClassNames(classNames3) {
-  const tokens = classNames3.split(/\s+/);
+function cleanClassNames(classNames4) {
+  const tokens = classNames4.split(/\s+/);
   return tokens.filter((item) => item).join(" ");
 }
 function tw(classesOrModifiers1, classesOrModifiers2, classesOrModifiers3, classesOrModifiers4, classesOrModifiers5, classesOrModifiers6, classesOrModifiers7, classesOrModifiers8, classesOrModifiers9, classesOrModifiers10) {
@@ -6545,12 +6547,116 @@ Alert.Dismiss = (_a) => {
   var _b = _a, { type } = _b, rest = __objRest(_b, ["type"]);
   return /* @__PURE__ */ import_react20.default.createElement("div", {
     className: tw("h-[20px] col-start-3 row-start-1")
-  }, /* @__PURE__ */ import_react20.default.createElement(IconButton, __spreadProps(__spreadValues({}, rest), {
+  }, /* @__PURE__ */ import_react20.default.createElement(Button.Icon, __spreadProps(__spreadValues({}, rest), {
     UNSAFE_className: tw("-m-2"),
     tooltip: "Dismiss",
     icon: import_cross2.default
   })));
 };
+var Banner = (_a) => {
+  var _b = _a, {
+    children,
+    className,
+    type
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className",
+    "type"
+  ]);
+  return /* @__PURE__ */ import_react20.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    role: type === "error" || type === "warning" ? "alert" : "status",
+    className: classNames(
+      tw("relative flex px-[60px] justify-center", {
+        "bg-error-5": type === "error",
+        "bg-primary-5": type === "information",
+        "bg-success-5": type === "success",
+        "bg-warning-5": type === "warning"
+      }),
+      className
+    )
+  }), children);
+};
+Alert.Banner = Banner;
+Alert.Banner.displayName = "Alert.Banner";
+Banner.Content = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ import_react20.default.createElement("div", __spreadValues({
+    className: classNames(
+      tw("flex flex-row flex-wrap gap-x-3 items-center justify-center py-3 text-center z-10"),
+      className
+    )
+  }, props));
+};
+Banner.Content.displayName = "Alert.Banner.Content";
+Banner.Dismiss = (_a) => {
+  var _b = _a, { type } = _b, rest = __objRest(_b, ["type"]);
+  return /* @__PURE__ */ import_react20.default.createElement("div", {
+    className: tw("h-[20px] absolute right-4 top-[18px]")
+  }, /* @__PURE__ */ import_react20.default.createElement(Button.Icon, __spreadProps(__spreadValues({}, rest), {
+    UNSAFE_className: tw("-m-2"),
+    tooltip: "Dismiss",
+    icon: import_cross2.default
+  })));
+};
+Banner.Dismiss.displayName = "Alert.Banner.Dismiss";
+var ILLUSTRATION_COLORS = {
+  information: { stroke: tw("stroke-primary-60"), fill: tw("fill-primary-10") },
+  success: { stroke: tw("stroke-success-40"), fill: tw("fill-success-10") },
+  warning: { stroke: tw("stroke-warning-100"), fill: tw("fill-warning-20") },
+  error: { stroke: tw("stroke-error-100"), fill: tw("fill-error-10") }
+};
+var IllustrationLeft = (_a) => {
+  var _b = _a, { type } = _b, props = __objRest(_b, ["type"]);
+  const clipPathId = (0, import_utils2.useId)();
+  return /* @__PURE__ */ import_react20.default.createElement("svg", __spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 120,
+    height: 48,
+    fill: "none"
+  }, props), /* @__PURE__ */ import_react20.default.createElement("g", {
+    clipPath: `url(#${clipPathId})`
+  }, /* @__PURE__ */ import_react20.default.createElement("path", {
+    className: ILLUSTRATION_COLORS[type].fill,
+    d: "M25.68 105.063c-4.556 17.047 5.533 34.57 22.537 39.138 17.003 4.568 34.48-5.55 39.037-22.597L136.75-63.593c4.555-17.046-5.536-34.57-22.538-39.137-17.003-4.567-34.48 5.55-39.036 22.596L25.68 105.063Z"
+  }), /* @__PURE__ */ import_react20.default.createElement("path", {
+    className: ILLUSTRATION_COLORS[type].stroke,
+    strokeWidth: 2,
+    d: "M-71.39 445.432c-29.483-7.92-46.981-38.306-39.08-67.87l87.385-326.96c7.901-29.562 38.211-47.105 67.693-39.185 29.481 7.92 46.983 38.306 39.082 67.869l-87.385 326.96c-7.901 29.564-38.211 47.107-67.694 39.186Z"
+  })), /* @__PURE__ */ import_react20.default.createElement("defs", null, /* @__PURE__ */ import_react20.default.createElement("clipPath", {
+    id: clipPathId
+  }, /* @__PURE__ */ import_react20.default.createElement("path", {
+    fill: "#fff",
+    d: "M-38-23h188v200H-38z"
+  }))));
+};
+Banner.IllustrationLeft = IllustrationLeft;
+Banner.IllustrationLeft.displayName = "Alert.Banner.IllustrationLeft";
+var IllustrationRight = (_a) => {
+  var _b = _a, { type } = _b, props = __objRest(_b, ["type"]);
+  const clipPathId = (0, import_utils2.useId)();
+  return /* @__PURE__ */ import_react20.default.createElement("svg", __spreadValues({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 120,
+    height: 48,
+    fill: "none"
+  }, props), /* @__PURE__ */ import_react20.default.createElement("g", {
+    clipPath: `url(#${clipPathId})`
+  }, /* @__PURE__ */ import_react20.default.createElement("path", {
+    className: ILLUSTRATION_COLORS[type].fill,
+    d: "M114.341 71.088c11.599-20.12 4.741-45.834-15.32-57.433-20.06-11.6-45.727-4.691-57.326 15.43L-84.32 247.67c-11.599 20.119-4.739 45.835 15.321 57.433 20.06 11.599 45.726 4.69 57.325-15.429L114.341 71.088Z"
+  }), /* @__PURE__ */ import_react20.default.createElement("path", {
+    className: ILLUSTRATION_COLORS[type].stroke,
+    strokeWidth: 2.632,
+    d: "M353.696-328.567c34.785 20.113 46.681 64.704 26.564 99.599L157.785 156.939c-20.115 34.892-64.626 46.87-99.409 26.758-34.782-20.112-46.682-64.706-26.566-99.598l222.475-385.907c20.116-34.894 64.626-46.872 99.411-26.759Z"
+  })), /* @__PURE__ */ import_react20.default.createElement("defs", null, /* @__PURE__ */ import_react20.default.createElement("clipPath", {
+    id: clipPathId
+  }, /* @__PURE__ */ import_react20.default.createElement("path", {
+    fill: "#fff",
+    d: "m151.148 255.847-239.01-64.043 68.13-254.266L219.278 1.58z"
+  }))));
+};
+Banner.IllustrationRight = IllustrationRight;
+Banner.IllustrationRight.displayName = "Alert.Banner.IllustrationRight";
 
 // src/atoms/Card/Card.tsx
 var import_react23 = __toESM(require("react"));
@@ -6558,7 +6664,9 @@ var import_isNumber = __toESM(require("lodash/isNumber"));
 
 // src/molecules/Typography/Typography.tsx
 var import_react21 = __toESM(require("react"));
+var import_classnames3 = __toESM(require("classnames"));
 var Typography2 = (props) => /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadValues({}, props));
+Typography2.displayName = "Typography";
 Typography2.LargeHeading = (_a) => {
   var _b = _a, { htmlTag = "h1" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6566,6 +6674,7 @@ Typography2.LargeHeading = (_a) => {
     variant: "large-heading"
   }));
 };
+Typography2.LargeHeading.displayName = "Typography.LargeHeading";
 Typography2.Heading = (_a) => {
   var _b = _a, { htmlTag = "h1", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6573,6 +6682,7 @@ Typography2.Heading = (_a) => {
     variant: "heading"
   }));
 };
+Typography2.Heading.displayName = "Typography.Heading";
 Typography2.Subheading = (_a) => {
   var _b = _a, { htmlTag = "h2", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6580,6 +6690,7 @@ Typography2.Subheading = (_a) => {
     variant: "subheading"
   }));
 };
+Typography2.Subheading.displayName = "Typography.Subheading";
 Typography2.LargeStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6587,6 +6698,7 @@ Typography2.LargeStrong = (_a) => {
     variant: "large-strong"
   }));
 };
+Typography2.LargeStrong.displayName = "Typography.LargeStrong";
 Typography2.Large = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6594,6 +6706,7 @@ Typography2.Large = (_a) => {
     variant: "large"
   }));
 };
+Typography2.Large.displayName = "Typography.Large";
 Typography2.DefaultStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6601,6 +6714,7 @@ Typography2.DefaultStrong = (_a) => {
     variant: "default-strong"
   }));
 };
+Typography2.DefaultStrong.displayName = "Typography.DefaultStrong";
 Typography2.Default = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6608,6 +6722,7 @@ Typography2.Default = (_a) => {
     variant: "default"
   }));
 };
+Typography2.Default.displayName = "Typography.Default";
 Typography2.Paragraph = (_a) => {
   var _b = _a, { htmlTag = "p", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography2.Default, __spreadProps(__spreadValues({}, props), {
@@ -6615,20 +6730,30 @@ Typography2.Paragraph = (_a) => {
   }));
 };
 Typography2.P = Typography2.Paragraph;
-Typography2.SmallStrong = (_a) => {
+Typography2.Paragraph.displayName = "Typography.Paragraph";
+Typography2.Small = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "small-strong"
+    variant: "small"
   }));
 };
-Typography2.Small = (_a) => {
+Typography2.Small.displayName = "Typography.Small";
+Typography2.SmallStrong = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
     htmlTag,
-    variant: "small"
+    variant: "small-strong"
   }));
 };
+Typography2.SmallStrong.displayName = "Typography.SmallStrong";
+Typography2.Strong = (_a) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ import_react21.default.createElement("strong", __spreadValues({
+    className: (0, import_classnames3.default)(tw("font-semibold"), className)
+  }, props));
+};
+Typography2.Strong.displayName = "Typography.Strong";
 Typography2.Caption = (_a) => {
   var _b = _a, { htmlTag = "div", fontWeight } = _b, props = __objRest(_b, ["htmlTag", "fontWeight"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6636,6 +6761,7 @@ Typography2.Caption = (_a) => {
     variant: "caption"
   }));
 };
+Typography2.Caption.displayName = "Typography.Caption";
 Typography2.LargeText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6643,6 +6769,7 @@ Typography2.LargeText = (_a) => {
     variant: "large-strong"
   }));
 };
+Typography2.LargeText.displayName = "Typography.LargeText";
 Typography2.MediumText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6650,6 +6777,7 @@ Typography2.MediumText = (_a) => {
     variant: "default-strong"
   }));
 };
+Typography2.MediumText.displayName = "Typography.MediumText";
 Typography2.Text = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6657,6 +6785,7 @@ Typography2.Text = (_a) => {
     variant: "default"
   }));
 };
+Typography2.Text.displayName = "Typography.Text";
 Typography2.SmallText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6664,6 +6793,7 @@ Typography2.SmallText = (_a) => {
     variant: "small"
   }));
 };
+Typography2.SmallText.displayName = "Typography.SmallText";
 Typography2.SmallTextBold = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -6671,6 +6801,7 @@ Typography2.SmallTextBold = (_a) => {
     variant: "small-strong"
   }));
 };
+Typography2.SmallTextBold.displayName = "Typography.SmallTextBold";
 
 // src/atoms/LineClamp/LineClamp.tsx
 var import_react22 = __toESM(require("react"));
@@ -7327,7 +7458,7 @@ var Navigation = (_a) => {
     className: classNames(tw("bg-grey-0 h-full"))
   }, /* @__PURE__ */ import_react33.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col h-full"), className),
-    role: "menu"
+    role: "menubar"
   }), children));
 };
 var Header = (_a) => {
@@ -7590,15 +7721,15 @@ var Group2 = import_react37.default.forwardRef((_a, ref) => {
 });
 var Item3 = import_react37.default.forwardRef(
   (_a, ref) => {
-    var _b = _a, { highlighted, selected, className, children } = _b, props = __objRest(_b, ["highlighted", "selected", "className", "children"]);
+    var _b = _a, { highlighted, selected, className, disabled, children } = _b, props = __objRest(_b, ["highlighted", "selected", "className", "disabled", "children"]);
     return /* @__PURE__ */ import_react37.default.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
-        "cursor-pointer": !props.disabled,
-        "bg-grey-0": highlighted,
-        "text-grey-20": props.disabled,
-        "hover:bg-grey-0": !props.disabled
-      })
+        "cursor-pointer hover:bg-grey-0": !disabled,
+        "cursor-not-allowed opacity-40 grayscale": disabled,
+        "bg-grey-0": highlighted
+      }),
+      "aria-disabled": disabled || void 0
     }, props), /* @__PURE__ */ import_react37.default.createElement("span", {
       className: tw("grow flex gap-x-3")
     }, children), selected && /* @__PURE__ */ import_react37.default.createElement(InlineIcon, {
@@ -7884,11 +8015,14 @@ var TableSortCell = (_a) => {
     className: getSortCellIconClassNames(direction === "ascending")
   }))));
 };
+var Caption = ({ children }) => /* @__PURE__ */ import_react40.default.createElement(Typography2.Caption, {
+  htmlTag: "caption"
+}, children);
 var Item4 = ({ image, imageAlt, imageSize = 35, title, caption }) => /* @__PURE__ */ import_react40.default.createElement("div", {
   className: tw("flex gap-4 items-center")
 }, image && /* @__PURE__ */ import_react40.default.createElement("img", {
   src: image,
-  alt: imageAlt,
+  alt: imageAlt != null ? imageAlt : "",
   style: { width: imageSize, height: imageSize }
 }), /* @__PURE__ */ import_react40.default.createElement("div", null, title, caption && /* @__PURE__ */ import_react40.default.createElement(Typography2.Caption, null, caption)));
 Table.Head = import_react40.default.memo(TableHead);
@@ -7897,9 +8031,11 @@ Table.Row = import_react40.default.memo(TableRow);
 Table.Cell = import_react40.default.memo(TableCell);
 Table.SortCell = import_react40.default.memo(TableSortCell);
 Table.SelectCell = import_react40.default.memo(TableSelectCell);
+Table.Caption = Caption;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Alert,
+  Caption,
   Card,
   Checkbox,
   Chip,