@aivenio/aquarium 4.4.0 → 4.5.1

package/dist/system.mjs

@@ -716,6 +716,22 @@ var require_calendar = __commonJS({
   }
 });
 
+// src/icons/camera.js
+var require_camera = __commonJS({
+  "src/icons/camera.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M1.333 5.584c0-.233 0-.35.01-.448a2 2 0 011.793-1.793c.098-.01.221-.01.467-.01.095 0 .143 0 .183-.002a1.333 1.333 0 001.156-.834c.015-.037.03-.08.058-.164.028-.084.042-.127.057-.164a1.333 1.333 0 011.156-.834c.04-.002.085-.002.174-.002h3.225c.09 0 .134 0 .174.002.514.032.964.356 1.156.834.015.037.03.08.058.164.028.084.042.127.057.164.192.478.642.802 1.156.834.04.002.088.002.183.002.246 0 .37 0 .467.01a2 2 0 011.794 1.793c.01.098.01.215.01.448V10.8c0 1.12 0 1.68-.219 2.108a2 2 0 01-.874.874c-.428.218-.988.218-2.108.218H4.533c-1.12 0-1.68 0-2.108-.218a2 2 0 01-.874-.874c-.218-.428-.218-.988-.218-2.108V5.584Z"/><path d="M8 11a2.667 2.667 0 100-5.334A2.667 2.667 0 008 11Z"/></g>',
+      "left": 0,
+      "top": 0,
+      "width": 16,
+      "height": 16
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/capslock.js
 var require_capslock = __commonJS({
   "src/icons/capslock.js"(exports) {
@@ -4657,6 +4673,7 @@ var import_bookmark = __toESM(require_bookmark());
 var import_box = __toESM(require_box());
 var import_briefcase = __toESM(require_briefcase());
 var import_calendar = __toESM(require_calendar());
+var import_camera = __toESM(require_camera());
 var import_capslock = __toESM(require_capslock());
 var import_caretDownFilled = __toESM(require_caretDownFilled());
 var import_caretDown = __toESM(require_caretDown());
@@ -7191,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
@@ -7681,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 }) => {
@@ -7718,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 }) => {
@@ -9934,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";
 
@@ -10802,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(() => {
@@ -10850,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;
   }
@@ -11712,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(
@@ -11923,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";
 
@@ -11983,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);
@@ -15105,7 +15140,8 @@ var modalStyles = tv13({
     titleContainer: "flex flex-col grow",
     title: "",
     closeButtonContainer: "absolute top-[24px] right-[28px]",
-    body: "px-7 grow overflow-y-auto text-default",
+    body: "grow overflow-y-auto text-default",
+    bodyContent: "px-7",
     footer: "px-7 py-6",
     actions: "flex gap-4 justify-end"
   },
@@ -15129,12 +15165,12 @@ var modalStyles = tv13({
         overlay: "py-0",
         dialog: "w-dvw h-dvh mx-0 rounded-none",
         header: "border-b-1 border-muted",
-        body: "pt-6"
+        bodyContent: "pt-6"
       }
     },
     noFooter: {
       true: {
-        body: "pb-6"
+        bodyContent: "pb-6"
       }
     },
     backgroundImage: {
@@ -15233,8 +15269,8 @@ Modal.TitleContainer = ({ children, className, ...rest }) => {
   return /* @__PURE__ */ React89.createElement("div", { ...rest, className: titleContainer({ className }) }, children);
 };
 Modal.Body = ({ children, className, noFooter = false, maxHeight, style, size, ...rest }) => {
-  const { body } = modalStyles({ size });
-  return /* @__PURE__ */ React89.createElement("div", { ...rest, className: body({ noFooter, className }), style: { maxHeight, ...style } }, children);
+  const { body, bodyContent } = modalStyles({ size });
+  return /* @__PURE__ */ React89.createElement("div", { ...rest, className: body({ className }), style: { maxHeight, ...style } }, /* @__PURE__ */ React89.createElement("div", { className: bodyContent({ noFooter }) }, children));
 };
 Modal.Footer = ({ children, className, ...rest }) => {
   const { footer } = modalStyles();
@@ -15296,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());
@@ -15413,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;
@@ -15458,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);
@@ -16109,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";
 
@@ -16190,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);
@@ -16359,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";
@@ -16389,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(
@@ -16802,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,
@@ -16816,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());
@@ -17070,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";
@@ -17241,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;
@@ -17301,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(
@@ -17314,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,