@aivenio/aquarium 1.68.0-rc1 → 1.69.0

package/dist/_variables.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Fri, 31 May 2024 11:24:35 GMT
+// Generated on Fri, 14 Jun 2024 10:42:25 GMT
 
 $border-radius-none: 0px !default;
 $border-radius-sm: 0.125rem !default;

package/dist/atoms.cjs

@@ -4108,7 +4108,7 @@ var require_warningSign = __commonJS({
   "src/icons/warningSign.js"(exports) {
     "use strict";
     var data = {
-      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 8.25v3.667m0 3.666h.009M9.731 3.567 2.19 16.59c-.418.723-.627 1.084-.596 1.38a.917.917 0 00.372.646c.241.176.659.176 1.493.176h15.08c.834 0 1.251 0 1.492-.176a.917.917 0 00.373-.646c.03-.296-.178-.657-.596-1.38l-7.54-13.023c-.417-.72-.625-1.08-.897-1.2a.917.917 0 00-.745 0c-.271.12-.48.48-.896 1.2Z"/>',
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 8.25v3.667M11 16l.009-1.5M9.73 3.567 2.191 16.59c-.418.723-.627 1.084-.596 1.38a.917.917 0 00.372.646c.241.176.659.176 1.493.176h15.08c.834 0 1.251 0 1.492-.176a.917.917 0 00.373-.646c.03-.296-.178-.657-.596-1.38l-7.54-13.023c-.417-.72-.625-1.08-.897-1.2a.917.917 0 00-.745 0c-.272.12-.48.48-.897 1.2Z"/>',
       "left": 0,
       "top": 0,
       "width": 22,
@@ -5750,8 +5750,8 @@ var Box = (_a) => {
   const styles = useStyle({
     padding,
     display,
-    color,
-    borderColor: borderColor ? tailwind_theme_default.backgroundColor[borderColor] : "",
+    color: color ? tailwind_theme_default.textColor[color] : "",
+    borderColor: borderColor ? tailwind_theme_default.borderColor[borderColor] : "",
     borderRadius,
     borderWidth,
     justifyContent,
@@ -5793,11 +5793,7 @@ var FlexBox = (props) => /* @__PURE__ */ import_react4.default.createElement(Box
 }, props));
 FlexBox.displayName = "Box.Flex";
 Box.Flex = FlexBox;
-var BorderBox = createSimpleComponent(
-  Box,
-  { className: "rounded border", borderColor: "grey-10" },
-  "BorderBox"
-);
+var BorderBox = createSimpleComponent(Box, { className: "rounded border", borderColor: "muted" }, "BorderBox");
 
 // src/molecules/Transition/Transition.tsx
 var import_react6 = __toESM(require("react"));
@@ -6419,6 +6415,7 @@ function useTooltipTriggerState(props = {}) {
     }
   };
   (0, import_react16.useEffect)(() => {
+    isUnmounted.current = false;
     return () => {
       isUnmounted.current = true;
       if (closeTimeout.current) {
@@ -6595,7 +6592,7 @@ var COLOR_CLASSNAMES = {
   "ghost": ghostButtonStyle,
   "text": linkStyle,
   "secondary-ghost": tw(
-    "text-grey-60 active:text-muted focus-visible:text-intense hover:text-intense disabled:text-inactive"
+    "text-default active:text-muted focus-visible:text-intense hover:text-intense disabled:text-inactive"
   )
 };
 var LoadingSpinner = ({ size = "20px" }) => {
@@ -6905,7 +6902,7 @@ Alert.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react20.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "default-strong",
-    color: "grey-80",
+    color: "intense",
     className: classNames(tw("col-start-2"), className)
   }), children);
 };
@@ -6913,7 +6910,7 @@ Alert.Description = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react20.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "small",
-    color: "grey-60",
+    color: "default",
     className: classNames(tw("col-start-2"), className)
   }), children);
 };
@@ -7081,7 +7078,7 @@ Banner2.Title = (_a) => {
   var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
   return /* @__PURE__ */ import_react21.default.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "subheading",
-    color: "grey-100",
+    color: "intense",
     className: classNames(
       className,
       tw({
@@ -7354,7 +7351,13 @@ var Label = (props) => {
   }), children);
 };
 var ColorHighlight = (_a) => {
-  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
+  var _b = _a, {
+    color,
+    className
+  } = _b, rest = __objRest(_b, [
+    "color",
+    "className"
+  ]);
   return /* @__PURE__ */ import_react24.default.createElement(Box, __spreadProps(__spreadValues({}, rest), {
     backgroundColor: color,
     className: classNames(tw("h-1 w-full absolute top-0 left-0 right-0"), className)
@@ -7404,7 +7407,7 @@ Card.Content = Content;
 Card.Actions = Actions;
 Card.ImageContainer = ImageContainer;
 Card.Image = Image;
-Card.ColorHiglight = ColorHighlight;
+Card.ColorHighlight = ColorHighlight;
 var isCardTitleComponent = (c) => {
   return import_react24.default.isValidElement(c) && c.type === Card.Title;
 };
@@ -7535,7 +7538,7 @@ var RadioButton = import_react27.default.forwardRef(
 var import_chevronDown3 = __toESM(require_chevronDown());
 var import_chevronUp2 = __toESM(require_chevronUp());
 var HeadContext = import_react28.default.createContext(null);
-var tableClassNames = tw("w-full relative typography-default border-spacing-0");
+var tableClassNames = tw("w-full relative typography-default border-spacing-0 border-separate");
 var Table = (_a) => {
   var _b = _a, { children, ariaLabel, className } = _b, rest = __objRest(_b, ["children", "ariaLabel", "className"]);
   return /* @__PURE__ */ import_react28.default.createElement("table", __spreadProps(__spreadValues({}, rest), {
@@ -7583,25 +7586,29 @@ var getHeadCellClassNames = (sticky = true, stickyColumn) => {
     })
   ) : common;
 };
-var TableCell = (_a) => {
-  var _b = _a, { children, className, stickyColumn, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "stickyColumn", "align"]);
-  const headContext = import_react28.default.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ import_react28.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(
-      cellClassNames,
-      getHeadCellClassNames(headContext.sticky, stickyColumn),
-      getAlignClassNames(align),
-      className
-    )
-  }), children) : /* @__PURE__ */ import_react28.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(
-      cellClassNames,
-      getBodyCellClassNames(true, stickyColumn),
-      getAlignClassNames(align),
-      className
-    )
-  }), children);
-};
+var TableCell = import_react28.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, stickyColumn, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "stickyColumn", "align"]);
+    const headContext = import_react28.default.useContext(HeadContext);
+    return headContext ? /* @__PURE__ */ import_react28.default.createElement("th", __spreadProps(__spreadValues({}, rest), {
+      ref,
+      className: classNames(
+        cellClassNames,
+        getHeadCellClassNames(headContext.sticky, stickyColumn),
+        getAlignClassNames(align),
+        className
+      )
+    }), children) : /* @__PURE__ */ import_react28.default.createElement("td", __spreadProps(__spreadValues({}, rest), {
+      ref,
+      className: classNames(
+        cellClassNames,
+        getBodyCellClassNames(true, stickyColumn),
+        getAlignClassNames(align),
+        className
+      )
+    }), children);
+  }
+);
 var TableSelectCell = (_a) => {
   var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
   return /* @__PURE__ */ import_react28.default.createElement(Table.Cell, {
@@ -7616,28 +7623,31 @@ var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4
 var getSortCellIconClassNames = (active) => {
   return tw("text-[9px]", active ? "text-default" : "text-inactive");
 };
-var TableSortCell = (_a) => {
-  var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ import_react28.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
-    "aria-sort": direction
-  }), /* @__PURE__ */ import_react28.default.createElement("span", {
-    className: getSortCellButtonClassNames(rest.align),
-    role: "button",
-    tabIndex: -1,
-    onClick
-  }, children, /* @__PURE__ */ import_react28.default.createElement("div", {
-    "data-sort-icons": true,
-    className: tw("flex flex-col", {
-      "invisible group-hover:visible": direction === "none"
-    })
-  }, /* @__PURE__ */ import_react28.default.createElement(InlineIcon, {
-    icon: import_chevronUp2.default,
-    className: getSortCellIconClassNames(direction === "ascending")
-  }), /* @__PURE__ */ import_react28.default.createElement(InlineIcon, {
-    icon: import_chevronDown3.default,
-    className: getSortCellIconClassNames(direction === "descending")
-  }))));
-};
+var TableSortCell = import_react28.default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
+    return /* @__PURE__ */ import_react28.default.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+      "aria-sort": direction,
+      ref
+    }), /* @__PURE__ */ import_react28.default.createElement("span", {
+      className: getSortCellButtonClassNames(rest.align),
+      role: "button",
+      tabIndex: -1,
+      onClick
+    }, children, /* @__PURE__ */ import_react28.default.createElement("div", {
+      "data-sort-icons": true,
+      className: tw("flex flex-col", {
+        "invisible group-hover:visible": direction === "none"
+      })
+    }, /* @__PURE__ */ import_react28.default.createElement(InlineIcon, {
+      icon: import_chevronUp2.default,
+      className: getSortCellIconClassNames(direction === "ascending")
+    }), /* @__PURE__ */ import_react28.default.createElement(InlineIcon, {
+      icon: import_chevronDown3.default,
+      className: getSortCellIconClassNames(direction === "descending")
+    }))));
+  }
+);
 var Caption = ({ children }) => /* @__PURE__ */ import_react28.default.createElement(Typography2.Caption, {
   htmlTag: "caption"
 }, children);
@@ -8033,7 +8043,7 @@ var Item2 = import_react32.default.forwardRef(
 );
 DropdownMenu.Item = Item2;
 var Description = ({ disabled, children }) => /* @__PURE__ */ import_react32.default.createElement(Typography2.Caption, {
-  color: disabled ? "grey-20" : "grey-40"
+  color: disabled ? "inactive" : "muted"
 }, children);
 DropdownMenu.Description = Description;
 var Separator = (_a) => {
@@ -8285,7 +8295,7 @@ Modal.Title = (_a) => {
   return /* @__PURE__ */ import_react36.default.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
-    color: "grey-90",
+    color: "intense",
     className: classNames(
       tw({
         "text-ellipsis overflow-x-hidden whitespace-nowrap": kind === "drawer"
@@ -8298,7 +8308,7 @@ Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ import_react36.default.createElement(Typography, __spreadValues({
     variant: "small",
-    color: "grey-60"
+    color: "default"
   }, rest), children);
 };
 Modal.TitleContainer = (_a) => {
@@ -8380,7 +8390,7 @@ var Item3 = (_a) => {
     role: "menuitem",
     className: classNames(
       tw("py-3 px-6 hover:bg-default cursor-pointer flex gap-4 items-center typography-small focusable", {
-        "text-grey-60": !active,
+        "text-default": !active,
         "text-primary-intense": !!active
       }),
       className
@@ -8416,7 +8426,7 @@ PageHeader.TitleContainer = (_a) => {
 PageHeader.Title = (_a) => {
   var _b = _a, { isSubHeader = false, children } = _b, rest = __objRest(_b, ["isSubHeader", "children"]);
   return /* @__PURE__ */ import_react38.default.createElement(Typography2, __spreadProps(__spreadValues({}, rest), {
-    color: "grey-100",
+    color: "intense",
     variant: isSubHeader ? "subheading" : "heading",
     htmlTag: isSubHeader ? "h2" : "h1"
   }), children);
@@ -8424,7 +8434,7 @@ PageHeader.Title = (_a) => {
 PageHeader.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ import_react38.default.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
-    color: "grey-70"
+    color: "default"
   }), children);
 };
 PageHeader.Chips = (_a) => {
@@ -8590,14 +8600,14 @@ Section2.Title = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ import_react42.default.createElement(Typography2.Large, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "h2",
-    color: "black",
+    color: "intense",
     className: "flex gap-3 items-center"
   }), children);
 };
 Section2.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ import_react42.default.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
-    color: "grey-70"
+    color: "default"
   }), children);
 };
 Section2.Actions = (_a) => {
@@ -8612,7 +8622,7 @@ Section2.Body = (_a) => {
     className: classNames(tw("p-6"), className)
   }), /* @__PURE__ */ import_react42.default.createElement(Typography, {
     htmlTag: "div",
-    color: "grey-70"
+    color: "default"
   }, children));
 };
 
@@ -8839,8 +8849,8 @@ var Step = (_a) => {
   }));
 };
 var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
-  "border-grey-90 bg-body": state === "active",
-  "border-default bg-body": state === "inactive",
+  "border-intense": state === "active",
+  "border-default": state === "inactive",
   "text-white bg-success-default border-success-intense": state === "completed"
 });
 var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {

package/dist/atoms.mjs

@@ -4102,7 +4102,7 @@ var require_warningSign = __commonJS({
   "src/icons/warningSign.js"(exports) {
     "use strict";
     var data = {
-      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 8.25v3.667m0 3.666h.009M9.731 3.567 2.19 16.59c-.418.723-.627 1.084-.596 1.38a.917.917 0 00.372.646c.241.176.659.176 1.493.176h15.08c.834 0 1.251 0 1.492-.176a.917.917 0 00.373-.646c.03-.296-.178-.657-.596-1.38l-7.54-13.023c-.417-.72-.625-1.08-.897-1.2a.917.917 0 00-.745 0c-.271.12-.48.48-.896 1.2Z"/>',
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 8.25v3.667M11 16l.009-1.5M9.73 3.567 2.191 16.59c-.418.723-.627 1.084-.596 1.38a.917.917 0 00.372.646c.241.176.659.176 1.493.176h15.08c.834 0 1.251 0 1.492-.176a.917.917 0 00.373-.646c.03-.296-.178-.657-.596-1.38l-7.54-13.023c-.417-.72-.625-1.08-.897-1.2a.917.917 0 00-.745 0c-.272.12-.48.48-.897 1.2Z"/>',
       "left": 0,
       "top": 0,
       "width": 22,
@@ -5700,8 +5700,8 @@ var Box = (_a) => {
   const styles = useStyle({
     padding,
     display,
-    color,
-    borderColor: borderColor ? tailwind_theme_default.backgroundColor[borderColor] : "",
+    color: color ? tailwind_theme_default.textColor[color] : "",
+    borderColor: borderColor ? tailwind_theme_default.borderColor[borderColor] : "",
     borderRadius,
     borderWidth,
     justifyContent,
@@ -5743,11 +5743,7 @@ var FlexBox = (props) => /* @__PURE__ */ React3.createElement(Box, __spreadValue
 }, props));
 FlexBox.displayName = "Box.Flex";
 Box.Flex = FlexBox;
-var BorderBox = createSimpleComponent(
-  Box,
-  { className: "rounded border", borderColor: "grey-10" },
-  "BorderBox"
-);
+var BorderBox = createSimpleComponent(Box, { className: "rounded border", borderColor: "muted" }, "BorderBox");
 
 // src/molecules/Transition/Transition.tsx
 import React5, { useMemo } from "react";
@@ -6372,6 +6368,7 @@ function useTooltipTriggerState(props = {}) {
     }
   };
   useEffect3(() => {
+    isUnmounted.current = false;
     return () => {
       isUnmounted.current = true;
       if (closeTimeout.current) {
@@ -6548,7 +6545,7 @@ var COLOR_CLASSNAMES = {
   "ghost": ghostButtonStyle,
   "text": linkStyle,
   "secondary-ghost": tw(
-    "text-grey-60 active:text-muted focus-visible:text-intense hover:text-intense disabled:text-inactive"
+    "text-default active:text-muted focus-visible:text-intense hover:text-intense disabled:text-inactive"
   )
 };
 var LoadingSpinner = ({ size = "20px" }) => {
@@ -6858,7 +6855,7 @@ Alert.Title = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ React16.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "default-strong",
-    color: "grey-80",
+    color: "intense",
     className: classNames(tw("col-start-2"), className)
   }), children);
 };
@@ -6866,7 +6863,7 @@ Alert.Description = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ React16.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "small",
-    color: "grey-60",
+    color: "default",
     className: classNames(tw("col-start-2"), className)
   }), children);
 };
@@ -7034,7 +7031,7 @@ Banner2.Title = (_a) => {
   var _b = _a, { children, className, layout } = _b, rest = __objRest(_b, ["children", "className", "layout"]);
   return /* @__PURE__ */ React17.createElement(Typography, __spreadProps(__spreadValues({}, rest), {
     variant: "subheading",
-    color: "grey-100",
+    color: "intense",
     className: classNames(
       className,
       tw({
@@ -7307,7 +7304,13 @@ var Label = (props) => {
   }), children);
 };
 var ColorHighlight = (_a) => {
-  var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
+  var _b = _a, {
+    color,
+    className
+  } = _b, rest = __objRest(_b, [
+    "color",
+    "className"
+  ]);
   return /* @__PURE__ */ React20.createElement(Box, __spreadProps(__spreadValues({}, rest), {
     backgroundColor: color,
     className: classNames(tw("h-1 w-full absolute top-0 left-0 right-0"), className)
@@ -7357,7 +7360,7 @@ Card.Content = Content;
 Card.Actions = Actions;
 Card.ImageContainer = ImageContainer;
 Card.Image = Image;
-Card.ColorHiglight = ColorHighlight;
+Card.ColorHighlight = ColorHighlight;
 var isCardTitleComponent = (c) => {
   return React20.isValidElement(c) && c.type === Card.Title;
 };
@@ -7488,7 +7491,7 @@ var RadioButton = React23.forwardRef(
 var import_chevronDown3 = __toESM(require_chevronDown());
 var import_chevronUp2 = __toESM(require_chevronUp());
 var HeadContext = React24.createContext(null);
-var tableClassNames = tw("w-full relative typography-default border-spacing-0");
+var tableClassNames = tw("w-full relative typography-default border-spacing-0 border-separate");
 var Table = (_a) => {
   var _b = _a, { children, ariaLabel, className } = _b, rest = __objRest(_b, ["children", "ariaLabel", "className"]);
   return /* @__PURE__ */ React24.createElement("table", __spreadProps(__spreadValues({}, rest), {
@@ -7536,25 +7539,29 @@ var getHeadCellClassNames = (sticky = true, stickyColumn) => {
     })
   ) : common;
 };
-var TableCell = (_a) => {
-  var _b = _a, { children, className, stickyColumn, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "stickyColumn", "align"]);
-  const headContext = React24.useContext(HeadContext);
-  return headContext ? /* @__PURE__ */ React24.createElement("th", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(
-      cellClassNames,
-      getHeadCellClassNames(headContext.sticky, stickyColumn),
-      getAlignClassNames(align),
-      className
-    )
-  }), children) : /* @__PURE__ */ React24.createElement("td", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(
-      cellClassNames,
-      getBodyCellClassNames(true, stickyColumn),
-      getAlignClassNames(align),
-      className
-    )
-  }), children);
-};
+var TableCell = React24.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, className, stickyColumn, align = "left" } = _b, rest = __objRest(_b, ["children", "className", "stickyColumn", "align"]);
+    const headContext = React24.useContext(HeadContext);
+    return headContext ? /* @__PURE__ */ React24.createElement("th", __spreadProps(__spreadValues({}, rest), {
+      ref,
+      className: classNames(
+        cellClassNames,
+        getHeadCellClassNames(headContext.sticky, stickyColumn),
+        getAlignClassNames(align),
+        className
+      )
+    }), children) : /* @__PURE__ */ React24.createElement("td", __spreadProps(__spreadValues({}, rest), {
+      ref,
+      className: classNames(
+        cellClassNames,
+        getBodyCellClassNames(true, stickyColumn),
+        getAlignClassNames(align),
+        className
+      )
+    }), children);
+  }
+);
 var TableSelectCell = (_a) => {
   var _b = _a, { ariaLabel } = _b, props = __objRest(_b, ["ariaLabel"]);
   return /* @__PURE__ */ React24.createElement(Table.Cell, {
@@ -7569,28 +7576,31 @@ var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4
 var getSortCellIconClassNames = (active) => {
   return tw("text-[9px]", active ? "text-default" : "text-inactive");
 };
-var TableSortCell = (_a) => {
-  var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
-  return /* @__PURE__ */ React24.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
-    "aria-sort": direction
-  }), /* @__PURE__ */ React24.createElement("span", {
-    className: getSortCellButtonClassNames(rest.align),
-    role: "button",
-    tabIndex: -1,
-    onClick
-  }, children, /* @__PURE__ */ React24.createElement("div", {
-    "data-sort-icons": true,
-    className: tw("flex flex-col", {
-      "invisible group-hover:visible": direction === "none"
-    })
-  }, /* @__PURE__ */ React24.createElement(InlineIcon, {
-    icon: import_chevronUp2.default,
-    className: getSortCellIconClassNames(direction === "ascending")
-  }), /* @__PURE__ */ React24.createElement(InlineIcon, {
-    icon: import_chevronDown3.default,
-    className: getSortCellIconClassNames(direction === "descending")
-  }))));
-};
+var TableSortCell = React24.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
+    return /* @__PURE__ */ React24.createElement(Table.Cell, __spreadProps(__spreadValues({}, rest), {
+      "aria-sort": direction,
+      ref
+    }), /* @__PURE__ */ React24.createElement("span", {
+      className: getSortCellButtonClassNames(rest.align),
+      role: "button",
+      tabIndex: -1,
+      onClick
+    }, children, /* @__PURE__ */ React24.createElement("div", {
+      "data-sort-icons": true,
+      className: tw("flex flex-col", {
+        "invisible group-hover:visible": direction === "none"
+      })
+    }, /* @__PURE__ */ React24.createElement(InlineIcon, {
+      icon: import_chevronUp2.default,
+      className: getSortCellIconClassNames(direction === "ascending")
+    }), /* @__PURE__ */ React24.createElement(InlineIcon, {
+      icon: import_chevronDown3.default,
+      className: getSortCellIconClassNames(direction === "descending")
+    }))));
+  }
+);
 var Caption = ({ children }) => /* @__PURE__ */ React24.createElement(Typography2.Caption, {
   htmlTag: "caption"
 }, children);
@@ -7986,7 +7996,7 @@ var Item2 = React28.forwardRef(
 );
 DropdownMenu.Item = Item2;
 var Description = ({ disabled, children }) => /* @__PURE__ */ React28.createElement(Typography2.Caption, {
-  color: disabled ? "grey-20" : "grey-40"
+  color: disabled ? "inactive" : "muted"
 }, children);
 DropdownMenu.Description = Description;
 var Separator = (_a) => {
@@ -8238,7 +8248,7 @@ Modal.Title = (_a) => {
   return /* @__PURE__ */ React32.createElement(Typography, __spreadValues({
     htmlTag: "h2",
     variant: "subheading",
-    color: "grey-90",
+    color: "intense",
     className: classNames(
       tw({
         "text-ellipsis overflow-x-hidden whitespace-nowrap": kind === "drawer"
@@ -8251,7 +8261,7 @@ Modal.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ React32.createElement(Typography, __spreadValues({
     variant: "small",
-    color: "grey-60"
+    color: "default"
   }, rest), children);
 };
 Modal.TitleContainer = (_a) => {
@@ -8333,7 +8343,7 @@ var Item3 = (_a) => {
     role: "menuitem",
     className: classNames(
       tw("py-3 px-6 hover:bg-default cursor-pointer flex gap-4 items-center typography-small focusable", {
-        "text-grey-60": !active,
+        "text-default": !active,
         "text-primary-intense": !!active
       }),
       className
@@ -8369,7 +8379,7 @@ PageHeader.TitleContainer = (_a) => {
 PageHeader.Title = (_a) => {
   var _b = _a, { isSubHeader = false, children } = _b, rest = __objRest(_b, ["isSubHeader", "children"]);
   return /* @__PURE__ */ React34.createElement(Typography2, __spreadProps(__spreadValues({}, rest), {
-    color: "grey-100",
+    color: "intense",
     variant: isSubHeader ? "subheading" : "heading",
     htmlTag: isSubHeader ? "h2" : "h1"
   }), children);
@@ -8377,7 +8387,7 @@ PageHeader.Title = (_a) => {
 PageHeader.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ React34.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
-    color: "grey-70"
+    color: "default"
   }), children);
 };
 PageHeader.Chips = (_a) => {
@@ -8543,14 +8553,14 @@ Section2.Title = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ React38.createElement(Typography2.Large, __spreadProps(__spreadValues({}, rest), {
     htmlTag: "h2",
-    color: "black",
+    color: "intense",
     className: "flex gap-3 items-center"
   }), children);
 };
 Section2.Subtitle = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ React38.createElement(Typography2.Small, __spreadProps(__spreadValues({}, rest), {
-    color: "grey-70"
+    color: "default"
   }), children);
 };
 Section2.Actions = (_a) => {
@@ -8565,7 +8575,7 @@ Section2.Body = (_a) => {
     className: classNames(tw("p-6"), className)
   }), /* @__PURE__ */ React38.createElement(Typography, {
     htmlTag: "div",
-    color: "grey-70"
+    color: "default"
   }, children));
 };
 
@@ -8792,8 +8802,8 @@ var Step = (_a) => {
   }));
 };
 var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
-  "border-grey-90 bg-body": state === "active",
-  "border-default bg-body": state === "inactive",
+  "border-intense": state === "active",
+  "border-default": state === "inactive",
   "text-white bg-success-default border-success-intense": state === "completed"
 });
 var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {

package/dist/charts.cjs

@@ -2169,7 +2169,7 @@ Tooltip.defaultProps = Object.assign({}, import_recharts4.Tooltip.defaultProps,
   isAnimationActive: false,
   contentStyle,
   itemStyle,
-  cursor: { stroke: "var(--aquarium-colors-grey-70)", strokeDasharray: "5" }
+  cursor: { stroke: "var(--aquarium-border-color-intense)", strokeDasharray: "5" }
 });
 
 // src/charts/AreaChart/AreaChart.tsx
@@ -2425,7 +2425,7 @@ var ChartValue = (props) => {
       "typography-large-heading text-intense text-center leading-tight absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
     )
   }, value, unit2, caption && /* @__PURE__ */ import_react9.default.createElement("span", {
-    className: tw("block", "typography-small text-grey-60")
+    className: tw("block", "typography-small text-default")
   }, caption));
 };
 

package/dist/charts.mjs

@@ -2045,7 +2045,7 @@ Tooltip.defaultProps = Object.assign({}, _Tooltip.defaultProps, {
   isAnimationActive: false,
   contentStyle,
   itemStyle,
-  cursor: { stroke: "var(--aquarium-colors-grey-70)", strokeDasharray: "5" }
+  cursor: { stroke: "var(--aquarium-border-color-intense)", strokeDasharray: "5" }
 });
 
 // src/charts/AreaChart/AreaChart.tsx
@@ -2301,7 +2301,7 @@ var ChartValue = (props) => {
       "typography-large-heading text-intense text-center leading-tight absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
     )
   }, value, unit2, caption && /* @__PURE__ */ React9.createElement("span", {
-    className: tw("block", "typography-small text-grey-60")
+    className: tw("block", "typography-small text-default")
   }, caption));
 };