@marigold/components 4.2.1 → 5.0.0

package/dist/index.mjs

@@ -93,12 +93,12 @@ var Breakout = ({
   const alignItems = useAlignment(alignY);
   const justifyContent = useAlignment(alignX);
   return /* @__PURE__ */ React4.createElement(Box, {
-    alignItems,
-    justifyContent,
-    width: "100%",
-    height,
-    display: alignY || alignX ? "flex" : "block",
-    __baseCSS: {
+    css: {
+      alignItems,
+      justifyContent,
+      height,
+      width: "100%",
+      display: alignY || alignX ? "flex" : "block",
       gridColumn: "1 / -1 !important"
     },
     ...props
@@ -241,7 +241,7 @@ var Center = ({
 }, children);
 
 // src/Checkbox/Checkbox.tsx
-import React13, { forwardRef as forwardRef2 } from "react";
+import React14, { 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";
@@ -254,7 +254,7 @@ import {
 } from "@marigold/system";
 
 // src/Checkbox/CheckboxGroup.tsx
-import React12, { createContext, useContext } from "react";
+import React13, { createContext as createContext2, useContext as useContext2 } from "react";
 import { useCheckboxGroup } from "@react-aria/checkbox";
 import {
   useCheckboxGroupState
@@ -262,7 +262,7 @@ import {
 import { Box as Box8, useStateProps as useStateProps2 } from "@marigold/system";
 
 // src/FieldBase/FieldBase.tsx
-import React11 from "react";
+import React12 from "react";
 import {
   Box as Box7,
   useComponentStyles as useComponentStyles7
@@ -277,6 +277,7 @@ var Label = ({
   children,
   variant,
   size,
+  labelWidth,
   ...props
 }) => {
   const styles = useComponentStyles5("Label", { size, variant });
@@ -284,7 +285,10 @@ var Label = ({
     ...props,
     as,
     "aria-required": required,
-    __baseCSS: { display: "flex" },
+    __baseCSS: {
+      display: "flex",
+      width: labelWidth
+    },
     css: styles
   }, children, required && /* @__PURE__ */ React9.createElement(SVG, {
     viewBox: "0 0 24 24",
@@ -335,6 +339,17 @@ var HelpText = ({
   })), errorMessage) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, description));
 };
 
+// src/FieldBase/FieldGroup.tsx
+import React11 from "react";
+import { createContext, useContext } from "react";
+var FieldGroupContext = createContext({});
+var useFieldGroupContext = () => useContext(FieldGroupContext);
+var FieldGroup = ({ labelWidth, children }) => {
+  return /* @__PURE__ */ React11.createElement(FieldGroupContext.Provider, {
+    value: { labelWidth }
+  }, children);
+};
+
 // src/FieldBase/FieldBase.tsx
 var FieldBase = ({
   children,
@@ -355,7 +370,8 @@ var FieldBase = ({
 }) => {
   const hasHelpText = !!description || errorMessage && error;
   const style = useComponentStyles7("Field", { variant, size });
-  return /* @__PURE__ */ React11.createElement(Box7, {
+  const { labelWidth } = useFieldGroupContext();
+  return /* @__PURE__ */ React12.createElement(Box7, {
     ...props,
     __baseCSS: {
       display: "flex",
@@ -364,15 +380,16 @@ var FieldBase = ({
       position: "relative"
     },
     css: style
-  }, label && /* @__PURE__ */ React11.createElement(Label, {
+  }, label && /* @__PURE__ */ React12.createElement(Label, {
     required,
     variant,
     size,
+    labelWidth,
     ...labelProps,
     ...stateProps
-  }, label), /* @__PURE__ */ React11.createElement(Box7, {
+  }, label), /* @__PURE__ */ React12.createElement(Box7, {
     __baseCSS: { display: "flex", flexDirection: "column" }
-  }, children, hasHelpText && /* @__PURE__ */ React11.createElement(HelpText, {
+  }, children, hasHelpText && /* @__PURE__ */ React12.createElement(HelpText, {
     ...stateProps,
     variant,
     size,
@@ -386,10 +403,10 @@ var FieldBase = ({
 };
 
 // src/Checkbox/CheckboxGroup.tsx
-var CheckboxGroupContext = createContext(
+var CheckboxGroupContext = createContext2(
   null
 );
-var useCheckboxGroupContext = () => useContext(CheckboxGroupContext);
+var useCheckboxGroupContext = () => useContext2(CheckboxGroupContext);
 var CheckboxGroup = ({
   children,
   required,
@@ -412,7 +429,7 @@ var CheckboxGroup = ({
     readOnly,
     error
   });
-  return /* @__PURE__ */ React12.createElement(FieldBase, {
+  return /* @__PURE__ */ React13.createElement(FieldBase, {
     label: props.label,
     labelProps: { as: "span", ...labelProps },
     description: props.description,
@@ -424,36 +441,36 @@ var CheckboxGroup = ({
     stateProps,
     required,
     ...groupProps
-  }, /* @__PURE__ */ React12.createElement(Box8, {
+  }, /* @__PURE__ */ React13.createElement(Box8, {
     role: "presentation",
     __baseCSS: {
       display: "flex",
       flexDirection: "column",
       alignItems: "start"
     }
-  }, /* @__PURE__ */ React12.createElement(CheckboxGroupContext.Provider, {
+  }, /* @__PURE__ */ React13.createElement(CheckboxGroupContext.Provider, {
     value: { error, ...state }
   }, children)));
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ React13.createElement("svg", {
+var CheckMark = () => /* @__PURE__ */ React14.createElement("svg", {
   viewBox: "0 0 12 10"
-}, /* @__PURE__ */ React13.createElement("path", {
+}, /* @__PURE__ */ React14.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__ */ React13.createElement("svg", {
+var IndeterminateMark = () => /* @__PURE__ */ React14.createElement("svg", {
   width: "12",
   height: "3",
   viewBox: "0 0 12 3"
-}, /* @__PURE__ */ React13.createElement("path", {
+}, /* @__PURE__ */ React14.createElement("path", {
   fill: "currentColor",
   stroke: "none",
   d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
 }));
-var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React13.createElement(Box9, {
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React14.createElement(Box9, {
   "aria-hidden": "true",
   __baseCSS: {
     flex: "0 0 16px",
@@ -469,7 +486,7 @@ var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React1
   },
   css,
   ...props
-}, indeterminate ? /* @__PURE__ */ React13.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React13.createElement(CheckMark, null) : null);
+}, indeterminate ? /* @__PURE__ */ React14.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React14.createElement(CheckMark, null) : null);
 var Checkbox = forwardRef2(
   ({
     size,
@@ -534,7 +551,7 @@ var Checkbox = forwardRef2(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ React13.createElement(Box9, {
+    return /* @__PURE__ */ React14.createElement(Box9, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -545,7 +562,7 @@ var Checkbox = forwardRef2(
       css: styles.container,
       ...hoverProps,
       ...stateProps
-    }, /* @__PURE__ */ React13.createElement(Box9, {
+    }, /* @__PURE__ */ React14.createElement(Box9, {
       as: "input",
       ref: inputRef,
       css: {
@@ -560,12 +577,12 @@ var Checkbox = forwardRef2(
       },
       ...inputProps,
       ...focusProps
-    }), /* @__PURE__ */ React13.createElement(Icon, {
+    }), /* @__PURE__ */ React14.createElement(Icon, {
       checked: inputProps.checked,
       indeterminate,
       css: styles.checkbox,
       ...stateProps
-    }), props.children && /* @__PURE__ */ React13.createElement(Box9, {
+    }), props.children && /* @__PURE__ */ React14.createElement(Box9, {
       css: styles.label,
       ...stateProps
     }, props.children));
@@ -573,7 +590,7 @@ var Checkbox = forwardRef2(
 );
 
 // src/Columns/Columns.tsx
-import React14, {
+import React15, {
   Children,
   cloneElement,
   isValidElement
@@ -593,7 +610,7 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ React14.createElement(Box, {
+  return /* @__PURE__ */ React15.createElement(Box, {
     css: {
       display: "flex",
       flexWrap: "wrap",
@@ -605,7 +622,7 @@ var Columns = ({
       }
     },
     ...props
-  }, Children.map(children, (child, idx) => /* @__PURE__ */ React14.createElement(Box, {
+  }, Children.map(children, (child, idx) => /* @__PURE__ */ React15.createElement(Box, {
     css: {
       flexGrow: columns[idx]
     }
@@ -613,7 +630,7 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-import React15 from "react";
+import React16 from "react";
 import { size as tokenSize } from "@marigold/tokens";
 var ALIGN_ITEMS = {
   left: "start",
@@ -644,9 +661,9 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = tokenSize[contentType][size];
-  return /* @__PURE__ */ React15.createElement(Box, {
-    display: "grid",
+  return /* @__PURE__ */ React16.createElement(Box, {
     css: {
+      display: "grid",
       gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
       placeItems: ALIGN_ITEMS[alignItems],
       "> *": {
@@ -658,7 +675,7 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import React24, { useRef as useRef3 } from "react";
+import React26, { useRef as useRef3 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
 import {
@@ -667,13 +684,13 @@ import {
 } from "@marigold/system";
 
 // src/Header/Header.tsx
-import React16 from "react";
+import React17 from "react";
 import {
   useComponentStyles as useComponentStyles9
 } from "@marigold/system";
 var Header = ({ children, variant, size, ...props }) => {
   const styles = useComponentStyles9("Header", { variant, size });
-  return /* @__PURE__ */ React16.createElement(Box, {
+  return /* @__PURE__ */ React17.createElement(Box, {
     as: "header",
     ...props,
     css: styles
@@ -681,7 +698,7 @@ var Header = ({ children, variant, size, ...props }) => {
 };
 
 // src/Headline/Headline.tsx
-import React17 from "react";
+import React18 from "react";
 import {
   Box as Box10,
   useComponentStyles as useComponentStyles10
@@ -699,7 +716,7 @@ var Headline = ({
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ React17.createElement(Box10, {
+  return /* @__PURE__ */ React18.createElement(Box10, {
     as: `h${level}`,
     ...props,
     css: [styles, { color, textAlign: align }]
@@ -707,27 +724,27 @@ var Headline = ({
 };
 
 // src/Dialog/Context.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
-var DialogContext = createContext2({});
-var useDialogContext = () => useContext2(DialogContext);
+import { createContext as createContext3, useContext as useContext3 } from "react";
+var DialogContext = createContext3({});
+var useDialogContext = () => useContext3(DialogContext);
 
 // src/Dialog/DialogTrigger.tsx
-import React23, { useRef as useRef2 } from "react";
+import React24, { useRef as useRef2 } from "react";
 import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState } from "@react-stately/overlays";
 
 // src/Overlay/Modal.tsx
-import React19, { forwardRef as forwardRef3 } from "react";
+import React20, { 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 React18 from "react";
+import React19 from "react";
 import { Box as Box11, useComponentStyles as useComponentStyles11 } from "@marigold/system";
 var Underlay = ({ size, variant, ...props }) => {
   const styles = useComponentStyles11("Underlay", { size, variant });
-  return /* @__PURE__ */ React18.createElement(Box11, {
+  return /* @__PURE__ */ React19.createElement(Box11, {
     __baseCSS: {
       position: "fixed",
       inset: 0,
@@ -753,14 +770,14 @@ var Modal = forwardRef3(
     );
     usePreventScroll();
     const { modalProps } = useModal({});
-    return /* @__PURE__ */ React19.createElement(FocusScope, {
+    return /* @__PURE__ */ React20.createElement(FocusScope, {
       contain: true,
       restoreFocus: true,
       autoFocus: true
-    }, /* @__PURE__ */ React19.createElement(Underlay, {
+    }, /* @__PURE__ */ React20.createElement(Underlay, {
       ...underlayProps,
       variant: "modal"
-    }), /* @__PURE__ */ React19.createElement("div", {
+    }), /* @__PURE__ */ React20.createElement("div", {
       style: {
         display: "flex",
         alignItems: "center",
@@ -772,14 +789,14 @@ var Modal = forwardRef3(
       },
       ref: modalRef,
       ...mergeProps2(props, overlayProps, modalProps)
-    }, /* @__PURE__ */ React19.createElement("div", {
+    }, /* @__PURE__ */ React20.createElement("div", {
       style: { pointerEvents: "auto" }
     }, children)));
   }
 );
 
 // src/Overlay/Overlay.tsx
-import React20, { useRef } from "react";
+import React21, { useRef } from "react";
 import { Transition } from "react-transition-group";
 import {
   Overlay as ReactAriaOverlay
@@ -802,14 +819,14 @@ var Overlay = ({ children, container, open }) => {
   if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ React20.createElement(ReactAriaOverlay, {
+  return /* @__PURE__ */ React21.createElement(ReactAriaOverlay, {
     portalContainer: container
-  }, /* @__PURE__ */ React20.createElement(Transition, {
+  }, /* @__PURE__ */ React21.createElement(Transition, {
     nodeRef,
     timeout: duration,
     in: open,
     appear: true
-  }, (state) => /* @__PURE__ */ React20.createElement("div", {
+  }, (state) => /* @__PURE__ */ React21.createElement("div", {
     ref: nodeRef,
     "data-testid": "overlay",
     style: {
@@ -820,7 +837,7 @@ var Overlay = ({ children, container, open }) => {
 };
 
 // src/Overlay/Popover.tsx
-import React21, { forwardRef as forwardRef4 } from "react";
+import React22, { forwardRef as forwardRef4 } from "react";
 import {
   DismissButton,
   usePopover
@@ -831,10 +848,10 @@ var Popover = forwardRef4(
   (props, ref) => {
     const popoverRef = useObjectRef4(ref);
     let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ React21.createElement(Overlay, {
+    return /* @__PURE__ */ React22.createElement(Overlay, {
       open: state.isOpen,
       ...otherProps
-    }, /* @__PURE__ */ React21.createElement(PopoverWrapper, {
+    }, /* @__PURE__ */ React22.createElement(PopoverWrapper, {
       ref: popoverRef,
       ...props
     }, children));
@@ -858,11 +875,11 @@ var PopoverWrapper = forwardRef4(
       },
       state
     );
-    return /* @__PURE__ */ React21.createElement(FocusScope2, {
+    return /* @__PURE__ */ React22.createElement(FocusScope2, {
       restoreFocus: true
-    }, !isNonModal && /* @__PURE__ */ React21.createElement(Underlay, {
+    }, !isNonModal && /* @__PURE__ */ React22.createElement(Underlay, {
       ...underlayProps
-    }), /* @__PURE__ */ React21.createElement("div", {
+    }), /* @__PURE__ */ React22.createElement("div", {
       ...popoverProps,
       style: {
         ...popoverProps.style,
@@ -870,16 +887,16 @@ var PopoverWrapper = forwardRef4(
       },
       ref,
       role: "presentation"
-    }, !isNonModal && /* @__PURE__ */ React21.createElement(DismissButton, {
+    }, !isNonModal && /* @__PURE__ */ React22.createElement(DismissButton, {
       onDismiss: state.close
-    }), children, /* @__PURE__ */ React21.createElement(DismissButton, {
+    }), children, /* @__PURE__ */ React22.createElement(DismissButton, {
       onDismiss: state.close
     })));
   }
 );
 
 // src/Overlay/Tray.tsx
-import React22 from "react";
+import React23 from "react";
 import { Box as Box12 } from "@marigold/system";
 import { FocusScope as FocusScope3 } from "@react-aria/focus";
 import {
@@ -891,9 +908,9 @@ import { forwardRef as forwardRef5 } from "react";
 var Tray = forwardRef5(
   ({ state, children, ...props }, ref) => {
     const trayRef = useObjectRef5(ref);
-    return /* @__PURE__ */ React22.createElement(Overlay, {
+    return /* @__PURE__ */ React23.createElement(Overlay, {
       open: state.isOpen
-    }, /* @__PURE__ */ React22.createElement(TrayWrapper, {
+    }, /* @__PURE__ */ React23.createElement(TrayWrapper, {
       state,
       ...props,
       ref: trayRef
@@ -910,21 +927,21 @@ var TrayWrapper = forwardRef5(
       state,
       ref
     );
-    return /* @__PURE__ */ React22.createElement(FocusScope3, {
+    return /* @__PURE__ */ React23.createElement(FocusScope3, {
       contain: true,
       restoreFocus: true,
       autoFocus: true
-    }, /* @__PURE__ */ React22.createElement(Underlay, {
+    }, /* @__PURE__ */ React23.createElement(Underlay, {
       ...underlayProps,
       variant: "modal"
-    }, /* @__PURE__ */ React22.createElement(Box12, {
+    }, /* @__PURE__ */ React23.createElement(Box12, {
       ...modalProps,
       ref,
       __baseCSS: { position: "absolute", width: "100%", bottom: 0 },
       "data-testid": "tray"
-    }, /* @__PURE__ */ React22.createElement(DismissButton2, {
+    }, /* @__PURE__ */ React23.createElement(DismissButton2, {
       onDismiss: state.close
-    }), children, /* @__PURE__ */ React22.createElement(DismissButton2, {
+    }), children, /* @__PURE__ */ React23.createElement(DismissButton2, {
       onDismiss: state.close
     }))));
   }
@@ -936,19 +953,19 @@ var DialogTrigger = ({
   dismissable = true,
   keyboardDismissable = true
 }) => {
-  const [dialogTrigger, dialog] = React23.Children.toArray(children);
+  const [dialogTrigger, dialog] = React24.Children.toArray(children);
   const dialogTriggerRef = useRef2(null);
   const state = useOverlayTriggerState({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React23.createElement(DialogContext.Provider, {
+  return /* @__PURE__ */ React24.createElement(DialogContext.Provider, {
     value: ctx
-  }, /* @__PURE__ */ React23.createElement(PressResponder, {
+  }, /* @__PURE__ */ React24.createElement(PressResponder, {
     ref: dialogTriggerRef,
     isPressed: state.isOpen,
     onPress: state.toggle
-  }, dialogTrigger), /* @__PURE__ */ React23.createElement(Overlay, {
+  }, dialogTrigger), /* @__PURE__ */ React24.createElement(Overlay, {
     open: state.isOpen
-  }, /* @__PURE__ */ React23.createElement(Modal, {
+  }, /* @__PURE__ */ React24.createElement(Modal, {
     open: state.isOpen,
     onClose: state.close,
     dismissable,
@@ -956,6 +973,33 @@ var DialogTrigger = ({
   }, dialog)));
 };
 
+// src/Dialog/DialogController.tsx
+import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
+import React25 from "react";
+var DialogController = ({
+  children,
+  dismissable = true,
+  keyboardDismissable = true,
+  open,
+  onOpenChange
+}) => {
+  const state = useOverlayTriggerState2({
+    isOpen: open,
+    onOpenChange
+  });
+  const ctx = { open: state.isOpen, close: state.close };
+  return /* @__PURE__ */ React25.createElement(DialogContext.Provider, {
+    value: ctx
+  }, /* @__PURE__ */ React25.createElement(Overlay, {
+    open: state.isOpen
+  }, /* @__PURE__ */ React25.createElement(Modal, {
+    open: state.isOpen,
+    onClose: state.close,
+    dismissable,
+    keyboardDismissable
+  }, children)));
+};
+
 // src/Dialog/Dialog.tsx
 var CloseButton = ({ css }) => {
   const ref = useRef3(null);
@@ -966,9 +1010,9 @@ var CloseButton = ({ css }) => {
     },
     ref
   );
-  return /* @__PURE__ */ React24.createElement(Box13, {
+  return /* @__PURE__ */ React26.createElement(Box13, {
     css: { display: "flex", justifyContent: "flex-end" }
-  }, /* @__PURE__ */ React24.createElement(Box13, {
+  }, /* @__PURE__ */ React26.createElement(Box13, {
     as: "button",
     __baseCSS: {
       outline: "none",
@@ -982,19 +1026,19 @@ var CloseButton = ({ css }) => {
     css,
     ref,
     ...buttonProps
-  }, /* @__PURE__ */ React24.createElement("svg", {
+  }, /* @__PURE__ */ React26.createElement("svg", {
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, /* @__PURE__ */ React24.createElement("path", {
+  }, /* @__PURE__ */ React26.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 = React24.Children.toArray(children);
+  const childs = React26.Children.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => React24.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => React26.isValidElement(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1002,7 +1046,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = React24.cloneElement(
+  const titleChild = React26.cloneElement(
     childs[titleIndex],
     titleProps
   );
@@ -1024,24 +1068,25 @@ var Dialog = ({
     { variant, size },
     { parts: ["container", "closeButton"] }
   );
-  return /* @__PURE__ */ React24.createElement(Box13, {
+  return /* @__PURE__ */ React26.createElement(Box13, {
     __baseCSS: { bg: "#fff" },
     css: styles.container,
     ...dialogProps
-  }, closeButton && /* @__PURE__ */ React24.createElement(CloseButton, {
+  }, closeButton && /* @__PURE__ */ React26.createElement(CloseButton, {
     css: styles.closeButton
   }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
 };
 Dialog.Trigger = DialogTrigger;
+Dialog.Controller = DialogController;
 
 // src/Divider/Divider.tsx
-import React25 from "react";
+import React27 from "react";
 import { useSeparator } from "@react-aria/separator";
 import { Box as Box14, useComponentStyles as useComponentStyles13 } from "@marigold/system";
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = useSeparator(props);
   const styles = useComponentStyles13("Divider", { variant });
-  return /* @__PURE__ */ React25.createElement(Box14, {
+  return /* @__PURE__ */ React27.createElement(Box14, {
     css: styles,
     ...props,
     ...separatorProps
@@ -1049,13 +1094,13 @@ var Divider = ({ variant, ...props }) => {
 };
 
 // src/Footer/Footer.tsx
-import React26 from "react";
+import React28 from "react";
 import {
   useComponentStyles as useComponentStyles14
 } from "@marigold/system";
 var Footer = ({ children, variant, size, ...props }) => {
   const styles = useComponentStyles14("Footer", { variant, size });
-  return /* @__PURE__ */ React26.createElement(Box, {
+  return /* @__PURE__ */ React28.createElement(Box, {
     as: "footer",
     ...props,
     css: styles
@@ -1063,7 +1108,7 @@ var Footer = ({ children, variant, size, ...props }) => {
 };
 
 // src/Image/Image.tsx
-import React27 from "react";
+import React29 from "react";
 import { Box as Box15 } from "@marigold/system";
 import { useComponentStyles as useComponentStyles15 } from "@marigold/system";
 var Image = ({
@@ -1079,7 +1124,7 @@ var Image = ({
     objectFit: fit,
     objectPosition: position
   };
-  return /* @__PURE__ */ React27.createElement(Box15, {
+  return /* @__PURE__ */ React29.createElement(Box15, {
     ...props,
     as: "img",
     __baseCSS: fit ? { width: " 100%", height: "100%" } : {},
@@ -1088,7 +1133,7 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import React28 from "react";
+import React30 from "react";
 var ALIGNMENT_X = {
   left: "flex-start",
   center: "center",
@@ -1105,7 +1150,7 @@ var Inline = ({
   alignY = "center",
   children,
   ...props
-}) => /* @__PURE__ */ React28.createElement(Box, {
+}) => /* @__PURE__ */ React30.createElement(Box, {
   css: {
     display: "flex",
     flexWrap: "wrap",
@@ -1117,12 +1162,12 @@ var Inline = ({
 }, children);
 
 // src/Input/Input.tsx
-import React29, { forwardRef as forwardRef6 } from "react";
+import React31, { 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 = useComponentStyles16("Input", { variant, size });
-    return /* @__PURE__ */ React29.createElement(Box16, {
+    return /* @__PURE__ */ React31.createElement(Box16, {
       ...props,
       ref,
       as: "input",
@@ -1133,7 +1178,7 @@ var Input = forwardRef6(
 );
 
 // src/Link/Link.tsx
-import React30, { forwardRef as forwardRef7 } from "react";
+import React32, { forwardRef as forwardRef7 } from "react";
 import { useLink } from "@react-aria/link";
 import { useComponentStyles as useComponentStyles17 } from "@marigold/system";
 import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
@@ -1158,35 +1203,35 @@ var Link = forwardRef7(
       linkRef
     );
     const styles = useComponentStyles17("Link", { variant, size });
-    return /* @__PURE__ */ React30.createElement(React30.Fragment, null, " ", /* @__PURE__ */ React30.createElement(Box, {
+    return /* @__PURE__ */ React32.createElement(Box, {
       as,
       role: "link",
       css: styles,
       ref: linkRef,
       ...props,
       ...linkProps
-    }, children), " ");
+    }, children);
   }
 );
 
 // src/List/List.tsx
-import React32 from "react";
+import React34 from "react";
 import {
   Box as Box18,
   useComponentStyles as useComponentStyles18
 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var ListContext = createContext3({});
-var useListContext = () => useContext3(ListContext);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var ListContext = createContext4({});
+var useListContext = () => useContext4(ListContext);
 
 // src/List/ListItem.tsx
-import React31 from "react";
+import React33 from "react";
 import { Box as Box17 } from "@marigold/system";
 var ListItem = ({ children, ...props }) => {
   const { styles } = useListContext();
-  return /* @__PURE__ */ React31.createElement(Box17, {
+  return /* @__PURE__ */ React33.createElement(Box17, {
     ...props,
     as: "li",
     css: styles
@@ -1206,18 +1251,18 @@ var List = ({
     { variant, size },
     { parts: ["ul", "ol", "item"] }
   );
-  return /* @__PURE__ */ React32.createElement(Box18, {
+  return /* @__PURE__ */ React34.createElement(Box18, {
     ...props,
     as,
     css: styles[as]
-  }, /* @__PURE__ */ React32.createElement(ListContext.Provider, {
+  }, /* @__PURE__ */ React34.createElement(ListContext.Provider, {
     value: { styles: styles.item }
   }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import React35, { useRef as useRef6 } from "react";
+import React37, { useRef as useRef6 } from "react";
 import { useMenu } from "@react-aria/menu";
 import { Item } from "@react-stately/collections";
 import { useTreeState } from "@react-stately/tree";
@@ -1228,24 +1273,32 @@ import {
 
 // src/Menu/Context.ts
 import {
-  createContext as createContext4,
-  useContext as useContext4
+  createContext as createContext5,
+  useContext as useContext5
 } from "react";
-var MenuContext = createContext4({});
-var useMenuContext = () => useContext4(MenuContext);
+var MenuContext = createContext5({});
+var useMenuContext = () => useContext5(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-import React33, { useRef as useRef4 } from "react";
+import React35, { useRef as useRef4 } from "react";
 import { useMenuTriggerState } from "@react-stately/menu";
 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] = React33.Children.toArray(children);
+var MenuTrigger = ({
+  disabled,
+  open,
+  onOpenChange,
+  children
+}) => {
+  const [menuTrigger, menu] = React35.Children.toArray(children);
   const menuTriggerRef = useRef4(null);
   const menuRef = useObjectRef7();
-  const state = useMenuTriggerState({});
+  const state = useMenuTriggerState({
+    isOpen: open,
+    onOpenChange
+  });
   const { menuTriggerProps, menuProps } = useMenuTrigger(
     { trigger: "press", isDisabled: disabled },
     state,
@@ -1259,15 +1312,15 @@ var MenuTrigger = ({ disabled, children }) => {
     autoFocus: state.focusStrategy
   };
   const isSmallScreen = useResponsiveValue([true, false, false], 2);
-  return /* @__PURE__ */ React33.createElement(MenuContext.Provider, {
+  return /* @__PURE__ */ React35.createElement(MenuContext.Provider, {
     value: menuContext
-  }, /* @__PURE__ */ React33.createElement(PressResponder2, {
+  }, /* @__PURE__ */ React35.createElement(PressResponder2, {
     ...menuTriggerProps,
     ref: menuTriggerRef,
     isPressed: state.isOpen
-  }, menuTrigger), isSmallScreen ? /* @__PURE__ */ React33.createElement(Tray, {
+  }, menuTrigger), isSmallScreen ? /* @__PURE__ */ React35.createElement(Tray, {
     state
-  }, menu) : /* @__PURE__ */ React33.createElement(Popover, {
+  }, menu) : /* @__PURE__ */ React35.createElement(Popover, {
     triggerRef: menuTriggerRef,
     scrollRef: menuRef,
     state
@@ -1275,7 +1328,7 @@ var MenuTrigger = ({ disabled, children }) => {
 };
 
 // src/Menu/MenuItem.tsx
-import React34, { useRef as useRef5 } from "react";
+import React36, { useRef as useRef5 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
@@ -1297,7 +1350,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ React34.createElement(Box19, {
+  return /* @__PURE__ */ React36.createElement(Box19, {
     as: "li",
     ref,
     __baseCSS: {
@@ -1325,7 +1378,7 @@ var Menu = ({ variant, size, ...props }) => {
     { variant, size },
     { parts: ["container", "item"] }
   );
-  return /* @__PURE__ */ React35.createElement(Box20, {
+  return /* @__PURE__ */ React37.createElement(Box20, {
     as: "ul",
     ref,
     __baseCSS: {
@@ -1335,19 +1388,35 @@ var Menu = ({ variant, size, ...props }) => {
     },
     css: styles.container,
     ...menuProps
-  }, [...state.collection].map((item) => /* @__PURE__ */ React35.createElement(MenuItem, {
+  }, [...state.collection].map((item) => /* @__PURE__ */ React37.createElement(MenuItem, {
     key: item.key,
     item,
     state,
-    onAction: props.onSelect,
+    onAction: props.onAction,
     css: styles.item
   })));
 };
 Menu.Trigger = MenuTrigger;
 Menu.Item = Item;
 
+// src/Menu/ActionMenu.tsx
+import React38 from "react";
+import { SVG as SVG3 } from "@marigold/system";
+var ActionMenu = (props) => {
+  return /* @__PURE__ */ React38.createElement(Menu.Trigger, null, /* @__PURE__ */ React38.createElement(Button, {
+    variant: "menu",
+    size: "small"
+  }, /* @__PURE__ */ React38.createElement(SVG3, {
+    viewBox: "0 0 24 24"
+  }, /* @__PURE__ */ React38.createElement("path", {
+    d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z"
+  }))), /* @__PURE__ */ React38.createElement(Menu, {
+    ...props
+  }));
+};
+
 // src/Message/Message.tsx
-import React36 from "react";
+import React39 from "react";
 import { useComponentStyles as useComponentStyles20 } from "@marigold/system";
 var Message = ({
   messageTitle,
@@ -1364,43 +1433,43 @@ var Message = ({
     },
     { parts: ["container", "icon", "title", "content"] }
   );
-  var icon = /* @__PURE__ */ React36.createElement("svg", {
+  var icon = /* @__PURE__ */ React39.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ React36.createElement("path", {
+  }, /* @__PURE__ */ React39.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__ */ React36.createElement("svg", {
+    icon = /* @__PURE__ */ React39.createElement("svg", {
       viewBox: "0 0 24 24"
-    }, /* @__PURE__ */ React36.createElement("path", {
+    }, /* @__PURE__ */ React39.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__ */ React36.createElement("svg", {
+    icon = /* @__PURE__ */ React39.createElement("svg", {
       viewBox: "0 0 24 24"
-    }, /* @__PURE__ */ React36.createElement("path", {
+    }, /* @__PURE__ */ React39.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__ */ React36.createElement(Box, {
+  return /* @__PURE__ */ React39.createElement(Box, {
     css: styles.container,
     ...props
-  }, /* @__PURE__ */ React36.createElement(Box, {
+  }, /* @__PURE__ */ React39.createElement(Box, {
     __baseCSS: { display: "flex", alignItems: "top", gap: 4 }
-  }, /* @__PURE__ */ React36.createElement(Box, {
+  }, /* @__PURE__ */ React39.createElement(Box, {
     role: "presentation",
     __baseCSS: { flex: "0 0 16px" },
     css: styles.icon
-  }, icon), /* @__PURE__ */ React36.createElement(Box, {
+  }, icon), /* @__PURE__ */ React39.createElement(Box, {
     css: styles.title
-  }, messageTitle)), /* @__PURE__ */ React36.createElement(Box, {
+  }, messageTitle)), /* @__PURE__ */ React39.createElement(Box, {
     css: styles.content
   }, children));
 };
 
 // src/NumberField/NumberField.tsx
-import React38, { forwardRef as forwardRef8 } from "react";
+import React41, { 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";
@@ -1414,27 +1483,27 @@ import {
 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import React37, { useRef as useRef7 } from "react";
+import React40, { useRef as useRef7 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
 import { Box as Box21, useStateProps as useStateProps5 } from "@marigold/system";
-var Plus = () => /* @__PURE__ */ React37.createElement(Box21, {
+var Plus = () => /* @__PURE__ */ React40.createElement(Box21, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, /* @__PURE__ */ React37.createElement("path", {
+}, /* @__PURE__ */ React40.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__ */ React37.createElement(Box21, {
+var Minus = () => /* @__PURE__ */ React40.createElement(Box21, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, /* @__PURE__ */ React37.createElement("path", {
+}, /* @__PURE__ */ React40.createElement("path", {
   fillRule: "evenodd",
   clipRule: "evenodd",
   d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
@@ -1452,7 +1521,7 @@ var StepButton = ({ direction, css, ...props }) => {
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React37.createElement(Box21, {
+  return /* @__PURE__ */ React40.createElement(Box21, {
     __baseCSS: {
       display: "flex",
       alignItems: "center",
@@ -1462,7 +1531,7 @@ var StepButton = ({ direction, css, ...props }) => {
     css,
     ...mergeProps4(buttonProps, hoverProps),
     ...stateProps
-  }, /* @__PURE__ */ React37.createElement(Icon3, null));
+  }, /* @__PURE__ */ React40.createElement(Icon3, null));
 };
 
 // src/NumberField/NumberField.tsx
@@ -1516,7 +1585,7 @@ var NumberField = forwardRef8(
       readOnly,
       error
     });
-    return /* @__PURE__ */ React38.createElement(FieldBase, {
+    return /* @__PURE__ */ React41.createElement(FieldBase, {
       label: props.label,
       labelProps,
       required,
@@ -1529,7 +1598,7 @@ var NumberField = forwardRef8(
       variant,
       size,
       width
-    }, /* @__PURE__ */ React38.createElement(Box22, {
+    }, /* @__PURE__ */ React41.createElement(Box22, {
       "data-group": true,
       __baseCSS: {
         display: "flex",
@@ -1542,17 +1611,17 @@ var NumberField = forwardRef8(
       css: styles.group,
       ...mergeProps5(groupProps, focusProps, hoverProps),
       ...stateProps
-    }, showStepper && /* @__PURE__ */ React38.createElement(StepButton, {
+    }, showStepper && /* @__PURE__ */ React41.createElement(StepButton, {
       direction: "down",
       css: styles.stepper,
       ...decrementButtonProps
-    }), /* @__PURE__ */ React38.createElement(Input, {
+    }), /* @__PURE__ */ React41.createElement(Input, {
       ref: inputRef,
       variant,
       size,
       ...inputProps,
       ...stateProps
-    }), showStepper && /* @__PURE__ */ React38.createElement(StepButton, {
+    }), showStepper && /* @__PURE__ */ React41.createElement(StepButton, {
       direction: "up",
       css: styles.stepper,
       ...incrementButtonProps
@@ -1565,7 +1634,7 @@ import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigol
 import { SSRProvider } from "@react-aria/ssr";
 
 // src/Provider/MarigoldProvider.tsx
-import React39 from "react";
+import React42 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   Global,
@@ -1588,16 +1657,16 @@ function MarigoldProvider({
       Nested themes with a "root" property must specify a "selector" to prevent accidentally overriding global CSS`
     );
   }
-  return /* @__PURE__ */ React39.createElement(ThemeProvider, {
+  return /* @__PURE__ */ React42.createElement(ThemeProvider, {
     theme
-  }, /* @__PURE__ */ React39.createElement(Global, {
+  }, /* @__PURE__ */ React42.createElement(Global, {
     normalizeDocument: isTopLevel && normalizeDocument,
     selector
-  }), isTopLevel ? /* @__PURE__ */ React39.createElement(OverlayProvider, null, children) : children);
+  }), isTopLevel ? /* @__PURE__ */ React42.createElement(OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-import React41, {
+import React44, {
   forwardRef as forwardRef9
 } from "react";
 import { useHover as useHover5 } from "@react-aria/interactions";
@@ -1611,14 +1680,14 @@ import {
 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext5, useContext as useContext5 } from "react";
-var RadioGroupContext = createContext5(
+import { createContext as createContext6, useContext as useContext6 } from "react";
+var RadioGroupContext = createContext6(
   null
 );
-var useRadioGroupContext = () => useContext5(RadioGroupContext);
+var useRadioGroupContext = () => useContext6(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import React40 from "react";
+import React43 from "react";
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
 import { Box as Box23, useStateProps as useStateProps7 } from "@marigold/system";
@@ -1646,7 +1715,7 @@ var RadioGroup = ({
     readOnly,
     error
   });
-  return /* @__PURE__ */ React40.createElement(FieldBase, {
+  return /* @__PURE__ */ React43.createElement(FieldBase, {
     width,
     label: props.label,
     labelProps: { as: "span", ...labelProps },
@@ -1659,7 +1728,7 @@ var RadioGroup = ({
     stateProps,
     required,
     ...radioGroupProps
-  }, /* @__PURE__ */ React40.createElement(Box23, {
+  }, /* @__PURE__ */ React43.createElement(Box23, {
     role: "presentation",
     "data-orientation": orientation,
     __baseCSS: {
@@ -1668,21 +1737,21 @@ var RadioGroup = ({
       alignItems: "start",
       gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
     }
-  }, /* @__PURE__ */ React40.createElement(RadioGroupContext.Provider, {
+  }, /* @__PURE__ */ React43.createElement(RadioGroupContext.Provider, {
     value: { width, error, state }
   }, children)));
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ React41.createElement("svg", {
+var Dot = () => /* @__PURE__ */ React44.createElement("svg", {
   viewBox: "0 0 6 6"
-}, /* @__PURE__ */ React41.createElement("circle", {
+}, /* @__PURE__ */ React44.createElement("circle", {
   fill: "currentColor",
   cx: "3",
   cy: "3",
   r: "3"
 }));
-var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React41.createElement(Box24, {
+var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React44.createElement(Box24, {
   "aria-hidden": "true",
   __baseCSS: {
     width: 16,
@@ -1697,7 +1766,7 @@ var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React41.createElemen
   },
   css,
   ...props
-}, checked ? /* @__PURE__ */ React41.createElement(Dot, null) : null);
+}, checked ? /* @__PURE__ */ React44.createElement(Dot, null) : null);
 var Radio = forwardRef9(
   ({ width, disabled, ...props }, ref) => {
     const {
@@ -1728,7 +1797,7 @@ var Radio = forwardRef9(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ React41.createElement(Box24, {
+    return /* @__PURE__ */ React44.createElement(Box24, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -1739,7 +1808,7 @@ var Radio = forwardRef9(
       },
       css: styles.container,
       ...mergeProps6(hoverProps, stateProps)
-    }, /* @__PURE__ */ React41.createElement(Box24, {
+    }, /* @__PURE__ */ React44.createElement(Box24, {
       as: "input",
       ref: inputRef,
       css: {
@@ -1753,11 +1822,11 @@ var Radio = forwardRef9(
         cursor: inputProps.disabled ? "not-allowed" : "pointer"
       },
       ...mergeProps6(inputProps, focusProps)
-    }), /* @__PURE__ */ React41.createElement(Icon2, {
+    }), /* @__PURE__ */ React44.createElement(Icon2, {
       checked: inputProps.checked,
       css: styles.radio,
       ...stateProps
-    }), /* @__PURE__ */ React41.createElement(Box24, {
+    }), /* @__PURE__ */ React44.createElement(Box24, {
       css: styles.label,
       ...stateProps
     }, props.children));
@@ -1766,7 +1835,7 @@ var Radio = forwardRef9(
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-import React45, {
+import React48, {
   forwardRef as forwardRef11,
   useRef as useRef9
 } from "react";
@@ -1785,7 +1854,7 @@ import {
 } from "@marigold/system";
 
 // src/ListBox/ListBox.tsx
-import React44, { forwardRef as forwardRef10 } from "react";
+import React47, { forwardRef as forwardRef10 } from "react";
 import { useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import {
   Box as Box27,
@@ -1794,17 +1863,17 @@ import {
 import { useListBox } from "@react-aria/listbox";
 
 // src/ListBox/Context.ts
-import { createContext as createContext6, useContext as useContext6 } from "react";
-var ListBoxContext = createContext6({});
-var useListBoxContext = () => useContext6(ListBoxContext);
+import { createContext as createContext7, useContext as useContext7 } from "react";
+var ListBoxContext = createContext7({});
+var useListBoxContext = () => useContext7(ListBoxContext);
 
 // src/ListBox/ListBoxSection.tsx
-import React43 from "react";
+import React46 from "react";
 import { useListBoxSection } from "@react-aria/listbox";
 import { Box as Box26 } from "@marigold/system";
 
 // src/ListBox/ListBoxOption.tsx
-import React42, { useRef as useRef8 } from "react";
+import React45, { useRef as useRef8 } from "react";
 import { useOption } from "@react-aria/listbox";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import { Box as Box25, useStateProps as useStateProps9 } from "@marigold/system";
@@ -1824,7 +1893,7 @@ var ListBoxOption = ({ item, state }) => {
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React42.createElement(Box25, {
+  return /* @__PURE__ */ React45.createElement(Box25, {
     as: "li",
     ref,
     css: styles.option,
@@ -1839,19 +1908,19 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ React43.createElement(Box26, {
+  return /* @__PURE__ */ React46.createElement(Box26, {
     as: "li",
     css: styles.section,
     ...itemProps
-  }, section.rendered && /* @__PURE__ */ React43.createElement(Box26, {
+  }, section.rendered && /* @__PURE__ */ React46.createElement(Box26, {
     css: styles.sectionTitle,
     ...headingProps
-  }, section.rendered), /* @__PURE__ */ React43.createElement(Box26, {
+  }, section.rendered), /* @__PURE__ */ React46.createElement(Box26, {
     as: "ul",
     __baseCSS: { listStyle: "none", p: 0 },
     css: styles.list,
     ...groupProps
-  }, [...section.childNodes].map((node) => /* @__PURE__ */ React43.createElement(ListBoxOption, {
+  }, [...section.childNodes].map((node) => /* @__PURE__ */ React46.createElement(ListBoxOption, {
     key: node.key,
     item: node,
     state
@@ -1868,22 +1937,22 @@ var ListBox = forwardRef10(
       { variant, size },
       { parts: ["container", "list", "option", "section", "sectionTitle"] }
     );
-    return /* @__PURE__ */ React44.createElement(ListBoxContext.Provider, {
+    return /* @__PURE__ */ React47.createElement(ListBoxContext.Provider, {
       value: { styles }
-    }, /* @__PURE__ */ React44.createElement(Box27, {
+    }, /* @__PURE__ */ React47.createElement(Box27, {
       css: styles.container
-    }, /* @__PURE__ */ React44.createElement(Box27, {
+    }, /* @__PURE__ */ React47.createElement(Box27, {
       as: "ul",
       ref: innerRef,
       __baseCSS: { listStyle: "none", p: 0 },
       css: styles.list,
       ...listBoxProps
     }, [...state.collection].map(
-      (item) => item.type === "section" ? /* @__PURE__ */ React44.createElement(ListBoxSection, {
+      (item) => item.type === "section" ? /* @__PURE__ */ React47.createElement(ListBoxSection, {
         key: item.key,
         section: item,
         state
-      }) : /* @__PURE__ */ React44.createElement(ListBoxOption, {
+      }) : /* @__PURE__ */ React47.createElement(ListBoxOption, {
         key: item.key,
         item,
         state
@@ -1903,20 +1972,30 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ React45.createElement(Box28, {
+var Chevron = ({ css }) => /* @__PURE__ */ React48.createElement(Box28, {
   as: "svg",
   __baseCSS: { width: 16, height: 16, fill: "none" },
   css,
   viewBox: "0 0 24 24",
   stroke: "currentColor",
   strokeWidth: 2
-}, /* @__PURE__ */ React45.createElement("path", {
+}, /* @__PURE__ */ React48.createElement("path", {
   strokeLinecap: "round",
   strokeLinejoin: "round",
   d: "M19 9l-7 7-7-7"
 }));
 var Select = forwardRef11(
-  ({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
+  ({
+    variant,
+    size,
+    width,
+    open,
+    disabled,
+    required,
+    error,
+    onChange,
+    ...rest
+  }, ref) => {
     const formatMessage = useLocalizedStringFormatter(messages);
     const props = {
       isOpen: open,
@@ -1924,6 +2003,7 @@ var Select = forwardRef11(
       isRequired: required,
       validationState: error ? "invalid" : "valid",
       placeholder: rest.placeholder || formatMessage.format("placeholder"),
+      onSelectionChange: onChange,
       ...rest
     };
     const state = useSelectState(props);
@@ -1954,7 +2034,7 @@ var Select = forwardRef11(
       focusVisible: isFocusVisible,
       expanded: state.isOpen
     });
-    return /* @__PURE__ */ React45.createElement(FieldBase, {
+    return /* @__PURE__ */ React48.createElement(FieldBase, {
       variant,
       size,
       width,
@@ -1968,13 +2048,13 @@ var Select = forwardRef11(
       stateProps,
       disabled,
       required
-    }, /* @__PURE__ */ React45.createElement(HiddenSelect, {
+    }, /* @__PURE__ */ React48.createElement(HiddenSelect, {
       state,
       triggerRef: buttonRef,
       label: props.label,
       name: props.name,
       isDisabled: disabled
-    }), /* @__PURE__ */ React45.createElement(Box28, {
+    }), /* @__PURE__ */ React48.createElement(Box28, {
       as: "button",
       __baseCSS: {
         display: "flex",
@@ -1987,27 +2067,27 @@ var Select = forwardRef11(
       ref: buttonRef,
       ...mergeProps8(buttonProps, focusProps),
       ...stateProps
-    }, /* @__PURE__ */ React45.createElement(Box28, {
+    }, /* @__PURE__ */ React48.createElement(Box28, {
       css: {
         overflow: "hidden",
         whiteSpace: "nowrap"
       },
       ...valueProps
-    }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React45.createElement(Chevron, {
+    }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React48.createElement(Chevron, {
       css: styles.icon
-    })), isSmallScreen ? /* @__PURE__ */ React45.createElement(Tray, {
+    })), isSmallScreen ? /* @__PURE__ */ React48.createElement(Tray, {
       state
-    }, /* @__PURE__ */ React45.createElement(ListBox, {
+    }, /* @__PURE__ */ React48.createElement(ListBox, {
       ref: listboxRef,
       state,
       variant,
       size,
       ...menuProps
-    })) : /* @__PURE__ */ React45.createElement(Popover, {
+    })) : /* @__PURE__ */ React48.createElement(Popover, {
       state,
       triggerRef: buttonRef,
       scrollRef: listboxRef
-    }, /* @__PURE__ */ React45.createElement(ListBox, {
+    }, /* @__PURE__ */ React48.createElement(ListBox, {
       ref: listboxRef,
       state,
       variant,
@@ -2020,7 +2100,7 @@ Select.Option = Item2;
 Select.Section = Section;
 
 // src/Slider/Slider.tsx
-import React47, { forwardRef as forwardRef12 } from "react";
+import React50, { forwardRef as forwardRef12 } from "react";
 import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
@@ -2028,7 +2108,7 @@ import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
 import { useComponentStyles as useComponentStyles25 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
-import React46, { useEffect } from "react";
+import React49, { useEffect } from "react";
 import { useSliderThumb } from "@react-aria/slider";
 import { mergeProps as mergeProps9 } from "@react-aria/utils";
 import { useStateProps as useStateProps11 } from "@marigold/system";
@@ -2040,7 +2120,7 @@ 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 = React46.useRef(null);
+  const inputRef = React49.useRef(null);
   const { isFocusVisible, focusProps, isFocused } = useFocusRing7();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
   const stateProps = useStateProps11({
@@ -2059,12 +2139,12 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
   useEffect(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ React46.createElement(Box, {
+  return /* @__PURE__ */ React49.createElement(Box, {
     __baseCSS: { top: "50%" },
     css: styles,
     ...thumbProps,
     ...stateProps
-  }, /* @__PURE__ */ React46.createElement(VisuallyHidden, null, /* @__PURE__ */ React46.createElement(Box, {
+  }, /* @__PURE__ */ React49.createElement(VisuallyHidden, null, /* @__PURE__ */ React49.createElement(Box, {
     as: "input",
     type: "range",
     ref: inputRef,
@@ -2092,7 +2172,7 @@ var Slider = forwardRef12(
       { variant, size },
       { parts: ["track", "thumb", "label", "output"] }
     );
-    return /* @__PURE__ */ React47.createElement(Box, {
+    return /* @__PURE__ */ React50.createElement(Box, {
       __baseCSS: {
         display: "flex",
         flexDirection: "column",
@@ -2100,18 +2180,18 @@ var Slider = forwardRef12(
         width
       },
       ...groupProps
-    }, /* @__PURE__ */ React47.createElement(Box, {
+    }, /* @__PURE__ */ React50.createElement(Box, {
       __baseCSS: { display: "flex", alignSelf: "stretch" }
-    }, props.children && /* @__PURE__ */ React47.createElement(Box, {
+    }, props.children && /* @__PURE__ */ React50.createElement(Box, {
       as: "label",
       __baseCSS: styles.label,
       ...labelProps
-    }, props.children), /* @__PURE__ */ React47.createElement(Box, {
+    }, props.children), /* @__PURE__ */ React50.createElement(Box, {
       as: "output",
       ...outputProps,
       __baseCSS: { flex: "1 0 auto", textAlign: "end" },
       css: styles.output
-    }, state.getThumbValueLabel(0))), /* @__PURE__ */ React47.createElement(Box, {
+    }, state.getThumbValueLabel(0))), /* @__PURE__ */ React50.createElement(Box, {
       ...trackProps,
       ref: trackRef,
       __baseCSS: {
@@ -2119,13 +2199,13 @@ var Slider = forwardRef12(
         width: "100%",
         cursor: props.disabled ? "not-allowed" : "pointer"
       }
-    }, /* @__PURE__ */ React47.createElement(Box, {
+    }, /* @__PURE__ */ React50.createElement(Box, {
       __baseCSS: {
         top: "50%",
         transform: "translateY(-50%)"
       },
       css: styles.track
-    }), /* @__PURE__ */ React47.createElement(Thumb, {
+    }), /* @__PURE__ */ React50.createElement(Thumb, {
       state,
       trackRef,
       disabled: props.disabled,
@@ -2135,16 +2215,16 @@ var Slider = forwardRef12(
 );
 
 // src/Split/Split.tsx
-import React48 from "react";
+import React51 from "react";
 import { Box as Box29 } from "@marigold/system";
-var Split = (props) => /* @__PURE__ */ React48.createElement(Box29, {
+var Split = (props) => /* @__PURE__ */ React51.createElement(Box29, {
   ...props,
   role: "separator",
   css: { flexGrow: 1 }
 });
 
 // src/Stack/Stack.tsx
-import React49 from "react";
+import React52 from "react";
 var ALIGNMENT_X2 = {
   none: "initial",
   left: "flex-start",
@@ -2164,7 +2244,7 @@ var Stack = ({
   alignY = "none",
   stretch = false,
   ...props
-}) => /* @__PURE__ */ React49.createElement(Box, {
+}) => /* @__PURE__ */ React52.createElement(Box, {
   css: {
     display: "flex",
     flexDirection: "column",
@@ -2178,7 +2258,7 @@ var Stack = ({
 }, children);
 
 // src/Switch/Switch.tsx
-import React50, { forwardRef as forwardRef13 } from "react";
+import React53, { forwardRef as forwardRef13 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
 import { useObjectRef as useObjectRef13 } from "@react-aria/utils";
@@ -2220,7 +2300,7 @@ var Switch = forwardRef13(
       { variant, size },
       { parts: ["container", "label", "track", "thumb"] }
     );
-    return /* @__PURE__ */ React50.createElement(Box, {
+    return /* @__PURE__ */ React53.createElement(Box, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -2231,7 +2311,7 @@ var Switch = forwardRef13(
         width
       },
       css: styles.container
-    }, /* @__PURE__ */ React50.createElement(Box, {
+    }, /* @__PURE__ */ React53.createElement(Box, {
       as: "input",
       ref: inputRef,
       css: {
@@ -2246,9 +2326,9 @@ var Switch = forwardRef13(
       },
       ...inputProps,
       ...focusProps
-    }), props.children && /* @__PURE__ */ React50.createElement(Box, {
+    }), props.children && /* @__PURE__ */ React53.createElement(Box, {
       css: styles.label
-    }, props.children), /* @__PURE__ */ React50.createElement(Box, {
+    }, props.children), /* @__PURE__ */ React53.createElement(Box, {
       __baseCSS: {
         position: "relative",
         width: 48,
@@ -2259,7 +2339,7 @@ var Switch = forwardRef13(
       },
       css: styles.track,
       ...stateProps
-    }, /* @__PURE__ */ React50.createElement(Box, {
+    }, /* @__PURE__ */ React53.createElement(Box, {
       __baseCSS: {
         display: "block",
         position: "absolute",
@@ -2283,7 +2363,7 @@ var Switch = forwardRef13(
 );
 
 // src/Table/Table.tsx
-import React59, { useRef as useRef16 } from "react";
+import React62, { useRef as useRef16 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   Cell,
@@ -2299,22 +2379,22 @@ import {
 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext7, useContext as useContext7 } from "react";
-var TableContext = createContext7({});
-var useTableContext = () => useContext7(TableContext);
+import { createContext as createContext8, useContext as useContext8 } from "react";
+var TableContext = createContext8({});
+var useTableContext = () => useContext8(TableContext);
 
 // src/Table/TableBody.tsx
-import React51 from "react";
+import React54 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React51.createElement("tbody", {
+  return /* @__PURE__ */ React54.createElement("tbody", {
     ...rowGroupProps
   }, children);
 };
 
 // src/Table/TableCell.tsx
-import React52, { useRef as useRef10 } from "react";
+import React55, { useRef as useRef10 } from "react";
 import { useTableCell } from "@react-aria/table";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { mergeProps as mergeProps10 } from "@react-aria/utils";
@@ -2337,7 +2417,7 @@ var TableCell = ({ cell }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing9();
   const stateProps = useStateProps13({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React52.createElement(Box30, {
+  return /* @__PURE__ */ React55.createElement(Box30, {
     as: "td",
     ref,
     css: styles.cell,
@@ -2347,7 +2427,7 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React53, { useRef as useRef11 } from "react";
+import React56, { 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 mergeProps11 } from "@react-aria/utils";
@@ -2390,7 +2470,7 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing10();
   const stateProps = useStateProps14({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React53.createElement(Box31, {
+  return /* @__PURE__ */ React56.createElement(Box31, {
     as: "td",
     ref,
     __baseCSS: {
@@ -2401,13 +2481,13 @@ var TableCheckboxCell = ({ cell }) => {
     css: styles.cell,
     ...mergeProps11(gridCellProps, focusProps),
     ...stateProps
-  }, /* @__PURE__ */ React53.createElement(Checkbox, {
+  }, /* @__PURE__ */ React56.createElement(Checkbox, {
     ...checkboxProps
   }));
 };
 
 // src/Table/TableColumnHeader.tsx
-import React54, { useRef as useRef12 } from "react";
+import React57, { 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";
@@ -2416,7 +2496,7 @@ import { Box as Box32, useStateProps as useStateProps15 } from "@marigold/system
 var SortIndicator = ({
   direction = "ascending",
   visible
-}) => /* @__PURE__ */ React54.createElement(Box32, {
+}) => /* @__PURE__ */ React57.createElement(Box32, {
   as: "span",
   role: "presentation",
   "aria-hidden": "true",
@@ -2443,7 +2523,7 @@ var TableColumnHeader = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React54.createElement(Box32, {
+  return /* @__PURE__ */ React57.createElement(Box32, {
     as: "th",
     colSpan: column.colspan,
     ref,
@@ -2451,37 +2531,37 @@ var TableColumnHeader = ({ column }) => {
     css: styles.header,
     ...mergeProps12(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
-  }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ React54.createElement(SortIndicator, {
+  }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ React57.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 React55 from "react";
+import React58 from "react";
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React55.createElement("thead", {
+  return /* @__PURE__ */ React58.createElement("thead", {
     ...rowGroupProps
   }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React56, { useRef as useRef13 } from "react";
+import React59, { 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__ */ React56.createElement("tr", {
+  return /* @__PURE__ */ React59.createElement("tr", {
     ...rowProps,
     ref
   }, children);
 };
 
 // src/Table/TableRow.tsx
-import React57, { useRef as useRef14 } from "react";
+import React60, { 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";
@@ -2516,7 +2596,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React57.createElement(Box33, {
+  return /* @__PURE__ */ React60.createElement(Box33, {
     as: "tr",
     ref,
     __baseCSS: {
@@ -2529,7 +2609,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React58, { useRef as useRef15 } from "react";
+import React61, { useRef as useRef15 } from "react";
 import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
 import { useHover as useHover8 } from "@react-aria/interactions";
 import {
@@ -2555,7 +2635,7 @@ var TableSelectAllCell = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React58.createElement(Box34, {
+  return /* @__PURE__ */ React61.createElement(Box34, {
     as: "th",
     ref,
     __baseCSS: {
@@ -2566,7 +2646,7 @@ var TableSelectAllCell = ({ column }) => {
     css: styles.header,
     ...mergeProps14(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
-  }, /* @__PURE__ */ React58.createElement(Checkbox, {
+  }, /* @__PURE__ */ React61.createElement(Checkbox, {
     ...checkboxProps
   }));
 };
@@ -2593,9 +2673,9 @@ var Table = ({
     { parts: ["table", "header", "row", "cell"] }
   );
   const { collection } = state;
-  return /* @__PURE__ */ React59.createElement(TableContext.Provider, {
+  return /* @__PURE__ */ React62.createElement(TableContext.Provider, {
     value: { state, interactive, styles }
-  }, /* @__PURE__ */ React59.createElement(Box35, {
+  }, /* @__PURE__ */ React62.createElement(Box35, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
@@ -2607,30 +2687,30 @@ var Table = ({
     },
     css: styles.table,
     ...gridProps
-  }, /* @__PURE__ */ React59.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React59.createElement(TableHeaderRow, {
+  }, /* @__PURE__ */ React62.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React62.createElement(TableHeaderRow, {
     key: headerRow.key,
     item: headerRow
   }, [...headerRow.childNodes].map(
     (column) => {
       var _a;
-      return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React59.createElement(TableSelectAllCell, {
+      return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React62.createElement(TableSelectAllCell, {
         key: column.key,
         column
-      }) : /* @__PURE__ */ React59.createElement(TableColumnHeader, {
+      }) : /* @__PURE__ */ React62.createElement(TableColumnHeader, {
         key: column.key,
         column
       });
     }
-  )))), /* @__PURE__ */ React59.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React59.createElement(TableRow, {
+  )))), /* @__PURE__ */ React62.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React62.createElement(TableRow, {
     key: row.key,
     row
   }, [...row.childNodes].map(
     (cell) => {
       var _a;
-      return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React59.createElement(TableCheckboxCell, {
+      return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React62.createElement(TableCheckboxCell, {
         key: cell.key,
         cell
-      }) : /* @__PURE__ */ React59.createElement(TableCell, {
+      }) : /* @__PURE__ */ React62.createElement(TableCell, {
         key: cell.key,
         cell
       });
@@ -2644,7 +2724,7 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React60 from "react";
+import React63 from "react";
 import {
   useComponentStyles as useComponentStyles29
 } from "@marigold/system";
@@ -2652,6 +2732,7 @@ import { Box as Box36 } from "@marigold/system";
 var Text = ({
   variant,
   size,
+  display,
   align,
   color,
   fontSize,
@@ -2665,18 +2746,26 @@ var Text = ({
     variant,
     size
   });
-  return /* @__PURE__ */ React60.createElement(Box36, {
+  return /* @__PURE__ */ React63.createElement(Box36, {
     as: "p",
     ...props,
     css: [
       styles,
-      { color, cursor, outline, fontSize, fontWeight, textAlign: align }
+      {
+        display,
+        color,
+        cursor,
+        outline,
+        fontSize,
+        fontWeight,
+        textAlign: align
+      }
     ]
   }, children);
 };
 
 // src/TextArea/TextArea.tsx
-import React61, { forwardRef as forwardRef14 } from "react";
+import React64, { 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";
@@ -2721,7 +2810,7 @@ var TextArea = forwardRef14(
       error
     });
     const styles = useComponentStyles30("TextArea", { variant, size });
-    return /* @__PURE__ */ React61.createElement(FieldBase, {
+    return /* @__PURE__ */ React64.createElement(FieldBase, {
       label,
       labelProps,
       required,
@@ -2734,7 +2823,7 @@ var TextArea = forwardRef14(
       variant,
       size,
       width
-    }, /* @__PURE__ */ React61.createElement(Box37, {
+    }, /* @__PURE__ */ React64.createElement(Box37, {
       as: "textarea",
       css: styles,
       ref: textAreaRef,
@@ -2748,7 +2837,7 @@ var TextArea = forwardRef14(
 );
 
 // src/TextField/TextField.tsx
-import React62, { forwardRef as forwardRef15 } from "react";
+import React65, { 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";
@@ -2780,7 +2869,7 @@ var TextField = forwardRef15(
       readOnly,
       error
     });
-    return /* @__PURE__ */ React62.createElement(FieldBase, {
+    return /* @__PURE__ */ React65.createElement(FieldBase, {
       label,
       labelProps,
       required,
@@ -2793,7 +2882,7 @@ var TextField = forwardRef15(
       variant,
       size,
       width
-    }, /* @__PURE__ */ React62.createElement(Input, {
+    }, /* @__PURE__ */ React65.createElement(Input, {
       ref: inputRef,
       variant,
       size,
@@ -2806,7 +2895,7 @@ var TextField = forwardRef15(
 );
 
 // src/Tiles/Tiles.tsx
-import React63 from "react";
+import React66 from "react";
 import { useTheme as useTheme3 } from "@marigold/system";
 var Tiles = ({
   space = "none",
@@ -2822,7 +2911,7 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ React63.createElement(Box, {
+  return /* @__PURE__ */ React66.createElement(Box, {
     ...props,
     css: {
       display: "grid",
@@ -2834,7 +2923,7 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-import React65 from "react";
+import React68 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import {
   Box as Box38,
@@ -2842,12 +2931,12 @@ import {
 } from "@marigold/system";
 
 // src/Tooltip/Context.ts
-import { createContext as createContext8, useContext as useContext8 } from "react";
-var TooltipContext = createContext8({});
-var useTooltipContext = () => useContext8(TooltipContext);
+import { createContext as createContext9, useContext as useContext9 } from "react";
+var TooltipContext = createContext9({});
+var useTooltipContext = () => useContext9(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React64, { useRef as useRef17 } from "react";
+import React67, { useRef as useRef17 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
@@ -2860,7 +2949,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = React64.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = React67.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -2888,10 +2977,10 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React64.createElement(FocusableProvider, {
+  return /* @__PURE__ */ React67.createElement(FocusableProvider, {
     ref: tooltipTriggerRef,
     ...triggerProps
-  }, tooltipTrigger, /* @__PURE__ */ React64.createElement(TooltipContext.Provider, {
+  }, tooltipTrigger, /* @__PURE__ */ React67.createElement(TooltipContext.Provider, {
     value: {
       state,
       overlayRef,
@@ -2900,7 +2989,7 @@ var TooltipTrigger = ({
       ...tooltipProps,
       ...positionProps
     }
-  }, /* @__PURE__ */ React64.createElement(Overlay, {
+  }, /* @__PURE__ */ React67.createElement(Overlay, {
     open: state.isOpen
   }, tooltip)));
 };
@@ -2914,13 +3003,13 @@ var Tooltip = ({ children, variant, size }) => {
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ React65.createElement(Box38, {
+  return /* @__PURE__ */ React68.createElement(Box38, {
     ...tooltipProps,
     ...rest,
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }, /* @__PURE__ */ React65.createElement("div", null, children), /* @__PURE__ */ React65.createElement(Box38, {
+  }, /* @__PURE__ */ React68.createElement("div", null, children), /* @__PURE__ */ React68.createElement(Box38, {
     ...arrowProps,
     __baseCSS: {
       position: "absolute",
@@ -2937,122 +3026,122 @@ var Tooltip = ({ children, variant, size }) => {
 Tooltip.Trigger = TooltipTrigger;
 
 // src/XLoader/XLoader.tsx
-import { SVG as SVG3 } from "@marigold/system";
-import React66, { forwardRef as forwardRef16 } from "react";
-var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React66.createElement(SVG3, {
+import { SVG as SVG4 } from "@marigold/system";
+import React69, { forwardRef as forwardRef16 } from "react";
+var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement(SVG4, {
   id: "XLoader",
   xmlns: "http://www.w3.org/2000/svg",
   size: 150,
   viewBox: "0 0 150 150",
   ...props,
   ...ref
-}, /* @__PURE__ */ React66.createElement("path", {
+}, /* @__PURE__ */ React69.createElement("path", {
   id: "XMLID_1_",
   d: "M35.3 27h26.5l54 74.1H88.7z"
-}), /* @__PURE__ */ React66.createElement("path", {
+}), /* @__PURE__ */ React69.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__ */ React66.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "1.0s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React66.createElement("path", {
+})), /* @__PURE__ */ React69.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__ */ React66.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.9s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React66.createElement("path", {
+})), /* @__PURE__ */ React69.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__ */ React66.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.8s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React66.createElement("path", {
+})), /* @__PURE__ */ React69.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__ */ React66.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.7s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React66.createElement("path", {
+})), /* @__PURE__ */ React69.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__ */ React66.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.6s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React66.createElement("path", {
+})), /* @__PURE__ */ React69.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__ */ React66.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.5s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React66.createElement("path", {
+})), /* @__PURE__ */ React69.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__ */ React66.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.4s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React66.createElement("path", {
+})), /* @__PURE__ */ React69.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__ */ React66.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.3s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React66.createElement("path", {
+})), /* @__PURE__ */ React69.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__ */ React66.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.2s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React66.createElement("path", {
+})), /* @__PURE__ */ React69.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__ */ React66.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
   begin: "0.1s",
   dur: "2.5s",
   repeatCount: "indefinite"
-})), /* @__PURE__ */ React66.createElement("path", {
+})), /* @__PURE__ */ React69.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__ */ React66.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
@@ -3061,6 +3150,7 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React66.createElement
   repeatCount: "indefinite"
 }))));
 export {
+  ActionMenu,
   Aside,
   Aspect,
   Badge,
@@ -3077,6 +3167,9 @@ export {
   Container,
   Dialog,
   Divider,
+  FieldBase,
+  FieldGroup,
+  FieldGroupContext,
   Footer,
   Header,
   Headline,
@@ -3115,6 +3208,7 @@ export {
   extendTheme,
   useAsyncList,
   useCheckboxGroupContext,
+  useFieldGroupContext,
   useListData,
   useTheme2 as useTheme
 };