@aivenio/aquarium 6.0.0-rc2 → 6.0.0-rc4

package/dist/_variables.scss

@@ -13,12 +13,12 @@ $border-width-8: 8px;
 $border-width-default: 1px;
 $background-color-icon-button-hover: rgba(25,25,29,.05);
 $chart-colors-default: rgba(180, 180, 187, 1);
-$chart-colors-primary-categorical-0: rgba(88, 101, 205, 1);
-$chart-colors-primary-categorical-1: rgba(255, 53, 84, 1);
-$chart-colors-primary-categorical-2: rgba(40, 180, 244, 1);
-$chart-colors-primary-categorical-3: rgba(249, 106, 2, 1);
-$chart-colors-primary-categorical-4: rgba(0, 179, 0, 1);
-$chart-colors-primary-categorical-5: rgba(255, 193, 7, 1);
+$chart-colors-primary-categorical-0: rgba(27, 178, 176, 1);
+$chart-colors-primary-categorical-1: rgba(194, 36, 213, 1);
+$chart-colors-primary-categorical-2: rgba(33, 209, 107, 1);
+$chart-colors-primary-categorical-3: rgba(255, 194, 26, 1);
+$chart-colors-primary-categorical-4: rgba(111, 100, 255, 1);
+$chart-colors-primary-categorical-5: rgba(248, 78, 59, 1);
 $chart-colors-secondary-categorical-0: rgba(53, 69, 190, 1);
 $chart-colors-secondary-categorical-1: rgba(253, 159, 0, 1);
 $chart-colors-secondary-categorical-2: rgba(255, 53, 84, 1);
@@ -61,6 +61,15 @@ $chart-colors-secondary-categorical-38: rgba(137, 235, 128, 1);
 $chart-colors-secondary-categorical-39: rgba(250, 178, 110, 1);
 $chart-colors-secondary-categorical-40: rgba(180, 229, 251, 1);
 $chart-colors-secondary-categorical-41: rgba(255, 173, 179, 1);
+$chart-colors-sequential-100: rgba(117, 230, 228, 1);
+$chart-colors-sequential-200: rgba(46, 208, 205, 1);
+$chart-colors-sequential-300: rgba(0, 150, 147, 1);
+$chart-colors-sequential-400: rgba(0, 98, 96, 1);
+$chart-colors-sequential-500: rgba(0, 74, 72, 1);
+$code-keyword: rgba(202, 33, 101, 1); // Syntax: keyword
+$code-string: rgba(0, 127, 115, 1); // Syntax: string
+$code-function: rgba(9, 128, 193, 1); // Syntax: function
+$code-number: rgba(180, 83, 9, 1); // Syntax: number
 $colors-white: rgba(255,255,255,1);
 $colors-black: rgba(0,0,0,1);
 $colors-transparent: transparent;
@@ -206,6 +215,7 @@ $border-color-info-default: $colors-info-20;
 $border-color-info-intense: $colors-info-50;
 $border-color-success-muted: $colors-success-10;
 $border-color-success-default: $colors-success-30;
+$border-color-success-graphic: $colors-success-40;
 $border-color-success-intense: $colors-success-70;
 $border-color-warning-default: $colors-warning-20;
 $border-color-warning-muted: $colors-warning-20;
@@ -213,6 +223,7 @@ $border-color-warning-intense: $colors-warning-60;
 $border-color-danger-muted: $colors-error-10;
 $border-color-danger-default: $colors-error-20;
 $border-color-danger-intense: $colors-error-50;
+$code-background: $colors-grey-0; // Code block background (Gray 0)
 $text-color-inactive: $colors-grey-30;
 $text-color-muted: $colors-grey-50;
 $text-color-default: $colors-grey-70;
@@ -262,6 +273,8 @@ $background-color-warning-muted: $background-color-warning-default;
 $background-color-warning-intense: $background-color-warning-graphic;
 $background-color-danger-muted: $background-color-danger-default;
 $background-color-danger-intense: $background-color-danger-graphic;
+$code-text: $text-color-default; // Code block text (Content/Default)
+$code-comment: $text-color-muted; // Syntax: comment (Content/Muted)
 $text-color-intense: $text-color-default;
 $text-color-primary-muted: $text-color-primary-graphic;
 $text-color-primary-intense: $text-color-primary-default;

package/dist/atoms.cjs

@@ -678,11 +678,13 @@ var buttonStateClasses = (0, import_tailwind_variants2.tv)({
   variants: {
     kind: {
       primary: [
+        "min-w-[52px]",
         "active:text-opposite-default active:bg-action-primary-button-active",
         "hover:bg-action-primary-button-hover",
         "disabled:bg-action-primary-button-disabled"
       ],
       secondary: [
+        "min-w-[52px]",
         "active:bg-primary-active active:text-primary-active active:text-primary-active active:before:border-action-secondary-button-active",
         "hover:bg-primary-active hover:text-primary-graphic hover:before:border-action-secondary-button-hover",
         "before:disabled:border-default disabled:bg-transparent disabled:text-inactive"
@@ -695,7 +697,7 @@ var buttonStateClasses = (0, import_tailwind_variants2.tv)({
       true: "cursor-not-allowed"
     },
     loading: {
-      true: "cursor-wait py-3 w-[44px]"
+      true: "cursor-wait py-3"
     }
   }
 });
@@ -839,7 +841,7 @@ var InlineIcon2 = import_react6.default.forwardRef(({ color, className, ...rest
 
 // src/atoms/Typography/Typography.tsx
 var import_react141 = __toESM(require("react"));
-var import_clsx43 = require("clsx");
+var import_clsx42 = require("clsx");
 
 // src/tokens/tokens.json
 var tokens_default = {
@@ -950,6 +952,7 @@ var tokens_default = {
     success: {
       muted: "rgba(178,255,210,1)",
       default: "rgba(95,250,160,1)",
+      graphic: "rgba(61,235,134,1)",
       intense: "rgba(9,128,63,1)"
     },
     warning: {
@@ -966,12 +969,12 @@ var tokens_default = {
   chartColors: {
     default: "rgba(180, 180, 187, 1)",
     primaryCategorical: {
-      "0": "rgba(88, 101, 205, 1)",
-      "1": "rgba(255, 53, 84, 1)",
-      "2": "rgba(40, 180, 244, 1)",
-      "3": "rgba(249, 106, 2, 1)",
-      "4": "rgba(0, 179, 0, 1)",
-      "5": "rgba(255, 193, 7, 1)"
+      "0": "rgba(27, 178, 176, 1)",
+      "1": "rgba(194, 36, 213, 1)",
+      "2": "rgba(33, 209, 107, 1)",
+      "3": "rgba(255, 194, 26, 1)",
+      "4": "rgba(111, 100, 255, 1)",
+      "5": "rgba(248, 78, 59, 1)"
     },
     secondaryCategorical: {
       "0": "rgba(53, 69, 190, 1)",
@@ -1016,8 +1019,24 @@ var tokens_default = {
       "39": "rgba(250, 178, 110, 1)",
       "40": "rgba(180, 229, 251, 1)",
       "41": "rgba(255, 173, 179, 1)"
+    },
+    sequential: {
+      "100": "rgba(117, 230, 228, 1)",
+      "200": "rgba(46, 208, 205, 1)",
+      "300": "rgba(0, 150, 147, 1)",
+      "400": "rgba(0, 98, 96, 1)",
+      "500": "rgba(0, 74, 72, 1)"
     }
   },
+  code: {
+    background: "rgba(250,250,250,1)",
+    text: "rgba(45,46,48,1)",
+    keyword: "rgba(202, 33, 101, 1)",
+    string: "rgba(0, 127, 115, 1)",
+    function: "rgba(9, 128, 193, 1)",
+    number: "rgba(180, 83, 9, 1)",
+    comment: "rgba(104,105,107,1)"
+  },
   colors: {
     white: "rgba(255,255,255,1)",
     black: "rgba(0,0,0,1)",
@@ -2041,6 +2060,7 @@ var tailwind_theme_default = {
       "100": "var(--aquarium-colors-success-100)",
       muted: "var(--aquarium-border-color-success-muted)",
       default: "var(--aquarium-border-color-success-default)",
+      graphic: "var(--aquarium-border-color-success-graphic)",
       intense: "var(--aquarium-border-color-success-intense)"
     },
     info: {
@@ -3156,11 +3176,10 @@ var createBadge = (type, displayName) => {
       {
         ...rest,
         className: (0, import_clsx9.clsx)(
-          "inline-flex items-center justify-center text-center typography-micro leading-none rounded-full",
+          "inline-flex items-center justify-center text-center typography-micro leading-[0] rounded-full",
           {
             "text-default border border-intense": kind === "outlined",
-            "bg-current": kind === "filled" && type !== "chip",
-            "bg-white": type === "chip" && !disabled,
+            "bg-current": kind === "filled",
             "bg-muted": type === "chip" && disabled,
             "h-5 min-w-5 px-2": !dense,
             "h-[14px] min-w-[14px]": dense,
@@ -3186,8 +3205,8 @@ var createBadge = (type, displayName) => {
   Component.Skeleton.displayName = `${displayName}.Skeleton`;
   return Component;
 };
-var NotificationBadge = ({ children, top = "-2px", right = "-2px", ...props }) => {
-  return /* @__PURE__ */ import_react26.default.createElement("div", { ...props, className: "Aquarium-Badge.Notification relative inline-flex text-default" }, children, /* @__PURE__ */ import_react26.default.createElement("span", { style: { top, right }, className: "absolute rounded-full w-[6px] h-[6px] bg-danger-graphic" }));
+var NotificationBadge = ({ children, top = "-2px", right = "-2px", className, ...props }) => {
+  return /* @__PURE__ */ import_react26.default.createElement("div", { ...props, className: (0, import_clsx9.clsx)("Aquarium-Badge.Notification relative inline-flex", className ?? "text-default") }, children, /* @__PURE__ */ import_react26.default.createElement("span", { style: { top, right }, className: "absolute rounded-full w-[6px] h-[6px] bg-danger-graphic" }));
 };
 var DotBadge = ({ dense = false, ...props }) => {
   return /* @__PURE__ */ import_react26.default.createElement(
@@ -3359,11 +3378,11 @@ var import_lodash_es8 = require("lodash-es");
 var import_react30 = __toESM(require("react"));
 var import_tailwind_variants8 = require("tailwind-variants");
 var chipContainerClasses = (0, import_tailwind_variants8.tv)({
-  base: "inline-flex items-center rounded transition whitespace-nowrap",
+  base: "inline-flex items-center rounded-full transition whitespace-nowrap",
   variants: {
     dense: {
-      true: "typography-small py-1 px-2 gap-x-2",
-      false: "typography-default py-2 px-3 gap-x-3 leading-tight"
+      true: "typography-small py-1 px-3 gap-x-2",
+      false: "typography-default py-2 px-3 gap-x-2 leading-tight"
     }
   }
 });
@@ -3379,16 +3398,18 @@ var import_react31 = require("react");
 var isComponentType = (c, type) => (0, import_react31.isValidElement)(c) && c.type === type;
 
 // src/molecules/Chip/Chip.tsx
-var getStatusClassNames = (status = "neutral") => {
+var getStatusClassNames = (status = "neutral", inverse = false) => {
   switch (status) {
     case "info":
-      return "text-info-intense bg-status-info";
+      return inverse ? "text-opposite-default bg-info-inverse" : "text-info-default bg-info-default";
     case "warning":
-      return "text-warning-intense bg-status-warning";
+      return inverse ? "text-opposite-default bg-warning-inverse" : "text-warning-default bg-warning-default";
     case "danger":
-      return "text-danger-intense bg-status-danger";
+      return inverse ? "text-opposite-default bg-danger-inverse" : "text-danger-default bg-danger-default";
     case "success":
-      return "text-success-intense bg-status-success";
+      return inverse ? "text-opposite-default bg-success-inverse" : "text-success-default bg-success-default";
+    case "primary":
+      return inverse ? "text-opposite-default bg-primary-inverse" : "text-primary-default bg-primary-default";
     case "neutral":
     default:
       return "text-default bg-medium";
@@ -3402,36 +3423,48 @@ var Chip2 = ({
   badge,
   onClose,
   ...rest
-}) => /* @__PURE__ */ import_react32.default.createElement(
-  Chip.Container,
-  {
-    dense,
-    className: (0, import_clsx11.clsx)("Aquarium-Chip", {
-      "bg-muted text-default": !locked,
-      "bg-muted text-inactive": locked
-    }),
-    ...rest
-  },
-  icon && /* @__PURE__ */ import_react32.default.createElement(InlineIcon2, { icon }),
-  text,
-  (0, import_lodash_es8.isNumber)(badge) && /* @__PURE__ */ import_react32.default.createElement(ChipBadge, { disabled: locked, dense, value: badge, textClassname: "text-muted" }),
-  !locked && onClose && /* @__PURE__ */ import_react32.default.createElement(
-    InlineIcon2,
+}) => {
+  return /* @__PURE__ */ import_react32.default.createElement(
+    Chip.Container,
     {
-      role: "button",
-      "aria-hidden": false,
-      icon: cross_default,
-      className: (0, import_clsx11.clsx)({ "cursor-pointer": true }),
-      onClick: () => onClose()
-    }
-  ),
-  locked && /* @__PURE__ */ import_react32.default.createElement(InlineIcon2, { icon: lock_default })
-);
+      dense,
+      className: (0, import_clsx11.clsx)("Aquarium-Chip", {
+        "bg-default text-default": !locked,
+        "bg-default text-inactive": locked
+      }),
+      ...rest
+    },
+    icon && /* @__PURE__ */ import_react32.default.createElement(InlineIcon2, { icon }),
+    text,
+    (0, import_lodash_es8.isNumber)(badge) && /* @__PURE__ */ import_react32.default.createElement("div", { className: "flex items-center", style: { color: "var(--aquarium-background-color-body)" } }, /* @__PURE__ */ import_react32.default.createElement(
+      ChipBadge,
+      {
+        disabled: locked,
+        dense,
+        value: badge,
+        textClassname: locked ? "text-muted" : "text-default"
+      }
+    )),
+    !locked && onClose && /* @__PURE__ */ import_react32.default.createElement(
+      InlineIcon2,
+      {
+        role: "button",
+        "aria-hidden": false,
+        icon: cross_default,
+        className: (0, import_clsx11.clsx)({ "cursor-pointer": true }),
+        onClick: () => onClose()
+      }
+    ),
+    locked && /* @__PURE__ */ import_react32.default.createElement(InlineIcon2, { icon: lock_default })
+  );
+};
 var ChipSkeleton = ({ dense = false, width = dense ? 34 : 56 }) => /* @__PURE__ */ import_react32.default.createElement(Skeleton, { width, height: dense ? 20 : 28 });
 Chip2.Skeleton = ChipSkeleton;
 Chip2.Skeleton.displayName = "Chip.Skeleton";
 var StatusChip = import_react32.default.forwardRef(
   ({ icon, text, dense = false, status, badge, ...rest }, ref) => {
+    const statusColor = status === "neutral" ? `var(--aquarium-background-color-intense)` : `var(--aquarium-background-color-${status}-intense)`;
+    const badgeColor = status === "neutral" ? "var(--aquarium-background-color-body)" : `var(--aquarium-background-color-${status}-inverse)`;
     return /* @__PURE__ */ import_react32.default.createElement(
       Chip.Container,
       {
@@ -3442,13 +3475,34 @@ var StatusChip = import_react32.default.forwardRef(
         ...rest,
         className: (0, import_clsx11.clsx)("Aquarium-StatusChip", getStatusClassNames(status))
       },
-      badge === true && /* @__PURE__ */ import_react32.default.createElement(Badge.Dot, { dense }),
+      badge === true && /* @__PURE__ */ import_react32.default.createElement("div", { style: { color: statusColor }, className: "inline-flex" }, /* @__PURE__ */ import_react32.default.createElement(Badge.Dot, { dense })),
       icon && /* @__PURE__ */ import_react32.default.createElement(InlineIcon2, { icon }),
       text,
-      typeof badge === "number" && /* @__PURE__ */ import_react32.default.createElement(Badge, { dense, value: badge })
+      typeof badge === "number" && /* @__PURE__ */ import_react32.default.createElement("div", { style: { color: badgeColor }, className: "flex items-center" }, /* @__PURE__ */ import_react32.default.createElement(
+        ChipBadge,
+        {
+          dense,
+          value: badge,
+          textClassname: status === "neutral" ? "text-default" : "text-opposite-default"
+        }
+      ))
     );
   }
 );
+var InverseChip = ({ text, dense = false, status, ...rest }) => {
+  return /* @__PURE__ */ import_react32.default.createElement(
+    "span",
+    {
+      ...rest,
+      className: (0, import_clsx11.clsx)("Aquarium-InverseChip rounded-full", getStatusClassNames(status, true), {
+        "py-2 px-3 typography-default": !dense,
+        "py-1 px-3 typography-small": dense
+      })
+    },
+    text
+  );
+};
+Chip2.Inverse = InverseChip;
 var ChipContainer = ({ dense, children }) => /* @__PURE__ */ import_react32.default.createElement(
   "div",
   {
@@ -7386,7 +7440,7 @@ var cellStyles = (0, import_tailwind_variants20.tv)({
   variants: {
     isSelected: {
       false: "text-default hover:bg-medium pressed:bg-intense",
-      true: "bg-primary-graphic invalid:bg-danger-default text-white"
+      true: "bg-primary-inverse invalid:bg-danger-default text-white"
     },
     isUnavailable: {
       true: "text-inactive"
@@ -10069,8 +10123,8 @@ var import_tailwind_variants22 = require("tailwind-variants");
 var cellContainer = (0, import_tailwind_variants22.tv)({
   base: [
     "group w-8 h-8 typography-default outline outline-0 cursor-default",
-    "outside-month:hidden selected:bg-primary-default",
-    "invalid:selected:bg-danger-default",
+    "outside-month:hidden selected:bg-primary-inverse",
+    "invalid:selected:bg-danger-inverse",
     "selection-start:rounded-s-md selection-end:rounded-e-md"
   ]
 });
@@ -10082,12 +10136,12 @@ var cell = (0, import_tailwind_variants22.tv)({
       none: "group-hover:bg-medium group-pressed:bg-intense",
       middle: [
         "text-white",
-        "group-hover:bg-primary-graphic",
-        "group-invalid:group-hover:bg-danger-default",
+        "group-hover:bg-primary-inverse",
+        "group-invalid:group-hover:bg-danger-inverse",
         "group-pressed:bg-primary-inverse",
-        "group-invalid:group-pressed:bg-danger-graphic"
+        "group-invalid:group-pressed:bg-danger-inverse"
       ],
-      cap: "text-white bg-primary-graphic group-invalid:bg-danger-default"
+      cap: "text-white bg-primary-inverse group-invalid:bg-danger-inverse"
     },
     isUnavailable: {
       true: "text-inactive"
@@ -10265,8 +10319,8 @@ var modalStyles = (0, import_tailwind_variants23.tv)({
   variants: {
     kind: {
       dialog: {
-        overlay: "py-7 justify-center flex items-center",
-        dialog: "relative w-full rounded-lg mx-7"
+        overlay: "justify-center flex items-center",
+        dialog: "relative"
       },
       drawer: {
         overlay: "overflow-x-hidden",
@@ -10285,6 +10339,10 @@ var modalStyles = (0, import_tailwind_variants23.tv)({
         bodyContent: "pt-6"
       }
     },
+    isResponsive: {
+      true: "",
+      false: ""
+    },
     noFooter: {
       true: {
         bodyContent: "pb-4"
@@ -10299,26 +10357,48 @@ var modalStyles = (0, import_tailwind_variants23.tv)({
       }
     }
   },
+  defaultVariants: {
+    isResponsive: true
+  },
   compoundVariants: [
+    {
+      kind: "dialog",
+      size: ["sm", "md", "full"],
+      isResponsive: true,
+      class: {
+        overlay: "py-0 sm:py-7",
+        dialog: "w-dvw h-dvh mx-0 rounded-none sm:h-auto sm:w-full sm:rounded sm:mx-7"
+      }
+    },
+    {
+      kind: "dialog",
+      size: ["sm", "md", "full"],
+      isResponsive: false,
+      class: {
+        overlay: "py-0",
+        dialog: "h-auto w-full rounded mx-7"
+      }
+    },
     {
       kind: "dialog",
       size: "sm",
       class: {
-        dialog: "max-w-[600px]"
+        dialog: "sm:max-w-[600px]"
       }
     },
     {
       kind: "dialog",
       size: "md",
       class: {
-        dialog: "max-w-[940px]"
+        dialog: "sm:max-w-[940px]"
       }
     },
     {
       kind: "dialog",
       size: "full",
       class: {
-        dialog: "min-h-full"
+        // Max width is max screen content width (1536px) + left and right paddings (32px each)
+        dialog: "min-h-full sm:max-w-[1600px]"
       }
     },
     {
@@ -10359,8 +10439,8 @@ Modal.BackDrop = ({ className, ...rest }) => {
   return /* @__PURE__ */ import_react92.default.createElement("div", { ...rest, className: backdrop({ className }) });
 };
 Modal.Dialog = import_react92.default.forwardRef(
-  ({ kind = "dialog", children, className, size = "md", ...rest }, ref) => {
-    const { dialog } = modalStyles({ kind, size });
+  ({ kind = "dialog", children, className, size = "md", isResponsive = true, ...rest }, ref) => {
+    const { dialog } = modalStyles({ kind, size, isResponsive });
     return /* @__PURE__ */ import_react92.default.createElement("div", { ref, "aria-modal": "true", ...rest, className: dialog({ className }) }, children);
   }
 );
@@ -10454,9 +10534,9 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       const _id = id ?? (0, import_lodash_es33.kebabCase)(title);
       let statusIcon = void 0;
       if (status === "warning") {
-        statusIcon = /* @__PURE__ */ import_react95.default.createElement(InlineIcon2, { icon: warningSign_default, color: selected ? void 0 : "warning-default" });
+        statusIcon = /* @__PURE__ */ import_react95.default.createElement(InlineIcon2, { icon: warningSign_default, color: "warning-graphic" });
       } else if (status === "error") {
-        statusIcon = /* @__PURE__ */ import_react95.default.createElement(InlineIcon2, { icon: warningSign_default, color: selected ? void 0 : "danger-default" });
+        statusIcon = /* @__PURE__ */ import_react95.default.createElement(InlineIcon2, { icon: warningSign_default, color: "danger-graphic" });
       }
       const tab = /* @__PURE__ */ import_react95.default.createElement(
         Component,
@@ -10465,12 +10545,13 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
           id: `${_id}-tab`,
           onClick: () => !disabled && onSelected(value ?? index),
           className: (0, import_clsx28.clsx)(className, "px-5 py-3 z-10 no-underline appearance-none outline-none h-full rounded-t", {
-            "cursor-default": disabled,
-            "text-default focus:text-primary-intense": !selected,
+            "text-inactive cursor-default": disabled,
+            "text-default": !selected && !disabled,
+            /* bg on button; text color lives on Typography (explicit text-* beats inherited hover) */
             "hover:bg-muted": !selected && !disabled,
-            "border-b-2": !defaultUnderlineHidden || selected,
-            "border-default": !selected,
-            "border-primary-default": selected
+            "group": !selected && !disabled,
+            "border-b border-muted": !selected && !defaultUnderlineHidden,
+            "border-b-2 border-intense": selected && !defaultUnderlineHidden
           }),
           type: "button",
           role: "tab",
@@ -10484,11 +10565,22 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
           {
             htmlTag: "div",
             variant: "default-strong",
-            color: selected ? "primary-default" : disabled ? "default" : "current",
-            className: "inline-flex items-center gap-3"
+            color: disabled ? "inactive" : selected ? "default" : "muted",
+            className: (0, import_clsx28.clsx)(
+              "inline-flex items-center gap-3",
+              !selected && !disabled && "group-hover:text-intense group-focus-visible:text-intense"
+            )
           },
-          showNotification ? /* @__PURE__ */ import_react95.default.createElement(Badge.Notification, { right: "-4px", top: "3px" }, /* @__PURE__ */ import_react95.default.createElement("span", { className: "whitespace-nowrap" }, title)) : /* @__PURE__ */ import_react95.default.createElement("span", { className: "whitespace-nowrap" }, title),
-          (0, import_lodash_es33.isNumber)(badge) && /* @__PURE__ */ import_react95.default.createElement(Typography2, { htmlTag: "span", variant: "default", color: "primary-intense", className: "leading-none" }, /* @__PURE__ */ import_react95.default.createElement(Badge, { kind: "filled", value: badge })),
+          showNotification ? /* @__PURE__ */ import_react95.default.createElement(
+            Badge.Notification,
+            {
+              right: "-4px",
+              top: "3px",
+              className: selected && !disabled ? void 0 : "[color:inherit]"
+            },
+            /* @__PURE__ */ import_react95.default.createElement("span", { className: "whitespace-nowrap" }, title)
+          ) : /* @__PURE__ */ import_react95.default.createElement("span", { className: "whitespace-nowrap" }, title),
+          (0, import_lodash_es33.isNumber)(badge) && /* @__PURE__ */ import_react95.default.createElement(Typography2, { htmlTag: "span", variant: "default", color: "intense", className: "leading-none" }, /* @__PURE__ */ import_react95.default.createElement(Badge, { kind: !selected ? "outlined" : "filled", value: badge })),
           statusIcon
         )
       );
@@ -10620,7 +10712,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
         throw new Error("<Tabs> can only have <Tabs.Tab> components as children");
       }
     });
-    return /* @__PURE__ */ import_react95.default.createElement("div", { ref: parentRef, className: (0, import_clsx28.clsx)("Aquarium-Tabs h-full", className) }, /* @__PURE__ */ import_react95.default.createElement("div", { className: "relative flex items-center border-b-2 border-default" }, /* @__PURE__ */ import_react95.default.createElement("div", { ref: containerRef, className: "overflow-y-auto scrollbar-hide mb-[-2px] h-auto" }, /* @__PURE__ */ import_react95.default.createElement(
+    return /* @__PURE__ */ import_react95.default.createElement("div", { ref: parentRef, className: (0, import_clsx28.clsx)("Aquarium-Tabs h-full", className) }, /* @__PURE__ */ import_react95.default.createElement("div", { className: "relative flex items-center border-b border-muted" }, /* @__PURE__ */ import_react95.default.createElement("div", { ref: containerRef, className: "overflow-y-auto scrollbar-hide mb-[-1px] h-auto" }, /* @__PURE__ */ import_react95.default.createElement(
       "div",
       {
         ref: tabsRef,
@@ -11581,7 +11673,7 @@ var navigationClasses = (0, import_tailwind_variants26.tv)({
     nav: "bg-body h-full border-r border-muted",
     list: "flex flex-col h-full",
     header: "px-6 py-5",
-    headerTitle: "uppercase text-muted",
+    headerTitle: "uppercase text-muted typography-small",
     headerSubtitle: "text-intense",
     footer: "px-6 py-5 mt-auto",
     sectionContainer: "py-5",
@@ -11589,9 +11681,9 @@ var navigationClasses = (0, import_tailwind_variants26.tv)({
     sectionList: "flex flex-col",
     divider: "border-t border-muted",
     itemContainer: "",
-    itemAnchor: "py-3 px-6 hover:bg-medium cursor-pointer flex gap-4 items-center typography-small focusable",
+    itemAnchor: "py-3 px-6 hover:bg-medium cursor-pointer flex gap-4 items-center typography-default focusable",
     submenuContainer: "",
-    submenuAnchor: "py-3 pr-6 pl-3 hover:bg-medium cursor-pointer typography-small focusable flex items-center w-full",
+    submenuAnchor: "py-3 pr-6 pl-3 hover:bg-medium cursor-pointer typography-default focusable flex items-center w-full",
     submenuList: "flex flex-col",
     submenuItem: "pl-[56px]"
   },
@@ -11984,7 +12076,7 @@ var import_react124 = __toESM(require("react"));
 var import_button4 = require("@react-aria/button");
 var import_utils37 = require("@react-aria/utils");
 var import_web5 = require("@react-spring/web");
-var import_clsx39 = require("clsx");
+var import_clsx38 = require("clsx");
 var import_lodash_es43 = require("lodash-es");
 
 // src/molecules/Switch/Switch.tsx
@@ -12068,7 +12160,6 @@ Switch2.Skeleton.displayName = "Switch.Skeleton ";
 
 // src/molecules/TagLabel/TagLabel.tsx
 var import_react122 = __toESM(require("react"));
-var import_clsx38 = require("clsx");
 
 // src/atoms/Section/Section.tsx
 var import_react123 = __toESM(require("react"));
@@ -12140,7 +12231,7 @@ var SectionTabs = createTabsComponent(ModalTab, TabItem, "SectionTabs", (childre
 
 // src/molecules/SegmentedControl/SegmentedControl.tsx
 var import_react125 = __toESM(require("react"));
-var import_clsx40 = require("clsx");
+var import_clsx39 = require("clsx");
 
 // src/molecules/Stepper/Stepper.tsx
 var import_react127 = __toESM(require("react"));
@@ -12204,7 +12295,7 @@ var stepStyles = (0, import_tailwind_variants31.tv)({
       slots: ["indicator"],
       dense: false,
       state: "completed",
-      class: "border-2 text-white bg-success-graphic border-success-intense"
+      class: "border-2 text-default bg-success-graphic border-success-graphic"
     },
     // Dense variants
     {
@@ -12320,7 +12411,7 @@ SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 // src/molecules/Textarea/Textarea.tsx
 var import_react129 = __toESM(require("react"));
 var import_utils42 = require("@react-aria/utils");
-var import_clsx41 = require("clsx");
+var import_clsx40 = require("clsx");
 var import_lodash_es44 = require("lodash-es");
 var TextareaBase = import_react129.default.forwardRef(
   ({ readOnly = false, valid = true, ...props }, ref) => /* @__PURE__ */ import_react129.default.createElement(
@@ -12329,7 +12420,7 @@ var TextareaBase = import_react129.default.forwardRef(
       ref,
       ...props,
       readOnly,
-      className: (0, import_clsx41.clsx)("Aquarium-TextareaBase", getCommonInputStyles({ readOnly, valid }), props.className)
+      className: (0, import_clsx40.clsx)("Aquarium-TextareaBase", getCommonInputStyles({ readOnly, valid }), props.className)
     }
   )
 );
@@ -12382,13 +12473,13 @@ var import_react131 = __toESM(require("react"));
 
 // src/atoms/Timeline/Timeline.tsx
 var import_react130 = __toESM(require("react"));
-var import_clsx42 = require("clsx");
-var Timeline = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx42.clsx)("grid grid-cols-[16px_1fr] gap-x-4", className) });
-var Content2 = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx42.clsx)("pb-6", className) });
-var Separator = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx42.clsx)("flex items-center justify-center h-5 w-5", className) });
-var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx42.clsx)("flex justify-center py-1", className) });
-var Line = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx42.clsx)("w-1 bg-medium h-full justify-self-center", className) });
-var Dot = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx42.clsx)("bg-intense h-[6px] w-[6px] rounded", className) });
+var import_clsx41 = require("clsx");
+var Timeline = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("grid grid-cols-[16px_1fr] gap-x-4", className) });
+var Content2 = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("pb-6", className) });
+var Separator = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("flex items-center justify-center h-5 w-5", className) });
+var LineContainer = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("flex justify-center py-1", className) });
+var Line = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("w-1 bg-medium h-full justify-self-center", className) });
+var Dot = ({ className, ...rest }) => /* @__PURE__ */ import_react130.default.createElement("div", { ...rest, className: (0, import_clsx41.clsx)("bg-intense h-[6px] w-[6px] rounded", className) });
 Separator.Dot = Dot;
 LineContainer.Line = Line;
 Timeline.Separator = Separator;
@@ -12516,7 +12607,7 @@ var Typography = ({
   return /* @__PURE__ */ import_react141.default.createElement(
     HtmlElement,
     {
-      className: (0, import_clsx43.clsx)(
+      className: (0, import_clsx42.clsx)(
         typographies[variant],
         // eslint-disable-next-line better-tailwindcss/no-unregistered-classes
         `text-${resolvedColorName}`,