@aivenio/aquarium 1.66.0 → 1.67.0-rc1

package/dist/system.cjs

@@ -5100,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-default placeholder:text-muted-2x",
+      "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-muted-3x": props.disabled,
+        "text-inactive": props.disabled,
         "cursor-default": props.readOnly
       }
     )
@@ -5125,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-2x italic typography-small"), className)
+      className: classNames(tw("p-3 text-inactive italic typography-small"), className)
     }), children);
   }
 );
@@ -5145,10 +5145,7 @@ var Group = import_react3.default.forwardRef((_a, ref) => {
     ref,
     className: classNames(
       className,
-      "flex items-center gap-x-3 p-3 text-muted-2x uppercase cursor-default typography-caption mt-4 first:mt-0",
-      {
-        "text-muted-3x": props.disabled
-      }
+      "flex items-center gap-x-3 p-3 text-inactive uppercase cursor-default typography-caption mt-4 first:mt-0"
     )
   }, props), children);
 });
@@ -5176,12 +5173,11 @@ 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-intense", {
+      className: classNames(className, "flex items-center gap-x-3 typography-small", {
         "p-3": !dense,
         "px-3 py-2": dense,
-        "cursor-pointer": !props.disabled,
-        "text-muted-3x": props.disabled,
-        "hover:text-primary-default": !props.disabled
+        "text-primary-intense cursor-pointer hover:text-primary-default": !props.disabled,
+        "text-inactive cursor-not-allowed": props.disabled
       })
     }, props), icon && /* @__PURE__ */ import_react3.default.createElement(InlineIcon, {
       icon
@@ -5198,7 +5194,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 ? "muted-2x" : "default",
+    color: props.disabled ? "inactive" : "default",
     icon: hasFocus ? import_search.default : isOpen ? import_chevronUp.default : import_chevronDown.default
   }));
 });
@@ -5600,28 +5596,33 @@ var tailwind_theme_default = {
     white: "var(--aquarium-colors-white, white)",
     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)",
-    "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)",
+    "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)",
-    "danger-muted-2x": "var(--aquarium-background-color-danger-muted-2x)",
+    "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)"
+    "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)",
@@ -5712,23 +5713,28 @@ var tailwind_theme_default = {
     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)",
+    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-muted-3x": "var(--aquarium-text-color-primary-muted-3x)",
-    "primary-muted-2x": "var(--aquarium-text-color-primary-muted-2x)",
+    "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)",
-    "primary-intense-2x": "var(--aquarium-text-color-primary-intense-2x)",
+    "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)"
@@ -5823,19 +5829,21 @@ var tailwind_theme_default = {
     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)",
+    "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)"
@@ -6314,7 +6322,7 @@ 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-intense-2x": variant === "default",
+        "bg-body-intense": variant === "default",
         "bg-danger-intense": variant === "danger"
       }),
       className
@@ -7143,7 +7151,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-intense-2x text-white"))
+      className: classNames(tw("p-3 rounded-sm typography-caption max-w-[320px] bg-body-intense text-white"))
     }, (0, import_utils.mergeProps)(props, tooltipProps)), props.children, /* @__PURE__ */ import_react18.default.createElement(Arrow, __spreadProps(__spreadValues({}, arrowProps), {
       style: arrowStyle
     }))));
@@ -7182,13 +7190,13 @@ 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-intense-2x 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-default typography-small text-default disabled:text-muted-2x placeholder:text-muted-2x 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,
@@ -7197,7 +7205,7 @@ var getCommonInputStyles = ({ readOnly, valid }) => tw(
   }
 );
 var ghostButtonStyle = tw(
-  "text-primary-intense active:text-primary-intense-2x focus-visible:text-primary-intense-2x hover:text-primary-intense-2x disabled:text-primary-muted-2x"
+  "text-primary-intense active:text-primary-active focus-visible:text-primary-active hover:text-primary-active disabled:text-primary-inactive"
 );
 var linkStyle = classNames(
   ghostButtonStyle,
@@ -7216,15 +7224,15 @@ var COLOR_CLASSNAMES = {
   ),
   "secondary": tw(
     "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",
+    "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-muted-3x hover:ring-primary-90 hover:text-primary-intense",
-    "disabled:bg-body disabled:text-primary-muted-2x disabled:ring-primary-40"
+    "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-muted focus-visible:text-intense hover:text-intense disabled:text-muted-3x"
+    "text-grey-60 active:text-muted focus-visible:text-intense hover:text-intense disabled:text-inactive"
   )
 };
 var LoadingSpinner = ({ size = "20px" }) => {
@@ -7327,7 +7335,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-intense hover:bg-muted focus-visible:text-intense focus-visible:bg-muted disabled:text-muted-2x 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,
@@ -7663,11 +7671,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-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",
+        "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
       }),
@@ -7731,10 +7739,10 @@ var Banner = (_a) => {
     role: type === "error" || type === "warning" ? "alert" : "status",
     className: classNames(
       tw("relative flex px-[60px] justify-center", {
-        "bg-danger-muted-2x": type === "error",
-        "bg-primary-muted-3x": type === "information",
-        "bg-success-muted": type === "success",
-        "bg-warning-muted": type === "warning"
+        "bg-status-danger": type === "error",
+        "bg-status-announcement": type === "information",
+        "bg-status-success": type === "success",
+        "bg-status-warning": type === "warning"
       }),
       className
     )
@@ -7959,7 +7967,7 @@ Avatar.Skeleton.displayName = "Avatar.Skeleton";
 var import_react26 = __toESM(require("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__ */ import_react26.default.createElement("span", __spreadProps(__spreadValues({}, rest), {
       className: classNames(
@@ -7968,7 +7976,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,
@@ -8188,7 +8197,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-muted-3x"),
+      className: tw("mx-2 text-inactive"),
       icon: import_slash2.default
     }), !isLast && crumb, isLast && /* @__PURE__ */ import_react29.default.createElement(ActiveCrumb, {
       "aria-disabled": true,
@@ -8263,13 +8272,13 @@ var import_lock2 = __toESM(require_lock());
 var getStatusClassNames = (status = "neutral") => {
   switch (status) {
     case "info":
-      return tw("text-info-intense bg-info-muted");
+      return tw("text-info-intense bg-status-info");
     case "warning":
-      return tw("text-warning-intense bg-warning-muted");
+      return tw("text-warning-intense bg-status-warning");
     case "danger":
-      return tw("text-danger-intense bg-danger-muted-2x");
+      return tw("text-danger-intense bg-status-danger");
     case "success":
-      return tw("text-success-intense bg-success-muted");
+      return tw("text-success-intense bg-status-success");
     case "neutral":
     default:
       return tw("text-default bg-default");
@@ -8297,16 +8306,17 @@ var Chip2 = (_a) => {
       "Aquarium-Chip",
       tw({
         "bg-muted text-default": !locked,
-        "bg-grey-5 text-muted-2x": locked
+        "bg-grey-5 text-inactive": locked
       })
     )
   }, rest), icon && /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
     icon
   }), text, (0, import_isNumber2.default)(badge) && /* @__PURE__ */ import_react32.default.createElement(ChipBadge, {
+    disabled: locked,
     dense,
     value: badge,
     textClassname: tw("text-muted")
-  }), onClose && /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
+  }), !locked && onClose && /* @__PURE__ */ import_react32.default.createElement(InlineIcon, {
     role: "button",
     "aria-hidden": false,
     icon: import_cross4.default,
@@ -8410,7 +8420,7 @@ var Card = import_react34.default.forwardRef((props, ref) => {
     className: classNames(
       getCommonCardStyles(props),
       tw({
-        "cursor-pointer hover:bg-primary-muted-3x active:bg-body": clickable && !disabled,
+        "cursor-pointer hover:bg-primary-hover active:bg-body": clickable && !disabled,
         "focusable": clickable && modality === "keyboard"
       }),
       className
@@ -8423,7 +8433,7 @@ var Label = (props) => {
     className: classNames(
       getCommonCardStyles(props),
       tw({
-        "cursor-pointer hover:bg-primary-muted-3x active:bg-body": !disabled,
+        "cursor-pointer hover:bg-primary-hover active:bg-body": !disabled,
         "border-primary-default": checked,
         "focusable": modality === "keyboard"
       }),
@@ -8537,17 +8547,17 @@ var Checkbox = import_react35.default.forwardRef(
       disabled
     })), /* @__PURE__ */ import_react35.default.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",
+          "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-default": !disabled,
-          "border-muted peer-checked:text-primary-muted-3x peer-checked:[&>path]:stroke-primary-10 peer-checked:border-primary-muted-2x": disabled
+          "border-muted peer-checked:text-primary-default peer-checked:[&>path]:stroke-primary-70 peer-checked:border-transparent": disabled
         }
       )
     }));
@@ -8568,11 +8578,11 @@ var RadioButton = import_react36.default.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",
+          "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-default": !disabled,
-            "cursor-not-allowed border-muted bg-muted checked:bg-opacity-40 checked:bg-primary-muted checked:border-primary-muted-2x": 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
           }
         )
       ),
@@ -9109,7 +9119,7 @@ var ControlLabel = (_a) => {
     "style",
     "className"
   ]);
-  const textClass = disabled ? "text-muted-2x" : "text-default";
+  const textClass = disabled ? "text-inactive" : "text-default";
   const rtl = labelPlacement === "left";
   const labelEl = label && /* @__PURE__ */ import_react44.default.createElement("span", {
     className: tw("typography-small self-center", { "text-right": rtl })
@@ -9433,7 +9443,7 @@ var LabelText = ({
     className: tw("inline-flex items-center typography-small-strong", {
       "text-default": variant === "default",
       "text-danger-default": variant === "error",
-      "text-muted-2x": variant === "disabled"
+      "text-inactive": variant === "disabled"
     })
   }, labelText, required && /* @__PURE__ */ import_react51.default.createElement("span", {
     className: tw("text-danger-default")
@@ -9442,7 +9452,7 @@ var LabelText = ({
     placement: helpTooltipPlacement
   }, /* @__PURE__ */ import_react51.default.createElement("span", {
     tabIndex: 0,
-    className: tw("text-muted-2x flex items-center cursor-pointer ml-2")
+    className: tw("text-inactive flex items-center cursor-pointer ml-2")
   }, /* @__PURE__ */ import_react51.default.createElement(InlineIcon, {
     icon: import_questionMark2.default,
     "data-testid": "icon-info"
@@ -10200,7 +10210,7 @@ var InputAdornment = ({
   children
 }) => {
   return /* @__PURE__ */ import_react62.default.createElement("span", {
-    className: classNames(className, "absolute inset-y-0 grow-0 text-muted-2x 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,
@@ -10213,14 +10223,14 @@ var InputAdornment = ({
 };
 var SearchIcon = ({ onClick }) => /* @__PURE__ */ import_react62.default.createElement(Icon, {
   icon: import_search3.default,
-  color: "muted-3x",
+  color: "inactive",
   "data-testid": "icon-search",
   onClick
 });
 var ResetIcon = ({ onClick }) => /* @__PURE__ */ import_react62.default.createElement(Icon, {
   className: "hover:cursor-pointer",
   icon: import_cross5.default,
-  color: "muted-3x",
+  color: "inactive",
   "data-testid": "icon-reset",
   onClick
 });
@@ -10230,23 +10240,24 @@ var createInput = (displayName, opts = {}) => {
   const InputComponent = (0, import_react63.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 = import_react63.default.useRef(null);
       (0, import_react63.useImperativeHandle)(ref, () => inputRef.current);
       const handleReset = () => {
@@ -10266,15 +10277,15 @@ var createInput = (displayName, opts = {}) => {
         placement: "left"
       }, opts.adornment), /* @__PURE__ */ import_react63.default.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
           },
@@ -10294,7 +10305,11 @@ var createInput = (displayName, opts = {}) => {
   return InputComponent;
 };
 var InputBase = createInput("InputBase");
-var SearchInput = createInput("SearchInput", { adornment: /* @__PURE__ */ import_react63.default.createElement(SearchIcon, null), canReset: true, isSearch: true });
+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"]);
@@ -10910,7 +10925,7 @@ var TableSelectCell = (_a) => {
 };
 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-2x");
+  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"]);
@@ -11027,7 +11042,7 @@ var Row = (_a) => {
   }), { inert: disabled ? "" : void 0 }), {
     className: classNames(tw("contents"), className, {
       "children:opacity-70": disabled,
-      "[&>*]:bg-primary-muted-3x": active,
+      "[&>*]:bg-primary-active": active,
       "[&>*]:hover:bg-muted": !disabled && !header
     })
   }));
@@ -11256,9 +11271,7 @@ 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-2x uppercase cursor-default typography-caption", {
-        "text-muted-3x": props.disabled
-      })
+      className: classNames(className, "p-3 text-inactive uppercase cursor-default typography-caption")
     }, titleProps), title), children);
   }
 );
@@ -11272,7 +11285,7 @@ var Item3 = import_react72.default.forwardRef(
         "cursor-pointer hover:bg-muted": !props.disabled,
         "bg-muted": highlighted,
         "text-primary-intense": kind === "action",
-        "text-muted-3x cursor-not-allowed": props.disabled
+        "text-inactive cursor-not-allowed": props.disabled
       })
     }, props), icon && showNotification && /* @__PURE__ */ import_react72.default.createElement(Badge.Notification, null, /* @__PURE__ */ import_react72.default.createElement(InlineIcon, {
       icon
@@ -11446,10 +11459,17 @@ var MenuWrapper = (_a) => {
   const { menuProps } = (0, import_menu2.useMenu)(props, state, ref);
   const { contains } = (0, import_i18n.useFilter)({ sensitivity: "base" });
   const [search, setSearch] = import_react73.default.useState("");
+  const searchInputRef = import_react73.default.useRef(null);
   const filteredCollection = import_react73.default.useMemo(
     () => searchable ? filterCollection(state.collection, search, contains) : state.collection,
     [searchable, state.collection, search, contains]
   );
+  import_react73.default.useEffect(() => {
+    var _a2;
+    if (searchable) {
+      (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+    }
+  }, [searchable]);
   return /* @__PURE__ */ import_react73.default.createElement(DropdownMenu, {
     minWidth,
     maxWidth,
@@ -11459,7 +11479,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__ */ import_react73.default.createElement(DropdownMenu.EmptyStateContainer, null, emptyState), /* @__PURE__ */ import_react73.default.createElement(DropdownMenu.List, __spreadValues({
     ref
   }, menuProps), Array.from(filteredCollection).map((item) => {
@@ -12913,11 +12934,9 @@ var Drawer = (_a) => {
   const [hidden, setHidden] = import_react86.default.useState(!open);
   const ref = import_react86.default.useRef(null);
   const state = (0, import_react_stately.useOverlayTriggerState)({ isOpen: !hidden, onOpenChange: (isOpen) => !isOpen && onClose() });
-  (0, import_react86.useEffect)(() => {
-    if (open && hidden) {
-      setHidden(!open);
-    }
-  }, [open]);
+  if (open && hidden) {
+    setHidden(!open);
+  }
   const { modalProps, underlayProps } = (0, import_overlays8.useModalOverlay)(
     { isDismissable: false, isKeyboardDismissDisabled: !closeOnEsc },
     state,
@@ -12931,8 +12950,8 @@ var Drawer = (_a) => {
       tension: 150,
       friction: 15
     },
-    onRest: () => {
-      if (!open) {
+    onResolve: () => {
+      if (!open && !hidden) {
         setHidden(true);
       }
     }
@@ -13262,7 +13281,7 @@ var DropdownItem = (_a) => {
   }, props), {
     className: tw("typography-small flex items-center focus:ring-0", {
       "text-default cursor-pointer hover:bg-muted": !disabled,
-      "text-muted-2x cursor-not-allowed": disabled,
+      "text-inactive cursor-not-allowed": disabled,
       "text-primary-default hover:text-primary-intense": color === "danger" && !disabled
     })
   }), tooltip ? /* @__PURE__ */ import_react90.default.createElement(Tooltip, {
@@ -13643,7 +13662,7 @@ 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-danger-muted-2x ": invalid,
+        "bg-status-danger ": invalid,
         "bg-muted ": !invalid && !disabled,
         "bg-default": disabled
       })
@@ -13663,7 +13682,7 @@ var InputChip = import_react100.default.forwardRef(
       }),
       role: "button",
       "aria-label": `Remove ${String(children)}`
-    }), /* @__PURE__ */ import_react100.default.createElement(Icon, {
+    }), !disabled && /* @__PURE__ */ import_react100.default.createElement(Icon, {
       icon: import_smallCross2.default,
       className: tw({
         "text-danger-default": invalid,
@@ -14184,7 +14203,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-2x 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__ */ import_react103.default.createElement(Icon, {
       icon: import_caretDown2.default,
@@ -14198,9 +14217,9 @@ 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-2x 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-default disabled:text-muted-2x": !readOnly,
+            "px-3 py-3 disabled:border-default disabled:bg-default disabled:text-inactive": !readOnly,
             "px-0 py-3 border-none": readOnly,
             "border border-danger-default": !valid && !readOnly,
             "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
@@ -14295,7 +14314,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-2x uppercase cursor-default typography-caption")
+    className: classNames(className, "py-2 px-6 text-inactive uppercase cursor-default typography-caption")
   }, title), /* @__PURE__ */ import_react104.default.createElement("ul", __spreadProps(__spreadValues({}, rest), {
     role: "group",
     className: classNames(tw("flex flex-col"), className)
@@ -14794,7 +14813,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-muted-3x peer-checked/switch:text-primary-muted",
+        "bg-white left-2 peer-checked/switch:left-1 text-inactive peer-checked/switch:text-primary-muted",
         {
           "shadow-4dp": !disabled
         }
@@ -14869,7 +14888,7 @@ var import_react116 = __toESM(require("react"));
 var getVariantClassNames = (variant = "primary") => {
   switch (variant) {
     case "danger":
-      return tw("bg-secondary-default");
+      return tw("bg-danger-intense");
     case "success":
       return tw("bg-success-intense");
     case "primary":
@@ -15135,7 +15154,7 @@ var getSelectedClassNames = (variant) => tw("relative z-40 text-intense", {
 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-muted-3x",
+  "disabled:cursor-not-allowed disabled:text-inactive",
   {
     "py-4 px-5": !dense,
     "py-2 px-4": dense,
@@ -15195,8 +15214,9 @@ 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-intense relative text-center", {
-        "text-muted-3x": state === "inactive"
+      tw("flex flex-col items-center relative text-center", {
+        "text-intense": state !== "inactive",
+        "text-inactive": state === "inactive"
       }),
       className
     )
@@ -15208,7 +15228,7 @@ var getClassNames = (state) => tw("h-[32px] w-[32px] border-2", {
   "text-white bg-success-default border-success-intense": state === "completed"
 });
 var getDenseClassNames = (state) => tw("h-[8px] w-[8px]", {
-  "bg-intense-2x": state === "active",
+  "bg-body-intense": state === "active",
   "bg-intense": state === "inactive",
   "text-success-default": state === "completed"
 });