@aivenio/aquarium 1.66.0 → 1.67.0-rc1

package/dist/system.mjs

@@ -4952,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-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
       }
     )
@@ -4977,7 +4977,7 @@ var NoResults = React2.forwardRef(
     return /* @__PURE__ */ React2.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);
   }
 );
@@ -4997,10 +4997,7 @@ var Group = React2.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);
 });
@@ -5028,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-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__ */ React2.createElement(InlineIcon, {
       icon
@@ -5050,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 ? "muted-2x" : "default",
+    color: props.disabled ? "inactive" : "default",
     icon: hasFocus ? import_search.default : isOpen ? import_chevronUp.default : import_chevronDown.default
   }));
 });
@@ -5452,28 +5448,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)",
@@ -5564,23 +5565,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)"
@@ -5675,19 +5681,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)"
@@ -6166,7 +6174,7 @@ 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-intense-2x": variant === "default",
+        "bg-body-intense": variant === "default",
         "bg-danger-intense": variant === "danger"
       }),
       className
@@ -6995,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-intense-2x 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
     }))));
@@ -7034,13 +7042,13 @@ var getArrowStyle = (element, position, { left, top }) => {
 };
 var Arrow = (props) => {
   return /* @__PURE__ */ React14.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,
@@ -7049,7 +7057,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,
@@ -7068,15 +7076,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" }) => {
@@ -7179,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-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,
@@ -7515,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-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
       }),
@@ -7583,10 +7591,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
     )
@@ -7811,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(
@@ -7820,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,
@@ -8040,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-muted-3x"),
+      className: tw("mx-2 text-inactive"),
       icon: import_slash2.default
     }), !isLast && crumb, isLast && /* @__PURE__ */ React25.createElement(ActiveCrumb, {
       "aria-disabled": true,
@@ -8115,13 +8124,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");
@@ -8149,16 +8158,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__ */ React27.createElement(InlineIcon, {
     icon
   }), text, isNumber2(badge) && /* @__PURE__ */ React27.createElement(ChipBadge, {
+    disabled: locked,
     dense,
     value: badge,
     textClassname: tw("text-muted")
-  }), onClose && /* @__PURE__ */ React27.createElement(InlineIcon, {
+  }), !locked && onClose && /* @__PURE__ */ React27.createElement(InlineIcon, {
     role: "button",
     "aria-hidden": false,
     icon: import_cross4.default,
@@ -8262,7 +8272,7 @@ var Card = React29.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
@@ -8275,7 +8285,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"
       }),
@@ -8389,17 +8399,17 @@ var Checkbox = React30.forwardRef(
       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",
+          "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
         }
       )
     }));
@@ -8420,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",
+          "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
           }
         )
       ),
@@ -8961,7 +8971,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__ */ React39.createElement("span", {
     className: tw("typography-small self-center", { "text-right": rtl })
@@ -9285,7 +9295,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__ */ React46.createElement("span", {
     className: tw("text-danger-default")
@@ -9294,7 +9304,7 @@ var LabelText = ({
     placement: helpTooltipPlacement
   }, /* @__PURE__ */ React46.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__ */ React46.createElement(InlineIcon, {
     icon: import_questionMark2.default,
     "data-testid": "icon-info"
@@ -10052,7 +10062,7 @@ var InputAdornment = ({
   children
 }) => {
   return /* @__PURE__ */ React56.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,
@@ -10065,14 +10075,14 @@ var InputAdornment = ({
 };
 var SearchIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
   icon: import_search3.default,
-  color: "muted-3x",
+  color: "inactive",
   "data-testid": "icon-search",
   onClick
 });
 var ResetIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
   className: "hover:cursor-pointer",
   icon: import_cross5.default,
-  color: "muted-3x",
+  color: "inactive",
   "data-testid": "icon-reset",
   onClick
 });
@@ -10082,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 = () => {
@@ -10118,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
           },
@@ -10146,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"]);
@@ -10762,7 +10777,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"]);
@@ -10879,7 +10894,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
     })
   }));
@@ -11108,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-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);
   }
 );
@@ -11124,7 +11137,7 @@ var Item3 = React65.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__ */ React65.createElement(Badge.Notification, null, /* @__PURE__ */ React65.createElement(InlineIcon, {
       icon
@@ -11298,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,
@@ -11311,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) => {
@@ -12443,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";
@@ -12765,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,
@@ -12783,8 +12802,8 @@ var Drawer = (_a) => {
       tension: 150,
       friction: 15
     },
-    onRest: () => {
-      if (!open) {
+    onResolve: () => {
+      if (!open && !hidden) {
         setHidden(true);
       }
     }
@@ -13114,7 +13133,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__ */ React81.createElement(Tooltip, {
@@ -13476,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";
@@ -13495,7 +13514,7 @@ 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-danger-muted-2x ": invalid,
+        "bg-status-danger ": invalid,
         "bg-muted ": !invalid && !disabled,
         "bg-default": disabled
       })
@@ -13515,7 +13534,7 @@ var InputChip = React91.forwardRef(
       }),
       role: "button",
       "aria-label": `Remove ${String(children)}`
-    }), /* @__PURE__ */ React91.createElement(Icon, {
+    }), !disabled && /* @__PURE__ */ React91.createElement(Icon, {
       icon: import_smallCross2.default,
       className: tw({
         "text-danger-default": invalid,
@@ -13577,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 : []);
@@ -13703,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)]);
@@ -13738,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";
@@ -13893,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]);
     }
@@ -14036,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-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__ */ React94.createElement(Icon, {
       icon: import_caretDown2.default,
@@ -14050,9 +14069,9 @@ 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-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
@@ -14147,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-2x 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)
@@ -14646,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-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
         }
@@ -14721,7 +14740,7 @@ import React107 from "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":
@@ -14987,7 +15006,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,
@@ -15047,8 +15066,9 @@ 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-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
     )
@@ -15060,7 +15080,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"
 });