@marigold/components 4.1.4 → 4.1.5

package/dist/index.mjs

@@ -660,7 +660,8 @@ var Modal = forwardRef3(
       restoreFocus: true,
       autoFocus: true
     }, /* @__PURE__ */ React17.createElement(Underlay, {
-      ...underlayProps
+      ...underlayProps,
+      variant: "modal"
     }), /* @__PURE__ */ React17.createElement("div", {
       style: {
         display: "flex",
@@ -680,59 +681,102 @@ var Modal = forwardRef3(
 );
 
 // src/Overlay/Overlay.tsx
-import React18 from "react";
-import { OverlayContainer } from "@react-aria/overlays";
-var Overlay = ({
-  children,
-  open = false,
-  container,
-  ...props
-}) => {
-  if (!open) {
+import React18, { useRef } from "react";
+import { Transition } from "react-transition-group";
+import {
+  Overlay as ReactAriaOverlay
+} from "@react-aria/overlays";
+var duration = 300;
+var defaultStyle = {
+  transition: `opacity ${duration}ms ease-in-out`,
+  opacity: 0
+};
+var transitionStyles = {
+  entering: { opacity: 1 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+  exited: { opacity: 0 },
+  unmounted: { opacity: 0 }
+};
+var Overlay = ({ children, container, open }) => {
+  const nodeRef = useRef(null);
+  let mountOverlay = open;
+  if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ React18.createElement(OverlayContainer, {
+  return /* @__PURE__ */ React18.createElement(ReactAriaOverlay, {
     portalContainer: container
-  }, /* @__PURE__ */ React18.createElement(Box, {
-    ...props
-  }, children));
+  }, /* @__PURE__ */ React18.createElement(Transition, {
+    nodeRef,
+    timeout: duration,
+    in: open,
+    appear: true
+  }, (state) => /* @__PURE__ */ React18.createElement("div", {
+    ref: nodeRef,
+    "data-testid": "overlay",
+    style: {
+      ...defaultStyle,
+      ...transitionStyles[state]
+    }
+  }, children)));
 };
 
 // src/Overlay/Popover.tsx
-import React19, { forwardRef as forwardRef4, useRef } from "react";
-import { useModal as useModal2, useOverlay as useOverlay2 } from "@react-aria/overlays";
-import { mergeProps as mergeProps3 } from "@react-aria/utils";
+import React19, { forwardRef as forwardRef4 } from "react";
+import {
+  DismissButton,
+  usePopover
+} from "@react-aria/overlays";
+import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
+import { FocusScope as FocusScope2 } from "@react-aria/focus";
 var Popover = forwardRef4(
+  (props, ref) => {
+    const popoverRef = useObjectRef4(ref);
+    let { children, state, ...otherProps } = props;
+    return /* @__PURE__ */ React19.createElement(Overlay, {
+      open: state.isOpen,
+      ...otherProps
+    }, /* @__PURE__ */ React19.createElement(PopoverWrapper, {
+      ref: popoverRef,
+      ...props
+    }, children));
+  }
+);
+var PopoverWrapper = forwardRef4(
   ({
     children,
-    open,
-    dismissable,
+    isNonModal,
+    state,
     keyboardDismissDisabled,
-    shouldCloseOnBlur,
-    minWidth = 0,
     ...props
   }, ref) => {
-    const fallbackRef = useRef(null);
-    const popoverRef = ref || fallbackRef;
-    const { overlayProps } = useOverlay2(
+    const { popoverProps, underlayProps } = usePopover(
       {
-        isOpen: open,
-        isDismissable: dismissable,
+        ...props,
+        isNonModal,
         isKeyboardDismissDisabled: keyboardDismissDisabled,
-        shouldCloseOnBlur,
-        ...props
+        popoverRef: ref,
+        placement: "bottom left"
       },
-      popoverRef
+      state
     );
-    const { modalProps } = useModal2({});
-    const style = { minWidth };
-    return /* @__PURE__ */ React19.createElement(Overlay, {
-      open
-    }, /* @__PURE__ */ React19.createElement(Box, {
-      ref: popoverRef,
-      role: "presentation",
-      ...mergeProps3(props, overlayProps, modalProps, style)
-    }, children));
+    return /* @__PURE__ */ React19.createElement(FocusScope2, {
+      restoreFocus: true
+    }, !isNonModal && /* @__PURE__ */ React19.createElement(Underlay, {
+      ...underlayProps
+    }), /* @__PURE__ */ React19.createElement("div", {
+      ...popoverProps,
+      style: {
+        ...popoverProps.style,
+        minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
+      },
+      ref,
+      role: "presentation"
+    }, !isNonModal && /* @__PURE__ */ React19.createElement(DismissButton, {
+      onDismiss: state.close
+    }), children, /* @__PURE__ */ React19.createElement(DismissButton, {
+      onDismiss: state.close
+    })));
   }
 );
 
@@ -942,7 +986,7 @@ var Input = forwardRef5(
 import React27, { forwardRef as forwardRef6 } from "react";
 import { useLink } from "@react-aria/link";
 import { useComponentStyles as useComponentStyles16 } from "@marigold/system";
-import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
 var Link = forwardRef6(
   ({
     as = "a",
@@ -954,7 +998,7 @@ var Link = forwardRef6(
     onPressStart,
     ...props
   }, ref) => {
-    const linkRef = useObjectRef4(ref);
+    const linkRef = useObjectRef5(ref);
     const { linkProps } = useLink(
       {
         ...props,
@@ -1024,9 +1068,8 @@ List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 import React32, { useRef as useRef6 } from "react";
-import { FocusScope as FocusScope2 } from "@react-aria/focus";
 import { useMenu } from "@react-aria/menu";
-import { DismissButton } from "@react-aria/overlays";
+import { DismissButton as DismissButton2 } from "@react-aria/overlays";
 import { Item } from "@react-stately/collections";
 import { useTreeState } from "@react-stately/tree";
 import {
@@ -1035,7 +1078,10 @@ import {
 } from "@marigold/system";
 
 // src/Menu/Context.ts
-import { createContext as createContext4, useContext as useContext4 } from "react";
+import {
+  createContext as createContext4,
+  useContext as useContext4
+} from "react";
 var MenuContext = createContext4({});
 var useMenuContext = () => useContext4(MenuContext);
 
@@ -1043,26 +1089,21 @@ var useMenuContext = () => useContext4(MenuContext);
 import React30, { useRef as useRef4 } from "react";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { useMenuTrigger } from "@react-aria/menu";
-import { useOverlayPosition } from "@react-aria/overlays";
 import { PressResponder as PressResponder2 } from "@react-aria/interactions";
+import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
 var MenuTrigger = ({ disabled, children }) => {
   const [menuTrigger, menu] = React30.Children.toArray(children);
   const menuTriggerRef = useRef4(null);
-  const overlayRef = useRef4(null);
+  const menuRef = useObjectRef6();
   const state = useMenuTriggerState({});
   const { menuTriggerProps, menuProps } = useMenuTrigger(
     { trigger: "press", isDisabled: disabled },
     state,
     menuTriggerRef
   );
-  const { overlayProps: positionProps } = useOverlayPosition({
-    targetRef: menuTriggerRef,
-    overlayRef,
-    isOpen: state.isOpen,
-    placement: "bottom left"
-  });
   const menuContext = {
     ...menuProps,
+    ref: menuRef,
     open: state.isOpen,
     onClose: state.close,
     autoFocus: state.focusStrategy
@@ -1074,13 +1115,9 @@ var MenuTrigger = ({ disabled, children }) => {
     ref: menuTriggerRef,
     isPressed: state.isOpen
   }, menuTrigger), /* @__PURE__ */ React30.createElement(Popover, {
-    open: state.isOpen,
-    onClose: state.close,
-    dismissable: true,
-    shouldCloseOnBlur: true,
-    ref: overlayRef,
-    minWidth: menuTriggerRef.current ? menuTriggerRef.current.offsetWidth : void 0,
-    ...positionProps
+    triggerRef: menuTriggerRef,
+    scrollRef: menuRef,
+    state
   }, menu));
 };
 
@@ -1088,7 +1125,7 @@ var MenuTrigger = ({ disabled, children }) => {
 import React31, { useRef as useRef5 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
-import { mergeProps as mergeProps4 } from "@react-aria/utils";
+import { mergeProps as mergeProps3 } from "@react-aria/utils";
 import { Box as Box16, useStateProps as useStateProps3 } from "@marigold/system";
 var MenuItem = ({ item, state, onAction, css }) => {
   const ref = useRef5(null);
@@ -1115,26 +1152,26 @@ var MenuItem = ({ item, state, onAction, css }) => {
       }
     },
     css,
-    ...mergeProps4(menuItemProps, focusProps),
+    ...mergeProps3(menuItemProps, focusProps),
     ...stateProps
   }, item.rendered);
 };
 
 // src/Menu/Menu.tsx
+import { useSyncRef } from "@react-aria/utils";
 var Menu = ({ variant, size, ...props }) => {
-  const menuContext = useMenuContext();
+  const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
   const ref = useRef6(null);
   const state = useTreeState({ ...ownProps, selectionMode: "none" });
   const { menuProps } = useMenu(ownProps, state, ref);
+  useSyncRef({ ref: scrollRef }, ref);
   const styles = useComponentStyles18(
     "Menu",
     { variant, size },
     { parts: ["container", "item"] }
   );
-  return /* @__PURE__ */ React32.createElement(FocusScope2, {
-    restoreFocus: true
-  }, /* @__PURE__ */ React32.createElement("div", null, /* @__PURE__ */ React32.createElement(DismissButton, {
+  return /* @__PURE__ */ React32.createElement("div", null, /* @__PURE__ */ React32.createElement(DismissButton2, {
     onDismiss: ownProps.onClose
   }), /* @__PURE__ */ React32.createElement(Box17, {
     as: "ul",
@@ -1152,9 +1189,9 @@ var Menu = ({ variant, size, ...props }) => {
     state,
     onAction: props.onSelect,
     css: styles.item
-  }))), /* @__PURE__ */ React32.createElement(DismissButton, {
+  }))), /* @__PURE__ */ React32.createElement(DismissButton2, {
     onDismiss: ownProps.onClose
-  })));
+  }));
 };
 Menu.Trigger = MenuTrigger;
 Menu.Item = Item;
@@ -1207,7 +1244,7 @@ import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover as useHover4 } from "@react-aria/interactions";
 import { useLocale } from "@react-aria/i18n";
 import { useNumberField } from "@react-aria/numberfield";
-import { mergeProps as mergeProps6, useObjectRef as useObjectRef5 } from "@react-aria/utils";
+import { mergeProps as mergeProps5, useObjectRef as useObjectRef7 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import {
   Box as Box21,
@@ -1305,7 +1342,7 @@ var FieldBase = ({
 import React36, { useRef as useRef7 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
 import { useHover as useHover3 } from "@react-aria/interactions";
-import { mergeProps as mergeProps5 } from "@react-aria/utils";
+import { mergeProps as mergeProps4 } from "@react-aria/utils";
 import { Box as Box20, useStateProps as useStateProps4 } from "@marigold/system";
 var Plus = () => /* @__PURE__ */ React36.createElement(Box20, {
   as: "svg",
@@ -1348,7 +1385,7 @@ var StepButton = ({ direction, css, ...props }) => {
       cursor: props.isDisabled ? "not-allowed" : "pointer"
     },
     css,
-    ...mergeProps5(buttonProps, hoverProps),
+    ...mergeProps4(buttonProps, hoverProps),
     ...stateProps
   }, /* @__PURE__ */ React36.createElement(Icon3, null));
 };
@@ -1375,7 +1412,7 @@ var NumberField = forwardRef7(
     };
     const showStepper = !hideStepper;
     const { locale } = useLocale();
-    const inputRef = useObjectRef5(ref);
+    const inputRef = useObjectRef7(ref);
     const state = useNumberFieldState({ ...props, locale });
     const {
       labelProps,
@@ -1428,7 +1465,7 @@ var NumberField = forwardRef7(
         }
       },
       css: styles.group,
-      ...mergeProps6(groupProps, focusProps, hoverProps),
+      ...mergeProps5(groupProps, focusProps, hoverProps),
       ...stateProps
     }, showStepper && /* @__PURE__ */ React37.createElement(StepButton, {
       direction: "down",
@@ -1491,7 +1528,7 @@ import React40, {
 import { useHover as useHover5 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useRadio } from "@react-aria/radio";
-import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
 import {
   Box as Box23,
   useComponentStyles as useComponentStyles24,
@@ -1595,7 +1632,7 @@ var Radio = forwardRef8(
       width: groupWidth,
       ...state
     } = useRadioGroupContext();
-    const inputRef = useObjectRef6(ref);
+    const inputRef = useObjectRef8(ref);
     const { inputProps } = useRadio(
       { isDisabled: disabled, ...props },
       state,
@@ -1661,13 +1698,12 @@ import React44, {
   useRef as useRef9
 } from "react";
 import { useButton as useButton4 } from "@react-aria/button";
-import { FocusScope as FocusScope3, useFocusRing as useFocusRing6 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 import { useLocalizedStringFormatter } from "@react-aria/i18n";
-import { DismissButton as DismissButton2, useOverlayPosition as useOverlayPosition2 } from "@react-aria/overlays";
 import { HiddenSelect, useSelect } from "@react-aria/select";
 import { useSelectState } from "@react-stately/select";
 import { Item as Item2, Section } from "@react-stately/collections";
-import { mergeProps as mergeProps7, useObjectRef as useObjectRef8 } from "@react-aria/utils";
+import { mergeProps as mergeProps6, useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import {
   Box as Box27,
   useComponentStyles as useComponentStyles26,
@@ -1676,7 +1712,7 @@ import {
 
 // src/ListBox/ListBox.tsx
 import React43, { forwardRef as forwardRef9 } from "react";
-import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef9 } from "@react-aria/utils";
 import {
   Box as Box26,
   useComponentStyles as useComponentStyles25
@@ -1750,7 +1786,7 @@ var ListBoxSection = ({ section, state }) => {
 // src/ListBox/ListBox.tsx
 var ListBox = forwardRef9(
   ({ state, variant, size, ...props }, ref) => {
-    const innerRef = useObjectRef7(ref);
+    const innerRef = useObjectRef9(ref);
     const { listBoxProps } = useListBox(props, state, innerRef);
     const styles = useComponentStyles25(
       "ListBox",
@@ -1807,7 +1843,6 @@ var Chevron = ({ css }) => /* @__PURE__ */ React44.createElement(Box27, {
 var Select = forwardRef10(
   ({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
     const formatMessage = useLocalizedStringFormatter(messages);
-    const buttonRef = useObjectRef8(ref);
     const props = {
       isOpen: open,
       isDisabled: disabled,
@@ -1817,6 +1852,8 @@ var Select = forwardRef10(
       ...rest
     };
     const state = useSelectState(props);
+    const buttonRef = useObjectRef10(ref);
+    const listboxRef = useRef9(null);
     const {
       labelProps,
       triggerProps,
@@ -1830,13 +1867,6 @@ var Select = forwardRef10(
       buttonRef
     );
     const { focusProps, isFocusVisible } = useFocusRing6();
-    const overlayRef = useRef9(null);
-    const { overlayProps: positionProps } = useOverlayPosition2({
-      targetRef: buttonRef,
-      overlayRef,
-      isOpen: state.isOpen,
-      placement: "bottom left"
-    });
     const styles = useComponentStyles26(
       "Select",
       { variant, size },
@@ -1879,7 +1909,7 @@ var Select = forwardRef10(
       },
       css: styles.button,
       ref: buttonRef,
-      ...mergeProps7(buttonProps, focusProps),
+      ...mergeProps6(buttonProps, focusProps),
       ...stateProps
     }, /* @__PURE__ */ React44.createElement(Box27, {
       css: {
@@ -1890,25 +1920,16 @@ var Select = forwardRef10(
     }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React44.createElement(Chevron, {
       css: styles.icon
     })), /* @__PURE__ */ React44.createElement(Popover, {
-      open: state.isOpen,
-      onClose: state.close,
-      dismissable: true,
-      shouldCloseOnBlur: true,
-      minWidth: buttonRef.current ? buttonRef.current.offsetWidth : void 0,
-      ref: overlayRef,
-      ...positionProps
-    }, /* @__PURE__ */ React44.createElement(FocusScope3, {
-      restoreFocus: true
-    }, /* @__PURE__ */ React44.createElement(DismissButton2, {
-      onDismiss: state.close
-    }), /* @__PURE__ */ React44.createElement(ListBox, {
+      state,
+      triggerRef: buttonRef,
+      scrollRef: listboxRef
+    }, /* @__PURE__ */ React44.createElement(ListBox, {
+      ref: listboxRef,
       state,
       variant,
       size,
       ...menuProps
-    }), /* @__PURE__ */ React44.createElement(DismissButton2, {
-      onDismiss: state.close
-    }))));
+    })));
   }
 );
 Select.Option = Item2;
@@ -1919,13 +1940,13 @@ import React46, { forwardRef as forwardRef11 } from "react";
 import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
-import { useObjectRef as useObjectRef9 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
 import { useComponentStyles as useComponentStyles27 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
 import React45, { useEffect } from "react";
 import { useSliderThumb } from "@react-aria/slider";
-import { mergeProps as mergeProps8 } from "@react-aria/utils";
+import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import { useStateProps as useStateProps9 } from "@marigold/system";
 
 // src/VisuallyHidden/VisuallyHidden.tsx
@@ -1963,7 +1984,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
     as: "input",
     type: "range",
     ref: inputRef,
-    ...mergeProps8(inputProps, focusProps)
+    ...mergeProps7(inputProps, focusProps)
   })));
 };
 
@@ -1971,7 +1992,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
 var Slider = forwardRef11(
   ({ variant, size, width = "100%", ...props }, ref) => {
     const { formatOptions } = props;
-    const trackRef = useObjectRef9(ref);
+    const trackRef = useObjectRef11(ref);
     const numberFormatter = useNumberFormatter(formatOptions);
     const state = useSliderState({ ...props, numberFormatter });
     const { groupProps, trackProps, labelProps, outputProps } = useSlider(
@@ -2076,7 +2097,7 @@ var Stack = ({
 import React49, { forwardRef as forwardRef12 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
-import { useObjectRef as useObjectRef10 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
 import {
   useComponentStyles as useComponentStyles28,
@@ -2093,7 +2114,7 @@ var Switch = forwardRef12(
     defaultChecked,
     ...rest
   }, ref) => {
-    const inputRef = useObjectRef10(ref);
+    const inputRef = useObjectRef12(ref);
     const props = {
       isSelected: checked,
       isDisabled: disabled,
@@ -2212,7 +2233,7 @@ var TableBody = ({ children }) => {
 import React51, { useRef as useRef10 } from "react";
 import { useTableCell } from "@react-aria/table";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
-import { mergeProps as mergeProps9 } from "@react-aria/utils";
+import { mergeProps as mergeProps8 } from "@react-aria/utils";
 import { Box as Box29, useStateProps as useStateProps11 } from "@marigold/system";
 var TableCell = ({ cell }) => {
   const ref = useRef10(null);
@@ -2236,7 +2257,7 @@ var TableCell = ({ cell }) => {
     as: "td",
     ref,
     css: styles.cell,
-    ...mergeProps9(cellProps, focusProps),
+    ...mergeProps8(cellProps, focusProps),
     ...stateProps
   }, cell.rendered);
 };
@@ -2245,7 +2266,7 @@ var TableCell = ({ cell }) => {
 import React52, { useRef as useRef11 } from "react";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
-import { mergeProps as mergeProps10 } from "@react-aria/utils";
+import { mergeProps as mergeProps9 } from "@react-aria/utils";
 import { Box as Box30, useStateProps as useStateProps12 } from "@marigold/system";
 
 // src/Table/utils.ts
@@ -2294,7 +2315,7 @@ var TableCheckboxCell = ({ cell }) => {
       lineHeight: 1
     },
     css: styles.cell,
-    ...mergeProps10(gridCellProps, focusProps),
+    ...mergeProps9(gridCellProps, focusProps),
     ...stateProps
   }, /* @__PURE__ */ React52.createElement(Checkbox, {
     ...checkboxProps
@@ -2306,7 +2327,7 @@ import React53, { useRef as useRef12 } from "react";
 import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
-import { mergeProps as mergeProps11 } from "@react-aria/utils";
+import { mergeProps as mergeProps10 } from "@react-aria/utils";
 import { Box as Box31, useStateProps as useStateProps13 } from "@marigold/system";
 var SortIndicator = ({
   direction = "ascending",
@@ -2344,7 +2365,7 @@ var TableColumnHeader = ({ column }) => {
     ref,
     __baseCSS: { cursor: "default" },
     css: styles.header,
-    ...mergeProps11(columnHeaderProps, hoverProps, focusProps),
+    ...mergeProps10(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
   }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ React53.createElement(SortIndicator, {
     direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
@@ -2380,7 +2401,7 @@ import React56, { useRef as useRef14 } from "react";
 import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
 import { useHover as useHover7 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
-import { mergeProps as mergeProps12 } from "@react-aria/utils";
+import { mergeProps as mergeProps11 } from "@react-aria/utils";
 import { Box as Box32, useStateProps as useStateProps14 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
   const ref = useRef14(null);
@@ -2412,7 +2433,7 @@ var TableRow = ({ children, row }) => {
       cursor: !interactive ? "text" : disabled ? "default" : "pointer"
     },
     css: styles.row,
-    ...mergeProps12(rowProps, focusProps, hoverProps),
+    ...mergeProps11(rowProps, focusProps, hoverProps),
     ...stateProps
   }, children);
 };
@@ -2425,7 +2446,7 @@ import {
   useTableColumnHeader as useTableColumnHeader2,
   useTableSelectAllCheckbox
 } from "@react-aria/table";
-import { mergeProps as mergeProps13 } from "@react-aria/utils";
+import { mergeProps as mergeProps12 } from "@react-aria/utils";
 import { Box as Box33, useStateProps as useStateProps15 } from "@marigold/system";
 var TableSelectAllCell = ({ column }) => {
   const ref = useRef15(null);
@@ -2453,7 +2474,7 @@ var TableSelectAllCell = ({ column }) => {
       lineHeight: 1
     },
     css: styles.header,
-    ...mergeProps13(columnHeaderProps, hoverProps, focusProps),
+    ...mergeProps12(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
   }, /* @__PURE__ */ React57.createElement(Checkbox, {
     ...checkboxProps
@@ -2569,7 +2590,7 @@ import React60, { forwardRef as forwardRef13 } from "react";
 import { useHover as useHover9 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
 import { useTextField } from "@react-aria/textfield";
-import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef13 } from "@react-aria/utils";
 import {
   Box as Box36,
   useComponentStyles as useComponentStyles31,
@@ -2588,7 +2609,7 @@ var TextArea = forwardRef13(
     ...props
   }, ref) => {
     const { label, description, errorMessage } = props;
-    const textAreaRef = useObjectRef11(ref);
+    const textAreaRef = useObjectRef13(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
       {
         inputElementType: "textarea",
@@ -2641,12 +2662,12 @@ import React61, { forwardRef as forwardRef14 } from "react";
 import { useHover as useHover10 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
-import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef14 } from "@react-aria/utils";
 import { useStateProps as useStateProps17 } from "@marigold/system";
 var TextField = forwardRef14(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = useObjectRef12(ref);
+    const inputRef = useObjectRef14(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField2(
       {
         isDisabled: disabled,
@@ -2738,7 +2759,7 @@ var useTooltipContext = () => useContext8(TooltipContext);
 // src/Tooltip/TooltipTrigger.tsx
 import React63, { useRef as useRef17 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
-import { useOverlayPosition as useOverlayPosition3 } from "@react-aria/overlays";
+import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
 import { useTooltipTriggerState } from "@react-stately/tooltip";
 var TooltipTrigger = ({
@@ -2769,7 +2790,7 @@ var TooltipTrigger = ({
     overlayProps: positionProps,
     placement: overlayPlacement,
     arrowProps
-  } = useOverlayPosition3({
+  } = useOverlayPosition({
     placement: props.placement,
     targetRef: tooltipTriggerRef,
     offset: props.offset,
@@ -2978,6 +2999,7 @@ export {
   MarigoldProvider,
   Menu,
   Message,
+  Modal,
   NumberField,
   Overlay,
   Popover,