@aivenio/aquarium 1.28.0 → 1.30.0

package/dist/system.cjs

@@ -166,8 +166,7 @@ var require_tokens = __commonJS({
             "primary-20": "#b4e5fb",
             "primary-10": "#e0f5fe",
             "primary-5": "#effaff",
-            "primary-0": "#f9fdff",
-            "navyBlue-100": "#30375e"
+            "primary-0": "#f9fdff"
           },
           typography: {
             sizes: [
@@ -700,6 +699,7 @@ var require_tokens = __commonJS({
             "grey-50": "#787885",
             "grey-40": "#9696a0",
             "grey-30": "#b4b4bb",
+            "grey-20": "#d2d2d6",
             "grey-10": "#e1e1e3",
             "grey-5": "#ededf0",
             "grey-0": "#f7f7fa",
@@ -715,20 +715,18 @@ var require_tokens = __commonJS({
             "secondary-10": "#fee8d0",
             "secondary-5": "#fff3e8",
             "secondary-0": "#fffbf8",
-            "primary-100": "#a70045",
-            "primary-90": "#c60443",
-            "primary-80": "#e41a4a",
-            "primary-70": "#ff3554",
-            "primary-60": "#ff5275",
-            "primary-50": "#ff6f94",
-            "primary-40": "#ff8db0",
-            "primary-30": "#ffa9c9",
-            "primary-20": "#ffc4de",
-            "primary-10": "#ffdeef",
-            "primary-5": "#ffe8f4",
-            "primary-0": "#fff9fc",
-            "grey-20": "#d2d2d6",
-            "navyBlue-100": "#30375e"
+            "primary-100": "#0e1652",
+            "primary-90": "#222f95",
+            "primary-80": "#3545be",
+            "primary-70": "#5865cd",
+            "primary-60": "#818eec",
+            "primary-50": "#9daaee",
+            "primary-40": "#b9c5ef",
+            "primary-30": "#c7d1f4",
+            "primary-20": "#d5ddfa",
+            "primary-10": "#e3e9ff",
+            "primary-5": "#f3f6ff",
+            "primary-0": "#ffffff"
           },
           typography: {
             sizes: [
@@ -736,40 +734,40 @@ var require_tokens = __commonJS({
                 name: "large-heading",
                 className: "typography-large-heading",
                 style: {
-                  fontFamily: "Inter",
+                  fontFamily: "Poppins",
                   fontSize: "32px",
                   fontWeight: 700,
                   fontStyle: "normal",
                   lineHeight: 1.375,
                   textTransform: "none"
                 },
-                fontPostScriptName: "Inter-Bold"
+                fontPostScriptName: "Poppins-Bold"
               },
               {
                 name: "heading",
                 className: "typography-heading",
                 style: {
-                  fontFamily: "Inter",
+                  fontFamily: "Poppins",
                   fontSize: "24px",
                   fontWeight: 700,
                   fontStyle: "normal",
                   lineHeight: 1.375,
                   textTransform: "none"
                 },
-                fontPostScriptName: "Inter-Bold"
+                fontPostScriptName: "Poppins-Bold"
               },
               {
                 name: "subheading",
                 className: "typography-subheading",
                 style: {
-                  fontFamily: "Inter",
+                  fontFamily: "Poppins",
                   fontSize: "20px",
                   fontWeight: 600,
                   fontStyle: "normal",
                   lineHeight: 1.375,
                   textTransform: "none"
                 },
-                fontPostScriptName: "Inter-Bold"
+                fontPostScriptName: "Poppins-Bold"
               },
               {
                 name: "large-strong",
@@ -4392,6 +4390,22 @@ var require_reset = __commonJS({
   }
 });
 
+// src/icons/roadmap.js
+var require_roadmap = __commonJS({
+  "src/icons/roadmap.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-width="1.5" d="M9.272 5.69h.75v-2.6h.233v15.83h-.233v-3.466H7.106a.55.55 0 110-1.1h2.916v-3.232h-4.65a.55.55 0 110-1.1h4.65V6.789H3.64a.55.55 0 110-1.1h5.632Zm4.216.25a.25.25 0 01.25-.25h.6a.25.25 0 01.25.25v.599a.25.25 0 01-.25.25h-.6a.25.25 0 01-.25-.25v-.6Zm0 4.632a.55.55 0 01.55-.55h1.733a.55.55 0 110 1.1h-1.733a.55.55 0 01-.55-.55Zm0 4.332a.55.55 0 01.55-.55h4.332a.55.55 0 110 1.1h-4.332a.55.55 0 01-.55-.55Z"/>',
+      "left": 0,
+      "top": 0,
+      "width": 22,
+      "height": 22
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/saved.js
 var require_saved = __commonJS({
   "src/icons/saved.js"(exports) {
@@ -5787,6 +5801,7 @@ var tailwind_theme_default = {
     "grey-50": "var(--aquarium-colors-grey-50, #787885)",
     "grey-40": "var(--aquarium-colors-grey-40, #9696a0)",
     "grey-30": "var(--aquarium-colors-grey-30, #b4b4bb)",
+    "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
     "grey-10": "var(--aquarium-colors-grey-10, #e1e1e3)",
     "grey-5": "var(--aquarium-colors-grey-5, #ededf0)",
     "grey-0": "var(--aquarium-colors-grey-0, #f7f7fa)",
@@ -5802,20 +5817,18 @@ var tailwind_theme_default = {
     "secondary-10": "var(--aquarium-colors-secondary-10, #fee8d0)",
     "secondary-5": "var(--aquarium-colors-secondary-5, #fff3e8)",
     "secondary-0": "var(--aquarium-colors-secondary-0, #fffbf8)",
-    "primary-100": "var(--aquarium-colors-primary-100, #a70045)",
-    "primary-90": "var(--aquarium-colors-primary-90, #c60443)",
-    "primary-80": "var(--aquarium-colors-primary-80, #e41a4a)",
-    "primary-70": "var(--aquarium-colors-primary-70, #ff3554)",
-    "primary-60": "var(--aquarium-colors-primary-60, #ff5275)",
-    "primary-50": "var(--aquarium-colors-primary-50, #ff6f94)",
-    "primary-40": "var(--aquarium-colors-primary-40, #ff8db0)",
-    "primary-30": "var(--aquarium-colors-primary-30, #ffa9c9)",
-    "primary-20": "var(--aquarium-colors-primary-20, #ffc4de)",
-    "primary-10": "var(--aquarium-colors-primary-10, #ffdeef)",
-    "primary-5": "var(--aquarium-colors-primary-5, #ffe8f4)",
-    "primary-0": "var(--aquarium-colors-primary-0, #fff9fc)",
-    "grey-20": "var(--aquarium-colors-grey-20, #d2d2d6)",
-    "navyBlue-100": "var(--aquarium-colors-navyBlue-100, #30375e)",
+    "primary-100": "var(--aquarium-colors-primary-100, #0e1652)",
+    "primary-90": "var(--aquarium-colors-primary-90, #222f95)",
+    "primary-80": "var(--aquarium-colors-primary-80, #3545be)",
+    "primary-70": "var(--aquarium-colors-primary-70, #5865cd)",
+    "primary-60": "var(--aquarium-colors-primary-60, #818eec)",
+    "primary-50": "var(--aquarium-colors-primary-50, #9daaee)",
+    "primary-40": "var(--aquarium-colors-primary-40, #b9c5ef)",
+    "primary-30": "var(--aquarium-colors-primary-30, #c7d1f4)",
+    "primary-20": "var(--aquarium-colors-primary-20, #d5ddfa)",
+    "primary-10": "var(--aquarium-colors-primary-10, #e3e9ff)",
+    "primary-5": "var(--aquarium-colors-primary-5, #f3f6ff)",
+    "primary-0": "var(--aquarium-colors-primary-0, #ffffff)",
     transparent: "var(--aquarium-colors-transparent, transparent)",
     white: "var(--aquarium-colors-white, white)",
     black: "var(--aquarium-colors-black, black)",
@@ -6506,6 +6519,7 @@ var import_remove = __toESM(require_remove());
 var import_repeat = __toESM(require_repeat());
 var import_replicationFlow = __toESM(require_replicationFlow());
 var import_reset = __toESM(require_reset());
+var import_roadmap = __toESM(require_roadmap());
 var import_saved = __toESM(require_saved());
 var import_scatterPlot = __toESM(require_scatterPlot());
 var import_search2 = __toESM(require_search());
@@ -7135,9 +7149,12 @@ var getCommonInputStyles = ({ readOnly, valid }) => tw(
   }
 );
 var ghostButtonStyle = tw(
-  "text-primary-80 active:text-primary-70 focus-visible:text-grey-90 hover:text-primary-70 disabled:text-primary-40"
+  "text-primary-80 active:text-primary-90 focus-visible:text-primary-90 hover:text-primary-90 disabled:text-primary-40"
+);
+var linkStyle = classNames(
+  ghostButtonStyle,
+  tw("visited:text-primary-80 underline hover:no-underline focusable")
 );
-var linkStyle = classNames(ghostButtonStyle, tw("visited:text-primary-80 focusable"));
 
 // src/utils/string.ts
 var capitalize = (a) => a.charAt(0).toUpperCase() + a.slice(1);
@@ -7147,28 +7164,27 @@ var import_chevronDown3 = __toESM(require_chevronDown());
 var import_loading2 = __toESM(require_loading());
 var COLOR_CLASSNAMES = {
   "primary": tw(
-    "text-white bg-primary-80 active:bg-primary-90 active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-inset hover:bg-primary-70 disabled:bg-primary-5"
+    "text-white bg-primary-80 active:bg-primary-90 active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-inset hover:bg-primary-90 disabled:bg-primary-40"
   ),
   "secondary": tw(
-    "text-grey-60 bg-white ring-1 ring-grey-30 ring-inset active:bg-grey-5 active:ring-grey-50 active:text-grey-80",
-    "focus-visible:ring-2 focus-visible:ring-grey-50 focus-visible:text-grey-80",
-    "hover:ring-grey-50 hover:text-grey-80 disabled:text-grey-30 disabled:bg-grey-0 disabled:ring-grey-20"
+    "text-primary-80 bg-white ring-1 ring-primary-80 ring-inset",
+    "active:bg-primary-5 active:ring-primary-90 active:text-primary-90",
+    "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-80",
+    "hover:bg-primary-5 hover:ring-primary-90 hover:text-primary-90",
+    "disabled:bg-white disabled:text-primary-40 disabled:ring-primary-40"
   ),
   "ghost": ghostButtonStyle,
-  "text": ghostButtonStyle,
+  "text": linkStyle,
   "secondary-ghost": tw(
     "text-grey-60 active:text-grey-50 focus-visible:text-grey-80 hover:text-grey-80 disabled:text-grey-30"
   )
 };
-var LoadingSpinner = ({
-  size = "20px",
-  kind = "primary"
-}) => {
+var LoadingSpinner = ({ size = "20px" }) => {
   return /* @__PURE__ */ import_react19.default.createElement(InlineIcon, {
     icon: import_loading2.default,
     width: size,
     height: size,
-    color: kind === "primary" ? "primary-60" : "grey-60",
+    color: "primary-80",
     "data-testid": "loading-button"
   });
 };
@@ -7282,8 +7298,7 @@ var asButton = (Component, isDropdownButton) => {
         className: tw("absolute left-1/2 top-0 bottom-0 flex"),
         style: { transform: "translate(-50%)" }
       }, /* @__PURE__ */ import_react19.default.createElement(LoadingSpinner, {
-        size: iconSize,
-        kind: kind === "primary" ? "primary" : "secondary"
+        size: iconSize
       })), /* @__PURE__ */ import_react19.default.createElement("div", {
         className: tw({ invisible: loading2 })
       }, buttonContent())) : buttonContent());
@@ -7415,19 +7430,19 @@ var import_warningSign2 = __toESM(require_warningSign());
 var alertTypes = {
   information: {
     icon: import_infoSign2.default,
-    color: "info-40"
+    color: "info-70"
   },
   warning: {
     icon: import_warningSign2.default,
-    color: "warning-40"
+    color: "warning-90"
   },
   error: {
     icon: import_error2.default,
-    color: "error-40"
+    color: "error-70"
   },
   success: {
     icon: import_tickCircle2.default,
-    color: "success-40"
+    color: "success-70"
   }
 };
 var Alert = (_a) => {
@@ -7447,7 +7462,7 @@ var Alert = (_a) => {
     className: classNames(
       tw("rounded grid grid-cols-[auto_1fr_auto] items-center gap-x-3 gap-y-2", {
         "bg-error-5": type === "error",
-        "bg-info-5": type === "information",
+        "bg-info-10": type === "information",
         "bg-success-5": type === "success",
         "bg-warning-5": type === "warning",
         "p-4": Boolean(dense),
@@ -7676,10 +7691,10 @@ var Banner = (_a) => {
   }), children);
 };
 Banner.Title = (_a) => {
-  var _b = _a, { children, className, layout, titleVariant = "primary" } = _b, rest = __objRest(_b, ["children", "className", "layout", "titleVariant"]);
+  var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
   return /* @__PURE__ */ import_react26.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "subheading",
-    color: titleVariant === "secondary" ? "primary-80" : "grey-100",
+    color: "grey-100",
     className: classNames(
       className,
       tw("whitespace-nowrap", {
@@ -7751,8 +7766,7 @@ var createBanner = (displayName, opts = {}) => {
     }, /* @__PURE__ */ import_react27.default.createElement(Banner.ContentContainer, {
       layout
     }, /* @__PURE__ */ import_react27.default.createElement(Banner.Title, {
-      layout,
-      titleVariant: opts.isOneLineBanner ? "secondary" : "primary"
+      layout
     }, title), /* @__PURE__ */ import_react27.default.createElement(Banner.Description, {
       flexGrow: isDismissable ? false : true
     }, children || description), action && /* @__PURE__ */ import_react27.default.createElement(Banner.Actions, {
@@ -7825,7 +7839,7 @@ var asCrumb = (Component, displayName, options = { isActive: false }) => {
     }), /* @__PURE__ */ import_react28.default.createElement("span", {
       className: (0, import_classnames3.default)(
         tw("flex flex-row flex-nowrap items-center gap-x-3 whitespace-nowrap", {
-          "text-primary-80 hover:text-primary-70": !options.isActive,
+          "text-primary-80 hover:text-primary-70 underline hover:no-underline": !options.isActive,
           "text-grey-90": options.isActive
         })
       )
@@ -8529,7 +8543,7 @@ var Checkbox = import_react39.default.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__ */ import_react39.default.createElement("span", {
       className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
-        "hover:border-grey-50 peer-checked:border-navyBlue-100": !disabled,
+        "hover:border-grey-50 peer-checked:border-primary-80": !disabled,
         "border-grey-5": disabled
       })
     }, /* @__PURE__ */ import_react39.default.createElement("input", __spreadProps(__spreadValues({
@@ -8540,24 +8554,25 @@ var Checkbox = import_react39.default.forwardRef(
     }, props), {
       className: classNames(
         tw("peer appearance-none outline-none w-5 h-5", "rounded-sm border border-transparent", {
-          "cursor-pointer checked:bg-navyBlue-100": !disabled,
-          "cursor-not-allowed bg-grey-0": disabled
+          "cursor-pointer checked:bg-primary-80": !disabled,
+          "cursor-not-allowed bg-grey-0 checked:bg-primary-40": disabled
         })
       ),
       readOnly,
       disabled
     })), /* @__PURE__ */ import_react39.default.createElement(Icon, {
       icon: indeterminate ? import_minus2.default : import_tick3.default,
+      strokeWidth: "2px",
       className: classNames(
         tw(
           "absolute top-0 right-0",
           "pointer-events-none p-[2px] w-5 h-5",
-          "text-transparent [&>path]:stroke-transparent",
+          "text-transparent [&>path]:stroke-transparent [&>path]:stroke-2",
           "rounded-sm border border-grey-20 peer-focus:border-info-70"
         ),
         {
-          "peer-hover:border-grey-50 peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-navyBlue-100": !disabled,
-          "border-grey-5 peer-checked:text-grey-30 peer-checked:[&>path]:stroke-grey-30": disabled
+          "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
         }
       )
     }));
@@ -10185,10 +10200,10 @@ var RadioButton = import_react62.default.forwardRef(
         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",
-          "outline-none focus:border-info-70 checked:bg-navyBlue-100 checked:shadow-whiteInset",
+          "outline-none focus:border-info-70 checked:bg-primary-80 checked:shadow-whiteInset",
           {
-            "hover:border-grey-50 checked:border-navyBlue-100": !disabled,
-            "cursor-not-allowed border-grey-5 bg-grey-0 checked:bg-opacity-40": disabled
+            "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
           }
         )
       ),
@@ -10723,7 +10738,7 @@ var Modal = (_a) => {
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react71.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-navyBlue-100 opacity-70"), className)
+    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-primary-100 opacity-60"), className)
   }));
 };
 Modal.Dialog = import_react71.default.forwardRef(
@@ -11448,12 +11463,12 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       if (status === "warning") {
         statusIcon = /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: "warning-80"
+          color: selected ? void 0 : "warning-80"
         });
       } else if (status === "error") {
         statusIcon = /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: "error-50"
+          color: selected ? void 0 : "error-50"
         });
       }
       const tab = /* @__PURE__ */ import_react85.default.createElement(Component, __spreadValues({
@@ -12956,7 +12971,7 @@ var SegmentedControl = (_a) => {
     "selected",
     "className"
   ]);
-  return /* @__PURE__ */ import_react103.default.createElement("button", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react103.default.createElement("li", null, /* @__PURE__ */ import_react103.default.createElement("button", __spreadProps(__spreadValues({
     type: "button"
   }, rest), {
     className: classNames(
@@ -12964,8 +12979,9 @@ var SegmentedControl = (_a) => {
       !rest.disabled && getHoverClassNames(variant),
       selected && getSelectedClassNames(variant),
       className
-    )
-  }), children);
+    ),
+    "aria-pressed": selected
+  }), children));
 };
 var SegmentedControlGroup = (_a) => {
   var _b = _a, {
@@ -12974,20 +12990,23 @@ var SegmentedControlGroup = (_a) => {
     variant = "filled",
     dense = false,
     children,
-    className
+    className,
+    ariaLabel
   } = _b, rest = __objRest(_b, [
     "value",
     "onChange",
     "variant",
     "dense",
     "children",
-    "className"
+    "className",
+    "ariaLabel"
   ]);
   const classes2 = tw("rounded flex", {
     "border border-grey-20 text-grey-50": variant === "outlined",
     "bg-grey-0": variant === "raised"
   });
-  return /* @__PURE__ */ import_react103.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+  return /* @__PURE__ */ import_react103.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
+    "aria-label": ariaLabel,
     className: classNames("Aquarium-SegmentedControl", classes2, className)
   }), import_react103.default.Children.map(
     children,
@@ -13167,8 +13186,8 @@ var Switch = import_react106.default.forwardRef(
           "outline-none focus:border border-info-70 bg-grey-20",
           "cursor-pointer disabled:cursor-not-allowed",
           {
-            "hover:bg-grey-30 checked:bg-navyBlue-100 hover:checked:bg-navyBlue-100": !disabled,
-            "bg-grey-5 checked:opacity-40": disabled
+            "hover:bg-grey-30 checked:bg-primary-80 hover:checked:bg-primary-80": !disabled,
+            "bg-grey-5 checked:opacity-40 checked:bg-primary-40": disabled
           }
         )
       ),