@aivenio/aquarium 1.76.2 → 1.77.0

package/dist/system.mjs

@@ -4224,6 +4224,7 @@ __export(molecules_exports, {
   EmptyState: () => EmptyState,
   EmptyStateLayout: () => EmptyStateLayout,
   ExternalLinkButton: () => ExternalLinkButton,
+  FileInput: () => FileInput,
   Flexbox: () => Flexbox,
   FlexboxItem: () => FlexboxItem,
   GhostButton: () => GhostButton,
@@ -4432,7 +4433,7 @@ var Menu = React2.forwardRef(
     return /* @__PURE__ */ React2.createElement("ul", __spreadValues({
       ref,
       style: { maxHeight },
-      className: classNames(className, tw("text-default"))
+      className: classNames(className, tw("text-default bg-body"))
     }, props), children);
   }
 );
@@ -6872,8 +6873,8 @@ var Arrow = (props) => {
 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-inactive placeholder:text-inactive focus:outline-none",
   {
-    "px-3 py-3": !readOnly,
-    "border-none resize-none cursor-default": readOnly,
+    "px-3 py-3 bg-body": !readOnly,
+    "border-none resize-none cursor-default bg-transparent": readOnly,
     "border border-danger-default": !valid && !readOnly,
     "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
   }
@@ -6894,14 +6895,14 @@ var import_chevronDown3 = __toESM(require_chevronDown());
 var import_loading2 = __toESM(require_loading());
 var COLOR_CLASSNAMES = {
   "primary": tw(
-    "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"
+    "text-white bg-primary-default active:bg-primary-intense active:ring-0 focus-visible:ring-2 focus-visible:ring-primary-intense focus-visible:ring-inset hover:bg-primary-intense disabled:bg-primary-muted"
   ),
   "secondary": tw(
-    "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"
+    "text-primary-intense bg-transparent ring-1 ring-primary-default ring-inset",
+    "active:bg-primary-active active:ring-primary-default active:text-primary-intense",
+    "focus-visible:ring-2 focus-visible:ring-primary-default focus-visible:text-primary-intense",
+    "hover:bg-primary-hover hover:ring-primary-default hover:text-primary-intense",
+    "disabled:bg-body disabled:text-primary-inactive disabled:ring-primary-muted"
   ),
   "ghost": ghostButtonStyle,
   "text": linkStyle,
@@ -8032,8 +8033,8 @@ Banner.Dismiss = (_a) => {
 };
 Banner.Dismiss.displayName = "Alert.Banner.Dismiss";
 var ILLUSTRATION_COLORS = {
-  information: { stroke: tw("stroke-primary-60"), fill: tw("fill-primary-10") },
-  success: { stroke: tw("stroke-success-40"), fill: tw("fill-success-10") },
+  information: { stroke: tw("stroke-primary-muted"), fill: tw("fill-primary-10") },
+  success: { stroke: tw("stroke-success-default"), fill: tw("fill-success-10") },
   warning: { stroke: tw("stroke-warning-100"), fill: tw("fill-warning-20") },
   error: { stroke: tw("stroke-error-100"), fill: tw("fill-error-10") }
 };
@@ -8800,7 +8801,7 @@ var Checkbox = React33.forwardRef(
       name
     }, props), {
       className: classNames(
-        tw("peer appearance-none outline-none w-5 h-5", "rounded-sm border border-transparent", {
+        tw("peer appearance-none outline-none w-5 h-5 rounded-sm border border-transparent", {
           "cursor-pointer checked:bg-primary-default": !disabled,
           "cursor-not-allowed bg-muted checked:bg-primary-muted": disabled
         })
@@ -8818,7 +8819,7 @@ var Checkbox = React33.forwardRef(
           "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-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-default peer-checked:[&>path]:stroke-primary-70 peer-checked:border-transparent": disabled
         }
       )
@@ -9321,7 +9322,7 @@ var Carousel = ({
     tabIndex: 0,
     onScroll: handleScroll,
     className: tw(
-      "grid items-stretch grid-flow-col overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-info-70"
+      "grid items-stretch grid-flow-col overflow-x-scroll scroll-smooth snap-x snap-mandatory scrollbar-hide focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-info-default"
     ),
     style: { width }
   }, width !== 0 && React41.Children.map(children, (child, index) => /* @__PURE__ */ React41.createElement(CarouselItem, {
@@ -10293,6 +10294,7 @@ var import_cross5 = __toESM(require_cross());
 var import_error3 = __toESM(require_error());
 var import_search3 = __toESM(require_search());
 var import_tick4 = __toESM(require_tick());
+var import_upload2 = __toESM(require_upload());
 var InputAdornment = ({
   placement = "right",
   className,
@@ -10317,6 +10319,12 @@ var SearchIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
   "data-testid": "icon-search",
   onClick
 });
+var UploadIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
+  icon: import_upload2.default,
+  color: "primary-intense",
+  "data-testid": "icon-upload",
+  onClick
+});
 var ResetIcon = ({ onClick }) => /* @__PURE__ */ React56.createElement(Icon, {
   className: "hover:cursor-pointer",
   icon: import_cross5.default,
@@ -10347,11 +10355,14 @@ var createInput = (displayName, opts = {}) => {
         "type"
       ]);
       var _a2;
-      const inputType = opts.isSearch ? "search" : type;
+      const inputType = opts.isSearch ? "search" : opts.isFile ? "file" : type;
       const inputRef = React57.useRef(null);
       useImperativeHandle(ref, () => inputRef.current);
-      const handleReset = () => {
+      const handleReset = (e) => {
         var _a3;
+        if (opts.isFile) {
+          e.preventDefault();
+        }
         const el = inputRef.current;
         if (el) {
           const lastValue = el.value;
@@ -10364,7 +10375,8 @@ var createInput = (displayName, opts = {}) => {
       return /* @__PURE__ */ React57.createElement("span", {
         className: classNames("Aquarium-InputBase", tw("relative block"))
       }, opts.adornment && /* @__PURE__ */ React57.createElement(InputAdornment, {
-        placement: "left"
+        placement: "left",
+        className: opts.isFile ? "icon-stroke-2" : void 0
       }, opts.adornment), /* @__PURE__ */ React57.createElement("input", __spreadProps(__spreadValues({
         ref: inputRef,
         type: inputType
@@ -10375,11 +10387,10 @@ var createInput = (displayName, opts = {}) => {
         readOnly,
         className: classNames(
           {
-            "bg-body": !readOnly,
-            "bg-transparent": readOnly,
             "[&::-webkit-search-cancel-button]:appearance-none": opts.isSearch,
             "pl-7": opts.adornment,
-            "pr-7": opts.canReset || endAdornment
+            "pr-7": opts.canReset || endAdornment,
+            "file:text-primary-intense file:typography-small-strong file:border-0 file:bg-transparent file:p-0 file:mr-4": opts.isFile
           },
           getCommonInputStyles({ readOnly, valid }),
           props.className
@@ -10397,57 +10408,68 @@ var createInput = (displayName, opts = {}) => {
   return InputComponent;
 };
 var InputBase = createInput("InputBase");
+var FileInputBase = createInput("FileInputBase", {
+  adornment: /* @__PURE__ */ React57.createElement(UploadIcon, null),
+  canReset: true,
+  isFile: 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"]);
-  const isControlled = typeof valueProp !== "undefined";
-  const [valueState, setValueState] = useState7((_b = props.defaultValue) != null ? _b : "");
-  const value = isControlled ? valueProp : valueState;
-  const handleChange = useCallback(
-    (e) => {
-      const next = e.target.value;
-      if (!isControlled) {
-        setValueState(next);
-      }
-      onChangeProp == null ? void 0 : onChangeProp(e);
-    },
-    [isControlled, onChangeProp]
-  );
-  const defaultId = useId7();
-  const id = (_c = props.id) != null ? _c : defaultId;
-  const errorMessageId = useId7();
-  const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
-  const _d = getLabelControlProps(inputProps), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
-  const baseProps = omit5(
-    inputProps,
-    Object.keys(labelControlProps).concat(isControlled ? ["defaultValue"] : ["value"])
-  );
-  return /* @__PURE__ */ React57.createElement(LabelControl, __spreadProps(__spreadValues({
-    id: `${id}-label`,
-    htmlFor: id,
-    messageId: errorMessageId,
-    length: value !== void 0 ? toString(value).length : void 0
-  }, labelControlProps), {
-    className: "Aquarium-Input"
-  }), /* @__PURE__ */ React57.createElement(InputBase, __spreadProps(__spreadValues(__spreadValues({
-    ref
-  }, baseProps), errorProps), {
-    id,
-    "data-testid": dataTestId,
-    onChange: handleChange,
-    disabled: props.disabled,
-    maxLength: props.maxLength,
-    required: props.required,
-    valid: props.valid,
-    readOnly
-  })));
-});
-Input2.displayName = "Input";
+var createInputComponent = (displayName, options = {}) => {
+  const InputComponentBase = options.input || InputBase;
+  const InputComponent = React57.forwardRef((inputProps, ref) => {
+    var _b, _c;
+    const _a = inputProps, { readOnly = false, value: valueProp, onChange: onChangeProp } = _a, props = __objRest(_a, ["readOnly", "value", "onChange"]);
+    const isControlled = typeof valueProp !== "undefined";
+    const [valueState, setValueState] = useState7((_b = props.defaultValue) != null ? _b : "");
+    const value = isControlled ? valueProp : valueState;
+    const handleChange = useCallback(
+      (e) => {
+        const next = e.target.value;
+        if (!isControlled) {
+          setValueState(next);
+        }
+        onChangeProp == null ? void 0 : onChangeProp(e);
+      },
+      [isControlled, onChangeProp]
+    );
+    const defaultId = useId7();
+    const id = (_c = props.id) != null ? _c : defaultId;
+    const errorMessageId = useId7();
+    const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
+    const _d = getLabelControlProps(inputProps), { "data-testid": dataTestId } = _d, labelControlProps = __objRest(_d, ["data-testid"]);
+    const baseProps = omit5(
+      inputProps,
+      Object.keys(labelControlProps).concat(isControlled ? ["defaultValue"] : ["value"])
+    );
+    return /* @__PURE__ */ React57.createElement(LabelControl, __spreadProps(__spreadValues({
+      id: `${id}-label`,
+      htmlFor: id,
+      messageId: errorMessageId,
+      length: value !== void 0 ? toString(value).length : void 0
+    }, labelControlProps), {
+      className: "Aquarium-Input"
+    }), /* @__PURE__ */ React57.createElement(InputComponentBase, __spreadProps(__spreadValues(__spreadValues({
+      ref
+    }, baseProps), errorProps), {
+      id,
+      "data-testid": dataTestId,
+      onChange: handleChange,
+      disabled: props.disabled,
+      maxLength: props.maxLength,
+      required: props.required,
+      valid: props.valid,
+      readOnly
+    })));
+  });
+  InputComponent.displayName = displayName;
+  return InputComponent;
+};
+var FileInput = createInputComponent("FileInput", { input: FileInputBase });
+var Input2 = createInputComponent("Input", { input: InputBase });
 Input2.Skeleton = () => /* @__PURE__ */ React57.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React57.createElement(InputBase.Skeleton, null));
 Input2.Skeleton.displayName = "Input.Skeleton";
 
@@ -11440,7 +11462,7 @@ var DropdownMenu = React66.forwardRef(
       style: { minHeight, maxHeight, minWidth, maxWidth },
       className: classNames(
         className,
-        "bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
+        "Aquarium-DropdownMenu.Menu bg-popover-content w-full flex flex-col overflow-x-hidden typography-small text-default"
       )
     }, props), children);
   }
@@ -11465,7 +11487,10 @@ var Group2 = React66.forwardRef(
     return /* @__PURE__ */ React66.createElement("li", __spreadValues({
       ref
     }, props), title && /* @__PURE__ */ React66.createElement("div", __spreadValues({
-      className: classNames(className, "p-3 text-inactive uppercase cursor-default typography-caption")
+      className: classNames(
+        className,
+        "Aquarium-DropdownMenu.Group p-3 text-inactive uppercase cursor-default typography-caption"
+      )
     }, titleProps), title), children);
   }
 );
@@ -11475,7 +11500,7 @@ var Item3 = React66.forwardRef(
     var _b = _a, { kind, highlighted, selected, className, icon, showNotification = false, children } = _b, props = __objRest(_b, ["kind", "highlighted", "selected", "className", "icon", "showNotification", "children"]);
     return /* @__PURE__ */ React66.createElement("li", __spreadValues({
       ref,
-      className: classNames(className, "flex items-center gap-x-3 p-3 outline-none", {
+      className: classNames(className, "Aquarium-DropdownMenu.Item flex items-center gap-x-3 p-3 outline-none", {
         "cursor-pointer hover:bg-muted": !props.disabled,
         "bg-muted": highlighted,
         "text-primary-intense": kind === "action" && !props.disabled,
@@ -12684,7 +12709,7 @@ var Modal = (_a) => {
 Modal.BackDrop = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ React76.createElement("div", __spreadProps(__spreadValues({}, rest), {
-    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-default opacity-80"), className)
+    className: classNames(tw("-z-10 fixed min-w-full min-h-full bg-body-intense opacity-70"), className)
   }));
 };
 Modal.Dialog = React76.forwardRef(
@@ -13516,11 +13541,14 @@ var DropdownItem = (_a) => {
     onClick: handleClick,
     onKeyDown: handleKeyDown
   }, props), {
-    className: tw("typography-small flex items-center focus:ring-0", {
-      "text-default cursor-pointer hover:bg-muted": !disabled,
-      "text-inactive cursor-not-allowed": disabled,
-      "text-primary-default hover:text-primary-intense": color === "danger" && !disabled
-    })
+    className: classNames(
+      "Aquarium-Dropdown.Item",
+      tw("typography-small flex items-center focus:ring-0", {
+        "text-default cursor-pointer hover:bg-muted": !disabled,
+        "text-inactive cursor-not-allowed": disabled,
+        "text-danger-default": color === "danger" && !disabled
+      })
+    )
   }), tooltip ? /* @__PURE__ */ React82.createElement(Tooltip, {
     content: tooltip,
     placement: tooltipPlacement,
@@ -15389,7 +15417,7 @@ var getBaseSegmentedControlClassNames = (selected) => tw(
   "disabled:cursor-not-allowed disabled:text-inactive disabled:bg-muted",
   {
     "typography-small text-default bg-body": !selected,
-    "typography-small-strong text-primary-intense relative z-40 ring-1 ring-offset-0 ring-primary-80": selected
+    "typography-small-strong text-primary-intense relative z-40 ring-1 ring-offset-0 ring-primary-default": selected
   }
 );
 
@@ -15919,6 +15947,7 @@ export {
   EmptyState,
   EmptyStateLayout,
   ExternalLinkButton,
+  FileInput,
   Flexbox,
   FlexboxItem,
   FormControl,

package/dist/tailwind.config.js

@@ -53,6 +53,8 @@ module.exports = {
     extend: {
       backgroundColor,
       borderColor,
+      ringColor: borderColor,
+      stroke: borderColor,
       borderRadius,
       textColor,
       zIndex: {