@marigold/components 4.2.2 → 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
@@ -662,8 +662,8 @@ var Container = ({
 }) => {
   const maxWidth = tokenSize[contentType][size];
   return /* @__PURE__ */ React16.createElement(Box, {
-    display: "grid",
     css: {
+      display: "grid",
       gridTemplateColumns: ALIGN[align](maxWidth).gridTemplateColumns,
       placeItems: ALIGN_ITEMS[alignItems],
       "> *": {
@@ -675,7 +675,7 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import React25, { 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 {
@@ -973,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);
@@ -983,9 +1010,9 @@ var CloseButton = ({ css }) => {
     },
     ref
   );
-  return /* @__PURE__ */ React25.createElement(Box13, {
+  return /* @__PURE__ */ React26.createElement(Box13, {
     css: { display: "flex", justifyContent: "flex-end" }
-  }, /* @__PURE__ */ React25.createElement(Box13, {
+  }, /* @__PURE__ */ React26.createElement(Box13, {
     as: "button",
     __baseCSS: {
       outline: "none",
@@ -999,19 +1026,19 @@ var CloseButton = ({ css }) => {
     css,
     ref,
     ...buttonProps
-  }, /* @__PURE__ */ React25.createElement("svg", {
+  }, /* @__PURE__ */ React26.createElement("svg", {
     viewBox: "0 0 20 20",
     fill: "currentColor"
-  }, /* @__PURE__ */ React25.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 = React25.Children.toArray(children);
+  const childs = React26.Children.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => React25.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => React26.isValidElement(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1019,7 +1046,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = React25.cloneElement(
+  const titleChild = React26.cloneElement(
     childs[titleIndex],
     titleProps
   );
@@ -1041,24 +1068,25 @@ var Dialog = ({
     { variant, size },
     { parts: ["container", "closeButton"] }
   );
-  return /* @__PURE__ */ React25.createElement(Box13, {
+  return /* @__PURE__ */ React26.createElement(Box13, {
     __baseCSS: { bg: "#fff" },
     css: styles.container,
     ...dialogProps
-  }, closeButton && /* @__PURE__ */ React25.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 React26 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__ */ React26.createElement(Box14, {
+  return /* @__PURE__ */ React27.createElement(Box14, {
     css: styles,
     ...props,
     ...separatorProps
@@ -1066,13 +1094,13 @@ var Divider = ({ variant, ...props }) => {
 };
 
 // src/Footer/Footer.tsx
-import React27 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__ */ React27.createElement(Box, {
+  return /* @__PURE__ */ React28.createElement(Box, {
     as: "footer",
     ...props,
     css: styles
@@ -1080,7 +1108,7 @@ var Footer = ({ children, variant, size, ...props }) => {
 };
 
 // src/Image/Image.tsx
-import React28 from "react";
+import React29 from "react";
 import { Box as Box15 } from "@marigold/system";
 import { useComponentStyles as useComponentStyles15 } from "@marigold/system";
 var Image = ({
@@ -1096,7 +1124,7 @@ var Image = ({
     objectFit: fit,
     objectPosition: position
   };
-  return /* @__PURE__ */ React28.createElement(Box15, {
+  return /* @__PURE__ */ React29.createElement(Box15, {
     ...props,
     as: "img",
     __baseCSS: fit ? { width: " 100%", height: "100%" } : {},
@@ -1105,7 +1133,7 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import React29 from "react";
+import React30 from "react";
 var ALIGNMENT_X = {
   left: "flex-start",
   center: "center",
@@ -1122,7 +1150,7 @@ var Inline = ({
   alignY = "center",
   children,
   ...props
-}) => /* @__PURE__ */ React29.createElement(Box, {
+}) => /* @__PURE__ */ React30.createElement(Box, {
   css: {
     display: "flex",
     flexWrap: "wrap",
@@ -1134,12 +1162,12 @@ var Inline = ({
 }, children);
 
 // src/Input/Input.tsx
-import React30, { 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__ */ React30.createElement(Box16, {
+    return /* @__PURE__ */ React31.createElement(Box16, {
       ...props,
       ref,
       as: "input",
@@ -1150,7 +1178,7 @@ var Input = forwardRef6(
 );
 
 // src/Link/Link.tsx
-import React31, { 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";
@@ -1175,19 +1203,19 @@ var Link = forwardRef7(
       linkRef
     );
     const styles = useComponentStyles17("Link", { variant, size });
-    return /* @__PURE__ */ React31.createElement(React31.Fragment, null, " ", /* @__PURE__ */ React31.createElement(Box, {
+    return /* @__PURE__ */ React32.createElement(Box, {
       as,
       role: "link",
       css: styles,
       ref: linkRef,
       ...props,
       ...linkProps
-    }, children), " ");
+    }, children);
   }
 );
 
 // src/List/List.tsx
-import React33 from "react";
+import React34 from "react";
 import {
   Box as Box18,
   useComponentStyles as useComponentStyles18
@@ -1199,11 +1227,11 @@ var ListContext = createContext4({});
 var useListContext = () => useContext4(ListContext);
 
 // src/List/ListItem.tsx
-import React32 from "react";
+import React33 from "react";
 import { Box as Box17 } from "@marigold/system";
 var ListItem = ({ children, ...props }) => {
   const { styles } = useListContext();
-  return /* @__PURE__ */ React32.createElement(Box17, {
+  return /* @__PURE__ */ React33.createElement(Box17, {
     ...props,
     as: "li",
     css: styles
@@ -1223,18 +1251,18 @@ var List = ({
     { variant, size },
     { parts: ["ul", "ol", "item"] }
   );
-  return /* @__PURE__ */ React33.createElement(Box18, {
+  return /* @__PURE__ */ React34.createElement(Box18, {
     ...props,
     as,
     css: styles[as]
-  }, /* @__PURE__ */ React33.createElement(ListContext.Provider, {
+  }, /* @__PURE__ */ React34.createElement(ListContext.Provider, {
     value: { styles: styles.item }
   }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import React36, { 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";
@@ -1252,17 +1280,25 @@ var MenuContext = createContext5({});
 var useMenuContext = () => useContext5(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-import React34, { 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] = React34.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,
@@ -1276,15 +1312,15 @@ var MenuTrigger = ({ disabled, children }) => {
     autoFocus: state.focusStrategy
   };
   const isSmallScreen = useResponsiveValue([true, false, false], 2);
-  return /* @__PURE__ */ React34.createElement(MenuContext.Provider, {
+  return /* @__PURE__ */ React35.createElement(MenuContext.Provider, {
     value: menuContext
-  }, /* @__PURE__ */ React34.createElement(PressResponder2, {
+  }, /* @__PURE__ */ React35.createElement(PressResponder2, {
     ...menuTriggerProps,
     ref: menuTriggerRef,
     isPressed: state.isOpen
-  }, menuTrigger), isSmallScreen ? /* @__PURE__ */ React34.createElement(Tray, {
+  }, menuTrigger), isSmallScreen ? /* @__PURE__ */ React35.createElement(Tray, {
     state
-  }, menu) : /* @__PURE__ */ React34.createElement(Popover, {
+  }, menu) : /* @__PURE__ */ React35.createElement(Popover, {
     triggerRef: menuTriggerRef,
     scrollRef: menuRef,
     state
@@ -1292,7 +1328,7 @@ var MenuTrigger = ({ disabled, children }) => {
 };
 
 // src/Menu/MenuItem.tsx
-import React35, { 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";
@@ -1314,7 +1350,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ React35.createElement(Box19, {
+  return /* @__PURE__ */ React36.createElement(Box19, {
     as: "li",
     ref,
     __baseCSS: {
@@ -1342,7 +1378,7 @@ var Menu = ({ variant, size, ...props }) => {
     { variant, size },
     { parts: ["container", "item"] }
   );
-  return /* @__PURE__ */ React36.createElement(Box20, {
+  return /* @__PURE__ */ React37.createElement(Box20, {
     as: "ul",
     ref,
     __baseCSS: {
@@ -1352,19 +1388,35 @@ var Menu = ({ variant, size, ...props }) => {
     },
     css: styles.container,
     ...menuProps
-  }, [...state.collection].map((item) => /* @__PURE__ */ React36.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 React37 from "react";
+import React39 from "react";
 import { useComponentStyles as useComponentStyles20 } from "@marigold/system";
 var Message = ({
   messageTitle,
@@ -1381,43 +1433,43 @@ var Message = ({
     },
     { parts: ["container", "icon", "title", "content"] }
   );
-  var icon = /* @__PURE__ */ React37.createElement("svg", {
+  var icon = /* @__PURE__ */ React39.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, /* @__PURE__ */ React37.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__ */ React37.createElement("svg", {
+    icon = /* @__PURE__ */ React39.createElement("svg", {
       viewBox: "0 0 24 24"
-    }, /* @__PURE__ */ React37.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__ */ React37.createElement("svg", {
+    icon = /* @__PURE__ */ React39.createElement("svg", {
       viewBox: "0 0 24 24"
-    }, /* @__PURE__ */ React37.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__ */ React37.createElement(Box, {
+  return /* @__PURE__ */ React39.createElement(Box, {
     css: styles.container,
     ...props
-  }, /* @__PURE__ */ React37.createElement(Box, {
+  }, /* @__PURE__ */ React39.createElement(Box, {
     __baseCSS: { display: "flex", alignItems: "top", gap: 4 }
-  }, /* @__PURE__ */ React37.createElement(Box, {
+  }, /* @__PURE__ */ React39.createElement(Box, {
     role: "presentation",
     __baseCSS: { flex: "0 0 16px" },
     css: styles.icon
-  }, icon), /* @__PURE__ */ React37.createElement(Box, {
+  }, icon), /* @__PURE__ */ React39.createElement(Box, {
     css: styles.title
-  }, messageTitle)), /* @__PURE__ */ React37.createElement(Box, {
+  }, messageTitle)), /* @__PURE__ */ React39.createElement(Box, {
     css: styles.content
   }, children));
 };
 
 // src/NumberField/NumberField.tsx
-import React39, { 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";
@@ -1431,27 +1483,27 @@ import {
 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import React38, { 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__ */ React38.createElement(Box21, {
+var Plus = () => /* @__PURE__ */ React40.createElement(Box21, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, /* @__PURE__ */ React38.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__ */ React38.createElement(Box21, {
+var Minus = () => /* @__PURE__ */ React40.createElement(Box21, {
   as: "svg",
   __baseCSS: { width: 16, height: 16 },
   viewBox: "0 0 20 20",
   fill: "currentColor"
-}, /* @__PURE__ */ React38.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"
@@ -1469,7 +1521,7 @@ var StepButton = ({ direction, css, ...props }) => {
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React38.createElement(Box21, {
+  return /* @__PURE__ */ React40.createElement(Box21, {
     __baseCSS: {
       display: "flex",
       alignItems: "center",
@@ -1479,7 +1531,7 @@ var StepButton = ({ direction, css, ...props }) => {
     css,
     ...mergeProps4(buttonProps, hoverProps),
     ...stateProps
-  }, /* @__PURE__ */ React38.createElement(Icon3, null));
+  }, /* @__PURE__ */ React40.createElement(Icon3, null));
 };
 
 // src/NumberField/NumberField.tsx
@@ -1533,7 +1585,7 @@ var NumberField = forwardRef8(
       readOnly,
       error
     });
-    return /* @__PURE__ */ React39.createElement(FieldBase, {
+    return /* @__PURE__ */ React41.createElement(FieldBase, {
       label: props.label,
       labelProps,
       required,
@@ -1546,7 +1598,7 @@ var NumberField = forwardRef8(
       variant,
       size,
       width
-    }, /* @__PURE__ */ React39.createElement(Box22, {
+    }, /* @__PURE__ */ React41.createElement(Box22, {
       "data-group": true,
       __baseCSS: {
         display: "flex",
@@ -1559,17 +1611,17 @@ var NumberField = forwardRef8(
       css: styles.group,
       ...mergeProps5(groupProps, focusProps, hoverProps),
       ...stateProps
-    }, showStepper && /* @__PURE__ */ React39.createElement(StepButton, {
+    }, showStepper && /* @__PURE__ */ React41.createElement(StepButton, {
       direction: "down",
       css: styles.stepper,
       ...decrementButtonProps
-    }), /* @__PURE__ */ React39.createElement(Input, {
+    }), /* @__PURE__ */ React41.createElement(Input, {
       ref: inputRef,
       variant,
       size,
       ...inputProps,
       ...stateProps
-    }), showStepper && /* @__PURE__ */ React39.createElement(StepButton, {
+    }), showStepper && /* @__PURE__ */ React41.createElement(StepButton, {
       direction: "up",
       css: styles.stepper,
       ...incrementButtonProps
@@ -1582,7 +1634,7 @@ import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigol
 import { SSRProvider } from "@react-aria/ssr";
 
 // src/Provider/MarigoldProvider.tsx
-import React40 from "react";
+import React42 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   Global,
@@ -1605,16 +1657,16 @@ function MarigoldProvider({
       Nested themes with a "root" property must specify a "selector" to prevent accidentally overriding global CSS`
     );
   }
-  return /* @__PURE__ */ React40.createElement(ThemeProvider, {
+  return /* @__PURE__ */ React42.createElement(ThemeProvider, {
     theme
-  }, /* @__PURE__ */ React40.createElement(Global, {
+  }, /* @__PURE__ */ React42.createElement(Global, {
     normalizeDocument: isTopLevel && normalizeDocument,
     selector
-  }), isTopLevel ? /* @__PURE__ */ React40.createElement(OverlayProvider, null, children) : children);
+  }), isTopLevel ? /* @__PURE__ */ React42.createElement(OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-import React42, {
+import React44, {
   forwardRef as forwardRef9
 } from "react";
 import { useHover as useHover5 } from "@react-aria/interactions";
@@ -1635,7 +1687,7 @@ var RadioGroupContext = createContext6(
 var useRadioGroupContext = () => useContext6(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import React41 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";
@@ -1663,7 +1715,7 @@ var RadioGroup = ({
     readOnly,
     error
   });
-  return /* @__PURE__ */ React41.createElement(FieldBase, {
+  return /* @__PURE__ */ React43.createElement(FieldBase, {
     width,
     label: props.label,
     labelProps: { as: "span", ...labelProps },
@@ -1676,7 +1728,7 @@ var RadioGroup = ({
     stateProps,
     required,
     ...radioGroupProps
-  }, /* @__PURE__ */ React41.createElement(Box23, {
+  }, /* @__PURE__ */ React43.createElement(Box23, {
     role: "presentation",
     "data-orientation": orientation,
     __baseCSS: {
@@ -1685,21 +1737,21 @@ var RadioGroup = ({
       alignItems: "start",
       gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
     }
-  }, /* @__PURE__ */ React41.createElement(RadioGroupContext.Provider, {
+  }, /* @__PURE__ */ React43.createElement(RadioGroupContext.Provider, {
     value: { width, error, state }
   }, children)));
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ React42.createElement("svg", {
+var Dot = () => /* @__PURE__ */ React44.createElement("svg", {
   viewBox: "0 0 6 6"
-}, /* @__PURE__ */ React42.createElement("circle", {
+}, /* @__PURE__ */ React44.createElement("circle", {
   fill: "currentColor",
   cx: "3",
   cy: "3",
   r: "3"
 }));
-var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React42.createElement(Box24, {
+var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React44.createElement(Box24, {
   "aria-hidden": "true",
   __baseCSS: {
     width: 16,
@@ -1714,7 +1766,7 @@ var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React42.createElemen
   },
   css,
   ...props
-}, checked ? /* @__PURE__ */ React42.createElement(Dot, null) : null);
+}, checked ? /* @__PURE__ */ React44.createElement(Dot, null) : null);
 var Radio = forwardRef9(
   ({ width, disabled, ...props }, ref) => {
     const {
@@ -1745,7 +1797,7 @@ var Radio = forwardRef9(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ React42.createElement(Box24, {
+    return /* @__PURE__ */ React44.createElement(Box24, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -1756,7 +1808,7 @@ var Radio = forwardRef9(
       },
       css: styles.container,
       ...mergeProps6(hoverProps, stateProps)
-    }, /* @__PURE__ */ React42.createElement(Box24, {
+    }, /* @__PURE__ */ React44.createElement(Box24, {
       as: "input",
       ref: inputRef,
       css: {
@@ -1770,11 +1822,11 @@ var Radio = forwardRef9(
         cursor: inputProps.disabled ? "not-allowed" : "pointer"
       },
       ...mergeProps6(inputProps, focusProps)
-    }), /* @__PURE__ */ React42.createElement(Icon2, {
+    }), /* @__PURE__ */ React44.createElement(Icon2, {
       checked: inputProps.checked,
       css: styles.radio,
       ...stateProps
-    }), /* @__PURE__ */ React42.createElement(Box24, {
+    }), /* @__PURE__ */ React44.createElement(Box24, {
       css: styles.label,
       ...stateProps
     }, props.children));
@@ -1783,7 +1835,7 @@ var Radio = forwardRef9(
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-import React46, {
+import React48, {
   forwardRef as forwardRef11,
   useRef as useRef9
 } from "react";
@@ -1802,7 +1854,7 @@ import {
 } from "@marigold/system";
 
 // src/ListBox/ListBox.tsx
-import React45, { forwardRef as forwardRef10 } from "react";
+import React47, { forwardRef as forwardRef10 } from "react";
 import { useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import {
   Box as Box27,
@@ -1816,12 +1868,12 @@ var ListBoxContext = createContext7({});
 var useListBoxContext = () => useContext7(ListBoxContext);
 
 // src/ListBox/ListBoxSection.tsx
-import React44 from "react";
+import React46 from "react";
 import { useListBoxSection } from "@react-aria/listbox";
 import { Box as Box26 } from "@marigold/system";
 
 // src/ListBox/ListBoxOption.tsx
-import React43, { 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";
@@ -1841,7 +1893,7 @@ var ListBoxOption = ({ item, state }) => {
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React43.createElement(Box25, {
+  return /* @__PURE__ */ React45.createElement(Box25, {
     as: "li",
     ref,
     css: styles.option,
@@ -1856,19 +1908,19 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ React44.createElement(Box26, {
+  return /* @__PURE__ */ React46.createElement(Box26, {
     as: "li",
     css: styles.section,
     ...itemProps
-  }, section.rendered && /* @__PURE__ */ React44.createElement(Box26, {
+  }, section.rendered && /* @__PURE__ */ React46.createElement(Box26, {
     css: styles.sectionTitle,
     ...headingProps
-  }, section.rendered), /* @__PURE__ */ React44.createElement(Box26, {
+  }, section.rendered), /* @__PURE__ */ React46.createElement(Box26, {
     as: "ul",
     __baseCSS: { listStyle: "none", p: 0 },
     css: styles.list,
     ...groupProps
-  }, [...section.childNodes].map((node) => /* @__PURE__ */ React44.createElement(ListBoxOption, {
+  }, [...section.childNodes].map((node) => /* @__PURE__ */ React46.createElement(ListBoxOption, {
     key: node.key,
     item: node,
     state
@@ -1885,22 +1937,22 @@ var ListBox = forwardRef10(
       { variant, size },
       { parts: ["container", "list", "option", "section", "sectionTitle"] }
     );
-    return /* @__PURE__ */ React45.createElement(ListBoxContext.Provider, {
+    return /* @__PURE__ */ React47.createElement(ListBoxContext.Provider, {
       value: { styles }
-    }, /* @__PURE__ */ React45.createElement(Box27, {
+    }, /* @__PURE__ */ React47.createElement(Box27, {
       css: styles.container
-    }, /* @__PURE__ */ React45.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__ */ React45.createElement(ListBoxSection, {
+      (item) => item.type === "section" ? /* @__PURE__ */ React47.createElement(ListBoxSection, {
         key: item.key,
         section: item,
         state
-      }) : /* @__PURE__ */ React45.createElement(ListBoxOption, {
+      }) : /* @__PURE__ */ React47.createElement(ListBoxOption, {
         key: item.key,
         item,
         state
@@ -1920,20 +1972,30 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ React46.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__ */ React46.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,
@@ -1941,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);
@@ -1971,7 +2034,7 @@ var Select = forwardRef11(
       focusVisible: isFocusVisible,
       expanded: state.isOpen
     });
-    return /* @__PURE__ */ React46.createElement(FieldBase, {
+    return /* @__PURE__ */ React48.createElement(FieldBase, {
       variant,
       size,
       width,
@@ -1985,13 +2048,13 @@ var Select = forwardRef11(
       stateProps,
       disabled,
       required
-    }, /* @__PURE__ */ React46.createElement(HiddenSelect, {
+    }, /* @__PURE__ */ React48.createElement(HiddenSelect, {
       state,
       triggerRef: buttonRef,
       label: props.label,
       name: props.name,
       isDisabled: disabled
-    }), /* @__PURE__ */ React46.createElement(Box28, {
+    }), /* @__PURE__ */ React48.createElement(Box28, {
       as: "button",
       __baseCSS: {
         display: "flex",
@@ -2004,27 +2067,27 @@ var Select = forwardRef11(
       ref: buttonRef,
       ...mergeProps8(buttonProps, focusProps),
       ...stateProps
-    }, /* @__PURE__ */ React46.createElement(Box28, {
+    }, /* @__PURE__ */ React48.createElement(Box28, {
       css: {
         overflow: "hidden",
         whiteSpace: "nowrap"
       },
       ...valueProps
-    }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React46.createElement(Chevron, {
+    }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React48.createElement(Chevron, {
       css: styles.icon
-    })), isSmallScreen ? /* @__PURE__ */ React46.createElement(Tray, {
+    })), isSmallScreen ? /* @__PURE__ */ React48.createElement(Tray, {
       state
-    }, /* @__PURE__ */ React46.createElement(ListBox, {
+    }, /* @__PURE__ */ React48.createElement(ListBox, {
       ref: listboxRef,
       state,
       variant,
       size,
       ...menuProps
-    })) : /* @__PURE__ */ React46.createElement(Popover, {
+    })) : /* @__PURE__ */ React48.createElement(Popover, {
       state,
       triggerRef: buttonRef,
       scrollRef: listboxRef
-    }, /* @__PURE__ */ React46.createElement(ListBox, {
+    }, /* @__PURE__ */ React48.createElement(ListBox, {
       ref: listboxRef,
       state,
       variant,
@@ -2037,7 +2100,7 @@ Select.Option = Item2;
 Select.Section = Section;
 
 // src/Slider/Slider.tsx
-import React48, { 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";
@@ -2045,7 +2108,7 @@ import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
 import { useComponentStyles as useComponentStyles25 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
-import React47, { 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";
@@ -2057,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 = React47.useRef(null);
+  const inputRef = React49.useRef(null);
   const { isFocusVisible, focusProps, isFocused } = useFocusRing7();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
   const stateProps = useStateProps11({
@@ -2076,12 +2139,12 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
   useEffect(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ React47.createElement(Box, {
+  return /* @__PURE__ */ React49.createElement(Box, {
     __baseCSS: { top: "50%" },
     css: styles,
     ...thumbProps,
     ...stateProps
-  }, /* @__PURE__ */ React47.createElement(VisuallyHidden, null, /* @__PURE__ */ React47.createElement(Box, {
+  }, /* @__PURE__ */ React49.createElement(VisuallyHidden, null, /* @__PURE__ */ React49.createElement(Box, {
     as: "input",
     type: "range",
     ref: inputRef,
@@ -2109,7 +2172,7 @@ var Slider = forwardRef12(
       { variant, size },
       { parts: ["track", "thumb", "label", "output"] }
     );
-    return /* @__PURE__ */ React48.createElement(Box, {
+    return /* @__PURE__ */ React50.createElement(Box, {
       __baseCSS: {
         display: "flex",
         flexDirection: "column",
@@ -2117,18 +2180,18 @@ var Slider = forwardRef12(
         width
       },
       ...groupProps
-    }, /* @__PURE__ */ React48.createElement(Box, {
+    }, /* @__PURE__ */ React50.createElement(Box, {
       __baseCSS: { display: "flex", alignSelf: "stretch" }
-    }, props.children && /* @__PURE__ */ React48.createElement(Box, {
+    }, props.children && /* @__PURE__ */ React50.createElement(Box, {
       as: "label",
       __baseCSS: styles.label,
       ...labelProps
-    }, props.children), /* @__PURE__ */ React48.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__ */ React48.createElement(Box, {
+    }, state.getThumbValueLabel(0))), /* @__PURE__ */ React50.createElement(Box, {
       ...trackProps,
       ref: trackRef,
       __baseCSS: {
@@ -2136,13 +2199,13 @@ var Slider = forwardRef12(
         width: "100%",
         cursor: props.disabled ? "not-allowed" : "pointer"
       }
-    }, /* @__PURE__ */ React48.createElement(Box, {
+    }, /* @__PURE__ */ React50.createElement(Box, {
       __baseCSS: {
         top: "50%",
         transform: "translateY(-50%)"
       },
       css: styles.track
-    }), /* @__PURE__ */ React48.createElement(Thumb, {
+    }), /* @__PURE__ */ React50.createElement(Thumb, {
       state,
       trackRef,
       disabled: props.disabled,
@@ -2152,16 +2215,16 @@ var Slider = forwardRef12(
 );
 
 // src/Split/Split.tsx
-import React49 from "react";
+import React51 from "react";
 import { Box as Box29 } from "@marigold/system";
-var Split = (props) => /* @__PURE__ */ React49.createElement(Box29, {
+var Split = (props) => /* @__PURE__ */ React51.createElement(Box29, {
   ...props,
   role: "separator",
   css: { flexGrow: 1 }
 });
 
 // src/Stack/Stack.tsx
-import React50 from "react";
+import React52 from "react";
 var ALIGNMENT_X2 = {
   none: "initial",
   left: "flex-start",
@@ -2181,7 +2244,7 @@ var Stack = ({
   alignY = "none",
   stretch = false,
   ...props
-}) => /* @__PURE__ */ React50.createElement(Box, {
+}) => /* @__PURE__ */ React52.createElement(Box, {
   css: {
     display: "flex",
     flexDirection: "column",
@@ -2195,7 +2258,7 @@ var Stack = ({
 }, children);
 
 // src/Switch/Switch.tsx
-import React51, { 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";
@@ -2237,7 +2300,7 @@ var Switch = forwardRef13(
       { variant, size },
       { parts: ["container", "label", "track", "thumb"] }
     );
-    return /* @__PURE__ */ React51.createElement(Box, {
+    return /* @__PURE__ */ React53.createElement(Box, {
       as: "label",
       __baseCSS: {
         display: "flex",
@@ -2248,7 +2311,7 @@ var Switch = forwardRef13(
         width
       },
       css: styles.container
-    }, /* @__PURE__ */ React51.createElement(Box, {
+    }, /* @__PURE__ */ React53.createElement(Box, {
       as: "input",
       ref: inputRef,
       css: {
@@ -2263,9 +2326,9 @@ var Switch = forwardRef13(
       },
       ...inputProps,
       ...focusProps
-    }), props.children && /* @__PURE__ */ React51.createElement(Box, {
+    }), props.children && /* @__PURE__ */ React53.createElement(Box, {
       css: styles.label
-    }, props.children), /* @__PURE__ */ React51.createElement(Box, {
+    }, props.children), /* @__PURE__ */ React53.createElement(Box, {
       __baseCSS: {
         position: "relative",
         width: 48,
@@ -2276,7 +2339,7 @@ var Switch = forwardRef13(
       },
       css: styles.track,
       ...stateProps
-    }, /* @__PURE__ */ React51.createElement(Box, {
+    }, /* @__PURE__ */ React53.createElement(Box, {
       __baseCSS: {
         display: "block",
         position: "absolute",
@@ -2300,7 +2363,7 @@ var Switch = forwardRef13(
 );
 
 // src/Table/Table.tsx
-import React60, { useRef as useRef16 } from "react";
+import React62, { useRef as useRef16 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   Cell,
@@ -2321,17 +2384,17 @@ var TableContext = createContext8({});
 var useTableContext = () => useContext8(TableContext);
 
 // src/Table/TableBody.tsx
-import React52 from "react";
+import React54 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React52.createElement("tbody", {
+  return /* @__PURE__ */ React54.createElement("tbody", {
     ...rowGroupProps
   }, children);
 };
 
 // src/Table/TableCell.tsx
-import React53, { 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";
@@ -2354,7 +2417,7 @@ var TableCell = ({ cell }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing9();
   const stateProps = useStateProps13({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React53.createElement(Box30, {
+  return /* @__PURE__ */ React55.createElement(Box30, {
     as: "td",
     ref,
     css: styles.cell,
@@ -2364,7 +2427,7 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React54, { 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";
@@ -2407,7 +2470,7 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing10();
   const stateProps = useStateProps14({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React54.createElement(Box31, {
+  return /* @__PURE__ */ React56.createElement(Box31, {
     as: "td",
     ref,
     __baseCSS: {
@@ -2418,13 +2481,13 @@ var TableCheckboxCell = ({ cell }) => {
     css: styles.cell,
     ...mergeProps11(gridCellProps, focusProps),
     ...stateProps
-  }, /* @__PURE__ */ React54.createElement(Checkbox, {
+  }, /* @__PURE__ */ React56.createElement(Checkbox, {
     ...checkboxProps
   }));
 };
 
 // src/Table/TableColumnHeader.tsx
-import React55, { 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";
@@ -2433,7 +2496,7 @@ import { Box as Box32, useStateProps as useStateProps15 } from "@marigold/system
 var SortIndicator = ({
   direction = "ascending",
   visible
-}) => /* @__PURE__ */ React55.createElement(Box32, {
+}) => /* @__PURE__ */ React57.createElement(Box32, {
   as: "span",
   role: "presentation",
   "aria-hidden": "true",
@@ -2460,7 +2523,7 @@ var TableColumnHeader = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React55.createElement(Box32, {
+  return /* @__PURE__ */ React57.createElement(Box32, {
     as: "th",
     colSpan: column.colspan,
     ref,
@@ -2468,37 +2531,37 @@ var TableColumnHeader = ({ column }) => {
     css: styles.header,
     ...mergeProps12(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
-  }, column.rendered, column.props.allowsSorting && /* @__PURE__ */ React55.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 React56 from "react";
+import React58 from "react";
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React56.createElement("thead", {
+  return /* @__PURE__ */ React58.createElement("thead", {
     ...rowGroupProps
   }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React57, { 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__ */ React57.createElement("tr", {
+  return /* @__PURE__ */ React59.createElement("tr", {
     ...rowProps,
     ref
   }, children);
 };
 
 // src/Table/TableRow.tsx
-import React58, { 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";
@@ -2533,7 +2596,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React58.createElement(Box33, {
+  return /* @__PURE__ */ React60.createElement(Box33, {
     as: "tr",
     ref,
     __baseCSS: {
@@ -2546,7 +2609,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React59, { 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 {
@@ -2572,7 +2635,7 @@ var TableSelectAllCell = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React59.createElement(Box34, {
+  return /* @__PURE__ */ React61.createElement(Box34, {
     as: "th",
     ref,
     __baseCSS: {
@@ -2583,7 +2646,7 @@ var TableSelectAllCell = ({ column }) => {
     css: styles.header,
     ...mergeProps14(columnHeaderProps, hoverProps, focusProps),
     ...stateProps
-  }, /* @__PURE__ */ React59.createElement(Checkbox, {
+  }, /* @__PURE__ */ React61.createElement(Checkbox, {
     ...checkboxProps
   }));
 };
@@ -2610,9 +2673,9 @@ var Table = ({
     { parts: ["table", "header", "row", "cell"] }
   );
   const { collection } = state;
-  return /* @__PURE__ */ React60.createElement(TableContext.Provider, {
+  return /* @__PURE__ */ React62.createElement(TableContext.Provider, {
     value: { state, interactive, styles }
-  }, /* @__PURE__ */ React60.createElement(Box35, {
+  }, /* @__PURE__ */ React62.createElement(Box35, {
     as: "table",
     ref: tableRef,
     __baseCSS: {
@@ -2624,30 +2687,30 @@ var Table = ({
     },
     css: styles.table,
     ...gridProps
-  }, /* @__PURE__ */ React60.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React60.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__ */ React60.createElement(TableSelectAllCell, {
+      return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React62.createElement(TableSelectAllCell, {
         key: column.key,
         column
-      }) : /* @__PURE__ */ React60.createElement(TableColumnHeader, {
+      }) : /* @__PURE__ */ React62.createElement(TableColumnHeader, {
         key: column.key,
         column
       });
     }
-  )))), /* @__PURE__ */ React60.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React60.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__ */ React60.createElement(TableCheckboxCell, {
+      return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React62.createElement(TableCheckboxCell, {
         key: cell.key,
         cell
-      }) : /* @__PURE__ */ React60.createElement(TableCell, {
+      }) : /* @__PURE__ */ React62.createElement(TableCell, {
         key: cell.key,
         cell
       });
@@ -2661,7 +2724,7 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React61 from "react";
+import React63 from "react";
 import {
   useComponentStyles as useComponentStyles29
 } from "@marigold/system";
@@ -2669,6 +2732,7 @@ import { Box as Box36 } from "@marigold/system";
 var Text = ({
   variant,
   size,
+  display,
   align,
   color,
   fontSize,
@@ -2682,18 +2746,26 @@ var Text = ({
     variant,
     size
   });
-  return /* @__PURE__ */ React61.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 React62, { 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";
@@ -2738,7 +2810,7 @@ var TextArea = forwardRef14(
       error
     });
     const styles = useComponentStyles30("TextArea", { variant, size });
-    return /* @__PURE__ */ React62.createElement(FieldBase, {
+    return /* @__PURE__ */ React64.createElement(FieldBase, {
       label,
       labelProps,
       required,
@@ -2751,7 +2823,7 @@ var TextArea = forwardRef14(
       variant,
       size,
       width
-    }, /* @__PURE__ */ React62.createElement(Box37, {
+    }, /* @__PURE__ */ React64.createElement(Box37, {
       as: "textarea",
       css: styles,
       ref: textAreaRef,
@@ -2765,7 +2837,7 @@ var TextArea = forwardRef14(
 );
 
 // src/TextField/TextField.tsx
-import React63, { 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";
@@ -2797,7 +2869,7 @@ var TextField = forwardRef15(
       readOnly,
       error
     });
-    return /* @__PURE__ */ React63.createElement(FieldBase, {
+    return /* @__PURE__ */ React65.createElement(FieldBase, {
       label,
       labelProps,
       required,
@@ -2810,7 +2882,7 @@ var TextField = forwardRef15(
       variant,
       size,
       width
-    }, /* @__PURE__ */ React63.createElement(Input, {
+    }, /* @__PURE__ */ React65.createElement(Input, {
       ref: inputRef,
       variant,
       size,
@@ -2823,7 +2895,7 @@ var TextField = forwardRef15(
 );
 
 // src/Tiles/Tiles.tsx
-import React64 from "react";
+import React66 from "react";
 import { useTheme as useTheme3 } from "@marigold/system";
 var Tiles = ({
   space = "none",
@@ -2839,7 +2911,7 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ React64.createElement(Box, {
+  return /* @__PURE__ */ React66.createElement(Box, {
     ...props,
     css: {
       display: "grid",
@@ -2851,7 +2923,7 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-import React66 from "react";
+import React68 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import {
   Box as Box38,
@@ -2864,7 +2936,7 @@ var TooltipContext = createContext9({});
 var useTooltipContext = () => useContext9(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React65, { 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";
@@ -2877,7 +2949,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = React65.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = React67.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -2905,10 +2977,10 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React65.createElement(FocusableProvider, {
+  return /* @__PURE__ */ React67.createElement(FocusableProvider, {
     ref: tooltipTriggerRef,
     ...triggerProps
-  }, tooltipTrigger, /* @__PURE__ */ React65.createElement(TooltipContext.Provider, {
+  }, tooltipTrigger, /* @__PURE__ */ React67.createElement(TooltipContext.Provider, {
     value: {
       state,
       overlayRef,
@@ -2917,7 +2989,7 @@ var TooltipTrigger = ({
       ...tooltipProps,
       ...positionProps
     }
-  }, /* @__PURE__ */ React65.createElement(Overlay, {
+  }, /* @__PURE__ */ React67.createElement(Overlay, {
     open: state.isOpen
   }, tooltip)));
 };
@@ -2931,13 +3003,13 @@ var Tooltip = ({ children, variant, size }) => {
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ React66.createElement(Box38, {
+  return /* @__PURE__ */ React68.createElement(Box38, {
     ...tooltipProps,
     ...rest,
     ref: overlayRef,
     css: styles.container,
     "data-placement": placement
-  }, /* @__PURE__ */ React66.createElement("div", null, children), /* @__PURE__ */ React66.createElement(Box38, {
+  }, /* @__PURE__ */ React68.createElement("div", null, children), /* @__PURE__ */ React68.createElement(Box38, {
     ...arrowProps,
     __baseCSS: {
       position: "absolute",
@@ -2954,122 +3026,122 @@ var Tooltip = ({ children, variant, size }) => {
 Tooltip.Trigger = TooltipTrigger;
 
 // src/XLoader/XLoader.tsx
-import { SVG as SVG3 } from "@marigold/system";
-import React67, { forwardRef as forwardRef16 } from "react";
-var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React67.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__ */ React67.createElement("path", {
+}, /* @__PURE__ */ React69.createElement("path", {
   id: "XMLID_1_",
   d: "M35.3 27h26.5l54 74.1H88.7z"
-}), /* @__PURE__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.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__ */ React67.createElement("animate", {
+}, /* @__PURE__ */ React69.createElement("animate", {
   attributeName: "opacity",
   attributeType: "XML",
   values: "1; .01; 1; 1; 1;",
@@ -3078,6 +3150,7 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React67.createElement
   repeatCount: "indefinite"
 }))));
 export {
+  ActionMenu,
   Aside,
   Aspect,
   Badge,