@aivenio/aquarium 4.5.0 → 4.5.2

package/dist/system.cjs

@@ -7356,18 +7356,15 @@ var Transition = ({ children }) => {
     keys: (item) => item.key || "",
     config: { tension: 125, friction: 20, precision: 0.1 }
   });
-  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, transitions((style, item) => (
-    // @ts-expect-error React spring does not yet support R19 types
-    /* @__PURE__ */ import_react14.default.createElement(import_web.animated.div, { style }, /* @__PURE__ */ import_react14.default.createElement(
-      "div",
-      {
-        ref: (ref) => {
-          ref && refMap.set(item, ref);
-        }
-      },
-      item
-    ))
-  )));
+  return /* @__PURE__ */ import_react14.default.createElement(import_react14.default.Fragment, null, transitions((style, item) => /* @__PURE__ */ import_react14.default.createElement(import_web.animated.div, { style }, /* @__PURE__ */ import_react14.default.createElement(
+    "div",
+    {
+      ref: (ref) => {
+        ref && refMap.set(item, ref);
+      }
+    },
+    item
+  ))));
 };
 
 // src/atoms/Toast/Toast.tsx
@@ -7846,28 +7843,25 @@ var AccordionToggle = ({ panelId, onChange, ...rest }) => {
     }
   });
   const { buttonProps } = (0, import_button.useButton)({ elementType: "div", onPress: handleClick }, ref);
-  return (
-    // @ts-expect-error React spring does not yet support R19 types
-    /* @__PURE__ */ import_react24.default.createElement(
-      import_web3.animated.div,
-      {
-        ...rest,
-        ...{
-          ...buttonProps,
-          onPointerDown: (e) => {
-            e.preventDefault();
-            handleClick();
-          }
-        },
-        ref,
-        "aria-label": "accordion toggle",
-        "aria-expanded": openPanelId === id,
-        "aria-controls": `${id}-content`,
-        style: { transform },
-        className: tw("text-default focus:outline-none focusable")
+  return /* @__PURE__ */ import_react24.default.createElement(
+    import_web3.animated.div,
+    {
+      ...rest,
+      ...{
+        ...buttonProps,
+        onPointerDown: (e) => {
+          e.preventDefault();
+          handleClick();
+        }
       },
-      /* @__PURE__ */ import_react24.default.createElement(import_react25.Icon, { icon: import_caretUp.default, height: 22, width: 22 })
-    )
+      ref,
+      "aria-label": "accordion toggle",
+      "aria-expanded": openPanelId === id,
+      "aria-controls": `${id}-content`,
+      style: { transform },
+      className: tw("text-default focus:outline-none focusable")
+    },
+    /* @__PURE__ */ import_react24.default.createElement(import_react25.Icon, { icon: import_caretUp.default, height: 22, width: 22 })
   );
 };
 var AccordionPanel = ({ children, panelId, ...rest }) => {
@@ -7883,20 +7877,17 @@ var AccordionPanel = ({ children, panelId, ...rest }) => {
       duration: 150
     }
   });
-  return (
-    // @ts-expect-error React spring does not yet support R19 types
-    /* @__PURE__ */ import_react24.default.createElement(
-      import_web3.animated.div,
-      {
-        role: "region",
-        ...rest,
-        id: `${id}-content`,
-        "aria-labelledby": `${id}-summary`,
-        "aria-hidden": !isOpen ? "true" : void 0,
-        style
-      },
-      /* @__PURE__ */ import_react24.default.createElement("div", { ref }, children)
-    )
+  return /* @__PURE__ */ import_react24.default.createElement(
+    import_web3.animated.div,
+    {
+      role: "region",
+      ...rest,
+      id: `${id}-content`,
+      "aria-labelledby": `${id}-summary`,
+      "aria-hidden": !isOpen ? "true" : void 0,
+      style
+    },
+    /* @__PURE__ */ import_react24.default.createElement("div", { ref }, children)
   );
 };
 var AccordionUnanimatedPanel = ({ children, panelId }) => {
@@ -11011,24 +11002,51 @@ function useStickyStyles(scrollProgress, axis, { borderColor, boxShadowColor })
 }
 function useScrollProgress({
   containerRef,
-  skip
+  skip,
+  throttleMs = 50
 }) {
   const [scrollState, setScrollState] = (0, import_react73.useState)(null);
-  const throttledSetScrollState = (0, import_lodash_es24.throttle)(({ scrollX, scrollXProgress }) => {
-    setScrollState({ scrollX, scrollXProgress });
-  }, 50);
-  (0, import_web4.useScroll)({
-    container: containerRef,
-    onChange: ({ value: { scrollX, scrollXProgress } }) => {
-      throttledSetScrollState({ scrollX, scrollXProgress });
-    },
-    default: {
-      immediate: true
-    },
-    pause: skip
-    // This prevents tracking of scrollXProgress when there are no sticky columns
-  });
-  const isContainerUnscrollable = scrollState && scrollState.scrollX === 0 && scrollState.scrollXProgress === 1;
+  const currentStateRef = (0, import_react73.useRef)(null);
+  const throttledSetScrollState = (0, import_react73.useMemo)(
+    () => (0, import_lodash_es24.throttle)((value) => {
+      const currentState = currentStateRef.current;
+      if (currentState?.scrollX === value.scrollX && currentState.scrollXProgress === value.scrollXProgress) {
+        return;
+      }
+      currentStateRef.current = value;
+      setScrollState(value);
+    }, throttleMs),
+    [throttleMs]
+  );
+  const handleScroll = (0, import_react73.useCallback)(() => {
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+    const scrollX = element.scrollLeft;
+    const maxScrollX = element.scrollWidth - element.clientWidth;
+    const scrollXProgress = maxScrollX > 0 ? scrollX / maxScrollX : 1;
+    throttledSetScrollState({ scrollX, scrollXProgress });
+  }, [containerRef, throttledSetScrollState]);
+  (0, import_react73.useLayoutEffect)(() => {
+    if (skip) {
+      return;
+    }
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+    element.addEventListener("scroll", handleScroll, { passive: true });
+    const resizeObserver = new ResizeObserver(handleScroll);
+    resizeObserver.observe(element);
+    handleScroll();
+    return () => {
+      element.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+      throttledSetScrollState.cancel();
+    };
+  }, [containerRef, handleScroll, throttledSetScrollState, skip]);
+  const isContainerUnscrollable = scrollState?.scrollX === 0 && scrollState.scrollXProgress === 1;
   if (!scrollState || isContainerUnscrollable) {
     return null;
   }
@@ -15221,8 +15239,8 @@ var modalStyles = (0, import_tailwind_variants13.tv)({
     titleContainer: "flex flex-col grow",
     title: "",
     closeButtonContainer: "absolute top-[24px] right-[28px]",
-    body: "grow overflow-y-auto text-default",
-    bodyContent: "px-7",
+    body: "grow overflow-y-auto text-default flex flex-col",
+    bodyContent: "px-7 grow",
     footer: "px-7 py-6",
     actions: "flex gap-4 justify-end"
   },
@@ -16914,7 +16932,7 @@ var import_lodash_es43 = require("lodash-es");
 // src/atoms/PageHeader/PageHeader.tsx
 var import_react117 = __toESM(require("react"));
 var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-row flex-wrap gap-4 pb-6"), className), ...rest }, children);
-PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-col grow gap-0"), className), ...rest }, children);
+PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-col flex-1 basis-[--aquarium-screens-xs]"), className), ...rest }, children);
 PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-col justify-center gap-2"), className), ...rest }, children);
 PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ import_react117.default.createElement(
   Typography2,
@@ -16928,7 +16946,7 @@ PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__
 );
 PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ import_react117.default.createElement(Typography2.Small, { ...rest, color: "default" }, children);
 PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex gap-3"), className), ...rest }, children);
-PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-row gap-4 self-start"), className), ...rest }, children);
+PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ import_react117.default.createElement("div", { className: classNames(tw("flex flex-row-reverse sm:flex-row gap-4 self-start"), className), ...rest }, children);
 
 // src/molecules/PageHeader/PageHeader.tsx
 var import_more5 = __toESM(require_more());
@@ -17413,8 +17431,7 @@ var Section3 = (props) => {
       id: toggleId,
       collapsible: _collapsible
     },
-    _collapsible && // @ts-expect-error React spring does not yet support R19 types
-    /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { style: { transform } }, /* @__PURE__ */ import_react130.default.createElement(Section2.Toggle, null)),
+    _collapsible && /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { style: { transform } }, /* @__PURE__ */ import_react130.default.createElement(Section2.Toggle, null)),
     /* @__PURE__ */ import_react130.default.createElement(Section2.Title, { id: titleId }, /* @__PURE__ */ import_react130.default.createElement(LineClamp2, { lines: 1 }, title), props.tag && /* @__PURE__ */ import_react130.default.createElement(TagLabel, { ...props.tag }), props.badge && /* @__PURE__ */ import_react130.default.createElement(Chip2, { text: props.badge }), props.chip && /* @__PURE__ */ import_react130.default.createElement(StatusChip, { ...props.chip })),
     subtitle && /* @__PURE__ */ import_react130.default.createElement(Section2.Subtitle, { className: tw("row-start-2", { "col-start-2": _collapsible }) }, /* @__PURE__ */ import_react130.default.createElement(LineClamp2, { lines: 1 }, subtitle))
   ), !isCollapsed && /* @__PURE__ */ import_react130.default.createElement(Section2.Actions, null, props.switch && /* @__PURE__ */ import_react130.default.createElement(Switch2, { ...props.switch }), menu && /* @__PURE__ */ import_react130.default.createElement(Box.Flex, { alignItems: "center" }, /* @__PURE__ */ import_react130.default.createElement(
@@ -17426,8 +17443,7 @@ var Section3 = (props) => {
     },
     /* @__PURE__ */ import_react130.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react130.default.createElement(Button2.Icon, { "aria-label": menuAriaLabel, icon: import_more6.default })),
     menu
-  )), props.actions && (0, import_lodash_es46.castArray)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.select && /* @__PURE__ */ import_react130.default.createElement(SelectBase, { "aria-labelledby": titleId, ...props.select }))), !hasTabs && !isCollapsed && // @ts-expect-error React spring does not yet support R19 types
-  /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { className: tw(`h-[1px]`), style: { backgroundColor: "var(--aquarium-border-color-muted)" } })), /* @__PURE__ */ import_react130.default.createElement(
+  )), props.actions && (0, import_lodash_es46.castArray)(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.select && /* @__PURE__ */ import_react130.default.createElement(SelectBase, { "aria-labelledby": titleId, ...props.select }))), !hasTabs && !isCollapsed && /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { className: tw(`h-[1px]`), style: { backgroundColor: "var(--aquarium-border-color-muted)" } })), /* @__PURE__ */ import_react130.default.createElement(
     import_web6.animated.div,
     {
       id: regionId,

package/dist/system.mjs

@@ -7208,18 +7208,15 @@ var Transition = ({ children }) => {
     keys: (item) => item.key || "",
     config: { tension: 125, friction: 20, precision: 0.1 }
   });
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, transitions((style, item) => (
-    // @ts-expect-error React spring does not yet support R19 types
-    /* @__PURE__ */ React10.createElement(animated.div, { style }, /* @__PURE__ */ React10.createElement(
-      "div",
-      {
-        ref: (ref) => {
-          ref && refMap.set(item, ref);
-        }
-      },
-      item
-    ))
-  )));
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, transitions((style, item) => /* @__PURE__ */ React10.createElement(animated.div, { style }, /* @__PURE__ */ React10.createElement(
+    "div",
+    {
+      ref: (ref) => {
+        ref && refMap.set(item, ref);
+      }
+    },
+    item
+  ))));
 };
 
 // src/atoms/Toast/Toast.tsx
@@ -7698,28 +7695,25 @@ var AccordionToggle = ({ panelId, onChange, ...rest }) => {
     }
   });
   const { buttonProps } = useButton({ elementType: "div", onPress: handleClick }, ref);
-  return (
-    // @ts-expect-error React spring does not yet support R19 types
-    /* @__PURE__ */ React19.createElement(
-      animated3.div,
-      {
-        ...rest,
-        ...{
-          ...buttonProps,
-          onPointerDown: (e) => {
-            e.preventDefault();
-            handleClick();
-          }
-        },
-        ref,
-        "aria-label": "accordion toggle",
-        "aria-expanded": openPanelId === id,
-        "aria-controls": `${id}-content`,
-        style: { transform },
-        className: tw("text-default focus:outline-none focusable")
+  return /* @__PURE__ */ React19.createElement(
+    animated3.div,
+    {
+      ...rest,
+      ...{
+        ...buttonProps,
+        onPointerDown: (e) => {
+          e.preventDefault();
+          handleClick();
+        }
       },
-      /* @__PURE__ */ React19.createElement(Icon3, { icon: import_caretUp.default, height: 22, width: 22 })
-    )
+      ref,
+      "aria-label": "accordion toggle",
+      "aria-expanded": openPanelId === id,
+      "aria-controls": `${id}-content`,
+      style: { transform },
+      className: tw("text-default focus:outline-none focusable")
+    },
+    /* @__PURE__ */ React19.createElement(Icon3, { icon: import_caretUp.default, height: 22, width: 22 })
   );
 };
 var AccordionPanel = ({ children, panelId, ...rest }) => {
@@ -7735,20 +7729,17 @@ var AccordionPanel = ({ children, panelId, ...rest }) => {
       duration: 150
     }
   });
-  return (
-    // @ts-expect-error React spring does not yet support R19 types
-    /* @__PURE__ */ React19.createElement(
-      animated3.div,
-      {
-        role: "region",
-        ...rest,
-        id: `${id}-content`,
-        "aria-labelledby": `${id}-summary`,
-        "aria-hidden": !isOpen ? "true" : void 0,
-        style
-      },
-      /* @__PURE__ */ React19.createElement("div", { ref }, children)
-    )
+  return /* @__PURE__ */ React19.createElement(
+    animated3.div,
+    {
+      role: "region",
+      ...rest,
+      id: `${id}-content`,
+      "aria-labelledby": `${id}-summary`,
+      "aria-hidden": !isOpen ? "true" : void 0,
+      style
+    },
+    /* @__PURE__ */ React19.createElement("div", { ref }, children)
   );
 };
 var AccordionUnanimatedPanel = ({ children, panelId }) => {
@@ -9951,7 +9942,7 @@ var Container2 = ({ maxWidth = "xl", children }) => /* @__PURE__ */ React56.crea
 );
 
 // src/molecules/DataList/DataList.tsx
-import React76, { useRef as useRef8 } from "react";
+import React76, { useRef as useRef9 } from "react";
 import { useControlledState } from "@react-stately/utils";
 import { castArray as castArray2, compact, groupBy as groupBy2, isArray as isArray2, isFunction as isFunction3, noop as noop2 } from "lodash-es";
 
@@ -10819,8 +10810,8 @@ DataList.Toolbar = {
 };
 
 // src/utils/stickyStyles.tsx
-import React65, { useMemo as useMemo3, useState as useState10 } from "react";
-import { animated as animated4, useScroll, useSpring as useSpring3 } from "@react-spring/web";
+import React65, { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo3, useRef as useRef8, useState as useState10 } from "react";
+import { animated as animated4, useSpring as useSpring3 } from "@react-spring/web";
 import { throttle } from "lodash-es";
 function useStickyStyles(scrollProgress, axis, { borderColor, boxShadowColor }) {
   const { startValue, endValue } = useMemo3(() => {
@@ -10867,24 +10858,51 @@ function useStickyStyles(scrollProgress, axis, { borderColor, boxShadowColor })
 }
 function useScrollProgress({
   containerRef,
-  skip
+  skip,
+  throttleMs = 50
 }) {
   const [scrollState, setScrollState] = useState10(null);
-  const throttledSetScrollState = throttle(({ scrollX, scrollXProgress }) => {
-    setScrollState({ scrollX, scrollXProgress });
-  }, 50);
-  useScroll({
-    container: containerRef,
-    onChange: ({ value: { scrollX, scrollXProgress } }) => {
-      throttledSetScrollState({ scrollX, scrollXProgress });
-    },
-    default: {
-      immediate: true
-    },
-    pause: skip
-    // This prevents tracking of scrollXProgress when there are no sticky columns
-  });
-  const isContainerUnscrollable = scrollState && scrollState.scrollX === 0 && scrollState.scrollXProgress === 1;
+  const currentStateRef = useRef8(null);
+  const throttledSetScrollState = useMemo3(
+    () => throttle((value) => {
+      const currentState = currentStateRef.current;
+      if (currentState?.scrollX === value.scrollX && currentState.scrollXProgress === value.scrollXProgress) {
+        return;
+      }
+      currentStateRef.current = value;
+      setScrollState(value);
+    }, throttleMs),
+    [throttleMs]
+  );
+  const handleScroll = useCallback2(() => {
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+    const scrollX = element.scrollLeft;
+    const maxScrollX = element.scrollWidth - element.clientWidth;
+    const scrollXProgress = maxScrollX > 0 ? scrollX / maxScrollX : 1;
+    throttledSetScrollState({ scrollX, scrollXProgress });
+  }, [containerRef, throttledSetScrollState]);
+  useLayoutEffect2(() => {
+    if (skip) {
+      return;
+    }
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+    element.addEventListener("scroll", handleScroll, { passive: true });
+    const resizeObserver = new ResizeObserver(handleScroll);
+    resizeObserver.observe(element);
+    handleScroll();
+    return () => {
+      element.removeEventListener("scroll", handleScroll);
+      resizeObserver.disconnect();
+      throttledSetScrollState.cancel();
+    };
+  }, [containerRef, handleScroll, throttledSetScrollState, skip]);
+  const isContainerUnscrollable = scrollState?.scrollX === 0 && scrollState.scrollXProgress === 1;
   if (!scrollState || isContainerUnscrollable) {
     return null;
   }
@@ -11729,7 +11747,7 @@ var DataList2 = ({
   toolbar,
   ...rest
 }) => {
-  const containerRef = useRef8(null);
+  const containerRef = useRef9(null);
   const hasStickyColumns = columns.some((column) => column.sticky);
   const stickyStyles = useScrollStyles({ containerRef, skip: !hasStickyColumns });
   const [selected, setSelected] = useControlledState(
@@ -11940,7 +11958,7 @@ DataList2.Skeleton = DataListSkeleton;
 DataList2.Toolbar = DataListToolbar;
 
 // src/molecules/DataTable/DataTable.tsx
-import React79, { useRef as useRef9 } from "react";
+import React79, { useRef as useRef10 } from "react";
 import classNames10 from "classnames";
 import { compact as compact2, isFunction as isFunction4 } from "lodash-es";
 
@@ -12000,7 +12018,7 @@ var DataTable = ({
   onPrev,
   ...rest
 }) => {
-  const containerRef = useRef9(null);
+  const containerRef = useRef10(null);
   const hasStickyColumns = columns.some((column) => column.sticky);
   const stickyStyles = useScrollStyles({ containerRef, skip: !hasStickyColumns });
   const defaultSortedColumn = columns.find((c) => c.headerName === defaultSort?.headerName);
@@ -15122,8 +15140,8 @@ var modalStyles = tv13({
     titleContainer: "flex flex-col grow",
     title: "",
     closeButtonContainer: "absolute top-[24px] right-[28px]",
-    body: "grow overflow-y-auto text-default",
-    bodyContent: "px-7",
+    body: "grow overflow-y-auto text-default flex flex-col",
+    bodyContent: "px-7 grow",
     footer: "px-7 py-6",
     actions: "flex gap-4 justify-end"
   },
@@ -15314,7 +15332,7 @@ var ModalTitle = ({ children, ...props }) => {
 };
 
 // src/molecules/Tabs/Tabs.tsx
-import React92, { useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState11 } from "react";
+import React92, { useEffect as useEffect8, useLayoutEffect as useLayoutEffect3, useRef as useRef11, useState as useState11 } from "react";
 import { isNumber as isNumber6, kebabCase } from "lodash-es";
 var import_chevronLeft5 = __toESM(require_chevronLeft());
 var import_chevronRight5 = __toESM(require_chevronRight());
@@ -15431,9 +15449,9 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
     const [selected, setSelected] = useState11(value ?? defaultValue ?? firstTabValue ?? 0);
     const [leftCaret, showLeftCaret] = useState11(false);
     const [rightCaret, showRightCaret] = useState11(false);
-    const parentRef = useRef10(null);
-    const containerRef = useRef10(null);
-    const tabsRef = useRef10(null);
+    const parentRef = useRef11(null);
+    const containerRef = useRef11(null);
+    const tabsRef = useRef11(null);
     const revealSelectedTab = ({ smooth }) => {
       const container = containerRef.current;
       const tabs = tabsRef.current;
@@ -15476,7 +15494,7 @@ var createTabsComponent = (TabComponent, TabItemComponent, displayName, renderCh
       setSelected(value);
       revealSelectedTab({ smooth: value !== selected });
     }, [value, React92.Children.count(children)]);
-    useLayoutEffect2(() => {
+    useLayoutEffect3(() => {
       updateCarets();
       containerRef.current?.addEventListener("scroll", updateCarets);
       window.addEventListener("resize", updateCarets);
@@ -16127,7 +16145,7 @@ var ModalTabs = createTabsComponent(
 );
 
 // src/molecules/MultiInput/MultiInput.tsx
-import React103, { useEffect as useEffect9, useRef as useRef11, useState as useState12 } from "react";
+import React103, { useEffect as useEffect9, useRef as useRef12, useState as useState12 } from "react";
 import { useId as useId13 } from "@react-aria/utils";
 import { castArray as castArray5, identity, omit as omit13 } from "lodash-es";
 
@@ -16208,7 +16226,7 @@ var MultiInputBase = ({
   valid = true,
   ...props
 }) => {
-  const inputRef = useRef11(null);
+  const inputRef = useRef12(null);
   const [items, setItems] = useState12(value ?? defaultValue ?? []);
   const [hasFocus, setFocus] = useState12(false);
   const keyCodes = [delimiter !== "enter" ? " " : null, delimiter !== "space" ? "Enter" : null].filter(identity);
@@ -16377,7 +16395,7 @@ MultiInput.Skeleton = MultiInputSkeleton;
 MultiInput.Skeleton.displayName = "MultiInput.Skeleton";
 
 // src/molecules/MultiSelect/MultiSelect.tsx
-import React104, { useEffect as useEffect10, useRef as useRef12, useState as useState13 } from "react";
+import React104, { useEffect as useEffect10, useRef as useRef13, useState as useState13 } from "react";
 import { ariaHideOutside as ariaHideOutside3 } from "@react-aria/overlays";
 import { useId as useId14 } from "@react-aria/utils";
 import { useCombobox as useCombobox2, useMultipleSelection } from "downshift";
@@ -16407,10 +16425,10 @@ var MultiSelectBase = ({
   children,
   ...props
 }) => {
-  const popoverRef = useRef12(null);
-  const targetRef = useRef12(null);
-  const menuRef = useRef12(null);
-  const inputRef = useRef12(null);
+  const popoverRef = useRef13(null);
+  const targetRef = useRef13(null);
+  const menuRef = useRef13(null);
+  const inputRef = useRef13(null);
   const [inputValue, setInputValue] = useState13("");
   const [hasFocus, setFocus] = useState13(false);
   const { selectedItems, addSelectedItem, removeSelectedItem, getDropdownProps, getSelectedItemProps } = useMultipleSelection(
@@ -16820,7 +16838,7 @@ import { castArray as castArray6 } from "lodash-es";
 // src/atoms/PageHeader/PageHeader.tsx
 import React108 from "react";
 var PageHeader = ({ children, className, ...rest }) => /* @__PURE__ */ React108.createElement("div", { className: classNames(tw("flex flex-row flex-wrap gap-4 pb-6"), className), ...rest }, children);
-PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ React108.createElement("div", { className: classNames(tw("flex flex-col grow gap-0"), className), ...rest }, children);
+PageHeader.Container = ({ children, className, ...rest }) => /* @__PURE__ */ React108.createElement("div", { className: classNames(tw("flex flex-col flex-1 basis-[--aquarium-screens-xs]"), className), ...rest }, children);
 PageHeader.TitleContainer = ({ children, className, ...rest }) => /* @__PURE__ */ React108.createElement("div", { className: classNames(tw("flex flex-col justify-center gap-2"), className), ...rest }, children);
 PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__ */ React108.createElement(
   Typography2,
@@ -16834,7 +16852,7 @@ PageHeader.Title = ({ isSubHeader = false, children, ...rest }) => /* @__PURE__
 );
 PageHeader.Subtitle = ({ children, ...rest }) => /* @__PURE__ */ React108.createElement(Typography2.Small, { ...rest, color: "default" }, children);
 PageHeader.Chips = ({ children, className, ...rest }) => /* @__PURE__ */ React108.createElement("div", { className: classNames(tw("flex gap-3"), className), ...rest }, children);
-PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React108.createElement("div", { className: classNames(tw("flex flex-row gap-4 self-start"), className), ...rest }, children);
+PageHeader.Actions = ({ children, className, ...rest }) => /* @__PURE__ */ React108.createElement("div", { className: classNames(tw("flex flex-row-reverse sm:flex-row gap-4 self-start"), className), ...rest }, children);
 
 // src/molecules/PageHeader/PageHeader.tsx
 var import_more5 = __toESM(require_more());
@@ -17088,7 +17106,7 @@ RadioButtonGroup.Skeleton = RadioButtonGroupSkeleton;
 RadioButtonGroup.Skeleton.displayName = "RadioButtonGroup.Skeleton";
 
 // src/molecules/Section/Section.tsx
-import React120, { useRef as useRef13 } from "react";
+import React120, { useRef as useRef14 } from "react";
 import { useButton as useButton4 } from "@react-aria/button";
 import { useId as useId17 } from "@react-aria/utils";
 import { animated as animated6, useSpring as useSpring5 } from "@react-spring/web";
@@ -17259,8 +17277,8 @@ var Section3 = (props) => {
   const [isCollapsed, setCollapsed] = React120.useState(_collapsed ?? _defaultCollapsed);
   const [isResting, setResting] = React120.useState(true);
   const [ref, { height }] = useMeasure();
-  const toggleAreaRef = useRef13(null);
-  const isMounted = useRef13(true);
+  const toggleAreaRef = useRef14(null);
+  const isMounted = useRef14(true);
   React120.useEffect(
     () => () => {
       isMounted.current = false;
@@ -17319,8 +17337,7 @@ var Section3 = (props) => {
       id: toggleId,
       collapsible: _collapsible
     },
-    _collapsible && // @ts-expect-error React spring does not yet support R19 types
-    /* @__PURE__ */ React120.createElement(animated6.div, { style: { transform } }, /* @__PURE__ */ React120.createElement(Section2.Toggle, null)),
+    _collapsible && /* @__PURE__ */ React120.createElement(animated6.div, { style: { transform } }, /* @__PURE__ */ React120.createElement(Section2.Toggle, null)),
     /* @__PURE__ */ React120.createElement(Section2.Title, { id: titleId }, /* @__PURE__ */ React120.createElement(LineClamp2, { lines: 1 }, title), props.tag && /* @__PURE__ */ React120.createElement(TagLabel, { ...props.tag }), props.badge && /* @__PURE__ */ React120.createElement(Chip2, { text: props.badge }), props.chip && /* @__PURE__ */ React120.createElement(StatusChip, { ...props.chip })),
     subtitle && /* @__PURE__ */ React120.createElement(Section2.Subtitle, { className: tw("row-start-2", { "col-start-2": _collapsible }) }, /* @__PURE__ */ React120.createElement(LineClamp2, { lines: 1 }, subtitle))
   ), !isCollapsed && /* @__PURE__ */ React120.createElement(Section2.Actions, null, props.switch && /* @__PURE__ */ React120.createElement(Switch2, { ...props.switch }), menu && /* @__PURE__ */ React120.createElement(Box.Flex, { alignItems: "center" }, /* @__PURE__ */ React120.createElement(
@@ -17332,8 +17349,7 @@ var Section3 = (props) => {
     },
     /* @__PURE__ */ React120.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React120.createElement(Button2.Icon, { "aria-label": menuAriaLabel, icon: import_more6.default })),
     menu
-  )), props.actions && castArray7(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.select && /* @__PURE__ */ React120.createElement(SelectBase, { "aria-labelledby": titleId, ...props.select }))), !hasTabs && !isCollapsed && // @ts-expect-error React spring does not yet support R19 types
-  /* @__PURE__ */ React120.createElement(animated6.div, { className: tw(`h-[1px]`), style: { backgroundColor: "var(--aquarium-border-color-muted)" } })), /* @__PURE__ */ React120.createElement(
+  )), props.actions && castArray7(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.select && /* @__PURE__ */ React120.createElement(SelectBase, { "aria-labelledby": titleId, ...props.select }))), !hasTabs && !isCollapsed && /* @__PURE__ */ React120.createElement(animated6.div, { className: tw(`h-[1px]`), style: { backgroundColor: "var(--aquarium-border-color-muted)" } })), /* @__PURE__ */ React120.createElement(
     animated6.div,
     {
       id: regionId,