@aivenio/aquarium 1.65.1 → 1.66.0

package/dist/system.cjs

@@ -652,12 +652,8 @@ var require_resolveTheme = __commonJS({
   "src/js/resolveTheme.js"(exports, module2) {
     "use strict";
     var tokensJson = require_tokens();
-    var themeName = process.env.THEME || process.env.STORYBOOK_THEME || "aiven";
-    if (!(themeName in tokensJson.themes)) {
-      throw new Error(`Could not find theme '${themeName}' from tokens.json`);
-    }
     module2.exports = {
-      theme: tokensJson.themes[themeName]
+      theme: tokensJson.themes.aiven
     };
   }
 });
@@ -5040,7 +5036,7 @@ var classNames = (...args) => {
 // src/molecules/Icon/Icon.tsx
 var Icon = import_react.default.forwardRef((_a, ref) => {
   var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
-  const classes2 = classNames("Aquarium-Icon", className, color && `text-${color}`);
+  const classes2 = classNames("Aquarium-Icon", className, color && `text-${String(color)}`);
   return /* @__PURE__ */ import_react.default.createElement(import_react2.Icon, __spreadValues({
     ref: ref != null ? ref : void 0,
     className: classes2 !== "" ? classes2 : void 0
@@ -5048,7 +5044,7 @@ var Icon = import_react.default.forwardRef((_a, ref) => {
 });
 var InlineIcon = import_react.default.forwardRef((_a, ref) => {
   var _b = _a, { color, className } = _b, rest = __objRest(_b, ["color", "className"]);
-  const classes2 = classNames("Aquarium-InlineIcon", color && `text-${color}`);
+  const classes2 = classNames("Aquarium-InlineIcon", color && `text-${String(color)}`);
   return /* @__PURE__ */ import_react.default.createElement("span", {
     className: classNames(tw("children:inline-block inline-flex justify-center items-center"), className)
   }, /* @__PURE__ */ import_react.default.createElement(import_react2.InlineIcon, __spreadValues({
@@ -5082,16 +5078,16 @@ var InputContainer = import_react3.default.forwardRef(
       ref,
       className: classNames(
         className,
-        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-70",
+        "relative rounded-sm typography-default-strong w-full flex flex-row items-center focus-visible:outline-0 focus-visible:border-info-default",
         {
           "border px-3 py-[6px]": variant !== "readOnly",
           "cursor-default": variant === "readOnly",
           "border-default": variant !== "error" && variant !== "readOnly",
-          "border-error-50": variant === "error",
+          "border-danger-default": variant === "error",
           "hover:border-intense": variant !== "error" && variant !== "disabled" && variant !== "focused",
-          "border-info-70": variant === "focused",
-          "bg-white": variant !== "disabled",
-          "cursor-not-allowed border-default bg-grey-5": variant === "disabled"
+          "border-info-default": variant === "focused",
+          "bg-body": variant !== "disabled",
+          "cursor-not-allowed border-default bg-default": variant === "disabled"
         }
       )
     }, props));
@@ -5104,10 +5100,10 @@ var Input = import_react3.default.forwardRef((_a, ref) => {
     type: "text",
     className: classNames(
       className,
-      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-grey-5 placeholder:text-muted",
+      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-default placeholder:text-muted-2x",
       {
         "text-default": !props.disabled,
-        "text-grey-30": props.disabled,
+        "text-muted-3x": props.disabled,
         "cursor-default": props.readOnly
       }
     )
@@ -5129,7 +5125,7 @@ var NoResults = import_react3.default.forwardRef(
     return /* @__PURE__ */ import_react3.default.createElement("li", __spreadProps(__spreadValues({
       ref
     }, rest), {
-      className: classNames(tw("p-3 text-muted italic typography-small"), className)
+      className: classNames(tw("p-3 text-muted-2x italic typography-small"), className)
     }), children);
   }
 );
@@ -5149,9 +5145,9 @@ var Group = import_react3.default.forwardRef((_a, ref) => {
     ref,
     className: classNames(
       className,
-      "flex items-center gap-x-3 p-3 text-muted uppercase cursor-default typography-caption mt-4 first:mt-0",
+      "flex items-center gap-x-3 p-3 text-muted-2x uppercase cursor-default typography-caption mt-4 first:mt-0",
       {
-        "text-grey-20": props.disabled
+        "text-muted-3x": props.disabled
       }
     )
   }, props), children);
@@ -5162,9 +5158,9 @@ var Item = import_react3.default.forwardRef(
     return /* @__PURE__ */ import_react3.default.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
-        "cursor-pointer hover:bg-grey-0": !props["aria-disabled"],
+        "cursor-pointer hover:bg-muted": !props["aria-disabled"],
         "cursor-not-allowed opacity-40 grayscale": props["aria-disabled"],
-        "bg-grey-0": highlighted
+        "bg-muted": highlighted
       })
     }, props), /* @__PURE__ */ import_react3.default.createElement("span", {
       className: tw("grow flex gap-x-3")
@@ -5180,12 +5176,12 @@ var ActionItem = import_react3.default.forwardRef(
       ref,
       role: "button",
       onClick: () => !props.disabled && (onClick == null ? void 0 : onClick()),
-      className: classNames(className, "flex items-center gap-x-3 typography-small text-primary-80", {
+      className: classNames(className, "flex items-center gap-x-3 typography-small text-primary-intense", {
         "p-3": !dense,
         "px-3 py-2": dense,
         "cursor-pointer": !props.disabled,
-        "text-grey-20": props.disabled,
-        "hover:text-primary-70": !props.disabled
+        "text-muted-3x": props.disabled,
+        "hover:text-primary-default": !props.disabled
       })
     }, props), icon && /* @__PURE__ */ import_react3.default.createElement(InlineIcon, {
       icon
@@ -5202,7 +5198,7 @@ var Toggle = import_react3.default.forwardRef((_a, ref) => {
   }, props), {
     className: tw("grow-0 leading-none", { "cursor-not-allowed": (_a2 = props.disabled) != null ? _a2 : false })
   }), /* @__PURE__ */ import_react3.default.createElement(InlineIcon, {
-    color: props.disabled ? "grey-40" : "grey-70",
+    color: props.disabled ? "muted-2x" : "default",
     icon: hasFocus ? import_search.default : isOpen ? import_chevronUp.default : import_chevronDown.default
   }));
 });
@@ -5602,7 +5598,247 @@ var tailwind_theme_default = {
     transparent: "var(--aquarium-colors-transparent, transparent)",
     current: "var(--aquarium-colors-current, currentColor)",
     white: "var(--aquarium-colors-white, white)",
-    black: "var(--aquarium-colors-black, black)"
+    black: "var(--aquarium-colors-black, black)",
+    body: "var(--aquarium-background-color-body)",
+    "popover-content": "var(--aquarium-background-color-popover-content)",
+    muted: "var(--aquarium-background-color-muted)",
+    default: "var(--aquarium-background-color-default)",
+    intense: "var(--aquarium-background-color-intense)",
+    "intense-2x": "var(--aquarium-background-color-intense-2x)",
+    "primary-muted-3x": "var(--aquarium-background-color-primary-muted-3x)",
+    "primary-muted-2x": "var(--aquarium-background-color-primary-muted-2x)",
+    "primary-muted": "var(--aquarium-background-color-primary-muted)",
+    "primary-default": "var(--aquarium-background-color-primary-default)",
+    "primary-intense": "var(--aquarium-background-color-primary-intense)",
+    "secondary-default": "var(--aquarium-background-color-secondary-default)",
+    "info-muted": "var(--aquarium-background-color-info-muted)",
+    "info-default": "var(--aquarium-background-color-info-default)",
+    "success-muted": "var(--aquarium-background-color-success-muted)",
+    "success-default": "var(--aquarium-background-color-success-default)",
+    "success-intense": "var(--aquarium-background-color-success-intense)",
+    "warning-muted": "var(--aquarium-background-color-warning-muted)",
+    "warning-default": "var(--aquarium-background-color-warning-default)",
+    "danger-muted-2x": "var(--aquarium-background-color-danger-muted-2x)",
+    "danger-muted": "var(--aquarium-background-color-danger-muted)",
+    "danger-default": "var(--aquarium-background-color-danger-default)",
+    "danger-intense": "var(--aquarium-background-color-danger-intense)"
+  },
+  textColor: {
+    "error-100": "var(--aquarium-colors-error-100, #aa0000)",
+    "error-90": "var(--aquarium-colors-error-90, #b90000)",
+    "error-80": "var(--aquarium-colors-error-80, #c50001)",
+    "error-70": "var(--aquarium-colors-error-70, #d80005)",
+    "error-60": "var(--aquarium-colors-error-60, #e70000)",
+    "error-50": "var(--aquarium-colors-error-50, #e62728)",
+    "error-40": "var(--aquarium-colors-error-40, #e0504f)",
+    "error-30": "var(--aquarium-colors-error-30, #ed7975)",
+    "error-20": "var(--aquarium-colors-error-20, #ffadb3)",
+    "error-10": "var(--aquarium-colors-error-10, #ffcbd2)",
+    "error-5": "var(--aquarium-colors-error-5, #fee8e7)",
+    "error-0": "var(--aquarium-colors-error-0, #fef2f1)",
+    "warning-100": "var(--aquarium-colors-warning-100, #fe6d00)",
+    "warning-90": "var(--aquarium-colors-warning-90, #ff9003)",
+    "warning-80": "var(--aquarium-colors-warning-80, #fd9f00)",
+    "warning-70": "var(--aquarium-colors-warning-70, #ffb300)",
+    "warning-60": "var(--aquarium-colors-warning-60, #ffc107)",
+    "warning-50": "var(--aquarium-colors-warning-50, #fdc926)",
+    "warning-40": "var(--aquarium-colors-warning-40, #fdd44d)",
+    "warning-30": "var(--aquarium-colors-warning-30, #fddf81)",
+    "warning-20": "var(--aquarium-colors-warning-20, #feebb2)",
+    "warning-10": "var(--aquarium-colors-warning-10, #fff2cd)",
+    "warning-5": "var(--aquarium-colors-warning-5, #fff8ea)",
+    "warning-0": "var(--aquarium-colors-warning-0, #fffdf9)",
+    "success-100": "var(--aquarium-colors-success-100, #006f00)",
+    "success-90": "var(--aquarium-colors-success-90, #008e00)",
+    "success-80": "var(--aquarium-colors-success-80, #009f00)",
+    "success-70": "var(--aquarium-colors-success-70, #00b300)",
+    "success-60": "var(--aquarium-colors-success-60, #00c300)",
+    "success-50": "var(--aquarium-colors-success-50, #40ce37)",
+    "success-40": "var(--aquarium-colors-success-40, #60db57)",
+    "success-30": "var(--aquarium-colors-success-30, #89eb80)",
+    "success-20": "var(--aquarium-colors-success-20, #afffa7)",
+    "success-10": "var(--aquarium-colors-success-10, #cbffc9)",
+    "success-5": "var(--aquarium-colors-success-5, #ecf7ed)",
+    "success-0": "var(--aquarium-colors-success-0, #f5faf5)",
+    "info-100": "var(--aquarium-colors-info-100, #02569a)",
+    "info-90": "var(--aquarium-colors-info-90, #0174ba)",
+    "info-80": "var(--aquarium-colors-info-80, #0788d1)",
+    "info-70": "var(--aquarium-colors-info-70, #0399e3)",
+    "info-60": "var(--aquarium-colors-info-60, #02a8f3)",
+    "info-50": "var(--aquarium-colors-info-50, #28b4f4)",
+    "info-40": "var(--aquarium-colors-info-40, #4cc2f7)",
+    "info-30": "var(--aquarium-colors-info-30, #7fd1f7)",
+    "info-20": "var(--aquarium-colors-info-20, #b4e5fb)",
+    "info-10": "var(--aquarium-colors-info-10, #e0f5fe)",
+    "info-5": "var(--aquarium-colors-info-5, #effaff)",
+    "info-0": "var(--aquarium-colors-info-0, #f9fdff)",
+    "grey-100": "var(--aquarium-colors-grey-100, #19191d)",
+    "grey-90": "var(--aquarium-colors-grey-90, #292a31)",
+    "grey-80": "var(--aquarium-colors-grey-80, #3a3a44)",
+    "grey-70": "var(--aquarium-colors-grey-70, #4a4b57)",
+    "grey-60": "var(--aquarium-colors-grey-60, #5a5b6a)",
+    "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)",
+    "secondary-100": "var(--aquarium-colors-secondary-100, #e11d16)",
+    "secondary-90": "var(--aquarium-colors-secondary-90, #eb4610)",
+    "secondary-80": "var(--aquarium-colors-secondary-80, #f3580d)",
+    "secondary-70": "var(--aquarium-colors-secondary-70, #f96a02)",
+    "secondary-60": "var(--aquarium-colors-secondary-60, #ff7700)",
+    "secondary-50": "var(--aquarium-colors-secondary-50, #fc871a)",
+    "secondary-40": "var(--aquarium-colors-secondary-40, #fb9a3e)",
+    "secondary-30": "var(--aquarium-colors-secondary-30, #fab26e)",
+    "secondary-20": "var(--aquarium-colors-secondary-20, #f8c99c)",
+    "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, #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)",
+    current: "var(--aquarium-colors-current, currentColor)",
+    white: "var(--aquarium-colors-white, white)",
+    black: "var(--aquarium-colors-black, black)",
+    "muted-3x": "var(--aquarium-text-color-muted-3x)",
+    "muted-2x": "var(--aquarium-text-color-muted-2x)",
+    muted: "var(--aquarium-text-color-muted)",
+    default: "var(--aquarium-text-color-default)",
+    intense: "var(--aquarium-text-color-intense)",
+    "primary-muted-3x": "var(--aquarium-text-color-primary-muted-3x)",
+    "primary-muted-2x": "var(--aquarium-text-color-primary-muted-2x)",
+    "primary-muted": "var(--aquarium-text-color-primary-muted)",
+    "primary-default": "var(--aquarium-text-color-primary-default)",
+    "primary-intense": "var(--aquarium-text-color-primary-intense)",
+    "primary-intense-2x": "var(--aquarium-text-color-primary-intense-2x)",
+    "info-default": "var(--aquarium-text-color-info-default)",
+    "info-intense": "var(--aquarium-text-color-info-intense)",
+    "success-default": "var(--aquarium-text-color-success-default)",
+    "success-intense": "var(--aquarium-text-color-success-intense)",
+    "warning-default": "var(--aquarium-text-color-warning-default)",
+    "warning-intense": "var(--aquarium-text-color-warning-intense)",
+    "danger-muted": "var(--aquarium-text-color-danger-muted)",
+    "danger-default": "var(--aquarium-text-color-danger-default)",
+    "danger-intense": "var(--aquarium-text-color-danger-intense)"
+  },
+  borderColor: {
+    "error-100": "var(--aquarium-colors-error-100, #aa0000)",
+    "error-90": "var(--aquarium-colors-error-90, #b90000)",
+    "error-80": "var(--aquarium-colors-error-80, #c50001)",
+    "error-70": "var(--aquarium-colors-error-70, #d80005)",
+    "error-60": "var(--aquarium-colors-error-60, #e70000)",
+    "error-50": "var(--aquarium-colors-error-50, #e62728)",
+    "error-40": "var(--aquarium-colors-error-40, #e0504f)",
+    "error-30": "var(--aquarium-colors-error-30, #ed7975)",
+    "error-20": "var(--aquarium-colors-error-20, #ffadb3)",
+    "error-10": "var(--aquarium-colors-error-10, #ffcbd2)",
+    "error-5": "var(--aquarium-colors-error-5, #fee8e7)",
+    "error-0": "var(--aquarium-colors-error-0, #fef2f1)",
+    "warning-100": "var(--aquarium-colors-warning-100, #fe6d00)",
+    "warning-90": "var(--aquarium-colors-warning-90, #ff9003)",
+    "warning-80": "var(--aquarium-colors-warning-80, #fd9f00)",
+    "warning-70": "var(--aquarium-colors-warning-70, #ffb300)",
+    "warning-60": "var(--aquarium-colors-warning-60, #ffc107)",
+    "warning-50": "var(--aquarium-colors-warning-50, #fdc926)",
+    "warning-40": "var(--aquarium-colors-warning-40, #fdd44d)",
+    "warning-30": "var(--aquarium-colors-warning-30, #fddf81)",
+    "warning-20": "var(--aquarium-colors-warning-20, #feebb2)",
+    "warning-10": "var(--aquarium-colors-warning-10, #fff2cd)",
+    "warning-5": "var(--aquarium-colors-warning-5, #fff8ea)",
+    "warning-0": "var(--aquarium-colors-warning-0, #fffdf9)",
+    "success-100": "var(--aquarium-colors-success-100, #006f00)",
+    "success-90": "var(--aquarium-colors-success-90, #008e00)",
+    "success-80": "var(--aquarium-colors-success-80, #009f00)",
+    "success-70": "var(--aquarium-colors-success-70, #00b300)",
+    "success-60": "var(--aquarium-colors-success-60, #00c300)",
+    "success-50": "var(--aquarium-colors-success-50, #40ce37)",
+    "success-40": "var(--aquarium-colors-success-40, #60db57)",
+    "success-30": "var(--aquarium-colors-success-30, #89eb80)",
+    "success-20": "var(--aquarium-colors-success-20, #afffa7)",
+    "success-10": "var(--aquarium-colors-success-10, #cbffc9)",
+    "success-5": "var(--aquarium-colors-success-5, #ecf7ed)",
+    "success-0": "var(--aquarium-colors-success-0, #f5faf5)",
+    "info-100": "var(--aquarium-colors-info-100, #02569a)",
+    "info-90": "var(--aquarium-colors-info-90, #0174ba)",
+    "info-80": "var(--aquarium-colors-info-80, #0788d1)",
+    "info-70": "var(--aquarium-colors-info-70, #0399e3)",
+    "info-60": "var(--aquarium-colors-info-60, #02a8f3)",
+    "info-50": "var(--aquarium-colors-info-50, #28b4f4)",
+    "info-40": "var(--aquarium-colors-info-40, #4cc2f7)",
+    "info-30": "var(--aquarium-colors-info-30, #7fd1f7)",
+    "info-20": "var(--aquarium-colors-info-20, #b4e5fb)",
+    "info-10": "var(--aquarium-colors-info-10, #e0f5fe)",
+    "info-5": "var(--aquarium-colors-info-5, #effaff)",
+    "info-0": "var(--aquarium-colors-info-0, #f9fdff)",
+    "grey-100": "var(--aquarium-colors-grey-100, #19191d)",
+    "grey-90": "var(--aquarium-colors-grey-90, #292a31)",
+    "grey-80": "var(--aquarium-colors-grey-80, #3a3a44)",
+    "grey-70": "var(--aquarium-colors-grey-70, #4a4b57)",
+    "grey-60": "var(--aquarium-colors-grey-60, #5a5b6a)",
+    "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)",
+    "secondary-100": "var(--aquarium-colors-secondary-100, #e11d16)",
+    "secondary-90": "var(--aquarium-colors-secondary-90, #eb4610)",
+    "secondary-80": "var(--aquarium-colors-secondary-80, #f3580d)",
+    "secondary-70": "var(--aquarium-colors-secondary-70, #f96a02)",
+    "secondary-60": "var(--aquarium-colors-secondary-60, #ff7700)",
+    "secondary-50": "var(--aquarium-colors-secondary-50, #fc871a)",
+    "secondary-40": "var(--aquarium-colors-secondary-40, #fb9a3e)",
+    "secondary-30": "var(--aquarium-colors-secondary-30, #fab26e)",
+    "secondary-20": "var(--aquarium-colors-secondary-20, #f8c99c)",
+    "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, #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)",
+    current: "var(--aquarium-colors-current, currentColor)",
+    white: "var(--aquarium-colors-white, white)",
+    black: "var(--aquarium-colors-black, black)",
+    DEFAULT: "currentColor",
+    "muted-2x": "var(--aquarium-border-color-muted-2x)",
+    muted: "var(--aquarium-border-color-muted)",
+    default: "var(--aquarium-border-color-default)",
+    intense: "var(--aquarium-border-color-intense)",
+    "primary-muted-3x": "var(--aquarium-border-color-primary-muted-3x)",
+    "primary-muted-2x": "var(--aquarium-border-color-primary-muted-2x)",
+    "primary-muted": "var(--aquarium-border-color-primary-muted)",
+    "primary-default": "var(--aquarium-border-color-primary-default)",
+    "info-default": "var(--aquarium-border-color-info-default)",
+    "success-muted": "var(--aquarium-border-color-success-muted)",
+    "success-default": "var(--aquarium-border-color-success-default)",
+    "success-intense": "var(--aquarium-border-color-success-intense)",
+    "warning-muted": "var(--aquarium-border-color-warning-muted)",
+    "danger-muted": "var(--aquarium-border-color-danger-muted)",
+    "danger-default": "var(--aquarium-border-color-danger-default)",
+    "danger-intense": "var(--aquarium-border-color-danger-intense)"
   },
   gap: {
     "0": "0",
@@ -6078,8 +6314,8 @@ var Toast = (_a) => {
   return /* @__PURE__ */ import_react10.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: (0, import_classnames2.default)(
       tw("typography-body-small rounded grid grid-cols-[1fr_auto] items-center gap-x-6 gap-y-2 p-4 text-white", {
-        "bg-grey-80": variant === "default",
-        "bg-error-70": variant === "danger"
+        "bg-intense-2x": variant === "default",
+        "bg-danger-intense": variant === "danger"
       }),
       className
     )
@@ -6090,8 +6326,8 @@ var Dismiss = (_a) => {
   return /* @__PURE__ */ import_react10.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: (0, import_classnames2.default)(
       tw("self-start [&>button]:p-0 flex", {
-        "[&>button]:text-grey-50": variant === "default",
-        "[&>button]:text-error-20": variant === "danger"
+        "[&>button]:text-muted": variant === "default",
+        "[&>button]:text-danger-muted": variant === "danger"
       }),
       className
     )
@@ -6907,7 +7143,7 @@ var TooltipWrapper = import_react18.default.forwardRef(
     const arrowStyle = getArrowStyle(ref.current, placement, (_a2 = arrowProps.style) != null ? _a2 : {});
     return /* @__PURE__ */ import_react18.default.createElement(import_overlays3.OverlayContainer, null, /* @__PURE__ */ import_react18.default.createElement("div", __spreadValues({
       ref,
-      className: classNames(tw("p-3 rounded-sm typography-caption max-w-[320px] bg-grey-90 text-white"))
+      className: classNames(tw("p-3 rounded-sm typography-caption max-w-[320px] bg-intense-2x text-white"))
     }, (0, import_utils.mergeProps)(props, tooltipProps)), props.children, /* @__PURE__ */ import_react18.default.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
       style: arrowStyle
     }))));
@@ -6946,26 +7182,26 @@ var getArrowStyle = (element, position, { left, top }) => {
 };
 var Arrow = (props) => {
   return /* @__PURE__ */ import_react18.default.createElement("div", __spreadValues({
-    className: tw("absolute w-3 h-3 bg-grey-90 rotate-45")
+    className: tw("absolute w-3 h-3 bg-intense-2x rotate-45")
   }, props));
 };
 
 // src/utils/constants.ts
 var getCommonInputStyles = ({ readOnly, valid }) => tw(
-  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-grey-5 typography-small text-default disabled:text-muted placeholder:text-muted focus:outline-none",
+  "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-default typography-small text-default disabled:text-muted-2x placeholder:text-muted-2x focus:outline-none",
   {
     "px-3 py-3": !readOnly,
     "border-none resize-none cursor-default": readOnly,
-    "border border-error-50": !valid && !readOnly,
-    "border border-default hover:border-intense focus:border-info-70": valid && !readOnly
+    "border border-danger-default": !valid && !readOnly,
+    "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
   }
 );
 var ghostButtonStyle = tw(
-  "text-primary-80 active:text-primary-90 focus-visible:text-primary-90 hover:text-primary-90 disabled:text-primary-40"
+  "text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x"
 );
 var linkStyle = classNames(
   ghostButtonStyle,
-  tw("visited:text-primary-80 no-underline hover:underline focusable")
+  tw("visited:text-primary-intense no-underline hover:underline focusable")
 );
 
 // src/utils/string.ts
@@ -6976,19 +7212,19 @@ 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-90 disabled:bg-primary-40"
+    "text-white bg-primary-default active:bg-primary-intense active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-100 focus-visible:ring-inset hover:bg-primary-intense disabled:bg-primary-muted"
   ),
   "secondary": tw(
-    "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"
+    "text-primary-intense bg-body ring-1 ring-primary-80 ring-inset",
+    "active:bg-primary-muted-3x active:ring-primary-90 active:text-primary-intense",
+    "focus-visible:ring-2 focus-visible:ring-primary-90 focus-visible:text-primary-intense",
+    "hover:bg-primary-muted-3x hover:ring-primary-90 hover:text-primary-intense",
+    "disabled:bg-body disabled:text-primary-muted-2x disabled:ring-primary-40"
   ),
   "ghost": 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"
+    "text-grey-60 active:text-muted focus-visible:text-intense hover:text-intense disabled:text-muted-3x"
   )
 };
 var LoadingSpinner = ({ size = "20px" }) => {
@@ -6996,7 +7232,7 @@ var LoadingSpinner = ({ size = "20px" }) => {
     icon: import_loading2.default,
     width: size,
     height: size,
-    color: "primary-80",
+    color: "primary-intense",
     "data-testid": "loading-button"
   });
 };
@@ -7091,7 +7327,7 @@ var asButton = (Component, isDropdownButton) => {
           tw(
             "inline-block border-0 rounded-sm transition whitespace-nowrap focus:outline-none relative text-center",
             {
-              "text-default p-2 active:text-default active:bg-transparent hover:text-grey-90 hover:bg-grey-0 focus-visible:text-grey-90 focus-visible:bg-grey-0 disabled:text-muted disabled:bg-transparent": isIconOnlyButton,
+              "text-default p-2 active:text-default active:bg-transparent hover:text-intense hover:bg-muted focus-visible:text-intense focus-visible:bg-muted disabled:text-muted-2x disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
               "py-3 px-4": !dense && isButton,
@@ -7236,7 +7472,7 @@ var Typography = (_a) => {
   const resolvedColorName = (0, import_isUndefined6.default)(color) || color === "current" ? "default" : color;
   const style = useStyle({ fontWeight });
   return /* @__PURE__ */ import_react20.default.createElement(HtmlElement, __spreadValues({
-    className: classNames(typographies[variant], `text-${resolvedColorName}`, className),
+    className: classNames(typographies[variant], `text-${resolvedColorName.toString()}`, className),
     style
   }, rest), children);
 };
@@ -7392,23 +7628,23 @@ var import_warningSign2 = __toESM(require_warningSign());
 var alertTypes = {
   announcement: {
     icon: import_announcement2.default,
-    color: "primary-80"
+    color: "primary-intense"
   },
   information: {
     icon: import_infoSign2.default,
-    color: "info-70"
+    color: "info-default"
   },
   warning: {
     icon: import_warningSign2.default,
-    color: "warning-90"
+    color: "warning-default"
   },
   error: {
     icon: import_error2.default,
-    color: "error-70"
+    color: "danger-intense"
   },
   success: {
     icon: import_tickCircle2.default,
-    color: "success-70"
+    color: "success-default"
   }
 };
 var Alert = (_a) => {
@@ -7427,11 +7663,11 @@ var Alert = (_a) => {
     role: type === "error" || type === "warning" ? "alert" : "status",
     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-10": type === "information",
-        "bg-success-5": type === "success",
-        "bg-warning-5": type === "warning",
-        "bg-primary-10": type === "announcement",
+        "bg-danger-muted-2x": type === "error",
+        "bg-info-muted": type === "information",
+        "bg-success-muted": type === "success",
+        "bg-warning-muted": type === "warning",
+        "bg-primary-muted-2x": type === "announcement",
         "p-4": Boolean(dense),
         "p-5": !dense
       }),
@@ -7495,10 +7731,10 @@ var Banner = (_a) => {
     role: type === "error" || type === "warning" ? "alert" : "status",
     className: classNames(
       tw("relative flex px-[60px] justify-center", {
-        "bg-error-5": type === "error",
-        "bg-primary-5": type === "information",
-        "bg-success-5": type === "success",
-        "bg-warning-5": type === "warning"
+        "bg-danger-muted-2x": type === "error",
+        "bg-primary-muted-3x": type === "information",
+        "bg-success-muted": type === "success",
+        "bg-warning-muted": type === "warning"
       }),
       className
     )
@@ -7681,7 +7917,7 @@ var Skeleton = (_a) => {
     role: "progressbar",
     className: classNames(
       "Aquarium-Skeleton",
-      tw("bg-grey-5", {
+      tw("bg-default", {
         "h-auto before:content-['_'] whitespace-pre origin-[0%_45%] scale-[0.55]": (0, import_isUndefined7.default)(height),
         "rounded-full": rounded,
         "block": display === "block",
@@ -7766,7 +8002,7 @@ var NotificationBadge = (_a) => {
     className: classNames("Aquarium-Badge.Notification", tw("relative inline-flex"))
   }), children, /* @__PURE__ */ import_react26.default.createElement("span", {
     style: { top, right },
-    className: tw("absolute rounded-full w-[6px] h-[6px] bg-error-70")
+    className: tw("absolute rounded-full w-[6px] h-[6px] bg-danger-intense")
   }));
 };
 var DotBadge = (_a) => {
@@ -7816,8 +8052,8 @@ var Banner3 = (_a) => {
       className,
       tw(`rounded flex justify-between gap-7 flex-nowrap ${spacing.spacingAroundBanner}`, {
         "items-center": layout === "horizontal",
-        "bg-grey-0": variant === "default",
-        "bg-white border border-muted": variant === "outlined"
+        "bg-muted": variant === "default",
+        "bg-body border border-muted": variant === "outlined"
       })
     )
   }), children);
@@ -7952,7 +8188,7 @@ var Breadcrumbs = (props) => {
       className: tw("flex flex-row items-center")
     }, !!index && /* @__PURE__ */ import_react29.default.createElement(Icon, {
       "aria-hidden": true,
-      className: tw("mx-2 text-grey-30"),
+      className: tw("mx-2 text-muted-3x"),
       icon: import_slash2.default
     }), !isLast && crumb, isLast && /* @__PURE__ */ import_react29.default.createElement(ActiveCrumb, {
       "aria-disabled": true,
@@ -7971,8 +8207,8 @@ var asCrumb = (Component, displayName, options = { isActive: false }) => {
     }), /* @__PURE__ */ import_react29.default.createElement("span", {
       className: (0, import_classnames4.default)(
         tw("flex flex-row flex-nowrap items-center gap-x-3 whitespace-nowrap", {
-          "text-primary-80 hover:text-primary-70 no-underline hover:underline": !options.isActive,
-          "text-grey-90": options.isActive
+          "text-primary-intense hover:text-primary-default no-underline hover:underline": !options.isActive,
+          "text-intense": options.isActive
         })
       )
     }, icon && /* @__PURE__ */ import_react29.default.createElement(Icon, {
@@ -8027,16 +8263,16 @@ var import_lock2 = __toESM(require_lock());
 var getStatusClassNames = (status = "neutral") => {
   switch (status) {
     case "info":
-      return tw("text-info-100 bg-info-5");
+      return tw("text-info-intense bg-info-muted");
     case "warning":
-      return tw("text-secondary-80 bg-secondary-5");
+      return tw("text-warning-intense bg-warning-muted");
     case "danger":
-      return tw("text-error-100 bg-error-5");
+      return tw("text-danger-intense bg-danger-muted-2x");
     case "success":
-      return tw("text-success-100 bg-success-5");
+      return tw("text-success-intense bg-success-muted");
     case "neutral":
     default:
-      return tw("text-default bg-grey-5");
+      return tw("text-default bg-default");
   }
 };
 var Chip2 = (_a) => {
@@ -8060,8 +8296,8 @@ var Chip2 = (_a) => {
     className: (0, import_classnames5.default)(
       "Aquarium-Chip",
       tw({
-        "bg-grey-0 text-default": !locked,
-        "bg-grey-5 text-muted": locked
+        "bg-muted text-default": !locked,
+        "bg-grey-5 text-muted-2x": locked
       })
     )
   }, rest), icon && /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
@@ -8069,7 +8305,7 @@ var Chip2 = (_a) => {
   }), text, (0, import_isNumber2.default)(badge) && /* @__PURE__ */ import_react32.default.createElement(ChipBadge, {
     dense,
     value: badge,
-    textClassname: tw("text-grey-50")
+    textClassname: tw("text-muted")
   }), onClose && /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
     role: "button",
     "aria-hidden": false,
@@ -8140,11 +8376,11 @@ var getCommonCardStyles = ({
   fullWidth = false,
   enableMinWidth = true,
   disabled = false
-}) => tw("border-[2px] border-muted rounded-[2px] relative p-5 flex flex-col gap-5 bg-white outline-none transition-all", {
+}) => tw("border-[2px] border-muted rounded-[2px] relative p-5 flex flex-col gap-5 bg-body outline-none transition-all", {
   "w-[280px]": !fullWidth,
   "w-full": fullWidth,
   "min-w-[280px]": fullWidth && enableMinWidth,
-  "bg-grey-0 cursor-not-allowed focus:border-transparent opacity-50": disabled
+  "bg-muted cursor-not-allowed focus:border-transparent opacity-50": disabled
 });
 var Card = import_react34.default.forwardRef((props, ref) => {
   const _a = props, {
@@ -8174,7 +8410,7 @@ var Card = import_react34.default.forwardRef((props, ref) => {
     className: classNames(
       getCommonCardStyles(props),
       tw({
-        "cursor-pointer hover:bg-primary-5 active:bg-white": clickable && !disabled,
+        "cursor-pointer hover:bg-primary-muted-3x active:bg-body": clickable && !disabled,
         "focusable": clickable && modality === "keyboard"
       }),
       className
@@ -8187,8 +8423,8 @@ var Label = (props) => {
     className: classNames(
       getCommonCardStyles(props),
       tw({
-        "cursor-pointer hover:bg-primary-5 active:bg-white": !disabled,
-        "border-primary-80": checked,
+        "cursor-pointer hover:bg-primary-muted-3x active:bg-body": !disabled,
+        "border-primary-default": checked,
         "focusable": modality === "keyboard"
       }),
       className
@@ -8282,7 +8518,7 @@ var Checkbox = import_react35.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_react35.default.createElement("span", {
       className: classNames(tw("inline-flex justify-center items-center self-center relative"), {
-        "hover:border-intense peer-checked:border-primary-80": !disabled,
+        "hover:border-intense peer-checked:border-primary-default": !disabled,
         "border-muted": disabled
       })
     }, /* @__PURE__ */ import_react35.default.createElement("input", __spreadProps(__spreadValues({
@@ -8293,8 +8529,8 @@ var Checkbox = import_react35.default.forwardRef(
     }, props), {
       className: classNames(
         tw("peer appearance-none outline-none w-5 h-5", "rounded-sm border border-transparent", {
-          "cursor-pointer checked:bg-primary-80": !disabled,
-          "cursor-not-allowed bg-grey-0 checked:bg-primary-40": disabled
+          "cursor-pointer checked:bg-primary-default": !disabled,
+          "cursor-not-allowed bg-muted checked:bg-primary-muted": disabled
         })
       ),
       readOnly,
@@ -8307,11 +8543,11 @@ var Checkbox = import_react35.default.forwardRef(
           "absolute top-0 right-0",
           "pointer-events-none p-[2px] w-5 h-5",
           "text-transparent [&>path]:stroke-transparent [&>path]:stroke-2",
-          "rounded-sm border border-default peer-focus:border-info-70"
+          "rounded-sm border border-default peer-focus:border-info-default"
         ),
         {
-          "peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-80": !disabled,
-          "border-muted peer-checked:text-primary-10 peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-40": disabled
+          "peer-hover:border-intense peer-checked:text-white peer-checked:[&>path]:stroke-white peer-checked:border-primary-default": !disabled,
+          "border-muted peer-checked:text-primary-muted-3x peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-muted-2x": disabled
         }
       )
     }));
@@ -8333,10 +8569,10 @@ var RadioButton = import_react36.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-default",
-          "outline-none focus:border-info-70 checked:bg-primary-80 checked:shadow-whiteInset",
+          "outline-none focus:border-info-default checked:bg-primary-default checked:shadow-whiteInset",
           {
-            "hover:border-intense checked:border-primary-80": !disabled,
-            "cursor-not-allowed border-muted bg-grey-0 checked:bg-opacity-40 checked:bg-primary-40 checked:border-primary-40": disabled
+            "hover:border-intense checked:border-primary-default": !disabled,
+            "cursor-not-allowed border-muted bg-muted checked:bg-opacity-40 checked:bg-primary-muted checked:border-primary-muted-2x": disabled
           }
         )
       ),
@@ -8873,7 +9109,7 @@ var ControlLabel = (_a) => {
     "style",
     "className"
   ]);
-  const textClass = disabled ? "text-muted" : "text-default";
+  const textClass = disabled ? "text-muted-2x" : "text-default";
   const rtl = labelPlacement === "left";
   const labelEl = label && /* @__PURE__ */ import_react44.default.createElement("span", {
     className: tw("typography-small self-center", { "text-right": rtl })
@@ -9129,7 +9365,7 @@ var CharCounter = ({ dense = true, length, maxLength, valid = true }) => {
   return /* @__PURE__ */ import_react49.default.createElement("span", {
     className: tw(
       `whitespace-nowrap`,
-      valid ? "text-grey-50" : "text-error-70",
+      valid ? "text-muted" : "text-danger-default",
       dense ? "typography-caption" : "typography-small"
     )
   }, `${length} / ${maxLength}`);
@@ -9164,7 +9400,7 @@ var HelperText = ({
     colEnd: "2"
   }, hasError && /* @__PURE__ */ import_react50.default.createElement("p", {
     id: messageId,
-    className: tw("text-error-50 block typography-caption")
+    className: tw("text-danger-default block typography-caption")
   }, helperText)), /* @__PURE__ */ import_react50.default.createElement(GridItem2, {
     colStart: "2",
     colEnd: "3",
@@ -9196,22 +9432,22 @@ var LabelText = ({
   }, /* @__PURE__ */ import_react51.default.createElement("span", {
     className: tw("inline-flex items-center typography-small-strong", {
       "text-default": variant === "default",
-      "text-error-50": variant === "error",
-      "text-muted": variant === "disabled"
+      "text-danger-default": variant === "error",
+      "text-muted-2x": variant === "disabled"
     })
   }, labelText, required && /* @__PURE__ */ import_react51.default.createElement("span", {
-    className: tw("text-error-50")
+    className: tw("text-danger-default")
   }, "*"), helpTooltip && /* @__PURE__ */ import_react51.default.createElement(Tooltip, {
     content: helpTooltip,
     placement: helpTooltipPlacement
   }, /* @__PURE__ */ import_react51.default.createElement("span", {
     tabIndex: 0,
-    className: tw("text-muted flex items-center cursor-pointer ml-2")
+    className: tw("text-muted-2x flex items-center cursor-pointer ml-2")
   }, /* @__PURE__ */ import_react51.default.createElement(InlineIcon, {
     icon: import_questionMark2.default,
     "data-testid": "icon-info"
   })))), description && /* @__PURE__ */ import_react51.default.createElement("span", {
-    className: tw("block text-grey-50 typography-caption mt-1")
+    className: tw("block text-muted typography-caption mt-1")
   }, description));
 };
 var Label2 = (props) => {
@@ -9403,8 +9639,8 @@ var ChoiceChip = (_a) => {
     className: classNames(
       "Aquarium-ChoiceChip",
       tw("inline-flex items-center border rounded-sm transition whitespace-nowrap cursor-pointer", {
-        "bg-white border-default text-grey-60": !selected,
-        "bg-grey-0 border-grey-100 text-grey-100": selected,
+        "bg-body border-default text-grey-60": !selected,
+        "bg-muted border-grey-100 text-intense": selected,
         "typography-small py-2 px-3 gap-x-3": !dense,
         "typography-caption py-1 px-2 gap-x-2": Boolean(dense)
       })
@@ -9433,7 +9669,9 @@ var PopoverPanel = import_react54.default.forwardRef((_a, ref) => {
     ref,
     className: classNames(
       className,
-      tw("rounded-sm shadow-16dp bg-white mt-1 overflow-y-auto flex flex-col border border-default outline-none")
+      tw(
+        "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none"
+      )
     )
   }, props), children);
 });
@@ -9806,7 +10044,7 @@ var Divider2 = (_a) => {
   return /* @__PURE__ */ import_react59.default.createElement("div", __spreadProps(__spreadValues({}, props), {
     className: classNames(
       "Aquarium-Divider",
-      tw(`bg-grey-5 ${sizeClass}`, {
+      tw(`bg-default ${sizeClass}`, {
         "block w-full": direction === "horizontal",
         "inline-block h-full": direction === "vertical"
       })
@@ -9854,7 +10092,7 @@ var AccordionToggle = (_a) => {
     onChange ? onChange(id, isOpen) : setOpenPanelId(isOpen ? void 0 : id);
   };
   const { transform } = (0, import_web3.useSpring)({
-    transform: `rotate(${isOpen ? 0 : 180}deg)`,
+    transform: `rotate(${isOpen ? 180 : 90}deg)`,
     config: {
       duration: 150
     }
@@ -9962,7 +10200,7 @@ var InputAdornment = ({
   children
 }) => {
   return /* @__PURE__ */ import_react62.default.createElement("span", {
-    className: classNames(className, "absolute inset-y-0 grow-0 text-muted flex items-center mx-3", {
+    className: classNames(className, "absolute inset-y-0 grow-0 text-muted-2x flex items-center mx-3", {
       "right-0": placement === "right",
       "left-0": placement === "left",
       "typography-small": dense,
@@ -9975,14 +10213,14 @@ var InputAdornment = ({
 };
 var SearchIcon = ({ onClick }) => /* @__PURE__ */ import_react62.default.createElement(Icon, {
   icon: import_search3.default,
-  color: "grey-30",
+  color: "muted-3x",
   "data-testid": "icon-search",
   onClick
 });
 var ResetIcon = ({ onClick }) => /* @__PURE__ */ import_react62.default.createElement(Icon, {
   className: "hover:cursor-pointer",
   icon: import_cross5.default,
-  color: "grey-30",
+  color: "muted-3x",
   "data-testid": "icon-reset",
   onClick
 });
@@ -10033,6 +10271,7 @@ var createInput = (displayName, opts = {}) => {
         disabled,
         maxLength,
         "aria-required": required,
+        role: opts.isSearch ? "searchbox" : props.role,
         readOnly,
         className: classNames(
           {
@@ -10055,23 +10294,32 @@ var createInput = (displayName, opts = {}) => {
   return InputComponent;
 };
 var InputBase = createInput("InputBase");
-var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ import_react63.default.createElement(SearchIcon, null), canReset: true });
-var Input2 = import_react63.default.forwardRef((_a, ref) => {
-  var _b = _a, { readOnly = false } = _b, props = __objRest(_b, ["readOnly"]);
-  var _a2, _b2, _c;
-  const [value, setValue] = (0, import_react63.useState)((_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : "");
-  const controlledValue = props.value;
-  (0, import_react63.useEffect)(() => {
-    if (controlledValue !== void 0) {
-      setValue(controlledValue);
-    }
-  }, [controlledValue]);
+var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ import_react63.default.createElement(SearchIcon, null), canReset: true, isSearch: true });
+var Input2 = import_react63.default.forwardRef((inputProps, ref) => {
+  var _b, _c;
+  const _a = inputProps, { readOnly = false, value: valueProp, onChange: onChangeProp } = _a, props = __objRest(_a, ["readOnly", "value", "onChange"]);
+  const isControlled = typeof valueProp !== "undefined";
+  const [valueState, setValueState] = (0, import_react63.useState)((_b = props.defaultValue) != null ? _b : "");
+  const value = isControlled ? valueProp : valueState;
+  const handleChange = (0, import_react63.useCallback)(
+    (e) => {
+      const next = e.target.value;
+      if (!isControlled) {
+        setValueState(next);
+      }
+      onChangeProp == null ? void 0 : onChangeProp(e);
+    },
+    [isControlled, onChangeProp]
+  );
   const defaultId = (0, import_utils9.useId)();
   const id = (_c = props.id) != null ? _c : defaultId;
   const errorMessageId = (0, import_utils9.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
-  const _d = getLabelControlProps(props), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
-  const baseProps = (0, import_omit5.default)(props, Object.keys(labelControlProps));
+  const _d = getLabelControlProps(inputProps), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
+  const baseProps = (0, import_omit5.default)(
+    inputProps,
+    Object.keys(labelControlProps).concat(isControlled ? ["defaultValue"] : ["value"])
+  );
   return /* @__PURE__ */ import_react63.default.createElement(LabelControl, __spreadProps(__spreadValues({
     id: `${id}-label`,
     htmlFor: id,
@@ -10084,11 +10332,7 @@ var Input2 = import_react63.default.forwardRef((_a, ref) => {
   }, baseProps), errorProps), {
     id,
     "data-testid": dataTestId,
-    onChange: (e) => {
-      var _a3;
-      setValue(e.currentTarget.value);
-      (_a3 = props.onChange) == null ? void 0 : _a3.call(props, e);
-    },
+    onChange: handleChange,
     disabled: props.disabled,
     maxLength: props.maxLength,
     required: props.required,
@@ -10359,7 +10603,7 @@ var Pagination = ({
       "Aquarium-Pagination",
       tw({ "grid grid-cols-[200px_1fr_200px]": !!pageSizes, "flex flex-nowrap justify-center": !pageSizes })
     ),
-    backgroundColor: "grey-0",
+    backgroundColor: "muted",
     padding: "4"
   }, pageSizes && onPageSizeChange && typeof pageSize === "number" ? /* @__PURE__ */ import_react65.default.createElement(Box, {
     display: "flex",
@@ -10573,7 +10817,7 @@ var List = (_a) => {
   }, /* @__PURE__ */ import_react68.default.createElement(Icon, {
     width: 22,
     icon: import_loading3.default,
-    className: tw("text-grey-50")
+    className: tw("text-muted")
   }), /* @__PURE__ */ import_react68.default.createElement(Typography2.Small, {
     color: "grey-70"
   }, loadingIndicator)), pagination && /* @__PURE__ */ import_react68.default.createElement(Pagination, __spreadValues(__spreadValues({}, paginationState), paginationProps))));
@@ -10605,7 +10849,7 @@ var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ import_react69.default.createElement("tbody", __spreadValues({}, rest), children);
 };
-var rowClassNames = tw("children:border-default group children:last:border-b-0 hover:bg-grey-0");
+var rowClassNames = tw("children:border-default group children:last:border-b-0 hover:bg-muted");
 var TableRow = (_a) => {
   var _b = _a, { children, className, disabled } = _b, rest = __objRest(_b, ["children", "className", "disabled"]);
   return /* @__PURE__ */ import_react69.default.createElement("tr", __spreadProps(__spreadValues(__spreadValues({}, rest), { inert: disabled ? "" : void 0 }), {
@@ -10618,13 +10862,13 @@ var cellClassNames = tw("px-4 border-b typography-small leading-[18px]");
 var getBodyCellClassNames = (table = true, stickyColumn) => tw("text-default py-3", {
   "h-[50px]": table,
   "min-h-[50px]": !table,
-  "sticky z-10 bg-white group-hover:bg-grey-0": Boolean(stickyColumn),
+  "sticky z-10 bg-body group-hover:bg-muted": Boolean(stickyColumn),
   "left-0": stickyColumn === "left",
   "right-0": stickyColumn === "right"
 });
 var getAlignClassNames = (align) => tw({ "text-right": align === "right", "text-center": align === "center" });
 var getHeadCellClassNames = (sticky = true, stickyColumn) => {
-  const common = tw("py-[14px] text-left bg-white border-intense text-grey-50 font-semibold whitespace-nowrap");
+  const common = tw("py-[14px] text-left bg-body border-intense text-muted font-semibold whitespace-nowrap");
   return sticky ? classNames(
     common,
     tw("sticky top-0", {
@@ -10664,9 +10908,9 @@ var TableSelectCell = (_a) => {
     "aria-label": ariaLabel
   }, props)));
 };
-var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4 text-grey-50", { "flex-row-reverse": align === "right" });
+var getSortCellButtonClassNames = (align) => tw("group flex items-center gap-x-4 text-muted", { "flex-row-reverse": align === "right" });
 var getSortCellIconClassNames = (active) => {
-  return tw("text-[9px]", active ? "text-default" : "text-muted");
+  return tw("text-[9px]", active ? "text-default" : "text-muted-2x");
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
@@ -10783,8 +11027,8 @@ var Row = (_a) => {
   }), { inert: disabled ? "" : void 0 }), {
     className: classNames(tw("contents"), className, {
       "children:opacity-70": disabled,
-      "[&>*]:bg-primary-5": active,
-      "[&>*]:hover:bg-grey-0": !disabled && !header
+      "[&>*]:bg-primary-muted-3x": active,
+      "[&>*]:hover:bg-muted": !disabled && !header
     })
   }));
 };
@@ -10792,10 +11036,7 @@ var SubGroupSpacing = (_a) => {
   var _b = _a, { className, divider } = _b, rest = __objRest(_b, ["className", "divider"]);
   return /* @__PURE__ */ import_react70.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
     "aria-hidden": true,
-    className: classNames(
-      tw("col-span-full h-6 bg-grey-0 border-default", { "border-b": Boolean(divider) }),
-      className
-    )
+    className: classNames(tw("col-span-full h-6 bg-muted border-default", { "border-b": Boolean(divider) }), className)
   }));
 };
 var SortCell = (_a) => {
@@ -10846,7 +11087,7 @@ var ToolbarContainer = (_a) => {
     role: "row",
     className: classNames(
       tw("col-span-full flex items-stretch py-4 px-l2 border-b border-default", {
-        "sticky top-[47px] bg-white z-10": sticky
+        "sticky top-[47px] bg-body z-10": sticky
       }),
       className
     )
@@ -10988,7 +11229,10 @@ var DropdownMenu = import_react72.default.forwardRef(
     return /* @__PURE__ */ import_react72.default.createElement("div", __spreadValues({
       ref,
       style: { minHeight, maxHeight, minWidth, maxWidth },
-      className: classNames(className, "bg-white w-full flex flex-col overflow-x-hidden typography-small text-default")
+      className: classNames(
+        className,
+        "bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
+      )
     }, props), children);
   }
 );
@@ -11012,8 +11256,8 @@ var Group2 = import_react72.default.forwardRef(
     return /* @__PURE__ */ import_react72.default.createElement("li", __spreadValues({
       ref
     }, props), title && /* @__PURE__ */ import_react72.default.createElement("div", __spreadValues({
-      className: classNames(className, "p-3 text-muted uppercase cursor-default typography-caption", {
-        "text-grey-20": props.disabled
+      className: classNames(className, "p-3 text-muted-2x uppercase cursor-default typography-caption", {
+        "text-muted-3x": props.disabled
       })
     }, titleProps), title), children);
   }
@@ -11025,10 +11269,10 @@ var Item3 = import_react72.default.forwardRef(
     return /* @__PURE__ */ import_react72.default.createElement("li", __spreadValues({
       ref,
       className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
-        "cursor-pointer hover:bg-grey-0": !props.disabled,
-        "bg-grey-0": highlighted,
-        "text-primary-80": kind === "action",
-        "text-grey-20 cursor-not-allowed": props.disabled
+        "cursor-pointer hover:bg-muted": !props.disabled,
+        "bg-muted": highlighted,
+        "text-primary-intense": kind === "action",
+        "text-muted-3x cursor-not-allowed": props.disabled
       })
     }, props), icon && showNotification && /* @__PURE__ */ import_react72.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react72.default.createElement(InlineIcon, {
       icon
@@ -11049,7 +11293,7 @@ DropdownMenu.Description = Description;
 var Separator = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react72.default.createElement("li", __spreadProps(__spreadValues({}, props), {
-    className: classNames(className, tw("m-3 block bg-grey-5 h-[1px]"))
+    className: classNames(className, tw("m-3 block bg-default h-[1px]"))
   }));
 };
 DropdownMenu.Separator = Separator;
@@ -11468,6 +11712,7 @@ var DataListGroup = (_a) => {
     selectable,
     selectedRows,
     onSelectionChange,
+    selectionDisabled = () => false,
     getRowCheckboxLabel = getDefaultRowCheckboxLabel,
     getGroupCheckboxLabel = getDefaultGroupCheckboxLabel
   } = props;
@@ -11488,6 +11733,7 @@ var DataListGroup = (_a) => {
         var _a2;
         const isChecked = (_a2 = selectedRows == null ? void 0 : selectedRows.includes(row.id)) != null ? _a2 : false;
         const isDisabled = disabled == null ? void 0 : disabled(row, index, rows);
+        const isSelectionDisabled = selectionDisabled(row, index, rows);
         return /* @__PURE__ */ import_react76.default.createElement(DataListRow, {
           key: row.id,
           columns,
@@ -11517,7 +11763,7 @@ var DataListGroup = (_a) => {
               "aria-label": getRowCheckboxLabel(row2, index2, isChecked, rows),
               onChange: onSelectionChange(row2.id),
               checked: isChecked,
-              disabled: isDisabled
+              disabled: isDisabled || isSelectionDisabled
             })));
           }
         });
@@ -11691,6 +11937,7 @@ var DataList2 = (_a) => {
     defaultSort,
     onSortChanged,
     selectable,
+    selectionDisabled = () => false,
     getRowCheckboxLabel = getDefaultRowCheckboxLabel,
     getGroupCheckboxLabel = getDefaultGroupCheckboxLabel,
     selectedRows,
@@ -11719,6 +11966,7 @@ var DataList2 = (_a) => {
     "defaultSort",
     "onSortChanged",
     "selectable",
+    "selectionDisabled",
     "getRowCheckboxLabel",
     "getGroupCheckboxLabel",
     "selectedRows",
@@ -11812,7 +12060,7 @@ var DataList2 = (_a) => {
     }, /* @__PURE__ */ import_react79.default.createElement(InlineIcon, {
       icon: column.icon,
       height: "22",
-      color: "grey-70",
+      color: "default",
       "aria-hidden": true
     }), content) : content;
     return columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react79.default.createElement(DataList.SortCell, __spreadValues({
@@ -11839,6 +12087,7 @@ var DataList2 = (_a) => {
     onGroupToggled,
     onMenuOpenChange,
     selectable,
+    selectionDisabled,
     selectedRows: selected,
     onSelectionChange: handleSelectionChange,
     getRowCheckboxLabel,
@@ -11854,6 +12103,7 @@ var DataList2 = (_a) => {
       var _a3;
       const details = rowDetails == null ? void 0 : rowDetails(row, index, sortedRows);
       const isChecked = (_a3 = selected == null ? void 0 : selected.includes(row.id)) != null ? _a3 : false;
+      const isSelectionDisabled = selectionDisabled == null ? void 0 : selectionDisabled(row, index, sortedRows);
       const isDisabled = disabled == null ? void 0 : disabled(row, index, sortedRows);
       const content = /* @__PURE__ */ import_react79.default.createElement(DataListRow, {
         key: row.id,
@@ -11882,7 +12132,7 @@ var DataList2 = (_a) => {
             "aria-label": getRowCheckboxLabel(row2, index2, isChecked, sortedRows),
             onChange: handleSelectionChange(row2.id),
             checked: isChecked,
-            disabled: isDisabled
+            disabled: isDisabled || isSelectionDisabled
           })), rowDetails !== void 0 && /* @__PURE__ */ import_react79.default.createElement(DataList.Cell, null, details && /* @__PURE__ */ import_react79.default.createElement(Accordion.Toggle, {
             panelId: row2.id.toString(),
             onChange: onGroupToggled
@@ -11898,7 +12148,7 @@ var DataList2 = (_a) => {
       }, content, /* @__PURE__ */ import_react79.default.createElement(Accordion.Panel, {
         role: "row",
         panelId: row.id.toString(),
-        className: tw("col-span-full bg-grey-0 border-b border-default"),
+        className: tw("col-span-full bg-muted border-b border-default"),
         "aria-label": `row ${row.id.toString()} details`
       }, /* @__PURE__ */ import_react79.default.createElement("div", {
         role: "cell"
@@ -12038,7 +12288,7 @@ var DataTable = (_a) => {
       }, /* @__PURE__ */ import_react82.default.createElement(InlineIcon, {
         icon: column.icon,
         height: "22",
-        color: "grey-70",
+        color: "default",
         "aria-hidden": true
       }), content) : content;
       return columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react82.default.createElement(Table2.SortCell, __spreadValues({
@@ -12143,15 +12393,15 @@ var import_warningSign3 = __toESM(require_warningSign());
 var DIALOG_ICONS_AND_COLORS = {
   confirmation: {
     icon: import_confirm2.default,
-    color: "info-70"
+    color: "info-default"
   },
   warning: {
     icon: import_warningSign3.default,
-    color: "secondary-70"
+    color: "warning-default"
   },
   danger: {
     icon: import_error4.default,
-    color: "error-70"
+    color: "danger-default"
   }
 };
 
@@ -12182,13 +12432,13 @@ var Modal = (_a) => {
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react83.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-primary-100 opacity-60"), className)
+    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-primary-intense opacity-60"), className)
   }));
 };
 Modal.Dialog = import_react83.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { kind = "dialog", children, className, size = "sm" } = _b, rest = __objRest(_b, ["kind", "children", "className", "size"]);
-    const commonClasses = tw("bg-white max-h-full flex flex-col");
+    const commonClasses = tw("bg-popover-content max-h-full flex flex-col");
     const dialogClasses = classNames("relative w-full rounded mx-7", {
       "max-w-[600px]": size === "sm",
       "max-w-[940px]": size === "md",
@@ -12222,7 +12472,7 @@ Modal.HeaderImage = (_a) => {
   }, rest), {
     className: classNames(common, tw("object-cover"), className)
   })) : /* @__PURE__ */ import_react83.default.createElement("div", {
-    className: classNames(common, tw("bg-grey-5"), className)
+    className: classNames(common, tw("bg-default"), className)
   });
 };
 Modal.CloseButtonContainer = (_a) => {
@@ -12415,12 +12665,12 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       if (status === "warning") {
         statusIcon = /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: selected ? void 0 : "warning-80"
+          color: selected ? void 0 : "warning-default"
         });
       } else if (status === "error") {
         statusIcon = /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: selected ? void 0 : "error-50"
+          color: selected ? void 0 : "danger-default"
         });
       }
       const tab = /* @__PURE__ */ import_react85.default.createElement(Component, __spreadValues({
@@ -12429,11 +12679,11 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
         onClick: () => !disabled && onSelected(value != null ? value : index),
         className: classNames(className, "px-5 py-3 z-10 no-underline appearance-none outline-none h-full", {
           "cursor-default": disabled,
-          "text-grey-80 focus:text-primary-80": !selected,
-          "hover:bg-grey-0": !selected && !disabled,
+          "text-default focus:text-primary-intense": !selected,
+          "hover:bg-muted": !selected && !disabled,
           "border-b-2": !defaultUnderlineHidden || selected,
           "border-default": !selected,
-          "border-primary-80": selected
+          "border-primary-default": selected
         }),
         type: "button",
         role: "tab",
@@ -12460,7 +12710,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       }, /* @__PURE__ */ import_react85.default.createElement(TabBadge, {
         kind: "filled",
         value: badge,
-        textClassname: classNames({ "text-white": selected, "text-grey-50": !selected })
+        textClassname: classNames({ "text-white": selected, "text-muted": !selected })
       })), statusIcon));
       return tooltip ? /* @__PURE__ */ import_react85.default.createElement(Tooltip, {
         content: tooltip
@@ -12626,7 +12876,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
       className: tw("absolute left-0 bg-gradient-to-r from-white via-white z-20 py-3 pr-4")
     }, /* @__PURE__ */ import_react85.default.createElement("div", {
       onClick: () => handleScrollToNext("left"),
-      className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
+      className: tw("hover:bg-muted p-2 leading-none cursor-pointer")
     }, /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
       icon: import_chevronLeft4.default
     }))), rightCaret && /* @__PURE__ */ import_react85.default.createElement("div", {
@@ -12634,7 +12884,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
       className: tw("absolute right-0 bg-gradient-to-l from-white via-white z-20 py-3 pl-4")
     }, /* @__PURE__ */ import_react85.default.createElement("div", {
       onClick: () => handleScrollToNext("right"),
-      className: tw("hover:bg-grey-0 p-2 leading-none cursor-pointer")
+      className: tw("hover:bg-muted p-2 leading-none cursor-pointer")
     }, /* @__PURE__ */ import_react85.default.createElement(InlineIcon, {
       icon: import_chevronRight4.default
     })))), renderChildren(children, selected, props));
@@ -12937,9 +13187,9 @@ var DropdownMenu3 = ({
   }, [menuRef.current]);
   return /* @__PURE__ */ import_react90.default.createElement("div", {
     style: { minWidth: "250px" },
-    className: tw("py-3 bg-white")
+    className: tw("py-3 bg-popover-content")
   }, !!title && /* @__PURE__ */ import_react90.default.createElement("div", {
-    className: tw("px-4 py-4 text-left text-grey-100 typography-default-strong")
+    className: tw("px-4 py-4 text-left text-intense typography-default-strong")
   }, title), /* @__PURE__ */ import_react90.default.createElement("ol", {
     role: "menu",
     ref: menuRef,
@@ -13011,9 +13261,9 @@ var DropdownItem = (_a) => {
     onKeyDown: handleKeyDown
   }, props), {
     className: tw("typography-small flex items-center focus:ring-0", {
-      "text-default cursor-pointer hover:bg-grey-0": !disabled,
-      "text-muted cursor-not-allowed": disabled,
-      "text-primary-70 hover:text-primary-80": color === "danger" && !disabled
+      "text-default cursor-pointer hover:bg-muted": !disabled,
+      "text-muted-2x cursor-not-allowed": disabled,
+      "text-primary-default hover:text-primary-intense": color === "danger" && !disabled
     })
   }), tooltip ? /* @__PURE__ */ import_react90.default.createElement(Tooltip, {
     content: tooltip,
@@ -13283,7 +13533,7 @@ var ListItem = ({ name, icon, active = false }) => {
     variant: active ? "small-strong" : "small",
     color: "grey-70",
     htmlTag: "span",
-    className: `px-4 py-2 rounded-full ${active ? "bg-grey-5" : "hover:bg-grey-0"}`
+    className: `px-4 py-2 rounded-full ${active ? "bg-default" : "hover:bg-muted"}`
   }, /* @__PURE__ */ import_react98.default.createElement("img", {
     src: icon,
     alt: "",
@@ -13393,9 +13643,9 @@ var InputChip = import_react100.default.forwardRef(
     };
     return /* @__PURE__ */ import_react100.default.createElement("div", {
       className: classNames(className, "inline-flex align-middle mx-1 items-stretch rounded-sm break-all", {
-        "bg-error-0 ": invalid,
-        "bg-grey-0 ": !invalid && !disabled,
-        "bg-grey-5": disabled
+        "bg-danger-muted-2x ": invalid,
+        "bg-muted ": !invalid && !disabled,
+        "bg-default": disabled
       })
     }, /* @__PURE__ */ import_react100.default.createElement("div", {
       className: tw("px-2 py-1")
@@ -13408,15 +13658,15 @@ var InputChip = import_react100.default.forwardRef(
       onClick,
       className: tw("flex items-center p-1", {
         "pointer-events-none": !!disabled,
-        "hover:bg-error-10 focus:bg-error-20": invalid,
-        "hover:bg-grey-10 focus:bg-grey-20": !invalid && !disabled
+        "hover:bg-danger-muted focus:bg-danger-default": invalid,
+        "hover:bg-intense focus:bg-intense": !invalid && !disabled
       }),
       role: "button",
       "aria-label": `Remove ${String(children)}`
     }), /* @__PURE__ */ import_react100.default.createElement(Icon, {
       icon: import_smallCross2.default,
       className: tw({
-        "text-error-70": invalid,
+        "text-danger-default": invalid,
         "text-default": !invalid
       })
     })));
@@ -13934,7 +14184,7 @@ var NativeSelectBase = import_react103.default.forwardRef(
       className: classNames("Aquarium-NativeSelectBase", tw("relative block"))
     }, !readOnly && /* @__PURE__ */ import_react103.default.createElement("span", {
       className: tw(
-        "absolute right-0 inset-y-0 mr-4 text-muted flex ml-3 pointer-events-none typography-default-strong mt-4"
+        "absolute right-0 inset-y-0 mr-4 text-muted-2x flex ml-3 pointer-events-none typography-default-strong mt-4"
       )
     }, /* @__PURE__ */ import_react103.default.createElement(Icon, {
       icon: import_caretDown2.default,
@@ -13948,12 +14198,12 @@ var NativeSelectBase = import_react103.default.forwardRef(
       onBlur: handleBlur,
       className: classNames(
         tw(
-          "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-default placeholder:text-muted focus:outline-none",
+          "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-default placeholder:text-muted-2x focus:outline-none",
           {
-            "px-3 py-3 disabled:border-default disabled:bg-grey-5 disabled:text-muted": !readOnly,
+            "px-3 py-3 disabled:border-default disabled:bg-default disabled:text-muted-2x": !readOnly,
             "px-0 py-3 border-none": readOnly,
-            "border border-error-50": !valid && !readOnly,
-            "border border-default hover:border-intense focus:border-info-70": valid && !readOnly
+            "border border-danger-default": !valid && !readOnly,
+            "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
           }
         ),
         props.className
@@ -14019,7 +14269,7 @@ var import_react104 = __toESM(require("react"));
 var Navigation = (_a) => {
   var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ import_react104.default.createElement("nav", {
-    className: classNames(tw("bg-grey-0 h-full"))
+    className: classNames(tw("bg-muted h-full"))
   }, /* @__PURE__ */ import_react104.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col h-full"), className),
     role: "menubar"
@@ -14045,7 +14295,7 @@ var Section2 = (_a) => {
     role: "presentation",
     className: tw("py-5")
   }, title && /* @__PURE__ */ import_react104.default.createElement("div", {
-    className: classNames(className, "py-2 px-6 text-muted uppercase cursor-default typography-caption")
+    className: classNames(className, "py-2 px-6 text-muted-2x uppercase cursor-default typography-caption")
   }, title), /* @__PURE__ */ import_react104.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     role: "group",
     className: classNames(tw("flex flex-col"), className)
@@ -14066,9 +14316,9 @@ var Item5 = (_a) => {
   }, /* @__PURE__ */ import_react104.default.createElement("a", __spreadProps(__spreadValues({}, rest), {
     role: "menuitem",
     className: classNames(
-      tw("py-3 px-6 hover:bg-grey-5 cursor-pointer flex gap-4 items-center typography-small focusable", {
+      tw("py-3 px-6 hover:bg-default cursor-pointer flex gap-4 items-center typography-small focusable", {
         "text-grey-60": !active,
-        "text-primary-80": !!active
+        "text-primary-intense": !!active
       }),
       className
     )
@@ -14309,17 +14559,14 @@ var import_clamp3 = __toESM(require("lodash/clamp"));
 var ProgressBar = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ import_react110.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(
-      tw("relative flex items-center w-full bg-grey-0 h-2 rounded-full overflow-hidden"),
-      className
-    )
+    className: classNames(tw("relative flex items-center w-full bg-muted h-2 rounded-full overflow-hidden"), className)
   }), children);
 };
 var STATUS_COLORS = {
-  info: tw("bg-info-50"),
-  warning: tw("bg-warning-70"),
-  success: tw("bg-success-70"),
-  error: tw("bg-error-70")
+  info: tw("bg-info-default"),
+  warning: tw("bg-warning-default"),
+  success: tw("bg-success-default"),
+  error: tw("bg-danger-intense")
 };
 ProgressBar.Indicator = (_a) => {
   var _b = _a, { min, max, value, "aria-label": ariaLabel, status, className } = _b, rest = __objRest(_b, ["min", "max", "value", "aria-label", "status", "className"]);
@@ -14534,11 +14781,11 @@ var Switch = import_react114.default.forwardRef(
       className: classNames(
         tw(
           "appearance-none peer/switch rounded-full inline-block w-[34px] h-[20px] transition duration-300",
-          "outline-none focusable bg-grey-10",
+          "outline-none focusable bg-intense",
           "cursor-pointer disabled:cursor-not-allowed",
           {
-            "hover:bg-grey-20 checked:bg-primary-80 hover:checked:bg-primary-70": !disabled,
-            "bg-grey-5 checked:opacity-50 checked:bg-primary-40": disabled
+            "hover:bg-intense checked:bg-primary-default hover:checked:bg-primary-intense": !disabled,
+            "bg-default checked:opacity-50 checked:bg-primary-muted": disabled
           }
         )
       ),
@@ -14547,7 +14794,7 @@ var Switch = import_react114.default.forwardRef(
     })), /* @__PURE__ */ import_react114.default.createElement("span", {
       className: tw(
         "pointer-events-none rounded-full absolute inline-flex justify-center items-center transition duration-300 h-4 w-4 transform peer-checked/switch:translate-x-5",
-        "bg-white left-2 peer-checked/switch:left-1 text-grey-30 peer-checked/switch:text-primary-60",
+        "bg-white left-2 peer-checked/switch:left-1 text-muted-3x peer-checked/switch:text-primary-muted",
         {
           "shadow-4dp": !disabled
         }
@@ -14622,12 +14869,12 @@ var import_react116 = __toESM(require("react"));
 var getVariantClassNames = (variant = "primary") => {
   switch (variant) {
     case "danger":
-      return tw("bg-secondary-90");
+      return tw("bg-secondary-default");
     case "success":
-      return tw("bg-success-90");
+      return tw("bg-success-intense");
     case "primary":
     default:
-      return tw("bg-primary-90");
+      return tw("bg-primary-intense");
   }
 };
 var TagLabel = (_a) => {
@@ -14659,7 +14906,7 @@ Section3.Header = (_a) => {
   var _b = _a, { children, className, expanded } = _b, rest = __objRest(_b, ["children", "className", "expanded"]);
   return /* @__PURE__ */ import_react117.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("px-6 flex gap-5 justify-between items-center h-[72px]", { "bg-grey-0": expanded }),
+      tw("px-6 flex gap-5 justify-between items-center h-[72px]", { "bg-muted": expanded }),
       className
     )
   }), children);
@@ -14740,7 +14987,7 @@ var Section4 = (props) => {
   const _f = (0, import_web5.useSpring)({
     height: height !== null ? targetHeight : void 0,
     opacity: isCollapsed ? 0 : 1,
-    transform: `rotate(${isCollapsed ? 180 : 0}deg)`,
+    transform: `rotate(${isCollapsed ? 90 : 180}deg)`,
     backgroundColor: isCollapsed ? tailwind_theme_default.backgroundColor["grey-0"] : tailwind_theme_default.backgroundColor["grey-5"],
     config: {
       duration: 150
@@ -14853,8 +15100,8 @@ var SegmentedControlGroup = (_a) => {
     "ariaLabel"
   ]);
   const classes2 = tw("rounded flex", {
-    "border border-default text-grey-50": variant === "outlined",
-    "bg-grey-0": variant === "raised"
+    "border border-default text-muted": variant === "outlined",
+    "bg-muted": variant === "raised"
   });
   return /* @__PURE__ */ import_react119.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     "aria-label": ariaLabel,
@@ -14870,31 +15117,31 @@ var SegmentedControlGroup = (_a) => {
   ));
 };
 var getHoverClassNames = (variant) => tw(
-  "hover:text-grey-90",
+  "hover:text-intense",
   {
-    "hover:bg-grey-0": variant !== "raised",
-    "hover:bg-grey-5": variant === "raised"
+    "hover:bg-muted": variant !== "raised",
+    "hover:bg-default": variant === "raised"
   },
   {
-    "active:bg-grey-5": variant !== "raised",
-    "active:bg-grey-10": variant === "raised"
+    "active:bg-default": variant !== "raised",
+    "active:bg-intense": variant === "raised"
   }
 );
-var getSelectedClassNames = (variant) => tw("relative z-40 text-grey-90", {
+var getSelectedClassNames = (variant) => tw("relative z-40 text-intense", {
   "bg-white ring-2 ring-offset-0 ring-grey-30 focus:ring-2": variant === "outlined",
   "bg-white shadow-2dp": variant === "raised",
-  "bg-grey-5": variant === "filled"
+  "bg-default": variant === "filled"
 });
 var getCommonClassNames = (dense, selected) => tw(
   "transition whitespace-nowrap rounded mr-1",
   "focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-grey-60",
-  "disabled:cursor-not-allowed disabled:text-grey-30",
+  "disabled:cursor-not-allowed disabled:text-muted-3x",
   {
     "py-4 px-5": !dense,
     "py-2 px-4": dense,
     "typography-default-strong": !dense,
     "typography-small-strong": dense,
-    "text-grey-50": !selected
+    "text-muted": !selected
   }
 );
 
@@ -14935,8 +15182,8 @@ var Connector = (_a) => {
   return /* @__PURE__ */ import_react120.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
       tw("w-full", {
-        "bg-grey-20": !completed,
-        "bg-success-70": Boolean(completed),
+        "bg-intense": !completed,
+        "bg-success-default": Boolean(completed),
         "h-[2px]": !dense,
         "h-[3px]": Boolean(dense)
       }),
@@ -14948,22 +15195,22 @@ var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
   return /* @__PURE__ */ import_react120.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames(
-      tw("flex flex-col items-center text-grey-90 relative text-center", {
-        "text-grey-20": state === "inactive"
+      tw("flex flex-col items-center text-intense relative text-center", {
+        "text-muted-3x": state === "inactive"
       }),
       className
     )
   }));
 };
 var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
-  "border-grey-90 bg-white": state === "active",
-  "border-default bg-white": state === "inactive",
-  "text-white bg-success-70 border-success-70": state === "completed"
+  "border-grey-90 bg-body": state === "active",
+  "border-default bg-body": state === "inactive",
+  "text-white bg-success-default border-success-intense": state === "completed"
 });
 var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
-  "bg-grey-90": state === "active",
-  "bg-grey-20": state === "inactive",
-  "text-success-70": state === "completed"
+  "bg-intense-2x": state === "active",
+  "bg-intense": state === "inactive",
+  "text-success-default": state === "completed"
 });
 var Indicator = (_a) => {
   var _b = _a, { children, className, state, dense } = _b, rest = __objRest(_b, ["children", "className", "state", "dense"]);
@@ -15169,13 +15416,13 @@ var LineContainer = (_a) => {
 var Line = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react124.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("w-1 bg-grey-5 h-full justify-self-center"), className)
+    className: classNames(tw("w-1 bg-default h-full justify-self-center"), className)
   }));
 };
 var Dot = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react124.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("bg-grey-30 h-[6px] w-[6px] rounded"), className)
+    className: classNames(tw("bg-intense h-[6px] w-[6px] rounded"), className)
   }));
 };
 Separator2.Dot = Dot;
@@ -15200,13 +15447,13 @@ var Timeline2 = ({ children }) => /* @__PURE__ */ import_react125.default.create
       key: key != null ? key : props.title
     }, /* @__PURE__ */ import_react125.default.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ import_react125.default.createElement(Icon, {
       icon: import_error5.default,
-      color: "error-30"
+      color: "danger-default"
     }) : props.variant === "warning" ? /* @__PURE__ */ import_react125.default.createElement(Icon, {
       icon: import_warningSign5.default,
-      color: "warning-30"
+      color: "warning-default"
     }) : props.variant === "info" ? /* @__PURE__ */ import_react125.default.createElement(Icon, {
       icon: import_time2.default,
-      color: "info-30"
+      color: "info-default"
     }) : /* @__PURE__ */ import_react125.default.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ import_react125.default.createElement(Typography2.Caption, {
       color: "grey-50"
     }, props.title), /* @__PURE__ */ import_react125.default.createElement(Timeline.LineContainer, null, /* @__PURE__ */ import_react125.default.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ import_react125.default.createElement(Timeline.Content, null, /* @__PURE__ */ import_react125.default.createElement(Typography2.Small, null, props.children)));