@aivenio/aquarium 1.65.2 → 1.67.0-rc1

package/dist/system.mjs

@@ -650,12 +650,8 @@ var require_resolveTheme = __commonJS({
   "src/js/resolveTheme.js"(exports, module) {
     "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`);
-    }
     module.exports = {
-      theme: tokensJson.themes[themeName]
+      theme: tokensJson.themes.aiven
     };
   }
 });
@@ -4892,7 +4888,7 @@ var classNames = (...args) => {
 // src/molecules/Icon/Icon.tsx
 var Icon = React.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__ */ React.createElement(IconifyIconComponent, __spreadValues({
     ref: ref != null ? ref : void 0,
     className: classes2 !== "" ? classes2 : void 0
@@ -4900,7 +4896,7 @@ var Icon = React.forwardRef((_a, ref) => {
 });
 var InlineIcon = React.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__ */ React.createElement("span", {
     className: classNames(tw("children:inline-block inline-flex justify-center items-center"), className)
   }, /* @__PURE__ */ React.createElement(IconifyInlineIconComponent, __spreadValues({
@@ -4934,16 +4930,16 @@ var InputContainer = React2.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));
@@ -4956,10 +4952,10 @@ var Input = React2.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-inactive",
       {
         "text-default": !props.disabled,
-        "text-grey-30": props.disabled,
+        "text-inactive": props.disabled,
         "cursor-default": props.readOnly
       }
     )
@@ -4981,7 +4977,7 @@ var NoResults = React2.forwardRef(
     return /* @__PURE__ */ React2.createElement("li", __spreadProps(__spreadValues({
       ref
     }, rest), {
-      className: classNames(tw("p-3 text-muted italic typography-small"), className)
+      className: classNames(tw("p-3 text-inactive italic typography-small"), className)
     }), children);
   }
 );
@@ -5001,10 +4997,7 @@ var Group = React2.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",
-      {
-        "text-grey-20": props.disabled
-      }
+      "flex items-center gap-x-3 p-3 text-inactive uppercase cursor-default typography-caption mt-4 first:mt-0"
     )
   }, props), children);
 });
@@ -5014,9 +5007,9 @@ var Item = React2.forwardRef(
     return /* @__PURE__ */ React2.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__ */ React2.createElement("span", {
       className: tw("grow flex gap-x-3")
@@ -5032,12 +5025,11 @@ var ActionItem = React2.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", {
         "p-3": !dense,
         "px-3 py-2": dense,
-        "cursor-pointer": !props.disabled,
-        "text-grey-20": props.disabled,
-        "hover:text-primary-70": !props.disabled
+        "text-primary-intense cursor-pointer hover:text-primary-default": !props.disabled,
+        "text-inactive cursor-not-allowed": props.disabled
       })
     }, props), icon && /* @__PURE__ */ React2.createElement(InlineIcon, {
       icon
@@ -5054,7 +5046,7 @@ var Toggle = React2.forwardRef((_a, ref) => {
   }, props), {
     className: tw("grow-0 leading-none", { "cursor-not-allowed": (_a2 = props.disabled) != null ? _a2 : false })
   }), /* @__PURE__ */ React2.createElement(InlineIcon, {
-    color: props.disabled ? "grey-40" : "grey-70",
+    color: props.disabled ? "inactive" : "default",
     icon: hasFocus ? import_search.default : isOpen ? import_chevronUp.default : import_chevronDown.default
   }));
 });
@@ -5454,7 +5446,259 @@ 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)",
+    "body-intense": "var(--aquarium-background-color-body-intense)",
+    "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)",
+    "primary-muted": "var(--aquarium-background-color-primary-muted)",
+    "primary-default": "var(--aquarium-background-color-primary-default)",
+    "primary-intense": "var(--aquarium-background-color-primary-intense)",
+    "primary-active": "var(--aquarium-background-color-primary-active)",
+    "primary-hover": "var(--aquarium-background-color-primary-hover)",
+    "info-muted": "var(--aquarium-background-color-info-muted)",
+    "info-default": "var(--aquarium-background-color-info-default)",
+    "info-intense": "var(--aquarium-background-color-info-intense)",
+    "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)",
+    "warning-intense": "var(--aquarium-background-color-warning-intense)",
+    "danger-muted": "var(--aquarium-background-color-danger-muted)",
+    "danger-default": "var(--aquarium-background-color-danger-default)",
+    "danger-intense": "var(--aquarium-background-color-danger-intense)",
+    "status-announcement": "var(--aquarium-background-color-status-announcement)",
+    "status-info": "var(--aquarium-background-color-status-info)",
+    "status-warning": "var(--aquarium-background-color-status-warning)",
+    "status-danger": "var(--aquarium-background-color-status-danger)",
+    "status-success": "var(--aquarium-background-color-status-success)"
+  },
+  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)",
+    inactive: "var(--aquarium-text-color-inactive)",
+    muted: "var(--aquarium-text-color-muted)",
+    default: "var(--aquarium-text-color-default)",
+    intense: "var(--aquarium-text-color-intense)",
+    "primary-inactive": "var(--aquarium-text-color-primary-inactive)",
+    "primary-active": "var(--aquarium-text-color-primary-active)",
+    "primary-muted": "var(--aquarium-text-color-primary-muted)",
+    "primary-default": "var(--aquarium-text-color-primary-default)",
+    "primary-intense": "var(--aquarium-text-color-primary-intense)",
+    "info-inactive": "var(--aquarium-text-color-info-inactive)",
+    "info-muted": "var(--aquarium-text-color-info-muted)",
+    "info-default": "var(--aquarium-text-color-info-default)",
+    "info-intense": "var(--aquarium-text-color-info-intense)",
+    "success-inactive": "var(--aquarium-text-color-success-inactive)",
+    "success-muted": "var(--aquarium-text-color-success-muted)",
+    "success-default": "var(--aquarium-text-color-success-default)",
+    "success-intense": "var(--aquarium-text-color-success-intense)",
+    "warning-inactive": "var(--aquarium-text-color-warning-inactive)",
+    "warning-muted": "var(--aquarium-text-color-warning-muted)",
+    "warning-default": "var(--aquarium-text-color-warning-default)",
+    "warning-intense": "var(--aquarium-text-color-warning-intense)",
+    "danger-inactive": "var(--aquarium-text-color-danger-inactive)",
+    "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: "var(--aquarium-border-color-muted)",
+    default: "var(--aquarium-border-color-default)",
+    intense: "var(--aquarium-border-color-intense)",
+    "primary-muted": "var(--aquarium-border-color-primary-muted)",
+    "primary-default": "var(--aquarium-border-color-primary-default)",
+    "primary-intense": "var(--aquarium-border-color-primary-intense)",
+    "info-muted": "var(--aquarium-border-color-info-muted)",
+    "info-default": "var(--aquarium-border-color-info-default)",
+    "info-intense": "var(--aquarium-border-color-info-intense)",
+    "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)",
+    "warning-default": "var(--aquarium-border-color-warning-default)",
+    "warning-intense": "var(--aquarium-border-color-warning-intense)",
+    "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",
@@ -5930,8 +6174,8 @@ var Toast = (_a) => {
   return /* @__PURE__ */ React8.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames2(
       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-body-intense": variant === "default",
+        "bg-danger-intense": variant === "danger"
       }),
       className
     )
@@ -5942,8 +6186,8 @@ var Dismiss = (_a) => {
   return /* @__PURE__ */ React8.createElement("div", __spreadProps(__spreadValues({}, rest), {
     className: classNames2(
       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
     )
@@ -6759,7 +7003,7 @@ var TooltipWrapper = React14.forwardRef(
     const arrowStyle = getArrowStyle(ref.current, placement, (_a2 = arrowProps.style) != null ? _a2 : {});
     return /* @__PURE__ */ React14.createElement(OverlayContainer, null, /* @__PURE__ */ React14.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-body-intense text-white"))
     }, mergeProps(props, tooltipProps)), props.children, /* @__PURE__ */ React14.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
       style: arrowStyle
     }))));
@@ -6798,26 +7042,26 @@ var getArrowStyle = (element, position, { left, top }) => {
 };
 var Arrow = (props) => {
   return /* @__PURE__ */ React14.createElement("div", __spreadValues({
-    className: tw("absolute w-3 h-3 bg-grey-90 rotate-45")
+    className: tw("absolute w-3 h-3 bg-body-intense 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-inactive placeholder:text-inactive 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-active focus-visible:text-primary-active hover:text-primary-active disabled:text-primary-inactive"
 );
 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
@@ -6828,19 +7072,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-active 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-hover hover:ring-primary-90 hover:text-primary-intense",
+    "disabled:bg-body disabled:text-primary-inactive 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-inactive"
   )
 };
 var LoadingSpinner = ({ size = "20px" }) => {
@@ -6848,7 +7092,7 @@ var LoadingSpinner = ({ size = "20px" }) => {
     icon: import_loading2.default,
     width: size,
     height: size,
-    color: "primary-80",
+    color: "primary-intense",
     "data-testid": "loading-button"
   });
 };
@@ -6943,7 +7187,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-inactive disabled:bg-transparent": isIconOnlyButton,
               "typography-default-strong": !dense && !isIconOnlyButton && kind !== "text",
               "typography-small-strong": dense && !isIconOnlyButton && kind !== "text",
               "py-3 px-4": !dense && isButton,
@@ -7088,7 +7332,7 @@ var Typography = (_a) => {
   const resolvedColorName = isUndefined6(color) || color === "current" ? "default" : color;
   const style = useStyle({ fontWeight });
   return /* @__PURE__ */ React16.createElement(HtmlElement, __spreadValues({
-    className: classNames(typographies[variant], `text-${resolvedColorName}`, className),
+    className: classNames(typographies[variant], `text-${resolvedColorName.toString()}`, className),
     style
   }, rest), children);
 };
@@ -7244,23 +7488,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) => {
@@ -7279,11 +7523,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-status-danger": type === "error",
+        "bg-status-info": type === "information",
+        "bg-status-success": type === "success",
+        "bg-status-warning": type === "warning",
+        "bg-status-announcement": type === "announcement",
         "p-4": Boolean(dense),
         "p-5": !dense
       }),
@@ -7347,10 +7591,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-status-danger": type === "error",
+        "bg-status-announcement": type === "information",
+        "bg-status-success": type === "success",
+        "bg-status-warning": type === "warning"
       }),
       className
     )
@@ -7533,7 +7777,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]": isUndefined7(height),
         "rounded-full": rounded,
         "block": display === "block",
@@ -7575,7 +7819,7 @@ Avatar.Skeleton.displayName = "Avatar.Skeleton";
 import React22 from "react";
 var createBadge = (type, displayName) => {
   const Component = (props) => {
-    const _a = props, { kind = "filled", value, textClassname, dense = false } = _a, rest = __objRest(_a, ["kind", "value", "textClassname", "dense"]);
+    const _a = props, { kind = "filled", value, textClassname, dense = false, disabled = false } = _a, rest = __objRest(_a, ["kind", "value", "textClassname", "dense", "disabled"]);
     const valueStr = value.toString();
     return /* @__PURE__ */ React22.createElement("span", __spreadProps(__spreadValues({}, rest), {
       className: classNames(
@@ -7584,7 +7828,8 @@ var createBadge = (type, displayName) => {
           "rounded": type === "tab",
           "border border-current": kind === "outlined",
           "bg-current": kind === "filled" && type !== "chip",
-          "bg-white": type === "chip",
+          "bg-white": type === "chip" && !disabled,
+          "bg-muted": type === "chip" && disabled,
           "typography-caption-small leading-none py-1 px-2": !dense,
           "text-[8px]": dense,
           "px-1": dense && valueStr.length > 1,
@@ -7618,7 +7863,7 @@ var NotificationBadge = (_a) => {
     className: classNames("Aquarium-Badge.Notification", tw("relative inline-flex"))
   }), children, /* @__PURE__ */ React22.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) => {
@@ -7668,8 +7913,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);
@@ -7804,7 +8049,7 @@ var Breadcrumbs = (props) => {
       className: tw("flex flex-row items-center")
     }, !!index && /* @__PURE__ */ React25.createElement(Icon, {
       "aria-hidden": true,
-      className: tw("mx-2 text-grey-30"),
+      className: tw("mx-2 text-inactive"),
       icon: import_slash2.default
     }), !isLast && crumb, isLast && /* @__PURE__ */ React25.createElement(ActiveCrumb, {
       "aria-disabled": true,
@@ -7823,8 +8068,8 @@ var asCrumb = (Component, displayName, options = { isActive: false }) => {
     }), /* @__PURE__ */ React25.createElement("span", {
       className: classNames4(
         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__ */ React25.createElement(Icon, {
@@ -7879,16 +8124,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-status-info");
     case "warning":
-      return tw("text-secondary-80 bg-secondary-5");
+      return tw("text-warning-intense bg-status-warning");
     case "danger":
-      return tw("text-error-100 bg-error-5");
+      return tw("text-danger-intense bg-status-danger");
     case "success":
-      return tw("text-success-100 bg-success-5");
+      return tw("text-success-intense bg-status-success");
     case "neutral":
     default:
-      return tw("text-default bg-grey-5");
+      return tw("text-default bg-default");
   }
 };
 var Chip2 = (_a) => {
@@ -7912,17 +8157,18 @@ var Chip2 = (_a) => {
     className: classNames5(
       "Aquarium-Chip",
       tw({
-        "bg-grey-0 text-default": !locked,
-        "bg-grey-5 text-muted": locked
+        "bg-muted text-default": !locked,
+        "bg-grey-5 text-inactive": locked
       })
     )
   }, rest), icon && /* @__PURE__ */ React27.createElement(InlineIcon, {
     icon
   }), text, isNumber2(badge) && /* @__PURE__ */ React27.createElement(ChipBadge, {
+    disabled: locked,
     dense,
     value: badge,
-    textClassname: tw("text-grey-50")
-  }), onClose && /* @__PURE__ */ React27.createElement(InlineIcon, {
+    textClassname: tw("text-muted")
+  }), !locked && onClose && /* @__PURE__ */ React27.createElement(InlineIcon, {
     role: "button",
     "aria-hidden": false,
     icon: import_cross4.default,
@@ -7992,11 +8238,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 = React29.forwardRef((props, ref) => {
   const _a = props, {
@@ -8026,7 +8272,7 @@ var Card = React29.forwardRef((props, ref) => {
     className: classNames(
       getCommonCardStyles(props),
       tw({
-        "cursor-pointer hover:bg-primary-5 active:bg-white": clickable && !disabled,
+        "cursor-pointer hover:bg-primary-hover active:bg-body": clickable && !disabled,
         "focusable": clickable && modality === "keyboard"
       }),
       className
@@ -8039,8 +8285,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-hover active:bg-body": !disabled,
+        "border-primary-default": checked,
         "focusable": modality === "keyboard"
       }),
       className
@@ -8134,7 +8380,7 @@ var Checkbox = React30.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__ */ React30.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__ */ React30.createElement("input", __spreadProps(__spreadValues({
@@ -8145,25 +8391,25 @@ var Checkbox = React30.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,
       disabled
     })), /* @__PURE__ */ React30.createElement(Icon, {
       icon: indeterminate ? import_minus2.default : import_tick3.default,
-      strokeWidth: "2px",
+      strokeWidth: "3px",
       className: classNames(
         tw(
           "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"
+          "text-transparent [&>path]:stroke-transparent [&>path]:stroke-[3px]",
+          "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-default peer-checked:[&>path]:stroke-primary-70 peer-checked:border-transparent": disabled
         }
       )
     }));
@@ -8184,11 +8430,11 @@ var RadioButton = React31.forwardRef(
       className: classNames(
         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",
+          "w-5 h-5 p-[3px] rounded-full border border-default",
+          "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
+            "cursor-pointer hover:border-intense checked:border-primary-default": !disabled,
+            "cursor-not-allowed border-muted bg-muted checked:bg-primary-muted checked:border-transparent": disabled
           }
         )
       ),
@@ -8725,7 +8971,7 @@ var ControlLabel = (_a) => {
     "style",
     "className"
   ]);
-  const textClass = disabled ? "text-muted" : "text-default";
+  const textClass = disabled ? "text-inactive" : "text-default";
   const rtl = labelPlacement === "left";
   const labelEl = label && /* @__PURE__ */ React39.createElement("span", {
     className: tw("typography-small self-center", { "text-right": rtl })
@@ -8981,7 +9227,7 @@ var CharCounter = ({ dense = true, length, maxLength, valid = true }) => {
   return /* @__PURE__ */ React44.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}`);
@@ -9016,7 +9262,7 @@ var HelperText = ({
     colEnd: "2"
   }, hasError && /* @__PURE__ */ React45.createElement("p", {
     id: messageId,
-    className: tw("text-error-50 block typography-caption")
+    className: tw("text-danger-default block typography-caption")
   }, helperText)), /* @__PURE__ */ React45.createElement(GridItem2, {
     colStart: "2",
     colEnd: "3",
@@ -9048,22 +9294,22 @@ var LabelText = ({
   }, /* @__PURE__ */ React46.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-inactive": variant === "disabled"
     })
   }, labelText, required && /* @__PURE__ */ React46.createElement("span", {
-    className: tw("text-error-50")
+    className: tw("text-danger-default")
   }, "*"), helpTooltip && /* @__PURE__ */ React46.createElement(Tooltip, {
     content: helpTooltip,
     placement: helpTooltipPlacement
   }, /* @__PURE__ */ React46.createElement("span", {
     tabIndex: 0,
-    className: tw("text-muted flex items-center cursor-pointer ml-2")
+    className: tw("text-inactive flex items-center cursor-pointer ml-2")
   }, /* @__PURE__ */ React46.createElement(InlineIcon, {
     icon: import_questionMark2.default,
     "data-testid": "icon-info"
   })))), description && /* @__PURE__ */ React46.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) => {
@@ -9255,8 +9501,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)
       })
@@ -9285,7 +9531,9 @@ var PopoverPanel = React49.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);
 });
@@ -9658,7 +9906,7 @@ var Divider2 = (_a) => {
   return /* @__PURE__ */ React54.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"
       })
@@ -9706,7 +9954,7 @@ var AccordionToggle = (_a) => {
     onChange ? onChange(id, isOpen) : setOpenPanelId(isOpen ? void 0 : id);
   };
   const { transform } = useSpring2({
-    transform: `rotate(${isOpen ? 0 : 180}deg)`,
+    transform: `rotate(${isOpen ? 180 : 90}deg)`,
     config: {
       duration: 150
     }
@@ -9814,7 +10062,7 @@ var InputAdornment = ({
   children
 }) => {
   return /* @__PURE__ */ React56.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-inactive flex items-center mx-3", {
       "right-0": placement === "right",
       "left-0": placement === "left",
       "typography-small": dense,
@@ -9827,14 +10075,14 @@ var InputAdornment = ({
 };
 var SearchIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
   icon: import_search3.default,
-  color: "grey-30",
+  color: "inactive",
   "data-testid": "icon-search",
   onClick
 });
 var ResetIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
   className: "hover:cursor-pointer",
   icon: import_cross5.default,
-  color: "grey-30",
+  color: "inactive",
   "data-testid": "icon-reset",
   onClick
 });
@@ -9844,23 +10092,24 @@ var createInput = (displayName, opts = {}) => {
   const InputComponent = forwardRef(
     (_a, ref) => {
       var _b = _a, {
-        type = "text",
         maxLength,
         valid = true,
         required = false,
         endAdornment,
         disabled = false,
-        readOnly = false
+        readOnly = false,
+        type
       } = _b, props = __objRest(_b, [
-        "type",
         "maxLength",
         "valid",
         "required",
         "endAdornment",
         "disabled",
-        "readOnly"
+        "readOnly",
+        "type"
       ]);
       var _a2;
+      const inputType = opts.isSearch ? "search" : type;
       const inputRef = React57.useRef(null);
       useImperativeHandle(ref, () => inputRef.current);
       const handleReset = () => {
@@ -9880,15 +10129,15 @@ var createInput = (displayName, opts = {}) => {
         placement: "left"
       }, opts.adornment), /* @__PURE__ */ React57.createElement("input", __spreadProps(__spreadValues({
         ref: inputRef,
-        type
+        type: inputType
       }, props), {
         disabled,
         maxLength,
         "aria-required": required,
-        role: opts.isSearch ? "searchbox" : props.role,
         readOnly,
         className: classNames(
           {
+            "[&::-webkit-search-cancel-button]:appearance-none": opts.isSearch,
             "pl-7": opts.adornment,
             "pr-7": opts.canReset || endAdornment
           },
@@ -9908,7 +10157,11 @@ var createInput = (displayName, opts = {}) => {
   return InputComponent;
 };
 var InputBase = createInput("InputBase");
-var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ React57.createElement(SearchIcon, null), canReset: true, isSearch: true });
+var SearchInput = createInput("SearchInput", {
+  adornment: /* @__PURE__ */ React57.createElement(SearchIcon, null),
+  canReset: true,
+  isSearch: true
+});
 var Input2 = React57.forwardRef((inputProps, ref) => {
   var _b, _c;
   const _a = inputProps, { readOnly = false, value: valueProp, onChange: onChangeProp } = _a, props = __objRest(_a, ["readOnly", "value", "onChange"]);
@@ -10217,7 +10470,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__ */ React59.createElement(Box, {
     display: "flex",
@@ -10431,7 +10684,7 @@ var List = (_a) => {
   }, /* @__PURE__ */ React61.createElement(Icon, {
     width: 22,
     icon: import_loading3.default,
-    className: tw("text-grey-50")
+    className: tw("text-muted")
   }), /* @__PURE__ */ React61.createElement(Typography2.Small, {
     color: "grey-70"
   }, loadingIndicator)), pagination && /* @__PURE__ */ React61.createElement(Pagination, __spreadValues(__spreadValues({}, paginationState), paginationProps))));
@@ -10463,7 +10716,7 @@ var TableBody = (_a) => {
   var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
   return /* @__PURE__ */ React62.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__ */ React62.createElement("tr", __spreadProps(__spreadValues(__spreadValues({}, rest), { inert: disabled ? "" : void 0 }), {
@@ -10476,13 +10729,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", {
@@ -10522,9 +10775,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-inactive");
 };
 var TableSortCell = (_a) => {
   var _b = _a, { children, direction = "none", onClick } = _b, rest = __objRest(_b, ["children", "direction", "onClick"]);
@@ -10641,8 +10894,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-active": active,
+      "[&>*]:hover:bg-muted": !disabled && !header
     })
   }));
 };
@@ -10650,10 +10903,7 @@ var SubGroupSpacing = (_a) => {
   var _b = _a, { className, divider } = _b, rest = __objRest(_b, ["className", "divider"]);
   return /* @__PURE__ */ React63.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) => {
@@ -10704,7 +10954,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
     )
@@ -10846,7 +11096,10 @@ var DropdownMenu = React65.forwardRef(
     return /* @__PURE__ */ React65.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);
   }
 );
@@ -10870,9 +11123,7 @@ var Group2 = React65.forwardRef(
     return /* @__PURE__ */ React65.createElement("li", __spreadValues({
       ref
     }, props), title && /* @__PURE__ */ React65.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-inactive uppercase cursor-default typography-caption")
     }, titleProps), title), children);
   }
 );
@@ -10883,10 +11134,10 @@ var Item3 = React65.forwardRef(
     return /* @__PURE__ */ React65.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-inactive cursor-not-allowed": props.disabled
       })
     }, props), icon && showNotification && /* @__PURE__ */ React65.createElement(Badge.Notification, null, /* @__PURE__ */ React65.createElement(InlineIcon, {
       icon
@@ -10907,7 +11158,7 @@ DropdownMenu.Description = Description;
 var Separator = (_a) => {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
   return /* @__PURE__ */ React65.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;
@@ -11060,10 +11311,17 @@ var MenuWrapper = (_a) => {
   const { menuProps } = useMenu(props, state, ref);
   const { contains } = useFilter({ sensitivity: "base" });
   const [search, setSearch] = React66.useState("");
+  const searchInputRef = React66.useRef(null);
   const filteredCollection = React66.useMemo(
     () => searchable ? filterCollection(state.collection, search, contains) : state.collection,
     [searchable, state.collection, search, contains]
   );
+  React66.useEffect(() => {
+    var _a2;
+    if (searchable) {
+      (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+    }
+  }, [searchable]);
   return /* @__PURE__ */ React66.createElement(DropdownMenu, {
     minWidth,
     maxWidth,
@@ -11073,7 +11331,8 @@ var MenuWrapper = (_a) => {
     "aria-label": "search",
     value: search,
     onChange: (e) => setSearch(e.target.value),
-    className: tw("mb-5")
+    className: tw("mb-5"),
+    ref: searchInputRef
   }), filteredCollection.size === 0 && emptyState && /* @__PURE__ */ React66.createElement(DropdownMenu.EmptyStateContainer, null, emptyState), /* @__PURE__ */ React66.createElement(DropdownMenu.List, __spreadValues({
     ref
   }, menuProps), Array.from(filteredCollection).map((item) => {
@@ -11326,6 +11585,7 @@ var DataListGroup = (_a) => {
     selectable,
     selectedRows,
     onSelectionChange,
+    selectionDisabled = () => false,
     getRowCheckboxLabel = getDefaultRowCheckboxLabel,
     getGroupCheckboxLabel = getDefaultGroupCheckboxLabel
   } = props;
@@ -11346,6 +11606,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__ */ React68.createElement(DataListRow, {
           key: row.id,
           columns,
@@ -11375,7 +11636,7 @@ var DataListGroup = (_a) => {
               "aria-label": getRowCheckboxLabel(row2, index2, isChecked, rows),
               onChange: onSelectionChange(row2.id),
               checked: isChecked,
-              disabled: isDisabled
+              disabled: isDisabled || isSelectionDisabled
             })));
           }
         });
@@ -11549,6 +11810,7 @@ var DataList2 = (_a) => {
     defaultSort,
     onSortChanged,
     selectable,
+    selectionDisabled = () => false,
     getRowCheckboxLabel = getDefaultRowCheckboxLabel,
     getGroupCheckboxLabel = getDefaultGroupCheckboxLabel,
     selectedRows,
@@ -11577,6 +11839,7 @@ var DataList2 = (_a) => {
     "defaultSort",
     "onSortChanged",
     "selectable",
+    "selectionDisabled",
     "getRowCheckboxLabel",
     "getGroupCheckboxLabel",
     "selectedRows",
@@ -11670,7 +11933,7 @@ var DataList2 = (_a) => {
     }, /* @__PURE__ */ React71.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__ */ React71.createElement(DataList.SortCell, __spreadValues({
@@ -11697,6 +11960,7 @@ var DataList2 = (_a) => {
     onGroupToggled,
     onMenuOpenChange,
     selectable,
+    selectionDisabled,
     selectedRows: selected,
     onSelectionChange: handleSelectionChange,
     getRowCheckboxLabel,
@@ -11712,6 +11976,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__ */ React71.createElement(DataListRow, {
         key: row.id,
@@ -11740,7 +12005,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__ */ React71.createElement(DataList.Cell, null, details && /* @__PURE__ */ React71.createElement(Accordion.Toggle, {
             panelId: row2.id.toString(),
             onChange: onGroupToggled
@@ -11756,7 +12021,7 @@ var DataList2 = (_a) => {
       }, content, /* @__PURE__ */ React71.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__ */ React71.createElement("div", {
         role: "cell"
@@ -11896,7 +12161,7 @@ var DataTable = (_a) => {
       }, /* @__PURE__ */ React74.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__ */ React74.createElement(Table2.SortCell, __spreadValues({
@@ -12001,15 +12266,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"
   }
 };
 
@@ -12040,13 +12305,13 @@ var Modal = (_a) => {
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ React75.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 = React75.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",
@@ -12080,7 +12345,7 @@ Modal.HeaderImage = (_a) => {
   }, rest), {
     className: classNames(common, tw("object-cover"), className)
   })) : /* @__PURE__ */ React75.createElement("div", {
-    className: classNames(common, tw("bg-grey-5"), className)
+    className: classNames(common, tw("bg-default"), className)
   });
 };
 Modal.CloseButtonContainer = (_a) => {
@@ -12199,7 +12464,7 @@ var DialogWrapper = ({
 };
 
 // src/molecules/Drawer/Drawer.tsx
-import React78, { useEffect as useEffect9 } from "react";
+import React78 from "react";
 import { useOverlayTriggerState as useOverlayTriggerState3 } from "react-stately";
 import { useDialog as useDialog2 } from "@react-aria/dialog";
 import { Overlay as Overlay3, useModalOverlay as useModalOverlay2 } from "@react-aria/overlays";
@@ -12273,12 +12538,12 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       if (status === "warning") {
         statusIcon = /* @__PURE__ */ React77.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: selected ? void 0 : "warning-80"
+          color: selected ? void 0 : "warning-default"
         });
       } else if (status === "error") {
         statusIcon = /* @__PURE__ */ React77.createElement(InlineIcon, {
           icon: import_warningSign4.default,
-          color: selected ? void 0 : "error-50"
+          color: selected ? void 0 : "danger-default"
         });
       }
       const tab = /* @__PURE__ */ React77.createElement(Component, __spreadValues({
@@ -12287,11 +12552,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",
@@ -12318,7 +12583,7 @@ var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
       }, /* @__PURE__ */ React77.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__ */ React77.createElement(Tooltip, {
         content: tooltip
@@ -12484,7 +12749,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__ */ React77.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__ */ React77.createElement(InlineIcon, {
       icon: import_chevronLeft4.default
     }))), rightCaret && /* @__PURE__ */ React77.createElement("div", {
@@ -12492,7 +12757,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__ */ React77.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__ */ React77.createElement(InlineIcon, {
       icon: import_chevronRight4.default
     })))), renderChildren(children, selected, props));
@@ -12521,11 +12786,9 @@ var Drawer = (_a) => {
   const [hidden, setHidden] = React78.useState(!open);
   const ref = React78.useRef(null);
   const state = useOverlayTriggerState3({ isOpen: !hidden, onOpenChange: (isOpen) => !isOpen && onClose() });
-  useEffect9(() => {
-    if (open && hidden) {
-      setHidden(!open);
-    }
-  }, [open]);
+  if (open && hidden) {
+    setHidden(!open);
+  }
   const { modalProps, underlayProps } = useModalOverlay2(
     { isDismissable: false, isKeyboardDismissDisabled: !closeOnEsc },
     state,
@@ -12539,8 +12802,8 @@ var Drawer = (_a) => {
       tension: 150,
       friction: 15
     },
-    onRest: () => {
-      if (!open) {
+    onResolve: () => {
+      if (!open && !hidden) {
         setHidden(true);
       }
     }
@@ -12795,9 +13058,9 @@ var DropdownMenu3 = ({
   }, [menuRef.current]);
   return /* @__PURE__ */ React81.createElement("div", {
     style: { minWidth: "250px" },
-    className: tw("py-3 bg-white")
+    className: tw("py-3 bg-popover-content")
   }, !!title && /* @__PURE__ */ React81.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__ */ React81.createElement("ol", {
     role: "menu",
     ref: menuRef,
@@ -12869,9 +13132,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-inactive cursor-not-allowed": disabled,
+      "text-primary-default hover:text-primary-intense": color === "danger" && !disabled
     })
   }), tooltip ? /* @__PURE__ */ React81.createElement(Tooltip, {
     content: tooltip,
@@ -13141,7 +13404,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__ */ React89.createElement("img", {
     src: icon,
     alt: "",
@@ -13232,7 +13495,7 @@ var ModalTabs = createTabsComponent(
 );
 
 // src/molecules/MultiInput/MultiInput.tsx
-import React92, { useEffect as useEffect10, useRef as useRef9, useState as useState11 } from "react";
+import React92, { useEffect as useEffect9, useRef as useRef9, useState as useState11 } from "react";
 import { useId as useId12 } from "@react-aria/utils";
 import castArray5 from "lodash/castArray";
 import identity from "lodash/identity";
@@ -13251,9 +13514,9 @@ var InputChip = React91.forwardRef(
     };
     return /* @__PURE__ */ React91.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-status-danger ": invalid,
+        "bg-muted ": !invalid && !disabled,
+        "bg-default": disabled
       })
     }, /* @__PURE__ */ React91.createElement("div", {
       className: tw("px-2 py-1")
@@ -13266,15 +13529,15 @@ var InputChip = React91.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__ */ React91.createElement(Icon, {
+    }), !disabled && /* @__PURE__ */ React91.createElement(Icon, {
       icon: import_smallCross2.default,
       className: tw({
-        "text-error-70": invalid,
+        "text-danger-default": invalid,
         "text-default": !invalid
       })
     })));
@@ -13333,7 +13596,7 @@ var MultiInputBase = (_a) => {
   const [items, setItems] = useState11((_a2 = value != null ? value : defaultValue) != null ? _a2 : []);
   const [hasFocus, setFocus] = useState11(false);
   const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(identity);
-  useEffect10(() => {
+  useEffect9(() => {
     const requiresUpdate = value !== void 0 || defaultValue === void 0;
     if (requiresUpdate && JSON.stringify(value) !== JSON.stringify(items)) {
       setItems(value != null ? value : []);
@@ -13459,7 +13722,7 @@ var MultiInput = (props) => {
   var _a, _b, _c, _d, _e;
   const maxLength = (_a = props.maxLength) != null ? _a : props.max;
   const [value, setValue] = useState11((_c = (_b = props.value) != null ? _b : props.defaultValue) != null ? _c : []);
-  useEffect10(() => {
+  useEffect9(() => {
     var _a2;
     setValue((_a2 = props.value) != null ? _a2 : []);
   }, [JSON.stringify(props.value)]);
@@ -13494,7 +13757,7 @@ MultiInput.Skeleton = MultiInputSkeleton;
 MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 
 // src/molecules/MultiSelect/MultiSelect.tsx
-import React93, { useEffect as useEffect11, useRef as useRef10, useState as useState12 } from "react";
+import React93, { useEffect as useEffect10, useRef as useRef10, useState as useState12 } from "react";
 import { ariaHideOutside as ariaHideOutside2 } from "@react-aria/overlays";
 import { useId as useId13 } from "@react-aria/utils";
 import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
@@ -13649,7 +13912,7 @@ var MultiSelectBase = (_a) => {
     toggle: toggleMenu,
     setOpen: (isOpen2) => isOpen2 ? openMenu() : closeMenu()
   };
-  useEffect11(() => {
+  useEffect10(() => {
     if (state.isOpen && inputRef.current && popoverRef.current) {
       return ariaHideOutside2([inputRef.current, popoverRef.current]);
     }
@@ -13792,7 +14055,7 @@ var NativeSelectBase = React94.forwardRef(
       className: classNames("Aquarium-NativeSelectBase", tw("relative block"))
     }, !readOnly && /* @__PURE__ */ React94.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-inactive flex ml-3 pointer-events-none typography-default-strong mt-4"
       )
     }, /* @__PURE__ */ React94.createElement(Icon, {
       icon: import_caretDown2.default,
@@ -13806,12 +14069,12 @@ var NativeSelectBase = React94.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-inactive 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-inactive": !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
@@ -13877,7 +14140,7 @@ import React95 from "react";
 var Navigation = (_a) => {
   var _b = _a, { className, children } = _b, rest = __objRest(_b, ["className", "children"]);
   return /* @__PURE__ */ React95.createElement("nav", {
-    className: classNames(tw("bg-grey-0 h-full"))
+    className: classNames(tw("bg-muted h-full"))
   }, /* @__PURE__ */ React95.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     className: classNames(tw("flex flex-col h-full"), className),
     role: "menubar"
@@ -13903,7 +14166,7 @@ var Section2 = (_a) => {
     role: "presentation",
     className: tw("py-5")
   }, title && /* @__PURE__ */ React95.createElement("div", {
-    className: classNames(className, "py-2 px-6 text-muted uppercase cursor-default typography-caption")
+    className: classNames(className, "py-2 px-6 text-inactive uppercase cursor-default typography-caption")
   }, title), /* @__PURE__ */ React95.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     role: "group",
     className: classNames(tw("flex flex-col"), className)
@@ -13924,9 +14187,9 @@ var Item5 = (_a) => {
   }, /* @__PURE__ */ React95.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
     )
@@ -14167,17 +14430,14 @@ import clamp3 from "lodash/clamp";
 var ProgressBar = (_a) => {
   var _b = _a, { children, className } = _b, rest = __objRest(_b, ["children", "className"]);
   return /* @__PURE__ */ React101.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"]);
@@ -14392,11 +14652,11 @@ var Switch = React105.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
           }
         )
       ),
@@ -14405,7 +14665,7 @@ var Switch = React105.forwardRef(
     })), /* @__PURE__ */ React105.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-inactive peer-checked/switch:text-primary-muted",
         {
           "shadow-4dp": !disabled
         }
@@ -14480,12 +14740,12 @@ import React107 from "react";
 var getVariantClassNames = (variant = "primary") => {
   switch (variant) {
     case "danger":
-      return tw("bg-secondary-90");
+      return tw("bg-danger-intense");
     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) => {
@@ -14517,7 +14777,7 @@ Section3.Header = (_a) => {
   var _b = _a, { children, className, expanded } = _b, rest = __objRest(_b, ["children", "className", "expanded"]);
   return /* @__PURE__ */ React108.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);
@@ -14598,7 +14858,7 @@ var Section4 = (props) => {
   const _f = useSpring4({
     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
@@ -14711,8 +14971,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__ */ React110.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     "aria-label": ariaLabel,
@@ -14728,31 +14988,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-inactive",
   {
     "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
   }
 );
 
@@ -14793,8 +15053,8 @@ var Connector = (_a) => {
   return /* @__PURE__ */ React111.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)
       }),
@@ -14806,22 +15066,23 @@ var Step = (_a) => {
   var _b = _a, { className, state } = _b, rest = __objRest(_b, ["className", "state"]);
   return /* @__PURE__ */ React111.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 relative text-center", {
+        "text-intense": state !== "inactive",
+        "text-inactive": 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-body-intense": 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"]);
@@ -15027,13 +15288,13 @@ var LineContainer = (_a) => {
 var Line = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ React115.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__ */ React115.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;
@@ -15058,13 +15319,13 @@ var Timeline2 = ({ children }) => /* @__PURE__ */ React116.createElement("div",
       key: key != null ? key : props.title
     }, /* @__PURE__ */ React116.createElement(Timeline.Separator, null, props.variant === "error" ? /* @__PURE__ */ React116.createElement(Icon, {
       icon: import_error5.default,
-      color: "error-30"
+      color: "danger-default"
     }) : props.variant === "warning" ? /* @__PURE__ */ React116.createElement(Icon, {
       icon: import_warningSign5.default,
-      color: "warning-30"
+      color: "warning-default"
     }) : props.variant === "info" ? /* @__PURE__ */ React116.createElement(Icon, {
       icon: import_time2.default,
-      color: "info-30"
+      color: "info-default"
     }) : /* @__PURE__ */ React116.createElement(Timeline.Separator.Dot, null)), /* @__PURE__ */ React116.createElement(Typography2.Caption, {
       color: "grey-50"
     }, props.title), /* @__PURE__ */ React116.createElement(Timeline.LineContainer, null, /* @__PURE__ */ React116.createElement(Timeline.LineContainer.Line, null)), /* @__PURE__ */ React116.createElement(Timeline.Content, null, /* @__PURE__ */ React116.createElement(Typography2.Small, null, props.children)));