@marigold/components 11.4.0 → 11.4.1

package/dist/index.mjs

@@ -1309,7 +1309,7 @@ import { ListBoxItem } from "react-aria-components";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var _ListBoxItem = ({ ...props }) => {
   const { classNames: classNames3 } = useListBoxContext();
-  return /* @__PURE__ */ jsx14(ListBoxItem, { ...props, className: classNames3.option });
+  return /* @__PURE__ */ jsx14(ListBoxItem, { ...props, className: classNames3.item });
 };
 
 // src/ListBox/ListBoxSection.tsx
@@ -2103,106 +2103,17 @@ var Container = ({
 );
 
 // src/Dialog/Dialog.tsx
-import { useContext as useContext8 } from "react";
-import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
-import { cn as cn27, useClassNames as useClassNames25 } from "@marigold/system";
-
-// src/Dialog/DialogActions.tsx
-import { cn as cn23, useClassNames as useClassNames20 } from "@marigold/system";
-import { jsx as jsx39 } from "react/jsx-runtime";
-var DialogActions = ({ variant, size: size2, children }) => {
-  const classNames3 = useClassNames20({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ jsx39("div", { className: cn23("[grid-area:actions]", classNames3.actions), children });
-};
-
-// src/Dialog/DialogContent.tsx
-import { cn as cn24, useClassNames as useClassNames21 } from "@marigold/system";
-import { jsx as jsx40 } from "react/jsx-runtime";
-var DialogContent = ({
-  variant,
-  size: size2,
-  children
-}) => {
-  const classNames3 = useClassNames21({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ jsx40("div", { className: cn24("[grid-area:content]", classNames3.content), children });
-};
-
-// src/Dialog/DialogTitle.tsx
-import { cn as cn26, useClassNames as useClassNames24 } from "@marigold/system";
-
-// src/Header/Header.tsx
-import { Header as Header2 } from "react-aria-components";
-import { useClassNames as useClassNames22 } from "@marigold/system";
-import { jsx as jsx41 } from "react/jsx-runtime";
-var _Header = ({ variant, size: size2, ...props }) => {
-  const classNames3 = useClassNames22({
-    component: "Header",
-    variant,
-    size: size2
-  });
-  return /* @__PURE__ */ jsx41(Header2, { className: classNames3, ...props, children: props.children });
-};
-
-// src/Headline/Headline.tsx
-import { Heading as Heading2 } from "react-aria-components";
 import {
-  cn as cn25,
-  ensureCssVar,
-  textAlign,
-  useClassNames as useClassNames23
-} from "@marigold/system";
-import { jsx as jsx42 } from "react/jsx-runtime";
-var _Headline = ({
-  variant,
-  size: size2,
-  children,
-  align = "left",
-  color,
-  level = "1",
-  ...props
-}) => {
-  const classNames3 = useClassNames23({
-    component: "Headline",
-    variant,
-    size: size2 != null ? size2 : `level-${level}`
-  });
-  return /* @__PURE__ */ jsx42(
-    Heading2,
-    {
-      level: Number(level),
-      ...props,
-      className: cn25(
-        classNames3,
-        "max-w-(--maxHeadlineWidth)",
-        // possibly set by a <Container>
-        textAlign[align]
-      ),
-      style: { color: color && ensureCssVar(color, "color") },
-      children
-    }
-  );
-};
-
-// src/Dialog/DialogTitle.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
-var DialogTitle = ({
-  level = "2",
-  variant,
-  size: size2,
-  children
-}) => {
-  const classNames3 = useClassNames24({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ jsx43(_Header, { className: cn26("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ jsx43(_Headline, { slot: "title", level, children }) });
-};
-
-// src/Dialog/DialogTrigger.tsx
-import { Children as Children3 } from "react";
-import { DialogTrigger } from "react-aria-components";
+  forwardRef as forwardRef17,
+  useContext as useContext9
+} from "react";
+import { Dialog, OverlayTriggerStateContext as OverlayTriggerStateContext2 } from "react-aria-components";
+import { cn as cn26, useClassNames as useClassNames23 } from "@marigold/system";
 
 // src/Overlay/Modal.tsx
 import { forwardRef as forwardRef15 } from "react";
 import { Modal } from "react-aria-components";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var _Modal = forwardRef15(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
@@ -2210,14 +2121,14 @@ var _Modal = forwardRef15(({ open, dismissable, keyboardDismissable, ...rest },
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx39(
     Underlay,
     {
       dismissable,
       keyboardDismissable,
       open,
       variant: "modal",
-      children: /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsx39(
         Modal,
         {
           ref,
@@ -2230,52 +2141,241 @@ var _Modal = forwardRef15(({ open, dismissable, keyboardDismissable, ...rest },
   );
 });
 
+// src/Overlay/NonModal.tsx
+import { forwardRef as forwardRef16, useContext as useContext8 } from "react";
+import {
+  OverlayTriggerStateContext,
+  Provider
+} from "react-aria-components";
+import {
+  useOverlayTriggerState
+} from "react-stately";
+import { FocusScope } from "@react-aria/focus";
+import { DismissButton, Overlay } from "@react-aria/overlays";
+import { useIsSSR as useIsSSR2 } from "@react-aria/ssr";
+import {
+  filterDOMProps,
+  mergeProps,
+  useEnterAnimation,
+  useExitAnimation,
+  useObjectRef,
+  useViewportSize
+} from "@react-aria/utils";
+
+// src/utils/useRenderProps.tsx
+import { useMemo } from "react";
+function useRenderProps(props) {
+  let {
+    className,
+    style,
+    children,
+    defaultClassName = void 0,
+    defaultChildren = void 0,
+    defaultStyle,
+    values
+  } = props;
+  return useMemo(() => {
+    let computedClassName;
+    let computedStyle;
+    let computedChildren;
+    if (typeof className === "function") {
+      computedClassName = className({ ...values, defaultClassName });
+    } else {
+      computedClassName = className;
+    }
+    if (typeof style === "function") {
+      computedStyle = style({ ...values, defaultStyle: defaultStyle || {} });
+    } else {
+      computedStyle = style;
+    }
+    if (typeof children === "function") {
+      computedChildren = children({ ...values, defaultChildren });
+    } else if (children == null) {
+      computedChildren = defaultChildren;
+    } else {
+      computedChildren = children;
+    }
+    return {
+      className: computedClassName != null ? computedClassName : defaultClassName,
+      style: computedStyle || defaultStyle ? { ...defaultStyle, ...computedStyle } : void 0,
+      children: computedChildren != null ? computedChildren : defaultChildren,
+      "data-rac": ""
+    };
+  }, [
+    className,
+    style,
+    children,
+    defaultClassName,
+    defaultChildren,
+    defaultStyle,
+    values
+  ]);
+}
+
+// src/Overlay/useNonModal.ts
+import { useOverlay } from "@react-aria/overlays";
+var useNonModal = ({ nonModalRef, keyboardDismissable = true }, state) => {
+  let { overlayProps } = useOverlay(
+    {
+      isOpen: state.isOpen,
+      onClose: state.close,
+      shouldCloseOnBlur: false,
+      isDismissable: false,
+      isKeyboardDismissDisabled: keyboardDismissable ? false : true
+    },
+    nonModalRef
+  );
+  return {
+    nonModalProps: overlayProps
+  };
+};
+
+// src/Overlay/NonModal.tsx
+import { jsx as jsx40, jsxs as jsxs15 } from "react/jsx-runtime";
+var NonModalInner = ({ state, isExiting, ...props }) => {
+  const { nonModalProps } = useNonModal(props, state);
+  const ref = props.nonModalRef;
+  const portalContainer = usePortalContainer();
+  const isEntering = useEnterAnimation(ref) || props.isEntering || false;
+  const renderProps = useRenderProps({
+    ...props,
+    defaultClassName: "react-aria-NonModalOverlay",
+    values: {
+      isEntering,
+      isExiting,
+      state
+    }
+  });
+  const viewport = useViewportSize();
+  const style = {
+    ...renderProps.style,
+    "--visual-viewport-height": viewport.height + "px"
+  };
+  const overlay = /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      ...mergeProps(filterDOMProps(props), nonModalProps),
+      ...renderProps,
+      tabIndex: -1,
+      "aria-label": props["aria-label"],
+      "aria-labelledby": props["aria-labelledby"],
+      ref,
+      slot: props.slot || void 0,
+      style,
+      "data-entering": isEntering || void 0,
+      "data-exiting": isExiting || void 0,
+      children: [
+        renderProps.children,
+        /* @__PURE__ */ jsx40(DismissButton, { onDismiss: state.close })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx40(
+    Overlay,
+    {
+      isExiting,
+      portalContainer,
+      disableFocusManagement: true,
+      children: /* @__PURE__ */ jsx40(FocusScope, { restoreFocus: true, children: /* @__PURE__ */ jsx40(Provider, { values: [[OverlayTriggerStateContext, state]], children: overlay }) })
+    }
+  );
+};
+var NonModal = forwardRef16(
+  ({ open, ...rest }, ref) => {
+    const props = {
+      isOpen: open,
+      ...rest
+    };
+    ref = useObjectRef(ref);
+    const contextState = useContext8(OverlayTriggerStateContext);
+    const localState = useOverlayTriggerState(props);
+    const state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+    const isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;
+    const isSSR = useIsSSR2();
+    if (state && !state.isOpen && !isExiting || isSSR) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx40(
+      NonModalInner,
+      {
+        ...props,
+        nonModalRef: ref,
+        state,
+        isExiting
+      }
+    );
+  }
+);
+
+// src/Dialog/DialogActions.tsx
+import { cn as cn23, useClassNames as useClassNames20 } from "@marigold/system";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var DialogActions = ({ variant, size: size2, children }) => {
+  const classNames3 = useClassNames20({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ jsx41("div", { className: cn23("[grid-area:actions]", classNames3.actions), children });
+};
+
+// src/Dialog/DialogContent.tsx
+import { cn as cn24, useClassNames as useClassNames21 } from "@marigold/system";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var DialogContent = ({
+  variant,
+  size: size2,
+  children
+}) => {
+  const classNames3 = useClassNames21({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ jsx42("div", { className: cn24("[grid-area:content]", classNames3.content), children });
+};
+
+// src/Dialog/DialogTitle.tsx
+import { Header as Header2, Heading as Heading2 } from "react-aria-components";
+import { cn as cn25, useClassNames as useClassNames22 } from "@marigold/system";
+import { jsx as jsx43 } from "react/jsx-runtime";
+var DialogTitle = ({ variant, size: size2, children }) => {
+  const classNames3 = useClassNames22({
+    component: "Dialog",
+    variant,
+    size: size2
+  });
+  return /* @__PURE__ */ jsx43(Header2, { className: cn25("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ jsx43(Heading2, { slot: "title", className: classNames3.title, children }) });
+};
+
 // src/Dialog/DialogTrigger.tsx
-import { jsx as jsx45, jsxs as jsxs15 } from "react/jsx-runtime";
+import { createContext as createContext6 } from "react";
+import { DialogTrigger } from "react-aria-components";
+import { PressResponder } from "@react-aria/interactions";
+import { jsx as jsx44 } from "react/jsx-runtime";
+var DialogContext = createContext6({});
 var _DialogTrigger = ({
   open,
   dismissable,
   keyboardDismissable,
-  isNonModal,
+  size: size2,
   ...rest
 }) => {
   const props = {
     isOpen: open,
+    isDismissable: dismissable,
+    isKeyboardDismissDisabled: !keyboardDismissable,
     ...rest
   };
-  const children = Children3.toArray(props.children);
-  const [dialogTrigger, dialog] = children;
-  const hasDialogTrigger = dialogTrigger.type !== _Dialog;
-  const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
-  if (isNonModal)
-    return /* @__PURE__ */ jsx45(DialogTrigger, { ...props, children: props.children });
-  return /* @__PURE__ */ jsxs15(DialogTrigger, { ...props, children: [
-    hasDialogTrigger && dialogTrigger,
-    /* @__PURE__ */ jsx45(
-      _Modal,
-      {
-        dismissable,
-        keyboardDismissable,
-        children: currentDialog
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx44(DialogContext.Provider, { value: props, children: /* @__PURE__ */ jsx44(DialogTrigger, { ...props, children: /* @__PURE__ */ jsx44(PressResponder, { isPressed: false, children: props.children }) }) });
 };
 
 // src/Dialog/Dialog.tsx
-import { jsx as jsx46, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs16 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
-  const ctx = useContext8(OverlayTriggerStateContext);
-  return /* @__PURE__ */ jsx46(
+  const ctx = useContext9(OverlayTriggerStateContext2);
+  return /* @__PURE__ */ jsx45(
     "button",
     {
-      className: cn27(
+      className: cn26(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
       onClick: ctx == null ? void 0 : ctx.close,
       slot: "dismiss-button",
-      children: /* @__PURE__ */ jsx46("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx46(
+      children: /* @__PURE__ */ jsx45("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx45(
         "path",
         {
           fillRule: "evenodd",
@@ -2286,36 +2386,46 @@ var CloseButton = ({ className }) => {
     }
   );
 };
-var _Dialog = ({
-  variant,
-  size: size2,
-  closeButton,
-  isNonModal,
-  ...props
-}) => {
-  var _a;
-  const classNames3 = useClassNames25({ component: "Dialog", variant, size: size2 });
-  const state = useContext8(OverlayTriggerStateContext);
-  const children = typeof props.children === "function" ? props.children({
-    close: (_a = state == null ? void 0 : state.close) != null ? _a : () => {
-    }
-  }) : props.children;
-  return /* @__PURE__ */ jsxs16(
-    Dialog,
-    {
-      ...props,
-      className: cn27(
-        "relative outline-hidden [&>*:not(:last-child)]:mb-4",
-        "grid [grid-template-areas:'title'_'content'_'actions']",
-        classNames3.container
-      ),
-      children: [
-        closeButton && /* @__PURE__ */ jsx46(CloseButton, { className: classNames3.closeButton }),
-        children
-      ]
-    }
-  );
-};
+var _Dialog = forwardRef17(
+  (props, ref) => {
+    var _a;
+    const classNames3 = useClassNames23({
+      component: "Dialog",
+      variant: props.variant,
+      size: props.size
+    });
+    const { isDismissable, isKeyboardDismissDisabled, isOpen } = useContext9(DialogContext);
+    const state = useContext9(OverlayTriggerStateContext2);
+    const children = typeof props.children === "function" ? props.children({
+      close: (_a = state == null ? void 0 : state.close) != null ? _a : () => {
+      }
+    }) : props.children;
+    return /* @__PURE__ */ jsx45(
+      _Modal,
+      {
+        dismissable: isDismissable,
+        keyboardDismissable: isKeyboardDismissDisabled,
+        open: isOpen,
+        children: /* @__PURE__ */ jsxs16(
+          Dialog,
+          {
+            ...props,
+            ref,
+            className: cn26(
+              "relative outline-hidden [&>*:not(:last-child)]:mb-4",
+              "grid [grid-template-areas:'title'_'content'_'actions']",
+              classNames3.container
+            ),
+            children: [
+              props.closeButton && /* @__PURE__ */ jsx45(CloseButton, { className: classNames3.closeButton }),
+              children
+            ]
+          }
+        )
+      }
+    );
+  }
+);
 _Dialog.Trigger = _DialogTrigger;
 _Dialog.Title = DialogTitle;
 _Dialog.Content = DialogContent;
@@ -2323,33 +2433,33 @@ _Dialog.Actions = DialogActions;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { cn as cn28, useClassNames as useClassNames26 } from "@marigold/system";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { cn as cn27, useClassNames as useClassNames24 } from "@marigold/system";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
-  const classNames3 = useClassNames26({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx47(Separator, { className: cn28("border-none", classNames3), ...props });
+  const classNames3 = useClassNames24({ component: "Divider", variant });
+  return /* @__PURE__ */ jsx46(Separator, { className: cn27("border-none", classNames3), ...props });
 };
 
 // src/Footer/Footer.tsx
-import { useClassNames as useClassNames27 } from "@marigold/system";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { useClassNames as useClassNames25 } from "@marigold/system";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size: size2, ...props }) => {
-  const classNames3 = useClassNames27({ component: "Footer", variant, size: size2 });
-  return /* @__PURE__ */ jsx48("footer", { ...props, className: classNames3, children });
+  const classNames3 = useClassNames25({ component: "Footer", variant, size: size2 });
+  return /* @__PURE__ */ jsx47("footer", { ...props, className: classNames3, children });
 };
 
 // src/Form/Form.tsx
 import { Form } from "react-aria-components";
 
 // src/Grid/Grid.tsx
-import { cn as cn29, gapSpace as gapSpace6, height as twHeight } from "@marigold/system";
+import { cn as cn28, gapSpace as gapSpace6, height as twHeight } from "@marigold/system";
 
 // src/Grid/GridArea.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
-var GridArea = ({ name, children }) => /* @__PURE__ */ jsx49("div", { style: { gridArea: name }, children });
+import { jsx as jsx48 } from "react/jsx-runtime";
+var GridArea = ({ name, children }) => /* @__PURE__ */ jsx48("div", { style: { gridArea: name }, children });
 
 // src/Grid/Grid.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var parseGridAreas = (areas) => areas.map((area) => `"${area}"`).join("\n");
 var parseTemplateValue = (values) => values.map((val) => typeof val === "number" ? `${val}fr` : val).join(" ");
 var Grid = ({
@@ -2361,10 +2471,10 @@ var Grid = ({
   space = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx49(
     "div",
     {
-      className: cn29("grid", gapSpace6[space], twHeight[height]),
+      className: cn28("grid", gapSpace6[space], twHeight[height]),
       style: {
         gridTemplateAreas: parseGridAreas(areas),
         gridTemplateColumns: parseTemplateValue(columns),
@@ -2377,6 +2487,59 @@ var Grid = ({
 };
 Grid.Area = GridArea;
 
+// src/Header/Header.tsx
+import { Header as Header3 } from "react-aria-components";
+import { useClassNames as useClassNames26 } from "@marigold/system";
+import { jsx as jsx50 } from "react/jsx-runtime";
+var _Header = ({ variant, size: size2, ...props }) => {
+  const classNames3 = useClassNames26({
+    component: "Header",
+    variant,
+    size: size2
+  });
+  return /* @__PURE__ */ jsx50(Header3, { className: classNames3, ...props, children: props.children });
+};
+
+// src/Headline/Headline.tsx
+import { Heading as Heading3 } from "react-aria-components";
+import {
+  cn as cn29,
+  ensureCssVar,
+  textAlign,
+  useClassNames as useClassNames27
+} from "@marigold/system";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var _Headline = ({
+  variant,
+  size: size2,
+  children,
+  align = "left",
+  color,
+  level = "1",
+  ...props
+}) => {
+  const classNames3 = useClassNames27({
+    component: "Headline",
+    variant,
+    size: size2 != null ? size2 : `level-${level}`
+  });
+  return /* @__PURE__ */ jsx51(
+    Heading3,
+    {
+      level: Number(level),
+      ...props,
+      className: cn29(
+        classNames3,
+        "max-w-(--maxHeadlineWidth)",
+        // possibly set by a <Container>
+        textAlign[align]
+      ),
+      style: { color: color && ensureCssVar(color, "color") },
+      children
+    }
+  );
+};
+
 // src/Image/Image.tsx
 import {
   cn as cn30,
@@ -2384,7 +2547,7 @@ import {
   objectPosition,
   useClassNames as useClassNames28
 } from "@marigold/system";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var Image = ({
   variant,
   size: size2,
@@ -2393,7 +2556,7 @@ var Image = ({
   ...props
 }) => {
   const classNames3 = useClassNames28({ component: "Image", variant, size: size2 });
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "img",
     {
       ...props,
@@ -2410,7 +2573,7 @@ var Image = ({
 
 // src/Inline/Inline.tsx
 import { alignment, cn as cn31, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
   alignX,
@@ -2419,7 +2582,7 @@ var Inline = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     "div",
     {
       ...props,
@@ -2435,7 +2598,7 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 import { DateField } from "react-aria-components";
 
 // src/DateField/DateInput.tsx
@@ -2445,9 +2608,9 @@ import { useClassNames as useClassNames29 } from "@marigold/system";
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
 import { cn as cn32 } from "@marigold/system";
-import { Fragment as Fragment4, jsx as jsx53, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx54, jsxs as jsxs17 } from "react/jsx-runtime";
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     DateSegment,
     {
       ...props,
@@ -2456,7 +2619,7 @@ var _DateSegment = ({ segment, ...props }) => {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
       children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           "span",
           {
             "aria-hidden": "true",
@@ -2467,25 +2630,25 @@ var _DateSegment = ({ segment, ...props }) => {
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ jsx53("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
+        /* @__PURE__ */ jsx54("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-import { jsx as jsx54, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs18 } from "react/jsx-runtime";
 var _DateInput = ({ variant, size: size2, action, ...props }) => {
   const classNames3 = useClassNames29({ component: "DateField", variant, size: size2 });
   return /* @__PURE__ */ jsxs18(Group, { className: classNames3.field, children: [
-    /* @__PURE__ */ jsx54(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx54(_DateSegment, { className: classNames3.segment, segment }) }),
+    /* @__PURE__ */ jsx55(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx55(_DateSegment, { className: classNames3.segment, segment }) }),
     action ? action : null
   ] });
 };
 
 // src/DateField/DateField.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
-var _DateField = forwardRef16(
+import { jsx as jsx56 } from "react/jsx-runtime";
+var _DateField = forwardRef18(
   ({
     variant,
     size: size2,
@@ -2503,7 +2666,7 @@ var _DateField = forwardRef16(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       FieldBase,
       {
         as: DateField,
@@ -2511,7 +2674,7 @@ var _DateField = forwardRef16(
         size: size2,
         ref,
         ...props,
-        children: /* @__PURE__ */ jsx55(_DateInput, { action })
+        children: /* @__PURE__ */ jsx56(_DateInput, { action })
       }
     );
   }
@@ -2532,21 +2695,21 @@ import { cn as cn33, useClassNames as useClassNames31 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
-import { useContext as useContext9, useMemo } from "react";
+import { useContext as useContext10, useMemo as useMemo2 } from "react";
 import { CalendarStateContext } from "react-aria-components";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useDateFormatter, useLocale } from "@react-aria/i18n";
 import { useClassNames as useClassNames30 } from "@marigold/system";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
-  const state = useContext9(CalendarStateContext);
+  const state = useContext10(CalendarStateContext);
   const { headerProps } = useCalendarGrid(props, state);
   const { locale } = useLocale();
   const dayFormatter = useDateFormatter({
     weekday: "short",
     timeZone: state.timeZone
   });
-  const weekDays = useMemo(() => {
+  const weekDays = useMemo2(() => {
     const weekStart = startOfWeek(today(state.timeZone), locale);
     return [...new Array(7).keys()].map((index2) => {
       const date = weekStart.add({ days: index2 });
@@ -2555,16 +2718,16 @@ function CalendarGridHeader(props) {
     });
   }, [locale, state.timeZone, dayFormatter]);
   const classNames3 = useClassNames30({ component: "Calendar" });
-  return /* @__PURE__ */ jsx56("thead", { ...headerProps, children: /* @__PURE__ */ jsx56("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ jsx56("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
+  return /* @__PURE__ */ jsx57("thead", { ...headerProps, children: /* @__PURE__ */ jsx57("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ jsx57("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-import { jsx as jsx57, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs19 } from "react/jsx-runtime";
 var _CalendarGrid = () => {
   const classNames3 = useClassNames31({ component: "Calendar" });
   return /* @__PURE__ */ jsxs19(CalendarGrid, { className: classNames3.calendarGrid, children: [
-    /* @__PURE__ */ jsx57(CalendarGridHeader, {}),
-    /* @__PURE__ */ jsx57(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx57(
+    /* @__PURE__ */ jsx58(CalendarGridHeader, {}),
+    /* @__PURE__ */ jsx58(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx58(
       CalendarCell,
       {
         date,
@@ -2578,7 +2741,7 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-import { useContext as useContext10 } from "react";
+import { useContext as useContext11 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
 import { cn as cn34, useClassNames as useClassNames32 } from "@marigold/system";
 
@@ -2599,13 +2762,13 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-import { jsx as jsx58, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs20 } from "react/jsx-runtime";
 function CalendarListBox({
   type,
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = useContext10(CalendarStateContext2);
+  const state = useContext11(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
   const { select: selectClassNames } = useClassNames32({ component: "Select" });
@@ -2618,7 +2781,7 @@ function CalendarListBox({
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ jsx58(ChevronDown, {})
+        /* @__PURE__ */ jsx59(ChevronDown, {})
       ]
     }
   );
@@ -2626,7 +2789,7 @@ function CalendarListBox({
 
 // src/Calendar/MonthControls.tsx
 import { cn as cn35, useClassNames as useClassNames33 } from "@marigold/system";
-import { jsx as jsx59, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs21 } from "react/jsx-runtime";
 function MonthControls() {
   const classNames3 = useClassNames33({ component: "Calendar" });
   return /* @__PURE__ */ jsxs21(
@@ -2637,22 +2800,22 @@ function MonthControls() {
         classNames3.calendarControllers
       ),
       children: [
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx60(
           IconButton,
           {
             className: cn35("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "previous",
-            children: /* @__PURE__ */ jsx59(ChevronLeft, {})
+            children: /* @__PURE__ */ jsx60(ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ jsx59(
+        /* @__PURE__ */ jsx60(
           IconButton,
           {
             className: cn35("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "next",
-            children: /* @__PURE__ */ jsx59(ChevronRight, {})
+            children: /* @__PURE__ */ jsx60(ChevronRight, {})
           }
         )
       ]
@@ -2662,24 +2825,24 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-import { useContext as useContext11 } from "react";
+import { useContext as useContext12 } from "react";
 import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = useContext11(CalendarStateContext3);
+  const state = useContext12(CalendarStateContext3);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange2 = (index2) => {
     let value = Number(index2) + 1;
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "ul",
     {
       "data-testid": "monthOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
       children: months.map((month, index2) => {
-        return /* @__PURE__ */ jsx60("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx60(
+        return /* @__PURE__ */ jsx61("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx61(
           _Button,
           {
             slot: "previous",
@@ -2701,15 +2864,15 @@ var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
 import {
-  useContext as useContext12,
+  useContext as useContext13,
   useEffect,
   useRef
 } from "react";
 import { CalendarStateContext as CalendarStateContext4 } from "react-aria-components";
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = useContext12(CalendarStateContext4);
+  const state = useContext13(CalendarStateContext4);
   const years = [];
   let formatter = useDateFormatter3({
     year: "numeric",
@@ -2737,19 +2900,19 @@ var YearListBox = ({ setSelectedDropdown }) => {
     let date = years[index2].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     "ul",
     {
       "data-testid": "yearOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
       children: years.map((year, index2) => {
         const isActive = +year.formatted === state.focusedDate.year;
-        return /* @__PURE__ */ jsx61("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx61(
+        return /* @__PURE__ */ jsx62("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx62(
           "div",
           {
             ref: isActive ? activeButtonRef : null,
             style: { height: "100%", width: "100%" },
-            children: /* @__PURE__ */ jsx61(
+            children: /* @__PURE__ */ jsx62(
               _Button,
               {
                 slot: "previous",
@@ -2774,7 +2937,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment5, jsx as jsx62, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx63, jsxs as jsxs22 } from "react/jsx-runtime";
 var _Calendar = ({
   disabled,
   readOnly,
@@ -2792,10 +2955,10 @@ var _Calendar = ({
   const classNames3 = useClassNames34({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
-    month: /* @__PURE__ */ jsx62(MonthListBox_default, { setSelectedDropdown }),
-    year: /* @__PURE__ */ jsx62(YearListBox_default, { setSelectedDropdown })
+    month: /* @__PURE__ */ jsx63(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ jsx63(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     Calendar,
     {
       className: cn36(
@@ -2806,7 +2969,7 @@ var _Calendar = ({
       children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs22(Fragment5, { children: [
         /* @__PURE__ */ jsxs22("div", { className: "mb-4 flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs22("div", { className: "flex w-fit gap-4", children: [
-            /* @__PURE__ */ jsx62(
+            /* @__PURE__ */ jsx63(
               CalendarListBox,
               {
                 type: "month",
@@ -2814,7 +2977,7 @@ var _Calendar = ({
                 setSelectedDropdown
               }
             ),
-            /* @__PURE__ */ jsx62(
+            /* @__PURE__ */ jsx63(
               CalendarListBox,
               {
                 type: "year",
@@ -2823,9 +2986,9 @@ var _Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx62(MonthControls_default, {})
+          /* @__PURE__ */ jsx63(MonthControls_default, {})
         ] }),
-        /* @__PURE__ */ jsx62(_CalendarGrid, {})
+        /* @__PURE__ */ jsx63(_CalendarGrid, {})
       ] })
     }
   );
@@ -2835,7 +2998,7 @@ var _Calendar = ({
 import React6 from "react";
 import { DatePicker, Dialog as Dialog2 } from "react-aria-components";
 import { useClassNames as useClassNames35 } from "@marigold/system";
-import { jsx as jsx63, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs23 } from "react/jsx-runtime";
 var _DatePicker = React6.forwardRef(
   ({
     dateUnavailable,
@@ -2873,10 +3036,10 @@ var _DatePicker = React6.forwardRef(
         ...props,
         ref,
         children: [
-          /* @__PURE__ */ jsx63(
+          /* @__PURE__ */ jsx64(
             _DateInput,
             {
-              action: /* @__PURE__ */ jsx63(IconButton, { className: classNames3, children: /* @__PURE__ */ jsx63(
+              action: /* @__PURE__ */ jsx64(IconButton, { className: classNames3, children: /* @__PURE__ */ jsx64(
                 "svg",
                 {
                   "data-testid": "action",
@@ -2884,12 +3047,12 @@ var _DatePicker = React6.forwardRef(
                   width: 24,
                   height: 24,
                   fill: "currentColor",
-                  children: /* @__PURE__ */ jsx63("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                  children: /* @__PURE__ */ jsx64("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
                 }
               ) })
             }
           ),
-          /* @__PURE__ */ jsx63(_Popover, { children: /* @__PURE__ */ jsx63(Dialog2, { children: /* @__PURE__ */ jsx63(_Calendar, { disabled }) }) })
+          /* @__PURE__ */ jsx64(_Popover, { children: /* @__PURE__ */ jsx64(Dialog2, { children: /* @__PURE__ */ jsx64(_Calendar, { disabled }) }) })
         ]
       }
     );
@@ -2903,8 +3066,8 @@ import {
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
-import { jsx as jsx64 } from "react/jsx-runtime";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx64(
+import { jsx as jsx65 } from "react/jsx-runtime";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx65(
   "div",
   {
     className: cn37(
@@ -2917,18 +3080,18 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx64(
 );
 
 // src/Link/Link.tsx
-import { forwardRef as forwardRef17 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { Link } from "react-aria-components";
 import { useClassNames as useClassNames36 } from "@marigold/system";
-import { jsx as jsx65 } from "react/jsx-runtime";
-var _Link = forwardRef17(
+import { jsx as jsx66 } from "react/jsx-runtime";
+var _Link = forwardRef19(
   ({ variant, size: size2, disabled, children, ...props }, ref) => {
     const classNames3 = useClassNames36({
       component: "Link",
       variant,
       size: size2
     });
-    return /* @__PURE__ */ jsx65(Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
+    return /* @__PURE__ */ jsx66(Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
   }
 );
 
@@ -2936,19 +3099,19 @@ var _Link = forwardRef17(
 import { useClassNames as useClassNames37 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext6, useContext as useContext13 } from "react";
-var ListContext = createContext6({});
-var useListContext = () => useContext13(ListContext);
+import { createContext as createContext7, useContext as useContext14 } from "react";
+var ListContext = createContext7({});
+var useListContext = () => useContext14(ListContext);
 
 // src/List/ListItem.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames3 } = useListContext();
-  return /* @__PURE__ */ jsx66("li", { ...props, className: classNames3, children });
+  return /* @__PURE__ */ jsx67("li", { ...props, className: classNames3, children });
 };
 
 // src/List/List.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -2958,7 +3121,7 @@ var List = ({
 }) => {
   const Component2 = as;
   const classNames3 = useClassNames37({ component: "List", variant, size: size2 });
-  return /* @__PURE__ */ jsx67(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ jsx67(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
+  return /* @__PURE__ */ jsx68(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ jsx68(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
 };
 List.Item = ListItem;
 
@@ -2969,26 +3132,26 @@ import { useClassNames as useClassNames40 } from "@marigold/system";
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
 import { useClassNames as useClassNames38 } from "@marigold/system";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
   const classNames3 = useClassNames38({ component: "Menu" });
-  return /* @__PURE__ */ jsx68(MenuItem, { ...props, className: classNames3.item, children });
+  return /* @__PURE__ */ jsx69(MenuItem, { ...props, className: classNames3.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 import { MenuSection } from "react-aria-components";
 import { useClassNames as useClassNames39 } from "@marigold/system";
-import { jsx as jsx69, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs24 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
   const className = useClassNames39({ component: "Menu" });
   return /* @__PURE__ */ jsxs24(MenuSection, { ...props, children: [
-    /* @__PURE__ */ jsx69(_Header, { className: className.section, children: title }),
+    /* @__PURE__ */ jsx70(_Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-import { jsx as jsx70, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs25 } from "react/jsx-runtime";
 var _Menu = ({
   children,
   label,
@@ -3002,8 +3165,8 @@ var _Menu = ({
 }) => {
   const classNames3 = useClassNames40({ component: "Menu", variant, size: size2 });
   return /* @__PURE__ */ jsxs25(MenuTrigger, { ...props, children: [
-    /* @__PURE__ */ jsx70(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
-    /* @__PURE__ */ jsx70(_Popover, { open, placement, children: /* @__PURE__ */ jsx70(Menu, { ...props, className: classNames3.container, children }) })
+    /* @__PURE__ */ jsx71(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
+    /* @__PURE__ */ jsx71(_Popover, { open, placement, children: /* @__PURE__ */ jsx71(Menu, { ...props, className: classNames3.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
@@ -3012,7 +3175,7 @@ _Menu.Section = _MenuSection;
 // src/Menu/ActionMenu.tsx
 import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
 import { SVG as SVG8, useClassNames as useClassNames41 } from "@marigold/system";
-import { jsx as jsx71, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs26 } from "react/jsx-runtime";
 var ActionMenu = ({
   variant,
   size: size2,
@@ -3021,8 +3184,8 @@ var ActionMenu = ({
 }) => {
   const classNames3 = useClassNames41({ component: "Menu", variant, size: size2 });
   return /* @__PURE__ */ jsxs26(MenuTrigger2, { children: [
-    /* @__PURE__ */ jsx71(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx71(SVG8, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx71("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__ */ jsx71(_Popover, { children: /* @__PURE__ */ jsx71(Menu2, { ...props, className: classNames3.container, children: props.children }) })
+    /* @__PURE__ */ jsx72(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx72(SVG8, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx72("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__ */ jsx72(_Popover, { children: /* @__PURE__ */ jsx72(Menu2, { ...props, className: classNames3.container, children: props.children }) })
   ] });
 };
 
@@ -3032,38 +3195,38 @@ import { useButton } from "@react-aria/button";
 import { cn as cn40, useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/SectionMessage/Context.tsx
-import { createContext as createContext7, useContext as useContext14 } from "react";
-var SectionMessageContext = createContext7({});
-var useSectionMessageContext = () => useContext14(SectionMessageContext);
+import { createContext as createContext8, useContext as useContext15 } from "react";
+var SectionMessageContext = createContext8({});
+var useSectionMessageContext = () => useContext15(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
 import { cn as cn38 } from "@marigold/system";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx72("div", { className: cn38("[grid-area:content]", classNames3.content), children });
+  return /* @__PURE__ */ jsx73("div", { className: cn38("[grid-area:content]", classNames3.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
 import { cn as cn39 } from "@marigold/system";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx73("div", { className: cn39("[grid-area:title]", classNames3.title), children });
+  return /* @__PURE__ */ jsx74("div", { className: cn39("[grid-area:title]", classNames3.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-import { jsx as jsx74, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs27 } from "react/jsx-runtime";
 var icons = {
-  success: () => /* @__PURE__ */ jsx74(
+  success: () => /* @__PURE__ */ jsx75(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx74(
+      children: /* @__PURE__ */ jsx75(
         "path",
         {
           fillRule: "evenodd",
@@ -3073,13 +3236,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ jsx74(
+  info: () => /* @__PURE__ */ jsx75(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx74(
+      children: /* @__PURE__ */ jsx75(
         "path",
         {
           fillRule: "evenodd",
@@ -3089,13 +3252,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx74(
+  warning: () => /* @__PURE__ */ jsx75(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx74(
+      children: /* @__PURE__ */ jsx75(
         "path",
         {
           fillRule: "evenodd",
@@ -3105,13 +3268,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx74(
+  error: () => /* @__PURE__ */ jsx75(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx74(
+      children: /* @__PURE__ */ jsx75(
         "path",
         {
           fillRule: "evenodd",
@@ -3148,15 +3311,15 @@ var SectionMessage = ({
     }
   };
   if (!isCurrentlyVisible) return null;
-  return /* @__PURE__ */ jsx74(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsx75(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsxs27(
     "div",
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
       className: cn40("grid auto-rows-min", classNames3.container),
       children: [
-        /* @__PURE__ */ jsx74("div", { className: cn40("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ jsx74(Icon4, {}) }),
-        closeButton && /* @__PURE__ */ jsx74(
+        /* @__PURE__ */ jsx75("div", { className: cn40("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ jsx75(Icon4, {}) }),
+        closeButton && /* @__PURE__ */ jsx75(
           "button",
           {
             ...buttonProps,
@@ -3164,7 +3327,7 @@ var SectionMessage = ({
             "aria-label": "close",
             className: cn40("[grid-area:close]", classNames3.close),
             onClick: handleClose,
-            children: /* @__PURE__ */ jsx74("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx74(
+            children: /* @__PURE__ */ jsx75("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx75(
               "path",
               {
                 fillRule: "evenodd",
@@ -3188,7 +3351,7 @@ import {
   ButtonContext,
   FieldErrorContext as FieldErrorContext2,
   InputContext,
-  Provider,
+  Provider as Provider2,
   Input as _Input2
 } from "react-aria-components";
 
@@ -3389,7 +3552,7 @@ function _extends() {
 
 // ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/react-select.esm.js
 import * as React11 from "react";
-import { forwardRef as forwardRef20, useMemo as useMemo4 } from "react";
+import { forwardRef as forwardRef22, useMemo as useMemo5 } from "react";
 
 // ../../node_modules/.pnpm/@babel+runtime@7.27.0/node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(a, n) {
@@ -3497,11 +3660,11 @@ function _toConsumableArray(r) {
 
 // ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/Select-aab027f3.esm.js
 import * as React10 from "react";
-import { useMemo as useMemo3, Fragment as Fragment8, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect3, Component } from "react";
+import { useMemo as useMemo4, Fragment as Fragment8, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect3, Component } from "react";
 
 // ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.0_react@19.1.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 import * as React8 from "react";
-import { useContext as useContext16, forwardRef as forwardRef19 } from "react";
+import { useContext as useContext17, forwardRef as forwardRef21 } from "react";
 
 // ../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
 var isDevelopment = false;
@@ -4689,15 +4852,15 @@ var EmotionCacheContext = /* @__PURE__ */ React8.createContext(
 );
 var CacheProvider = EmotionCacheContext.Provider;
 var withEmotionCache = function withEmotionCache2(func) {
-  return /* @__PURE__ */ forwardRef19(function(props, ref) {
-    var cache = useContext16(EmotionCacheContext);
+  return /* @__PURE__ */ forwardRef21(function(props, ref) {
+    var cache = useContext17(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
 if (!isBrowser4) {
   withEmotionCache = function withEmotionCache3(func) {
     return function(props) {
-      var cache = useContext16(EmotionCacheContext);
+      var cache = useContext17(EmotionCacheContext);
       if (cache === null) {
         cache = createCache({
           key: "css"
@@ -4781,7 +4944,7 @@ var Emotion$1 = Emotion;
 import * as React9 from "react";
 var import_extends2 = __toESM(require_extends());
 var import_hoist_non_react_statics = __toESM(require_hoist_non_react_statics_cjs());
-var jsx75 = function jsx76(type, props) {
+var jsx76 = function jsx77(type, props) {
   var args = arguments;
   if (props == null || !hasOwn.call(props, "css")) {
     return React9.createElement.apply(void 0, args);
@@ -4799,7 +4962,7 @@ var jsx75 = function jsx76(type, props) {
   var JSX;
   /* @__PURE__ */ (function(_JSX) {
   })(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));
-})(jsx75 || (jsx75 = {}));
+})(jsx76 || (jsx76 = {}));
 function css() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -4829,7 +4992,7 @@ function _taggedTemplateLiteral(e, t) {
 }
 
 // ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/index-641ee5b8.esm.js
-import { useContext as useContext18, useRef as useRef4, useState as useState4, useMemo as useMemo2, useCallback as useCallback2, createContext as createContext9 } from "react";
+import { useContext as useContext19, useRef as useRef4, useState as useState4, useMemo as useMemo3, useCallback as useCallback2, createContext as createContext10 } from "react";
 import { createPortal } from "react-dom";
 
 // ../../node_modules/.pnpm/@floating-ui+utils@0.2.9/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
@@ -5566,10 +5729,10 @@ var menuCSS = function menuCSS2(_ref23, unstyled) {
     marginTop: spacing2.menuGutter
   });
 };
-var PortalPlacementContext = /* @__PURE__ */ createContext9(null);
+var PortalPlacementContext = /* @__PURE__ */ createContext10(null);
 var MenuPlacer = function MenuPlacer2(props) {
   var children = props.children, minMenuHeight = props.minMenuHeight, maxMenuHeight = props.maxMenuHeight, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition, menuShouldScrollIntoView = props.menuShouldScrollIntoView, theme = props.theme;
-  var _ref3 = useContext18(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
+  var _ref3 = useContext19(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
   var ref = useRef4(null);
   var _useState = useState4(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
   var _useState3 = useState4(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
@@ -5602,7 +5765,7 @@ var MenuPlacer = function MenuPlacer2(props) {
 };
 var Menu3 = function Menu4(props) {
   var children = props.children, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx75("div", _extends({}, getStyleProps(props, "menu", {
+  return jsx76("div", _extends({}, getStyleProps(props, "menu", {
     menu: true
   }), {
     ref: innerRef
@@ -5624,7 +5787,7 @@ var menuListCSS = function menuListCSS2(_ref4, unstyled) {
 };
 var MenuList = function MenuList2(props) {
   var children = props.children, innerProps = props.innerProps, innerRef = props.innerRef, isMulti = props.isMulti;
-  return jsx75("div", _extends({}, getStyleProps(props, "menuList", {
+  return jsx76("div", _extends({}, getStyleProps(props, "menuList", {
     "menu-list": true,
     "menu-list--is-multi": isMulti
   }), {
@@ -5644,7 +5807,7 @@ var noOptionsMessageCSS = noticeCSS;
 var loadingMessageCSS = noticeCSS;
 var NoOptionsMessage = function NoOptionsMessage2(_ref6) {
   var _ref6$children = _ref6.children, children = _ref6$children === void 0 ? "No options" : _ref6$children, innerProps = _ref6.innerProps, restProps = _objectWithoutProperties(_ref6, _excluded$3);
-  return jsx75("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx76("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "noOptionsMessage", {
@@ -5654,7 +5817,7 @@ var NoOptionsMessage = function NoOptionsMessage2(_ref6) {
 };
 var LoadingMessage = function LoadingMessage2(_ref7) {
   var _ref7$children = _ref7.children, children = _ref7$children === void 0 ? "Loading..." : _ref7$children, innerProps = _ref7.innerProps, restProps = _objectWithoutProperties(_ref7, _excluded2$1);
-  return jsx75("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx76("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "loadingMessage", {
@@ -5677,7 +5840,7 @@ var MenuPortal = function MenuPortal2(props) {
   var menuPortalRef = useRef4(null);
   var cleanupRef = useRef4(null);
   var _useState5 = useState4(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
-  var portalPlacementContext = useMemo2(function() {
+  var portalPlacementContext = useMemo3(function() {
     return {
       setPortalPlacement
     };
@@ -5717,7 +5880,7 @@ var MenuPortal = function MenuPortal2(props) {
     runAutoUpdate();
   }, [runAutoUpdate]);
   if (!appendTo && menuPosition !== "fixed" || !computedPosition) return null;
-  var menuWrapper = jsx75("div", _extends({
+  var menuWrapper = jsx76("div", _extends({
     ref: setMenuPortalElement
   }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
     offset: computedPosition.offset,
@@ -5726,7 +5889,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), "menuPortal", {
     "menu-portal": true
   }), innerProps), children);
-  return jsx75(PortalPlacementContext.Provider, {
+  return jsx76(PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /* @__PURE__ */ createPortal(menuWrapper, appendTo) : menuWrapper);
 };
@@ -5742,7 +5905,7 @@ var containerCSS = function containerCSS2(_ref3) {
 };
 var SelectContainer = function SelectContainer2(props) {
   var children = props.children, innerProps = props.innerProps, isDisabled = props.isDisabled, isRtl = props.isRtl;
-  return jsx75("div", _extends({}, getStyleProps(props, "container", {
+  return jsx76("div", _extends({}, getStyleProps(props, "container", {
     "--is-disabled": isDisabled,
     "--is-rtl": isRtl
   }), innerProps), children);
@@ -5763,7 +5926,7 @@ var valueContainerCSS = function valueContainerCSS2(_ref23, unstyled) {
 };
 var ValueContainer = function ValueContainer2(props) {
   var children = props.children, innerProps = props.innerProps, isMulti = props.isMulti, hasValue = props.hasValue;
-  return jsx75("div", _extends({}, getStyleProps(props, "valueContainer", {
+  return jsx76("div", _extends({}, getStyleProps(props, "valueContainer", {
     "value-container": true,
     "value-container--is-multi": isMulti,
     "value-container--has-value": hasValue
@@ -5779,7 +5942,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS2() {
 };
 var IndicatorsContainer = function IndicatorsContainer2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx75("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
+  return jsx76("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
     indicators: true
   }), innerProps), children);
 };
@@ -5800,7 +5963,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var Svg = function Svg2(_ref3) {
   var size2 = _ref3.size, props = _objectWithoutProperties(_ref3, _excluded$2);
-  return jsx75("svg", _extends({
+  return jsx76("svg", _extends({
     height: size2,
     width: size2,
     viewBox: "0 0 20 20",
@@ -5810,16 +5973,16 @@ var Svg = function Svg2(_ref3) {
   }, props));
 };
 var CrossIcon = function CrossIcon2(props) {
-  return jsx75(Svg, _extends({
+  return jsx76(Svg, _extends({
     size: 20
-  }, props), jsx75("path", {
+  }, props), jsx76("path", {
     d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
   }));
 };
 var DownChevron = function DownChevron2(props) {
-  return jsx75(Svg, _extends({
+  return jsx76(Svg, _extends({
     size: 20
-  }, props), jsx75("path", {
+  }, props), jsx76("path", {
     d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
   }));
 };
@@ -5840,18 +6003,18 @@ var baseCSS = function baseCSS2(_ref3, unstyled) {
 var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx75("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
+  return jsx76("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
     indicator: true,
     "dropdown-indicator": true
-  }), innerProps), children || jsx75(DownChevron, null));
+  }), innerProps), children || jsx76(DownChevron, null));
 };
 var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx75("div", _extends({}, getStyleProps(props, "clearIndicator", {
+  return jsx76("div", _extends({}, getStyleProps(props, "clearIndicator", {
     indicator: true,
     "clear-indicator": true
-  }), innerProps), children || jsx75(CrossIcon, null));
+  }), innerProps), children || jsx76(CrossIcon, null));
 };
 var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
   var isDisabled = _ref4.isDisabled, _ref4$theme = _ref4.theme, baseUnit2 = _ref4$theme.spacing.baseUnit, colors2 = _ref4$theme.colors;
@@ -5867,7 +6030,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator2(props) {
   var innerProps = props.innerProps;
-  return jsx75("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
+  return jsx76("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
     "indicator-separator": true
   })));
 };
@@ -5891,7 +6054,7 @@ var loadingIndicatorCSS = function loadingIndicatorCSS2(_ref5, unstyled) {
 };
 var LoadingDot = function LoadingDot2(_ref6) {
   var delay = _ref6.delay, offset2 = _ref6.offset;
-  return jsx75("span", {
+  return jsx76("span", {
     css: /* @__PURE__ */ css({
       animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
       backgroundColor: "currentColor",
@@ -5906,20 +6069,20 @@ var LoadingDot = function LoadingDot2(_ref6) {
 };
 var LoadingIndicator = function LoadingIndicator2(_ref7) {
   var innerProps = _ref7.innerProps, isRtl = _ref7.isRtl, _ref7$size = _ref7.size, size2 = _ref7$size === void 0 ? 4 : _ref7$size, restProps = _objectWithoutProperties(_ref7, _excluded2);
-  return jsx75("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx76("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     innerProps,
     isRtl,
     size: size2
   }), "loadingIndicator", {
     indicator: true,
     "loading-indicator": true
-  }), innerProps), jsx75(LoadingDot, {
+  }), innerProps), jsx76(LoadingDot, {
     delay: 0,
     offset: isRtl
-  }), jsx75(LoadingDot, {
+  }), jsx76(LoadingDot, {
     delay: 160,
     offset: true
-  }), jsx75(LoadingDot, {
+  }), jsx76(LoadingDot, {
     delay: 320,
     offset: !isRtl
   }));
@@ -5951,7 +6114,7 @@ var css$1 = function css2(_ref3, unstyled) {
 };
 var Control = function Control2(props) {
   var children = props.children, isDisabled = props.isDisabled, isFocused = props.isFocused, innerRef = props.innerRef, innerProps = props.innerProps, menuIsOpen = props.menuIsOpen;
-  return jsx75("div", _extends({
+  return jsx76("div", _extends({
     ref: innerRef
   }, getStyleProps(props, "control", {
     control: true,
@@ -5972,16 +6135,16 @@ var groupCSS = function groupCSS2(_ref3, unstyled) {
   };
 };
 var Group2 = function Group3(props) {
-  var children = props.children, cx = props.cx, getStyles = props.getStyles, getClassNames2 = props.getClassNames, Heading3 = props.Heading, headingProps = props.headingProps, innerProps = props.innerProps, label = props.label, theme = props.theme, selectProps = props.selectProps;
-  return jsx75("div", _extends({}, getStyleProps(props, "group", {
+  var children = props.children, cx = props.cx, getStyles = props.getStyles, getClassNames2 = props.getClassNames, Heading4 = props.Heading, headingProps = props.headingProps, innerProps = props.innerProps, label = props.label, theme = props.theme, selectProps = props.selectProps;
+  return jsx76("div", _extends({}, getStyleProps(props, "group", {
     group: true
-  }), innerProps), jsx75(Heading3, _extends({}, headingProps, {
+  }), innerProps), jsx76(Heading4, _extends({}, headingProps, {
     selectProps,
     theme,
     getStyles,
     getClassNames: getClassNames2,
     cx
-  }), label), jsx75("div", null, children));
+  }), label), jsx76("div", null, children));
 };
 var groupHeadingCSS = function groupHeadingCSS2(_ref23, unstyled) {
   var _ref2$theme = _ref23.theme, colors2 = _ref2$theme.colors, spacing2 = _ref2$theme.spacing;
@@ -6003,7 +6166,7 @@ var GroupHeading = function GroupHeading2(props) {
   var _cleanCommonProps = cleanCommonProps(props);
   _cleanCommonProps.data;
   var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
-  return jsx75("div", _extends({}, getStyleProps(props, "groupHeading", {
+  return jsx76("div", _extends({}, getStyleProps(props, "groupHeading", {
     "group-heading": true
   }), innerProps));
 };
@@ -6055,11 +6218,11 @@ var inputStyle = function inputStyle2(isHidden) {
 var Input2 = function Input3(props) {
   var cx = props.cx, value = props.value;
   var _cleanCommonProps = cleanCommonProps(props), innerRef = _cleanCommonProps.innerRef, isDisabled = _cleanCommonProps.isDisabled, isHidden = _cleanCommonProps.isHidden, inputClassName = _cleanCommonProps.inputClassName, innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded3);
-  return jsx75("div", _extends({}, getStyleProps(props, "input", {
+  return jsx76("div", _extends({}, getStyleProps(props, "input", {
     "input-container": true
   }), {
     "data-value": value || ""
-  }), jsx75("input", _extends({
+  }), jsx76("input", _extends({
     className: cx({
       input: true
     }, inputClassName),
@@ -6113,35 +6276,35 @@ var multiValueRemoveCSS = function multiValueRemoveCSS2(_ref3, unstyled) {
 };
 var MultiValueGeneric = function MultiValueGeneric2(_ref4) {
   var children = _ref4.children, innerProps = _ref4.innerProps;
-  return jsx75("div", innerProps, children);
+  return jsx76("div", innerProps, children);
 };
 var MultiValueContainer = MultiValueGeneric;
 var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children, innerProps = _ref5.innerProps;
-  return jsx75("div", _extends({
+  return jsx76("div", _extends({
     role: "button"
-  }, innerProps), children || jsx75(CrossIcon, {
+  }, innerProps), children || jsx76(CrossIcon, {
     size: 14
   }));
 }
 var MultiValue = function MultiValue2(props) {
   var children = props.children, components2 = props.components, data = props.data, innerProps = props.innerProps, isDisabled = props.isDisabled, removeProps3 = props.removeProps, selectProps = props.selectProps;
   var Container2 = components2.Container, Label3 = components2.Label, Remove = components2.Remove;
-  return jsx75(Container2, {
+  return jsx76(Container2, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValue", {
       "multi-value": true,
       "multi-value--is-disabled": isDisabled
     })), innerProps),
     selectProps
-  }, jsx75(Label3, {
+  }, jsx76(Label3, {
     data,
     innerProps: _objectSpread2({}, getStyleProps(props, "multiValueLabel", {
       "multi-value__label": true
     })),
     selectProps
-  }, children), jsx75(Remove, {
+  }, children), jsx76(Remove, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValueRemove", {
       "multi-value__remove": true
@@ -6174,7 +6337,7 @@ var optionCSS = function optionCSS2(_ref3, unstyled) {
 };
 var Option = function Option2(props) {
   var children = props.children, isDisabled = props.isDisabled, isFocused = props.isFocused, isSelected = props.isSelected, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx75("div", _extends({}, getStyleProps(props, "option", {
+  return jsx76("div", _extends({}, getStyleProps(props, "option", {
     option: true,
     "option--is-disabled": isDisabled,
     "option--is-focused": isFocused,
@@ -6198,7 +6361,7 @@ var placeholderCSS = function placeholderCSS2(_ref3, unstyled) {
 };
 var Placeholder = function Placeholder2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx75("div", _extends({}, getStyleProps(props, "placeholder", {
+  return jsx76("div", _extends({}, getStyleProps(props, "placeholder", {
     placeholder: true
   }), innerProps), children);
 };
@@ -6220,7 +6383,7 @@ var css3 = function css4(_ref3, unstyled) {
 };
 var SingleValue = function SingleValue2(props) {
   var children = props.children, isDisabled = props.isDisabled, innerProps = props.innerProps;
-  return jsx75("div", _extends({}, getStyleProps(props, "singleValue", {
+  return jsx76("div", _extends({}, getStyleProps(props, "singleValue", {
     "single-value": true,
     "single-value--is-disabled": isDisabled
   }), innerProps), children);
@@ -6322,7 +6485,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 var A11yText = function A11yText2(props) {
-  return jsx75("span", _extends({
+  return jsx76("span", _extends({
     css: _ref
   }, props));
 };
@@ -6383,10 +6546,10 @@ var LiveRegion = function LiveRegion2(props) {
   var ariaLiveMessages = selectProps.ariaLiveMessages, getOptionLabel4 = selectProps.getOptionLabel, inputValue = selectProps.inputValue, isMulti = selectProps.isMulti, isOptionDisabled3 = selectProps.isOptionDisabled, isSearchable = selectProps.isSearchable, menuIsOpen = selectProps.menuIsOpen, options2 = selectProps.options, screenReaderStatus2 = selectProps.screenReaderStatus, tabSelectsValue = selectProps.tabSelectsValue, isLoading = selectProps.isLoading;
   var ariaLabel = selectProps["aria-label"];
   var ariaLive = selectProps["aria-live"];
-  var messages = useMemo3(function() {
+  var messages = useMemo4(function() {
     return _objectSpread2(_objectSpread2({}, defaultAriaLiveMessages), ariaLiveMessages || {});
   }, [ariaLiveMessages]);
-  var ariaSelected = useMemo3(function() {
+  var ariaSelected = useMemo4(function() {
     var message = "";
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option, selectedOptions = ariaSelection.options, removedValue = ariaSelection.removedValue, removedValues = ariaSelection.removedValues, value = ariaSelection.value;
@@ -6408,7 +6571,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return message;
   }, [ariaSelection, messages, isOptionDisabled3, selectValue, getOptionLabel4]);
-  var ariaFocused = useMemo3(function() {
+  var ariaFocused = useMemo4(function() {
     var focusMsg = "";
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
@@ -6427,7 +6590,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return focusMsg;
   }, [focusedOption, focusedValue, getOptionLabel4, isOptionDisabled3, messages, focusableOptions, selectValue, isAppleDevice2]);
-  var ariaResults = useMemo3(function() {
+  var ariaResults = useMemo4(function() {
     var resultsMsg = "";
     if (menuIsOpen && options2.length && !isLoading && messages.onFilter) {
       var resultsMessage = screenReaderStatus2({
@@ -6441,7 +6604,7 @@ var LiveRegion = function LiveRegion2(props) {
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options2, screenReaderStatus2, isLoading]);
   var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === "initial-input-focus";
-  var ariaGuidance = useMemo3(function() {
+  var ariaGuidance = useMemo4(function() {
     var guidanceMsg = "";
     if (messages.guidance) {
       var context = focusedValue ? "value" : menuIsOpen ? "menu" : "input";
@@ -6457,18 +6620,18 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx75(Fragment8, null, jsx75("span", {
+  var ScreenReaderText = jsx76(Fragment8, null, jsx76("span", {
     id: "aria-selection"
-  }, ariaSelected), jsx75("span", {
+  }, ariaSelected), jsx76("span", {
     id: "aria-focused"
-  }, ariaFocused), jsx75("span", {
+  }, ariaFocused), jsx76("span", {
     id: "aria-results"
-  }, ariaResults), jsx75("span", {
+  }, ariaResults), jsx76("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx75(Fragment8, null, jsx75(A11yText$1, {
+  return jsx76(Fragment8, null, jsx76(A11yText$1, {
     id
-  }, isInitialFocus && ScreenReaderText), jsx75(A11yText$1, {
+  }, isInitialFocus && ScreenReaderText), jsx76(A11yText$1, {
     "aria-live": ariaLive,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
@@ -6781,7 +6944,7 @@ var _excluded4 = ["innerRef"];
 function DummyInput(_ref3) {
   var innerRef = _ref3.innerRef, props = _objectWithoutProperties(_ref3, _excluded4);
   var filteredProps = removeProps(props, "onExited", "in", "enter", "exit", "appear");
-  return jsx75("input", _extends({
+  return jsx76("input", _extends({
     ref: innerRef
   }, filteredProps, {
     css: /* @__PURE__ */ css({
@@ -7023,7 +7186,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx75(Fragment8, null, lockEnabled && jsx75("div", {
+  return jsx76(Fragment8, null, lockEnabled && jsx76("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -7042,7 +7205,7 @@ var _ref22 = process.env.NODE_ENV === "production" ? {
 };
 var RequiredInput = function RequiredInput2(_ref3) {
   var name = _ref3.name, onFocus2 = _ref3.onFocus;
-  return jsx75("input", {
+  return jsx76("input", {
     required: true,
     name,
     tabIndex: -1,
@@ -8617,7 +8780,7 @@ var import_typeof5 = __toESM(require_typeof());
 var import_taggedTemplateLiteral2 = __toESM(require_taggedTemplateLiteral());
 var import_defineProperty3 = __toESM(require_defineProperty());
 import "react-dom";
-var StateManagedSelect = /* @__PURE__ */ forwardRef20(function(props, ref) {
+var StateManagedSelect = /* @__PURE__ */ forwardRef22(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React11.createElement(Select, _extends({
     ref
@@ -8690,7 +8853,7 @@ function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
 // src/Multiselect/Multiselect.tsx
 import { useId } from "@react-aria/utils";
 import { cn as cn41, useClassNames as useClassNames43 } from "@marigold/system";
-import { jsx as jsx77, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs28 } from "react/jsx-runtime";
 var propsToBeRemoved = [
   "clearValue",
   "getStyles",
@@ -8716,7 +8879,7 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
     },
     {}
   );
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     _Input2,
     {
       disabled: props.isDisabled,
@@ -8727,11 +8890,11 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
   );
 };
 var MultiValueRemove2 = ({ innerProps }) => {
-  return /* @__PURE__ */ jsx77(Button5, { slot: "remove", ...innerProps, children: /* @__PURE__ */ jsx77("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx77("path", { 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" }) }) });
+  return /* @__PURE__ */ jsx78(Button5, { slot: "remove", ...innerProps, children: /* @__PURE__ */ jsx78("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx78("path", { 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 getClassNames = (classNames3) => ({
   control: () => cn41(
-    "relative flex items-center box-border flex-wrap justify-between ",
+    "relative flex items-center box-border flex-wrap justify-between",
     classNames3.container
   ),
   container: () => "pointer-events-auto",
@@ -8779,8 +8942,8 @@ var Multiselect = ({
     label: props.label,
     errorMessage
   });
-  return /* @__PURE__ */ jsx77(
-    Provider,
+  return /* @__PURE__ */ jsx78(
+    Provider2,
     {
       values: [
         [
@@ -8817,8 +8980,8 @@ var Multiselect = ({
           "data-invalid": error,
           "data-readonly": readOnly,
           children: [
-            props.label && /* @__PURE__ */ jsx77(_Label, { ...labelProps, children: props.label }),
-            /* @__PURE__ */ jsx77(
+            props.label && /* @__PURE__ */ jsx78(_Label, { ...labelProps, children: props.label }),
+            /* @__PURE__ */ jsx78(
               StateManagedSelect$1,
               {
                 ...props,
@@ -8852,19 +9015,19 @@ var Multiselect = ({
                 components: {
                   Input: Input4,
                   MultiValueRemove: MultiValueRemove2,
-                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ jsx77(
+                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ jsx78(
                     "button",
                     {
                       ...innerProps,
                       disabled: isDisabled,
                       className: classNames3.icon,
-                      children: /* @__PURE__ */ jsx77(ChevronDown, { className: "size-4" })
+                      children: /* @__PURE__ */ jsx78(ChevronDown, { className: "size-4" })
                     }
                   )
                 }
               }
             ),
-            /* @__PURE__ */ jsx77(HelpText, { description, errorMessage })
+            /* @__PURE__ */ jsx78(HelpText, { description, errorMessage })
           ]
         }
       )
@@ -8873,15 +9036,15 @@ var Multiselect = ({
 };
 
 // src/NumberField/NumberField.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 import { Group as Group4, Input as Input5, NumberField } from "react-aria-components";
 import { cn as cn43, useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { Button as Button6 } from "react-aria-components";
 import { cn as cn42 } from "@marigold/system";
-import { jsx as jsx78 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx78("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx78(
+import { jsx as jsx79 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx79("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx79(
   "path",
   {
     fillRule: "evenodd",
@@ -8889,7 +9052,7 @@ var Plus = () => /* @__PURE__ */ jsx78("svg", { width: 16, height: 16, viewBox:
     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__ */ jsx78("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx78(
+var Minus = () => /* @__PURE__ */ jsx79("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx79(
   "path",
   {
     fillRule: "evenodd",
@@ -8899,7 +9062,7 @@ var Minus = () => /* @__PURE__ */ jsx78("svg", { width: 16, height: 16, viewBox:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     Button6,
     {
       className: cn42(
@@ -8910,14 +9073,14 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx78(Icon4, {})
+      children: /* @__PURE__ */ jsx79(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx79, jsxs as jsxs29 } from "react/jsx-runtime";
-var _NumberField = forwardRef21(
+import { jsx as jsx80, jsxs as jsxs29 } from "react/jsx-runtime";
+var _NumberField = forwardRef23(
   ({
     variant,
     size: size2,
@@ -8941,7 +9104,7 @@ var _NumberField = forwardRef21(
       ...rest
     };
     const showStepper = !hideStepper && !readOnly;
-    return /* @__PURE__ */ jsx79(
+    return /* @__PURE__ */ jsx80(
       FieldBase,
       {
         as: NumberField,
@@ -8949,7 +9112,7 @@ var _NumberField = forwardRef21(
         "data-readonly": readOnly ? "true" : void 0,
         "data-stepper": showStepper ? "true" : void 0,
         children: /* @__PURE__ */ jsxs29(Group4, { className: cn43("flex items-stretch", classNames3.group), children: [
-          showStepper && /* @__PURE__ */ jsx79(
+          showStepper && /* @__PURE__ */ jsx80(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -8957,14 +9120,14 @@ var _NumberField = forwardRef21(
               slot: "decrement"
             }
           ),
-          /* @__PURE__ */ jsx79(
+          /* @__PURE__ */ jsx80(
             Input5,
             {
               ref,
               className: cn43("h-full flex-1 outline-none", classNames3.input)
             }
           ),
-          showStepper && /* @__PURE__ */ jsx79(
+          showStepper && /* @__PURE__ */ jsx80(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -8978,172 +9141,6 @@ var _NumberField = forwardRef21(
   }
 );
 
-// src/Overlay/NonModal.tsx
-import { forwardRef as forwardRef22, useContext as useContext19 } from "react";
-import {
-  OverlayTriggerStateContext as OverlayTriggerStateContext2,
-  Provider as Provider2
-} from "react-aria-components";
-import {
-  useOverlayTriggerState
-} from "react-stately";
-import { FocusScope } from "@react-aria/focus";
-import { DismissButton, Overlay } from "@react-aria/overlays";
-import { useIsSSR as useIsSSR2 } from "@react-aria/ssr";
-import {
-  filterDOMProps,
-  mergeProps,
-  useEnterAnimation,
-  useExitAnimation,
-  useObjectRef,
-  useViewportSize
-} from "@react-aria/utils";
-
-// src/utils/useRenderProps.tsx
-import { useMemo as useMemo5 } from "react";
-function useRenderProps(props) {
-  let {
-    className,
-    style,
-    children,
-    defaultClassName = void 0,
-    defaultChildren = void 0,
-    defaultStyle,
-    values
-  } = props;
-  return useMemo5(() => {
-    let computedClassName;
-    let computedStyle;
-    let computedChildren;
-    if (typeof className === "function") {
-      computedClassName = className({ ...values, defaultClassName });
-    } else {
-      computedClassName = className;
-    }
-    if (typeof style === "function") {
-      computedStyle = style({ ...values, defaultStyle: defaultStyle || {} });
-    } else {
-      computedStyle = style;
-    }
-    if (typeof children === "function") {
-      computedChildren = children({ ...values, defaultChildren });
-    } else if (children == null) {
-      computedChildren = defaultChildren;
-    } else {
-      computedChildren = children;
-    }
-    return {
-      className: computedClassName != null ? computedClassName : defaultClassName,
-      style: computedStyle || defaultStyle ? { ...defaultStyle, ...computedStyle } : void 0,
-      children: computedChildren != null ? computedChildren : defaultChildren,
-      "data-rac": ""
-    };
-  }, [
-    className,
-    style,
-    children,
-    defaultClassName,
-    defaultChildren,
-    defaultStyle,
-    values
-  ]);
-}
-
-// src/Overlay/useNonModal.ts
-import { useOverlay } from "@react-aria/overlays";
-var useNonModal = ({ nonModalRef, keyboardDismissable = true }, state) => {
-  let { overlayProps } = useOverlay(
-    {
-      isOpen: state.isOpen,
-      onClose: state.close,
-      shouldCloseOnBlur: false,
-      isDismissable: false,
-      isKeyboardDismissDisabled: keyboardDismissable ? false : true
-    },
-    nonModalRef
-  );
-  return {
-    nonModalProps: overlayProps
-  };
-};
-
-// src/Overlay/NonModal.tsx
-import { jsx as jsx80, jsxs as jsxs30 } from "react/jsx-runtime";
-var NonModalInner = ({ state, isExiting, ...props }) => {
-  const { nonModalProps } = useNonModal(props, state);
-  const ref = props.nonModalRef;
-  const portalContainer = usePortalContainer();
-  const isEntering = useEnterAnimation(ref) || props.isEntering || false;
-  const renderProps = useRenderProps({
-    ...props,
-    defaultClassName: "react-aria-NonModalOverlay",
-    values: {
-      isEntering,
-      isExiting,
-      state
-    }
-  });
-  const viewport = useViewportSize();
-  const style = {
-    ...renderProps.style,
-    "--visual-viewport-height": viewport.height + "px"
-  };
-  const overlay = /* @__PURE__ */ jsxs30(
-    "div",
-    {
-      ...mergeProps(filterDOMProps(props), nonModalProps),
-      ...renderProps,
-      tabIndex: -1,
-      "aria-label": props["aria-label"],
-      "aria-labelledby": props["aria-labelledby"],
-      ref,
-      slot: props.slot || void 0,
-      style,
-      "data-entering": isEntering || void 0,
-      "data-exiting": isExiting || void 0,
-      children: [
-        renderProps.children,
-        /* @__PURE__ */ jsx80(DismissButton, { onDismiss: state.close })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsx80(
-    Overlay,
-    {
-      isExiting,
-      portalContainer,
-      disableFocusManagement: true,
-      children: /* @__PURE__ */ jsx80(FocusScope, { restoreFocus: true, children: /* @__PURE__ */ jsx80(Provider2, { values: [[OverlayTriggerStateContext2, state]], children: overlay }) })
-    }
-  );
-};
-var NonModal = forwardRef22(
-  ({ open, ...rest }, ref) => {
-    const props = {
-      isOpen: open,
-      ...rest
-    };
-    ref = useObjectRef(ref);
-    const contextState = useContext19(OverlayTriggerStateContext2);
-    const localState = useOverlayTriggerState(props);
-    const state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
-    const isExiting = useExitAnimation(ref, state.isOpen) || props.isExiting || false;
-    const isSSR = useIsSSR2();
-    if (state && !state.isOpen && !isExiting || isSSR) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx80(
-      NonModalInner,
-      {
-        ...props,
-        nonModalRef: ref,
-        state,
-        isExiting
-      }
-    );
-  }
-);
-
 // src/Pagination/Pagination.tsx
 import { useEffect as useEffect6, useRef as useRef8, useState as useState6 } from "react";
 import { cn as cn45, useClassNames as useClassNames47 } from "@marigold/system";
@@ -9165,7 +9162,7 @@ var Ellipsis = () => {
 import React12, { useEffect as useEffect4 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
 import { cn as cn44, useClassNames as useClassNames45 } from "@marigold/system";
-import { jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsxs as jsxs30 } from "react/jsx-runtime";
 var NavigationButton = (props) => {
   const ref = React12.useRef(null);
   const classNames3 = useClassNames45({
@@ -9187,7 +9184,7 @@ var NavigationButton = (props) => {
       return () => registerRef(null);
     }
   }, [registerRef]);
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs30(
     "button",
     {
       ref,
@@ -9386,7 +9383,7 @@ var usePageRange = ({ currentPage, totalPages }) => {
 };
 
 // src/Pagination/Pagination.tsx
-import { jsx as jsx83, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs31 } from "react/jsx-runtime";
 var _Pagination = ({
   defaultPage = 1,
   page,
@@ -9435,7 +9432,7 @@ var _Pagination = ({
   }, [currentPage, setFocusedItem]);
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === totalPages || totalPages === 0;
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs31(
     "nav",
     {
       className: "flex items-center justify-center space-x-2",
@@ -9485,14 +9482,14 @@ var _Pagination = ({
 
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef23
+  forwardRef as forwardRef24
 } from "react";
 import { Radio } from "react-aria-components";
 import { cn as cn47, useClassNames as useClassNames49 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext10, useContext as useContext20 } from "react";
-var RadioGroupContext = createContext10(
+import { createContext as createContext11, useContext as useContext20 } from "react";
+var RadioGroupContext = createContext11(
   null
 );
 var useRadioGroupContext = () => useContext20(RadioGroupContext);
@@ -9554,7 +9551,7 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment9, jsx as jsx85, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx85, jsxs as jsxs32 } from "react/jsx-runtime";
 var Dot = () => /* @__PURE__ */ jsx85("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx85("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
 var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx85(
   "div",
@@ -9568,7 +9565,7 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx85(
     children: checked ? /* @__PURE__ */ jsx85(Dot, {}) : null
   }
 );
-var _Radio = forwardRef23(
+var _Radio = forwardRef24(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size: size2, width: groupWidth } = useRadioGroupContext();
     const classNames3 = useClassNames49({
@@ -9589,7 +9586,7 @@ var _Radio = forwardRef23(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs33(Fragment9, { children: [
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs32(Fragment9, { children: [
           /* @__PURE__ */ jsx85(
             Icon3,
             {
@@ -9609,10 +9606,10 @@ var _Radio = forwardRef23(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-import { forwardRef as forwardRef24 } from "react";
+import { forwardRef as forwardRef25 } from "react";
 import { SearchField } from "react-aria-components";
 import { jsx as jsx86 } from "react/jsx-runtime";
-var _SearchField = forwardRef24(
+var _SearchField = forwardRef25(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -9632,11 +9629,11 @@ var _SearchField = forwardRef24(
 );
 
 // src/Select/Select.tsx
-import { forwardRef as forwardRef25 } from "react";
+import { forwardRef as forwardRef26 } from "react";
 import { Select as Select2, SelectValue } from "react-aria-components";
 import { cn as cn48, useClassNames as useClassNames50 } from "@marigold/system";
-import { jsx as jsx87, jsxs as jsxs34 } from "react/jsx-runtime";
-var _Select = forwardRef25(
+import { jsx as jsx87, jsxs as jsxs33 } from "react/jsx-runtime";
+var _Select = forwardRef26(
   ({
     disabled,
     required,
@@ -9657,8 +9654,8 @@ var _Select = forwardRef25(
       ...rest
     };
     const classNames3 = useClassNames50({ component: "Select", variant, size: size2 });
-    return /* @__PURE__ */ jsxs34(FieldBase, { as: Select2, ref, variant, size: size2, ...props, children: [
-      /* @__PURE__ */ jsxs34(
+    return /* @__PURE__ */ jsxs33(FieldBase, { as: Select2, ref, variant, size: size2, ...props, children: [
+      /* @__PURE__ */ jsxs33(
         IconButton,
         {
           className: cn48(
@@ -9680,24 +9677,24 @@ _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
 import {
-  forwardRef as forwardRef27
+  forwardRef as forwardRef28
 } from "react";
 import { GridList as SelectList } from "react-aria-components";
 import { cn as cn50, useClassNames as useClassNames51 } from "@marigold/system";
 
 // src/SelectList/Context.ts
-import { createContext as createContext11, useContext as useContext21 } from "react";
-var SelectListContext = createContext11(
+import { createContext as createContext12, useContext as useContext21 } from "react";
+var SelectListContext = createContext12(
   {}
 );
 var useSelectListContext = () => useContext21(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
-import { forwardRef as forwardRef26 } from "react";
+import { forwardRef as forwardRef27 } from "react";
 import { GridListItem as SelectListItem } from "react-aria-components";
 import { cn as cn49 } from "@marigold/system";
-import { jsx as jsx88, jsxs as jsxs35 } from "react/jsx-runtime";
-var _SelectListItem = forwardRef26(
+import { jsx as jsx88, jsxs as jsxs34 } from "react/jsx-runtime";
+var _SelectListItem = forwardRef27(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames3 } = useSelectListContext();
@@ -9708,7 +9705,7 @@ var _SelectListItem = forwardRef26(
         ...props,
         className: cn49("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.option),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ jsxs35("div", { className: "flex gap-2", children: [
+        children: ({ selectionMode }) => /* @__PURE__ */ jsxs34("div", { className: "flex gap-2", children: [
           selectionMode === "multiple" && /* @__PURE__ */ jsx88(_Checkbox, { slot: "selection" }),
           children
         ] })
@@ -9719,7 +9716,7 @@ var _SelectListItem = forwardRef26(
 
 // src/SelectList/SelectList.tsx
 import { jsx as jsx89 } from "react/jsx-runtime";
-var _SelectList = forwardRef27(
+var _SelectList = forwardRef28(
   ({ onChange: onChange2, ...rest }, ref) => {
     const classNames3 = useClassNames51({ component: "ListBox" });
     const props = {
@@ -9762,7 +9759,7 @@ var Scrollable = ({
 );
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef28 } from "react";
+import { forwardRef as forwardRef29 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -9774,8 +9771,8 @@ import {
   width as twWidth3,
   useClassNames as useClassNames52
 } from "@marigold/system";
-import { Fragment as Fragment10, jsx as jsx91, jsxs as jsxs36 } from "react/jsx-runtime";
-var _Slider = forwardRef28(
+import { Fragment as Fragment10, jsx as jsx91, jsxs as jsxs35 } from "react/jsx-runtime";
+var _Slider = forwardRef29(
   ({
     thumbLabels,
     variant,
@@ -9794,7 +9791,7 @@ var _Slider = forwardRef28(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs35(
       FieldBase,
       {
         as: Slider,
@@ -9812,7 +9809,7 @@ var _Slider = forwardRef28(
             SliderTrack,
             {
               className: cn52("relative col-span-2 h-2 w-full", classNames3.track),
-              children: ({ state }) => /* @__PURE__ */ jsxs36(Fragment10, { children: [
+              children: ({ state }) => /* @__PURE__ */ jsxs35(Fragment10, { children: [
                 /* @__PURE__ */ jsx91(
                   "div",
                   {
@@ -9887,15 +9884,15 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef29 } from "react";
+import { forwardRef as forwardRef30 } from "react";
 import { Switch } from "react-aria-components";
 import {
   cn as cn54,
   width as twWidth4,
   useClassNames as useClassNames53
 } from "@marigold/system";
-import { jsx as jsx94, jsxs as jsxs37 } from "react/jsx-runtime";
-var _Switch = forwardRef29(
+import { jsx as jsx94, jsxs as jsxs36 } from "react/jsx-runtime";
+var _Switch = forwardRef30(
   ({
     variant,
     size: size2,
@@ -9913,7 +9910,7 @@ var _Switch = forwardRef29(
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ jsxs37(
+    return /* @__PURE__ */ jsxs36(
       Switch,
       {
         ...props,
@@ -9940,15 +9937,15 @@ import {
   TableBody as Body2,
   Cell,
   Column,
-  TableHeader as Header3,
+  TableHeader as Header4,
   Row,
   useTableState
 } from "@react-stately/table";
 import { cn as cn61, useClassNames as useClassNames55 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext12, useContext as useContext22 } from "react";
-var TableContext = createContext12({});
+import { createContext as createContext13, useContext as useContext22 } from "react";
+var TableContext = createContext13({});
 var useTableContext = () => useContext22(TableContext);
 
 // src/Table/TableBody.tsx
@@ -10081,7 +10078,7 @@ import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
 import { cn as cn57, width as twWidth5, useStateProps as useStateProps3 } from "@marigold/system";
-import { jsx as jsx98, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs37 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column: column2,
   width = "auto",
@@ -10103,7 +10100,7 @@ var TableColumnHeader = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs37(
     "th",
     {
       colSpan: column2.colspan,
@@ -10261,7 +10258,7 @@ var TableSelectAllCell = ({
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx103, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx103, jsxs as jsxs38 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size: size2,
@@ -10294,7 +10291,7 @@ var Table = ({
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames3, variant, size: size2 },
-      children: /* @__PURE__ */ jsxs39(
+      children: /* @__PURE__ */ jsxs38(
         "table",
         {
           ref: tableRef,
@@ -10336,7 +10333,7 @@ var Table = ({
               },
               headerRow.key
             )) }),
-            /* @__PURE__ */ jsxs39(TableBody, { className: classNames3.body, emptyState, children: [
+            /* @__PURE__ */ jsxs38(TableBody, { className: classNames3.body, emptyState, children: [
               ...collection.rows.map(
                 (row) => row.type === "item" && /* @__PURE__ */ jsx103(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index2) => {
                   var _a, _b;
@@ -10361,7 +10358,7 @@ var Table = ({
 Table.Body = Body2;
 Table.Cell = Cell;
 Table.Column = Column;
-Table.Header = Header3;
+Table.Header = Header4;
 Table.Row = Row;
 
 // src/Text/Text.tsx
@@ -10419,11 +10416,11 @@ var _Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef30 } from "react";
+import { forwardRef as forwardRef31 } from "react";
 import { TextArea, TextField } from "react-aria-components";
 import { useClassNames as useClassNames57 } from "@marigold/system";
 import { jsx as jsx105 } from "react/jsx-runtime";
-var _TextArea = forwardRef30(
+var _TextArea = forwardRef31(
   ({
     variant,
     size: size2,
@@ -10447,10 +10444,10 @@ var _TextArea = forwardRef30(
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef31 } from "react";
+import { forwardRef as forwardRef32 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
 import { jsx as jsx106 } from "react/jsx-runtime";
-var _TextField = forwardRef31(
+var _TextField = forwardRef32(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
@@ -10518,7 +10515,7 @@ var _TooltipTrigger = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx109, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs39 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
   const props = {
     ...rest,
@@ -10526,7 +10523,7 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
   };
   const classNames3 = useClassNames58({ component: "Tooltip", variant, size: size2 });
   const portal = usePortalContainer();
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs39(
     Tooltip,
     {
       ...props,
@@ -10571,7 +10568,7 @@ var _TagGroup = ({
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment11, jsx as jsx111, jsxs as jsxs41 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx111, jsxs as jsxs40 } from "react/jsx-runtime";
 var CloseButton2 = ({ className }) => {
   return /* @__PURE__ */ jsx111(Button7, { slot: "remove", className, children: /* @__PURE__ */ jsx111("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx111("path", { 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" }) }) });
 };
@@ -10588,7 +10585,7 @@ var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
       textValue,
       ...props,
       className: cn65("data-selection-mode:cursor-pointer", classNames3.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs41(Fragment11, { children: [
+      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs40(Fragment11, { children: [
         children,
         allowsRemoving && /* @__PURE__ */ jsx111(
           CloseButton2,
@@ -10626,7 +10623,7 @@ var intlMessages2 = {
 };
 
 // src/XLoader/BaseLoader.tsx
-import { jsx as jsx112, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx112, jsxs as jsxs41 } from "react/jsx-runtime";
 var BaseLoader = ({
   variant,
   size: size2,
@@ -10636,7 +10633,7 @@ var BaseLoader = ({
 }) => {
   const stringFormatter = useLocalizedStringFormatter2(intlMessages2, "marigold");
   const className = useClassNames61({ component: "XLoader", variant, size: size2 });
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs41(
     ProgressBar2,
     {
       className: className.container,
@@ -10644,7 +10641,7 @@ var BaseLoader = ({
       "aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs42(
+        /* @__PURE__ */ jsxs41(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -10881,8 +10878,8 @@ import { Tabs } from "react-aria-components";
 import { useClassNames as useClassNames63 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext13, useContext as useContext23 } from "react";
-var TabContext = createContext13({});
+import { createContext as createContext14, useContext as useContext23 } from "react";
+var TabContext = createContext14({});
 var useTabContext = () => useContext23(TabContext);
 
 // src/Tabs/Tab.tsx