@aivenio/aquarium 1.60.1 → 1.61.0

package/dist/system.mjs

@@ -2676,6 +2676,22 @@ var require_googleLogo = __commonJS({
   }
 });
 
+// src/icons/grid.js
+var require_grid = __commonJS({
+  "src/icons/grid.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.7 2.75H4.217c-.514 0-.77 0-.966.1a.917.917 0 00-.401.4c-.1.197-.1.453-.1.967V7.7c0 .513 0 .77.1.966a.917.917 0 00.4.4c.197.1.453.1.967.1H7.7c.513 0 .77 0 .966-.1a.917.917 0 00.4-.4c.1-.196.1-.453.1-.966V4.217c0-.514 0-.77-.1-.966a.917.917 0 00-.4-.401c-.196-.1-.453-.1-.966-.1Zm10.083 0H14.3c-.513 0-.77 0-.966.1a.917.917 0 00-.4.4c-.1.197-.1.453-.1.967V7.7c0 .513 0 .77.1.966a.917.917 0 00.4.4c.196.1.453.1.966.1h3.483c.514 0 .77 0 .966-.1a.917.917 0 00.401-.4c.1-.196.1-.453.1-.966V4.217c0-.514 0-.77-.1-.966a.917.917 0 00-.4-.401c-.197-.1-.453-.1-.967-.1Zm0 10.083H14.3c-.513 0-.77 0-.966.1a.918.918 0 00-.4.4c-.1.197-.1.454-.1.967v3.483c0 .514 0 .77.1.966a.917.917 0 00.4.401c.196.1.453.1.966.1h3.483c.514 0 .77 0 .966-.1a.917.917 0 00.401-.4c.1-.197.1-.453.1-.967V14.3c0-.513 0-.77-.1-.966a.917.917 0 00-.4-.4c-.197-.1-.453-.1-.967-.1Zm-10.083 0H4.217c-.514 0-.77 0-.966.1a.917.917 0 00-.401.4c-.1.197-.1.454-.1.967v3.483c0 .514 0 .77.1.966a.917.917 0 00.4.401c.197.1.453.1.967.1H7.7c.513 0 .77 0 .966-.1a.917.917 0 00.4-.4c.1-.197.1-.453.1-.967V14.3c0-.513 0-.77-.1-.966a.917.917 0 00-.4-.4c-.196-.1-.453-.1-.966-.1Z"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/groupedBarChart.js
 var require_groupedBarChart = __commonJS({
   "src/icons/groupedBarChart.js"(exports) {
@@ -4356,6 +4372,22 @@ var require_swapVertical = __commonJS({
   }
 });
 
+// src/icons/table.js
+var require_table = __commonJS({
+  "src/icons/table.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.75 8.25h16.5m-11-5.5v16.5m-1.1-16.5h7.7c1.54 0 2.31 0 2.899.3a2.75 2.75 0 011.201 1.202c.3.588.3 1.358.3 2.898v7.7c0 1.54 0 2.31-.3 2.899a2.751 2.751 0 01-1.201 1.201c-.589.3-1.359.3-2.899.3h-7.7c-1.54 0-2.31 0-2.898-.3a2.75 2.75 0 01-1.202-1.2c-.3-.589-.3-1.359-.3-2.899v-7.7c0-1.54 0-2.31.3-2.898A2.75 2.75 0 014.252 3.05c.588-.3 1.358-.3 2.898-.3Z"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/tag.js
 var require_tag = __commonJS({
   "src/icons/tag.js"(exports) {
@@ -4874,12 +4906,12 @@ var InputContainer = React2.forwardRef(
         {
           "border px-3 py-[6px]": variant !== "readOnly",
           "cursor-default": variant === "readOnly",
-          "border-grey-20": variant !== "error" && variant !== "readOnly",
+          "border-default": variant !== "error" && variant !== "readOnly",
           "border-error-50": variant === "error",
-          "hover:border-grey-50": variant !== "error" && variant !== "disabled" && variant !== "focused",
+          "hover:border-intense": variant !== "error" && variant !== "disabled" && variant !== "focused",
           "border-info-70": variant === "focused",
           "bg-white": variant !== "disabled",
-          "cursor-not-allowed border-grey-20 bg-grey-5": variant === "disabled"
+          "cursor-not-allowed border-default bg-grey-5": variant === "disabled"
         }
       )
     }, props));
@@ -4925,11 +4957,11 @@ var EmptyStateContainer = React2.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ React2.createElement("li", __spreadValues({
     ref,
-    className: tw("border border-dashed border-grey-10 m-4 p-6")
+    className: tw("border border-dashed border-default m-4 p-6")
   }, props), children);
 });
 var Divider = (props) => /* @__PURE__ */ React2.createElement("div", __spreadValues({
-  className: tw("border-b-[1px] border-grey-5 mx-3 my-4")
+  className: tw("border-b-[1px] border-muted mx-3 my-4")
 }, props));
 var Group = React2.forwardRef((_a, ref) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
@@ -6012,6 +6044,7 @@ var import_githubLogo = __toESM(require_githubLogo());
 var import_globeNetwork = __toESM(require_globeNetwork());
 var import_globe = __toESM(require_globe());
 var import_googleLogo = __toESM(require_googleLogo());
+var import_grid = __toESM(require_grid());
 var import_groupedBarChart = __toESM(require_groupedBarChart());
 var import_heart = __toESM(require_heart());
 var import_help = __toESM(require_help());
@@ -6118,6 +6151,7 @@ var import_stopwatch = __toESM(require_stopwatch());
 var import_superadmin = __toESM(require_superadmin());
 var import_swapHorizontal = __toESM(require_swapHorizontal());
 var import_swapVertical = __toESM(require_swapVertical());
+var import_table = __toESM(require_table());
 var import_tag = __toESM(require_tag());
 var import_terraform = __toESM(require_terraform());
 var import_thumbsDown = __toESM(require_thumbsDown());
@@ -6736,12 +6770,12 @@ var Arrow = (props) => {
 
 // src/utils/constants.ts
 var getCommonInputStyles = ({ readOnly, valid }) => tw(
-  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-grey-20 disabled:bg-grey-5 typography-small text-default disabled:text-muted placeholder:text-muted focus:outline-none",
+  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-grey-5 typography-small text-default disabled:text-muted placeholder:text-muted focus:outline-none",
   {
     "px-3 py-3": !readOnly,
     "border-none resize-none cursor-default": readOnly,
     "border border-error-50": !valid && !readOnly,
-    "border border-grey-20 hover:border-grey-50 focus:border-info-70": valid && !readOnly
+    "border border-default hover:border-intense focus:border-info-70": valid && !readOnly
   }
 );
 var ghostButtonStyle = tw(
@@ -7160,12 +7194,17 @@ Typography2.SmallTextBold.displayName = "Typography.SmallTextBold";
 // src/atoms/Alert/Alert.tsx
 import React18 from "react";
 import { useId } from "@react-aria/utils";
+var import_announcement2 = __toESM(require_announcement());
 var import_cross2 = __toESM(require_cross());
 var import_error2 = __toESM(require_error());
 var import_infoSign2 = __toESM(require_infoSign());
 var import_tickCircle2 = __toESM(require_tickCircle());
 var import_warningSign2 = __toESM(require_warningSign());
 var alertTypes = {
+  announcement: {
+    icon: import_announcement2.default,
+    color: "primary-80"
+  },
   information: {
     icon: import_infoSign2.default,
     color: "info-70"
@@ -7203,6 +7242,7 @@ var Alert = (_a) => {
         "bg-info-10": type === "information",
         "bg-success-5": type === "success",
         "bg-warning-5": type === "warning",
+        "bg-primary-10": type === "announcement",
         "p-4": Boolean(dense),
         "p-5": !dense
       }),
@@ -7588,7 +7628,7 @@ var Banner3 = (_a) => {
       tw(`rounded flex justify-between gap-7 flex-nowrap ${spacing.spacingAroundBanner}`, {
         "items-center": layout === "horizontal",
         "bg-grey-0": variant === "default",
-        "bg-white border border-grey-5": variant === "outlined"
+        "bg-white border border-muted": variant === "outlined"
       })
     )
   }), children);
@@ -7911,7 +7951,7 @@ var getCommonCardStyles = ({
   fullWidth = false,
   enableMinWidth = true,
   disabled = false
-}) => tw("border-[2px] border-grey-5 rounded-[2px] relative p-5 flex flex-col gap-5 bg-white outline-none transition-all", {
+}) => tw("border-[2px] border-muted rounded-[2px] relative p-5 flex flex-col gap-5 bg-white outline-none transition-all", {
   "w-[280px]": !fullWidth,
   "w-full": fullWidth,
   "min-w-[280px]": fullWidth && enableMinWidth,
@@ -8053,8 +8093,8 @@ var Checkbox = React30.forwardRef(
     var _b = _a, { id, children, name, disabled = false, readOnly = false, indeterminate = false } = _b, props = __objRest(_b, ["id", "children", "name", "disabled", "readOnly", "indeterminate"]);
     return /* @__PURE__ */ React30.createElement("span", {
       className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
-        "hover:border-grey-50 peer-checked:border-primary-80": !disabled,
-        "border-grey-5": disabled
+        "hover:border-intense peer-checked:border-primary-80": !disabled,
+        "border-muted": disabled
       })
     }, /* @__PURE__ */ React30.createElement("input", __spreadProps(__spreadValues({
       id,
@@ -8078,11 +8118,11 @@ var Checkbox = React30.forwardRef(
           "absolute top-0 right-0",
           "pointer-events-none p-[2px] w-5 h-5",
           "text-transparent [&>path]:stroke-transparent [&>path]:stroke-2",
-          "rounded-sm border border-grey-20 peer-focus:border-info-70"
+          "rounded-sm border border-default peer-focus:border-info-70"
         ),
         {
-          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-80": !disabled,
-          "border-grey-5 peer-checked:text-primary-10 peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-40": disabled
+          "peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-80": !disabled,
+          "border-muted peer-checked:text-primary-10 peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-40": disabled
         }
       )
     }));
@@ -8103,11 +8143,11 @@ var RadioButton = React31.forwardRef(
       className: classNames(
         tw(
           "inline-flex justify-center items-center self-center appearance-none",
-          "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-grey-20",
+          "w-5 h-5 p-[3px] rounded-full cursor-pointer border border-default",
           "outline-none focus:border-info-70 checked:bg-primary-80 checked:shadow-whiteInset",
           {
-            "hover:border-grey-50 checked:border-primary-80": !disabled,
-            "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40 checked:bg-primary-40 checked:border-primary-40": disabled
+            "hover:border-intense checked:border-primary-80": !disabled,
+            "cursor-not-allowed border-muted bg-grey-0 checked:bg-opacity-40 checked:bg-primary-40 checked:border-primary-40": disabled
           }
         )
       ),
@@ -9174,7 +9214,7 @@ var ChoiceChip = (_a) => {
     className: classNames(
       "Aquarium-ChoiceChip",
       tw("inline-flex items-center border rounded-sm transition whitespace-nowrap cursor-pointer", {
-        "bg-white border-grey-20 text-grey-60": !selected,
+        "bg-white border-default text-grey-60": !selected,
         "bg-grey-0 border-grey-100 text-grey-100": selected,
         "typography-small py-2 px-3 gap-x-3": !dense,
         "typography-caption py-1 px-2 gap-x-2": Boolean(dense)
@@ -9204,7 +9244,7 @@ var PopoverPanel = React49.forwardRef((_a, ref) => {
     ref,
     className: classNames(
       className,
-      tw("rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col border border-grey-20 outline-none")
+      tw("rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col border border-default outline-none")
     )
   }, props), children);
 });
@@ -10364,7 +10404,7 @@ var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ React62.createElement("tbody", __spreadValues({}, rest), children);
 };
-var rowClassNames = tw("children:border-grey-10 group children:last:border-b-0 hover:bg-grey-0");
+var rowClassNames = tw("children:border-default group children:last:border-b-0 hover:bg-grey-0");
 var TableRow = (_a) => {
   var _b = _a, { children, className, disabled } = _b, rest = __objRest(_b, ["children", "className", "disabled"]);
   return /* @__PURE__ */ React62.createElement("tr", __spreadProps(__spreadValues(__spreadValues({}, rest), { inert: disabled ? "" : void 0 }), {
@@ -10383,7 +10423,7 @@ var getBodyCellClassNames = (table = true, stickyColumn) => tw("text-default py-
 });
 var getAlignClassNames = (align) => tw({ "text-right": align === "right", "text-center": align === "center" });
 var getHeadCellClassNames = (sticky = true, stickyColumn) => {
-  const common = tw("py-[14px] text-left bg-white border-grey-40 text-grey-50 font-semibold whitespace-nowrap");
+  const common = tw("py-[14px] text-left bg-white border-intense text-grey-50 font-semibold whitespace-nowrap");
   return sticky ? classNames(
     common,
     tw("sticky top-0", {
@@ -10518,7 +10558,7 @@ var Cell = (_a) => {
       cellClassNames,
       getBodyCellClassNames(false, stickyColumn),
       getAlignClassNames2(align),
-      tw("border-grey-10 group-last-of-type:border-b-0"),
+      tw("border-default group-last-of-type:border-b-0"),
       className
     )
   }));
@@ -10552,7 +10592,7 @@ var SubGroupSpacing = (_a) => {
   return /* @__PURE__ */ React63.createElement("span", __spreadProps(__spreadValues({}, rest), {
     "aria-hidden": true,
     className: classNames(
-      tw("col-span-full h-6 bg-grey-0 border-grey-10", { "border-b": Boolean(divider) }),
+      tw("col-span-full h-6 bg-grey-0 border-default", { "border-b": Boolean(divider) }),
       className
     )
   }));
@@ -10764,7 +10804,7 @@ DropdownMenu.Separator = Separator;
 var EmptyStateContainer2 = (_a) => {
   var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ React65.createElement("div", __spreadValues({
-    className: classNames(tw("border border-dashed border-grey-10 p-3"), className)
+    className: classNames(tw("border border-dashed border-default p-3"), className)
   }, props), children);
 };
 DropdownMenu.EmptyStateContainer = EmptyStateContainer2;
@@ -10945,7 +10985,7 @@ var MenuWrapper = (_a) => {
 var ItemWrapper = ({ item, state }) => {
   const ref = React66.useRef(null);
   const { menuItemProps, descriptionProps, isSelected, isFocused, isDisabled } = useMenuItem(
-    { key: item.key, closeOnSelect: item.props.closeOnSelect },
+    { key: item.key, closeOnSelect: item.props.closeOnSelect, ["aria-label"]: item["aria-label"] },
     state,
     ref
   );
@@ -11410,7 +11450,7 @@ var DataList2 = (_a) => {
       }, content, /* @__PURE__ */ React70.createElement(Accordion.Panel, {
         role: "row",
         panelId: row.id.toString(),
-        className: tw("col-span-full bg-grey-0 border-b border-grey-10"),
+        className: tw("col-span-full bg-grey-0 border-b border-default"),
         "aria-label": `row ${row.id.toString()} details`
       }, /* @__PURE__ */ React70.createElement("div", {
         role: "cell"
@@ -11931,9 +11971,9 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         className: classNames(className, "px-5 py-3 z-10 no-underline appearance-none outline-none h-full", {
           "cursor-default": disabled,
           "text-grey-80 focus:text-primary-80": !selected,
-          "hover:bg-grey-0 hover:border-grey-20": !selected && !disabled,
+          "hover:bg-grey-0": !selected && !disabled,
           "border-b-2": !defaultUnderlineHidden || selected,
-          "border-grey-10": !selected,
+          "border-default": !selected,
           "border-primary-80": selected
         }),
         type: "button",
@@ -12104,10 +12144,10 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
       ref: parentRef,
       className: classNames("Aquarium-Tabs", tw("h-full"), className)
     }, /* @__PURE__ */ React76.createElement("div", {
-      className: tw("relative flex items-center border-b-2 border-grey-10")
+      className: tw("relative flex items-center border-b-2 border-default")
     }, /* @__PURE__ */ React76.createElement("div", {
       ref: containerRef,
-      className: tw("overflow-y-auto scrollbar-hide h-full mb-[-2px]")
+      className: tw("overflow-y-auto scrollbar-hide mb-[-2px] h-auto")
     }, /* @__PURE__ */ React76.createElement("div", {
       ref: tabsRef,
       role: "tablist",
@@ -13451,10 +13491,10 @@ var NativeSelectBase = React93.forwardRef(
         tw(
           "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-default placeholder:text-muted focus:outline-none",
           {
-            "px-3 py-3 disabled:border-grey-20 disabled:bg-grey-5 disabled:text-muted": !readOnly,
+            "px-3 py-3 disabled:border-default disabled:bg-grey-5 disabled:text-muted": !readOnly,
             "px-0 py-3 border-none": readOnly,
             "border border-error-50": !valid && !readOnly,
-            "border border-grey-20 hover:border-grey-50 focus:border-info-70": valid && !readOnly
+            "border border-default hover:border-intense focus:border-info-70": valid && !readOnly
           }
         ),
         props.className
@@ -13557,7 +13597,7 @@ var Divider3 = (_a) => {
   return /* @__PURE__ */ React94.createElement("li", __spreadProps(__spreadValues({
     role: "separator"
   }, rest), {
-    className: classNames(tw("border-t-2 border-grey-5"), className)
+    className: classNames(tw("border-t-2 border-muted"), className)
   }));
 };
 var Item5 = (_a) => {
@@ -14279,7 +14319,8 @@ var Section4 = (props) => {
     alignItems: "center"
   }, /* @__PURE__ */ React108.createElement(DropdownMenu2, {
     onAction: (action) => onAction == null ? void 0 : onAction(action),
-    onOpenChange: onMenuOpenChange
+    onOpenChange: onMenuOpenChange,
+    placement: "bottom-right"
   }, /* @__PURE__ */ React108.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React108.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more6.default
@@ -14352,7 +14393,7 @@ var SegmentedControlGroup = (_a) => {
     "ariaLabel"
   ]);
   const classes2 = tw("rounded flex", {
-    "border border-grey-20 text-grey-50": variant === "outlined",
+    "border border-default text-grey-50": variant === "outlined",
     "bg-grey-0": variant === "raised"
   });
   return /* @__PURE__ */ React109.createElement("ul", __spreadProps(__spreadValues({}, rest), {
@@ -14456,7 +14497,7 @@ var Step = (_a) => {
 };
 var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
   "border-grey-90 bg-white": state === "active",
-  "border-grey-20 bg-white": state === "inactive",
+  "border-default bg-white": state === "inactive",
   "text-white bg-success-70 border-success-70": state === "completed"
 });
 var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {

package/dist/tailwind.config.js

@@ -21,6 +21,11 @@ const originalTheme = {
     zIndex: {
       modal: '100',
     },
+    borderColor: {
+      muted: 'var(--aquarium-colors-grey-5)',
+      default: 'var(--aquarium-colors-grey-20)',
+      intense: 'var(--aquarium-colors-grey-50)',
+    },
     textColor: {
       muted: 'var(--aquarium-colors-grey-40)',
       default: 'var(--aquarium-colors-grey-70)',