@marigold/components 4.1.3 → 4.1.5

package/dist/index.js

@@ -54,6 +54,7 @@ __export(src_exports, {
   MarigoldProvider: () => MarigoldProvider,
   Menu: () => Menu,
   Message: () => Message,
+  Modal: () => Modal,
   NumberField: () => NumberField,
   Overlay: () => Overlay,
   Popover: () => Popover,
@@ -713,7 +714,8 @@ var Modal = (0, import_react18.forwardRef)(
       restoreFocus: true,
       autoFocus: true
     }, /* @__PURE__ */ import_react18.default.createElement(Underlay, {
-      ...underlayProps
+      ...underlayProps,
+      variant: "modal"
     }), /* @__PURE__ */ import_react18.default.createElement("div", {
       style: {
         display: "flex",
@@ -734,58 +736,96 @@ var Modal = (0, import_react18.forwardRef)(
 
 // src/Overlay/Overlay.tsx
 var import_react19 = __toESM(require("react"));
+var import_react_transition_group = require("react-transition-group");
 var import_overlays2 = require("@react-aria/overlays");
-var Overlay = ({
-  children,
-  open = false,
-  container,
-  ...props
-}) => {
-  if (!open) {
+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 = (0, import_react19.useRef)(null);
+  let mountOverlay = open;
+  if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ import_react19.default.createElement(import_overlays2.OverlayContainer, {
+  return /* @__PURE__ */ import_react19.default.createElement(import_overlays2.Overlay, {
     portalContainer: container
-  }, /* @__PURE__ */ import_react19.default.createElement(import_system.Box, {
-    ...props
-  }, children));
+  }, /* @__PURE__ */ import_react19.default.createElement(import_react_transition_group.Transition, {
+    nodeRef,
+    timeout: duration,
+    in: open,
+    appear: true
+  }, (state) => /* @__PURE__ */ import_react19.default.createElement("div", {
+    ref: nodeRef,
+    "data-testid": "overlay",
+    style: {
+      ...defaultStyle,
+      ...transitionStyles[state]
+    }
+  }, children)));
 };
 
 // src/Overlay/Popover.tsx
 var import_react20 = __toESM(require("react"));
 var import_overlays3 = require("@react-aria/overlays");
 var import_utils4 = require("@react-aria/utils");
+var import_focus4 = require("@react-aria/focus");
 var Popover = (0, import_react20.forwardRef)(
+  (props, ref) => {
+    const popoverRef = (0, import_utils4.useObjectRef)(ref);
+    let { children, state, ...otherProps } = props;
+    return /* @__PURE__ */ import_react20.default.createElement(Overlay, {
+      open: state.isOpen,
+      ...otherProps
+    }, /* @__PURE__ */ import_react20.default.createElement(PopoverWrapper, {
+      ref: popoverRef,
+      ...props
+    }, children));
+  }
+);
+var PopoverWrapper = (0, import_react20.forwardRef)(
   ({
     children,
-    open,
-    dismissable,
+    isNonModal,
+    state,
     keyboardDismissDisabled,
-    shouldCloseOnBlur,
-    minWidth = 0,
     ...props
   }, ref) => {
-    const fallbackRef = (0, import_react20.useRef)(null);
-    const popoverRef = ref || fallbackRef;
-    const { overlayProps } = (0, import_overlays3.useOverlay)(
+    const { popoverProps, underlayProps } = (0, import_overlays3.usePopover)(
       {
-        isOpen: open,
-        isDismissable: dismissable,
+        ...props,
+        isNonModal,
         isKeyboardDismissDisabled: keyboardDismissDisabled,
-        shouldCloseOnBlur,
-        ...props
+        popoverRef: ref,
+        placement: "bottom left"
       },
-      popoverRef
+      state
     );
-    const { modalProps } = (0, import_overlays3.useModal)({});
-    const style = { minWidth };
-    return /* @__PURE__ */ import_react20.default.createElement(Overlay, {
-      open
-    }, /* @__PURE__ */ import_react20.default.createElement(import_system.Box, {
-      ref: popoverRef,
-      role: "presentation",
-      ...(0, import_utils4.mergeProps)(props, overlayProps, modalProps, style)
-    }, children));
+    return /* @__PURE__ */ import_react20.default.createElement(import_focus4.FocusScope, {
+      restoreFocus: true
+    }, !isNonModal && /* @__PURE__ */ import_react20.default.createElement(Underlay, {
+      ...underlayProps
+    }), /* @__PURE__ */ import_react20.default.createElement("div", {
+      ...popoverProps,
+      style: {
+        ...popoverProps.style,
+        minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
+      },
+      ref,
+      role: "presentation"
+    }, !isNonModal && /* @__PURE__ */ import_react20.default.createElement(import_overlays3.DismissButton, {
+      onDismiss: state.close
+    }), children, /* @__PURE__ */ import_react20.default.createElement(import_overlays3.DismissButton, {
+      onDismiss: state.close
+    })));
   }
 );
 
@@ -1072,9 +1112,8 @@ List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 var import_react35 = __toESM(require("react"));
-var import_focus5 = require("@react-aria/focus");
 var import_menu4 = require("@react-aria/menu");
-var import_overlays6 = require("@react-aria/overlays");
+var import_overlays5 = require("@react-aria/overlays");
 var import_collections = require("@react-stately/collections");
 var import_tree = require("@react-stately/tree");
 var import_system22 = require("@marigold/system");
@@ -1088,26 +1127,21 @@ var useMenuContext = () => (0, import_react32.useContext)(MenuContext);
 var import_react33 = __toESM(require("react"));
 var import_menu = require("@react-stately/menu");
 var import_menu2 = require("@react-aria/menu");
-var import_overlays5 = require("@react-aria/overlays");
 var import_interactions4 = require("@react-aria/interactions");
+var import_utils6 = require("@react-aria/utils");
 var MenuTrigger = ({ disabled, children }) => {
   const [menuTrigger, menu] = import_react33.default.Children.toArray(children);
   const menuTriggerRef = (0, import_react33.useRef)(null);
-  const overlayRef = (0, import_react33.useRef)(null);
+  const menuRef = (0, import_utils6.useObjectRef)();
   const state = (0, import_menu.useMenuTriggerState)({});
   const { menuTriggerProps, menuProps } = (0, import_menu2.useMenuTrigger)(
     { trigger: "press", isDisabled: disabled },
     state,
     menuTriggerRef
   );
-  const { overlayProps: positionProps } = (0, import_overlays5.useOverlayPosition)({
-    targetRef: menuTriggerRef,
-    overlayRef,
-    isOpen: state.isOpen,
-    placement: "bottom left"
-  });
   const menuContext = {
     ...menuProps,
+    ref: menuRef,
     open: state.isOpen,
     onClose: state.close,
     autoFocus: state.focusStrategy
@@ -1119,21 +1153,17 @@ var MenuTrigger = ({ disabled, children }) => {
     ref: menuTriggerRef,
     isPressed: state.isOpen
   }, menuTrigger), /* @__PURE__ */ import_react33.default.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));
 };
 
 // src/Menu/MenuItem.tsx
 var import_react34 = __toESM(require("react"));
-var import_focus4 = require("@react-aria/focus");
+var import_focus5 = require("@react-aria/focus");
 var import_menu3 = require("@react-aria/menu");
-var import_utils6 = require("@react-aria/utils");
+var import_utils7 = require("@react-aria/utils");
 var import_system21 = require("@marigold/system");
 var MenuItem = ({ item, state, onAction, css }) => {
   const ref = (0, import_react34.useRef)(null);
@@ -1147,7 +1177,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
     state,
     ref
   );
-  const { isFocusVisible, focusProps } = (0, import_focus4.useFocusRing)();
+  const { isFocusVisible, focusProps } = (0, import_focus5.useFocusRing)();
   const stateProps = (0, import_system21.useStateProps)({
     focus: isFocusVisible
   });
@@ -1160,26 +1190,26 @@ var MenuItem = ({ item, state, onAction, css }) => {
       }
     },
     css,
-    ...(0, import_utils6.mergeProps)(menuItemProps, focusProps),
+    ...(0, import_utils7.mergeProps)(menuItemProps, focusProps),
     ...stateProps
   }, item.rendered);
 };
 
 // src/Menu/Menu.tsx
+var import_utils8 = require("@react-aria/utils");
 var Menu = ({ variant, size, ...props }) => {
-  const menuContext = useMenuContext();
+  const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
   const ref = (0, import_react35.useRef)(null);
   const state = (0, import_tree.useTreeState)({ ...ownProps, selectionMode: "none" });
   const { menuProps } = (0, import_menu4.useMenu)(ownProps, state, ref);
+  (0, import_utils8.useSyncRef)({ ref: scrollRef }, ref);
   const styles = (0, import_system22.useComponentStyles)(
     "Menu",
     { variant, size },
     { parts: ["container", "item"] }
   );
-  return /* @__PURE__ */ import_react35.default.createElement(import_focus5.FocusScope, {
-    restoreFocus: true
-  }, /* @__PURE__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement(import_overlays6.DismissButton, {
+  return /* @__PURE__ */ import_react35.default.createElement("div", null, /* @__PURE__ */ import_react35.default.createElement(import_overlays5.DismissButton, {
     onDismiss: ownProps.onClose
   }), /* @__PURE__ */ import_react35.default.createElement(import_system22.Box, {
     as: "ul",
@@ -1197,9 +1227,9 @@ var Menu = ({ variant, size, ...props }) => {
     state,
     onAction: props.onSelect,
     css: styles.item
-  }))), /* @__PURE__ */ import_react35.default.createElement(import_overlays6.DismissButton, {
+  }))), /* @__PURE__ */ import_react35.default.createElement(import_overlays5.DismissButton, {
     onDismiss: ownProps.onClose
-  })));
+  }));
 };
 Menu.Trigger = MenuTrigger;
 Menu.Item = import_collections.Item;
@@ -1252,7 +1282,7 @@ var import_focus6 = require("@react-aria/focus");
 var import_interactions6 = require("@react-aria/interactions");
 var import_i18n = require("@react-aria/i18n");
 var import_numberfield = require("@react-aria/numberfield");
-var import_utils8 = require("@react-aria/utils");
+var import_utils10 = require("@react-aria/utils");
 var import_numberfield2 = require("@react-stately/numberfield");
 var import_system27 = require("@marigold/system");
 
@@ -1340,7 +1370,7 @@ var FieldBase = ({
 var import_react39 = __toESM(require("react"));
 var import_button3 = require("@react-aria/button");
 var import_interactions5 = require("@react-aria/interactions");
-var import_utils7 = require("@react-aria/utils");
+var import_utils9 = require("@react-aria/utils");
 var import_system26 = require("@marigold/system");
 var Plus = () => /* @__PURE__ */ import_react39.default.createElement(import_system26.Box, {
   as: "svg",
@@ -1383,7 +1413,7 @@ var StepButton = ({ direction, css, ...props }) => {
       cursor: props.isDisabled ? "not-allowed" : "pointer"
     },
     css,
-    ...(0, import_utils7.mergeProps)(buttonProps, hoverProps),
+    ...(0, import_utils9.mergeProps)(buttonProps, hoverProps),
     ...stateProps
   }, /* @__PURE__ */ import_react39.default.createElement(Icon3, null));
 };
@@ -1410,7 +1440,7 @@ var NumberField = (0, import_react40.forwardRef)(
     };
     const showStepper = !hideStepper;
     const { locale } = (0, import_i18n.useLocale)();
-    const inputRef = (0, import_utils8.useObjectRef)(ref);
+    const inputRef = (0, import_utils10.useObjectRef)(ref);
     const state = (0, import_numberfield2.useNumberFieldState)({ ...props, locale });
     const {
       labelProps,
@@ -1463,7 +1493,7 @@ var NumberField = (0, import_react40.forwardRef)(
         }
       },
       css: styles.group,
-      ...(0, import_utils8.mergeProps)(groupProps, focusProps, hoverProps),
+      ...(0, import_utils10.mergeProps)(groupProps, focusProps, hoverProps),
       ...stateProps
     }, showStepper && /* @__PURE__ */ import_react40.default.createElement(StepButton, {
       direction: "down",
@@ -1489,7 +1519,7 @@ var import_ssr = require("@react-aria/ssr");
 
 // src/Provider/MarigoldProvider.tsx
 var import_react41 = __toESM(require("react"));
-var import_overlays7 = require("@react-aria/overlays");
+var import_overlays6 = require("@react-aria/overlays");
 var import_system28 = require("@marigold/system");
 function MarigoldProvider({
   children,
@@ -1511,7 +1541,7 @@ function MarigoldProvider({
   }, /* @__PURE__ */ import_react41.default.createElement(import_system28.Global, {
     normalizeDocument: isTopLevel && normalizeDocument,
     selector
-  }), isTopLevel ? /* @__PURE__ */ import_react41.default.createElement(import_overlays7.OverlayProvider, null, children) : children);
+  }), isTopLevel ? /* @__PURE__ */ import_react41.default.createElement(import_overlays6.OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
@@ -1519,7 +1549,7 @@ var import_react44 = __toESM(require("react"));
 var import_interactions7 = require("@react-aria/interactions");
 var import_focus7 = require("@react-aria/focus");
 var import_radio3 = require("@react-aria/radio");
-var import_utils9 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var import_system31 = require("@marigold/system");
 
 // src/Radio/Context.ts
@@ -1616,7 +1646,7 @@ var Radio = (0, import_react44.forwardRef)(
       width: groupWidth,
       ...state
     } = useRadioGroupContext();
-    const inputRef = (0, import_utils9.useObjectRef)(ref);
+    const inputRef = (0, import_utils11.useObjectRef)(ref);
     const { inputProps } = (0, import_radio3.useRadio)(
       { isDisabled: disabled, ...props },
       state,
@@ -1681,16 +1711,15 @@ var import_react49 = __toESM(require("react"));
 var import_button4 = require("@react-aria/button");
 var import_focus8 = require("@react-aria/focus");
 var import_i18n2 = require("@react-aria/i18n");
-var import_overlays8 = require("@react-aria/overlays");
 var import_select = require("@react-aria/select");
 var import_select2 = require("@react-stately/select");
 var import_collections2 = require("@react-stately/collections");
-var import_utils11 = require("@react-aria/utils");
+var import_utils13 = require("@react-aria/utils");
 var import_system35 = require("@marigold/system");
 
 // src/ListBox/ListBox.tsx
 var import_react48 = __toESM(require("react"));
-var import_utils10 = require("@react-aria/utils");
+var import_utils12 = require("@react-aria/utils");
 var import_system34 = require("@marigold/system");
 var import_listbox3 = require("@react-aria/listbox");
 
@@ -1761,7 +1790,7 @@ var ListBoxSection = ({ section, state }) => {
 // src/ListBox/ListBox.tsx
 var ListBox = (0, import_react48.forwardRef)(
   ({ state, variant, size, ...props }, ref) => {
-    const innerRef = (0, import_utils10.useObjectRef)(ref);
+    const innerRef = (0, import_utils12.useObjectRef)(ref);
     const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, innerRef);
     const styles = (0, import_system34.useComponentStyles)(
       "ListBox",
@@ -1818,7 +1847,6 @@ var Chevron = ({ css }) => /* @__PURE__ */ import_react49.default.createElement(
 var Select = (0, import_react49.forwardRef)(
   ({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
     const formatMessage = (0, import_i18n2.useLocalizedStringFormatter)(messages);
-    const buttonRef = (0, import_utils11.useObjectRef)(ref);
     const props = {
       isOpen: open,
       isDisabled: disabled,
@@ -1828,6 +1856,8 @@ var Select = (0, import_react49.forwardRef)(
       ...rest
     };
     const state = (0, import_select2.useSelectState)(props);
+    const buttonRef = (0, import_utils13.useObjectRef)(ref);
+    const listboxRef = (0, import_react49.useRef)(null);
     const {
       labelProps,
       triggerProps,
@@ -1841,13 +1871,6 @@ var Select = (0, import_react49.forwardRef)(
       buttonRef
     );
     const { focusProps, isFocusVisible } = (0, import_focus8.useFocusRing)();
-    const overlayRef = (0, import_react49.useRef)(null);
-    const { overlayProps: positionProps } = (0, import_overlays8.useOverlayPosition)({
-      targetRef: buttonRef,
-      overlayRef,
-      isOpen: state.isOpen,
-      placement: "bottom left"
-    });
     const styles = (0, import_system35.useComponentStyles)(
       "Select",
       { variant, size },
@@ -1890,7 +1913,7 @@ var Select = (0, import_react49.forwardRef)(
       },
       css: styles.button,
       ref: buttonRef,
-      ...(0, import_utils11.mergeProps)(buttonProps, focusProps),
+      ...(0, import_utils13.mergeProps)(buttonProps, focusProps),
       ...stateProps
     }, /* @__PURE__ */ import_react49.default.createElement(import_system35.Box, {
       css: {
@@ -1901,25 +1924,16 @@ var Select = (0, import_react49.forwardRef)(
     }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ import_react49.default.createElement(Chevron, {
       css: styles.icon
     })), /* @__PURE__ */ import_react49.default.createElement(Popover, {
-      open: state.isOpen,
-      onClose: state.close,
-      dismissable: true,
-      shouldCloseOnBlur: true,
-      minWidth: buttonRef.current ? buttonRef.current.offsetWidth : void 0,
-      ref: overlayRef,
-      ...positionProps
-    }, /* @__PURE__ */ import_react49.default.createElement(import_focus8.FocusScope, {
-      restoreFocus: true
-    }, /* @__PURE__ */ import_react49.default.createElement(import_overlays8.DismissButton, {
-      onDismiss: state.close
-    }), /* @__PURE__ */ import_react49.default.createElement(ListBox, {
+      state,
+      triggerRef: buttonRef,
+      scrollRef: listboxRef
+    }, /* @__PURE__ */ import_react49.default.createElement(ListBox, {
+      ref: listboxRef,
       state,
       variant,
       size,
       ...menuProps
-    }), /* @__PURE__ */ import_react49.default.createElement(import_overlays8.DismissButton, {
-      onDismiss: state.close
-    }))));
+    })));
   }
 );
 Select.Option = import_collections2.Item;
@@ -1930,13 +1944,13 @@ var import_react51 = __toESM(require("react"));
 var import_slider2 = require("@react-aria/slider");
 var import_slider3 = require("@react-stately/slider");
 var import_i18n3 = require("@react-aria/i18n");
-var import_utils13 = require("@react-aria/utils");
+var import_utils15 = require("@react-aria/utils");
 var import_system37 = require("@marigold/system");
 
 // src/Slider/Thumb.tsx
 var import_react50 = __toESM(require("react"));
 var import_slider = require("@react-aria/slider");
-var import_utils12 = require("@react-aria/utils");
+var import_utils14 = require("@react-aria/utils");
 var import_system36 = require("@marigold/system");
 
 // src/VisuallyHidden/VisuallyHidden.tsx
@@ -1974,7 +1988,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
     as: "input",
     type: "range",
     ref: inputRef,
-    ...(0, import_utils12.mergeProps)(inputProps, focusProps)
+    ...(0, import_utils14.mergeProps)(inputProps, focusProps)
   })));
 };
 
@@ -1982,7 +1996,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
 var Slider = (0, import_react51.forwardRef)(
   ({ variant, size, width = "100%", ...props }, ref) => {
     const { formatOptions } = props;
-    const trackRef = (0, import_utils13.useObjectRef)(ref);
+    const trackRef = (0, import_utils15.useObjectRef)(ref);
     const numberFormatter = (0, import_i18n3.useNumberFormatter)(formatOptions);
     const state = (0, import_slider3.useSliderState)({ ...props, numberFormatter });
     const { groupProps, trackProps, labelProps, outputProps } = (0, import_slider2.useSlider)(
@@ -2087,7 +2101,7 @@ var Stack = ({
 var import_react54 = __toESM(require("react"));
 var import_focus10 = require("@react-aria/focus");
 var import_switch = require("@react-aria/switch");
-var import_utils14 = require("@react-aria/utils");
+var import_utils16 = require("@react-aria/utils");
 var import_toggle2 = require("@react-stately/toggle");
 var import_system39 = require("@marigold/system");
 var Switch = (0, import_react54.forwardRef)(
@@ -2101,7 +2115,7 @@ var Switch = (0, import_react54.forwardRef)(
     defaultChecked,
     ...rest
   }, ref) => {
-    const inputRef = (0, import_utils14.useObjectRef)(ref);
+    const inputRef = (0, import_utils16.useObjectRef)(ref);
     const props = {
       isSelected: checked,
       isDisabled: disabled,
@@ -2210,7 +2224,7 @@ var TableBody = ({ children }) => {
 var import_react57 = __toESM(require("react"));
 var import_table2 = require("@react-aria/table");
 var import_focus11 = require("@react-aria/focus");
-var import_utils15 = require("@react-aria/utils");
+var import_utils17 = require("@react-aria/utils");
 var import_system40 = require("@marigold/system");
 var TableCell = ({ cell }) => {
   const ref = (0, import_react57.useRef)(null);
@@ -2234,7 +2248,7 @@ var TableCell = ({ cell }) => {
     as: "td",
     ref,
     css: styles.cell,
-    ...(0, import_utils15.mergeProps)(cellProps, focusProps),
+    ...(0, import_utils17.mergeProps)(cellProps, focusProps),
     ...stateProps
   }, cell.rendered);
 };
@@ -2243,7 +2257,7 @@ var TableCell = ({ cell }) => {
 var import_react58 = __toESM(require("react"));
 var import_table3 = require("@react-aria/table");
 var import_focus12 = require("@react-aria/focus");
-var import_utils16 = require("@react-aria/utils");
+var import_utils18 = require("@react-aria/utils");
 var import_system41 = require("@marigold/system");
 
 // src/Table/utils.ts
@@ -2292,7 +2306,7 @@ var TableCheckboxCell = ({ cell }) => {
       lineHeight: 1
     },
     css: styles.cell,
-    ...(0, import_utils16.mergeProps)(gridCellProps, focusProps),
+    ...(0, import_utils18.mergeProps)(gridCellProps, focusProps),
     ...stateProps
   }, /* @__PURE__ */ import_react58.default.createElement(Checkbox, {
     ...checkboxProps
@@ -2304,7 +2318,7 @@ var import_react59 = __toESM(require("react"));
 var import_focus13 = require("@react-aria/focus");
 var import_interactions8 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
-var import_utils18 = require("@react-aria/utils");
+var import_utils20 = require("@react-aria/utils");
 var import_system42 = require("@marigold/system");
 var SortIndicator = ({
   direction = "ascending",
@@ -2342,7 +2356,7 @@ var TableColumnHeader = ({ column }) => {
     ref,
     __baseCSS: { cursor: "default" },
     css: styles.header,
-    ...(0, import_utils18.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+    ...(0, import_utils20.mergeProps)(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
   }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ import_react59.default.createElement(SortIndicator, {
     direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
@@ -2378,7 +2392,7 @@ var import_react62 = __toESM(require("react"));
 var import_focus14 = require("@react-aria/focus");
 var import_interactions9 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
-var import_utils19 = require("@react-aria/utils");
+var import_utils21 = require("@react-aria/utils");
 var import_system43 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
   const ref = (0, import_react62.useRef)(null);
@@ -2410,7 +2424,7 @@ var TableRow = ({ children, row }) => {
       cursor: !interactive ? "text" : disabled ? "default" : "pointer"
     },
     css: styles.row,
-    ...(0, import_utils19.mergeProps)(rowProps, focusProps, hoverProps),
+    ...(0, import_utils21.mergeProps)(rowProps, focusProps, hoverProps),
     ...stateProps
   }, children);
 };
@@ -2420,7 +2434,7 @@ var import_react63 = __toESM(require("react"));
 var import_focus15 = require("@react-aria/focus");
 var import_interactions10 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
-var import_utils20 = require("@react-aria/utils");
+var import_utils22 = require("@react-aria/utils");
 var import_system44 = require("@marigold/system");
 var TableSelectAllCell = ({ column }) => {
   const ref = (0, import_react63.useRef)(null);
@@ -2448,7 +2462,7 @@ var TableSelectAllCell = ({ column }) => {
       lineHeight: 1
     },
     css: styles.header,
-    ...(0, import_utils20.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+    ...(0, import_utils22.mergeProps)(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
   }, /* @__PURE__ */ import_react63.default.createElement(Checkbox, {
     ...checkboxProps
@@ -2562,7 +2576,7 @@ var import_react66 = __toESM(require("react"));
 var import_interactions11 = require("@react-aria/interactions");
 var import_focus16 = require("@react-aria/focus");
 var import_textfield = require("@react-aria/textfield");
-var import_utils22 = require("@react-aria/utils");
+var import_utils24 = require("@react-aria/utils");
 var import_system48 = require("@marigold/system");
 var TextArea = (0, import_react66.forwardRef)(
   ({
@@ -2577,7 +2591,7 @@ var TextArea = (0, import_react66.forwardRef)(
     ...props
   }, ref) => {
     const { label, description, errorMessage } = props;
-    const textAreaRef = (0, import_utils22.useObjectRef)(ref);
+    const textAreaRef = (0, import_utils24.useObjectRef)(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
       {
         inputElementType: "textarea",
@@ -2630,12 +2644,12 @@ var import_react67 = __toESM(require("react"));
 var import_interactions12 = require("@react-aria/interactions");
 var import_focus17 = require("@react-aria/focus");
 var import_textfield2 = require("@react-aria/textfield");
-var import_utils23 = require("@react-aria/utils");
+var import_utils25 = require("@react-aria/utils");
 var import_system49 = require("@marigold/system");
 var TextField = (0, import_react67.forwardRef)(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = (0, import_utils23.useObjectRef)(ref);
+    const inputRef = (0, import_utils25.useObjectRef)(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(
       {
         isDisabled: disabled,
@@ -2724,7 +2738,7 @@ var useTooltipContext = () => (0, import_react69.useContext)(TooltipContext);
 // src/Tooltip/TooltipTrigger.tsx
 var import_react70 = __toESM(require("react"));
 var import_focus18 = require("@react-aria/focus");
-var import_overlays9 = require("@react-aria/overlays");
+var import_overlays7 = require("@react-aria/overlays");
 var import_tooltip = require("@react-aria/tooltip");
 var import_tooltip2 = require("@react-stately/tooltip");
 var TooltipTrigger = ({
@@ -2755,7 +2769,7 @@ var TooltipTrigger = ({
     overlayProps: positionProps,
     placement: overlayPlacement,
     arrowProps
-  } = (0, import_overlays9.useOverlayPosition)({
+  } = (0, import_overlays7.useOverlayPosition)({
     placement: props.placement,
     targetRef: tooltipTriggerRef,
     offset: props.offset,
@@ -2965,6 +2979,7 @@ var XLoader = (0, import_react72.forwardRef)((props, ref) => /* @__PURE__ */ imp
   MarigoldProvider,
   Menu,
   Message,
+  Modal,
   NumberField,
   Overlay,
   Popover,