@marigold/components 4.1.4 → 4.2.0

package/dist/index.mjs

@@ -241,33 +241,36 @@ var Center = ({
 }, children);
 
 // src/Checkbox/Checkbox.tsx
-import React11, { forwardRef as forwardRef2 } from "react";
+import React13, { forwardRef as forwardRef2 } from "react";
 import { useCheckbox, useCheckboxGroupItem } from "@react-aria/checkbox";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 import { useToggleState } from "@react-stately/toggle";
 import {
-  Box as Box7,
-  useComponentStyles as useComponentStyles7,
-  useStateProps as useStateProps2
+  Box as Box9,
+  useComponentStyles as useComponentStyles8,
+  useStateProps as useStateProps3
 } from "@marigold/system";
 
 // src/Checkbox/CheckboxGroup.tsx
-import React10, { createContext, useContext } from "react";
+import React12, { createContext, useContext } from "react";
 import { useCheckboxGroup } from "@react-aria/checkbox";
 import {
   useCheckboxGroupState
 } from "@react-stately/checkbox";
+import { Box as Box8, useStateProps as useStateProps2 } from "@marigold/system";
+
+// src/FieldBase/FieldBase.tsx
+import React11 from "react";
 import {
-  Box as Box6,
-  useComponentStyles as useComponentStyles6
+  Box as Box7,
+  useComponentStyles as useComponentStyles7
 } from "@marigold/system";
 
 // src/Label/Label.tsx
 import React9 from "react";
-import { Required } from "@marigold/icons";
-import { Box as Box5, useComponentStyles as useComponentStyles5 } from "@marigold/system";
+import { Box as Box5, SVG, useComponentStyles as useComponentStyles5 } from "@marigold/system";
 var Label = ({
   as = "label",
   required,
@@ -281,12 +284,105 @@ var Label = ({
     ...props,
     as,
     "aria-required": required,
+    __baseCSS: { display: "flex" },
     css: styles
-  }, children, required && /* @__PURE__ */ React9.createElement(Required, {
+  }, children, required && /* @__PURE__ */ React9.createElement(SVG, {
+    viewBox: "0 0 24 24",
     role: "presentation",
     size: 16,
     fill: "error"
-  }));
+  }, /* @__PURE__ */ React9.createElement("path", {
+    d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z"
+  })));
+};
+
+// src/HelpText/HelpText.tsx
+import React10 from "react";
+import {
+  Box as Box6,
+  SVG as SVG2,
+  useComponentStyles as useComponentStyles6
+} from "@marigold/system";
+var HelpText = ({
+  variant,
+  size,
+  disabled,
+  description,
+  descriptionProps,
+  error,
+  errorMessage,
+  errorMessageProps,
+  ...props
+}) => {
+  var _a;
+  const hasErrorMessage = errorMessage && error;
+  const styles = useComponentStyles6(
+    "HelpText",
+    { variant, size },
+    { parts: ["container", "icon"] }
+  );
+  return /* @__PURE__ */ React10.createElement(Box6, {
+    ...hasErrorMessage ? errorMessageProps : descriptionProps,
+    ...props,
+    __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
+    css: styles.container
+  }, hasErrorMessage ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(SVG2, {
+    viewBox: "0 0 24 24",
+    role: "presentation",
+    size: ((_a = styles == null ? void 0 : styles.icon) == null ? void 0 : _a.size) || 16
+  }, /* @__PURE__ */ React10.createElement("path", {
+    d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z"
+  })), errorMessage) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, description));
+};
+
+// src/FieldBase/FieldBase.tsx
+var FieldBase = ({
+  children,
+  variant,
+  size,
+  width = "100%",
+  disabled,
+  required,
+  label,
+  labelProps,
+  description,
+  descriptionProps,
+  error,
+  errorMessage,
+  errorMessageProps,
+  stateProps,
+  ...props
+}) => {
+  const hasHelpText = !!description || errorMessage && error;
+  const style = useComponentStyles7("Field", { variant, size });
+  return /* @__PURE__ */ React11.createElement(Box7, {
+    ...props,
+    __baseCSS: {
+      display: "flex",
+      flexDirection: "column",
+      width,
+      position: "relative"
+    },
+    css: style
+  }, label && /* @__PURE__ */ React11.createElement(Label, {
+    required,
+    variant,
+    size,
+    ...labelProps,
+    ...stateProps
+  }, label), /* @__PURE__ */ React11.createElement(Box7, {
+    __baseCSS: { display: "flex", flexDirection: "column" }
+  }, children, hasHelpText && /* @__PURE__ */ React11.createElement(HelpText, {
+    ...stateProps,
+    variant,
+    size,
+    disabled,
+    description,
+    descriptionProps,
+    error,
+    errorMessage,
+    errorMessageProps
+  })));
 };
 
 // src/Checkbox/CheckboxGroup.tsx
@@ -296,8 +392,6 @@ var CheckboxGroupContext = createContext(
 var useCheckboxGroupContext = () => useContext(CheckboxGroupContext);
 var CheckboxGroup = ({
   children,
-  variant,
-  size,
   required,
   disabled,
   readOnly,
@@ -312,50 +406,54 @@ var CheckboxGroup = ({
     ...rest
   };
   const state = useCheckboxGroupState(props);
-  const { groupProps, labelProps } = useCheckboxGroup(props, state);
-  const styles = useComponentStyles6(
-    "CheckboxGroup",
-    { variant, size },
-    { parts: ["container", "group"] }
-  );
-  return /* @__PURE__ */ React10.createElement(Box6, {
-    ...groupProps,
-    css: styles.container
-  }, props.label && /* @__PURE__ */ React10.createElement(Label, {
-    as: "span",
+  const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
+  const stateProps = useStateProps2({
+    disabled,
+    readOnly,
+    error
+  });
+  return /* @__PURE__ */ React12.createElement(FieldBase, {
+    label: props.label,
+    labelProps: { as: "span", ...labelProps },
+    description: props.description,
+    descriptionProps,
+    error,
+    errorMessage: props.errorMessage,
+    errorMessageProps,
+    disabled,
+    stateProps,
     required,
-    ...labelProps
-  }, props.label), /* @__PURE__ */ React10.createElement(Box6, {
+    ...groupProps
+  }, /* @__PURE__ */ React12.createElement(Box8, {
     role: "presentation",
     __baseCSS: {
       display: "flex",
       flexDirection: "column",
       alignItems: "start"
-    },
-    css: styles.group
-  }, /* @__PURE__ */ React10.createElement(CheckboxGroupContext.Provider, {
-    value: { variant, size, error, ...state }
+    }
+  }, /* @__PURE__ */ React12.createElement(CheckboxGroupContext.Provider, {
+    value: { error, ...state }
   }, children)));
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ React11.createElement("svg", {
+var CheckMark = () => /* @__PURE__ */ React13.createElement("svg", {
   viewBox: "0 0 12 10"
-}, /* @__PURE__ */ React11.createElement("path", {
+}, /* @__PURE__ */ React13.createElement("path", {
   fill: "currentColor",
   stroke: "none",
   d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
 }));
-var IndeterminateMark = () => /* @__PURE__ */ React11.createElement("svg", {
+var IndeterminateMark = () => /* @__PURE__ */ React13.createElement("svg", {
   width: "12",
   height: "3",
   viewBox: "0 0 12 3"
-}, /* @__PURE__ */ React11.createElement("path", {
+}, /* @__PURE__ */ React13.createElement("path", {
   fill: "currentColor",
   stroke: "none",
   d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
 }));
-var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React11.createElement(Box7, {
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React13.createElement(Box9, {
   "aria-hidden": "true",
   __baseCSS: {
     flex: "0 0 16px",
@@ -371,7 +469,7 @@ var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React1
   },
   css,
   ...props
-}, indeterminate ? /* @__PURE__ */ React11.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React11.createElement(CheckMark, null) : null);
+}, indeterminate ? /* @__PURE__ */ React13.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React13.createElement(CheckMark, null) : null);
 var Checkbox = forwardRef2(
   ({
     size,
@@ -417,17 +515,17 @@ var Checkbox = forwardRef2(
       }),
       inputRef
     );
-    const styles = useComponentStyles7(
+    const styles = useComponentStyles8(
       "Checkbox",
       {
-        variant: (groupState == null ? void 0 : groupState.variant) || variant,
-        size: (groupState == null ? void 0 : groupState.size) || size
+        variant,
+        size
       },
       { parts: ["container", "label", "checkbox"] }
     );
     const { hoverProps, isHovered } = useHover2({});
     const { isFocusVisible, focusProps } = useFocusRing2();
-    const stateProps = useStateProps2({
+    const stateProps = useStateProps3({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -436,7 +534,7 @@ var Checkbox = forwardRef2(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ React11.createElement(Box7, {
+    return /* @__PURE__ */ React13.createElement(Box9, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -447,7 +545,7 @@ var Checkbox = forwardRef2(
       css: styles.container,
       ...hoverProps,
       ...stateProps
-    }, /* @__PURE__ */ React11.createElement(Box7, {
+    }, /* @__PURE__ */ React13.createElement(Box9, {
       as: "input",
       ref: inputRef,
       css: {
@@ -462,12 +560,12 @@ var Checkbox = forwardRef2(
       },
       ...inputProps,
       ...focusProps
-    }), /* @__PURE__ */ React11.createElement(Icon, {
+    }), /* @__PURE__ */ React13.createElement(Icon, {
       checked: inputProps.checked,
       indeterminate,
       css: styles.checkbox,
       ...stateProps
-    }), props.children && /* @__PURE__ */ React11.createElement(Box7, {
+    }), props.children && /* @__PURE__ */ React13.createElement(Box9, {
       css: styles.label,
       ...stateProps
     }, props.children));
@@ -475,7 +573,7 @@ var Checkbox = forwardRef2(
 );
 
 // src/Columns/Columns.tsx
-import React12, {
+import React14, {
   Children,
   cloneElement,
   isValidElement
@@ -495,7 +593,7 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ React12.createElement(Box, {
+  return /* @__PURE__ */ React14.createElement(Box, {
     css: {
       display: "flex",
       flexWrap: "wrap",
@@ -507,7 +605,7 @@ var Columns = ({
       }
     },
     ...props
-  }, Children.map(children, (child, idx) => /* @__PURE__ */ React12.createElement(Box, {
+  }, Children.map(children, (child, idx) => /* @__PURE__ */ React14.createElement(Box, {
     css: {
       flexGrow: columns[idx]
     }
@@ -515,7 +613,7 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-import React13 from "react";
+import React15 from "react";
 import { size as tokenSize } from "@marigold/tokens";
 var ALIGN_ITEMS = {
   left: "start",
@@ -546,7 +644,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = tokenSize[contentType][size];
-  return /* @__PURE__ */ React13.createElement(Box, {
+  return /* @__PURE__ */ React15.createElement(Box, {
     display: "grid",
     css: {
       gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
@@ -560,22 +658,22 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import React21, { useRef as useRef3 } from "react";
+import React24, { useRef as useRef3 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
 import {
-  Box as Box10,
-  useComponentStyles as useComponentStyles11
+  Box as Box13,
+  useComponentStyles as useComponentStyles12
 } from "@marigold/system";
 
 // src/Header/Header.tsx
-import React14 from "react";
+import React16 from "react";
 import {
-  useComponentStyles as useComponentStyles8
+  useComponentStyles as useComponentStyles9
 } from "@marigold/system";
 var Header = ({ children, variant, size, ...props }) => {
-  const styles = useComponentStyles8("Header", { variant, size });
-  return /* @__PURE__ */ React14.createElement(Box, {
+  const styles = useComponentStyles9("Header", { variant, size });
+  return /* @__PURE__ */ React16.createElement(Box, {
     as: "header",
     ...props,
     css: styles
@@ -583,10 +681,10 @@ var Header = ({ children, variant, size, ...props }) => {
 };
 
 // src/Headline/Headline.tsx
-import React15 from "react";
+import React17 from "react";
 import {
-  Box as Box8,
-  useComponentStyles as useComponentStyles9
+  Box as Box10,
+  useComponentStyles as useComponentStyles10
 } from "@marigold/system";
 var Headline = ({
   children,
@@ -597,11 +695,11 @@ var Headline = ({
   level = "1",
   ...props
 }) => {
-  const styles = useComponentStyles9("Headline", {
+  const styles = useComponentStyles10("Headline", {
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ React15.createElement(Box8, {
+  return /* @__PURE__ */ React17.createElement(Box10, {
     as: `h${level}`,
     ...props,
     css: [styles, { color, textAlign: align }]
@@ -614,22 +712,22 @@ var DialogContext = createContext2({});
 var useDialogContext = () => useContext2(DialogContext);
 
 // src/Dialog/DialogTrigger.tsx
-import React20, { useRef as useRef2 } from "react";
+import React23, { useRef as useRef2 } from "react";
 import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState } from "@react-stately/overlays";
 
 // src/Overlay/Modal.tsx
-import React17, { forwardRef as forwardRef3 } from "react";
+import React19, { forwardRef as forwardRef3 } from "react";
 import { FocusScope } from "@react-aria/focus";
 import { useModal, useOverlay, usePreventScroll } from "@react-aria/overlays";
 import { mergeProps as mergeProps2, useObjectRef as useObjectRef3 } from "@react-aria/utils";
 
 // src/Overlay/Underlay.tsx
-import React16 from "react";
-import { Box as Box9, useComponentStyles as useComponentStyles10 } from "@marigold/system";
+import React18 from "react";
+import { Box as Box11, useComponentStyles as useComponentStyles11 } from "@marigold/system";
 var Underlay = ({ size, variant, ...props }) => {
-  const styles = useComponentStyles10("Underlay", { size, variant });
-  return /* @__PURE__ */ React16.createElement(Box9, {
+  const styles = useComponentStyles11("Underlay", { size, variant });
+  return /* @__PURE__ */ React18.createElement(Box11, {
     __baseCSS: {
       position: "fixed",
       inset: 0,
@@ -655,13 +753,14 @@ var Modal = forwardRef3(
     );
     usePreventScroll();
     const { modalProps } = useModal({});
-    return /* @__PURE__ */ React17.createElement(FocusScope, {
+    return /* @__PURE__ */ React19.createElement(FocusScope, {
       contain: true,
       restoreFocus: true,
       autoFocus: true
-    }, /* @__PURE__ */ React17.createElement(Underlay, {
-      ...underlayProps
-    }), /* @__PURE__ */ React17.createElement("div", {
+    }, /* @__PURE__ */ React19.createElement(Underlay, {
+      ...underlayProps,
+      variant: "modal"
+    }), /* @__PURE__ */ React19.createElement("div", {
       style: {
         display: "flex",
         alignItems: "center",
@@ -673,68 +772,163 @@ var Modal = forwardRef3(
       },
       ref: modalRef,
       ...mergeProps2(props, overlayProps, modalProps)
-    }, /* @__PURE__ */ React17.createElement("div", {
+    }, /* @__PURE__ */ React19.createElement("div", {
       style: { pointerEvents: "auto" }
     }, children)));
   }
 );
 
 // src/Overlay/Overlay.tsx
-import React18 from "react";
-import { OverlayContainer } from "@react-aria/overlays";
-var Overlay = ({
-  children,
-  open = false,
-  container,
-  ...props
-}) => {
-  if (!open) {
+import React20, { 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__ */ React20.createElement(ReactAriaOverlay, {
     portalContainer: container
-  }, /* @__PURE__ */ React18.createElement(Box, {
-    ...props
-  }, children));
+  }, /* @__PURE__ */ React20.createElement(Transition, {
+    nodeRef,
+    timeout: duration,
+    in: open,
+    appear: true
+  }, (state) => /* @__PURE__ */ React20.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 React21, { 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__ */ React21.createElement(Overlay, {
+      open: state.isOpen,
+      ...otherProps
+    }, /* @__PURE__ */ React21.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)
+    return /* @__PURE__ */ React21.createElement(FocusScope2, {
+      restoreFocus: true
+    }, !isNonModal && /* @__PURE__ */ React21.createElement(Underlay, {
+      ...underlayProps
+    }), /* @__PURE__ */ React21.createElement("div", {
+      ...popoverProps,
+      style: {
+        ...popoverProps.style,
+        minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
+      },
+      ref,
+      role: "presentation"
+    }, !isNonModal && /* @__PURE__ */ React21.createElement(DismissButton, {
+      onDismiss: state.close
+    }), children, /* @__PURE__ */ React21.createElement(DismissButton, {
+      onDismiss: state.close
+    })));
+  }
+);
+
+// src/Overlay/Tray.tsx
+import React22 from "react";
+import { Box as Box12 } from "@marigold/system";
+import { FocusScope as FocusScope3 } from "@react-aria/focus";
+import {
+  DismissButton as DismissButton2,
+  useModalOverlay
+} from "@react-aria/overlays";
+import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
+import { forwardRef as forwardRef5 } from "react";
+var Tray = forwardRef5(
+  ({ state, children, ...props }, ref) => {
+    const trayRef = useObjectRef5(ref);
+    return /* @__PURE__ */ React22.createElement(Overlay, {
+      open: state.isOpen
+    }, /* @__PURE__ */ React22.createElement(TrayWrapper, {
+      state,
+      ...props,
+      ref: trayRef
     }, children));
   }
 );
+var TrayWrapper = forwardRef5(
+  ({ children, state, ...props }, ref) => {
+    let { modalProps, underlayProps } = useModalOverlay(
+      {
+        ...props,
+        isDismissable: true
+      },
+      state,
+      ref
+    );
+    return /* @__PURE__ */ React22.createElement(FocusScope3, {
+      contain: true,
+      restoreFocus: true,
+      autoFocus: true
+    }, /* @__PURE__ */ React22.createElement(Underlay, {
+      ...underlayProps,
+      variant: "modal"
+    }, /* @__PURE__ */ React22.createElement(Box12, {
+      ...modalProps,
+      ref,
+      __baseCSS: { position: "absolute", width: "100%", bottom: 0 },
+      "data-testid": "tray"
+    }, /* @__PURE__ */ React22.createElement(DismissButton2, {
+      onDismiss: state.close
+    }), children, /* @__PURE__ */ React22.createElement(DismissButton2, {
+      onDismiss: state.close
+    }))));
+  }
+);
 
 // src/Dialog/DialogTrigger.tsx
 var DialogTrigger = ({
@@ -742,19 +936,19 @@ var DialogTrigger = ({
   dismissable = true,
   keyboardDismissable = true
 }) => {
-  const [dialogTrigger, dialog] = React20.Children.toArray(children);
+  const [dialogTrigger, dialog] = React23.Children.toArray(children);
   const dialogTriggerRef = useRef2(null);
   const state = useOverlayTriggerState({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React20.createElement(DialogContext.Provider, {
+  return /* @__PURE__ */ React23.createElement(DialogContext.Provider, {
     value: ctx
-  }, /* @__PURE__ */ React20.createElement(PressResponder, {
+  }, /* @__PURE__ */ React23.createElement(PressResponder, {
     ref: dialogTriggerRef,
     isPressed: state.isOpen,
     onPress: state.toggle
-  }, dialogTrigger), /* @__PURE__ */ React20.createElement(Overlay, {
+  }, dialogTrigger), /* @__PURE__ */ React23.createElement(Overlay, {
     open: state.isOpen
-  }, /* @__PURE__ */ React20.createElement(Modal, {
+  }, /* @__PURE__ */ React23.createElement(Modal, {
     open: state.isOpen,
     onClose: state.close,
     dismissable,
@@ -772,9 +966,9 @@ var CloseButton = ({ css }) => {
     },
     ref
   );
-  return /* @__PURE__ */ React21.createElement(Box10, {
+  return /* @__PURE__ */ React24.createElement(Box13, {
     css: { display: "flex", justifyContent: "flex-end" }
-  }, /* @__PURE__ */ React21.createElement(Box10, {
+  }, /* @__PURE__ */ React24.createElement(Box13, {
     as: "button",
     __baseCSS: {
       outline: "none",
@@ -788,19 +982,19 @@ var CloseButton = ({ css }) => {
     css,
     ref,
     ...buttonProps
-  }, /* @__PURE__ */ React21.createElement("svg", {
+  }, /* @__PURE__ */ React24.createElement("svg", {
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, /* @__PURE__ */ React21.createElement("path", {
+  }, /* @__PURE__ */ React24.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
   }))));
 };
 var addTitleProps = (children, titleProps) => {
-  const childs = React21.Children.toArray(children);
+  const childs = React24.Children.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => React21.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => React24.isValidElement(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -808,7 +1002,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = React21.cloneElement(
+  const titleChild = React24.cloneElement(
     childs[titleIndex],
     titleProps
   );
@@ -825,29 +1019,29 @@ var Dialog = ({
   const ref = useRef3(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
-  const styles = useComponentStyles11(
+  const styles = useComponentStyles12(
     "Dialog",
     { variant, size },
     { parts: ["container", "closeButton"] }
   );
-  return /* @__PURE__ */ React21.createElement(Box10, {
+  return /* @__PURE__ */ React24.createElement(Box13, {
     __baseCSS: { bg: "#fff" },
     css: styles.container,
     ...dialogProps
-  }, closeButton && /* @__PURE__ */ React21.createElement(CloseButton, {
+  }, closeButton && /* @__PURE__ */ React24.createElement(CloseButton, {
     css: styles.closeButton
   }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
 };
 Dialog.Trigger = DialogTrigger;
 
 // src/Divider/Divider.tsx
-import React22 from "react";
+import React25 from "react";
 import { useSeparator } from "@react-aria/separator";
-import { Box as Box11, useComponentStyles as useComponentStyles12 } from "@marigold/system";
+import { Box as Box14, useComponentStyles as useComponentStyles13 } from "@marigold/system";
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = useSeparator(props);
-  const styles = useComponentStyles12("Divider", { variant });
-  return /* @__PURE__ */ React22.createElement(Box11, {
+  const styles = useComponentStyles13("Divider", { variant });
+  return /* @__PURE__ */ React25.createElement(Box14, {
     css: styles,
     ...props,
     ...separatorProps
@@ -855,13 +1049,13 @@ var Divider = ({ variant, ...props }) => {
 };
 
 // src/Footer/Footer.tsx
-import React23 from "react";
+import React26 from "react";
 import {
-  useComponentStyles as useComponentStyles13
+  useComponentStyles as useComponentStyles14
 } from "@marigold/system";
 var Footer = ({ children, variant, size, ...props }) => {
-  const styles = useComponentStyles13("Footer", { variant, size });
-  return /* @__PURE__ */ React23.createElement(Box, {
+  const styles = useComponentStyles14("Footer", { variant, size });
+  return /* @__PURE__ */ React26.createElement(Box, {
     as: "footer",
     ...props,
     css: styles
@@ -869,9 +1063,9 @@ var Footer = ({ children, variant, size, ...props }) => {
 };
 
 // src/Image/Image.tsx
-import React24 from "react";
-import { Box as Box12 } from "@marigold/system";
-import { useComponentStyles as useComponentStyles14 } from "@marigold/system";
+import React27 from "react";
+import { Box as Box15 } from "@marigold/system";
+import { useComponentStyles as useComponentStyles15 } from "@marigold/system";
 var Image = ({
   variant,
   size,
@@ -879,13 +1073,13 @@ var Image = ({
   position,
   ...props
 }) => {
-  const styles = useComponentStyles14("Image", { variant, size });
+  const styles = useComponentStyles15("Image", { variant, size });
   const css = {
     ...styles,
     objectFit: fit,
     objectPosition: position
   };
-  return /* @__PURE__ */ React24.createElement(Box12, {
+  return /* @__PURE__ */ React27.createElement(Box15, {
     ...props,
     as: "img",
     __baseCSS: fit ? { width: " 100%", height: "100%" } : {},
@@ -894,7 +1088,7 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import React25 from "react";
+import React28 from "react";
 var ALIGNMENT_X = {
   left: "flex-start",
   center: "center",
@@ -911,7 +1105,7 @@ var Inline = ({
   alignY = "center",
   children,
   ...props
-}) => /* @__PURE__ */ React25.createElement(Box, {
+}) => /* @__PURE__ */ React28.createElement(Box, {
   css: {
     display: "flex",
     flexWrap: "wrap",
@@ -923,12 +1117,12 @@ var Inline = ({
 }, children);
 
 // src/Input/Input.tsx
-import React26, { forwardRef as forwardRef5 } from "react";
-import { Box as Box13, useComponentStyles as useComponentStyles15 } from "@marigold/system";
-var Input = forwardRef5(
+import React29, { forwardRef as forwardRef6 } from "react";
+import { Box as Box16, useComponentStyles as useComponentStyles16 } from "@marigold/system";
+var Input = forwardRef6(
   ({ variant, size, type = "text", ...props }, ref) => {
-    const styles = useComponentStyles15("Input", { variant, size });
-    return /* @__PURE__ */ React26.createElement(Box13, {
+    const styles = useComponentStyles16("Input", { variant, size });
+    return /* @__PURE__ */ React29.createElement(Box16, {
       ...props,
       ref,
       as: "input",
@@ -939,11 +1133,11 @@ var Input = forwardRef5(
 );
 
 // src/Link/Link.tsx
-import React27, { forwardRef as forwardRef6 } from "react";
+import React30, { forwardRef as forwardRef7 } from "react";
 import { useLink } from "@react-aria/link";
-import { useComponentStyles as useComponentStyles16 } from "@marigold/system";
-import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
-var Link = forwardRef6(
+import { useComponentStyles as useComponentStyles17 } from "@marigold/system";
+import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
+var Link = forwardRef7(
   ({
     as = "a",
     variant,
@@ -954,7 +1148,7 @@ var Link = forwardRef6(
     onPressStart,
     ...props
   }, ref) => {
-    const linkRef = useObjectRef4(ref);
+    const linkRef = useObjectRef6(ref);
     const { linkProps } = useLink(
       {
         ...props,
@@ -963,8 +1157,8 @@ var Link = forwardRef6(
       },
       linkRef
     );
-    const styles = useComponentStyles16("Link", { variant, size });
-    return /* @__PURE__ */ React27.createElement(React27.Fragment, null, " ", /* @__PURE__ */ React27.createElement(Box, {
+    const styles = useComponentStyles17("Link", { variant, size });
+    return /* @__PURE__ */ React30.createElement(React30.Fragment, null, " ", /* @__PURE__ */ React30.createElement(Box, {
       as,
       role: "link",
       css: styles,
@@ -976,10 +1170,10 @@ var Link = forwardRef6(
 );
 
 // src/List/List.tsx
-import React29 from "react";
+import React32 from "react";
 import {
-  Box as Box15,
-  useComponentStyles as useComponentStyles17
+  Box as Box18,
+  useComponentStyles as useComponentStyles18
 } from "@marigold/system";
 
 // src/List/Context.ts
@@ -988,11 +1182,11 @@ var ListContext = createContext3({});
 var useListContext = () => useContext3(ListContext);
 
 // src/List/ListItem.tsx
-import React28 from "react";
-import { Box as Box14 } from "@marigold/system";
+import React31 from "react";
+import { Box as Box17 } from "@marigold/system";
 var ListItem = ({ children, ...props }) => {
   const { styles } = useListContext();
-  return /* @__PURE__ */ React28.createElement(Box14, {
+  return /* @__PURE__ */ React31.createElement(Box17, {
     ...props,
     as: "li",
     css: styles
@@ -1007,89 +1201,85 @@ var List = ({
   size,
   ...props
 }) => {
-  const styles = useComponentStyles17(
+  const styles = useComponentStyles18(
     "List",
     { variant, size },
     { parts: ["ul", "ol", "item"] }
   );
-  return /* @__PURE__ */ React29.createElement(Box15, {
+  return /* @__PURE__ */ React32.createElement(Box18, {
     ...props,
     as,
     css: styles[as]
-  }, /* @__PURE__ */ React29.createElement(ListContext.Provider, {
+  }, /* @__PURE__ */ React32.createElement(ListContext.Provider, {
     value: { styles: styles.item }
   }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import React32, { useRef as useRef6 } from "react";
-import { FocusScope as FocusScope2 } from "@react-aria/focus";
+import React35, { useRef as useRef6 } from "react";
 import { useMenu } from "@react-aria/menu";
-import { DismissButton } from "@react-aria/overlays";
 import { Item } from "@react-stately/collections";
 import { useTreeState } from "@react-stately/tree";
 import {
-  Box as Box17,
-  useComponentStyles as useComponentStyles18
+  Box as Box20,
+  useComponentStyles as useComponentStyles19
 } 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);
 
 // src/Menu/MenuTrigger.tsx
-import React30, { useRef as useRef4 } from "react";
+import React33, { 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 { useMenuTrigger } from "@react-aria/menu";
+import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
+import { useResponsiveValue } from "@marigold/system";
 var MenuTrigger = ({ disabled, children }) => {
-  const [menuTrigger, menu] = React30.Children.toArray(children);
+  const [menuTrigger, menu] = React33.Children.toArray(children);
   const menuTriggerRef = useRef4(null);
-  const overlayRef = useRef4(null);
+  const menuRef = useObjectRef7();
   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
   };
-  return /* @__PURE__ */ React30.createElement(MenuContext.Provider, {
+  const isSmallScreen = useResponsiveValue([true, false, false], 2);
+  return /* @__PURE__ */ React33.createElement(MenuContext.Provider, {
     value: menuContext
-  }, /* @__PURE__ */ React30.createElement(PressResponder2, {
+  }, /* @__PURE__ */ React33.createElement(PressResponder2, {
     ...menuTriggerProps,
     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
+  }, menuTrigger), isSmallScreen ? /* @__PURE__ */ React33.createElement(Tray, {
+    state
+  }, menu) : /* @__PURE__ */ React33.createElement(Popover, {
+    triggerRef: menuTriggerRef,
+    scrollRef: menuRef,
+    state
   }, menu));
 };
 
 // src/Menu/MenuItem.tsx
-import React31, { useRef as useRef5 } from "react";
+import React34, { 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 { Box as Box16, useStateProps as useStateProps3 } from "@marigold/system";
+import { mergeProps as mergeProps3 } from "@react-aria/utils";
+import { Box as Box19, useStateProps as useStateProps4 } from "@marigold/system";
 var MenuItem = ({ item, state, onAction, css }) => {
   const ref = useRef5(null);
   const { onClose } = useMenuContext();
@@ -1103,10 +1293,10 @@ var MenuItem = ({ item, state, onAction, css }) => {
     ref
   );
   const { isFocusVisible, focusProps } = useFocusRing3();
-  const stateProps = useStateProps3({
+  const stateProps = useStateProps4({
     focus: isFocusVisible
   });
-  return /* @__PURE__ */ React31.createElement(Box16, {
+  return /* @__PURE__ */ React34.createElement(Box19, {
     as: "li",
     ref,
     __baseCSS: {
@@ -1115,28 +1305,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);
-  const styles = useComponentStyles18(
+  useSyncRef({ ref: scrollRef }, ref);
+  const styles = useComponentStyles19(
     "Menu",
     { variant, size },
     { parts: ["container", "item"] }
   );
-  return /* @__PURE__ */ React32.createElement(FocusScope2, {
-    restoreFocus: true
-  }, /* @__PURE__ */ React32.createElement("div", null, /* @__PURE__ */ React32.createElement(DismissButton, {
-    onDismiss: ownProps.onClose
-  }), /* @__PURE__ */ React32.createElement(Box17, {
+  return /* @__PURE__ */ React35.createElement(Box20, {
     as: "ul",
     ref,
     __baseCSS: {
@@ -1146,23 +1334,20 @@ var Menu = ({ variant, size, ...props }) => {
     },
     css: styles.container,
     ...menuProps
-  }, [...state.collection].map((item) => /* @__PURE__ */ React32.createElement(MenuItem, {
+  }, [...state.collection].map((item) => /* @__PURE__ */ React35.createElement(MenuItem, {
     key: item.key,
     item,
     state,
     onAction: props.onSelect,
     css: styles.item
-  }))), /* @__PURE__ */ React32.createElement(DismissButton, {
-    onDismiss: ownProps.onClose
   })));
 };
 Menu.Trigger = MenuTrigger;
 Menu.Item = Item;
 
 // src/Message/Message.tsx
-import React33 from "react";
-import { Exclamation, Info, Notification } from "@marigold/icons";
-import { useComponentStyles as useComponentStyles19 } from "@marigold/system";
+import React36 from "react";
+import { useComponentStyles as useComponentStyles20 } from "@marigold/system";
 var Message = ({
   messageTitle,
   variant = "info",
@@ -1170,7 +1355,7 @@ var Message = ({
   children,
   ...props
 }) => {
-  const styles = useComponentStyles19(
+  const styles = useComponentStyles20(
     "Message",
     {
       variant,
@@ -1178,151 +1363,77 @@ var Message = ({
     },
     { parts: ["container", "icon", "title", "content"] }
   );
-  var icon = /* @__PURE__ */ React33.createElement(Info, null);
+  var icon = /* @__PURE__ */ React36.createElement("svg", {
+    viewBox: "0 0 24 24"
+  }, /* @__PURE__ */ React36.createElement("path", {
+    d: "M12 2.85938C6.95437 2.85938 2.85938 6.95437 2.85938 12C2.85938 17.0456 6.95437 21.1406 12 21.1406C17.0456 21.1406 21.1406 17.0456 21.1406 12C21.1406 6.95437 17.0456 2.85938 12 2.85938ZM12.7875 15.9374H11.2125V11.2124H12.7875V15.9374ZM12.7875 9.6375H11.2125V8.0625H12.7875V9.6375Z"
+  }));
   if (variant === "warning") {
-    icon = /* @__PURE__ */ React33.createElement(Notification, null);
+    icon = /* @__PURE__ */ React36.createElement("svg", {
+      viewBox: "0 0 24 24"
+    }, /* @__PURE__ */ React36.createElement("path", {
+      d: "M19.2 3H4.8C3.81 3 3.009 3.81 3.009 4.8L3 21L6.6 17.4H19.2C20.19 17.4 21 16.59 21 15.6V4.8C21 3.81 20.19 3 19.2 3ZM12.9 13.8H11.1V12H12.9V13.8ZM12.9 10.2001H11.1V6.60008H12.9V10.2001Z"
+    }));
   }
   if (variant === "error") {
-    icon = /* @__PURE__ */ React33.createElement(Exclamation, null);
+    icon = /* @__PURE__ */ React36.createElement("svg", {
+      viewBox: "0 0 24 24"
+    }, /* @__PURE__ */ React36.createElement("path", {
+      d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z"
+    }));
   }
-  return /* @__PURE__ */ React33.createElement(Box, {
+  return /* @__PURE__ */ React36.createElement(Box, {
     css: styles.container,
     ...props
-  }, /* @__PURE__ */ React33.createElement(Box, {
+  }, /* @__PURE__ */ React36.createElement(Box, {
     __baseCSS: { display: "flex", alignItems: "top", gap: 4 }
-  }, /* @__PURE__ */ React33.createElement(Box, {
+  }, /* @__PURE__ */ React36.createElement(Box, {
     role: "presentation",
     __baseCSS: { flex: "0 0 16px" },
     css: styles.icon
-  }, icon), /* @__PURE__ */ React33.createElement(Box, {
+  }, icon), /* @__PURE__ */ React36.createElement(Box, {
     css: styles.title
-  }, messageTitle)), /* @__PURE__ */ React33.createElement(Box, {
+  }, messageTitle)), /* @__PURE__ */ React36.createElement(Box, {
     css: styles.content
   }, children));
 };
 
 // src/NumberField/NumberField.tsx
-import React37, { forwardRef as forwardRef7 } from "react";
+import React38, { forwardRef as forwardRef8 } from "react";
 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 useObjectRef8 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import {
-  Box as Box21,
-  useComponentStyles as useComponentStyles22,
-  useStateProps as useStateProps5
-} from "@marigold/system";
-
-// src/FieldBase/FieldBase.tsx
-import React35 from "react";
-import {
-  Box as Box19,
-  useComponentStyles as useComponentStyles21
-} from "@marigold/system";
-
-// src/HelpText/HelpText.tsx
-import React34 from "react";
-import { Exclamation as Exclamation2 } from "@marigold/icons";
-import {
-  Box as Box18,
-  useComponentStyles as useComponentStyles20
+  Box as Box22,
+  useComponentStyles as useComponentStyles21,
+  useStateProps as useStateProps6
 } from "@marigold/system";
-var HelpText = ({
-  variant,
-  size,
-  disabled,
-  description,
-  descriptionProps,
-  error,
-  errorMessage,
-  errorMessageProps,
-  ...props
-}) => {
-  var _a;
-  const hasErrorMessage = errorMessage && error;
-  const styles = useComponentStyles20(
-    "HelpText",
-    { variant, size },
-    { parts: ["container", "icon"] }
-  );
-  return /* @__PURE__ */ React34.createElement(Box18, {
-    ...hasErrorMessage ? errorMessageProps : descriptionProps,
-    ...props,
-    __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
-    css: styles.container
-  }, hasErrorMessage ? /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(Exclamation2, {
-    role: "presentation",
-    size: ((_a = styles == null ? void 0 : styles.icon) == null ? void 0 : _a.size) || 16
-  }), errorMessage) : /* @__PURE__ */ React34.createElement(React34.Fragment, null, description));
-};
-
-// src/FieldBase/FieldBase.tsx
-var FieldBase = ({
-  children,
-  variant,
-  size,
-  width = "100%",
-  disabled,
-  required,
-  label,
-  labelProps,
-  description,
-  descriptionProps,
-  error,
-  errorMessage,
-  errorMessageProps,
-  stateProps
-}) => {
-  const hasHelpText = !!description || errorMessage && error;
-  const style = useComponentStyles21("Field", { variant, size });
-  return /* @__PURE__ */ React35.createElement(Box19, {
-    __baseCSS: { display: "flex", flexDirection: "column", width },
-    css: style
-  }, label && /* @__PURE__ */ React35.createElement(Label, {
-    required,
-    variant,
-    size,
-    ...labelProps,
-    ...stateProps
-  }, label), /* @__PURE__ */ React35.createElement(Box19, {
-    __baseCSS: { display: "flex", flexDirection: "column" }
-  }, children, hasHelpText && /* @__PURE__ */ React35.createElement(HelpText, {
-    ...stateProps,
-    variant,
-    size,
-    disabled,
-    description,
-    descriptionProps,
-    error,
-    errorMessage,
-    errorMessageProps
-  })));
-};
 
 // src/NumberField/StepButton.tsx
-import React36, { useRef as useRef7 } from "react";
+import React37, { 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 { Box as Box20, useStateProps as useStateProps4 } from "@marigold/system";
-var Plus = () => /* @__PURE__ */ React36.createElement(Box20, {
+import { mergeProps as mergeProps4 } from "@react-aria/utils";
+import { Box as Box21, useStateProps as useStateProps5 } from "@marigold/system";
+var Plus = () => /* @__PURE__ */ React37.createElement(Box21, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, /* @__PURE__ */ React36.createElement("path", {
+}, /* @__PURE__ */ React37.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
 }));
-var Minus = () => /* @__PURE__ */ React36.createElement(Box20, {
+var Minus = () => /* @__PURE__ */ React37.createElement(Box21, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, /* @__PURE__ */ React36.createElement("path", {
+}, /* @__PURE__ */ React37.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
@@ -1334,13 +1445,13 @@ var StepButton = ({ direction, css, ...props }) => {
     ref
   );
   const { hoverProps, isHovered } = useHover3(props);
-  const stateProps = useStateProps4({
+  const stateProps = useStateProps5({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React36.createElement(Box20, {
+  return /* @__PURE__ */ React37.createElement(Box21, {
     __baseCSS: {
       display: "flex",
       alignItems: "center",
@@ -1348,13 +1459,13 @@ var StepButton = ({ direction, css, ...props }) => {
       cursor: props.isDisabled ? "not-allowed" : "pointer"
     },
     css,
-    ...mergeProps5(buttonProps, hoverProps),
+    ...mergeProps4(buttonProps, hoverProps),
     ...stateProps
-  }, /* @__PURE__ */ React36.createElement(Icon3, null));
+  }, /* @__PURE__ */ React37.createElement(Icon3, null));
 };
 
 // src/NumberField/NumberField.tsx
-var NumberField = forwardRef7(
+var NumberField = forwardRef8(
   ({
     variant,
     size,
@@ -1375,7 +1486,7 @@ var NumberField = forwardRef7(
     };
     const showStepper = !hideStepper;
     const { locale } = useLocale();
-    const inputRef = useObjectRef5(ref);
+    const inputRef = useObjectRef8(ref);
     const state = useNumberFieldState({ ...props, locale });
     const {
       labelProps,
@@ -1392,19 +1503,19 @@ var NumberField = forwardRef7(
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const styles = useComponentStyles22(
+    const styles = useComponentStyles21(
       "NumberField",
       { variant, size },
       { parts: ["group", "stepper"] }
     );
-    const stateProps = useStateProps5({
+    const stateProps = useStateProps6({
       hover: isHovered,
       focus: isFocused,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ React37.createElement(FieldBase, {
+    return /* @__PURE__ */ React38.createElement(FieldBase, {
       label: props.label,
       labelProps,
       required,
@@ -1417,7 +1528,7 @@ var NumberField = forwardRef7(
       variant,
       size,
       width
-    }, /* @__PURE__ */ React37.createElement(Box21, {
+    }, /* @__PURE__ */ React38.createElement(Box22, {
       "data-group": true,
       __baseCSS: {
         display: "flex",
@@ -1428,19 +1539,19 @@ var NumberField = forwardRef7(
         }
       },
       css: styles.group,
-      ...mergeProps6(groupProps, focusProps, hoverProps),
+      ...mergeProps5(groupProps, focusProps, hoverProps),
       ...stateProps
-    }, showStepper && /* @__PURE__ */ React37.createElement(StepButton, {
+    }, showStepper && /* @__PURE__ */ React38.createElement(StepButton, {
       direction: "down",
       css: styles.stepper,
       ...decrementButtonProps
-    }), /* @__PURE__ */ React37.createElement(Input, {
+    }), /* @__PURE__ */ React38.createElement(Input, {
       ref: inputRef,
       variant,
       size,
       ...inputProps,
       ...stateProps
-    }), showStepper && /* @__PURE__ */ React37.createElement(StepButton, {
+    }), showStepper && /* @__PURE__ */ React38.createElement(StepButton, {
       direction: "up",
       css: styles.stepper,
       ...incrementButtonProps
@@ -1453,7 +1564,7 @@ import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigol
 import { SSRProvider } from "@react-aria/ssr";
 
 // src/Provider/MarigoldProvider.tsx
-import React38 from "react";
+import React39 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   Global,
@@ -1476,26 +1587,26 @@ function MarigoldProvider({
       Nested themes with a "root" property must specify a "selector" to prevent accidentally overriding global CSS`
     );
   }
-  return /* @__PURE__ */ React38.createElement(ThemeProvider, {
+  return /* @__PURE__ */ React39.createElement(ThemeProvider, {
     theme
-  }, /* @__PURE__ */ React38.createElement(Global, {
+  }, /* @__PURE__ */ React39.createElement(Global, {
     normalizeDocument: isTopLevel && normalizeDocument,
     selector
-  }), isTopLevel ? /* @__PURE__ */ React38.createElement(OverlayProvider, null, children) : children);
+  }), isTopLevel ? /* @__PURE__ */ React39.createElement(OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-import React40, {
-  forwardRef as forwardRef8
+import React41, {
+  forwardRef as forwardRef9
 } from "react";
 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 { mergeProps as mergeProps6, useObjectRef as useObjectRef9 } from "@react-aria/utils";
 import {
-  Box as Box23,
-  useComponentStyles as useComponentStyles24,
-  useStateProps as useStateProps6
+  Box as Box24,
+  useComponentStyles as useComponentStyles22,
+  useStateProps as useStateProps8
 } from "@marigold/system";
 
 // src/Radio/Context.ts
@@ -1506,18 +1617,13 @@ var RadioGroupContext = createContext5(
 var useRadioGroupContext = () => useContext5(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import React39 from "react";
+import React40 from "react";
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
-import {
-  Box as Box22,
-  useComponentStyles as useComponentStyles23
-} from "@marigold/system";
+import { Box as Box23, useStateProps as useStateProps7 } from "@marigold/system";
 var RadioGroup = ({
   children,
   orientation = "vertical",
-  size,
-  variant,
   width,
   required,
   disabled,
@@ -1533,20 +1639,26 @@ var RadioGroup = ({
     ...rest
   };
   const state = useRadioGroupState(props);
-  const { radioGroupProps, labelProps } = useRadioGroup(props, state);
-  const styles = useComponentStyles23(
-    "RadioGroup",
-    { variant, size },
-    { parts: ["container", "group"] }
-  );
-  return /* @__PURE__ */ React39.createElement(Box22, {
-    ...radioGroupProps,
-    css: styles.container
-  }, props.label && /* @__PURE__ */ React39.createElement(Label, {
-    as: "span",
+  const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup(props, state);
+  const stateProps = useStateProps7({
+    disabled,
+    readOnly,
+    error
+  });
+  return /* @__PURE__ */ React40.createElement(FieldBase, {
+    width,
+    label: props.label,
+    labelProps: { as: "span", ...labelProps },
+    description: props.description,
+    descriptionProps,
+    error,
+    errorMessage: props.errorMessage,
+    errorMessageProps,
+    disabled,
+    stateProps,
     required,
-    ...labelProps
-  }, props.label), /* @__PURE__ */ React39.createElement(Box22, {
+    ...radioGroupProps
+  }, /* @__PURE__ */ React40.createElement(Box23, {
     role: "presentation",
     "data-orientation": orientation,
     __baseCSS: {
@@ -1554,23 +1666,22 @@ var RadioGroup = ({
       flexDirection: orientation === "vertical" ? "column" : "row",
       alignItems: "start",
       gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
-    },
-    css: styles.group
-  }, /* @__PURE__ */ React39.createElement(RadioGroupContext.Provider, {
-    value: { variant, size, width, error, ...state }
+    }
+  }, /* @__PURE__ */ React40.createElement(RadioGroupContext.Provider, {
+    value: { width, error, state }
   }, children)));
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ React40.createElement("svg", {
+var Dot = () => /* @__PURE__ */ React41.createElement("svg", {
   viewBox: "0 0 6 6"
-}, /* @__PURE__ */ React40.createElement("circle", {
+}, /* @__PURE__ */ React41.createElement("circle", {
   fill: "currentColor",
   cx: "3",
   cy: "3",
   r: "3"
 }));
-var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React40.createElement(Box23, {
+var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React41.createElement(Box24, {
   "aria-hidden": "true",
   __baseCSS: {
     width: 16,
@@ -1585,30 +1696,30 @@ var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React40.createElemen
   },
   css,
   ...props
-}, checked ? /* @__PURE__ */ React40.createElement(Dot, null) : null);
-var Radio = forwardRef8(
+}, checked ? /* @__PURE__ */ React41.createElement(Dot, null) : null);
+var Radio = forwardRef9(
   ({ width, disabled, ...props }, ref) => {
     const {
       variant,
       size,
       error,
       width: groupWidth,
-      ...state
+      state
     } = useRadioGroupContext();
-    const inputRef = useObjectRef6(ref);
+    const inputRef = useObjectRef9(ref);
     const { inputProps } = useRadio(
       { isDisabled: disabled, ...props },
       state,
       inputRef
     );
-    const styles = useComponentStyles24(
+    const styles = useComponentStyles22(
       "Radio",
       { variant: variant || props.variant, size: size || props.size },
       { parts: ["container", "label", "radio"] }
     );
-    const { hoverProps, isHovered } = useHover5({});
+    const { hoverProps, isHovered } = useHover5({ isDisabled: disabled });
     const { isFocusVisible, focusProps } = useFocusRing5();
-    const stateProps = useStateProps6({
+    const stateProps = useStateProps8({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -1616,7 +1727,7 @@ var Radio = forwardRef8(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ React40.createElement(Box23, {
+    return /* @__PURE__ */ React41.createElement(Box24, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -1626,9 +1737,8 @@ var Radio = forwardRef8(
         width: width || groupWidth || "100%"
       },
       css: styles.container,
-      ...hoverProps,
-      ...stateProps
-    }, /* @__PURE__ */ React40.createElement(Box23, {
+      ...mergeProps6(hoverProps, stateProps)
+    }, /* @__PURE__ */ React41.createElement(Box24, {
       as: "input",
       ref: inputRef,
       css: {
@@ -1641,13 +1751,12 @@ var Radio = forwardRef8(
         opacity: 1e-4,
         cursor: inputProps.disabled ? "not-allowed" : "pointer"
       },
-      ...inputProps,
-      ...focusProps
-    }), /* @__PURE__ */ React40.createElement(Icon2, {
+      ...mergeProps6(inputProps, focusProps)
+    }), /* @__PURE__ */ React41.createElement(Icon2, {
       checked: inputProps.checked,
       css: styles.radio,
       ...stateProps
-    }), /* @__PURE__ */ React40.createElement(Box23, {
+    }), /* @__PURE__ */ React41.createElement(Box24, {
       css: styles.label,
       ...stateProps
     }, props.children));
@@ -1656,30 +1765,30 @@ var Radio = forwardRef8(
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-import React44, {
-  forwardRef as forwardRef10,
+import React45, {
+  forwardRef as forwardRef11,
   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 mergeProps7, useObjectRef as useObjectRef11 } from "@react-aria/utils";
 import {
-  Box as Box27,
-  useComponentStyles as useComponentStyles26,
-  useStateProps as useStateProps8
+  Box as Box28,
+  useComponentStyles as useComponentStyles24,
+  useResponsiveValue as useResponsiveValue2,
+  useStateProps as useStateProps10
 } from "@marigold/system";
 
 // src/ListBox/ListBox.tsx
-import React43, { forwardRef as forwardRef9 } from "react";
-import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
+import React44, { forwardRef as forwardRef10 } from "react";
+import { useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import {
-  Box as Box26,
-  useComponentStyles as useComponentStyles25
+  Box as Box27,
+  useComponentStyles as useComponentStyles23
 } from "@marigold/system";
 import { useListBox } from "@react-aria/listbox";
 
@@ -1689,14 +1798,14 @@ var ListBoxContext = createContext6({});
 var useListBoxContext = () => useContext6(ListBoxContext);
 
 // src/ListBox/ListBoxSection.tsx
-import React42 from "react";
+import React43 from "react";
 import { useListBoxSection } from "@react-aria/listbox";
-import { Box as Box25 } from "@marigold/system";
+import { Box as Box26 } from "@marigold/system";
 
 // src/ListBox/ListBoxOption.tsx
-import React41, { useRef as useRef8 } from "react";
+import React42, { useRef as useRef8 } from "react";
 import { useOption } from "@react-aria/listbox";
-import { Box as Box24, useStateProps as useStateProps7 } from "@marigold/system";
+import { Box as Box25, useStateProps as useStateProps9 } from "@marigold/system";
 var ListBoxOption = ({ item, state }) => {
   const ref = useRef8(null);
   const { optionProps, isSelected, isDisabled, isFocused } = useOption(
@@ -1707,12 +1816,12 @@ var ListBoxOption = ({ item, state }) => {
     ref
   );
   const { styles } = useListBoxContext();
-  const stateProps = useStateProps7({
+  const stateProps = useStateProps9({
     selected: isSelected,
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React41.createElement(Box24, {
+  return /* @__PURE__ */ React42.createElement(Box25, {
     as: "li",
     ref,
     css: styles.option,
@@ -1728,19 +1837,19 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ React42.createElement(Box25, {
+  return /* @__PURE__ */ React43.createElement(Box26, {
     as: "li",
     css: styles.section,
     ...itemProps
-  }, section.rendered && /* @__PURE__ */ React42.createElement(Box25, {
+  }, section.rendered && /* @__PURE__ */ React43.createElement(Box26, {
     css: styles.sectionTitle,
     ...headingProps
-  }, section.rendered), /* @__PURE__ */ React42.createElement(Box25, {
+  }, section.rendered), /* @__PURE__ */ React43.createElement(Box26, {
     as: "ul",
     __baseCSS: { listStyle: "none", p: 0 },
     css: styles.list,
     ...groupProps
-  }, [...section.childNodes].map((node) => /* @__PURE__ */ React42.createElement(ListBoxOption, {
+  }, [...section.childNodes].map((node) => /* @__PURE__ */ React43.createElement(ListBoxOption, {
     key: node.key,
     item: node,
     state
@@ -1748,31 +1857,31 @@ var ListBoxSection = ({ section, state }) => {
 };
 
 // src/ListBox/ListBox.tsx
-var ListBox = forwardRef9(
+var ListBox = forwardRef10(
   ({ state, variant, size, ...props }, ref) => {
-    const innerRef = useObjectRef7(ref);
+    const innerRef = useObjectRef10(ref);
     const { listBoxProps } = useListBox(props, state, innerRef);
-    const styles = useComponentStyles25(
+    const styles = useComponentStyles23(
       "ListBox",
       { variant, size },
       { parts: ["container", "list", "option", "section", "sectionTitle"] }
     );
-    return /* @__PURE__ */ React43.createElement(ListBoxContext.Provider, {
+    return /* @__PURE__ */ React44.createElement(ListBoxContext.Provider, {
       value: { styles }
-    }, /* @__PURE__ */ React43.createElement(Box26, {
+    }, /* @__PURE__ */ React44.createElement(Box27, {
       css: styles.container
-    }, /* @__PURE__ */ React43.createElement(Box26, {
+    }, /* @__PURE__ */ React44.createElement(Box27, {
       as: "ul",
       ref: innerRef,
       __baseCSS: { listStyle: "none", p: 0 },
       css: styles.list,
       ...listBoxProps
     }, [...state.collection].map(
-      (item) => item.type === "section" ? /* @__PURE__ */ React43.createElement(ListBoxSection, {
+      (item) => item.type === "section" ? /* @__PURE__ */ React44.createElement(ListBoxSection, {
         key: item.key,
         section: item,
         state
-      }) : /* @__PURE__ */ React43.createElement(ListBoxOption, {
+      }) : /* @__PURE__ */ React44.createElement(ListBoxOption, {
         key: item.key,
         item,
         state
@@ -1792,22 +1901,21 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ React44.createElement(Box27, {
+var Chevron = ({ css }) => /* @__PURE__ */ React45.createElement(Box28, {
   as: "svg",
   __baseCSS: { width: 16, height: 16, fill: "none" },
   css,
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   strokeWidth: 2
-}, /* @__PURE__ */ React44.createElement("path", {
+}, /* @__PURE__ */ React45.createElement("path", {
   strokeLinecap: "round",
   strokeLinejoin: "round",
   d: "M19 9l-7 7-7-7"
 }));
-var Select = forwardRef10(
+var Select = forwardRef11(
   ({ 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 +1925,9 @@ var Select = forwardRef10(
       ...rest
     };
     const state = useSelectState(props);
+    const buttonRef = useObjectRef11(ref);
+    const listboxRef = useRef9(null);
+    const isSmallScreen = useResponsiveValue2([true, false, false], 2);
     const {
       labelProps,
       triggerProps,
@@ -1830,25 +1941,18 @@ 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(
+    const styles = useComponentStyles24(
       "Select",
       { variant, size },
       { parts: ["container", "button", "icon"] }
     );
-    const stateProps = useStateProps8({
+    const stateProps = useStateProps10({
       disabled,
       error,
       focusVisible: isFocusVisible,
       expanded: state.isOpen
     });
-    return /* @__PURE__ */ React44.createElement(FieldBase, {
+    return /* @__PURE__ */ React45.createElement(FieldBase, {
       variant,
       size,
       width,
@@ -1862,13 +1966,13 @@ var Select = forwardRef10(
       stateProps,
       disabled,
       required
-    }, /* @__PURE__ */ React44.createElement(HiddenSelect, {
+    }, /* @__PURE__ */ React45.createElement(HiddenSelect, {
       state,
       triggerRef: buttonRef,
       label: props.label,
       name: props.name,
       isDisabled: disabled
-    }), /* @__PURE__ */ React44.createElement(Box27, {
+    }), /* @__PURE__ */ React45.createElement(Box28, {
       as: "button",
       __baseCSS: {
         display: "flex",
@@ -1881,52 +1985,51 @@ var Select = forwardRef10(
       ref: buttonRef,
       ...mergeProps7(buttonProps, focusProps),
       ...stateProps
-    }, /* @__PURE__ */ React44.createElement(Box27, {
+    }, /* @__PURE__ */ React45.createElement(Box28, {
       css: {
         overflow: "hidden",
         whiteSpace: "nowrap"
       },
       ...valueProps
-    }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React44.createElement(Chevron, {
+    }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React45.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, {
+    })), isSmallScreen ? /* @__PURE__ */ React45.createElement(Tray, {
+      state
+    }, /* @__PURE__ */ React45.createElement(ListBox, {
+      ref: listboxRef,
       state,
       variant,
       size,
       ...menuProps
-    }), /* @__PURE__ */ React44.createElement(DismissButton2, {
-      onDismiss: state.close
-    }))));
+    })) : /* @__PURE__ */ React45.createElement(Popover, {
+      state,
+      triggerRef: buttonRef,
+      scrollRef: listboxRef
+    }, /* @__PURE__ */ React45.createElement(ListBox, {
+      ref: listboxRef,
+      state,
+      variant,
+      size,
+      ...menuProps
+    })));
   }
 );
 Select.Option = Item2;
 Select.Section = Section;
 
 // src/Slider/Slider.tsx
-import React46, { forwardRef as forwardRef11 } from "react";
+import React47, { forwardRef as forwardRef12 } 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 { useComponentStyles as useComponentStyles27 } from "@marigold/system";
+import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
+import { useComponentStyles as useComponentStyles25 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
-import React45, { useEffect } from "react";
+import React46, { useEffect } from "react";
 import { useSliderThumb } from "@react-aria/slider";
 import { mergeProps as mergeProps8 } from "@react-aria/utils";
-import { useStateProps as useStateProps9 } from "@marigold/system";
+import { useStateProps as useStateProps11 } from "@marigold/system";
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 import { VisuallyHidden } from "@react-aria/visually-hidden";
@@ -1935,10 +2038,10 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
 var Thumb = ({ state, trackRef, styles, ...props }) => {
   const { disabled } = props;
-  const inputRef = React45.useRef(null);
+  const inputRef = React46.useRef(null);
   const { isFocusVisible, focusProps, isFocused } = useFocusRing7();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
-  const stateProps = useStateProps9({
+  const stateProps = useStateProps11({
     focus: focused,
     disabled
   });
@@ -1954,12 +2057,12 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
   useEffect(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ React45.createElement(Box, {
+  return /* @__PURE__ */ React46.createElement(Box, {
     __baseCSS: { top: "50%" },
     css: styles,
     ...thumbProps,
     ...stateProps
-  }, /* @__PURE__ */ React45.createElement(VisuallyHidden, null, /* @__PURE__ */ React45.createElement(Box, {
+  }, /* @__PURE__ */ React46.createElement(VisuallyHidden, null, /* @__PURE__ */ React46.createElement(Box, {
     as: "input",
     type: "range",
     ref: inputRef,
@@ -1968,10 +2071,10 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
 };
 
 // src/Slider/Slider.tsx
-var Slider = forwardRef11(
+var Slider = forwardRef12(
   ({ variant, size, width = "100%", ...props }, ref) => {
     const { formatOptions } = props;
-    const trackRef = useObjectRef9(ref);
+    const trackRef = useObjectRef12(ref);
     const numberFormatter = useNumberFormatter(formatOptions);
     const state = useSliderState({ ...props, numberFormatter });
     const { groupProps, trackProps, labelProps, outputProps } = useSlider(
@@ -1982,12 +2085,12 @@ var Slider = forwardRef11(
       state,
       trackRef
     );
-    const styles = useComponentStyles27(
+    const styles = useComponentStyles25(
       "Slider",
       { variant, size },
       { parts: ["track", "thumb", "label", "output"] }
     );
-    return /* @__PURE__ */ React46.createElement(Box, {
+    return /* @__PURE__ */ React47.createElement(Box, {
       __baseCSS: {
         display: "flex",
         flexDirection: "column",
@@ -1995,18 +2098,18 @@ var Slider = forwardRef11(
         width
       },
       ...groupProps
-    }, /* @__PURE__ */ React46.createElement(Box, {
+    }, /* @__PURE__ */ React47.createElement(Box, {
       __baseCSS: { display: "flex", alignSelf: "stretch" }
-    }, props.children && /* @__PURE__ */ React46.createElement(Box, {
+    }, props.children && /* @__PURE__ */ React47.createElement(Box, {
       as: "label",
       __baseCSS: styles.label,
       ...labelProps
-    }, props.children), /* @__PURE__ */ React46.createElement(Box, {
+    }, props.children), /* @__PURE__ */ React47.createElement(Box, {
       as: "output",
       ...outputProps,
       __baseCSS: { flex: "1 0 auto", textAlign: "end" },
       css: styles.output
-    }, state.getThumbValueLabel(0))), /* @__PURE__ */ React46.createElement(Box, {
+    }, state.getThumbValueLabel(0))), /* @__PURE__ */ React47.createElement(Box, {
       ...trackProps,
       ref: trackRef,
       __baseCSS: {
@@ -2014,13 +2117,13 @@ var Slider = forwardRef11(
         width: "100%",
         cursor: props.disabled ? "not-allowed" : "pointer"
       }
-    }, /* @__PURE__ */ React46.createElement(Box, {
+    }, /* @__PURE__ */ React47.createElement(Box, {
       __baseCSS: {
         top: "50%",
         transform: "translateY(-50%)"
       },
       css: styles.track
-    }), /* @__PURE__ */ React46.createElement(Thumb, {
+    }), /* @__PURE__ */ React47.createElement(Thumb, {
       state,
       trackRef,
       disabled: props.disabled,
@@ -2030,16 +2133,16 @@ var Slider = forwardRef11(
 );
 
 // src/Split/Split.tsx
-import React47 from "react";
-import { Box as Box28 } from "@marigold/system";
-var Split = (props) => /* @__PURE__ */ React47.createElement(Box28, {
+import React48 from "react";
+import { Box as Box29 } from "@marigold/system";
+var Split = (props) => /* @__PURE__ */ React48.createElement(Box29, {
   ...props,
   role: "separator",
   css: { flexGrow: 1 }
 });
 
 // src/Stack/Stack.tsx
-import React48 from "react";
+import React49 from "react";
 var ALIGNMENT_X2 = {
   none: "initial",
   left: "flex-start",
@@ -2059,7 +2162,7 @@ var Stack = ({
   alignY = "none",
   stretch = false,
   ...props
-}) => /* @__PURE__ */ React48.createElement(Box, {
+}) => /* @__PURE__ */ React49.createElement(Box, {
   css: {
     display: "flex",
     flexDirection: "column",
@@ -2073,16 +2176,16 @@ var Stack = ({
 }, children);
 
 // src/Switch/Switch.tsx
-import React49, { forwardRef as forwardRef12 } from "react";
+import React50, { forwardRef as forwardRef13 } 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 useObjectRef13 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
 import {
-  useComponentStyles as useComponentStyles28,
-  useStateProps as useStateProps10
+  useComponentStyles as useComponentStyles26,
+  useStateProps as useStateProps12
 } from "@marigold/system";
-var Switch = forwardRef12(
+var Switch = forwardRef13(
   ({
     variant,
     size,
@@ -2093,7 +2196,7 @@ var Switch = forwardRef12(
     defaultChecked,
     ...rest
   }, ref) => {
-    const inputRef = useObjectRef10(ref);
+    const inputRef = useObjectRef13(ref);
     const props = {
       isSelected: checked,
       isDisabled: disabled,
@@ -2104,18 +2207,18 @@ var Switch = forwardRef12(
     const state = useToggleState2(props);
     const { inputProps } = useSwitch(props, state, inputRef);
     const { isFocusVisible, focusProps } = useFocusRing8();
-    const stateProps = useStateProps10({
+    const stateProps = useStateProps12({
       checked: state.isSelected,
       disabled,
       readOnly,
       focus: isFocusVisible
     });
-    const styles = useComponentStyles28(
+    const styles = useComponentStyles26(
       "Switch",
       { variant, size },
       { parts: ["container", "label", "track", "thumb"] }
     );
-    return /* @__PURE__ */ React49.createElement(Box, {
+    return /* @__PURE__ */ React50.createElement(Box, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -2126,7 +2229,7 @@ var Switch = forwardRef12(
         width
       },
       css: styles.container
-    }, /* @__PURE__ */ React49.createElement(Box, {
+    }, /* @__PURE__ */ React50.createElement(Box, {
       as: "input",
       ref: inputRef,
       css: {
@@ -2141,9 +2244,9 @@ var Switch = forwardRef12(
       },
       ...inputProps,
       ...focusProps
-    }), props.children && /* @__PURE__ */ React49.createElement(Box, {
+    }), props.children && /* @__PURE__ */ React50.createElement(Box, {
       css: styles.label
-    }, props.children), /* @__PURE__ */ React49.createElement(Box, {
+    }, props.children), /* @__PURE__ */ React50.createElement(Box, {
       __baseCSS: {
         position: "relative",
         width: 48,
@@ -2154,7 +2257,7 @@ var Switch = forwardRef12(
       },
       css: styles.track,
       ...stateProps
-    }, /* @__PURE__ */ React49.createElement(Box, {
+    }, /* @__PURE__ */ React50.createElement(Box, {
       __baseCSS: {
         display: "block",
         position: "absolute",
@@ -2178,7 +2281,7 @@ var Switch = forwardRef12(
 );
 
 // src/Table/Table.tsx
-import React58, { useRef as useRef16 } from "react";
+import React59, { useRef as useRef16 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   Cell,
@@ -2189,8 +2292,8 @@ import {
   useTableState
 } from "@react-stately/table";
 import {
-  Box as Box34,
-  useComponentStyles as useComponentStyles29
+  Box as Box35,
+  useComponentStyles as useComponentStyles28
 } from "@marigold/system";
 
 // src/Table/Context.tsx
@@ -2199,21 +2302,21 @@ var TableContext = createContext7({});
 var useTableContext = () => useContext7(TableContext);
 
 // src/Table/TableBody.tsx
-import React50 from "react";
+import React51 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React50.createElement("tbody", {
+  return /* @__PURE__ */ React51.createElement("tbody", {
     ...rowGroupProps
   }, children);
 };
 
 // src/Table/TableCell.tsx
-import React51, { useRef as useRef10 } from "react";
+import React52, { 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 { Box as Box29, useStateProps as useStateProps11 } from "@marigold/system";
+import { Box as Box30, useStateProps as useStateProps13 } from "@marigold/system";
 var TableCell = ({ cell }) => {
   const ref = useRef10(null);
   const { interactive, state, styles } = useTableContext();
@@ -2231,8 +2334,8 @@ var TableCell = ({ cell }) => {
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = useFocusRing9();
-  const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React51.createElement(Box29, {
+  const stateProps = useStateProps13({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ React52.createElement(Box30, {
     as: "td",
     ref,
     css: styles.cell,
@@ -2242,11 +2345,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React52, { useRef as useRef11 } from "react";
+import React53, { 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 { Box as Box30, useStateProps as useStateProps12 } from "@marigold/system";
+import { Box as Box31, useStateProps as useStateProps14 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2284,8 +2387,8 @@ var TableCheckboxCell = ({ cell }) => {
     useTableSelectionCheckbox({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = useFocusRing10();
-  const stateProps = useStateProps12({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React52.createElement(Box30, {
+  const stateProps = useStateProps14({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ React53.createElement(Box31, {
     as: "td",
     ref,
     __baseCSS: {
@@ -2296,22 +2399,22 @@ var TableCheckboxCell = ({ cell }) => {
     css: styles.cell,
     ...mergeProps10(gridCellProps, focusProps),
     ...stateProps
-  }, /* @__PURE__ */ React52.createElement(Checkbox, {
+  }, /* @__PURE__ */ React53.createElement(Checkbox, {
     ...checkboxProps
   }));
 };
 
 // src/Table/TableColumnHeader.tsx
-import React53, { useRef as useRef12 } from "react";
+import React54, { 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 { Box as Box31, useStateProps as useStateProps13 } from "@marigold/system";
+import { Box as Box32, useStateProps as useStateProps15 } from "@marigold/system";
 var SortIndicator = ({
   direction = "ascending",
   visible
-}) => /* @__PURE__ */ React53.createElement(Box31, {
+}) => /* @__PURE__ */ React54.createElement(Box32, {
   as: "span",
   role: "presentation",
   "aria-hidden": "true",
@@ -2334,11 +2437,11 @@ var TableColumnHeader = ({ column }) => {
   );
   const { hoverProps, isHovered } = useHover6({});
   const { focusProps, isFocusVisible } = useFocusRing11();
-  const stateProps = useStateProps13({
+  const stateProps = useStateProps15({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React53.createElement(Box31, {
+  return /* @__PURE__ */ React54.createElement(Box32, {
     as: "th",
     colSpan: column.colspan,
     ref,
@@ -2346,45 +2449,51 @@ var TableColumnHeader = ({ column }) => {
     css: styles.header,
     ...mergeProps11(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
-  }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ React53.createElement(SortIndicator, {
+  }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ React54.createElement(SortIndicator, {
     direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
     visible: ((_b = state.sortDescriptor) == null ? void 0 : _b.column) === column.key
   }));
 };
 
 // src/Table/TableHeader.tsx
-import React54 from "react";
+import React55 from "react";
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React54.createElement("thead", {
+  return /* @__PURE__ */ React55.createElement("thead", {
     ...rowGroupProps
   }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React55, { useRef as useRef13 } from "react";
+import React56, { useRef as useRef13 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef13(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React55.createElement("tr", {
+  return /* @__PURE__ */ React56.createElement("tr", {
     ...rowProps,
     ref
   }, children);
 };
 
 // src/Table/TableRow.tsx
-import React56, { useRef as useRef14 } from "react";
+import React57, { 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 { Box as Box32, useStateProps as useStateProps14 } from "@marigold/system";
+import { Box as Box33, useComponentStyles as useComponentStyles27, useStateProps as useStateProps16 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
   const ref = useRef14(null);
-  const { interactive, state, styles } = useTableContext();
+  const { interactive, state, ...ctx } = useTableContext();
+  const { variant, size } = row.props;
+  const { row: styles } = useComponentStyles27(
+    "Table",
+    { variant: variant || ctx.variant, size: size || ctx.size },
+    { parts: ["row"] }
+  );
   const { rowProps, isPressed } = useTableRow(
     {
       node: row
@@ -2398,27 +2507,27 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = useHover7({
     isDisabled: disabled || !interactive
   });
-  const stateProps = useStateProps14({
+  const stateProps = useStateProps16({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React56.createElement(Box32, {
+  return /* @__PURE__ */ React57.createElement(Box33, {
     as: "tr",
     ref,
     __baseCSS: {
       cursor: !interactive ? "text" : disabled ? "default" : "pointer"
     },
-    css: styles.row,
+    css: styles,
     ...mergeProps12(rowProps, focusProps, hoverProps),
     ...stateProps
   }, children);
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React57, { useRef as useRef15 } from "react";
+import React58, { useRef as useRef15 } from "react";
 import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
 import { useHover as useHover8 } from "@react-aria/interactions";
 import {
@@ -2426,7 +2535,7 @@ import {
   useTableSelectAllCheckbox
 } from "@react-aria/table";
 import { mergeProps as mergeProps13 } from "@react-aria/utils";
-import { Box as Box33, useStateProps as useStateProps15 } from "@marigold/system";
+import { Box as Box34, useStateProps as useStateProps17 } from "@marigold/system";
 var TableSelectAllCell = ({ column }) => {
   const ref = useRef15(null);
   const { state, styles } = useTableContext();
@@ -2440,11 +2549,11 @@ var TableSelectAllCell = ({ column }) => {
   const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
   const { hoverProps, isHovered } = useHover8({});
   const { focusProps, isFocusVisible } = useFocusRing13();
-  const stateProps = useStateProps15({
+  const stateProps = useStateProps17({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React57.createElement(Box33, {
+  return /* @__PURE__ */ React58.createElement(Box34, {
     as: "th",
     ref,
     __baseCSS: {
@@ -2455,7 +2564,7 @@ var TableSelectAllCell = ({ column }) => {
     css: styles.header,
     ...mergeProps13(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
-  }, /* @__PURE__ */ React57.createElement(Checkbox, {
+  }, /* @__PURE__ */ React58.createElement(Checkbox, {
     ...checkboxProps
   }));
 };
@@ -2476,15 +2585,15 @@ var Table = ({
     showSelectionCheckboxes: selectionMode === "multiple" && props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const styles = useComponentStyles29(
+  const styles = useComponentStyles28(
     "Table",
     { variant, size },
     { parts: ["table", "header", "row", "cell"] }
   );
   const { collection } = state;
-  return /* @__PURE__ */ React58.createElement(TableContext.Provider, {
+  return /* @__PURE__ */ React59.createElement(TableContext.Provider, {
     value: { state, interactive, styles }
-  }, /* @__PURE__ */ React58.createElement(Box34, {
+  }, /* @__PURE__ */ React59.createElement(Box35, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
@@ -2496,30 +2605,30 @@ var Table = ({
     },
     css: styles.table,
     ...gridProps
-  }, /* @__PURE__ */ React58.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React58.createElement(TableHeaderRow, {
+  }, /* @__PURE__ */ React59.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React59.createElement(TableHeaderRow, {
     key: headerRow.key,
     item: headerRow
   }, [...headerRow.childNodes].map(
     (column) => {
       var _a;
-      return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React58.createElement(TableSelectAllCell, {
+      return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React59.createElement(TableSelectAllCell, {
         key: column.key,
         column
-      }) : /* @__PURE__ */ React58.createElement(TableColumnHeader, {
+      }) : /* @__PURE__ */ React59.createElement(TableColumnHeader, {
         key: column.key,
         column
       });
     }
-  )))), /* @__PURE__ */ React58.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React58.createElement(TableRow, {
+  )))), /* @__PURE__ */ React59.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React59.createElement(TableRow, {
     key: row.key,
     row
   }, [...row.childNodes].map(
     (cell) => {
       var _a;
-      return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React58.createElement(TableCheckboxCell, {
+      return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React59.createElement(TableCheckboxCell, {
         key: cell.key,
         cell
-      }) : /* @__PURE__ */ React58.createElement(TableCell, {
+      }) : /* @__PURE__ */ React59.createElement(TableCell, {
         key: cell.key,
         cell
       });
@@ -2533,11 +2642,11 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React59 from "react";
+import React60 from "react";
 import {
-  useComponentStyles as useComponentStyles30
+  useComponentStyles as useComponentStyles29
 } from "@marigold/system";
-import { Box as Box35 } from "@marigold/system";
+import { Box as Box36 } from "@marigold/system";
 var Text = ({
   variant,
   size,
@@ -2550,11 +2659,11 @@ var Text = ({
   children,
   ...props
 }) => {
-  const styles = useComponentStyles30("Text", {
+  const styles = useComponentStyles29("Text", {
     variant,
     size
   });
-  return /* @__PURE__ */ React59.createElement(Box35, {
+  return /* @__PURE__ */ React60.createElement(Box36, {
     as: "p",
     ...props,
     css: [
@@ -2565,17 +2674,17 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import React60, { forwardRef as forwardRef13 } from "react";
+import React61, { forwardRef as forwardRef14 } 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 useObjectRef14 } from "@react-aria/utils";
 import {
-  Box as Box36,
-  useComponentStyles as useComponentStyles31,
-  useStateProps as useStateProps16
+  Box as Box37,
+  useComponentStyles as useComponentStyles30,
+  useStateProps as useStateProps18
 } from "@marigold/system";
-var TextArea = forwardRef13(
+var TextArea = forwardRef14(
   ({
     variant,
     size,
@@ -2588,7 +2697,7 @@ var TextArea = forwardRef13(
     ...props
   }, ref) => {
     const { label, description, errorMessage } = props;
-    const textAreaRef = useObjectRef11(ref);
+    const textAreaRef = useObjectRef14(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
       {
         inputElementType: "textarea",
@@ -2602,15 +2711,15 @@ var TextArea = forwardRef13(
     );
     const { hoverProps, isHovered } = useHover9({});
     const { focusProps, isFocusVisible } = useFocusRing14();
-    const stateProps = useStateProps16({
+    const stateProps = useStateProps18({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
       readOnly,
       error
     });
-    const styles = useComponentStyles31("TextArea", { variant, size });
-    return /* @__PURE__ */ React60.createElement(FieldBase, {
+    const styles = useComponentStyles30("TextArea", { variant, size });
+    return /* @__PURE__ */ React61.createElement(FieldBase, {
       label,
       labelProps,
       required,
@@ -2623,7 +2732,7 @@ var TextArea = forwardRef13(
       variant,
       size,
       width
-    }, /* @__PURE__ */ React60.createElement(Box36, {
+    }, /* @__PURE__ */ React61.createElement(Box37, {
       as: "textarea",
       css: styles,
       ref: textAreaRef,
@@ -2637,16 +2746,16 @@ var TextArea = forwardRef13(
 );
 
 // src/TextField/TextField.tsx
-import React61, { forwardRef as forwardRef14 } from "react";
+import React62, { forwardRef as forwardRef15 } 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 { useStateProps as useStateProps17 } from "@marigold/system";
-var TextField = forwardRef14(
+import { useObjectRef as useObjectRef15 } from "@react-aria/utils";
+import { useStateProps as useStateProps19 } from "@marigold/system";
+var TextField = forwardRef15(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = useObjectRef12(ref);
+    const inputRef = useObjectRef15(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField2(
       {
         isDisabled: disabled,
@@ -2662,14 +2771,14 @@ var TextField = forwardRef14(
       isTextInput: true,
       autoFocus
     });
-    const stateProps = useStateProps17({
+    const stateProps = useStateProps19({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ React61.createElement(FieldBase, {
+    return /* @__PURE__ */ React62.createElement(FieldBase, {
       label,
       labelProps,
       required,
@@ -2682,7 +2791,7 @@ var TextField = forwardRef14(
       variant,
       size,
       width
-    }, /* @__PURE__ */ React61.createElement(Input, {
+    }, /* @__PURE__ */ React62.createElement(Input, {
       ref: inputRef,
       variant,
       size,
@@ -2695,7 +2804,7 @@ var TextField = forwardRef14(
 );
 
 // src/Tiles/Tiles.tsx
-import React62 from "react";
+import React63 from "react";
 import { useTheme as useTheme3 } from "@marigold/system";
 var Tiles = ({
   space = "none",
@@ -2711,7 +2820,7 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ React62.createElement(Box, {
+  return /* @__PURE__ */ React63.createElement(Box, {
     ...props,
     css: {
       display: "grid",
@@ -2723,11 +2832,11 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-import React64 from "react";
+import React65 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import {
-  Box as Box37,
-  useComponentStyles as useComponentStyles32
+  Box as Box38,
+  useComponentStyles as useComponentStyles31
 } from "@marigold/system";
 
 // src/Tooltip/Context.ts
@@ -2736,9 +2845,9 @@ var TooltipContext = createContext8({});
 var useTooltipContext = () => useContext8(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React63, { useRef as useRef17 } from "react";
+import React64, { 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 = ({
@@ -2749,7 +2858,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = React63.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = React64.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -2769,7 +2878,7 @@ var TooltipTrigger = ({
     overlayProps: positionProps,
     placement: overlayPlacement,
     arrowProps
-  } = useOverlayPosition3({
+  } = useOverlayPosition({
     placement: props.placement,
     targetRef: tooltipTriggerRef,
     offset: props.offset,
@@ -2777,10 +2886,10 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React63.createElement(FocusableProvider, {
+  return /* @__PURE__ */ React64.createElement(FocusableProvider, {
     ref: tooltipTriggerRef,
     ...triggerProps
-  }, tooltipTrigger, /* @__PURE__ */ React63.createElement(TooltipContext.Provider, {
+  }, tooltipTrigger, /* @__PURE__ */ React64.createElement(TooltipContext.Provider, {
     value: {
       state,
       overlayRef,
@@ -2789,7 +2898,7 @@ var TooltipTrigger = ({
       ...tooltipProps,
       ...positionProps
     }
-  }, /* @__PURE__ */ React63.createElement(Overlay, {
+  }, /* @__PURE__ */ React64.createElement(Overlay, {
     open: state.isOpen
   }, tooltip)));
 };
@@ -2798,18 +2907,18 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = useTooltip({}, state);
-  const styles = useComponentStyles32(
+  const styles = useComponentStyles31(
     "Tooltip",
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ React64.createElement(Box37, {
+  return /* @__PURE__ */ React65.createElement(Box38, {
     ...tooltipProps,
     ...rest,
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }, /* @__PURE__ */ React64.createElement("div", null, children), /* @__PURE__ */ React64.createElement(Box37, {
+  }, /* @__PURE__ */ React65.createElement("div", null, children), /* @__PURE__ */ React65.createElement(Box38, {
     ...arrowProps,
     __baseCSS: {
       position: "absolute",
@@ -2826,122 +2935,122 @@ var Tooltip = ({ children, variant, size }) => {
 Tooltip.Trigger = TooltipTrigger;
 
 // src/XLoader/XLoader.tsx
-import { SVG } from "@marigold/system";
-import React65, { forwardRef as forwardRef15 } from "react";
-var XLoader = forwardRef15((props, ref) => /* @__PURE__ */ React65.createElement(SVG, {
+import { SVG as SVG3 } from "@marigold/system";
+import React66, { forwardRef as forwardRef16 } from "react";
+var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React66.createElement(SVG3, {
   id: "XLoader",
   xmlns: "http://www.w3.org/2000/svg",
   size: 150,
   viewBox: "0 0 150 150",
   ...props,
   ...ref
-}, /* @__PURE__ */ React65.createElement("path", {
+}, /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_1_",
   d: "M35.3 27h26.5l54 74.1H88.7z"
-}), /* @__PURE__ */ React65.createElement("path", {
+}), /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_5_",
   d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
-}, /* @__PURE__ */ React65.createElement("animate", {
+}, /* @__PURE__ */ React66.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "1.0s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React65.createElement("path", {
+})), /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_18_",
   d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
-}, /* @__PURE__ */ React65.createElement("animate", {
+}, /* @__PURE__ */ React66.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.9s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React65.createElement("path", {
+})), /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_19_",
   d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
-}, /* @__PURE__ */ React65.createElement("animate", {
+}, /* @__PURE__ */ React66.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.8s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React65.createElement("path", {
+})), /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_20_",
   d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
-}, /* @__PURE__ */ React65.createElement("animate", {
+}, /* @__PURE__ */ React66.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.7s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React65.createElement("path", {
+})), /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_21_",
   d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z"
-}, /* @__PURE__ */ React65.createElement("animate", {
+}, /* @__PURE__ */ React66.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.6s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React65.createElement("path", {
+})), /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_22_",
   d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z"
-}, /* @__PURE__ */ React65.createElement("animate", {
+}, /* @__PURE__ */ React66.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.5s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React65.createElement("path", {
+})), /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_23_",
   d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
-}, /* @__PURE__ */ React65.createElement("animate", {
+}, /* @__PURE__ */ React66.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.4s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React65.createElement("path", {
+})), /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_24_",
   d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z"
-}, /* @__PURE__ */ React65.createElement("animate", {
+}, /* @__PURE__ */ React66.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.3s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React65.createElement("path", {
+})), /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_25_",
   d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z"
-}, /* @__PURE__ */ React65.createElement("animate", {
+}, /* @__PURE__ */ React66.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.2s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React65.createElement("path", {
+})), /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_26_",
   d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z"
-}, /* @__PURE__ */ React65.createElement("animate", {
+}, /* @__PURE__ */ React66.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.1s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React65.createElement("path", {
+})), /* @__PURE__ */ React66.createElement("path", {
   id: "XMLID_27_",
   d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z"
-}, /* @__PURE__ */ React65.createElement("animate", {
+}, /* @__PURE__ */ React66.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
@@ -2978,6 +3087,7 @@ export {
   MarigoldProvider,
   Menu,
   Message,
+  Modal,
   NumberField,
   Overlay,
   Popover,
@@ -2995,6 +3105,8 @@ export {
   ThemeProvider2 as ThemeProvider,
   Tiles,
   Tooltip,
+  Tray,
+  TrayWrapper,
   Underlay,
   VisuallyHidden,
   XLoader,