@aivenio/aquarium 1.79.0 → 1.80.0

package/dist/system.cjs

@@ -7030,7 +7030,9 @@ function useTooltipTriggerState(props = {}) {
 // src/molecules/Tooltip/Tooltip.tsx
 var Tooltip = (_a) => {
   var _b = _a, { inline = true, delay = 200 } = _b, props = __objRest(_b, ["inline", "delay"]);
+  var _a2;
   const { placement: _placement = "top", content, disabled: isDisabled, shouldFlip = true } = props;
+  const display = (_a2 = props.display) != null ? _a2 : inline ? "inline-block" : "block";
   const triggerRef = import_react11.default.useRef(null);
   const overlayRef = import_react11.default.useRef(null);
   const state = useTooltipTriggerState(__spreadValues({ isDisabled, delay }, props));
@@ -7047,41 +7049,41 @@ var Tooltip = (_a) => {
     onFocusWithinChange: (isFocusWithin) => isFocusWithin ? state.open() : state.close()
   });
   const handleClick = (e) => {
-    var _a2, _b2;
-    (_a2 = props.onClick) == null ? void 0 : _a2.call(props, e);
+    var _a3, _b2;
+    (_a3 = props.onClick) == null ? void 0 : _a3.call(props, e);
     (_b2 = triggerProps.onClick) == null ? void 0 : _b2.call(triggerProps, e);
   };
   const handleMouseDown = (e) => {
-    var _a2, _b2;
-    (_a2 = props.onMouseDown) == null ? void 0 : _a2.call(props, e);
+    var _a3, _b2;
+    (_a3 = props.onMouseDown) == null ? void 0 : _a3.call(props, e);
     (_b2 = triggerProps.onMouseDown) == null ? void 0 : _b2.call(triggerProps, e);
   };
   const handleMouseUp = (e) => {
-    var _a2, _b2;
-    (_a2 = props.onMouseUp) == null ? void 0 : _a2.call(props, e);
+    var _a3, _b2;
+    (_a3 = props.onMouseUp) == null ? void 0 : _a3.call(props, e);
     (_b2 = triggerProps.onMouseUp) == null ? void 0 : _b2.call(triggerProps, e);
   };
   const handlePointerDown = (e) => {
-    var _a2, _b2;
-    (_a2 = props.onPointerDown) == null ? void 0 : _a2.call(props, e);
+    var _a3, _b2;
+    (_a3 = props.onPointerDown) == null ? void 0 : _a3.call(props, e);
     (_b2 = triggerProps.onPointerDown) == null ? void 0 : _b2.call(triggerProps, e);
   };
   const handlePointerUp = (e) => {
-    var _a2, _b2;
-    (_a2 = props.onPointerUp) == null ? void 0 : _a2.call(props, e);
+    var _a3, _b2;
+    (_a3 = props.onPointerUp) == null ? void 0 : _a3.call(props, e);
     (_b2 = triggerProps.onPointerUp) == null ? void 0 : _b2.call(triggerProps, e);
   };
   return /* @__PURE__ */ import_react11.default.createElement("div", __spreadProps(__spreadValues({
-    className: tw(`${inline ? "inline-block" : "block"}`)
+    className: display
   }, triggerProps), {
     onFocus: (e) => {
-      var _a2, _b2;
-      (_a2 = triggerProps.onFocus) == null ? void 0 : _a2.call(triggerProps, e);
+      var _a3, _b2;
+      (_a3 = triggerProps.onFocus) == null ? void 0 : _a3.call(triggerProps, e);
       (_b2 = focusWithinProps.onFocus) == null ? void 0 : _b2.call(focusWithinProps, e);
     },
     onBlur: (e) => {
-      var _a2, _b2;
-      (_a2 = triggerProps.onBlur) == null ? void 0 : _a2.call(triggerProps, e);
+      var _a3, _b2;
+      (_a3 = triggerProps.onBlur) == null ? void 0 : _a3.call(triggerProps, e);
       (_b2 = focusWithinProps.onBlur) == null ? void 0 : _b2.call(focusWithinProps, e);
     },
     onClick: handleClick,
@@ -10428,7 +10430,8 @@ var ComboboxBase = (_a) => {
     onInputValueChange: ({ selectedItem: selectedItem2, inputValue: inputValue2 }) => {
       updateInputItems(inputValue2, selectedItem2);
       onSearchChange == null ? void 0 : onSearchChange(inputValue2);
-    }
+    },
+    scrollIntoView: (node, _menuNode) => node.scrollIntoView({ block: "nearest" })
   });
   const state = {
     isOpen,
@@ -10894,7 +10897,8 @@ var _SelectBase = (props) => {
     isItemDisabled: (item, index) => isOptionDisabled(item, index),
     items,
     itemToString,
-    onSelectedItemChange: (e) => onChange == null ? void 0 : onChange(e.selectedItem)
+    onSelectedItemChange: (e) => onChange == null ? void 0 : onChange(e.selectedItem),
+    scrollIntoView: (node, _menuNode) => node.scrollIntoView({ block: "nearest" })
   });
   const state = {
     isOpen,
@@ -12169,6 +12173,7 @@ var DataListRow = ({
   menu,
   active,
   disabled,
+  rowClassName,
   renderFirstColumn,
   additionalRowProps = () => ({}),
   additionalColumnProps = () => ({}),
@@ -12183,7 +12188,9 @@ var DataListRow = ({
   }, additionalRowProps(row, index, rows)), renderFirstColumn == null ? void 0 : renderFirstColumn(row, index, rows), /* @__PURE__ */ import_react75.default.createElement(List, {
     items: columns,
     renderItem: (column, columnIndex) => {
-      const cell2 = /* @__PURE__ */ import_react75.default.createElement(DataList.Cell, __spreadValues(__spreadValues({}, cellProps(column)), additionalColumnProps(column, columnIndex, columns, row)), /* @__PURE__ */ import_react75.default.createElement(DataListCell, {
+      const cell2 = /* @__PURE__ */ import_react75.default.createElement(DataList.Cell, __spreadProps(__spreadValues(__spreadValues({}, cellProps(column)), additionalColumnProps(column, columnIndex, columns, row)), {
+        className: rowClassName == null ? void 0 : rowClassName(row, index, rows)
+      }), /* @__PURE__ */ import_react75.default.createElement(DataListCell, {
         column,
         row,
         index,
@@ -12292,6 +12299,7 @@ var DataListGroup = (_a) => {
   const {
     columns,
     disabled,
+    rowClassName,
     expandedGroupIds,
     getGroupRow,
     renderGroupName = renderDefaultGroupName,
@@ -12343,6 +12351,7 @@ var DataListGroup = (_a) => {
             menuAriaLabel
           }),
           disabled,
+          rowClassName,
           additionalRowProps: () => selectable ? {
             "aria-selected": isChecked
           } : {},
@@ -12522,6 +12531,7 @@ var DataList2 = (_a) => {
     rowDetails,
     group,
     disabled,
+    rowClassName,
     getGroupRow,
     renderGroupName,
     renderEmptyGroup,
@@ -12551,6 +12561,7 @@ var DataList2 = (_a) => {
     "rowDetails",
     "group",
     "disabled",
+    "rowClassName",
     "getGroupRow",
     "renderGroupName",
     "renderEmptyGroup",
@@ -12616,15 +12627,7 @@ var DataList2 = (_a) => {
     )
   );
   const allRowsSelected = totalSelected >= allEnabledRowIds.length;
-  return /* @__PURE__ */ import_react80.default.createElement(DataListContext.Provider, {
-    value: {
-      rows: (0, import_isArray3.default)(rows) ? sortedRows : rows,
-      selectedRows: selected
-    }
-  }, /* @__PURE__ */ import_react80.default.createElement("div", {
-    className: "relative w-full overflow-x-auto",
-    ref: containerRef
-  }, /* @__PURE__ */ import_react80.default.createElement(Template, {
+  const componentContent = /* @__PURE__ */ import_react80.default.createElement(Template, {
     className: "Aquarium-DataList",
     columns: templateColumns,
     role: "table"
@@ -12681,6 +12684,7 @@ var DataList2 = (_a) => {
   }, menuHeaderName)), toolbar), groups && /* @__PURE__ */ import_react80.default.createElement(DataListGroup, {
     columns,
     disabled,
+    rowClassName,
     getGroupRow,
     renderGroupName,
     renderEmptyGroup,
@@ -12726,6 +12730,7 @@ var DataList2 = (_a) => {
           menuAriaLabel
         }),
         disabled,
+        rowClassName,
         additionalRowProps: (row2) => {
           var _a4;
           return selectable ? {
@@ -12759,7 +12764,17 @@ var DataList2 = (_a) => {
         role: "cell"
       }, details)));
     }
-  })))));
+  })));
+  const wrappedContent = hasStickyColumns ? /* @__PURE__ */ import_react80.default.createElement("div", {
+    className: "relative w-full h-full overflow-auto",
+    ref: containerRef
+  }, componentContent) : componentContent;
+  return /* @__PURE__ */ import_react80.default.createElement(DataListContext.Provider, {
+    value: {
+      rows: (0, import_isArray3.default)(rows) ? sortedRows : rows,
+      selectedRows: selected
+    }
+  }, wrappedContent);
 };
 DataList2.Skeleton = DataListSkeleton;
 DataList2.Toolbar = DataListToolbar;
@@ -12829,6 +12844,7 @@ var DataTable = (_a) => {
     onAction,
     onMenuOpenChange,
     disabled,
+    rowClassName,
     defaultSort,
     onSortChanged,
     ariaLabel,
@@ -12847,6 +12863,7 @@ var DataTable = (_a) => {
     "onAction",
     "onMenuOpenChange",
     "disabled",
+    "rowClassName",
     "defaultSort",
     "onSortChanged",
     "ariaLabel",
@@ -12868,10 +12885,7 @@ var DataTable = (_a) => {
     }, children))),
     [amountOfColumns]
   );
-  return /* @__PURE__ */ import_react83.default.createElement("div", {
-    className: "relative w-full overflow-x-auto",
-    ref: containerRef
-  }, /* @__PURE__ */ import_react83.default.createElement(Table2, {
+  const compponentContent = /* @__PURE__ */ import_react83.default.createElement(Table2, {
     ariaLabel,
     onNext,
     onPrev,
@@ -12936,14 +12950,20 @@ var DataTable = (_a) => {
         items: columns,
         renderItem: (column) => {
           return createAnimatedCell({
-            cellElement: /* @__PURE__ */ import_react83.default.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), renderCell(column, row, index, sortedRows)),
+            cellElement: /* @__PURE__ */ import_react83.default.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+              className: rowClassName == null ? void 0 : rowClassName(row, index, rows)
+            }), renderCell(column, row, index, sortedRows)),
             stickyStyles,
             stickyColumn: cellProps(column).stickyColumn
           });
         }
       }), renderRowMenu(row, index, { menu, menuAriaLabel, onAction, onMenuOpenChange }));
     }
-  }))));
+  })));
+  return hasStickyColumns ? /* @__PURE__ */ import_react83.default.createElement("div", {
+    className: "relative w-full overflow-x-auto",
+    ref: containerRef
+  }, compponentContent) : compponentContent;
 };
 var renderRowMenu = (row, index, {
   menu,
@@ -15055,7 +15075,8 @@ var MultiSelectBase = (_a) => {
           break;
         }
       }
-    }
+    },
+    scrollIntoView: (node, _menuNode) => node.scrollIntoView({ block: "nearest" })
   });
   const state = {
     isOpen,
@@ -15922,12 +15943,18 @@ var TagLabel = (_a) => {
 var import_react128 = __toESM(require("react"));
 var import_caretUp2 = __toESM(require_caretUp());
 var Section3 = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ import_react128.default.createElement(Box, __spreadValues({
-    component: "section",
-    borderColor: "grey-5",
-    borderWidth: "1px"
-  }, rest), children);
+  var _b = _a, {
+    children,
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ import_react128.default.createElement(Box, __spreadProps(__spreadValues({
+    component: "section"
+  }, rest), {
+    className: classNames(tw("border border-muted"), className)
+  }), children);
 };
 Section3.Header = (_a) => {
   var _b = _a, { children, className, expanded } = _b, rest = __objRest(_b, ["children", "className", "expanded"]);
@@ -16023,12 +16050,11 @@ var Section4 = (props) => {
     height: height !== null ? targetHeight : void 0,
     opacity: isCollapsed ? 0 : 1,
     transform: `rotate(${isCollapsed ? 90 : 180}deg)`,
-    backgroundColor: isCollapsed ? tokens_default.backgroundColor.muted : tokens_default.backgroundColor.default,
     config: {
       duration: 150
     },
     immediate: !_collapsible
-  }), { transform, backgroundColor } = _f, spring = __objRest(_f, ["transform", "backgroundColor"]);
+  }), { transform } = _f, spring = __objRest(_f, ["transform"]);
   const toggleId = (0, import_utils39.useId)();
   const regionId = (0, import_utils39.useId)();
   const titleId = (0, import_utils39.useId)();
@@ -16039,7 +16065,7 @@ var Section4 = (props) => {
   );
   return /* @__PURE__ */ import_react129.default.createElement(Section3, {
     "aria-label": title,
-    className: "Aquarium-Section"
+    className: _collapsible ? "Aquarium-Collapsible-Section" : "Aquarium-Section"
   }, title && /* @__PURE__ */ import_react129.default.createElement(import_react129.default.Fragment, null, /* @__PURE__ */ import_react129.default.createElement(Section3.Header, {
     expanded: _collapsible && !isCollapsed
   }, /* @__PURE__ */ import_react129.default.createElement(Section3.TitleContainer, __spreadProps(__spreadValues({}, _collapsible ? __spreadProps(__spreadValues({}, buttonProps), {
@@ -16076,7 +16102,7 @@ var Section4 = (props) => {
     "aria-labelledby": titleId
   }, props.select)))), !hasTabs && !isCollapsed && /* @__PURE__ */ import_react129.default.createElement(import_web6.animated.div, {
     className: tw(`h-[1px]`),
-    style: { backgroundColor }
+    style: { backgroundColor: "var(--aquarium-border-color-muted)" }
   })), /* @__PURE__ */ import_react129.default.createElement(import_web6.animated.div, {
     id: regionId,
     "aria-hidden": _collapsible ? isCollapsed ? true : void 0 : void 0,

package/dist/system.mjs

@@ -6870,7 +6870,9 @@ function useTooltipTriggerState(props = {}) {
 // src/molecules/Tooltip/Tooltip.tsx
 var Tooltip = (_a) => {
   var _b = _a, { inline = true, delay = 200 } = _b, props = __objRest(_b, ["inline", "delay"]);
+  var _a2;
   const { placement: _placement = "top", content, disabled: isDisabled, shouldFlip = true } = props;
+  const display = (_a2 = props.display) != null ? _a2 : inline ? "inline-block" : "block";
   const triggerRef = React8.useRef(null);
   const overlayRef = React8.useRef(null);
   const state = useTooltipTriggerState(__spreadValues({ isDisabled, delay }, props));
@@ -6887,41 +6889,41 @@ var Tooltip = (_a) => {
     onFocusWithinChange: (isFocusWithin) => isFocusWithin ? state.open() : state.close()
   });
   const handleClick = (e) => {
-    var _a2, _b2;
-    (_a2 = props.onClick) == null ? void 0 : _a2.call(props, e);
+    var _a3, _b2;
+    (_a3 = props.onClick) == null ? void 0 : _a3.call(props, e);
     (_b2 = triggerProps.onClick) == null ? void 0 : _b2.call(triggerProps, e);
   };
   const handleMouseDown = (e) => {
-    var _a2, _b2;
-    (_a2 = props.onMouseDown) == null ? void 0 : _a2.call(props, e);
+    var _a3, _b2;
+    (_a3 = props.onMouseDown) == null ? void 0 : _a3.call(props, e);
     (_b2 = triggerProps.onMouseDown) == null ? void 0 : _b2.call(triggerProps, e);
   };
   const handleMouseUp = (e) => {
-    var _a2, _b2;
-    (_a2 = props.onMouseUp) == null ? void 0 : _a2.call(props, e);
+    var _a3, _b2;
+    (_a3 = props.onMouseUp) == null ? void 0 : _a3.call(props, e);
     (_b2 = triggerProps.onMouseUp) == null ? void 0 : _b2.call(triggerProps, e);
   };
   const handlePointerDown = (e) => {
-    var _a2, _b2;
-    (_a2 = props.onPointerDown) == null ? void 0 : _a2.call(props, e);
+    var _a3, _b2;
+    (_a3 = props.onPointerDown) == null ? void 0 : _a3.call(props, e);
     (_b2 = triggerProps.onPointerDown) == null ? void 0 : _b2.call(triggerProps, e);
   };
   const handlePointerUp = (e) => {
-    var _a2, _b2;
-    (_a2 = props.onPointerUp) == null ? void 0 : _a2.call(props, e);
+    var _a3, _b2;
+    (_a3 = props.onPointerUp) == null ? void 0 : _a3.call(props, e);
     (_b2 = triggerProps.onPointerUp) == null ? void 0 : _b2.call(triggerProps, e);
   };
   return /* @__PURE__ */ React8.createElement("div", __spreadProps(__spreadValues({
-    className: tw(`${inline ? "inline-block" : "block"}`)
+    className: display
   }, triggerProps), {
     onFocus: (e) => {
-      var _a2, _b2;
-      (_a2 = triggerProps.onFocus) == null ? void 0 : _a2.call(triggerProps, e);
+      var _a3, _b2;
+      (_a3 = triggerProps.onFocus) == null ? void 0 : _a3.call(triggerProps, e);
       (_b2 = focusWithinProps.onFocus) == null ? void 0 : _b2.call(focusWithinProps, e);
     },
     onBlur: (e) => {
-      var _a2, _b2;
-      (_a2 = triggerProps.onBlur) == null ? void 0 : _a2.call(triggerProps, e);
+      var _a3, _b2;
+      (_a3 = triggerProps.onBlur) == null ? void 0 : _a3.call(triggerProps, e);
       (_b2 = focusWithinProps.onBlur) == null ? void 0 : _b2.call(focusWithinProps, e);
     },
     onClick: handleClick,
@@ -10268,7 +10270,8 @@ var ComboboxBase = (_a) => {
     onInputValueChange: ({ selectedItem: selectedItem2, inputValue: inputValue2 }) => {
       updateInputItems(inputValue2, selectedItem2);
       onSearchChange == null ? void 0 : onSearchChange(inputValue2);
-    }
+    },
+    scrollIntoView: (node, _menuNode) => node.scrollIntoView({ block: "nearest" })
   });
   const state = {
     isOpen,
@@ -10734,7 +10737,8 @@ var _SelectBase = (props) => {
     isItemDisabled: (item, index) => isOptionDisabled(item, index),
     items,
     itemToString,
-    onSelectedItemChange: (e) => onChange == null ? void 0 : onChange(e.selectedItem)
+    onSelectedItemChange: (e) => onChange == null ? void 0 : onChange(e.selectedItem),
+    scrollIntoView: (node, _menuNode) => node.scrollIntoView({ block: "nearest" })
   });
   const state = {
     isOpen,
@@ -12009,6 +12013,7 @@ var DataListRow = ({
   menu,
   active,
   disabled,
+  rowClassName,
   renderFirstColumn,
   additionalRowProps = () => ({}),
   additionalColumnProps = () => ({}),
@@ -12023,7 +12028,9 @@ var DataListRow = ({
   }, additionalRowProps(row, index, rows)), renderFirstColumn == null ? void 0 : renderFirstColumn(row, index, rows), /* @__PURE__ */ React68.createElement(List, {
     items: columns,
     renderItem: (column, columnIndex) => {
-      const cell2 = /* @__PURE__ */ React68.createElement(DataList.Cell, __spreadValues(__spreadValues({}, cellProps(column)), additionalColumnProps(column, columnIndex, columns, row)), /* @__PURE__ */ React68.createElement(DataListCell, {
+      const cell2 = /* @__PURE__ */ React68.createElement(DataList.Cell, __spreadProps(__spreadValues(__spreadValues({}, cellProps(column)), additionalColumnProps(column, columnIndex, columns, row)), {
+        className: rowClassName == null ? void 0 : rowClassName(row, index, rows)
+      }), /* @__PURE__ */ React68.createElement(DataListCell, {
         column,
         row,
         index,
@@ -12132,6 +12139,7 @@ var DataListGroup = (_a) => {
   const {
     columns,
     disabled,
+    rowClassName,
     expandedGroupIds,
     getGroupRow,
     renderGroupName = renderDefaultGroupName,
@@ -12183,6 +12191,7 @@ var DataListGroup = (_a) => {
             menuAriaLabel
           }),
           disabled,
+          rowClassName,
           additionalRowProps: () => selectable ? {
             "aria-selected": isChecked
           } : {},
@@ -12362,6 +12371,7 @@ var DataList2 = (_a) => {
     rowDetails,
     group,
     disabled,
+    rowClassName,
     getGroupRow,
     renderGroupName,
     renderEmptyGroup,
@@ -12391,6 +12401,7 @@ var DataList2 = (_a) => {
     "rowDetails",
     "group",
     "disabled",
+    "rowClassName",
     "getGroupRow",
     "renderGroupName",
     "renderEmptyGroup",
@@ -12456,15 +12467,7 @@ var DataList2 = (_a) => {
     )
   );
   const allRowsSelected = totalSelected >= allEnabledRowIds.length;
-  return /* @__PURE__ */ React72.createElement(DataListContext.Provider, {
-    value: {
-      rows: isArray3(rows) ? sortedRows : rows,
-      selectedRows: selected
-    }
-  }, /* @__PURE__ */ React72.createElement("div", {
-    className: "relative w-full overflow-x-auto",
-    ref: containerRef
-  }, /* @__PURE__ */ React72.createElement(Template, {
+  const componentContent = /* @__PURE__ */ React72.createElement(Template, {
     className: "Aquarium-DataList",
     columns: templateColumns,
     role: "table"
@@ -12521,6 +12524,7 @@ var DataList2 = (_a) => {
   }, menuHeaderName)), toolbar), groups && /* @__PURE__ */ React72.createElement(DataListGroup, {
     columns,
     disabled,
+    rowClassName,
     getGroupRow,
     renderGroupName,
     renderEmptyGroup,
@@ -12566,6 +12570,7 @@ var DataList2 = (_a) => {
           menuAriaLabel
         }),
         disabled,
+        rowClassName,
         additionalRowProps: (row2) => {
           var _a4;
           return selectable ? {
@@ -12599,7 +12604,17 @@ var DataList2 = (_a) => {
         role: "cell"
       }, details)));
     }
-  })))));
+  })));
+  const wrappedContent = hasStickyColumns ? /* @__PURE__ */ React72.createElement("div", {
+    className: "relative w-full h-full overflow-auto",
+    ref: containerRef
+  }, componentContent) : componentContent;
+  return /* @__PURE__ */ React72.createElement(DataListContext.Provider, {
+    value: {
+      rows: isArray3(rows) ? sortedRows : rows,
+      selectedRows: selected
+    }
+  }, wrappedContent);
 };
 DataList2.Skeleton = DataListSkeleton;
 DataList2.Toolbar = DataListToolbar;
@@ -12669,6 +12684,7 @@ var DataTable = (_a) => {
     onAction,
     onMenuOpenChange,
     disabled,
+    rowClassName,
     defaultSort,
     onSortChanged,
     ariaLabel,
@@ -12687,6 +12703,7 @@ var DataTable = (_a) => {
     "onAction",
     "onMenuOpenChange",
     "disabled",
+    "rowClassName",
     "defaultSort",
     "onSortChanged",
     "ariaLabel",
@@ -12708,10 +12725,7 @@ var DataTable = (_a) => {
     }, children))),
     [amountOfColumns]
   );
-  return /* @__PURE__ */ React75.createElement("div", {
-    className: "relative w-full overflow-x-auto",
-    ref: containerRef
-  }, /* @__PURE__ */ React75.createElement(Table2, {
+  const compponentContent = /* @__PURE__ */ React75.createElement(Table2, {
     ariaLabel,
     onNext,
     onPrev,
@@ -12776,14 +12790,20 @@ var DataTable = (_a) => {
         items: columns,
         renderItem: (column) => {
           return createAnimatedCell({
-            cellElement: /* @__PURE__ */ React75.createElement(Table2.Cell, __spreadValues({}, cellProps(column)), renderCell(column, row, index, sortedRows)),
+            cellElement: /* @__PURE__ */ React75.createElement(Table2.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+              className: rowClassName == null ? void 0 : rowClassName(row, index, rows)
+            }), renderCell(column, row, index, sortedRows)),
             stickyStyles,
             stickyColumn: cellProps(column).stickyColumn
           });
         }
       }), renderRowMenu(row, index, { menu, menuAriaLabel, onAction, onMenuOpenChange }));
     }
-  }))));
+  })));
+  return hasStickyColumns ? /* @__PURE__ */ React75.createElement("div", {
+    className: "relative w-full overflow-x-auto",
+    ref: containerRef
+  }, compponentContent) : compponentContent;
 };
 var renderRowMenu = (row, index, {
   menu,
@@ -14921,7 +14941,8 @@ var MultiSelectBase = (_a) => {
           break;
         }
       }
-    }
+    },
+    scrollIntoView: (node, _menuNode) => node.scrollIntoView({ block: "nearest" })
   });
   const state = {
     isOpen,
@@ -15788,12 +15809,18 @@ var TagLabel = (_a) => {
 import React119 from "react";
 var import_caretUp2 = __toESM(require_caretUp());
 var Section3 = (_a) => {
-  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
-  return /* @__PURE__ */ React119.createElement(Box, __spreadValues({
-    component: "section",
-    borderColor: "grey-5",
-    borderWidth: "1px"
-  }, rest), children);
+  var _b = _a, {
+    children,
+    className
+  } = _b, rest = __objRest(_b, [
+    "children",
+    "className"
+  ]);
+  return /* @__PURE__ */ React119.createElement(Box, __spreadProps(__spreadValues({
+    component: "section"
+  }, rest), {
+    className: classNames(tw("border border-muted"), className)
+  }), children);
 };
 Section3.Header = (_a) => {
   var _b = _a, { children, className, expanded } = _b, rest = __objRest(_b, ["children", "className", "expanded"]);
@@ -15889,12 +15916,11 @@ var Section4 = (props) => {
     height: height !== null ? targetHeight : void 0,
     opacity: isCollapsed ? 0 : 1,
     transform: `rotate(${isCollapsed ? 90 : 180}deg)`,
-    backgroundColor: isCollapsed ? tokens_default.backgroundColor.muted : tokens_default.backgroundColor.default,
     config: {
       duration: 150
     },
     immediate: !_collapsible
-  }), { transform, backgroundColor } = _f, spring = __objRest(_f, ["transform", "backgroundColor"]);
+  }), { transform } = _f, spring = __objRest(_f, ["transform"]);
   const toggleId = useId19();
   const regionId = useId19();
   const titleId = useId19();
@@ -15905,7 +15931,7 @@ var Section4 = (props) => {
   );
   return /* @__PURE__ */ React120.createElement(Section3, {
     "aria-label": title,
-    className: "Aquarium-Section"
+    className: _collapsible ? "Aquarium-Collapsible-Section" : "Aquarium-Section"
   }, title && /* @__PURE__ */ React120.createElement(React120.Fragment, null, /* @__PURE__ */ React120.createElement(Section3.Header, {
     expanded: _collapsible && !isCollapsed
   }, /* @__PURE__ */ React120.createElement(Section3.TitleContainer, __spreadProps(__spreadValues({}, _collapsible ? __spreadProps(__spreadValues({}, buttonProps), {
@@ -15942,7 +15968,7 @@ var Section4 = (props) => {
     "aria-labelledby": titleId
   }, props.select)))), !hasTabs && !isCollapsed && /* @__PURE__ */ React120.createElement(animated6.div, {
     className: tw(`h-[1px]`),
-    style: { backgroundColor }
+    style: { backgroundColor: "var(--aquarium-border-color-muted)" }
   })), /* @__PURE__ */ React120.createElement(animated6.div, {
     id: regionId,
     "aria-hidden": _collapsible ? isCollapsed ? true : void 0 : void 0,