@aivenio/aquarium 2.20.1 → 3.1.0

package/dist/system.mjs

@@ -1388,6 +1388,22 @@ var require_database02 = __commonJS({
   }
 });
 
+// src/icons/databaseArrow.js
+var require_databaseArrow = __commonJS({
+  "src/icons/databaseArrow.js"(exports) {
+    "use strict";
+    var data = {
+      "body": '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14 3.333c0 1.105-2.686 2-6 2s-6-.895-6-2m12 0c0-1.104-2.686-2-6-2s-6 .896-6 2m12 0v3.212M2 3.333v9.334c0 1.106 2.667 2 6 2m6-8.187c0 1.107-2.667 2-6 2s-6-.893-6-2m6 5.147c-3.333 0-6-.894-6-2m12.91 2.737-2.183-2.182m0 0-2.181 2.182m2.181-2.182v4.364"/>',
+      "left": 0,
+      "top": 0,
+      "width": 16,
+      "height": 16
+    };
+    exports.__esModule = true;
+    exports.default = data;
+  }
+});
+
 // src/icons/database.js
 var require_database = __commonJS({
   "src/icons/database.js"(exports) {
@@ -4471,7 +4487,7 @@ var InputContainer = React2.forwardRef(
           "border-danger-default": variant === "error",
           "hover:border-intense": variant !== "error" && variant !== "disabled" && variant !== "focused",
           "border-info-default": variant === "focused",
-          "bg-body": variant !== "disabled",
+          "bg-transparent": variant !== "disabled",
           "cursor-not-allowed border-default bg-default": variant === "disabled"
         }
       ),
@@ -4487,12 +4503,11 @@ var Input = React2.forwardRef(({ className, required, ...props }, ref) => /* @__
     "aria-required": required,
     className: classNames(
       className,
-      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
+      "grow rounded border-0 focus:outline-none px-[1px] my-1 min-w-0 typography-small bg-transparent disabled:cursor-not-allowed disabled:bg-default placeholder:text-inactive",
       {
         "text-default": !props.disabled,
         "text-inactive": props.disabled,
-        "bg-body": !props.readOnly,
-        "cursor-default bg-transparent": props.readOnly
+        "cursor-default": props.readOnly
       }
     ),
     ...props
@@ -4504,7 +4519,7 @@ var Menu = React2.forwardRef(
     {
       ref,
       style: { maxHeight },
-      className: classNames(className, tw("text-default bg-body overflow-y-auto")),
+      className: classNames(className, tw("text-default bg-popover-content overflow-y-auto")),
       ...props
     },
     children
@@ -4533,7 +4548,7 @@ var Item = React2.forwardRef(
     "li",
     {
       ref,
-      className: classNames(className, "flex items-center gap-x-3 p-3 typography-small", {
+      className: classNames("Aquarium-Select.Item", className, "flex items-center gap-x-3 p-3 typography-small", {
         "cursor-pointer hover:bg-muted": !props["aria-disabled"],
         "cursor-not-allowed opacity-40 grayscale": props["aria-disabled"],
         "bg-muted": highlighted
@@ -4685,6 +4700,7 @@ var import_currencyDollar = __toESM(require_currencyDollar());
 var import_dashboard = __toESM(require_dashboard());
 var import_dataLineage = __toESM(require_dataLineage());
 var import_database02 = __toESM(require_database02());
+var import_databaseArrow = __toESM(require_databaseArrow());
 var import_database = __toESM(require_database());
 var import_dataflow01 = __toESM(require_dataflow01());
 var import_dataflow02 = __toESM(require_dataflow02());
@@ -6847,7 +6863,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;
@@ -7084,7 +7100,7 @@ var Arrow = (props) => {
 var getCommonInputStyles = ({ readOnly, valid }) => tw(
   "block w-full rounded-sm disabled:cursor-not-allowed disabled:border-default disabled:bg-default typography-small text-default disabled:text-inactive placeholder:text-inactive focus:outline-none",
   {
-    "px-3 py-3 bg-body": !readOnly,
+    "px-3 py-3 bg-transparent": !readOnly,
     "border-none resize-none cursor-default bg-transparent": readOnly,
     "border border-danger-default": !valid && !readOnly,
     "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
@@ -7176,7 +7192,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 +7296,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 +7796,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 +7833,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 +8127,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 +8753,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";
@@ -9301,8 +9334,22 @@ import React49 from "react";
 
 // src/utils/form/FormControl/FormControl.tsx
 import React46 from "react";
-var FormControl = ({ className, inline, children }) => {
-  return /* @__PURE__ */ React46.createElement(Box.Flex, { flexDirection: "column", display: inline ? "inline-flex" : "flex", className }, children);
+var FormControl = ({
+  className,
+  inline,
+  children,
+  "data-testid": dataTestId
+}) => {
+  return /* @__PURE__ */ React46.createElement(
+    Box.Flex,
+    {
+      "data-testid": dataTestId,
+      flexDirection: "column",
+      display: inline ? "inline-flex" : "flex",
+      className
+    },
+    children
+  );
 };
 
 // src/utils/form/HelperText/HelperText.tsx
@@ -9404,11 +9451,13 @@ var LabelControl = ({
   valid,
   disabled,
   className,
+  htmlFor,
+  "data-testid": dataTestId,
   ...rest
 }) => {
   const legacyError = error2 !== void 0 && valid === false;
   const variant = !valid || legacyError ? "error" : disabled ? "disabled" : "default";
-  return /* @__PURE__ */ React49.createElement(FormControl, { className }, !fieldset && /* @__PURE__ */ React49.createElement(Label2, { ...rest, variant }, children), fieldset && /* @__PURE__ */ React49.createElement("fieldset", { id: rest.id }, /* @__PURE__ */ React49.createElement("legend", { className: tw("w-full mb-2") }, /* @__PURE__ */ React49.createElement(LabelText, { ...rest, variant })), children), /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React49.createElement(FormControl, { "data-testid": dataTestId, className }, !fieldset && !!htmlFor && /* @__PURE__ */ React49.createElement(React49.Fragment, null, /* @__PURE__ */ React49.createElement(Label2, { ...rest, htmlFor, variant }), children), !fieldset && !htmlFor && /* @__PURE__ */ React49.createElement(Label2, { ...rest, variant }, children), fieldset && /* @__PURE__ */ React49.createElement("fieldset", { id: rest.id }, /* @__PURE__ */ React49.createElement("legend", { className: tw("w-full mb-2") }, /* @__PURE__ */ React49.createElement(LabelText, { ...rest, variant })), children), /* @__PURE__ */ React49.createElement(
     HelperText,
     {
       messageId,
@@ -10128,7 +10177,6 @@ var _SelectBase = (props) => {
     emptyState,
     actions,
     children,
-    labelWrapper,
     ...rest
   } = withDefaults;
   const [hasFocus, setFocus] = useState8(false);
@@ -10213,7 +10261,7 @@ var _SelectBase = (props) => {
     !readOnly && /* @__PURE__ */ React58.createElement(Select.Toggle, { disabled, isOpen, tabIndex: -1 })
   );
   const menuProps = getMenuProps({ ref: menuRef }, { suppressRefError: !isOpen });
-  return /* @__PURE__ */ React58.createElement("div", { className: classNames("Aquarium-SelectBase", tw("relative")) }, labelWrapper ? React58.cloneElement(labelWrapper, { children: input }) : input, isOpen && /* @__PURE__ */ React58.createElement(
+  return /* @__PURE__ */ React58.createElement("div", { className: classNames("Aquarium-SelectBase", tw("relative")) }, input, isOpen && /* @__PURE__ */ React58.createElement(
     PopoverOverlay,
     {
       state,
@@ -10237,7 +10285,7 @@ var _SelectBase = (props) => {
     ))))
   ));
 };
-var SelectBase = (props) => /* @__PURE__ */ React58.createElement(_SelectBase, { ...props, labelWrapper: void 0 });
+var SelectBase = (props) => /* @__PURE__ */ React58.createElement(_SelectBase, { ...props });
 var SelectBaseSkeleton = () => /* @__PURE__ */ React58.createElement(Skeleton, { height: 38 });
 SelectBase.Skeleton = SelectBaseSkeleton;
 var Select2 = ({
@@ -10250,31 +10298,27 @@ var Select2 = ({
   const errorProps = props.valid === false ? { "aria-invalid": true, "aria-describedby": errorMessageId } : {};
   const labelProps = getLabelControlProps(props);
   const baseProps = omit6(props, without(Object.keys(labelProps), "required"));
-  const legacyError = labelProps.error !== void 0 && labelProps.valid === false;
-  const variant = !labelProps.valid || legacyError ? "error" : labelProps.disabled ? "disabled" : "default";
-  const label = /* @__PURE__ */ React58.createElement(Label2, { id: `${id}-label`, htmlFor: `${id}-input`, variant, messageId: errorMessageId, ...labelProps });
-  return /* @__PURE__ */ React58.createElement(FormControl, { className: "Aquarium-Select" }, /* @__PURE__ */ React58.createElement(
-    _SelectBase,
-    {
-      ...baseProps,
-      ...errorProps,
-      id: `${id}-input`,
-      options,
-      disabled: props.disabled,
-      valid: props.valid,
-      labelWrapper: label
-    }
-  ), /* @__PURE__ */ React58.createElement(
-    HelperText,
+  return /* @__PURE__ */ React58.createElement(
+    LabelControl,
     {
+      id: `${id}-label`,
+      htmlFor: `${id}-input`,
       messageId: errorMessageId,
-      error: !labelProps.valid,
-      helperText: labelProps.helperText,
-      length: labelProps.length,
-      maxLength: labelProps.maxLength,
-      reserveSpaceForError: labelProps.reserveSpaceForError
-    }
-  ));
+      ...labelProps,
+      className: "Aquarium-Select"
+    },
+    /* @__PURE__ */ React58.createElement(
+      _SelectBase,
+      {
+        ...baseProps,
+        ...errorProps,
+        id: `${id}-input`,
+        options,
+        disabled: props.disabled,
+        valid: props.valid
+      }
+    )
+  );
 };
 var SelectSkeleton = () => /* @__PURE__ */ React58.createElement(LabelControl.Skeleton, null, /* @__PURE__ */ React58.createElement(SelectBase.Skeleton, null));
 Select2.Skeleton = SelectSkeleton;
@@ -10534,7 +10578,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 +10738,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 +10862,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 });
@@ -12244,7 +12291,7 @@ var fieldBorder = tv2({
   }
 });
 var fieldGroup = tv2({
-  base: "group flex items-center bg-body border rounded-sm typography-small text-default px-3 py-3 overflow-hidden",
+  base: "group flex items-center bg-transparent border rounded-sm typography-small text-default px-3 py-3 overflow-hidden",
   variants: fieldBorder.variants
 });
 
@@ -12323,7 +12370,7 @@ var ButtonBase = ({
       ...props,
       className: classNames(
         className,
-        tw("group-hover:opacity-100 py-1 ", {
+        tw("group-hover:opacity-100 p-0", {
           "opacity-0 group-focus-within:opacity-100": !hideWhenParentIsNotHoveredOrFocused
         })
       )
@@ -12482,7 +12529,7 @@ var createDatePickerBase = (variant) => ({
       isInvalid: valid === false,
       granularity: granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0)
     },
-    /* @__PURE__ */ React83.createElement(FieldGroup, { className: tw("min-w-[210px] w-auto") }, /* @__PURE__ */ React83.createElement(DateInput, { className: tw("flex-1") }), clearSelectionEnabled && !disabled && /* @__PURE__ */ React83.createElement(DatePickerClearButton, null), /* @__PURE__ */ React83.createElement(CalendarButton, null)),
+    /* @__PURE__ */ React83.createElement(FieldGroup, { className: tw("min-w-[210px] w-auto") }, /* @__PURE__ */ React83.createElement(DateInput, { className: tw("flex-1") }), /* @__PURE__ */ React83.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ React83.createElement(DatePickerClearButton, null), /* @__PURE__ */ React83.createElement(CalendarButton, null))),
     /* @__PURE__ */ React83.createElement(Popover2, { offset: 0 }, /* @__PURE__ */ React83.createElement(Dialog, null, /* @__PURE__ */ React83.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ React83.createElement(Calendar, null), variant === "datetime" && /* @__PURE__ */ React83.createElement(PickerTimeField, { granularity }), errorMessage && /* @__PURE__ */ React83.createElement(Text, { slot: "errorMessage", className: tw("typography-caption text-danger-default max-w-[300px]") }, errorMessage))))
   );
 };
@@ -12622,7 +12669,7 @@ var createDateRangePickerBase = (variant) => ({
       granularity: granularity ?? (variant === "datetime" && !hasSomeValue ? "minute" : void 0),
       className: tw("group flex flex-col gap-1")
     },
-    /* @__PURE__ */ React85.createElement(FieldGroup, { className: tw("min-w-[200px] w-auto gap-2") }, /* @__PURE__ */ React85.createElement(DateInput, { slot: "start", className: tw("px-2 py-1") }), /* @__PURE__ */ React85.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ React85.createElement(DateInput, { slot: "end", className: tw("flex-1 px-2 py-1") }), clearSelectionEnabled && !disabled && /* @__PURE__ */ React85.createElement(DateRangePickerClearButton, null), /* @__PURE__ */ React85.createElement(CalendarButton, null)),
+    /* @__PURE__ */ React85.createElement(FieldGroup, { className: tw("min-w-[200px] w-auto gap-2") }, /* @__PURE__ */ React85.createElement(DateInput, { slot: "start", className: tw("px-2 py-1") }), /* @__PURE__ */ React85.createElement("span", { "aria-hidden": true, className: tw("text-muted") }, "-"), /* @__PURE__ */ React85.createElement(DateInput, { slot: "end", className: tw("flex-1 px-2 py-1") }), /* @__PURE__ */ React85.createElement(Box.Flex, { alignItems: "center", gap: "2" }, clearSelectionEnabled && !disabled && /* @__PURE__ */ React85.createElement(DateRangePickerClearButton, null), /* @__PURE__ */ React85.createElement(CalendarButton, null))),
     /* @__PURE__ */ React85.createElement(Popover2, { offset: 0 }, /* @__PURE__ */ React85.createElement(Dialog, null, /* @__PURE__ */ React85.createElement(Spacing, { gap: "3" }, /* @__PURE__ */ React85.createElement(RangeCalendar, null), variant === "datetime" && /* @__PURE__ */ React85.createElement(Box.Flex, { gap: "6" }, /* @__PURE__ */ React85.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React85.createElement(PickerTimeField2, { granularity, part: "start" })), /* @__PURE__ */ React85.createElement("div", { className: tw("flex-1") }, /* @__PURE__ */ React85.createElement(PickerTimeField2, { granularity, part: "end" }))), errorMessage && /* @__PURE__ */ React85.createElement(Text2, { slot: "errorMessage", className: tw("typography-caption text-danger-default max-w-[300px]") }, errorMessage))))
   );
 };
@@ -13360,9 +13407,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
   });
 };
 
@@ -14308,8 +14355,8 @@ var NativeSelectBase = React106.forwardRef(
           tw(
             "block w-full rounded-sm appearance-none disabled:cursor-not-allowed typography-small text-default placeholder:text-inactive focus:outline-none",
             {
-              "px-3 py-3 bg-body disabled:border-default disabled:bg-default disabled:text-inactive": !readOnly,
-              "px-0 py-3 border-none": readOnly,
+              "px-3 py-3 bg-transparent disabled:border-default disabled:bg-default disabled:text-inactive": !readOnly,
+              "px-0 py-3 border-none bg-transparent": readOnly,
               "border border-danger-default": !valid && !readOnly,
               "border border-default hover:border-intense focus:border-info-default": valid && !readOnly
             }
@@ -14564,7 +14611,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 +15016,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 +15029,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,