@aivenio/aquarium 1.73.0 → 1.75.0

package/dist/atoms.cjs

@@ -4768,6 +4768,7 @@ var tailwind_theme_default = {
     muted: "var(--aquarium-text-color-muted)",
     default: "var(--aquarium-text-color-default)",
     intense: "var(--aquarium-text-color-intense)",
+    opposite: { default: "var(--aquarium-text-color-opposite-default)" },
     danger: {
       inactive: "var(--aquarium-text-color-danger-inactive)",
       muted: "var(--aquarium-text-color-danger-muted)",
@@ -5092,77 +5093,77 @@ var tokens_default = {
   },
   backgroundColor: {
     body: "white",
-    "body-intense": "#3a3a44",
+    "body-intense": "rgba(58,58,68,1)",
     "popover-content": "white",
-    muted: "#f7f7fa",
-    default: "#ededf0",
-    intense: "#d2d2d6",
+    muted: "rgba(247,247,250,1)",
+    default: "rgba(237,237,240,1)",
+    intense: "rgba(210,210,214,1)",
     primary: {
-      muted: "#b9c5ef",
-      default: "#3545be",
-      intense: "#222f95",
-      active: "#f3f6ff",
-      hover: "#f3f6ff"
+      muted: "rgba(185,197,239,1)",
+      default: "rgba(53,69,190,1)",
+      intense: "rgba(34,47,149,1)",
+      active: "rgba(243,246,255,1)",
+      hover: "rgba(243,246,255,1)"
     },
     info: {
-      muted: "#e0f5fe",
-      default: "#0399e3",
-      intense: "#0174ba"
+      muted: "rgba(224,245,254,1)",
+      default: "rgba(3,153,227,1)",
+      intense: "rgba(1,116,186,1)"
     },
     success: {
-      muted: "#ecf7ed",
-      default: "#00b300",
-      intense: "#008e00"
+      muted: "rgba(236,247,237,1)",
+      default: "rgba(0,179,0,1)",
+      intense: "rgba(0,142,0,1)"
     },
     warning: {
-      muted: "#fff8ea",
-      default: "#ffb300",
-      intense: "#ff9003"
+      muted: "rgba(255,248,234,1)",
+      default: "rgba(255,179,0,1)",
+      intense: "rgba(255,144,3,1)"
     },
     danger: {
-      muted: "#ffcbd2",
-      default: "#ffadb3",
-      intense: "#e62728"
+      muted: "rgba(255,203,210,1)",
+      default: "rgba(255,173,179,1)",
+      intense: "rgba(230,39,40,1)"
     },
     status: {
-      announcement: "#f3f6ff",
-      info: "#e0f5fe",
-      warning: "#fff8ea",
-      danger: "#fee8e7",
-      success: "#ecf7ed"
+      announcement: "rgba(243,246,255,1)",
+      info: "rgba(224,245,254,1)",
+      warning: "rgba(255,248,234,1)",
+      danger: "rgba(254,232,231,1)",
+      success: "rgba(236,247,237,1)"
     },
     "icon-button": {
       hover: "rgba(25,25,29,.05)"
     }
   },
   borderColor: {
-    muted: "#ededf0",
-    default: "#d2d2d6",
-    intense: "#787885",
+    muted: "rgba(237,237,240,1)",
+    default: "rgba(210,210,214,1)",
+    intense: "rgba(120,120,133,1)",
     primary: {
-      muted: "#818eec",
-      default: "#3545be",
-      intense: "#0e1652"
+      muted: "rgba(129,142,236,1)",
+      default: "rgba(53,69,190,1)",
+      intense: "rgba(14,22,82,1)"
     },
     info: {
-      muted: "#28b4f4",
-      default: "#0399e3",
-      intense: "#0174ba"
+      muted: "rgba(40,180,244,1)",
+      default: "rgba(3,153,227,1)",
+      intense: "rgba(1,116,186,1)"
     },
     success: {
-      muted: "#cbffc9",
-      default: "#60db57",
-      intense: "#00b300"
+      muted: "rgba(203,255,201,1)",
+      default: "rgba(96,219,87,1)",
+      intense: "rgba(0,179,0,1)"
     },
     warning: {
-      muted: "#feebb2",
-      default: "#ffb300",
-      intense: "#ff9003"
+      muted: "rgba(254,235,178,1)",
+      default: "rgba(255,179,0,1)",
+      intense: "rgba(255,144,3,1)"
     },
     danger: {
-      muted: "#ffcbd2",
-      default: "#e62728",
-      intense: "#c50001"
+      muted: "rgba(255,203,210,1)",
+      default: "rgba(230,39,40,1)",
+      intense: "rgba(197,0,1,1)"
     }
   },
   colors: {
@@ -5171,139 +5172,142 @@ var tokens_default = {
     transparent: "transparent",
     current: "currentColor",
     error: {
-      "0": "#fef2f1",
-      "5": "#fee8e7",
-      "10": "#ffcbd2",
-      "20": "#ffadb3",
-      "30": "#ed7975",
-      "40": "#e0504f",
-      "50": "#e62728",
-      "60": "#e70000",
-      "70": "#d80005",
-      "80": "#c50001",
-      "90": "#b90000",
-      "100": "#aa0000"
+      "0": "rgba(254,242,241,1)",
+      "5": "rgba(254,232,231,1)",
+      "10": "rgba(255,203,210,1)",
+      "20": "rgba(255,173,179,1)",
+      "30": "rgba(237,121,117,1)",
+      "40": "rgba(224,80,79,1)",
+      "50": "rgba(230,39,40,1)",
+      "60": "rgba(231,0,0,1)",
+      "70": "rgba(216,0,5,1)",
+      "80": "rgba(197,0,1,1)",
+      "90": "rgba(185,0,0,1)",
+      "100": "rgba(170,0,0,1)"
     },
     warning: {
-      "0": "#fffdf9",
-      "5": "#fff8ea",
-      "10": "#fff2cd",
-      "20": "#feebb2",
-      "30": "#fddf81",
-      "40": "#fdd44d",
-      "50": "#fdc926",
-      "60": "#ffc107",
-      "70": "#ffb300",
-      "80": "#fd9f00",
-      "90": "#ff9003",
-      "100": "#fe6d00"
+      "0": "rgba(255,253,249,1)",
+      "5": "rgba(255,248,234,1)",
+      "10": "rgba(255,242,205,1)",
+      "20": "rgba(254,235,178,1)",
+      "30": "rgba(253,223,129,1)",
+      "40": "rgba(253,212,77,1)",
+      "50": "rgba(253,201,38,1)",
+      "60": "rgba(255,193,7,1)",
+      "70": "rgba(255,179,0,1)",
+      "80": "rgba(253,159,0,1)",
+      "90": "rgba(255,144,3,1)",
+      "100": "rgba(254,109,0,1)"
     },
     success: {
-      "0": "#f5faf5",
-      "5": "#ecf7ed",
-      "10": "#cbffc9",
-      "20": "#afffa7",
-      "30": "#89eb80",
-      "40": "#60db57",
-      "50": "#40ce37",
-      "60": "#00c300",
-      "70": "#00b300",
-      "80": "#009f00",
-      "90": "#008e00",
-      "100": "#006f00"
+      "0": "rgba(245,250,245,1)",
+      "5": "rgba(236,247,237,1)",
+      "10": "rgba(203,255,201,1)",
+      "20": "rgba(175,255,167,1)",
+      "30": "rgba(137,235,128,1)",
+      "40": "rgba(96,219,87,1)",
+      "50": "rgba(64,206,55,1)",
+      "60": "rgba(0,195,0,1)",
+      "70": "rgba(0,179,0,1)",
+      "80": "rgba(0,159,0,1)",
+      "90": "rgba(0,142,0,1)",
+      "100": "rgba(0,111,0,1)"
     },
     info: {
-      "0": "#f9fdff",
-      "5": "#effaff",
-      "10": "#e0f5fe",
-      "20": "#b4e5fb",
-      "30": "#7fd1f7",
-      "40": "#4cc2f7",
-      "50": "#28b4f4",
-      "60": "#02a8f3",
-      "70": "#0399e3",
-      "80": "#0788d1",
-      "90": "#0174ba",
-      "100": "#02569a"
+      "0": "rgba(249,253,255,1)",
+      "5": "rgba(239,250,255,1)",
+      "10": "rgba(224,245,254,1)",
+      "20": "rgba(180,229,251,1)",
+      "30": "rgba(127,209,247,1)",
+      "40": "rgba(76,194,247,1)",
+      "50": "rgba(40,180,244,1)",
+      "60": "rgba(2,168,243,1)",
+      "70": "rgba(3,153,227,1)",
+      "80": "rgba(7,136,209,1)",
+      "90": "rgba(1,116,186,1)",
+      "100": "rgba(2,86,154,1)"
     },
     grey: {
-      "0": "#f7f7fa",
-      "5": "#ededf0",
-      "10": "#e1e1e3",
-      "20": "#d2d2d6",
-      "30": "#b4b4bb",
-      "40": "#9696a0",
-      "50": "#787885",
-      "60": "#5a5b6a",
-      "70": "#4a4b57",
-      "80": "#3a3a44",
-      "90": "#292a31",
-      "100": "#19191d"
+      "0": "rgba(247,247,250,1)",
+      "5": "rgba(237,237,240,1)",
+      "10": "rgba(225,225,227,1)",
+      "20": "rgba(210,210,214,1)",
+      "30": "rgba(180,180,187,1)",
+      "40": "rgba(150,150,160,1)",
+      "50": "rgba(120,120,133,1)",
+      "60": "rgba(90,91,106,1)",
+      "70": "rgba(74,75,87,1)",
+      "80": "rgba(58,58,68,1)",
+      "90": "rgba(41,42,49,1)",
+      "100": "rgba(25,25,29,1)"
     },
     secondary: {
-      "0": "#fffbf8",
-      "5": "#fff3e8",
-      "10": "#fee8d0",
-      "20": "#f8c99c",
-      "30": "#fab26e",
-      "40": "#fb9a3e",
-      "50": "#fc871a",
-      "60": "#ff7700",
-      "70": "#f96a02",
-      "80": "#f3580d",
-      "90": "#eb4610",
-      "100": "#e11d16"
+      "0": "rgba(255,251,248,1)",
+      "5": "rgba(255,243,232,1)",
+      "10": "rgba(254,232,208,1)",
+      "20": "rgba(248,201,156,1)",
+      "30": "rgba(250,178,110,1)",
+      "40": "rgba(251,154,62,1)",
+      "50": "rgba(252,135,26,1)",
+      "60": "rgba(255,119,0,1)",
+      "70": "rgba(249,106,2,1)",
+      "80": "rgba(243,88,13,1)",
+      "90": "rgba(235,70,16,1)",
+      "100": "rgba(225,29,22,1)"
     },
     primary: {
-      "0": "#ffffff",
-      "5": "#f3f6ff",
-      "10": "#e3e9ff",
-      "20": "#d5ddfa",
-      "30": "#c7d1f4",
-      "40": "#b9c5ef",
-      "50": "#9daaee",
-      "60": "#818eec",
-      "70": "#5865cd",
-      "80": "#3545be",
-      "90": "#222f95",
-      "100": "#0e1652"
+      "0": "rgba(255,255,255,1)",
+      "5": "rgba(243,246,255,1)",
+      "10": "rgba(227,233,255,1)",
+      "20": "rgba(213,221,250,1)",
+      "30": "rgba(199,209,244,1)",
+      "40": "rgba(185,197,239,1)",
+      "50": "rgba(157,170,238,1)",
+      "60": "rgba(129,142,236,1)",
+      "70": "rgba(88,101,205,1)",
+      "80": "rgba(53,69,190,1)",
+      "90": "rgba(34,47,149,1)",
+      "100": "rgba(14,22,82,1)"
     }
   },
   textColor: {
-    inactive: "#9696a0",
-    muted: "#787885",
-    default: "#4a4b57",
-    intense: "#292a31",
+    inactive: "rgba(150,150,160,1)",
+    muted: "rgba(120,120,133,1)",
+    default: "rgba(74,75,87,1)",
+    intense: "rgba(41,42,49,1)",
+    opposite: {
+      default: "white"
+    },
     primary: {
-      inactive: "#b9c5ef",
-      active: "#222f95",
-      muted: "#818eec",
-      default: "#5865cd",
-      intense: "#3545be"
+      inactive: "rgba(185,197,239,1)",
+      active: "rgba(34,47,149,1)",
+      muted: "rgba(129,142,236,1)",
+      default: "rgba(88,101,205,1)",
+      intense: "rgba(53,69,190,1)"
     },
     info: {
-      inactive: "#b4e5fb",
-      muted: "#4cc2f7",
-      default: "#0399e3",
-      intense: "#0174ba"
+      inactive: "rgba(180,229,251,1)",
+      muted: "rgba(76,194,247,1)",
+      default: "rgba(3,153,227,1)",
+      intense: "rgba(1,116,186,1)"
     },
     success: {
-      inactive: "#cbffc9",
-      muted: "#89eb80",
-      default: "#00b300",
-      intense: "#008e00"
+      inactive: "rgba(203,255,201,1)",
+      muted: "rgba(137,235,128,1)",
+      default: "rgba(0,179,0,1)",
+      intense: "rgba(0,142,0,1)"
     },
     warning: {
-      inactive: "#feebb2",
-      muted: "#fdd44d",
-      default: "#fd9f00",
-      intense: "#fe6d00"
+      inactive: "rgba(254,235,178,1)",
+      muted: "rgba(253,212,77,1)",
+      default: "rgba(253,159,0,1)",
+      intense: "rgba(254,109,0,1)"
     },
     danger: {
-      inactive: "#ffcbd2",
-      muted: "#ffadb3",
-      default: "#e62728",
-      intense: "#c50001"
+      inactive: "rgba(255,203,210,1)",
+      muted: "rgba(255,173,179,1)",
+      default: "rgba(230,39,40,1)",
+      intense: "rgba(197,0,1,1)"
     }
   },
   boxShadow: {
@@ -5312,7 +5316,7 @@ var tokens_default = {
     "8dp": "0px 8px 16px rgba(90, 91, 106, 0.16), 0px 4px 8px rgba(58, 58, 68, 0.16)",
     "4dp": "0px 4px 8px rgba(90, 91, 106, 0.20), 0px 2px 4px rgba(58, 58, 68, 0.20)",
     "2dp": "0px 2px 4px rgba(90, 91, 106, 0.24), 0px 1px 2px rgba(58, 58, 68, 0.24)",
-    whiteInset: "inset 0 0 0 3px rgba(255,255,255,1)"
+    bodyInset: "inset 0 0 0 3px var(--aquarium-background-color-body)"
   },
   elevations: {
     "24dp": "0px 24px 48px rgba(90, 91, 106, 0.08), 0px 12px 24px rgba(58, 58, 68, 0.08)",
@@ -5403,6 +5407,9 @@ var tokens_default = {
     ],
     body: [
       "Inter"
+    ],
+    monospace: [
+      "Source Code Pro"
     ]
   },
   typography: {
@@ -5506,6 +5513,26 @@ var tokens_default = {
       lineHeight: 1.26,
       textTransform: "none"
     },
+    code: {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "16px",
+      fontWeight: 400,
+      fontStyle: "normal",
+      lineHeight: 1.5,
+      textTransform: "none"
+    },
+    "code-strong": {
+      fontFamily: [
+        "Source Code Pro"
+      ],
+      fontSize: "16px",
+      fontWeight: 600,
+      fontStyle: "normal",
+      lineHeight: 1.5,
+      textTransform: "none"
+    },
     "caption-small": {
       fontFamily: [
         "Inter"
@@ -5990,9 +6017,10 @@ var Toast = (_a) => {
   ]);
   return /* @__PURE__ */ import_react7.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: (0, import_classnames3.default)(
-      tw("typography-small rounded grid grid-cols-[1fr_auto] items-center gap-x-6 gap-y-2 p-4 text-white", {
-        "bg-body-intense": variant === "default",
-        "bg-danger-intense": variant === "danger"
+      "Aquarium-Toast",
+      tw("typography-small rounded grid grid-cols-[1fr_auto] items-center gap-x-6 gap-y-2 p-4", {
+        "bg-body-intense text-opposite-default": variant === "default",
+        "bg-danger-intense text-white": variant === "danger"
       }),
       className
     )
@@ -7407,6 +7435,22 @@ Typography2.Caption = (_a) => {
   }));
 };
 Typography2.Caption.displayName = "Typography.Caption";
+Typography2.Code = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react22.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "code"
+  }));
+};
+Typography2.Code.displayName = "Typography.Code";
+Typography2.CodeStrong = (_a) => {
+  var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
+  return /* @__PURE__ */ import_react22.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
+    htmlTag,
+    variant: "code-strong"
+  }));
+};
+Typography2.CodeStrong.displayName = "Typography.CodeStrong";
 Typography2.LargeText = (_a) => {
   var _b = _a, { htmlTag = "div" } = _b, props = __objRest(_b, ["htmlTag"]);
   return /* @__PURE__ */ import_react22.default.createElement(Typography, __spreadProps(__spreadValues({}, props), {
@@ -7595,7 +7639,7 @@ var getTitleContent = ({
   }
   const titleContent = /* @__PURE__ */ import_react24.default.createElement(Typography2, {
     variant: dense ? "small-strong" : "default-strong",
-    color: "black"
+    color: "intense"
   }, title);
   if (clampTitle) {
     return /* @__PURE__ */ import_react24.default.createElement(LineClamp, {
@@ -7693,7 +7737,7 @@ var RadioButton = import_react27.default.forwardRef(
         tw(
           "inline-flex justify-center items-center self-center appearance-none",
           "w-5 h-5 p-[3px] rounded-full border border-default",
-          "outline-none focus:border-info-default checked:bg-primary-default checked:shadow-whiteInset",
+          "outline-none focus:border-info-default checked:bg-primary-default checked:shadow-bodyInset",
           {
             "cursor-pointer hover:border-intense checked:border-primary-default": !disabled,
             "cursor-not-allowed border-muted bg-muted checked:bg-primary-muted checked:border-transparent": disabled
@@ -8091,7 +8135,7 @@ var createBadge = (type, displayName) => {
         tw("inline-block text-center", {
           "rounded-full": type === "default" || type === "chip",
           "rounded": type === "tab",
-          "border border-current": kind === "outlined",
+          "text-default border border-current": kind === "outlined",
           "bg-current": kind === "filled" && type !== "chip",
           "bg-white": type === "chip" && !disabled,
           "bg-muted": type === "chip" && disabled,
@@ -8125,7 +8169,7 @@ var createBadge = (type, displayName) => {
 var NotificationBadge = (_a) => {
   var _b = _a, { children, top = "-2px", right = "-2px" } = _b, props = __objRest(_b, ["children", "top", "right"]);
   return /* @__PURE__ */ import_react31.default.createElement("div", __spreadProps(__spreadValues({}, props), {
-    className: classNames("Aquarium-Badge.Notification", tw("relative inline-flex"))
+    className: classNames("Aquarium-Badge.Notification", tw("relative inline-flex text-default"))
   }), children, /* @__PURE__ */ import_react31.default.createElement("span", {
     style: { top, right },
     className: tw("absolute rounded-full w-[6px] h-[6px] bg-danger-intense")
@@ -8200,6 +8244,7 @@ var Item2 = import_react32.default.forwardRef(
         "cursor-pointer hover:bg-muted": !props.disabled,
         "bg-muted": highlighted,
         "text-primary-intense": kind === "action",
+        "text-danger-default": kind === "danger",
         "text-inactive cursor-not-allowed": props.disabled
       })
     }, props), icon && showNotification && /* @__PURE__ */ import_react32.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
@@ -8413,7 +8458,7 @@ var Modal = (_a) => {
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react36.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-primary-intense opacity-60"), className)
+    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-default opacity-80"), className)
   }));
 };
 Modal.Dialog = import_react36.default.forwardRef(
@@ -8492,7 +8537,7 @@ Modal.TitleContainer = (_a) => {
 Modal.Body = (_a) => {
   var _b = _a, { children, className, noFooter = false, maxHeight, style } = _b, rest = __objRest(_b, ["children", "className", "noFooter", "maxHeight", "style"]);
   return /* @__PURE__ */ import_react36.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("px-7 grow overflow-y-auto", { "pb-6": noFooter }), className),
+    className: classNames(tw("px-7 grow overflow-y-auto text-default", { "pb-6": noFooter }), className),
     style: __spreadValues({ maxHeight }, style)
   }), children);
 };
@@ -8865,7 +8910,8 @@ var Input = import_react43.default.forwardRef((_a, ref) => {
       {
         "text-default": !props.disabled,
         "text-inactive": props.disabled,
-        "cursor-default": props.readOnly
+        "bg-body": !props.readOnly,
+        "cursor-default bg-transparent": props.readOnly
       }
     )
   }, props));
@@ -8876,7 +8922,7 @@ var Menu = import_react43.default.forwardRef(
     return /* @__PURE__ */ import_react43.default.createElement("ul", __spreadValues({
       ref,
       style: { maxHeight },
-      className
+      className: classNames(className, tw("text-default"))
     }, props), children);
   }
 );