@aivenio/aquarium 6.3.0 → 6.5.0

package/dist/system.cjs

@@ -1987,9 +1987,9 @@ var tokens_default = {
     }
   },
   code: {
-    background: "rgba(250,250,250,1)",
+    background: "rgba(255,255,255,1)",
     text: "rgba(45,46,48,1)",
-    variable: "rgba(123,45,139,1)",
+    variable: "rgba(91,30,103,1)",
     keyword: "rgba(202, 33, 101, 1)",
     string: "rgba(0, 127, 115, 1)",
     function: "rgba(9, 128, 193, 1)",
@@ -2591,6 +2591,14 @@ var Tooltip = ({ delay = 200, ...props }) => {
     shouldFlip,
     offset: ARROW_OFFSET
   });
+  const [containsFocusable, setContainsFocusable] = import_react9.default.useState(false);
+  import_react9.default.useLayoutEffect(() => {
+    if (triggerRef.current) {
+      const elements = Array.from(triggerRef.current.querySelectorAll("*"));
+      const hasFocusable = elements.some((el) => (0, import_utils.isFocusable)(el));
+      setContainsFocusable(hasFocusable);
+    }
+  });
   const { focusWithinProps } = (0, import_interactions.useFocusWithin)({
     onFocusWithinChange: (isFocusWithin) => isFocusWithin ? state.open() : state.close()
   });
@@ -2619,6 +2627,7 @@ var Tooltip = ({ delay = 200, ...props }) => {
     {
       className: display,
       ...triggerProps,
+      tabIndex: containsFocusable ? -1 : triggerProps.tabIndex,
       onFocus: (e) => {
         triggerProps.onFocus?.(e);
         focusWithinProps.onFocus?.(e);
@@ -6220,15 +6229,7 @@ Modal.TitleContainer = ({ children, className, ...rest }) => {
   const { titleContainer: titleContainer2 } = modalStyles();
   return /* @__PURE__ */ import_react67.default.createElement("div", { ...rest, className: titleContainer2({ className }) }, children);
 };
-var ModalBody = ({
-  children,
-  className,
-  noFooter = false,
-  maxHeight,
-  style,
-  size,
-  ...rest
-}) => {
+var ModalBody = ({ children, className, contentClassName, noFooter = false, maxHeight, style, size, ...rest }) => {
   const { body, bodyContent } = modalStyles({ size });
   const { containerRef, topSentinelRef, bottomSentinelRef, showTopFade, showBottomFade } = useScrollFade();
   return /* @__PURE__ */ import_react67.default.createElement(
@@ -6240,7 +6241,7 @@ var ModalBody = ({
       style: { maxHeight, ...style }
     },
     /* @__PURE__ */ import_react67.default.createElement("div", { ref: topSentinelRef, "aria-hidden": "true", className: "h-1px" }),
-    /* @__PURE__ */ import_react67.default.createElement("div", { className: bodyContent({ noFooter }) }, children),
+    /* @__PURE__ */ import_react67.default.createElement("div", { className: bodyContent({ noFooter, className: contentClassName }) }, children),
     /* @__PURE__ */ import_react67.default.createElement("div", { ref: bottomSentinelRef, "aria-hidden": "true", className: "h-1px -mt-1px" })
   );
 };
@@ -6709,7 +6710,7 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ import_react
 
 // src/molecules/DataList/DataList.tsx
 var import_react93 = __toESM(require("react"));
-var import_utils20 = require("@react-stately/utils");
+var import_utils19 = require("@react-stately/utils");
 var import_clsx26 = require("clsx");
 var import_lodash_es30 = require("lodash-es");
 
@@ -8207,11 +8208,6 @@ var useDataListContext = () => {
 // src/molecules/DataList/DataListGroup.tsx
 var import_react90 = __toESM(require("react"));
 var import_lodash_es28 = require("lodash-es");
-
-// src/molecules/DataList/utils.ts
-var flattenRows = (rows) => areRowsGrouped(rows) ? Object.values(rows).flatMap(flattenRows) : rows;
-
-// src/molecules/DataList/DataListGroup.tsx
 var GAP = 8;
 var INDENTATION = 28;
 var sortGroupKeys = (groupKeys) => [...groupKeys].sort((a) => a === "undefined" ? -1 : 1);
@@ -8242,6 +8238,7 @@ var DataListGroup = ({
     rows,
     selectable,
     selectedRows,
+    statsByNode,
     getOnSelectionChangeForId,
     selectionDisabled = () => false,
     getRowSelectionLabel = getDefaultRowSelectionLabel,
@@ -8270,8 +8267,8 @@ var DataListGroup = ({
         items: groups,
         renderItem: (row, index) => {
           const isSelected = selectedRows?.includes(row.id) ?? false;
-          const isDisabled = disabled?.(row, index, rows);
-          const isSelectionDisabled = selectionDisabled(row, index, rows);
+          const isDisabled = disabled?.(row, index, groups);
+          const isSelectionDisabled = selectionDisabled(row, index, groups);
           const isLastRow = isLastGroup && index === groups.length - 1;
           return /* @__PURE__ */ import_react90.default.createElement(
             DataListRow,
@@ -8281,7 +8278,7 @@ var DataListGroup = ({
               row,
               index,
               isLast: isLastRow,
-              rows,
+              rows: groups,
               active: selectable && isSelected,
               menu: /* @__PURE__ */ import_react90.default.createElement(
                 DataListRowMenu,
@@ -8310,7 +8307,7 @@ var DataListGroup = ({
                   RadioButton,
                   {
                     value: row2.id.toString(),
-                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
+                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, groups),
                     onChange: import_lodash_es28.noop,
                     checked: isSelected,
                     disabled: isDisabled || isSelectionDisabled
@@ -8318,7 +8315,7 @@ var DataListGroup = ({
                 ), isMultiSelectionMode && /* @__PURE__ */ import_react90.default.createElement(
                   Checkbox,
                   {
-                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, rows),
+                    "aria-label": getRowSelectionLabel(row2, index2, isSelected, groups),
                     onChange: getOnSelectionChangeForId(row2.id),
                     checked: isSelected,
                     disabled: isDisabled || isSelectionDisabled
@@ -8355,10 +8352,12 @@ var DataListGroup = ({
           );
         }
         const openPanelId = expandedGroupIds ? expandedGroupIds.find((id) => id === key) ?? null : void 0;
-        const nestedRowIds = flattenRows(group).map((row) => row.id);
-        const nestedSelectedIds = selectedRows?.filter((id) => nestedRowIds.includes(id)) ?? [];
-        const allSelected = nestedRowIds.length === nestedSelectedIds.length;
-        const isChecked = nestedSelectedIds.length > 0;
+        const { selectableIds, allSelected, isChecked, isDisabled } = statsByNode.get(group) ?? {
+          selectableIds: [],
+          allSelected: false,
+          isChecked: false,
+          isDisabled: true
+        };
         const isActiveRow = !!openPanelId || selectable && isChecked;
         const isLastRow = isLastGroup && index === groupKeys.length - 1 && !openPanelId;
         return /* @__PURE__ */ import_react90.default.createElement(Accordion, { key, openPanelId }, hasCustomRowForGroup && /* @__PURE__ */ import_react90.default.createElement(DataList.Row, { active: isActiveRow, noDivider: isLastRow }, selectable && /* @__PURE__ */ import_react90.default.createElement(DataList.Cell, null, isMultiSelectionMode && /* @__PURE__ */ import_react90.default.createElement(
@@ -8367,8 +8366,8 @@ var DataListGroup = ({
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
             checked: isChecked,
             indeterminate: isChecked && !allSelected,
-            disabled: group.length === 0,
-            onChange: getOnSelectionChangeForId(nestedRowIds)
+            disabled: isDisabled,
+            onChange: getOnSelectionChangeForId(selectableIds)
           }
         )), /* @__PURE__ */ import_react90.default.createElement(
           List,
@@ -8402,8 +8401,8 @@ var DataListGroup = ({
             "aria-label": getGroupCheckboxLabel(key, group, index, isChecked, rows),
             checked: isChecked,
             indeterminate: isChecked && !allSelected,
-            disabled: group.length === 0,
-            onChange: getOnSelectionChangeForId(nestedRowIds)
+            disabled: isDisabled,
+            onChange: getOnSelectionChangeForId(selectableIds)
           }
         )), /* @__PURE__ */ import_react90.default.createElement(
           DataList.Cell,
@@ -8522,12 +8521,12 @@ var DataList2 = ({
   const containerRef = (0, import_react93.useRef)(null);
   const hasStickyColumns = columns.some((column) => column.sticky);
   const stickyStyles = useScrollStyles({ containerRef, skip: !hasStickyColumns });
-  const [selected, setSelected] = (0, import_utils20.useControlledState)(
+  const [selected, setSelected] = (0, import_utils19.useControlledState)(
     selectedRows,
     defaultSelectedRows,
     (value) => onSelectionChange?.(value ?? [])
   );
-  const [expandedGroupIds, setExpandedGroupIds] = (0, import_utils20.useControlledState)(_expandedGroupIds, []);
+  const [expandedGroupIds, setExpandedGroupIds] = (0, import_utils19.useControlledState)(_expandedGroupIds, []);
   const onGroupToggled = (id, open) => {
     if (!open) {
       setExpandedGroupIds([...expandedGroupIds, id]);
@@ -8541,6 +8540,7 @@ var DataList2 = ({
   const [sort, updateSort] = useTableSort({ ...initialSortState, onSortChanged });
   const sortedRows = (0, import_lodash_es30.isArray)(rows) ? sortRowsBy(rows, sort) : [];
   const groups = areRowsGrouped(rows) ? rows : group ? (0, import_lodash_es30.isFunction)(group) ? group(sortedRows) : (0, import_lodash_es30.groupBy)(sortedRows, group) : void 0;
+  const rootNode = groups ?? sortedRows;
   const isCollapsible = (0, import_lodash_es30.isFunction)(rowDetails);
   const templateColumns = (0, import_lodash_es30.compact)([
     selectable ? "fit-content(28px)" : void 0,
@@ -8563,26 +8563,37 @@ var DataList2 = ({
     }
   };
   const isMultiSelectionMode = selectable === "multiple" || selectable === "multiple-not-all";
-  const allRows = flattenRows(rows);
-  const totalSelected = selected?.length ?? 0;
-  const allEnabledRowIds = (0, import_lodash_es30.compact)(
-    allRows.map(
-      (row, index) => disabled?.(row, index, sortedRows) || selectionDisabled(row, index, sortedRows) ? void 0 : row.id
-    )
-  );
-  const allRowsSelected = totalSelected >= allEnabledRowIds.length;
+  const selectedIds = new Set(selected);
+  const buildSelectionStats = (root) => {
+    const statsByNode2 = /* @__PURE__ */ new Map();
+    const recordStats = (node) => {
+      const selectableIds2 = areRowsGrouped(node) ? Object.values(node).flatMap((child) => recordStats(child).selectableIds) : node.filter((row, i) => !disabled?.(row, i, node) && !selectionDisabled(row, i, node)).map((row) => row.id);
+      const selectedSelectableCount = selectableIds2.filter((id) => selectedIds.has(id)).length;
+      const stats = {
+        selectableIds: selectableIds2,
+        selectedSelectableCount,
+        allSelected: selectableIds2.length > 0 && selectedSelectableCount === selectableIds2.length,
+        isChecked: selectedSelectableCount > 0,
+        isDisabled: selectableIds2.length === 0
+      };
+      statsByNode2.set(node, stats);
+      return stats;
+    };
+    return { statsByNode: statsByNode2, rootStats: recordStats(root) };
+  };
+  const { statsByNode, rootStats } = buildSelectionStats(rootNode);
+  const { selectableIds, isChecked, allSelected, isDisabled } = rootStats;
   const componentContent = /* @__PURE__ */ import_react93.default.createElement(Template, { className: "Aquarium-DataList", columns: templateColumns, role: "table", "aria-label": ariaLabel }, !hideHeader && /* @__PURE__ */ import_react93.default.createElement(import_react93.default.Fragment, null, /* @__PURE__ */ import_react93.default.createElement(DataList.Row, { header: true }, selectable && /* @__PURE__ */ import_react93.default.createElement(DataList.HeadCell, { align: "left", sticky }, selectable === "multiple" && /* @__PURE__ */ import_react93.default.createElement(
     Checkbox,
     {
       "aria-label": "Select all rows",
-      indeterminate: totalSelected > 0 && totalSelected < allRows.length,
-      checked: totalSelected > 0,
+      indeterminate: isChecked && !allSelected,
+      checked: isChecked,
+      disabled: isDisabled,
       onChange: () => {
-        if (!allRowsSelected) {
-          setSelected(allEnabledRowIds);
-        } else {
-          setSelected([]);
-        }
+        const enabledSet = new Set(selectableIds);
+        const keptSelection = (selected ?? []).filter((id) => !enabledSet.has(id));
+        setSelected(allSelected ? keptSelection : [...keptSelection, ...selectableIds]);
       }
     }
   )), isCollapsible && /* @__PURE__ */ import_react93.default.createElement(DataList.HeadCell, { align: "left", sticky }), columns.map((column) => {
@@ -8627,6 +8638,7 @@ var DataList2 = ({
       getGroupCheckboxLabel,
       rows,
       groups,
+      statsByNode,
       groupKey: void 0,
       level: 0,
       isLastGroup: true
@@ -8641,7 +8653,7 @@ var DataList2 = ({
         const details = rowDetails?.(row, index, sortedRows);
         const isSelected = selected?.includes(row.id) ?? false;
         const isSelectionDisabled = selectionDisabled(row, index, sortedRows);
-        const isDisabled = disabled?.(row, index, sortedRows);
+        const isDisabled2 = disabled?.(row, index, sortedRows);
         const openPanelId = expandedGroupIds.find((id) => id === row.id.toString()) || null;
         const isLastRow = index === sortedRows.length - 1;
         const content = /* @__PURE__ */ import_react93.default.createElement(
@@ -8664,7 +8676,7 @@ var DataList2 = ({
                 onAction,
                 onMenuOpenChange,
                 menuAriaLabel,
-                disabled: isDisabled
+                disabled: isDisabled2
               }
             ),
             disabled,
@@ -8681,7 +8693,7 @@ var DataList2 = ({
                   "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
                   onChange: import_lodash_es30.noop,
                   checked: isSelected,
-                  disabled: isDisabled || isSelectionDisabled
+                  disabled: isDisabled2 || isSelectionDisabled
                 }
               ), isMultiSelectionMode && /* @__PURE__ */ import_react93.default.createElement(
                 Checkbox,
@@ -8689,7 +8701,7 @@ var DataList2 = ({
                   "aria-label": getRowSelectionLabel(row2, index2, isSelected, sortedRows),
                   onChange: getOnSelectionChangeForId(row2.id),
                   checked: isSelected,
-                  disabled: isDisabled || isSelectionDisabled
+                  disabled: isDisabled2 || isSelectionDisabled
                 }
               )), rowDetails !== void 0 && /* @__PURE__ */ import_react93.default.createElement(DataList.Cell, null, details && /* @__PURE__ */ import_react93.default.createElement(Accordion.Toggle, { panelId: row2.id.toString(), onChange: onGroupToggled })));
             },
@@ -8938,13 +8950,13 @@ DataTable.Skeleton = DataListSkeleton;
 var import_react103 = __toESM(require("react"));
 var import_react_aria_components13 = require("react-aria-components");
 var import_label2 = require("@react-aria/label");
-var import_utils27 = require("@react-aria/utils");
+var import_utils25 = require("@react-aria/utils");
 var import_lodash_es33 = require("lodash-es");
 
 // src/molecules/TimeField/TimeField.tsx
 var import_react98 = __toESM(require("react"));
 var import_label = require("@react-aria/label");
-var import_utils25 = require("@react-aria/utils");
+var import_utils23 = require("@react-aria/utils");
 var import_lodash_es32 = require("lodash-es");
 
 // src/atoms/DateField/DateField.tsx
@@ -8975,7 +8987,7 @@ var TimeField = ({ disabled, valid, ...props }) => {
 // src/molecules/TimeField/TimeField.tsx
 function TimeField2(props) {
   const { labelProps, fieldProps } = (0, import_label.useLabel)({ label: props.labelText });
-  const errorMessageId = (0, import_utils25.useId)();
+  const errorMessageId = (0, import_utils23.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
   const baseProps = (0, import_lodash_es32.omit)(props, Object.keys(labelControlProps));
@@ -11649,7 +11661,7 @@ var CalendarTimeField = ({ granularity, labelText = "Time", ...props }) => {
 var DatePickerCalendarPropsContext = import_react103.default.createContext(null);
 var DatePickerCalendar = (props) => {
   const ctx = import_react103.default.useContext(DatePickerCalendarPropsContext);
-  const { variant, granularity, errorMessage, presets = [] } = (0, import_utils27.mergeProps)(ctx, props);
+  const { variant, granularity, errorMessage, presets = [] } = (0, import_utils25.mergeProps)(ctx, props);
   const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
   return /* @__PURE__ */ import_react103.default.createElement(Popover, { offset: 0 }, /* @__PURE__ */ import_react103.default.createElement(Dialog, { className: dialog() }, presets.length > 0 && /* @__PURE__ */ import_react103.default.createElement(Presets, null, presets.map((props2) => /* @__PURE__ */ import_react103.default.createElement(Preset, { key: props2.value.toString(), ...props2 }))), /* @__PURE__ */ import_react103.default.createElement(Spacing, { gap: "3", className: "p-5" }, /* @__PURE__ */ import_react103.default.createElement(Calendar, { className: calendar() }), variant === "datetime" && /* @__PURE__ */ import_react103.default.createElement(CalendarTimeField, { granularity }), errorMessage && /* @__PURE__ */ import_react103.default.createElement(import_react_aria_components13.Text, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
 };
@@ -11688,7 +11700,7 @@ var DateTimePickerBase = createDatePickerBase("datetime");
 var createDatePicker = (variant) => {
   const datePicker = (props) => {
     const { labelProps, fieldProps } = (0, import_label2.useLabel)({ "label": props.labelText, "aria-label": props["aria-label"] });
-    const errorMessageId = (0, import_utils27.useId)();
+    const errorMessageId = (0, import_utils25.useId)();
     const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": props.helperText ?? props.error } : {};
     const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
     const baseProps = (0, import_lodash_es33.omit)(props, Object.keys(labelControlProps));
@@ -11707,7 +11719,7 @@ var DateTimePicker = createDatePicker("datetime");
 var import_react105 = __toESM(require("react"));
 var import_react_aria_components15 = require("react-aria-components");
 var import_label3 = require("@react-aria/label");
-var import_utils29 = require("@react-aria/utils");
+var import_utils27 = require("@react-aria/utils");
 var import_lodash_es34 = require("lodash-es");
 
 // src/atoms/DatePicker/RangeCalendar.tsx
@@ -11794,7 +11806,7 @@ var RangeCalendarTimeField = ({ granularity, part, ...props }) => {
 var DateRangePickerCalendarPropsContext = import_react105.default.createContext(null);
 var DateRangePickerCalendar = (props) => {
   const ctx = import_react105.default.useContext(DateRangePickerCalendarPropsContext);
-  const { variant, granularity, errorMessage, presets = [] } = (0, import_utils29.mergeProps)(ctx, props);
+  const { variant, granularity, errorMessage, presets = [] } = (0, import_utils27.mergeProps)(ctx, props);
   const { dialog, calendar, errorMessage: errorMessageStyle } = datePickerCalendarStyles();
   return /* @__PURE__ */ import_react105.default.createElement(Popover, { offset: 0 }, /* @__PURE__ */ import_react105.default.createElement(Dialog, { className: dialog() }, presets.length > 0 && /* @__PURE__ */ import_react105.default.createElement(Presets, null, presets.map((props2) => /* @__PURE__ */ import_react105.default.createElement(RangePreset, { key: `${props2.value.start.toString()}-${props2.value.end.toString()}`, ...props2 }))), /* @__PURE__ */ import_react105.default.createElement(Spacing, { gap: "3", className: "p-5" }, /* @__PURE__ */ import_react105.default.createElement(RangeCalendar, { className: calendar() }), variant === "datetime" && /* @__PURE__ */ import_react105.default.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ import_react105.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ import_react105.default.createElement(RangeCalendarTimeField, { granularity, part: "start" })), /* @__PURE__ */ import_react105.default.createElement("div", { className: "flex-1" }, /* @__PURE__ */ import_react105.default.createElement(RangeCalendarTimeField, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ import_react105.default.createElement(import_react_aria_components15.Text, { slot: "errorMessage", className: errorMessageStyle() }, errorMessage))));
 };
@@ -11833,7 +11845,7 @@ var DateTimeRangePickerBase = createDateRangePickerBase("datetime");
 var createDateRangePicker = (variant) => {
   const dateRangePicker = (props) => {
     const { labelProps, fieldProps } = (0, import_label3.useLabel)({ "label": props.labelText, "aria-label": props["aria-label"] });
-    const errorMessageId = (0, import_utils29.useId)();
+    const errorMessageId = (0, import_utils27.useId)();
     const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId, "errorMessage": props.helperText ?? props.error } : {};
     const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
     const baseProps = (0, import_lodash_es34.omit)(props, Object.keys(labelControlProps));
@@ -11852,7 +11864,7 @@ var DateTimeRangePicker = createDateRangePicker("datetime");
 var import_react106 = __toESM(require("react"));
 var import_dialog = require("@react-aria/dialog");
 var import_overlays6 = require("@react-aria/overlays");
-var import_utils30 = require("@react-aria/utils");
+var import_utils28 = require("@react-aria/utils");
 var import_overlays7 = require("@react-stately/overlays");
 var import_lodash_es35 = require("lodash-es");
 var Dialog2 = (props) => {
@@ -11867,7 +11879,7 @@ var Dialog2 = (props) => {
   if (!state.isOpen) {
     return null;
   }
-  return /* @__PURE__ */ import_react106.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react106.default.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ import_react106.default.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ import_react106.default.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, ...modalProps }, /* @__PURE__ */ import_react106.default.createElement(DialogWrapper, { ...props }))));
+  return /* @__PURE__ */ import_react106.default.createElement(import_overlays6.Overlay, null, /* @__PURE__ */ import_react106.default.createElement(Modal, { className: "Aquarium-Dialog", open: true }, /* @__PURE__ */ import_react106.default.createElement(Modal.BackDrop, { ...underlayProps }), /* @__PURE__ */ import_react106.default.createElement(Modal.Dialog, { ref, size: "sm", isResponsive: false, className: "sm:max-w-[520px]", ...modalProps }, /* @__PURE__ */ import_react106.default.createElement(DialogWrapper, { ...props }))));
 };
 var DialogWrapper = ({
   title,
@@ -11877,8 +11889,8 @@ var DialogWrapper = ({
   secondaryAction
 }) => {
   const ref = import_react106.default.useRef(null);
-  const labelledBy = (0, import_utils30.useId)();
-  const describedBy = (0, import_utils30.useId)();
+  const labelledBy = (0, import_utils28.useId)();
+  const describedBy = (0, import_utils28.useId)();
   const { dialogProps } = (0, import_dialog.useDialog)(
     {
       "role": "alertdialog",
@@ -11887,7 +11899,7 @@ var DialogWrapper = ({
     },
     ref
   );
-  return /* @__PURE__ */ import_react106.default.createElement("div", { ref, ...dialogProps, className: "outline-none" }, /* @__PURE__ */ import_react106.default.createElement(Modal.Header, { className: "icon-stroke-2" }, /* @__PURE__ */ import_react106.default.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }), /* @__PURE__ */ import_react106.default.createElement(Modal.Title, { id: labelledBy, variant: "large", color: DIALOG_ICONS_AND_COLORS[type].color }, title)), /* @__PURE__ */ import_react106.default.createElement(Modal.Body, { id: describedBy }, /* @__PURE__ */ import_react106.default.createElement(Typography2.Default, null, children)), /* @__PURE__ */ import_react106.default.createElement(Modal.Footer, null, /* @__PURE__ */ import_react106.default.createElement(Modal.Actions, { className: "gap-4" }, secondaryAction && /* @__PURE__ */ import_react106.default.createElement(Button2.Ghost, { key: secondaryAction.text, ...(0, import_lodash_es35.omit)(secondaryAction, "text") }, secondaryAction.text), /* @__PURE__ */ import_react106.default.createElement(Button2.Secondary, { key: primaryAction.text, ...(0, import_lodash_es35.omit)(primaryAction, "text") }, primaryAction.text))));
+  return /* @__PURE__ */ import_react106.default.createElement("div", { ref, ...dialogProps, className: "outline-none" }, /* @__PURE__ */ import_react106.default.createElement(Modal.Header, { className: "icon-stroke-2 px-6 pr-6" }, /* @__PURE__ */ import_react106.default.createElement(Icon, { icon: DIALOG_ICONS_AND_COLORS[type].icon, color: DIALOG_ICONS_AND_COLORS[type].color, fontSize: 20 }), /* @__PURE__ */ import_react106.default.createElement(Modal.Title, { id: labelledBy, variant: "large", color: "default" }, title)), /* @__PURE__ */ import_react106.default.createElement(Modal.Body, { id: describedBy, contentClassName: "px-6" }, /* @__PURE__ */ import_react106.default.createElement(Typography2.Default, null, children)), /* @__PURE__ */ import_react106.default.createElement(Modal.Footer, { className: "px-6" }, /* @__PURE__ */ import_react106.default.createElement(Modal.Actions, { className: "gap-4" }, secondaryAction && /* @__PURE__ */ import_react106.default.createElement(Button2.Ghost, { key: secondaryAction.text, ...(0, import_lodash_es35.omit)(secondaryAction, "text") }, secondaryAction.text), /* @__PURE__ */ import_react106.default.createElement(Button2.Secondary, { key: primaryAction.text, ...(0, import_lodash_es35.omit)(primaryAction, "text") }, primaryAction.text))));
 };
 
 // src/molecules/Drawer/Drawer.tsx
@@ -12260,7 +12272,7 @@ var import_clsx30 = require("clsx");
 // src/molecules/Popover/Popover.tsx
 var import_react110 = __toESM(require("react"));
 var import_react_aria_components18 = require("react-aria-components");
-var import_utils32 = require("@react-aria/utils");
+var import_utils30 = require("@react-aria/utils");
 var PopoverPropsContext = (0, import_react110.createContext)({});
 var Popover2 = ({ children, onOpenChange: _onOpenChange, onClose, onOpen, ...props }) => {
   const onOpenChange = (isOpen) => {
@@ -12285,7 +12297,7 @@ var CloseToggle = ({ children }) => {
   const ctx = import_react110.default.useContext(import_react_aria_components18.OverlayTriggerStateContext);
   const onClick = ctx?.close;
   const child = import_react110.default.Children.only(children);
-  return import_react110.default.cloneElement(child, { ...(0, import_utils32.mergeProps)(child.props, { onClick }) });
+  return import_react110.default.cloneElement(child, { ...(0, import_utils30.mergeProps)(child.props, { onClick }) });
 };
 CloseToggle.displayName = "Popover.CloseToggle";
 Popover2.CloseToggle = CloseToggle;
@@ -12711,7 +12723,7 @@ var ModalTabs = createTabsComponent(
 
 // src/molecules/MultiInput/MultiInput.tsx
 var import_react119 = __toESM(require("react"));
-var import_utils34 = require("@react-aria/utils");
+var import_utils32 = require("@react-aria/utils");
 var import_lodash_es39 = require("lodash-es");
 
 // src/molecules/MultiInput/InputChip.tsx
@@ -12921,9 +12933,9 @@ var MultiInput = (props) => {
   (0, import_react119.useEffect)(() => {
     setValue(props.value ?? []);
   }, [JSON.stringify(props.value)]);
-  const defaultId = (0, import_utils34.useId)();
+  const defaultId = (0, import_utils32.useId)();
   const id = props.id ?? props.name ?? defaultId;
-  const errorMessageId = (0, import_utils34.useId)();
+  const errorMessageId = (0, import_utils32.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const baseProps = (0, import_lodash_es39.omit)(props, Object.keys(labelControlProps));
@@ -12962,7 +12974,7 @@ MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 // src/molecules/MultiSelect/MultiSelect.tsx
 var import_react120 = __toESM(require("react"));
 var import_overlays8 = require("@react-aria/overlays");
-var import_utils35 = require("@react-aria/utils");
+var import_utils33 = require("@react-aria/utils");
 var import_downshift3 = require("downshift");
 var import_lodash_es40 = require("lodash-es");
 var import_match_sorter3 = require("match-sorter");
@@ -13163,9 +13175,9 @@ var MultiSelect = ({
   emptyState,
   ...props
 }) => {
-  const defaultId = (0, import_utils35.useId)();
+  const defaultId = (0, import_utils33.useId)();
   const id = props.id ?? defaultId;
-  const errorMessageId = (0, import_utils35.useId)();
+  const errorMessageId = (0, import_utils33.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const baseProps = (0, import_lodash_es40.omit)(props, Object.keys(labelControlProps));
@@ -13198,7 +13210,7 @@ MultiSelect.Skeleton.displayName = "MultiSelect.Skeleton";
 
 // src/molecules/NativeSelect/NativeSelect.tsx
 var import_react121 = __toESM(require("react"));
-var import_utils37 = require("@react-aria/utils");
+var import_utils35 = require("@react-aria/utils");
 var import_clsx34 = require("clsx");
 var import_lodash_es41 = require("lodash-es");
 var NativeSelectBase = import_react121.default.forwardRef(
@@ -13246,9 +13258,9 @@ var NativeSelectBase = import_react121.default.forwardRef(
 NativeSelectBase.Skeleton = () => /* @__PURE__ */ import_react121.default.createElement(Skeleton, { height: 38 });
 var NativeSelect = import_react121.default.forwardRef(
   ({ readOnly, ...props }, ref) => {
-    const defaultId = (0, import_utils37.useId)();
+    const defaultId = (0, import_utils35.useId)();
     const id = props.id ?? defaultId;
-    const errorMessageId = (0, import_utils37.useId)();
+    const errorMessageId = (0, import_utils35.useId)();
     const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
     const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
     const baseProps = (0, import_lodash_es41.omit)(props, Object.keys(labelControlProps));
@@ -13648,7 +13660,7 @@ RadioButton2.Skeleton.displayName = "RadioButton.Skeleton";
 
 // src/molecules/RadioButtonGroup/RadioButtonGroup.tsx
 var import_react132 = __toESM(require("react"));
-var import_utils38 = require("@react-aria/utils");
+var import_utils36 = require("@react-aria/utils");
 var import_clsx37 = require("clsx");
 var isRadioButton = (c) => {
   return import_react132.default.isValidElement(c) && c.type === RadioButton2;
@@ -13664,7 +13676,7 @@ var RadioButtonGroup = ({
   ...props
 }) => {
   const [value, setValue] = import_react132.default.useState(_value ?? defaultValue ?? "");
-  const errorMessageId = (0, import_utils38.useId)();
+  const errorMessageId = (0, import_utils36.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   if (_value !== void 0 && _value !== value) {
@@ -13710,7 +13722,7 @@ RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 // src/molecules/Section/Section.tsx
 var import_react137 = __toESM(require("react"));
 var import_button4 = require("@react-aria/button");
-var import_utils39 = require("@react-aria/utils");
+var import_utils37 = require("@react-aria/utils");
 var import_web6 = require("@react-spring/web");
 var import_clsx38 = require("clsx");
 var import_lodash_es46 = require("lodash-es");
@@ -13909,9 +13921,9 @@ var Section4 = (props) => {
     onStart: () => isMounted.current && setResting(false),
     onRest: () => isMounted.current && setResting(true)
   });
-  const toggleId = (0, import_utils39.useId)();
-  const regionId = (0, import_utils39.useId)();
-  const titleId = (0, import_utils39.useId)();
+  const toggleId = (0, import_utils37.useId)();
+  const regionId = (0, import_utils37.useId)();
+  const titleId = (0, import_utils37.useId)();
   const hasTabs = isComponentType(children, Tabs);
   const { buttonProps } = (0, import_button4.useButton)(
     { "elementType": "div", "onPress": handleTitleClick, "aria-expanded": !isCollapsed, "aria-controls": regionId },
@@ -14051,30 +14063,84 @@ var import_react139 = __toESM(require("react"));
 var import_tailwind_variants34 = require("tailwind-variants");
 var connectorStyles = (0, import_tailwind_variants34.tv)({
   slots: {
-    container: "absolute w-full -left-1/2",
-    connector: "w-full"
+    container: "absolute",
+    connector: ""
   },
   variants: {
     completed: {
       true: { connector: "bg-success-graphic" },
-      false: { connector: "bg-intense" }
+      false: { connector: "bg-muted" }
     },
-    dense: {
-      true: {
-        container: "top-[3px] px-[14px]",
-        connector: "h-[3px]"
+    direction: {
+      horizontal: {
+        container: "w-full -left-1/2"
       },
-      false: {
-        container: "top-[14px] px-[20px]",
-        connector: "h-[2px]"
+      vertical: {
+        container: "h-full -top-2/3"
       }
+    },
+    dense: {
+      true: {},
+      false: {}
     }
-  }
+  },
+  compoundSlots: [
+    // Horizontal layout - horizontal connectors between side-by-side steps
+    {
+      slots: ["container"],
+      direction: "horizontal",
+      dense: true,
+      class: "top-[3px] px-[14px]"
+    },
+    {
+      slots: ["container"],
+      direction: "horizontal",
+      dense: false,
+      class: "top-[14px] px-[20px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "horizontal",
+      dense: true,
+      class: "w-full h-[3px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "horizontal",
+      dense: false,
+      class: "w-full h-[2px]"
+    },
+    // Vertical layout - vertical connectors between stacked steps
+    {
+      slots: ["container"],
+      direction: "vertical",
+      dense: true,
+      class: "left-[3px] pt-[4px] pb-[24px]"
+    },
+    {
+      slots: ["container"],
+      direction: "vertical",
+      dense: false,
+      class: "left-[16px] pt-[12px] pb-[30px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "vertical",
+      dense: true,
+      class: "h-full w-[3px]"
+    },
+    {
+      slots: ["connector"],
+      direction: "vertical",
+      dense: false,
+      class: "h-full w-[2px]"
+    }
+  ]
 });
 var stepStyles = (0, import_tailwind_variants34.tv)({
   slots: {
-    step: "flex flex-col items-center relative text-center",
-    indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center mx-2 mb-3"
+    step: "flex relative text-center",
+    indicator: "Aquarium-Stepper-Indicator rounded-full flex justify-center items-center"
   },
   variants: {
     state: {
@@ -14082,6 +14148,16 @@ var stepStyles = (0, import_tailwind_variants34.tv)({
       completed: { step: "text-intense" },
       inactive: { step: "text-inactive" }
     },
+    direction: {
+      vertical: {
+        step: "flex-row items-center pb-8",
+        indicator: "mr-l1"
+      },
+      horizontal: {
+        step: "flex-col items-center",
+        indicator: "mx-2 mb-3"
+      }
+    },
     dense: {
       true: { indicator: "h-[8px] w-[8px]" },
       false: { indicator: "h-[32px] w-[32px]" }
@@ -14099,7 +14175,7 @@ var stepStyles = (0, import_tailwind_variants34.tv)({
       slots: ["indicator"],
       dense: false,
       state: "inactive",
-      class: "border-2 border-default"
+      class: "border-2 border-muted"
     },
     {
       slots: ["indicator"],
@@ -14132,22 +14208,42 @@ var Stepper = ({ className, ...rest }) => /* @__PURE__ */ import_react139.defaul
 var ConnectorContainer = ({
   className,
   dense = false,
+  direction = "horizontal",
   ...rest
 }) => {
-  const { container: container2 } = connectorStyles({ dense });
+  const { container: container2 } = connectorStyles({ dense, direction });
   return /* @__PURE__ */ import_react139.default.createElement("div", { ...rest, className: container2({ className }) });
 };
-var Connector = ({ children, className, completed = false, dense = false, ...rest }) => {
-  const { connector } = connectorStyles({ completed, dense });
+var Connector = ({
+  children,
+  className,
+  completed = false,
+  dense = false,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { connector } = connectorStyles({ completed, dense, direction });
   return /* @__PURE__ */ import_react139.default.createElement("div", { ...rest, className: connector({ className }) });
 };
-var Step = ({ className, state, ...rest }) => {
-  const { step } = stepStyles({ state });
+var Step = ({
+  className,
+  state,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { step } = stepStyles({ state, direction });
   return /* @__PURE__ */ import_react139.default.createElement("div", { ...rest, className: step({ className }) });
 };
-var Indicator = ({ children, className, state, dense = false, ...rest }) => {
-  const { indicator } = stepStyles({ state, dense });
-  return /* @__PURE__ */ import_react139.default.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ import_react139.default.createElement(InlineIcon, { icon: tick_default }) : dense ? null : children);
+var Indicator = ({
+  children,
+  className,
+  state,
+  dense = false,
+  direction = "horizontal",
+  ...rest
+}) => {
+  const { indicator } = stepStyles({ state, dense, direction });
+  return /* @__PURE__ */ import_react139.default.createElement("div", { ...rest, className: indicator({ className }) }, state === "completed" ? /* @__PURE__ */ import_react139.default.createElement(InlineIcon, { icon: tick_default, className: dense ? "scale-125" : void 0 }) : dense ? null : children);
 };
 Step.Indicator = Indicator;
 Stepper.Step = Step;
@@ -14155,14 +14251,37 @@ ConnectorContainer.Connector = Connector;
 Stepper.ConnectorContainer = ConnectorContainer;
 
 // src/molecules/Stepper/Stepper.tsx
-var Stepper2 = ({ children, activeIndex, dense }) => {
+var Stepper2 = ({
+  children,
+  activeIndex,
+  dense,
+  direction = "horizontal"
+}) => {
   const steps = import_react140.default.Children.count(children);
-  return /* @__PURE__ */ import_react140.default.createElement(Stepper, { role: "list", className: "Aquarium-Stepper" }, /* @__PURE__ */ import_react140.default.createElement(Template, { columns: steps }, import_react140.default.Children.map(children, (child, index) => {
+  return /* @__PURE__ */ import_react140.default.createElement(Stepper, { role: "list", className: "Aquarium-Stepper" }, /* @__PURE__ */ import_react140.default.createElement(Template, { columns: direction === "horizontal" ? steps : 1 }, import_react140.default.Children.map(children, (child, index) => {
     if (!isComponentType(child, Step2)) {
       throw new Error("<Stepper> can only have <Stepper.Step> components as children");
     } else {
       const state = index > activeIndex ? "inactive" : index === activeIndex ? "active" : "completed";
-      return /* @__PURE__ */ import_react140.default.createElement(Stepper.Step, { state, "aria-current": state === "active" ? "step" : false, role: "listitem" }, index > 0 && index <= steps && /* @__PURE__ */ import_react140.default.createElement(Stepper.ConnectorContainer, { dense }, /* @__PURE__ */ import_react140.default.createElement(Stepper.ConnectorContainer.Connector, { completed: state === "completed" || state === "active" })), /* @__PURE__ */ import_react140.default.createElement(Stepper.Step.Indicator, { state, dense }, index + 1), child.props.children);
+      return /* @__PURE__ */ import_react140.default.createElement(
+        Stepper.Step,
+        {
+          state,
+          "aria-current": state === "active" ? "step" : false,
+          direction,
+          role: "listitem"
+        },
+        index > 0 && index <= steps && /* @__PURE__ */ import_react140.default.createElement(Stepper.ConnectorContainer, { dense, direction }, /* @__PURE__ */ import_react140.default.createElement(
+          Stepper.ConnectorContainer.Connector,
+          {
+            completed: state === "completed" || state === "active",
+            dense,
+            direction
+          }
+        )),
+        /* @__PURE__ */ import_react140.default.createElement(Stepper.Step.Indicator, { state, dense, direction }, index + 1),
+        child.props.children
+      );
     }
   })));
 };
@@ -14173,7 +14292,7 @@ Stepper2.Step = Step2;
 
 // src/molecules/SwitchGroup/SwitchGroup.tsx
 var import_react141 = __toESM(require("react"));
-var import_utils42 = require("@react-aria/utils");
+var import_utils40 = require("@react-aria/utils");
 var SwitchGroup = ({
   value,
   defaultValue,
@@ -14187,7 +14306,7 @@ var SwitchGroup = ({
   if (value !== void 0 && value !== selectedItems) {
     setSelectedItems(value);
   }
-  const errorMessageId = (0, import_utils42.useId)();
+  const errorMessageId = (0, import_utils40.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelControlProps = getLabelControlProps(props);
   const handleChange = (e) => {
@@ -14220,7 +14339,7 @@ SwitchGroup.Skeleton.displayName = "SwitchGroup.Skeleton";
 
 // src/molecules/Textarea/Textarea.tsx
 var import_react142 = __toESM(require("react"));
-var import_utils44 = require("@react-aria/utils");
+var import_utils42 = require("@react-aria/utils");
 var import_clsx39 = require("clsx");
 var import_lodash_es47 = require("lodash-es");
 var TextareaBase = import_react142.default.forwardRef(
@@ -14237,9 +14356,9 @@ var TextareaBase = import_react142.default.forwardRef(
 TextareaBase.Skeleton = () => /* @__PURE__ */ import_react142.default.createElement(Skeleton, { height: 58 });
 var Textarea = import_react142.default.forwardRef((props, ref) => {
   const [value, setValue] = (0, import_react142.useState)(props.value ?? props.defaultValue ?? "");
-  const defaultId = (0, import_utils44.useId)();
+  const defaultId = (0, import_utils42.useId)();
   const id = props.id ?? defaultId;
-  const errorMessageId = (0, import_utils44.useId)();
+  const errorMessageId = (0, import_utils42.useId)();
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const { "data-testid": dataTestId, ...labelControlProps } = getLabelControlProps(props);
   const baseProps = (0, import_lodash_es47.omit)(props, Object.keys(labelControlProps));