@aivenio/aquarium 2.20.0 → 3.0.0

package/dist/system.cjs

@@ -7010,7 +7010,7 @@ function useTooltipTriggerState(props = {}) {
   const { delay = TOOLTIP_DELAY } = props;
   const { isOpen, open, close } = (0, import_overlays.useOverlayTriggerState)(props);
   const id = (0, import_react10.useMemo)(() => `${++tooltipId}`, []);
-  const closeTimeout = (0, import_react10.useRef)();
+  const closeTimeout = (0, import_react10.useRef)(null);
   const isUnmounted = (0, import_react10.useRef)(false);
   const ensureTooltipEntry = () => {
     tooltips[id] = hideTooltip;
@@ -7339,7 +7339,7 @@ var asButton = (Component, isDropdownButton) => {
             hasChildren && /* @__PURE__ */ import_react12.default.createElement("div", null, children)
           );
         } else {
-          return children;
+          return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, children);
         }
       };
       const buttonComponent = /* @__PURE__ */ import_react12.default.createElement(
@@ -7443,7 +7443,18 @@ 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) => /* @__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) => (
+    // @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
+    ))
+  )));
 };
 
 // src/atoms/Toast/Toast.tsx
@@ -7932,25 +7943,28 @@ var AccordionToggle = ({ panelId, onChange, ...rest }) => {
     }
   });
   const { buttonProps } = (0, import_button.useButton)({ elementType: "div", onPress: handleClick }, ref);
-  return /* @__PURE__ */ import_react24.default.createElement(
-    import_web3.animated.div,
-    {
-      ...rest,
-      ...{
-        ...buttonProps,
-        onPointerDown: (e) => {
-          e.preventDefault();
-          handleClick();
-        }
+  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")
       },
-      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 })
+      /* @__PURE__ */ import_react24.default.createElement(import_react25.Icon, { icon: import_caretUp.default, height: 22, width: 22 })
+    )
   );
 };
 var AccordionPanel = ({ children, panelId, ...rest }) => {
@@ -7966,17 +7980,20 @@ var AccordionPanel = ({ children, panelId, ...rest }) => {
       duration: 150
     }
   });
-  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)
+  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)
+    )
   );
 };
 var AccordionUnanimatedPanel = ({ children, panelId }) => {
@@ -8257,7 +8274,7 @@ var Skeleton = ({
 
 // src/molecules/Avatar/Avatar.tsx
 var AvatarStack = ({ images }) => /* @__PURE__ */ import_react29.default.createElement(Box, { display: "flex", className: tw("[&>*:not(:first-child)]:-ml-3") }, images.map(
-  (image, index) => image ? /* @__PURE__ */ import_react29.default.createElement(Avatar, { key: `${image}.${index}`, image, imageAlt: "" }) : /* @__PURE__ */ import_react29.default.createElement(Avatar.Skeleton, { key: index })
+  (image, index) => image ? /* @__PURE__ */ import_react29.default.createElement(Avatar, { key: `${image}.${index}`, image }) : /* @__PURE__ */ import_react29.default.createElement(Avatar.Skeleton, { key: index })
 ));
 var Avatar = ({ image, imageAlt = "" }) => /* @__PURE__ */ import_react29.default.createElement("img", { src: image, className: classNames(tw("w-[32px] h-[32px]"), "Aquarium-Avatar"), alt: imageAlt });
 var AvatarSkeleton = () => /* @__PURE__ */ import_react29.default.createElement(Skeleton, { height: 32, width: 32, className: tw("rounded-full") });
@@ -8883,7 +8900,7 @@ var Template = ({
 };
 
 // src/molecules/Card/CardInputWrapper.tsx
-var CardInputWrapper = ({ input, children }) => input ? /* @__PURE__ */ import_react43.default.createElement(Template, { columns: ["1", "auto"], columnGap: "4", alignContent: "space-between" }, children, input) : children;
+var CardInputWrapper = ({ input, children }) => input ? /* @__PURE__ */ import_react43.default.createElement(Template, { columns: ["1", "auto"], columnGap: "4", alignContent: "space-between" }, children, input) : /* @__PURE__ */ import_react43.default.createElement(import_react43.default.Fragment, null, children);
 
 // src/molecules/Card/Compact.tsx
 var import_react45 = __toESM(require("react"));
@@ -10697,7 +10714,7 @@ var TableRow = ({ children, className, disabled, ...rest }) => /* @__PURE__ */ i
   "tr",
   {
     ...rest,
-    ...{ inert: disabled ? "" : void 0 },
+    ...{ inert: disabled },
     className: classNames(rowClassNames, className, {
       "opacity-70": disabled
     })
@@ -10857,7 +10874,7 @@ var Row = ({
     {
       ...rest,
       role: isGroup ? "rowgroup" : "row",
-      ...{ inert: disabled ? "" : void 0 },
+      ...{ inert: disabled },
       className: classNames(tw("contents"), className, {
         "[&>*]:border-b-transparent": noDivider,
         "children:opacity-70": disabled,
@@ -10981,7 +10998,10 @@ function useStickyStyles(scrollProgress, axis, { borderColor, boxShadowColor })
     }
   };
 }
-function useScrollProgress({ containerRef, skip }) {
+function useScrollProgress({
+  containerRef,
+  skip
+}) {
   const [scrollState, setScrollState] = (0, import_react71.useState)(null);
   const throttledSetScrollState = (0, import_lodash_es24.throttle)(({ scrollX, scrollXProgress }) => {
     setScrollState({ scrollX, scrollXProgress });
@@ -13495,9 +13515,9 @@ var PopoverTriggerWrapper = ({ children, ...rest }) => {
   const trigger = import_react101.default.Children.only(children);
   const { pressProps } = (0, import_interactions3.usePress)({ ...rest, ref });
   return import_react101.default.cloneElement(trigger, {
-    "ref": ref,
     ...(0, import_utils31.mergeProps)(pressProps, trigger.props),
-    "aria-controls": rest["aria-controls"] ?? pressProps["aria-controls"]
+    "aria-controls": rest["aria-controls"] ?? pressProps["aria-controls"],
+    "ref": ref
   });
 };
 
@@ -14699,7 +14719,7 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
         secondaryAction.text
       ), /* @__PURE__ */ import_react121.default.createElement(Popover3.Button, { kind: "ghost", key: primaryAction.text, dense: true, ...(0, import_lodash_es46.omit)(primaryAction, "text") }, primaryAction.text))));
     }
-    return child;
+    return child instanceof Promise ? /* @__PURE__ */ import_react121.default.createElement(import_react121.default.Fragment, null, child) : child;
   };
   return /* @__PURE__ */ import_react121.default.createElement(Popover3, { type: "dialog", isOpen: open, placement, containFocus: true }, import_react121.default.Children.map(children, wrapPromptWithBody));
 };
@@ -15104,7 +15124,8 @@ var Section4 = (props) => {
       id: toggleId,
       collapsible: _collapsible
     },
-    _collapsible && /* @__PURE__ */ import_react130.default.createElement(import_web6.animated.div, { style: { transform } }, /* @__PURE__ */ import_react130.default.createElement(Section3.Toggle, null)),
+    _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(Section3.Toggle, null)),
     /* @__PURE__ */ import_react130.default.createElement(Section3.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(Section3.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(Section3.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(
@@ -15116,7 +15137,8 @@ var Section4 = (props) => {
     },
     /* @__PURE__ */ import_react130.default.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ import_react130.default.createElement(Button.Icon, { "aria-label": menuAriaLabel, icon: import_more6.default })),
     menu
-  )), props.actions && (0, import_lodash_es48.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(
+  )), props.actions && (0, import_lodash_es48.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(
     import_web6.animated.div,
     {
       id: regionId,

package/dist/system.mjs

@@ -6847,7 +6847,7 @@ function useTooltipTriggerState(props = {}) {
   const { delay = TOOLTIP_DELAY } = props;
   const { isOpen, open, close } = useOverlayTriggerState(props);
   const id = useMemo(() => `${++tooltipId}`, []);
-  const closeTimeout = useRef();
+  const closeTimeout = useRef(null);
   const isUnmounted = useRef(false);
   const ensureTooltipEntry = () => {
     tooltips[id] = hideTooltip;
@@ -7176,7 +7176,7 @@ var asButton = (Component, isDropdownButton) => {
             hasChildren && /* @__PURE__ */ React9.createElement("div", null, children)
           );
         } else {
-          return children;
+          return /* @__PURE__ */ React9.createElement(React9.Fragment, null, children);
         }
       };
       const buttonComponent = /* @__PURE__ */ React9.createElement(
@@ -7280,7 +7280,18 @@ var Transition = ({ children }) => {
     keys: (item) => item.key || "",
     config: { tension: 125, friction: 20, precision: 0.1 }
   });
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, transitions((style, item) => /* @__PURE__ */ React11.createElement(animated.div, { style }, /* @__PURE__ */ React11.createElement("div", { ref: (ref) => ref && refMap.set(item, ref) }, item))));
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, transitions((style, item) => (
+    // @ts-expect-error React spring does not yet support R19 types
+    /* @__PURE__ */ React11.createElement(animated.div, { style }, /* @__PURE__ */ React11.createElement(
+      "div",
+      {
+        ref: (ref) => {
+          ref && refMap.set(item, ref);
+        }
+      },
+      item
+    ))
+  )));
 };
 
 // src/atoms/Toast/Toast.tsx
@@ -7769,25 +7780,28 @@ var AccordionToggle = ({ panelId, onChange, ...rest }) => {
     }
   });
   const { buttonProps } = useButton({ elementType: "div", onPress: handleClick }, ref);
-  return /* @__PURE__ */ React20.createElement(
-    animated3.div,
-    {
-      ...rest,
-      ...{
-        ...buttonProps,
-        onPointerDown: (e) => {
-          e.preventDefault();
-          handleClick();
-        }
+  return (
+    // @ts-expect-error React spring does not yet support R19 types
+    /* @__PURE__ */ React20.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")
       },
-      ref,
-      "aria-label": "accordion toggle",
-      "aria-expanded": openPanelId === id,
-      "aria-controls": `${id}-content`,
-      style: { transform },
-      className: tw("text-default focus:outline-none focusable")
-    },
-    /* @__PURE__ */ React20.createElement(Icon2, { icon: import_caretUp.default, height: 22, width: 22 })
+      /* @__PURE__ */ React20.createElement(Icon2, { icon: import_caretUp.default, height: 22, width: 22 })
+    )
   );
 };
 var AccordionPanel = ({ children, panelId, ...rest }) => {
@@ -7803,17 +7817,20 @@ var AccordionPanel = ({ children, panelId, ...rest }) => {
       duration: 150
     }
   });
-  return /* @__PURE__ */ React20.createElement(
-    animated3.div,
-    {
-      role: "region",
-      ...rest,
-      id: `${id}-content`,
-      "aria-labelledby": `${id}-summary`,
-      "aria-hidden": !isOpen ? "true" : void 0,
-      style
-    },
-    /* @__PURE__ */ React20.createElement("div", { ref }, children)
+  return (
+    // @ts-expect-error React spring does not yet support R19 types
+    /* @__PURE__ */ React20.createElement(
+      animated3.div,
+      {
+        role: "region",
+        ...rest,
+        id: `${id}-content`,
+        "aria-labelledby": `${id}-summary`,
+        "aria-hidden": !isOpen ? "true" : void 0,
+        style
+      },
+      /* @__PURE__ */ React20.createElement("div", { ref }, children)
+    )
   );
 };
 var AccordionUnanimatedPanel = ({ children, panelId }) => {
@@ -8094,7 +8111,7 @@ var Skeleton = ({
 
 // src/molecules/Avatar/Avatar.tsx
 var AvatarStack = ({ images }) => /* @__PURE__ */ React24.createElement(Box, { display: "flex", className: tw("[&>*:not(:first-child)]:-ml-3") }, images.map(
-  (image, index) => image ? /* @__PURE__ */ React24.createElement(Avatar, { key: `${image}.${index}`, image, imageAlt: "" }) : /* @__PURE__ */ React24.createElement(Avatar.Skeleton, { key: index })
+  (image, index) => image ? /* @__PURE__ */ React24.createElement(Avatar, { key: `${image}.${index}`, image }) : /* @__PURE__ */ React24.createElement(Avatar.Skeleton, { key: index })
 ));
 var Avatar = ({ image, imageAlt = "" }) => /* @__PURE__ */ React24.createElement("img", { src: image, className: classNames(tw("w-[32px] h-[32px]"), "Aquarium-Avatar"), alt: imageAlt });
 var AvatarSkeleton = () => /* @__PURE__ */ React24.createElement(Skeleton, { height: 32, width: 32, className: tw("rounded-full") });
@@ -8720,7 +8737,7 @@ var Template = ({
 };
 
 // src/molecules/Card/CardInputWrapper.tsx
-var CardInputWrapper = ({ input, children }) => input ? /* @__PURE__ */ React37.createElement(Template, { columns: ["1", "auto"], columnGap: "4", alignContent: "space-between" }, children, input) : children;
+var CardInputWrapper = ({ input, children }) => input ? /* @__PURE__ */ React37.createElement(Template, { columns: ["1", "auto"], columnGap: "4", alignContent: "space-between" }, children, input) : /* @__PURE__ */ React37.createElement(React37.Fragment, null, children);
 
 // src/molecules/Card/Compact.tsx
 import React39, { useContext as useContext4, useRef as useRef3 } from "react";
@@ -10534,7 +10551,7 @@ var TableRow = ({ children, className, disabled, ...rest }) => /* @__PURE__ */ R
   "tr",
   {
     ...rest,
-    ...{ inert: disabled ? "" : void 0 },
+    ...{ inert: disabled },
     className: classNames(rowClassNames, className, {
       "opacity-70": disabled
     })
@@ -10694,7 +10711,7 @@ var Row = ({
     {
       ...rest,
       role: isGroup ? "rowgroup" : "row",
-      ...{ inert: disabled ? "" : void 0 },
+      ...{ inert: disabled },
       className: classNames(tw("contents"), className, {
         "[&>*]:border-b-transparent": noDivider,
         "children:opacity-70": disabled,
@@ -10818,7 +10835,10 @@ function useStickyStyles(scrollProgress, axis, { borderColor, boxShadowColor })
     }
   };
 }
-function useScrollProgress({ containerRef, skip }) {
+function useScrollProgress({
+  containerRef,
+  skip
+}) {
   const [scrollState, setScrollState] = useState10(null);
   const throttledSetScrollState = throttle(({ scrollX, scrollXProgress }) => {
     setScrollState({ scrollX, scrollXProgress });
@@ -13360,9 +13380,9 @@ var PopoverTriggerWrapper = ({ children, ...rest }) => {
   const trigger = React92.Children.only(children);
   const { pressProps } = usePress2({ ...rest, ref });
   return React92.cloneElement(trigger, {
-    "ref": ref,
     ...mergeProps3(pressProps, trigger.props),
-    "aria-controls": rest["aria-controls"] ?? pressProps["aria-controls"]
+    "aria-controls": rest["aria-controls"] ?? pressProps["aria-controls"],
+    "ref": ref
   });
 };
 
@@ -14564,7 +14584,7 @@ var PopoverDialog2 = ({ placement, open, title, secondaryAction, primaryAction,
         secondaryAction.text
       ), /* @__PURE__ */ React112.createElement(Popover3.Button, { kind: "ghost", key: primaryAction.text, dense: true, ...omit18(primaryAction, "text") }, primaryAction.text))));
     }
-    return child;
+    return child instanceof Promise ? /* @__PURE__ */ React112.createElement(React112.Fragment, null, child) : child;
   };
   return /* @__PURE__ */ React112.createElement(Popover3, { type: "dialog", isOpen: open, placement, containFocus: true }, React112.Children.map(children, wrapPromptWithBody));
 };
@@ -14969,7 +14989,8 @@ var Section4 = (props) => {
       id: toggleId,
       collapsible: _collapsible
     },
-    _collapsible && /* @__PURE__ */ React121.createElement(animated6.div, { style: { transform } }, /* @__PURE__ */ React121.createElement(Section3.Toggle, null)),
+    _collapsible && // @ts-expect-error React spring does not yet support R19 types
+    /* @__PURE__ */ React121.createElement(animated6.div, { style: { transform } }, /* @__PURE__ */ React121.createElement(Section3.Toggle, null)),
     /* @__PURE__ */ React121.createElement(Section3.Title, { id: titleId }, /* @__PURE__ */ React121.createElement(LineClamp2, { lines: 1 }, title), props.tag && /* @__PURE__ */ React121.createElement(TagLabel, { ...props.tag }), props.badge && /* @__PURE__ */ React121.createElement(Chip2, { text: props.badge }), props.chip && /* @__PURE__ */ React121.createElement(StatusChip, { ...props.chip })),
     subtitle && /* @__PURE__ */ React121.createElement(Section3.Subtitle, { className: tw("row-start-2", { "col-start-2": _collapsible }) }, /* @__PURE__ */ React121.createElement(LineClamp2, { lines: 1 }, subtitle))
   ), !isCollapsed && /* @__PURE__ */ React121.createElement(Section3.Actions, null, props.switch && /* @__PURE__ */ React121.createElement(Switch2, { ...props.switch }), menu && /* @__PURE__ */ React121.createElement(Box.Flex, { alignItems: "center" }, /* @__PURE__ */ React121.createElement(
@@ -14981,7 +15002,8 @@ var Section4 = (props) => {
     },
     /* @__PURE__ */ React121.createElement(DropdownMenu2.Trigger, null, /* @__PURE__ */ React121.createElement(Button.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__ */ React121.createElement(SelectBase, { "aria-labelledby": titleId, ...props.select }))), !hasTabs && !isCollapsed && /* @__PURE__ */ React121.createElement(animated6.div, { className: tw(`h-[1px]`), style: { backgroundColor: "var(--aquarium-border-color-muted)" } })), /* @__PURE__ */ React121.createElement(
+  )), props.actions && castArray7(props.actions).filter(Boolean).map((action) => renderAction({ kind: "secondary", action })), props.select && /* @__PURE__ */ React121.createElement(SelectBase, { "aria-labelledby": titleId, ...props.select }))), !hasTabs && !isCollapsed && // @ts-expect-error React spring does not yet support R19 types
+  /* @__PURE__ */ React121.createElement(animated6.div, { className: tw(`h-[1px]`), style: { backgroundColor: "var(--aquarium-border-color-muted)" } })), /* @__PURE__ */ React121.createElement(
     animated6.div,
     {
       id: regionId,