@aivenio/aquarium 2.1.2 → 2.3.0

package/dist/system.cjs

@@ -4265,6 +4265,7 @@ __export(system_exports, {
   InlineIcon: () => InlineIcon,
   Input: () => Input2,
   InputBase: () => InputBase,
+  ItemList: () => ItemList,
   Label: () => Label2,
   LabelControl: () => LabelControl,
   LineClamp: () => LineClamp2,
@@ -4273,7 +4274,6 @@ __export(system_exports, {
   ListItem: () => ListItem,
   Modal: () => Modal2,
   ModalTab: () => ModalTab,
-  ModalTabContainer: () => ModalTabContainer,
   ModalTabs: () => ModalTabs,
   MultiInput: () => MultiInput,
   MultiInputBase: () => MultiInputBase,
@@ -4343,6 +4343,7 @@ __export(system_exports, {
   calcTopPosition: () => calcTopPosition,
   calcTopRightPosition: () => calcTopRightPosition,
   cellProps: () => cellProps,
+  columnHasSort: () => columnHasSort,
   columnIsFieldColumn: () => columnIsFieldColumn,
   createComponent: () => createComponent,
   createMountPointElement: () => createMountPointElement,
@@ -4353,10 +4354,12 @@ __export(system_exports, {
   isOnSortChangedDirection: () => isOnSortChangedDirection,
   isOutOfBounds: () => isOutOfBounds,
   placementOrder: () => placementOrder,
+  sortByColumn: () => sortByColumn,
   toSortDirection: () => toSortDirection,
   usePagination: () => usePagination,
   usePopoverContext: () => usePopoverContext,
   useScrollTarget: () => useScrollTarget,
+  useSortState: () => useSortState,
   useStaticInfiniteList: () => useStaticInfiniteList,
   useTableSelect: () => useTableSelect,
   useTableSort: () => useTableSort,
@@ -4423,13 +4426,13 @@ __export(molecules_exports, {
   InlineIcon: () => InlineIcon,
   Input: () => Input2,
   InputBase: () => InputBase,
+  ItemList: () => ItemList,
   LineClamp: () => LineClamp2,
   Link: () => Link2,
   List: () => List,
   ListItem: () => ListItem,
   Modal: () => Modal2,
   ModalTab: () => ModalTab,
-  ModalTabContainer: () => ModalTabContainer,
   ModalTabs: () => ModalTabs,
   MultiInput: () => MultiInput,
   MultiInputBase: () => MultiInputBase,
@@ -4488,13 +4491,16 @@ __export(molecules_exports, {
   asPopoverButton: () => asPopoverButton,
   asTabItem: () => asTabItem,
   cellProps: () => cellProps,
+  columnHasSort: () => columnHasSort,
   columnIsFieldColumn: () => columnIsFieldColumn,
   createTabsComponent: () => createTabsComponent,
   isOnSortChangedDirection: () => isOnSortChangedDirection,
+  sortByColumn: () => sortByColumn,
   toSortDirection: () => toSortDirection,
   usePagination: () => usePagination,
   usePopoverContext: () => usePopoverContext,
   useScrollTarget: () => useScrollTarget,
+  useSortState: () => useSortState,
   useStaticInfiniteList: () => useStaticInfiniteList,
   useTableSelect: () => useTableSelect,
   useTableSort: () => useTableSort,
@@ -4510,7 +4516,6 @@ var import_react = __toESM(require("react"));
 var import_react2 = require("@iconify/react");
 
 // src/utils/tailwind.ts
-var import_react_aria_components = require("react-aria-components");
 var import_classnames = __toESM(require("classnames"));
 function cleanClassNames(classNames13) {
   const tokens = classNames13.split(/\s+/);
@@ -4679,7 +4684,7 @@ var ActionItem = import_react3.default.forwardRef(
     return /* @__PURE__ */ import_react3.default.createElement("li", __spreadValues({
       ref,
       role: "button",
-      onClick: () => !props.disabled && (onClick == null ? void 0 : onClick()),
+      onClick: () => !props.disabled && onClick(),
       className: classNames(className, "flex items-center gap-x-3 typography-small", {
         "p-3": !dense,
         "px-3 py-2": dense,
@@ -4999,7 +5004,7 @@ function useMeasure() {
       return;
     }
     const observer = new window.ResizeObserver(([entry]) => {
-      if (entry == null ? void 0 : entry.contentRect) {
+      if (entry.contentRect) {
         setRect({
           width: entry.contentRect.width,
           height: entry.contentRect.height
@@ -5023,7 +5028,7 @@ var import_isUndefined5 = __toESM(require("lodash/isUndefined"));
 var import_react5 = __toESM(require("react"));
 var Element = (_a) => {
   var _b = _a, { component } = _b, rest = __objRest(_b, ["component"]);
-  const Component = component || "div";
+  const Component = component != null ? component : "div";
   return import_react5.default.createElement(Component, rest);
 };
 
@@ -7556,7 +7561,7 @@ var toToast = (_a) => {
     id: id || crypto.randomUUID(),
     variant: variant || "default",
     position: position || "top",
-    duration: duration || (variant === "danger" ? Infinity : 5e3)
+    duration: duration != null ? duration : variant === "danger" ? Infinity : 5e3
   });
 };
 var reducer = (state, action) => {
@@ -7621,7 +7626,6 @@ var ToastConsumer = () => {
     dispatch({ type: 1 /* Dismiss */, toastId });
   };
   return /* @__PURE__ */ import_react17.default.createElement("div", null, positions.map((position) => {
-    var _a;
     return /* @__PURE__ */ import_react17.default.createElement(Spacing, {
       gap: "3",
       key: position,
@@ -7636,7 +7640,7 @@ var ToastConsumer = () => {
         transform: isCentered(position) ? "translateX(-50%)" : void 0,
         zIndex: 9e3
       }
-    }, /* @__PURE__ */ import_react17.default.createElement(Transition, null, (_a = toastsByPosition[position]) == null ? void 0 : _a.map((toast) => /* @__PURE__ */ import_react17.default.createElement(ToastComponent, {
+    }, /* @__PURE__ */ import_react17.default.createElement(Transition, null, toastsByPosition[position].map((toast) => /* @__PURE__ */ import_react17.default.createElement(ToastComponent, {
       key: toast.id,
       toast,
       onDismiss
@@ -8177,12 +8181,15 @@ var AccordionUnanimatedPanel = ({ children, panelId }) => {
 var AccordionSummary = (_a) => {
   var _b = _a, { title, description, toggle, panelId } = _b, rest = __objRest(_b, ["title", "description", "toggle", "panelId"]);
   const id = usePanelContext(panelId);
-  return /* @__PURE__ */ import_react24.default.createElement(Box.Flex, __spreadValues({
-    justifyContent: "space-between",
+  return /* @__PURE__ */ import_react24.default.createElement(Box.Flex, __spreadProps(__spreadValues({
     padding: "4",
     id: `${id}-summary`
-  }, rest), /* @__PURE__ */ import_react24.default.createElement(Typography2, null, title), /* @__PURE__ */ import_react24.default.createElement(Typography2.Small, {
-    color: "muted"
+  }, rest), {
+    alignItems: "center",
+    colGap: "4"
+  }), /* @__PURE__ */ import_react24.default.createElement(Typography2, null, title), /* @__PURE__ */ import_react24.default.createElement(Typography2.Small, {
+    color: "muted",
+    className: "grow"
   }, description), toggle);
 };
 var AccordionContainer = (_a) => {
@@ -8416,7 +8423,7 @@ Banner.IllustrationRight = IllustrationRight;
 Banner.IllustrationRight.displayName = "Alert.Banner.IllustrationRight";
 
 // src/utils/link.ts
-var isLink = (action) => action.href !== void 0;
+var isLink = (action) => "href" in action;
 
 // src/molecules/Alert/Alert.tsx
 var renderActions = (action, dense = false) => action && /* @__PURE__ */ import_react27.default.createElement(Alert.Actions, null, !isLink(action) && /* @__PURE__ */ import_react27.default.createElement(Button.Ghost, __spreadValues({
@@ -8901,8 +8908,8 @@ var Chip2 = (_a) => {
     role: "button",
     "aria-hidden": false,
     icon: import_cross4.default,
-    className: tw({ "cursor-pointer": onClose !== void 0 }),
-    onClick: () => onClose == null ? void 0 : onClose()
+    className: tw({ "cursor-pointer": true }),
+    onClick: () => onClose()
   }), locked && /* @__PURE__ */ import_react36.default.createElement(InlineIcon, {
     icon: import_lock2.default
   }));
@@ -9264,7 +9271,7 @@ var CardGroup = ({
   const [checked, setChecked] = import_react44.default.useState(_checked != null ? _checked : defaultChecked);
   const handleChange = (e) => {
     setChecked(e.value);
-    onCheckedChange == null ? void 0 : onCheckedChange(e);
+    onCheckedChange(e);
   };
   return /* @__PURE__ */ import_react44.default.createElement(CardGroupContext.Provider, {
     value: { name, checked: checked != null ? checked : defaultChecked, onCheckedChange: handleChange }
@@ -9293,13 +9300,13 @@ var CompactCard = ({
   fullWidth,
   children
 }) => {
-  var _a;
+  var _a, _b;
   const ref = (0, import_react45.useRef)(null);
   const groupContext = (0, import_react45.useContext)(CardGroupContext);
   const { isFocusVisible } = (0, import_react_aria.useFocusVisible)();
   const checkable = _checkable != null ? _checkable : Boolean(groupContext);
   const isRadioButton2 = checkable && value && groupContext !== void 0;
-  const checkedInGroup = groupContext ? value !== void 0 && (groupContext == null ? void 0 : groupContext.checked) === value : void 0;
+  const checkedInGroup = groupContext ? value !== void 0 && groupContext.checked === value : void 0;
   const controlled = checkedInGroup != null ? checkedInGroup : _checked;
   const onCheckedChange = _onCheckedChange != null ? _onCheckedChange : groupContext == null ? void 0 : groupContext.onCheckedChange;
   const [checked, setChecked] = import_react45.default.useState(checkable ? (_a = controlled != null ? controlled : defaultChecked) != null ? _a : false : false);
@@ -9350,7 +9357,7 @@ var CompactCard = ({
   }, children))));
   const commonProps = {
     fullWidth,
-    enableMinWidth: Boolean(primaryAction || secondaryAction || chips.length),
+    enableMinWidth: Boolean((_b = primaryAction != null ? primaryAction : secondaryAction) != null ? _b : chips.length),
     disabled
   };
   if (checkable) {
@@ -9366,7 +9373,7 @@ var CompactCard = ({
     className: "Aquarium-Card.Compact"
   }, onClick ? buttonProps : {}), {
     role: onClick ? "button" : void 0
-  }), commonProps), commonContent, (primaryAction || secondaryAction) && /* @__PURE__ */ import_react45.default.createElement(Card.Actions, {
+  }), commonProps), commonContent, (primaryAction != null ? primaryAction : secondaryAction) && /* @__PURE__ */ import_react45.default.createElement(Card.Actions, {
     dense: true
   }, primaryAction && renderAction({ kind: "secondary", dense: true, action: primaryAction }), secondaryAction && renderAction({ kind: "ghost", dense: true, action: secondaryAction })));
 };
@@ -9436,7 +9443,7 @@ var Card2 = ({
   const { isFocusVisible } = (0, import_react_aria2.useFocusVisible)();
   const checkable = _checkable != null ? _checkable : Boolean(groupContext);
   const isRadioButton2 = Boolean(checkable) && Boolean(value) && groupContext !== void 0;
-  const checkedInGroup = groupContext ? value !== void 0 && (groupContext == null ? void 0 : groupContext.checked) === value : void 0;
+  const checkedInGroup = groupContext ? value !== void 0 && groupContext.checked === value : void 0;
   const controlled = checkedInGroup != null ? checkedInGroup : _checked;
   const onCheckedChange = _onCheckedChange != null ? _onCheckedChange : groupContext == null ? void 0 : groupContext.onCheckedChange;
   const [checked, setChecked] = import_react46.default.useState(checkable ? (_a = controlled != null ? controlled : defaultChecked) != null ? _a : false : false);
@@ -9501,7 +9508,7 @@ var Card2 = ({
     return /* @__PURE__ */ import_react46.default.createElement(Card.Label, __spreadProps(__spreadValues({
       className: "Aquarium-Card.Label"
     }, commonProps), {
-      checked: checkable ? checked : void 0,
+      checked,
       modality: isFocusVisible ? "keyboard" : "pointer"
     }), commonContent);
   }
@@ -9511,7 +9518,7 @@ var Card2 = ({
   }, onClick ? buttonProps : {}), {
     role: onClick ? "button" : void 0,
     modality: isFocusVisible ? "keyboard" : "pointer"
-  }), commonProps), commonContent, (primaryAction || secondaryAction) && /* @__PURE__ */ import_react46.default.createElement(Card.Actions, null, primaryAction && renderAction({ kind: "secondary", dense: true, action: primaryAction }), secondaryAction && renderAction({ kind: "ghost", dense: true, action: secondaryAction })));
+  }), commonProps), commonContent, (primaryAction != null ? primaryAction : secondaryAction) && /* @__PURE__ */ import_react46.default.createElement(Card.Actions, null, primaryAction && renderAction({ kind: "secondary", dense: true, action: primaryAction }), secondaryAction && renderAction({ kind: "ghost", dense: true, action: secondaryAction })));
 };
 Card2.Title = Card.Title;
 Card2.Title.displayName = "Card.Title";
@@ -10436,7 +10443,7 @@ var ComboboxBase = (_a) => {
       switch (type) {
         case import_downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
         case import_downshift.useCombobox.stateChangeTypes.InputBlur: {
-          const selectedItem2 = createOption ? createOption == null ? void 0 : createOption(changes.inputValue) : changes.selectedItem;
+          const selectedItem2 = createOption ? createOption(changes.inputValue) : changes.selectedItem;
           const inputValue2 = selectedItem2 ? itemToString(selectedItem2) : "";
           return __spreadProps(__spreadValues({}, changes), {
             inputValue: inputValue2,
@@ -10679,7 +10686,7 @@ var createInput = (displayName, opts = {}) => {
         "readOnly",
         "type"
       ]);
-      var _a2;
+      var _a2, _b2;
       const inputType = opts.isSearch ? "search" : opts.isFile ? "file" : type;
       const inputRef = import_react63.default.useRef(null);
       (0, import_react63.useImperativeHandle)(ref, () => inputRef.current);
@@ -10720,7 +10727,7 @@ var createInput = (displayName, opts = {}) => {
           getCommonInputStyles({ readOnly, valid }),
           props.className
         )
-      })), opts.canReset && (props.value || ((_a2 = inputRef.current) == null ? void 0 : _a2.value)) && /* @__PURE__ */ import_react63.default.createElement(InputAdornment, null, /* @__PURE__ */ import_react63.default.createElement("button", {
+      })), opts.canReset && ((_b2 = props.value) != null ? _b2 : (_a2 = inputRef.current) == null ? void 0 : _a2.value) && /* @__PURE__ */ import_react63.default.createElement(InputAdornment, null, /* @__PURE__ */ import_react63.default.createElement("button", {
         "aria-label": "reset search",
         onClick: handleReset
       }, /* @__PURE__ */ import_react63.default.createElement(ResetIcon, null))), !opts.canReset && endAdornment && /* @__PURE__ */ import_react63.default.createElement(InputAdornment, null, endAdornment));
@@ -10744,10 +10751,11 @@ var SearchInput = createInput("SearchInput", {
   isSearch: true
 });
 var createInputComponent = (displayName, options = {}) => {
-  const InputComponentBase = options.input || InputBase;
+  var _a;
+  const InputComponentBase = (_a = options.input) != null ? _a : InputBase;
   const InputComponent = import_react63.default.forwardRef((inputProps, ref) => {
     var _b, _c;
-    const _a = inputProps, { readOnly = false, value: valueProp, onChange: onChangeProp } = _a, props = __objRest(_a, ["readOnly", "value", "onChange"]);
+    const _a2 = inputProps, { readOnly = false, value: valueProp, onChange: onChangeProp } = _a2, props = __objRest(_a2, ["readOnly", "value", "onChange"]);
     const isControlled = typeof valueProp !== "undefined";
     const [valueState, setValueState] = (0, import_react63.useState)((_b = props.defaultValue) != null ? _b : "");
     const value = isControlled ? valueProp : valueState;
@@ -11143,19 +11151,22 @@ var initialState = {
 };
 var getPageIndex = (currentPage, pageSize) => currentPage === 0 ? 0 : (currentPage - 1) * pageSize;
 var usePagination = (items, options) => {
-  const [currentPage, setCurrentPage] = (0, import_react66.useState)((options == null ? void 0 : options.initialPage) || initialState.currentPage);
-  const [pageSize, setPageSize] = (0, import_react66.useState)((options == null ? void 0 : options.initialPageSize) || initialState.pageSize);
+  var _a, _b;
+  const [currentPage, setCurrentPage] = (0, import_react66.useState)((_a = options == null ? void 0 : options.initialPage) != null ? _a : initialState.currentPage);
+  const [pageSize, setPageSize] = (0, import_react66.useState)((_b = options == null ? void 0 : options.initialPageSize) != null ? _b : initialState.pageSize);
   const totalPages = items.length > 0 ? Math.ceil(items.length / pageSize) : 1;
   const hasPreviousPage = currentPage > 1;
   const hasNextPage = currentPage < totalPages;
   const pageIndex = getPageIndex(currentPage, pageSize);
   const onPageSizeChange = (pageSize2) => {
+    var _a2;
     const newTotalPages = items.length > 0 ? Math.ceil(items.length / pageSize2) : 1;
     setPageSize(pageSize2);
-    setCurrentPage((0, import_clamp2.default)((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, newTotalPages));
+    setCurrentPage((0, import_clamp2.default)((_a2 = options == null ? void 0 : options.initialPage) != null ? _a2 : initialState.currentPage, 1, newTotalPages));
   };
   (0, import_react66.useEffect)(() => {
-    setCurrentPage((0, import_clamp2.default)((options == null ? void 0 : options.initialPage) || initialState.currentPage, 1, totalPages));
+    var _a2;
+    setCurrentPage((0, import_clamp2.default)((_a2 = options == null ? void 0 : options.initialPage) != null ? _a2 : initialState.currentPage, 1, totalPages));
   }, [items.length]);
   return [
     items.slice(pageIndex, Math.min(pageIndex + pageSize, items.length)),
@@ -11207,9 +11218,7 @@ var useInView = ({
     );
     observer.observe(target);
     return () => {
-      if (target) {
-        observer.unobserve(target);
-      }
+      observer.unobserve(target);
     };
   }, [ref, skip, root, rootMargin, threshold, onChange]);
   return [ref, state.inView, state.entry];
@@ -11426,6 +11435,19 @@ var DataList = (_a) => {
   var _b = _a, { className } = _b, rest = __objRest(_b, ["className"]);
   return /* @__PURE__ */ import_react70.default.createElement("div", __spreadValues({}, rest));
 };
+var TreeLine = (_a) => {
+  var _b = _a, { className, style, isLast } = _b, rest = __objRest(_b, ["className", "style", "isLast"]);
+  return /* @__PURE__ */ import_react70.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
+    className: classNames(tw("flex justify-start h-full mx-4"), className)
+  }), /* @__PURE__ */ import_react70.default.createElement("div", {
+    className: tw("border-l border-default border-dashed flex-1", {
+      "h-full": !isLast,
+      "h-1/2": Boolean(isLast)
+    })
+  }), /* @__PURE__ */ import_react70.default.createElement("div", {
+    className: tw("border-t border-default border-dashed self-center w-[18px]")
+  }));
+};
 var HeadCell = (_a) => {
   var _b = _a, {
     className,
@@ -11475,22 +11497,22 @@ var Row = (_a) => {
     className,
     disabled,
     header,
-    subgroup,
+    isGroup,
     active,
-    isLast
+    noDivider
   } = _b, rest = __objRest(_b, [
     "className",
     "disabled",
     "header",
-    "subgroup",
+    "isGroup",
     "active",
-    "isLast"
+    "noDivider"
   ]);
   return /* @__PURE__ */ import_react70.default.createElement("div", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-    role: subgroup ? "rowgroup" : "row"
+    role: isGroup ? "rowgroup" : "row"
   }), { inert: disabled ? "" : void 0 }), {
     className: classNames(tw("contents"), className, {
-      "[&>*]:border-b-transparent": isLast,
+      "[&>*]:border-b-transparent": noDivider,
       "children:opacity-70": disabled,
       "[&>*]:bg-primary-active": active,
       "[&>*]:hover:bg-muted": !disabled && !header
@@ -11546,6 +11568,8 @@ DataList.SubGroupSpacing = SubGroupSpacing;
 DataList.SubGroupSpacing.displayName = "DataList.SubGroupSpacing";
 DataList.Row = Row;
 DataList.Row.displayName = "DataList.Row";
+DataList.TreeLine = TreeLine;
+DataList.TreeLine.displayName = "DataList.TreeLine";
 var ToolbarContainer = (_a) => {
   var _b = _a, { className, sticky = true } = _b, rest = __objRest(_b, ["className", "sticky"]);
   return /* @__PURE__ */ import_react70.default.createElement("div", __spreadProps(__spreadValues({}, rest), {
@@ -11652,7 +11676,7 @@ function useScrollProgress({ containerRef, skip }) {
     },
     pause: skip
   });
-  const isContainerUnscrollable = scrollState && scrollState.scrollX === 0 && (scrollState == null ? void 0 : scrollState.scrollXProgress) === 1;
+  const isContainerUnscrollable = scrollState && scrollState.scrollX === 0 && scrollState.scrollXProgress === 1;
   if (!scrollState || isContainerUnscrollable) {
     return null;
   }
@@ -11692,6 +11716,7 @@ var cellProps = (column) => {
   var _a;
   let align;
   switch (column.type) {
+    case "menu":
     case "action":
     case "number": {
       align = "right";
@@ -11711,6 +11736,7 @@ var cellProps = (column) => {
     stickyColumn: column.sticky
   };
 };
+var columnHasSort = (column) => columnIsFieldColumn(column) && column.sortable || Boolean(column.sort);
 var columnIsFieldColumn = (column) => Boolean(column && column.field);
 function isOnSortChangedDirection(value) {
   return value === void 0 || ["ascending", "descending"].includes(value);
@@ -11718,18 +11744,14 @@ function isOnSortChangedDirection(value) {
 
 // src/utils/table/useTableSort.tsx
 var import_react72 = __toESM(require("react"));
-var useTableSort = ({
-  column,
-  direction,
-  onSortChanged
-} = {}) => {
+var useTableSort = ({ column, direction, onSortChanged } = {}) => {
   const defaultSort = column ? { column, direction } : void 0;
   const [sort, setSort] = import_react72.default.useState(defaultSort);
   const setSortAndEmitOnSortChangedEvent = (sort2) => {
     setSort(sort2);
     if (onSortChanged) {
       if (sort2 && isOnSortChangedDirection(sort2.direction)) {
-        onSortChanged({ key: sort2.column.key, direction: sort2 == null ? void 0 : sort2.direction });
+        onSortChanged({ key: sort2.column.key, direction: sort2.direction });
       } else {
         onSortChanged(null);
       }
@@ -11752,7 +11774,7 @@ var useTableSort = ({
 // src/utils/table/utils.ts
 var import_orderBy2 = __toESM(require("lodash/orderBy"));
 var sortRowsBy = (rows, sort) => {
-  if (!sort) {
+  if (!sort || !columnHasSort(sort.column)) {
     return rows;
   }
   const sortFunction = sort.column.sort;
@@ -12217,7 +12239,7 @@ var DataListRow = ({
     key: row.id,
     disabled: isRowDisabled,
     active,
-    isLast
+    noDivider: isLast
   }, resolvedAdditionalRowProps), {
     style,
     onClick: isRowClickable ? onClick : void 0
@@ -12284,6 +12306,21 @@ var DataListCell = ({
       }
       break;
     }
+    case "menu": {
+      const menuContent = column.menu(row, index);
+      if (!menuContent) {
+        cellContent = null;
+      } else {
+        cellContent = /* @__PURE__ */ import_react75.default.createElement(DropdownMenu2, {
+          placement: defaultContextualMenuPlacement,
+          onAction: (action) => column.onAction(action, row, index)
+        }, /* @__PURE__ */ import_react75.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react75.default.createElement(Button.Icon, {
+          "aria-label": "action",
+          icon: import_more2.default
+        })), menuContent);
+      }
+      break;
+    }
     default:
       if (column.formatter) {
         cellContent = column.formatter(row[column.field], row, index, rows);
@@ -12364,14 +12401,18 @@ var DataListGroup = (_a) => {
   const hasCustomRowForGroup = (0, import_isFunction2.default)(getGroupRow);
   if (!areRowsGrouped(groups)) {
     if (groups.length === 0 && groupKey && groupKey !== "undefined") {
+      const emptyGroupContent = renderEmptyGroup(groupKey);
+      if (!emptyGroupContent) {
+        return null;
+      }
       return /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
-        isLast: isLastGroup
+        noDivider: isLastGroup
       }, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null), /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, {
         style: { paddingLeft: `${2 + GAP + level * INDENTATION}px`, gridColumn: `${selectable ? 2 : 1} / -1` }
       }, /* @__PURE__ */ import_react77.default.createElement(Typography, {
         variant: "small",
         color: "muted"
-      }, renderEmptyGroup(groupKey))));
+      }, emptyGroupContent)));
     }
     return /* @__PURE__ */ import_react77.default.createElement(List, {
       items: groups,
@@ -12457,7 +12498,7 @@ var DataListGroup = (_a) => {
         openPanelId
       }, hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
         active: isActiveRow,
-        isLast: isLastRow
+        noDivider: isLastRow
       }, selectable && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, selectable === "multiple" && /* @__PURE__ */ import_react77.default.createElement(Checkbox, {
         "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
         checked: isChecked,
@@ -12487,7 +12528,7 @@ var DataListGroup = (_a) => {
         menuAriaLabel
       })), !hasCustomRowForGroup && /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
         active: isActiveRow,
-        isLast: isLastRow
+        noDivider: isLastRow
       }, selectable === "multiple" && /* @__PURE__ */ import_react77.default.createElement(DataList.Cell, null, /* @__PURE__ */ import_react77.default.createElement(Checkbox, {
         "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
         checked: isChecked,
@@ -12503,7 +12544,7 @@ var DataListGroup = (_a) => {
       }), renderGroupName(key, group))), /* @__PURE__ */ import_react77.default.createElement(Accordion.UnanimatedPanel, {
         panelId: key
       }, /* @__PURE__ */ import_react77.default.createElement(DataList.Row, {
-        subgroup: true
+        isGroup: true
       }, /* @__PURE__ */ import_react77.default.createElement(DataListGroup, __spreadProps(__spreadValues({
         key,
         groupKey: key,
@@ -12532,7 +12573,7 @@ var DataListSkeleton = ({ columns = ["1", "2", "2", 52], rows = 5 }) => {
     items: [...Array(rows).keys()],
     renderItem: (item, index) => /* @__PURE__ */ import_react78.default.createElement(DataList.Row, {
       key: item,
-      isLast: index === rows - 1
+      noDivider: index === rows - 1
     }, /* @__PURE__ */ import_react78.default.createElement(List, {
       items: columnsAmount,
       renderItem: (key) => /* @__PURE__ */ import_react78.default.createElement(DataList.Cell, {
@@ -12569,7 +12610,7 @@ var DataListToolbar = ({
     })
   ))), menu && /* @__PURE__ */ import_react79.default.createElement(DataList.Toolbar.Group, null, /* @__PURE__ */ import_react79.default.createElement(DropdownMenu2, {
     placement: defaultContextualMenuPlacement,
-    onAction: (key) => onAction == null ? void 0 : onAction(key, selectedRows != null ? selectedRows : []),
+    onAction: (key) => onAction(key, selectedRows != null ? selectedRows : []),
     onOpenChange: onMenuOpenChange
   }, /* @__PURE__ */ import_react79.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react79.default.createElement(Button.GhostDropdown, {
     dense: true
@@ -12696,7 +12737,7 @@ var DataList2 = (_a) => {
   const totalSelected = (_b2 = selected == null ? void 0 : selected.length) != null ? _b2 : 0;
   const allEnabledRowIds = (0, import_compact.default)(
     allRows.map(
-      (row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) || (selectionDisabled == null ? void 0 : selectionDisabled(row, index, sortedRows)) ? void 0 : row.id
+      (row, index) => (disabled == null ? void 0 : disabled(row, index, sortedRows)) || selectionDisabled(row, index, sortedRows) ? void 0 : row.id
     )
   );
   const allRowsSelected = totalSelected >= allEnabledRowIds.length;
@@ -12738,7 +12779,7 @@ var DataList2 = (_a) => {
       color: "default",
       "aria-hidden": true
     }), content) : content;
-    const cell2 = columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react80.default.createElement(DataList.SortCell, __spreadValues({
+    const cell2 = columnHasSort(column) ? /* @__PURE__ */ import_react80.default.createElement(DataList.SortCell, __spreadValues({
       direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
       onClick: () => updateSort(column),
       sticky
@@ -12785,7 +12826,7 @@ var DataList2 = (_a) => {
       var _a3;
       const details = rowDetails == null ? void 0 : rowDetails(row, index, sortedRows);
       const isSelected = (_a3 = selected == null ? void 0 : selected.includes(row.id)) != null ? _a3 : false;
-      const isSelectionDisabled = selectionDisabled == null ? void 0 : selectionDisabled(row, index, sortedRows);
+      const isSelectionDisabled = selectionDisabled(row, index, sortedRows);
       const isDisabled = disabled == null ? void 0 : disabled(row, index, sortedRows);
       const openPanelId = expandedGroupIds.find((id) => id === row.id.toString()) || null;
       const isLastRow = index === sortedRows.length - 1;
@@ -13002,7 +13043,7 @@ var DataTable = (_a) => {
         color: "default",
         "aria-hidden": true
       }), content) : content;
-      const cell2 = columnIsFieldColumn(column) && column.sortable || column.sort ? /* @__PURE__ */ import_react83.default.createElement(Table2.SortCell, __spreadValues({
+      const cell2 = columnHasSort(column) ? /* @__PURE__ */ import_react83.default.createElement(Table2.SortCell, __spreadValues({
         direction: sort && sort.column.headerName === column.headerName ? sort.direction : "none",
         onClick: () => updateSort(column),
         style: { width: column.width },
@@ -13108,14 +13149,14 @@ DataTable.Skeleton = DataListSkeleton;
 
 // src/molecules/DatePicker/DatePicker.tsx
 var import_react91 = __toESM(require("react"));
-var import_react_aria_components10 = require("react-aria-components");
+var import_react_aria_components8 = require("react-aria-components");
 var import_label2 = require("@react-aria/label");
 var import_utils24 = require("@react-aria/utils");
 var import_omit9 = __toESM(require("lodash/omit"));
 
 // src/molecules/DateField/DateInput.tsx
 var import_react84 = __toESM(require("react"));
-var import_react_aria_components2 = require("react-aria-components");
+var import_react_aria_components = require("react-aria-components");
 var import_tailwind_variants2 = require("tailwind-variants");
 
 // src/atoms/utils/index.ts
@@ -13167,9 +13208,9 @@ var segmentStyles = (0, import_tailwind_variants2.tv)({
   }
 });
 function DateInput(props) {
-  return /* @__PURE__ */ import_react84.default.createElement(import_react_aria_components2.DateInput, __spreadValues({
+  return /* @__PURE__ */ import_react84.default.createElement(import_react_aria_components.DateInput, __spreadValues({
     className: (renderProps) => fieldGroup(__spreadProps(__spreadValues({}, renderProps), { class: "block min-w-[150px]" }))
-  }, props), (segment) => /* @__PURE__ */ import_react84.default.createElement(import_react_aria_components2.DateSegment, {
+  }, props), (segment) => /* @__PURE__ */ import_react84.default.createElement(import_react_aria_components.DateSegment, {
     segment,
     className: segmentStyles
   }));
@@ -13177,22 +13218,22 @@ function DateInput(props) {
 
 // src/molecules/Field/Field.tsx
 var import_react85 = __toESM(require("react"));
-var import_react_aria_components3 = require("react-aria-components");
+var import_react_aria_components2 = require("react-aria-components");
 var FieldGroup = (props) => {
-  return /* @__PURE__ */ import_react85.default.createElement(import_react_aria_components3.Group, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react85.default.createElement(import_react_aria_components2.Group, __spreadProps(__spreadValues({}, props), {
     className: (renderProps) => fieldGroup(renderProps)
   }));
 };
 
 // src/molecules/TimeField/TimeField.tsx
 var import_react86 = __toESM(require("react"));
-var import_react_aria_components4 = require("react-aria-components");
+var import_react_aria_components3 = require("react-aria-components");
 var import_label = require("@react-aria/label");
 var import_utils21 = require("@react-aria/utils");
 var import_omit8 = __toESM(require("lodash/omit"));
 function TimeFieldBase(_a) {
   var _b = _a, { disabled, valid } = _b, props = __objRest(_b, ["disabled", "valid"]);
-  return /* @__PURE__ */ import_react86.default.createElement(import_react_aria_components4.TimeField, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react86.default.createElement(import_react_aria_components3.TimeField, __spreadProps(__spreadValues({}, props), {
     isInvalid: valid === false,
     isDisabled: disabled
   }), /* @__PURE__ */ import_react86.default.createElement(DateInput, null));
@@ -13217,21 +13258,20 @@ var import_calendar2 = __toESM(require_calendar());
 
 // src/molecules/DatePicker/Button.tsx
 var import_react87 = __toESM(require("react"));
-var import_react_aria_components5 = require("react-aria-components");
-var import_react_aria_components6 = require("react-aria-components");
+var import_react_aria_components4 = require("react-aria-components");
 var import_tailwind_variants3 = require("tailwind-variants");
 var button = (0, import_tailwind_variants3.tv)({
   extend: focusRing
 });
 function Button2(props) {
-  return /* @__PURE__ */ import_react87.default.createElement(import_react_aria_components5.Button, __spreadProps(__spreadValues({}, props), {
-    className: (0, import_react_aria_components6.composeRenderProps)(props.className, (className, renderProps) => button(__spreadProps(__spreadValues({}, renderProps), { className })))
+  return /* @__PURE__ */ import_react87.default.createElement(import_react_aria_components4.Button, __spreadProps(__spreadValues({}, props), {
+    className: (0, import_react_aria_components4.composeRenderProps)(props.className, (className, renderProps) => button(__spreadProps(__spreadValues({}, renderProps), { className })))
   }));
 }
 
 // src/molecules/DatePicker/Calendar.tsx
 var import_react88 = __toESM(require("react"));
-var import_react_aria_components7 = require("react-aria-components");
+var import_react_aria_components5 = require("react-aria-components");
 var import_tailwind_variants4 = require("tailwind-variants");
 var import_chevronLeft4 = __toESM(require_chevronLeft());
 var import_chevronRight4 = __toESM(require_chevronRight());
@@ -13252,7 +13292,7 @@ var cellStyles = (0, import_tailwind_variants4.tv)({
   }
 });
 var Calendar = (props) => {
-  return /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components7.Calendar, __spreadValues({}, props), /* @__PURE__ */ import_react88.default.createElement(CalendarHeader, null), /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components7.CalendarGrid, null, /* @__PURE__ */ import_react88.default.createElement(CalendarGridHeader, null), /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components7.CalendarGridBody, null, (date) => /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components7.CalendarCell, {
+  return /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components5.Calendar, __spreadValues({}, props), /* @__PURE__ */ import_react88.default.createElement(CalendarHeader, null), /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components5.CalendarGrid, null, /* @__PURE__ */ import_react88.default.createElement(CalendarGridHeader, null), /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components5.CalendarGridBody, null, (date) => /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components5.CalendarCell, {
     date,
     className: cellStyles
   }))));
@@ -13265,7 +13305,7 @@ var CalendarHeader = () => {
     className: "p-3"
   }, /* @__PURE__ */ import_react88.default.createElement(Icon, {
     icon: import_chevronLeft4.default
-  })), /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components7.Heading, {
+  })), /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components5.Heading, {
     className: tw("flex-1 typography-default-strong text-center")
   }), /* @__PURE__ */ import_react88.default.createElement(Button2, {
     slot: "next",
@@ -13275,16 +13315,16 @@ var CalendarHeader = () => {
   })));
 };
 var CalendarGridHeader = () => {
-  return /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components7.CalendarGridHeader, null, (day) => /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components7.CalendarHeaderCell, {
+  return /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components5.CalendarGridHeader, null, (day) => /* @__PURE__ */ import_react88.default.createElement(import_react_aria_components5.CalendarHeaderCell, {
     className: "text-xs text-inactive typography-caption"
   }, day));
 };
 
 // src/molecules/DatePicker/Dialog.tsx
 var import_react89 = __toESM(require("react"));
-var import_react_aria_components8 = require("react-aria-components");
+var import_react_aria_components6 = require("react-aria-components");
 function Dialog(props) {
-  return /* @__PURE__ */ import_react89.default.createElement(import_react_aria_components8.Dialog, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ import_react89.default.createElement(import_react_aria_components6.Dialog, __spreadProps(__spreadValues({}, props), {
     className: classNames(
       props.className,
       tw(
@@ -13296,20 +13336,20 @@ function Dialog(props) {
 
 // src/molecules/DatePicker/Popover.tsx
 var import_react90 = __toESM(require("react"));
-var import_react_aria_components9 = require("react-aria-components");
+var import_react_aria_components7 = require("react-aria-components");
 var Popover2 = (_a) => {
   var _b = _a, { children, showArrow, className } = _b, props = __objRest(_b, ["children", "showArrow", "className"]);
-  const popoverContext = (0, import_react_aria_components9.useSlottedContext)(import_react_aria_components9.PopoverContext);
+  const popoverContext = (0, import_react_aria_components7.useSlottedContext)(import_react_aria_components7.PopoverContext);
   const isSubmenu = (popoverContext == null ? void 0 : popoverContext.trigger) === "SubmenuTrigger";
   let offset = showArrow ? 12 : 8;
   offset = isSubmenu ? offset - 6 : offset;
-  return /* @__PURE__ */ import_react90.default.createElement(import_react_aria_components9.Popover, __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react90.default.createElement(import_react_aria_components7.Popover, __spreadProps(__spreadValues({
     offset
   }, props), {
     className: tw(
       "rounded-sm shadow-16dp bg-popover-content mt-1 overflow-y-auto flex flex-col border border-default outline-none"
     )
-  }), showArrow && /* @__PURE__ */ import_react90.default.createElement(import_react_aria_components9.OverlayArrow, {
+  }), showArrow && /* @__PURE__ */ import_react90.default.createElement(import_react_aria_components7.OverlayArrow, {
     className: "group"
   }, /* @__PURE__ */ import_react90.default.createElement("svg", {
     width: 12,
@@ -13324,8 +13364,9 @@ var Popover2 = (_a) => {
 // src/molecules/DatePicker/DatePicker.tsx
 var createDatePickerBase = (variant) => (_a) => {
   var _b = _a, { disabled, valid, granularity, shouldCloseOnSelect } = _b, props = __objRest(_b, ["disabled", "valid", "granularity", "shouldCloseOnSelect"]);
-  const hasSomeValue = props.value || props.defaultValue || props.placeholderValue;
-  return /* @__PURE__ */ import_react91.default.createElement(import_react_aria_components10.DatePicker, __spreadProps(__spreadValues({}, props), {
+  var _a2, _b2;
+  const hasSomeValue = (_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : props.placeholderValue;
+  return /* @__PURE__ */ import_react91.default.createElement(import_react_aria_components8.DatePicker, __spreadProps(__spreadValues({}, props), {
     shouldCloseOnSelect: shouldCloseOnSelect != null ? shouldCloseOnSelect : variant === "date",
     isDisabled: disabled,
     isInvalid: valid === false,
@@ -13347,7 +13388,7 @@ var createDatePickerBase = (variant) => (_a) => {
 var DatePickerBase = createDatePickerBase("date");
 var DateTimePickerBase = createDatePickerBase("datetime");
 var PickerTimeField = ({ granularity }) => {
-  const state = import_react91.default.useContext(import_react_aria_components10.DatePickerStateContext);
+  const state = import_react91.default.useContext(import_react_aria_components8.DatePickerStateContext);
   return /* @__PURE__ */ import_react91.default.createElement(TimeField, {
     labelText: "Time",
     granularity: granularity !== "day" ? granularity : void 0,
@@ -13373,7 +13414,7 @@ var DateTimePicker = createDatePicker("datetime");
 
 // src/molecules/DatePicker/DateRangePicker.tsx
 var import_react93 = __toESM(require("react"));
-var import_react_aria_components12 = require("react-aria-components");
+var import_react_aria_components10 = require("react-aria-components");
 var import_label3 = require("@react-aria/label");
 var import_utils26 = require("@react-aria/utils");
 var import_omit10 = __toESM(require("lodash/omit"));
@@ -13381,7 +13422,7 @@ var import_calendar3 = __toESM(require_calendar());
 
 // src/molecules/DatePicker/RangeCalendar.tsx
 var import_react92 = __toESM(require("react"));
-var import_react_aria_components11 = require("react-aria-components");
+var import_react_aria_components9 = require("react-aria-components");
 var import_tailwind_variants5 = require("tailwind-variants");
 var cell = (0, import_tailwind_variants5.tv)({
   extend: focusRing,
@@ -13407,9 +13448,9 @@ var cell = (0, import_tailwind_variants5.tv)({
   }
 });
 function RangeCalendar(props) {
-  return /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components11.RangeCalendar, __spreadValues({}, props), /* @__PURE__ */ import_react92.default.createElement(CalendarHeader, null), /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components11.CalendarGrid, {
+  return /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components9.RangeCalendar, __spreadValues({}, props), /* @__PURE__ */ import_react92.default.createElement(CalendarHeader, null), /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components9.CalendarGrid, {
     className: "[&_td]:px-0"
-  }, /* @__PURE__ */ import_react92.default.createElement(CalendarGridHeader, null), /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components11.CalendarGridBody, null, (date) => /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components11.CalendarCell, {
+  }, /* @__PURE__ */ import_react92.default.createElement(CalendarGridHeader, null), /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components9.CalendarGridBody, null, (date) => /* @__PURE__ */ import_react92.default.createElement(import_react_aria_components9.CalendarCell, {
     date,
     className: tw(
       "group w-8 h-8 typography-small outline outline-0 cursor-default",
@@ -13440,8 +13481,9 @@ var createDateRangePickerBase = (variant) => (_a) => {
     "granularity",
     "shouldCloseOnSelect"
   ]);
-  const hasSomeValue = props.value || props.defaultValue || props.placeholderValue;
-  return /* @__PURE__ */ import_react93.default.createElement(import_react_aria_components12.DateRangePicker, __spreadProps(__spreadValues({}, props), {
+  var _a2, _b2;
+  const hasSomeValue = (_b2 = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b2 : props.placeholderValue;
+  return /* @__PURE__ */ import_react93.default.createElement(import_react_aria_components10.DateRangePicker, __spreadProps(__spreadValues({}, props), {
     shouldCloseOnSelect: shouldCloseOnSelect != null ? shouldCloseOnSelect : variant === "date",
     isDisabled: disabled,
     isInvalid: valid === false,
@@ -13475,7 +13517,7 @@ var createDateRangePickerBase = (variant) => (_a) => {
 };
 var PickerTimeField2 = ({ granularity, part }) => {
   var _a;
-  const { timeRange, setTime } = import_react93.default.useContext(import_react_aria_components12.DateRangePickerStateContext);
+  const { timeRange, setTime } = import_react93.default.useContext(import_react_aria_components10.DateRangePickerStateContext);
   return /* @__PURE__ */ import_react93.default.createElement(TimeField, {
     labelText: part === "start" ? "Start time" : "End time",
     granularity: granularity !== "day" ? granularity : void 0,
@@ -13674,7 +13716,7 @@ Modal.HeaderImage = (_a) => {
   const { headerImage } = modalStyles({ backgroundImage: Boolean(backgroundImage) });
   return backgroundImage ? /* @__PURE__ */ import_react94.default.createElement("img", __spreadProps(__spreadValues({
     "aria-hidden": true,
-    src: backgroundImage != null ? backgroundImage : void 0
+    src: backgroundImage
   }, rest), {
     className: headerImage({ className })
   })) : /* @__PURE__ */ import_react94.default.createElement("div", {
@@ -13799,17 +13841,17 @@ var DialogWrapper = ({
 
 // src/molecules/Drawer/Drawer.tsx
 var import_react98 = __toESM(require("react"));
-var import_react_aria_components14 = require("react-aria-components");
+var import_react_aria_components12 = require("react-aria-components");
 var import_web5 = require("@react-spring/web");
 var import_castArray3 = __toESM(require("lodash/castArray"));
 var import_omit12 = __toESM(require("lodash/omit"));
 
 // src/molecules/Modal/ModalTitle.tsx
 var import_react96 = __toESM(require("react"));
-var import_react_aria_components13 = require("react-aria-components");
+var import_react_aria_components11 = require("react-aria-components");
 var ModalTitle = (_a) => {
   var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-  const [ctxProps] = (0, import_react_aria_components13.useContextProps)(__spreadProps(__spreadValues({}, props), { slot: "title" }), null, import_react_aria_components13.HeadingContext);
+  const [ctxProps] = (0, import_react_aria_components11.useContextProps)(__spreadProps(__spreadValues({}, props), { slot: "title" }), null, import_react_aria_components11.HeadingContext);
   return /* @__PURE__ */ import_react96.default.createElement(Modal.Title, __spreadValues({
     id: ctxProps.id
   }, props), children);
@@ -13844,7 +13886,6 @@ var TabContainer = (_a) => {
   }), children);
 };
 var ModalTab = Tab;
-var ModalTabContainer = TabContainer;
 var asTabItem = (Component, displayName, { defaultUnderlineHidden } = {}) => {
   const Tab2 = import_react97.default.forwardRef(
     (_a, ref) => {
@@ -14163,20 +14204,20 @@ var Drawer = ({
   const childElements = import_react98.default.Children.toArray(children).filter(import_react98.default.isValidElement);
   const onlyChild = childElements.length === 1 ? childElements[0] : null;
   const hasTabs = isComponentType(onlyChild, Tabs);
-  return /* @__PURE__ */ import_react98.default.createElement(import_react_aria_components14.ModalOverlay, {
+  return /* @__PURE__ */ import_react98.default.createElement(import_react_aria_components12.ModalOverlay, {
     isOpen: !hidden,
-    onOpenChange: (isOpen) => !isOpen && (onClose == null ? void 0 : onClose()),
+    onOpenChange: (isOpen) => !isOpen && onClose(),
     isDismissable: false,
     isKeyboardDismissDisabled: !closeOnEsc,
     className: styles.overlay({ className: "Aquarium-Drawer" })
   }, /* @__PURE__ */ import_react98.default.createElement(AnimatedBackDrop, {
     style: { opacity }
-  }), /* @__PURE__ */ import_react98.default.createElement(import_react_aria_components14.Modal, null, /* @__PURE__ */ import_react98.default.createElement(AnimatedDialog, {
+  }), /* @__PURE__ */ import_react98.default.createElement(import_react_aria_components12.Modal, null, /* @__PURE__ */ import_react98.default.createElement(AnimatedDialog, {
     kind: "drawer",
     "aria-modal": "true",
     size: dialogSize,
     style: { position: "fixed", right }
-  }, /* @__PURE__ */ import_react98.default.createElement(import_react_aria_components14.Dialog, {
+  }, /* @__PURE__ */ import_react98.default.createElement(import_react_aria_components12.Dialog, {
     className: "flex flex-col grow overflow-y-auto"
   }, ({ close }) => {
     var _a;
@@ -14192,13 +14233,13 @@ var Drawer = ({
       className: tw("[&>div:first-child]:px-5 grow flex flex-col overflow-y-auto")
     })) : /* @__PURE__ */ import_react98.default.createElement(Modal.Body, {
       tabIndex: 0,
-      noFooter: !(secondaryActions || primaryAction)
-    }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react98.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react98.default.createElement(Modal.Actions, {
+      noFooter: !(secondaryActions != null ? secondaryActions : primaryAction)
+    }, children), (secondaryActions != null ? secondaryActions : primaryAction) && /* @__PURE__ */ import_react98.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react98.default.createElement(Modal.Actions, {
       className: size === "sm" ? tw("flex-col") : void 0
     }, size !== "sm" && menu && /* @__PURE__ */ import_react98.default.createElement(Box.Flex, {
       alignItems: "center"
     }, /* @__PURE__ */ import_react98.default.createElement(DropdownMenu2, {
-      onAction: (action) => onAction == null ? void 0 : onAction(action),
+      onAction: (action) => onAction(action),
       onOpenChange: onMenuOpenChange
     }, /* @__PURE__ */ import_react98.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react98.default.createElement(Button.Icon, {
       "aria-label": (_a = menuAriaLabel != null ? menuAriaLabel : menuLabel) != null ? _a : "Context menu",
@@ -14215,7 +14256,7 @@ var Drawer = ({
 };
 var DrawerTabs = createTabsComponent(ModalTab, TabItem, "DrawerTabs", (children, selected) => /* @__PURE__ */ import_react98.default.createElement(Modal.Body, {
   className: tw("h-full")
-}, /* @__PURE__ */ import_react98.default.createElement(ModalTabContainer, null, children.find(
+}, /* @__PURE__ */ import_react98.default.createElement(TabContainer, null, children.find(
   (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
 ))));
 
@@ -14363,8 +14404,8 @@ var DropdownMenu3 = ({
   const menuRef = import_react102.default.useRef(null);
   import_react102.default.useEffect(() => {
     const id = setTimeout(() => {
-      var _a, _b, _c;
-      return (_c = (_b = (_a = menuRef.current) == null ? void 0 : _a.children) == null ? void 0 : _b[0]) == null ? void 0 : _c.focus();
+      var _a;
+      return ((_a = menuRef.current) == null ? void 0 : _a.children[0]).focus();
     });
     return () => clearTimeout(id);
   }, [menuRef.current]);
@@ -14552,7 +14593,7 @@ var EmptyState = ({
     htmlTag: "h2"
   }, title), (description || children) && /* @__PURE__ */ import_react103.default.createElement(Box, {
     marginTop: "5"
-  }, /* @__PURE__ */ import_react103.default.createElement(Typography2.Default, null, children || description)), (secondaryAction || primaryAction) && /* @__PURE__ */ import_react103.default.createElement(Box.Flex, {
+  }, /* @__PURE__ */ import_react103.default.createElement(Typography2.Default, null, children || description)), (secondaryAction != null ? secondaryAction : primaryAction) && /* @__PURE__ */ import_react103.default.createElement(Box.Flex, {
     marginTop: "7",
     gap: "4",
     justifyContent: "center",
@@ -14731,7 +14772,7 @@ var ListItem = ({ name, icon, active = false }) => {
 
 // src/molecules/Modal/Modal.tsx
 var import_react111 = __toESM(require("react"));
-var import_react_aria_components15 = require("react-aria-components");
+var import_react_aria_components13 = require("react-aria-components");
 var import_castArray4 = __toESM(require("lodash/castArray"));
 var import_omit14 = __toESM(require("lodash/omit"));
 var import_cross7 = __toESM(require_cross());
@@ -14752,17 +14793,17 @@ var Modal2 = ({
   }
   const styles = modalStyles({ kind: "dialog", size });
   const hasTabs = isComponentType(children, ModalTabs);
-  return /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components15.ModalOverlay, {
+  return /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components13.ModalOverlay, {
     isOpen: open,
-    onOpenChange: (isOpen) => !isOpen && (onClose == null ? void 0 : onClose()),
+    onOpenChange: (isOpen) => !isOpen && onClose(),
     isDismissable: false,
     isKeyboardDismissDisabled: !closeOnEsc,
     className: styles.overlay({ className: "Aquarium-Modal" })
   }, size !== "screen" && /* @__PURE__ */ import_react111.default.createElement(Modal.BackDrop, {
     className: styles.backdrop()
-  }), /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components15.Modal, {
+  }), /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components13.Modal, {
     className: styles.dialog()
-  }, /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components15.Dialog, {
+  }, /* @__PURE__ */ import_react111.default.createElement(import_react_aria_components13.Dialog, {
     className: "flex flex-col grow overflow-y-auto"
   }, ({ close }) => /* @__PURE__ */ import_react111.default.createElement(import_react111.default.Fragment, null, /* @__PURE__ */ import_react111.default.createElement(Modal.CloseButtonContainer, null, /* @__PURE__ */ import_react111.default.createElement(Button.Icon, {
     "aria-label": "Close",
@@ -14778,8 +14819,8 @@ var Modal2 = ({
     kind: "dialog"
   }, title), subtitle && /* @__PURE__ */ import_react111.default.createElement(Modal.Subtitle, null, subtitle))), hasTabs ? import_react111.default.cloneElement(children, { className: tw("[&>div:first-child]:px-5 grow") }) : /* @__PURE__ */ import_react111.default.createElement(Modal.Body, {
     tabIndex: 0,
-    noFooter: !(secondaryActions || primaryAction)
-  }, children), (secondaryActions || primaryAction) && /* @__PURE__ */ import_react111.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react111.default.createElement(Modal.Actions, null, secondaryActions && (0, import_castArray4.default)(secondaryActions).filter(Boolean).map((_a) => {
+    noFooter: !(secondaryActions != null ? secondaryActions : primaryAction)
+  }, children), (secondaryActions != null ? secondaryActions : primaryAction) && /* @__PURE__ */ import_react111.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react111.default.createElement(Modal.Actions, null, secondaryActions && (0, import_castArray4.default)(secondaryActions).filter(Boolean).map((_a) => {
     var _b = _a, { text } = _b, action = __objRest(_b, ["text"]);
     return /* @__PURE__ */ import_react111.default.createElement(Button.Secondary, __spreadValues({
       key: text
@@ -14794,7 +14835,7 @@ var ModalTabs = createTabsComponent(
   "ModalTabs",
   (children, selected, props) => /* @__PURE__ */ import_react111.default.createElement(Modal.Body, {
     maxHeight: props.maxHeight
-  }, /* @__PURE__ */ import_react111.default.createElement(ModalTabContainer, null, children.find(
+  }, /* @__PURE__ */ import_react111.default.createElement(TabContainer, null, children.find(
     (node, index) => (node == null ? void 0 : node.props.value) === selected || index === selected
   )))
 );
@@ -14908,7 +14949,7 @@ var MultiInputBase = (_a) => {
     }
   }, [JSON.stringify(value)]);
   const handleKeyDown = (e) => {
-    var _a3, _b2, _c;
+    var _a3, _b2;
     switch (e.key) {
       case "Enter":
       case " ": {
@@ -14921,8 +14962,8 @@ var MultiInputBase = (_a) => {
         break;
       }
       case "Backspace": {
-        const length = (_a3 = items == null ? void 0 : items.length) != null ? _a3 : 0;
-        if (inline && !((_c = (_b2 = inputRef.current) == null ? void 0 : _b2.value) == null ? void 0 : _c.length) && length > 0) {
+        const length = (_a3 = items.length) != null ? _a3 : 0;
+        if (inline && !((_b2 = inputRef.current) == null ? void 0 : _b2.value.length) && length > 0) {
           handleRemoveItem(length - 1);
         }
         break;
@@ -14957,12 +14998,13 @@ var MultiInputBase = (_a) => {
     onChange == null ? void 0 : onChange(updated);
   };
   const handlePaste = (e) => {
+    var _a3;
     e.preventDefault();
     const copiedText = e.clipboardData.getData("text/plain");
     const spaceSeparated = copiedText.split(" ");
     const newLineSeparated = copiedText.split("\n");
     const commaSeparated = copiedText.split(",");
-    const separatedText = [spaceSeparated, newLineSeparated, commaSeparated].filter((items2) => items2.length > 1).shift() || [copiedText];
+    const separatedText = (_a3 = [spaceSeparated, newLineSeparated, commaSeparated].filter((items2) => items2.length > 1).shift()) != null ? _a3 : [copiedText];
     const itemsToAdd = separatedText.map((value2) => value2.trim()).filter(import_identity.default);
     handleAddItem(itemsToAdd);
   };
@@ -14978,7 +15020,7 @@ var MultiInputBase = (_a) => {
     }
     onBlur == null ? void 0 : onBlur();
   };
-  const renderChips = () => items == null ? void 0 : items.map((item, index) => {
+  const renderChips = () => items.map((item, index) => {
     var _a3;
     return /* @__PURE__ */ import_react113.default.createElement(InputChip, {
       key: `${itemToString(item)}.${index}`,
@@ -15007,7 +15049,7 @@ var MultiInputBase = (_a) => {
     autoFocus,
     disabled,
     readOnly,
-    placeholder: !inline || (items == null ? void 0 : items.length) === 0 ? placeholder : "",
+    placeholder: !inline || items.length === 0 ? placeholder : "",
     onKeyDown: handleKeyDown,
     onKeyUp: handleKeyUp,
     onKeyPress: handleKeyUp,
@@ -15610,6 +15652,13 @@ var CommonPageHeader = ({
   onMenuOpenChange,
   isSubHeader = false
 }) => {
+  var _a, _b;
+  const actions = [primaryAction, ...(0, import_castArray6.default)(secondaryActions)].filter(Boolean);
+  if (actions.length > 2) {
+    throw new Error(
+      "Limit the combined `primaryAction` and `secondaryActions` to 2 actions. Use the `menu` prop for additional actions."
+    );
+  }
   return /* @__PURE__ */ import_react119.default.createElement(PageHeader, {
     className: "Aquarium-PageHeader"
   }, /* @__PURE__ */ import_react119.default.createElement(PageHeader.Container, null, breadcrumbs && /* @__PURE__ */ import_react119.default.createElement(Box, {
@@ -15627,11 +15676,11 @@ var CommonPageHeader = ({
     key: chip,
     dense: true,
     text: chip
-  }))), subtitle && /* @__PURE__ */ import_react119.default.createElement(PageHeader.Subtitle, null, subtitle)))), (secondaryActions || primaryAction || secondaryAction || menu) && /* @__PURE__ */ import_react119.default.createElement(PageHeader.Actions, null, menu && /* @__PURE__ */ import_react119.default.createElement(Box.Flex, {
+  }))), subtitle && /* @__PURE__ */ import_react119.default.createElement(PageHeader.Subtitle, null, subtitle)))), ((_b = (_a = secondaryActions != null ? secondaryActions : primaryAction) != null ? _a : secondaryAction) != null ? _b : menu) && /* @__PURE__ */ import_react119.default.createElement(PageHeader.Actions, null, menu && /* @__PURE__ */ import_react119.default.createElement(Box.Flex, {
     alignItems: "center"
   }, /* @__PURE__ */ import_react119.default.createElement(DropdownMenu2, {
     placement: defaultContextualMenuPlacement,
-    onAction: (action) => onAction == null ? void 0 : onAction(action),
+    onAction: (action) => onAction(action),
     onOpenChange: onMenuOpenChange
   }, /* @__PURE__ */ import_react119.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react119.default.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
@@ -16222,7 +16271,7 @@ var Section4 = (props) => {
     className: tw("row-start-2", { "col-start-2": _collapsible })
   }, /* @__PURE__ */ import_react130.default.createElement(LineClamp2, {
     lines: 1
-  }, subtitle))), !isCollapsed && /* @__PURE__ */ import_react130.default.createElement(Section3.Actions, null, menu && /* @__PURE__ */ import_react130.default.createElement(Box.Flex, {
+  }, subtitle))), !isCollapsed && /* @__PURE__ */ import_react130.default.createElement(Section3.Actions, null, props.switch && /* @__PURE__ */ import_react130.default.createElement(Switch2, __spreadValues({}, props.switch)), menu && /* @__PURE__ */ import_react130.default.createElement(Box.Flex, {
     alignItems: "center"
   }, /* @__PURE__ */ import_react130.default.createElement(DropdownMenu2, {
     onAction: (action) => onAction == null ? void 0 : onAction(action),
@@ -16231,7 +16280,7 @@ var Section4 = (props) => {
   }, /* @__PURE__ */ import_react130.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react130.default.createElement(Button.Icon, {
     "aria-label": menuAriaLabel,
     icon: import_more6.default
-  })), menu)), props.actions && (0, import_castArray7.default)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.switch && /* @__PURE__ */ import_react130.default.createElement(Switch2, __spreadValues({}, props.switch)), props.select && /* @__PURE__ */ import_react130.default.createElement(SelectBase, __spreadValues({
+  })), menu)), props.actions && (0, import_castArray7.default)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.select && /* @__PURE__ */ import_react130.default.createElement(SelectBase, __spreadValues({
     "aria-labelledby": titleId
   }, props.select)))), !hasTabs && !isCollapsed && /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, {
     className: tw(`h-[1px]`),
@@ -16669,10 +16718,33 @@ Timeline2.Skeleton.displayName = "Timeline.Skeleton";
 var import_react138 = __toESM(require("react"));
 var TimePicker = (props) => /* @__PURE__ */ import_react138.default.createElement(TimeField, __spreadValues({}, props));
 
-// src/utils/table/useTableSelect.ts
+// src/utils/table/sortByColumn.ts
+var sortByColumn = (items, column, sortState) => {
+  const sortedColumn = column.find((column2) => column2.headerName === (sortState == null ? void 0 : sortState.headerName));
+  if (sortState && sortedColumn && columnHasSort(sortedColumn)) {
+    const sortFunction = sortedColumn.sort;
+    if (sortFunction) {
+      const ascending = [...items].sort((a, b) => sortFunction(a, b, sortState.direction));
+      if (sortState.direction === "descending") {
+        return ascending.reverse();
+      } else {
+        return ascending;
+      }
+    }
+    return items;
+  } else {
+    return items;
+  }
+};
+
+// src/utils/table/useSortState.ts
 var import_react139 = __toESM(require("react"));
+var useSortState = (initialSortState) => import_react139.default.useState(initialSortState);
+
+// src/utils/table/useTableSelect.ts
+var import_react140 = __toESM(require("react"));
 var useTableSelect = (data, { key }) => {
-  const [selected, setSelected] = import_react139.default.useState([]);
+  const [selected, setSelected] = import_react140.default.useState([]);
   const allSelected = selected.length === data.length;
   const isSelected = (dot) => selected.includes(dot[key]);
   const selectAll = () => setSelected(data.map((dot) => dot[key]));
@@ -16696,6 +16768,94 @@ var useTableSelect = (data, { key }) => {
   };
 };
 
+// src/molecules/ItemList/ItemList.tsx
+var import_react141 = __toESM(require("react"));
+var ItemList = (_a) => {
+  var _b = _a, {
+    columns,
+    items,
+    onSortChanged,
+    sticky
+  } = _b, infiniteProps = __objRest(_b, [
+    "columns",
+    "items",
+    "onSortChanged",
+    "sticky"
+  ]);
+  const templateColumns = columns.map((column) => {
+    var _a2;
+    return (_a2 = column.width) != null ? _a2 : "auto";
+  });
+  const [sortState, setSortState] = useSortState();
+  const sortedItems = onSortChanged ? items : sortByColumn(items, columns, sortState);
+  return /* @__PURE__ */ import_react141.default.createElement(Template, {
+    className: "Aquarium-ItemList",
+    columns: templateColumns,
+    role: "table"
+  }, /* @__PURE__ */ import_react141.default.createElement(DataList.Row, {
+    header: true
+  }, columns.map((column) => {
+    if (columnHasSort(column)) {
+      return /* @__PURE__ */ import_react141.default.createElement(DataList.SortCell, __spreadValues({
+        sticky,
+        direction: (sortState == null ? void 0 : sortState.headerName) === column.headerName ? sortState.direction : "none",
+        onClick: () => {
+          setSortState((currentState) => {
+            const newState = currentState && currentState.headerName === column.headerName ? currentState.direction === "ascending" ? { headerName: column.headerName, direction: "descending" } : void 0 : { headerName: column.headerName, direction: "ascending" };
+            onSortChanged == null ? void 0 : onSortChanged(newState);
+            return newState;
+          });
+        }
+      }, cellProps(column)), column.headerName);
+    }
+    return /* @__PURE__ */ import_react141.default.createElement(DataList.HeadCell, __spreadProps(__spreadValues({}, cellProps(column)), {
+      sticky
+    }), column.headerName);
+  })), /* @__PURE__ */ import_react141.default.createElement(Rows, __spreadValues({
+    columns,
+    items: sortedItems,
+    level: 0
+  }, infiniteProps)));
+};
+var Rows = (_a) => {
+  var _b = _a, { columns, items, level, isLastGroup } = _b, infiniteProps = __objRest(_b, ["columns", "items", "level", "isLastGroup"]);
+  return /* @__PURE__ */ import_react141.default.createElement(List, __spreadProps(__spreadValues({}, level === 0 ? infiniteProps : {}), {
+    items,
+    renderItem: (item, itemIndex) => {
+      const hasSubItems = item.items && item.items.length > 0;
+      const isLastItem = itemIndex === items.length - 1;
+      const noDivider = level === 0 && isLastItem || level > 0 && (isLastGroup || !isLastItem) || hasSubItems;
+      return /* @__PURE__ */ import_react141.default.createElement(import_react141.default.Fragment, {
+        key: item.id
+      }, /* @__PURE__ */ import_react141.default.createElement(DataList.Row, {
+        noDivider
+      }, /* @__PURE__ */ import_react141.default.createElement(List, {
+        items: columns,
+        renderItem: (column, columnIndex) => /* @__PURE__ */ import_react141.default.createElement(DataList.Cell, __spreadProps(__spreadValues({}, cellProps(column)), {
+          style: level > 1 && columnIndex === 0 ? { paddingLeft: (level - 1) * 60 } : void 0
+        }), level > 0 && columnIndex === 0 && /* @__PURE__ */ import_react141.default.createElement(DataList.TreeLine, {
+          isLast: itemIndex === items.length - 1
+        }), /* @__PURE__ */ import_react141.default.createElement(DataListCell, {
+          column,
+          row: item,
+          index: columnIndex,
+          rows: items
+        }))
+      })), item.items && /* @__PURE__ */ import_react141.default.createElement(WithGroup, {
+        level
+      }, /* @__PURE__ */ import_react141.default.createElement(Rows, {
+        columns,
+        items: item.items,
+        level: level + 1,
+        isLastGroup: level === 0 && itemIndex === items.length - 1 || isLastGroup
+      })));
+    }
+  }));
+};
+var WithGroup = ({ level, children }) => level === 0 ? /* @__PURE__ */ import_react141.default.createElement(DataList.Row, {
+  isGroup: true
+}, children) : children;
+
 // src/molecules/index.ts
 var SelectItem = Select.Item;
 
@@ -16758,7 +16918,7 @@ function calcBottomLeftPosition(triggerRect, contentRect, padding) {
     y: triggerRect.top + triggerRect.height + padding
   };
 }
-function calcBottomRightPosition(triggerRect, contentRect, padding) {
+function calcBottomRightPosition(triggerRect, _contentRect, padding) {
   return {
     x: triggerRect.left + triggerRect.width + padding,
     y: triggerRect.top + triggerRect.height + padding
@@ -16872,6 +17032,7 @@ var system_default = __spreadValues({}, molecules_exports);
   InlineIcon,
   Input,
   InputBase,
+  ItemList,
   Label,
   LabelControl,
   LineClamp,
@@ -16880,7 +17041,6 @@ var system_default = __spreadValues({}, molecules_exports);
   ListItem,
   Modal,
   ModalTab,
-  ModalTabContainer,
   ModalTabs,
   MultiInput,
   MultiInputBase,
@@ -16950,6 +17110,7 @@ var system_default = __spreadValues({}, molecules_exports);
   calcTopPosition,
   calcTopRightPosition,
   cellProps,
+  columnHasSort,
   columnIsFieldColumn,
   createComponent,
   createMountPointElement,
@@ -16959,10 +17120,12 @@ var system_default = __spreadValues({}, molecules_exports);
   isOnSortChangedDirection,
   isOutOfBounds,
   placementOrder,
+  sortByColumn,
   toSortDirection,
   usePagination,
   usePopoverContext,
   useScrollTarget,
+  useSortState,
   useStaticInfiniteList,
   useTableSelect,
   useTableSort,