@aivenio/aquarium 3.0.0 → 3.2.0

package/dist/system.cjs

@@ -1390,6 +1390,22 @@ var require_database02 = __commonJS({
   }
 });
 
+// src/icons/databaseArrow.js
+var require_databaseArrow = __commonJS({
+  "src/icons/databaseArrow.js"(exports2) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 3.333c0 1.105-2.686 2-6 2s-6-.895-6-2m12 0c0-1.104-2.686-2-6-2s-6 .896-6 2m12 0v3.212M2 3.333v9.334c0 1.106 2.667 2 6 2m6-8.187c0 1.107-2.667 2-6 2s-6-.893-6-2m6 5.147c-3.333 0-6-.894-6-2m12.91 2.737-2.183-2.182m0 0-2.181 2.182m2.181-2.182v4.364"/>',
+      "left": 0,
+      "top": 0,
+      "width": 16,
+      "height": 16
+    };
+    exports2.__esModule = true;
+    exports2.default = data;
+  }
+});
+
 // src/icons/database.js
 var require_database = __commonJS({
   "src/icons/database.js"(exports2) {
@@ -4634,7 +4650,7 @@ var InputContainer = import_react3.default.forwardRef(
           "border-danger-default": variant === "error",
           "hover:border-intense": variant !== "error" && variant !== "disabled" && variant !== "focused",
           "border-info-default": variant === "focused",
-          "bg-body": variant !== "disabled",
+          "bg-transparent": variant !== "disabled",
           "cursor-not-allowed border-default bg-default": variant === "disabled"
         }
       ),
@@ -4650,12 +4666,11 @@ var Input = import_react3.default.forwardRef(({ className, required, ...props },
     "aria-required": required,
     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-inactive",
+      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small bg-transparent disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
       {
         "text-default": !props.disabled,
         "text-inactive": props.disabled,
-        "bg-body": !props.readOnly,
-        "cursor-default bg-transparent": props.readOnly
+        "cursor-default": props.readOnly
       }
     ),
     ...props
@@ -4667,7 +4682,7 @@ var Menu = import_react3.default.forwardRef(
     {
       ref,
       style: { maxHeight },
-      className: classNames(className, tw("text-default bg-body overflow-y-auto")),
+      className: classNames(className, tw("text-default bg-popover-content overflow-y-auto")),
       ...props
     },
     children
@@ -4696,7 +4711,7 @@ var Item = import_react3.default.forwardRef(
     "li",
     {
       ref,
-      className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
+      className: classNames("Aquarium-Select.Item", className, "flex items-center gap-x-3 p-3 typography-small", {
         "cursor-pointer hover:bg-muted": !props["aria-disabled"],
         "cursor-not-allowed opacity-40 grayscale": props["aria-disabled"],
         "bg-muted": highlighted
@@ -4848,6 +4863,7 @@ var import_currencyDollar = __toESM(require_currencyDollar());
 var import_dashboard = __toESM(require_dashboard());
 var import_dataLineage = __toESM(require_dataLineage());
 var import_database02 = __toESM(require_database02());
+var import_databaseArrow = __toESM(require_databaseArrow());
 var import_database = __toESM(require_database());
 var import_dataflow01 = __toESM(require_dataflow01());
 var import_dataflow02 = __toESM(require_dataflow02());
@@ -7247,7 +7263,7 @@ 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 bg-body": !readOnly,
+    "px-3 py-3 bg-transparent": !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
@@ -9481,8 +9497,22 @@ var import_react55 = __toESM(require("react"));
 
 // src/utils/form/FormControl/FormControl.tsx
 var import_react52 = __toESM(require("react"));
-var FormControl = ({ className, inline, children }) => {
-  return /* @__PURE__ */ import_react52.default.createElement(Box.Flex, { flexDirection: "column", display: inline ? "inline-flex" : "flex", className }, children);
+var FormControl = ({
+  className,
+  inline,
+  children,
+  "data-testid": dataTestId
+}) => {
+  return /* @__PURE__ */ import_react52.default.createElement(
+    Box.Flex,
+    {
+      "data-testid": dataTestId,
+      flexDirection: "column",
+      display: inline ? "inline-flex" : "flex",
+      className
+    },
+    children
+  );
 };
 
 // src/utils/form/HelperText/HelperText.tsx
@@ -9584,11 +9614,13 @@ var LabelControl = ({
   valid,
   disabled,
   className,
+  htmlFor,
+  "data-testid": dataTestId,
   ...rest
 }) => {
   const legacyError = error2 !== void 0 && valid === false;
   const variant = !valid || legacyError ? "error" : disabled ? "disabled" : "default";
-  return /* @__PURE__ */ import_react55.default.createElement(FormControl, { className }, !fieldset && /* @__PURE__ */ import_react55.default.createElement(Label2, { ...rest, variant }, children), fieldset && /* @__PURE__ */ import_react55.default.createElement("fieldset", { id: rest.id }, /* @__PURE__ */ import_react55.default.createElement("legend", { className: tw("w-full mb-2") }, /* @__PURE__ */ import_react55.default.createElement(LabelText, { ...rest, variant })), children), /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement(FormControl, { "data-testid": dataTestId, className }, !fieldset && !!htmlFor && /* @__PURE__ */ import_react55.default.createElement(import_react55.default.Fragment, null, /* @__PURE__ */ import_react55.default.createElement(Label2, { ...rest, htmlFor, variant }), children), !fieldset && !htmlFor && /* @__PURE__ */ import_react55.default.createElement(Label2, { ...rest, variant }, children), fieldset && /* @__PURE__ */ import_react55.default.createElement("fieldset", { id: rest.id }, /* @__PURE__ */ import_react55.default.createElement("legend", { className: tw("w-full mb-2") }, /* @__PURE__ */ import_react55.default.createElement(LabelText, { ...rest, variant })), children), /* @__PURE__ */ import_react55.default.createElement(
     HelperText,
     {
       messageId,
@@ -10308,7 +10340,6 @@ var _SelectBase = (props) => {
     emptyState,
     actions,
     children,
-    labelWrapper,
     ...rest
   } = withDefaults;
   const [hasFocus, setFocus] = (0, import_react64.useState)(false);
@@ -10393,7 +10424,7 @@ var _SelectBase = (props) => {
     !readOnly && /* @__PURE__ */ import_react64.default.createElement(Select.Toggle, { disabled, isOpen, tabIndex: -1 })
   );
   const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
-  return /* @__PURE__ */ import_react64.default.createElement("div", { className: classNames("Aquarium-SelectBase", tw("relative")) }, labelWrapper ? import_react64.default.cloneElement(labelWrapper, { children: input }) : input, isOpen && /* @__PURE__ */ import_react64.default.createElement(
+  return /* @__PURE__ */ import_react64.default.createElement("div", { className: classNames("Aquarium-SelectBase", tw("relative")) }, input, isOpen && /* @__PURE__ */ import_react64.default.createElement(
     PopoverOverlay,
     {
       state,
@@ -10417,7 +10448,7 @@ var _SelectBase = (props) => {
     ))))
   ));
 };
-var SelectBase = (props) => /* @__PURE__ */ import_react64.default.createElement(_SelectBase, { ...props, labelWrapper: void 0 });
+var SelectBase = (props) => /* @__PURE__ */ import_react64.default.createElement(_SelectBase, { ...props });
 var SelectBaseSkeleton = () => /* @__PURE__ */ import_react64.default.createElement(Skeleton, { height: 38 });
 SelectBase.Skeleton = SelectBaseSkeleton;
 var Select2 = ({
@@ -10430,31 +10461,27 @@ var Select2 = ({
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelProps = getLabelControlProps(props);
   const baseProps = (0, import_lodash_es20.omit)(props, (0, import_lodash_es20.without)(Object.keys(labelProps), "required"));
-  const legacyError = labelProps.error !== void 0 && labelProps.valid === false;
-  const variant = !labelProps.valid || legacyError ? "error" : labelProps.disabled ? "disabled" : "default";
-  const label = /* @__PURE__ */ import_react64.default.createElement(Label2, { id: `${id}-label`, htmlFor: `${id}-input`, variant, messageId: errorMessageId, ...labelProps });
-  return /* @__PURE__ */ import_react64.default.createElement(FormControl, { className: "Aquarium-Select" }, /* @__PURE__ */ import_react64.default.createElement(
-    _SelectBase,
-    {
-      ...baseProps,
-      ...errorProps,
-      id: `${id}-input`,
-      options,
-      disabled: props.disabled,
-      valid: props.valid,
-      labelWrapper: label
-    }
-  ), /* @__PURE__ */ import_react64.default.createElement(
-    HelperText,
+  return /* @__PURE__ */ import_react64.default.createElement(
+    LabelControl,
     {
+      id: `${id}-label`,
+      htmlFor: `${id}-input`,
       messageId: errorMessageId,
-      error: !labelProps.valid,
-      helperText: labelProps.helperText,
-      length: labelProps.length,
-      maxLength: labelProps.maxLength,
-      reserveSpaceForError: labelProps.reserveSpaceForError
-    }
-  ));
+      ...labelProps,
+      className: "Aquarium-Select"
+    },
+    /* @__PURE__ */ import_react64.default.createElement(
+      _SelectBase,
+      {
+        ...baseProps,
+        ...errorProps,
+        id: `${id}-input`,
+        options,
+        disabled: props.disabled,
+        valid: props.valid
+      }
+    )
+  );
 };
 var SelectSkeleton = () => /* @__PURE__ */ import_react64.default.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ import_react64.default.createElement(SelectBase.Skeleton, null));
 Select2.Skeleton = SelectSkeleton;
@@ -11702,6 +11729,7 @@ var DataListGroup = ({
   } = props;
   const groupKeys = groups ? Object.keys(groups) : void 0;
   const hasCustomRowForGroup = (0, import_lodash_es29.isFunction)(getGroupRow);
+  const isMultiSelectionMode = selectable === "multiple" || selectable === "multiple-not-all";
   if (!areRowsGrouped(groups)) {
     if (groups.length === 0 && groupKey && groupKey !== "undefined") {
       const emptyGroupContent = renderEmptyGroup(groupKey);
@@ -11767,7 +11795,7 @@ var DataListGroup = ({
                     checked: isSelected,
                     disabled: isDisabled || isSelectionDisabled
                   }
-                ), selectable === "multiple" && /* @__PURE__ */ import_react77.default.createElement(
+                ), isMultiSelectionMode && /* @__PURE__ */ import_react77.default.createElement(
                   Checkbox,
                   {
                     "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
@@ -11813,7 +11841,7 @@ var DataListGroup = ({
         const isChecked = nestedSelectedIds.length > 0;
         const isActiveRow = !!openPanelId || selectable && isChecked;
         const isLastRow = isLastGroup && index === groupKeys.length - 1 && !openPanelId;
-        return /* @__PURE__ */ import_react77.default.createElement(Accordion, { key, openPanelId }, hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, selectable === "multiple" && /* @__PURE__ */ import_react77.default.createElement(
+        return /* @__PURE__ */ import_react77.default.createElement(Accordion, { key, openPanelId }, hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, isMultiSelectionMode && /* @__PURE__ */ import_react77.default.createElement(
           Checkbox,
           {
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
@@ -11848,7 +11876,7 @@ var DataListGroup = ({
             onMenuOpenChange,
             menuAriaLabel
           }
-        )), !hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, selectable === "multiple" && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react77.default.createElement(
+        )), !hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, isMultiSelectionMode && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react77.default.createElement(
           Checkbox,
           {
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
@@ -12008,6 +12036,7 @@ var DataList2 = ({
       setSelected(selected?.filter((_id) => !ids.includes(_id)));
     }
   };
+  const isMultiSelectionMode = selectable === "multiple" || selectable === "multiple-not-all";
   const allRows = flattenRows(rows);
   const totalSelected = selected?.length ?? 0;
   const allEnabledRowIds = (0, import_lodash_es31.compact)(
@@ -12127,7 +12156,7 @@ var DataList2 = ({
                   checked: isSelected,
                   disabled: isDisabled || isSelectionDisabled
                 }
-              ), selectable === "multiple" && /* @__PURE__ */ import_react80.default.createElement(
+              ), isMultiSelectionMode && /* @__PURE__ */ import_react80.default.createElement(
                 Checkbox,
                 {
                   "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
@@ -12423,7 +12452,7 @@ var fieldBorder = (0, import_tailwind_variants2.tv)({
   }
 });
 var fieldGroup = (0, import_tailwind_variants2.tv)({
-  base: "group flex items-center bg-body border rounded-sm typography-small text-default px-3 py-3 overflow-hidden",
+  base: "group flex items-center bg-transparent border rounded-sm typography-small text-default px-3 py-3 overflow-hidden",
   variants: fieldBorder.variants
 });
 
@@ -12500,7 +12529,7 @@ var ButtonBase = ({
       ...props,
       className: classNames(
         className,
-        tw("group-hover:opacity-100 py-1 ", {
+        tw("group-hover:opacity-100 p-0", {
           "opacity-0 group-focus-within:opacity-100": !hideWhenParentIsNotHoveredOrFocused
         })
       )
@@ -12646,7 +12675,7 @@ var createDatePickerBase = (variant) => ({
       isInvalid: valid === false,
       granularity: granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0)
     },
-    /* @__PURE__ */ import_react91.default.createElement(FieldGroup, { className: tw("min-w-[210px] w-auto") }, /* @__PURE__ */ import_react91.default.createElement(DateInput, { className: tw("flex-1") }), clearSelectionEnabled && !disabled && /* @__PURE__ */ import_react91.default.createElement(DatePickerClearButton, null), /* @__PURE__ */ import_react91.default.createElement(CalendarButton, null)),
+    /* @__PURE__ */ import_react91.default.createElement(FieldGroup, { className: tw("min-w-[210px] w-auto") }, /* @__PURE__ */ import_react91.default.createElement(DateInput, { className: tw("flex-1") }), /* @__PURE__ */ import_react91.default.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ import_react91.default.createElement(DatePickerClearButton, null), /* @__PURE__ */ import_react91.default.createElement(CalendarButton, null))),
     /* @__PURE__ */ import_react91.default.createElement(Popover2, { offset: 0 }, /* @__PURE__ */ import_react91.default.createElement(Dialog, null, /* @__PURE__ */ import_react91.default.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ import_react91.default.createElement(Calendar, null), variant === "datetime" && /* @__PURE__ */ import_react91.default.createElement(PickerTimeField, { granularity }), errorMessage && /* @__PURE__ */ import_react91.default.createElement(import_react_aria_components8.Text, { slot: "errorMessage", className: tw("typography-caption text-danger-default max-w-[300px]") }, errorMessage))))
   );
 };
@@ -12777,7 +12806,7 @@ var createDateRangePickerBase = (variant) => ({
       granularity: granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0),
       className: tw("group flex flex-col gap-1")
     },
-    /* @__PURE__ */ import_react93.default.createElement(FieldGroup, { className: tw("min-w-[200px] w-auto gap-2") }, /* @__PURE__ */ import_react93.default.createElement(DateInput, { slot: "start", className: tw("px-2 py-1") }), /* @__PURE__ */ import_react93.default.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ import_react93.default.createElement(DateInput, { slot: "end", className: tw("flex-1 px-2 py-1") }), clearSelectionEnabled && !disabled && /* @__PURE__ */ import_react93.default.createElement(DateRangePickerClearButton, null), /* @__PURE__ */ import_react93.default.createElement(CalendarButton, null)),
+    /* @__PURE__ */ import_react93.default.createElement(FieldGroup, { className: tw("min-w-[200px] w-auto gap-2") }, /* @__PURE__ */ import_react93.default.createElement(DateInput, { slot: "start", className: tw("px-2 py-1") }), /* @__PURE__ */ import_react93.default.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ import_react93.default.createElement(DateInput, { slot: "end", className: tw("flex-1 px-2 py-1") }), /* @__PURE__ */ import_react93.default.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ import_react93.default.createElement(DateRangePickerClearButton, null), /* @__PURE__ */ import_react93.default.createElement(CalendarButton, null))),
     /* @__PURE__ */ import_react93.default.createElement(Popover2, { offset: 0 }, /* @__PURE__ */ import_react93.default.createElement(Dialog, null, /* @__PURE__ */ import_react93.default.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ import_react93.default.createElement(RangeCalendar, null), variant === "datetime" && /* @__PURE__ */ import_react93.default.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ import_react93.default.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ import_react93.default.createElement(PickerTimeField2, { granularity, part: "start" })), /* @__PURE__ */ import_react93.default.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ import_react93.default.createElement(PickerTimeField2, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ import_react93.default.createElement(import_react_aria_components10.Text, { slot: "errorMessage", className: tw("typography-caption text-danger-default max-w-[300px]") }, errorMessage))))
   );
 };
@@ -14463,8 +14492,8 @@ var NativeSelectBase = import_react115.default.forwardRef(
           tw(
             "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 bg-body disabled:border-default disabled:bg-default disabled:text-inactive": !readOnly,
-              "px-0 py-3 border-none": readOnly,
+              "px-3 py-3 bg-transparent disabled:border-default disabled:bg-default disabled:text-inactive": !readOnly,
+              "px-0 py-3 border-none bg-transparent": readOnly,
               "border border-danger-default": !valid && !readOnly,
               "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
             }

package/dist/system.mjs

@@ -1388,6 +1388,22 @@ var require_database02 = __commonJS({
   }
 });
 
+// src/icons/databaseArrow.js
+var require_databaseArrow = __commonJS({
+  "src/icons/databaseArrow.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 3.333c0 1.105-2.686 2-6 2s-6-.895-6-2m12 0c0-1.104-2.686-2-6-2s-6 .896-6 2m12 0v3.212M2 3.333v9.334c0 1.106 2.667 2 6 2m6-8.187c0 1.107-2.667 2-6 2s-6-.893-6-2m6 5.147c-3.333 0-6-.894-6-2m12.91 2.737-2.183-2.182m0 0-2.181 2.182m2.181-2.182v4.364"/>',
+      "left": 0,
+      "top": 0,
+      "width": 16,
+      "height": 16
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/database.js
 var require_database = __commonJS({
   "src/icons/database.js"(exports) {
@@ -4471,7 +4487,7 @@ var InputContainer = React2.forwardRef(
           "border-danger-default": variant === "error",
           "hover:border-intense": variant !== "error" && variant !== "disabled" && variant !== "focused",
           "border-info-default": variant === "focused",
-          "bg-body": variant !== "disabled",
+          "bg-transparent": variant !== "disabled",
           "cursor-not-allowed border-default bg-default": variant === "disabled"
         }
       ),
@@ -4487,12 +4503,11 @@ var Input = React2.forwardRef(({ className, required, ...props }, ref) => /* @__
     "aria-required": required,
     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-inactive",
+      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small bg-transparent disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
       {
         "text-default": !props.disabled,
         "text-inactive": props.disabled,
-        "bg-body": !props.readOnly,
-        "cursor-default bg-transparent": props.readOnly
+        "cursor-default": props.readOnly
       }
     ),
     ...props
@@ -4504,7 +4519,7 @@ var Menu = React2.forwardRef(
     {
       ref,
       style: { maxHeight },
-      className: classNames(className, tw("text-default bg-body overflow-y-auto")),
+      className: classNames(className, tw("text-default bg-popover-content overflow-y-auto")),
       ...props
     },
     children
@@ -4533,7 +4548,7 @@ var Item = React2.forwardRef(
     "li",
     {
       ref,
-      className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
+      className: classNames("Aquarium-Select.Item", className, "flex items-center gap-x-3 p-3 typography-small", {
         "cursor-pointer hover:bg-muted": !props["aria-disabled"],
         "cursor-not-allowed opacity-40 grayscale": props["aria-disabled"],
         "bg-muted": highlighted
@@ -4685,6 +4700,7 @@ var import_currencyDollar = __toESM(require_currencyDollar());
 var import_dashboard = __toESM(require_dashboard());
 var import_dataLineage = __toESM(require_dataLineage());
 var import_database02 = __toESM(require_database02());
+var import_databaseArrow = __toESM(require_databaseArrow());
 var import_database = __toESM(require_database());
 var import_dataflow01 = __toESM(require_dataflow01());
 var import_dataflow02 = __toESM(require_dataflow02());
@@ -7084,7 +7100,7 @@ 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 bg-body": !readOnly,
+    "px-3 py-3 bg-transparent": !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
@@ -9318,8 +9334,22 @@ import React49 from "react";
 
 // src/utils/form/FormControl/FormControl.tsx
 import React46 from "react";
-var FormControl = ({ className, inline, children }) => {
-  return /* @__PURE__ */ React46.createElement(Box.Flex, { flexDirection: "column", display: inline ? "inline-flex" : "flex", className }, children);
+var FormControl = ({
+  className,
+  inline,
+  children,
+  "data-testid": dataTestId
+}) => {
+  return /* @__PURE__ */ React46.createElement(
+    Box.Flex,
+    {
+      "data-testid": dataTestId,
+      flexDirection: "column",
+      display: inline ? "inline-flex" : "flex",
+      className
+    },
+    children
+  );
 };
 
 // src/utils/form/HelperText/HelperText.tsx
@@ -9421,11 +9451,13 @@ var LabelControl = ({
   valid,
   disabled,
   className,
+  htmlFor,
+  "data-testid": dataTestId,
   ...rest
 }) => {
   const legacyError = error2 !== void 0 && valid === false;
   const variant = !valid || legacyError ? "error" : disabled ? "disabled" : "default";
-  return /* @__PURE__ */ React49.createElement(FormControl, { className }, !fieldset && /* @__PURE__ */ React49.createElement(Label2, { ...rest, variant }, children), fieldset && /* @__PURE__ */ React49.createElement("fieldset", { id: rest.id }, /* @__PURE__ */ React49.createElement("legend", { className: tw("w-full mb-2") }, /* @__PURE__ */ React49.createElement(LabelText, { ...rest, variant })), children), /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React49.createElement(FormControl, { "data-testid": dataTestId, className }, !fieldset && !!htmlFor && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(Label2, { ...rest, htmlFor, variant }), children), !fieldset && !htmlFor && /* @__PURE__ */ React49.createElement(Label2, { ...rest, variant }, children), fieldset && /* @__PURE__ */ React49.createElement("fieldset", { id: rest.id }, /* @__PURE__ */ React49.createElement("legend", { className: tw("w-full mb-2") }, /* @__PURE__ */ React49.createElement(LabelText, { ...rest, variant })), children), /* @__PURE__ */ React49.createElement(
     HelperText,
     {
       messageId,
@@ -10145,7 +10177,6 @@ var _SelectBase = (props) => {
     emptyState,
     actions,
     children,
-    labelWrapper,
     ...rest
   } = withDefaults;
   const [hasFocus, setFocus] = useState8(false);
@@ -10230,7 +10261,7 @@ var _SelectBase = (props) => {
     !readOnly && /* @__PURE__ */ React58.createElement(Select.Toggle, { disabled, isOpen, tabIndex: -1 })
   );
   const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
-  return /* @__PURE__ */ React58.createElement("div", { className: classNames("Aquarium-SelectBase", tw("relative")) }, labelWrapper ? React58.cloneElement(labelWrapper, { children: input }) : input, isOpen && /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React58.createElement("div", { className: classNames("Aquarium-SelectBase", tw("relative")) }, input, isOpen && /* @__PURE__ */ React58.createElement(
     PopoverOverlay,
     {
       state,
@@ -10254,7 +10285,7 @@ var _SelectBase = (props) => {
     ))))
   ));
 };
-var SelectBase = (props) => /* @__PURE__ */ React58.createElement(_SelectBase, { ...props, labelWrapper: void 0 });
+var SelectBase = (props) => /* @__PURE__ */ React58.createElement(_SelectBase, { ...props });
 var SelectBaseSkeleton = () => /* @__PURE__ */ React58.createElement(Skeleton, { height: 38 });
 SelectBase.Skeleton = SelectBaseSkeleton;
 var Select2 = ({
@@ -10267,31 +10298,27 @@ var Select2 = ({
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelProps = getLabelControlProps(props);
   const baseProps = omit6(props, without(Object.keys(labelProps), "required"));
-  const legacyError = labelProps.error !== void 0 && labelProps.valid === false;
-  const variant = !labelProps.valid || legacyError ? "error" : labelProps.disabled ? "disabled" : "default";
-  const label = /* @__PURE__ */ React58.createElement(Label2, { id: `${id}-label`, htmlFor: `${id}-input`, variant, messageId: errorMessageId, ...labelProps });
-  return /* @__PURE__ */ React58.createElement(FormControl, { className: "Aquarium-Select" }, /* @__PURE__ */ React58.createElement(
-    _SelectBase,
-    {
-      ...baseProps,
-      ...errorProps,
-      id: `${id}-input`,
-      options,
-      disabled: props.disabled,
-      valid: props.valid,
-      labelWrapper: label
-    }
-  ), /* @__PURE__ */ React58.createElement(
-    HelperText,
+  return /* @__PURE__ */ React58.createElement(
+    LabelControl,
     {
+      id: `${id}-label`,
+      htmlFor: `${id}-input`,
       messageId: errorMessageId,
-      error: !labelProps.valid,
-      helperText: labelProps.helperText,
-      length: labelProps.length,
-      maxLength: labelProps.maxLength,
-      reserveSpaceForError: labelProps.reserveSpaceForError
-    }
-  ));
+      ...labelProps,
+      className: "Aquarium-Select"
+    },
+    /* @__PURE__ */ React58.createElement(
+      _SelectBase,
+      {
+        ...baseProps,
+        ...errorProps,
+        id: `${id}-input`,
+        options,
+        disabled: props.disabled,
+        valid: props.valid
+      }
+    )
+  );
 };
 var SelectSkeleton = () => /* @__PURE__ */ React58.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React58.createElement(SelectBase.Skeleton, null));
 Select2.Skeleton = SelectSkeleton;
@@ -11539,6 +11566,7 @@ var DataListGroup = ({
   } = props;
   const groupKeys = groups ? Object.keys(groups) : void 0;
   const hasCustomRowForGroup = isFunction2(getGroupRow);
+  const isMultiSelectionMode = selectable === "multiple" || selectable === "multiple-not-all";
   if (!areRowsGrouped(groups)) {
     if (groups.length === 0 && groupKey && groupKey !== "undefined") {
       const emptyGroupContent = renderEmptyGroup(groupKey);
@@ -11604,7 +11632,7 @@ var DataListGroup = ({
                     checked: isSelected,
                     disabled: isDisabled || isSelectionDisabled
                   }
-                ), selectable === "multiple" && /* @__PURE__ */ React69.createElement(
+                ), isMultiSelectionMode && /* @__PURE__ */ React69.createElement(
                   Checkbox,
                   {
                     "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
@@ -11650,7 +11678,7 @@ var DataListGroup = ({
         const isChecked = nestedSelectedIds.length > 0;
         const isActiveRow = !!openPanelId || selectable && isChecked;
         const isLastRow = isLastGroup && index === groupKeys.length - 1 && !openPanelId;
-        return /* @__PURE__ */ React69.createElement(Accordion, { key, openPanelId }, hasCustomRowForGroup && /* @__PURE__ */ React69.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null, selectable === "multiple" && /* @__PURE__ */ React69.createElement(
+        return /* @__PURE__ */ React69.createElement(Accordion, { key, openPanelId }, hasCustomRowForGroup && /* @__PURE__ */ React69.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, selectable && /* @__PURE__ */ React69.createElement(DataList.Cell, null, isMultiSelectionMode && /* @__PURE__ */ React69.createElement(
           Checkbox,
           {
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
@@ -11685,7 +11713,7 @@ var DataListGroup = ({
             onMenuOpenChange,
             menuAriaLabel
           }
-        )), !hasCustomRowForGroup && /* @__PURE__ */ React69.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, selectable === "multiple" && /* @__PURE__ */ React69.createElement(DataList.Cell, null, /* @__PURE__ */ React69.createElement(
+        )), !hasCustomRowForGroup && /* @__PURE__ */ React69.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, isMultiSelectionMode && /* @__PURE__ */ React69.createElement(DataList.Cell, null, /* @__PURE__ */ React69.createElement(
           Checkbox,
           {
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
@@ -11845,6 +11873,7 @@ var DataList2 = ({
       setSelected(selected?.filter((_id) => !ids.includes(_id)));
     }
   };
+  const isMultiSelectionMode = selectable === "multiple" || selectable === "multiple-not-all";
   const allRows = flattenRows(rows);
   const totalSelected = selected?.length ?? 0;
   const allEnabledRowIds = compact(
@@ -11964,7 +11993,7 @@ var DataList2 = ({
                   checked: isSelected,
                   disabled: isDisabled || isSelectionDisabled
                 }
-              ), selectable === "multiple" && /* @__PURE__ */ React72.createElement(
+              ), isMultiSelectionMode && /* @__PURE__ */ React72.createElement(
                 Checkbox,
                 {
                   "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
@@ -12264,7 +12293,7 @@ var fieldBorder = tv2({
   }
 });
 var fieldGroup = tv2({
-  base: "group flex items-center bg-body border rounded-sm typography-small text-default px-3 py-3 overflow-hidden",
+  base: "group flex items-center bg-transparent border rounded-sm typography-small text-default px-3 py-3 overflow-hidden",
   variants: fieldBorder.variants
 });
 
@@ -12343,7 +12372,7 @@ var ButtonBase = ({
       ...props,
       className: classNames(
         className,
-        tw("group-hover:opacity-100 py-1 ", {
+        tw("group-hover:opacity-100 p-0", {
           "opacity-0 group-focus-within:opacity-100": !hideWhenParentIsNotHoveredOrFocused
         })
       )
@@ -12502,7 +12531,7 @@ var createDatePickerBase = (variant) => ({
       isInvalid: valid === false,
       granularity: granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0)
     },
-    /* @__PURE__ */ React83.createElement(FieldGroup, { className: tw("min-w-[210px] w-auto") }, /* @__PURE__ */ React83.createElement(DateInput, { className: tw("flex-1") }), clearSelectionEnabled && !disabled && /* @__PURE__ */ React83.createElement(DatePickerClearButton, null), /* @__PURE__ */ React83.createElement(CalendarButton, null)),
+    /* @__PURE__ */ React83.createElement(FieldGroup, { className: tw("min-w-[210px] w-auto") }, /* @__PURE__ */ React83.createElement(DateInput, { className: tw("flex-1") }), /* @__PURE__ */ React83.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ React83.createElement(DatePickerClearButton, null), /* @__PURE__ */ React83.createElement(CalendarButton, null))),
     /* @__PURE__ */ React83.createElement(Popover2, { offset: 0 }, /* @__PURE__ */ React83.createElement(Dialog, null, /* @__PURE__ */ React83.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ React83.createElement(Calendar, null), variant === "datetime" && /* @__PURE__ */ React83.createElement(PickerTimeField, { granularity }), errorMessage && /* @__PURE__ */ React83.createElement(Text, { slot: "errorMessage", className: tw("typography-caption text-danger-default max-w-[300px]") }, errorMessage))))
   );
 };
@@ -12642,7 +12671,7 @@ var createDateRangePickerBase = (variant) => ({
       granularity: granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0),
       className: tw("group flex flex-col gap-1")
     },
-    /* @__PURE__ */ React85.createElement(FieldGroup, { className: tw("min-w-[200px] w-auto gap-2") }, /* @__PURE__ */ React85.createElement(DateInput, { slot: "start", className: tw("px-2 py-1") }), /* @__PURE__ */ React85.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ React85.createElement(DateInput, { slot: "end", className: tw("flex-1 px-2 py-1") }), clearSelectionEnabled && !disabled && /* @__PURE__ */ React85.createElement(DateRangePickerClearButton, null), /* @__PURE__ */ React85.createElement(CalendarButton, null)),
+    /* @__PURE__ */ React85.createElement(FieldGroup, { className: tw("min-w-[200px] w-auto gap-2") }, /* @__PURE__ */ React85.createElement(DateInput, { slot: "start", className: tw("px-2 py-1") }), /* @__PURE__ */ React85.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ React85.createElement(DateInput, { slot: "end", className: tw("flex-1 px-2 py-1") }), /* @__PURE__ */ React85.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ React85.createElement(DateRangePickerClearButton, null), /* @__PURE__ */ React85.createElement(CalendarButton, null))),
     /* @__PURE__ */ React85.createElement(Popover2, { offset: 0 }, /* @__PURE__ */ React85.createElement(Dialog, null, /* @__PURE__ */ React85.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ React85.createElement(RangeCalendar, null), variant === "datetime" && /* @__PURE__ */ React85.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ React85.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React85.createElement(PickerTimeField2, { granularity, part: "start" })), /* @__PURE__ */ React85.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React85.createElement(PickerTimeField2, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ React85.createElement(Text2, { slot: "errorMessage", className: tw("typography-caption text-danger-default max-w-[300px]") }, errorMessage))))
   );
 };
@@ -14328,8 +14357,8 @@ var NativeSelectBase = React106.forwardRef(
           tw(
             "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 bg-body disabled:border-default disabled:bg-default disabled:text-inactive": !readOnly,
-              "px-0 py-3 border-none": readOnly,
+              "px-3 py-3 bg-transparent disabled:border-default disabled:bg-default disabled:text-inactive": !readOnly,
+              "px-0 py-3 border-none bg-transparent": readOnly,
               "border border-danger-default": !valid && !readOnly,
               "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
             }