@marigold/components 6.11.0 → 7.1.0

package/dist/index.mjs

@@ -37,9 +37,7 @@ var ChevronDown = forwardRef2(
 // src/Accordion/useAccordionItem.ts
 import { useButton } from "@react-aria/button";
 import { useSelectableItem } from "@react-aria/selection";
-import { mergeProps, useId } from "@react-aria/utils";
-import { isAppleDevice } from "@react-aria/utils";
-import { isMac } from "@react-aria/utils";
+import { isAppleDevice, isMac, mergeProps, useId } from "@react-aria/utils";
 function isNonContiguousSelectionModifier(e) {
   return isAppleDevice() ? e.altKey : e.ctrlKey;
 }
@@ -61,9 +59,7 @@ function useAccordionItem(props, state, ref) {
     key,
     ref
   });
-  const isDefaultExpanded = state.expandedKeys.has(
-    item.key.toString().replace(".$", "")
-  );
+  const isDefaultExpanded = state.expandedKeys.has(item.key);
   let onSelect = (e) => {
     if (e.pointerType === "keyboard" && isNonContiguousSelectionModifier(e)) {
       if (isDefaultExpanded) {
@@ -141,16 +137,17 @@ var AccordionItem = ({
   ...props
 }) => {
   const ref = useRef(null);
-  const defaultExpanded = state.expandedKeys.has(
-    item.key.toString().replace(".$", "")
-  );
+  const defaultExpanded = Array.from(state.expandedKeys).some((key) => {
+    return key.toString() === item.key.toString().replace(".$", "");
+  });
   const expanded = state.selectionManager.isSelected(item.key);
   useEffect(() => {
     if (defaultExpanded) {
       if (state.selectionManager.selectionMode === "multiple") {
-        state.expandedKeys.forEach((key) => {
-          state.selectionManager.select(key);
-        });
+        state.selectionManager.setSelectedKeys([
+          ...state.selectionManager.selectedKeys,
+          item.key
+        ]);
       } else {
         state.expandedKeys.clear();
         state.selectionManager.toggleSelection(item.key);
@@ -187,14 +184,14 @@ var AccordionItem = ({
         ]
       }
     ) }),
-    expanded || defaultExpanded ? /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx3(
       "div",
       {
         ...mergeProps2(regionProps, focusProps, stateProps),
-        className: classNames2.item,
+        className: expanded || defaultExpanded ? classNames2.item : cn(classNames2.item, "hidden"),
         children: item.props.children
       }
-    ) : null
+    )
   ] });
 };
 
@@ -204,26 +201,25 @@ var Accordion = ({ children, ...props }) => {
   const ownProps = {
     ...props,
     // we have to do this because JSX childs are not supported
-    children: Children.toArray(children).map((child) => {
-      if (!isValidElement(child)) {
-        return child;
-      }
-      return cloneElement(child, {
-        hasChildItems: false,
-        ...child.props
-      });
-    })
+    children: []
   };
+  Children.forEach(children, (child) => {
+    var _a;
+    if (isValidElement(child) && typeof ((_a = child.props) == null ? void 0 : _a.children) !== "string") {
+      const clone = cloneElement(child, {
+        hasChildItems: false
+      });
+      ownProps.children.push(clone);
+      return;
+    }
+    ownProps.children.push(child);
+  });
   const ref = useRef2(null);
   const state = useTreeState({
     selectionMode: "single",
     ...ownProps
   });
-  const { accordionProps } = useAccordion(
-    { ...ownProps, children },
-    state,
-    ref
-  );
+  const { accordionProps } = useAccordion({ ...ownProps }, state, ref);
   delete accordionProps.onKeyDownCapture;
   return /* @__PURE__ */ jsx4("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsx4(
     AccordionItem,
@@ -302,31 +298,26 @@ var Aspect = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import { useRef as useRef7 } from "react";
-import { useSearchAutocomplete } from "@react-aria/autocomplete";
-import { useFilter } from "@react-aria/i18n";
-import { Item as Item2 } from "@react-stately/collections";
-import { useComboBoxState } from "@react-stately/combobox";
+import {
+  forwardRef as forwardRef8
+} from "react";
+import React2 from "react";
+import { ComboBox, ComboBoxStateContext as ComboBoxStateContext2 } from "react-aria-components";
 
 // src/FieldBase/FieldBase.tsx
-import {
-  cn as cn6,
-  width as twWidth,
-  useClassNames as useClassNames4
-} from "@marigold/system";
+import { forwardRef as forwardRef3 } from "react";
+import { cn as cn6, width as twWidth, useClassNames as useClassNames4 } from "@marigold/system";
 
 // src/HelpText/HelpText.tsx
-import { SVG as SVG3, cn as cn4, useClassNames as useClassNames2 } from "@marigold/system";
-import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { FieldError, Text } from "react-aria-components";
+import { cn as cn4, useClassNames as useClassNames2 } from "@marigold/system";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var HelpText = ({
   variant,
   size,
-  disabled,
   description,
-  descriptionProps,
   error,
   errorMessage,
-  errorMessageProps,
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
@@ -335,31 +326,37 @@ var HelpText = ({
     variant,
     size
   });
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      ...props,
-      ...hasErrorMessage ? errorMessageProps : descriptionProps,
-      className: cn4("flex items-center gap-1", classNames2.container),
-      children: hasErrorMessage ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx7(
-          SVG3,
-          {
-            className: cn4("h-4 w-4", classNames2.icon),
-            viewBox: "0 0 24 24",
-            role: "presentation",
-            children: /* @__PURE__ */ jsx7("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
-          }
-        ),
-        errorMessage
-      ] }) : /* @__PURE__ */ jsx7(Fragment, { children: description })
-    }
-  );
+  if (!description && !errorMessage) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: cn4(classNames2.container), children: [
+    /* @__PURE__ */ jsxs3(
+      FieldError,
+      {
+        ...props,
+        className: "grid grid-flow-col items-center justify-start gap-1",
+        children: [
+          /* @__PURE__ */ jsx7(
+            "svg",
+            {
+              className: cn4("h-4 w-4", classNames2.icon),
+              viewBox: "0 0 24 24",
+              role: "presentation",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx7("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
+            }
+          ),
+          errorMessage
+        ]
+      }
+    ),
+    !hasErrorMessage && /* @__PURE__ */ jsx7(Text, { slot: "description", children: description })
+  ] });
 };
 
 // src/Label/Label.tsx
 import { Label } from "react-aria-components";
-import { SVG as SVG4, cn as cn5, createVar as createVar3, useClassNames as useClassNames3 } from "@marigold/system";
+import { SVG as SVG3, cn as cn5, createVar as createVar3, useClassNames as useClassNames3 } from "@marigold/system";
 
 // src/FieldBase/FieldGroup.tsx
 import { createContext, useContext } from "react";
@@ -384,7 +381,7 @@ var _Label = ({ size, variant, children, ...props }) => {
       children: [
         children,
         /* @__PURE__ */ jsx9(
-          SVG4,
+          SVG3,
           {
             viewBox: "0 0 24 24",
             role: "presentation",
@@ -400,64 +397,60 @@ var _Label = ({ size, variant, children, ...props }) => {
 
 // src/FieldBase/FieldBase.tsx
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var FieldBase = ({
-  children,
-  variant,
-  size,
-  width = "full",
-  disabled,
-  label,
-  labelProps,
-  description,
-  descriptionProps,
-  error,
-  errorMessage,
-  errorMessageProps,
-  stateProps,
-  ...props
-}) => {
-  const hasHelpText = !!description || errorMessage && error;
+var fixedForwardRef = forwardRef3;
+var _FieldBase = (props, ref) => {
+  const {
+    as: Component = "div",
+    children,
+    label,
+    size,
+    variant,
+    width = "full",
+    description,
+    errorMessage,
+    className,
+    stateProps,
+    ...rest
+  } = props;
   const classNames2 = useClassNames4({
     component: "Field",
     variant,
     size
   });
   return /* @__PURE__ */ jsxs5(
-    "div",
+    Component,
     {
-      ...props,
-      ...stateProps,
-      className: cn6("group/field", twWidth[width], classNames2),
+      ref,
+      className: cn6("group/field", twWidth[width], classNames2, className),
+      "data-required": props.isRequired ? true : void 0,
+      "data-error": props.isInvalid ? true : void 0,
+      ...rest,
       children: [
-        label ? /* @__PURE__ */ jsx10(_Label, { variant, size, ...labelProps, children: label }) : /* @__PURE__ */ jsx10("span", { "aria-hidden": "true" }),
+        label ? /* @__PURE__ */ jsx10(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx10("span", { "aria-hidden": "true" }),
         children,
-        hasHelpText && /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx10(
           HelpText,
           {
             variant,
             size,
-            disabled,
             description,
-            descriptionProps,
-            error,
             errorMessage,
-            errorMessageProps
+            error: props.isInvalid
           }
         )
       ]
     }
   );
 };
+var FieldBase = fixedForwardRef(_FieldBase);
 
 // src/Input/Input.tsx
-import {
-  cloneElement as cloneElement2,
-  forwardRef as forwardRef3
-} from "react";
+import { cloneElement as cloneElement2, forwardRef as forwardRef4 } from "react";
+import { Input } from "react-aria-components";
 import { cn as cn7, useClassNames as useClassNames5 } from "@marigold/system";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-var Input = forwardRef3(
-  ({ type = "text", icon, action, variant, size, ...props }, ref) => {
+var _Input = forwardRef4(
+  ({ type, icon, action, variant, size, className, ...props }, ref) => {
     const classNames2 = useClassNames5({
       component: "Input",
       variant,
@@ -488,7 +481,7 @@ var Input = forwardRef3(
         children: [
           inputIcon,
           /* @__PURE__ */ jsx11(
-            "input",
+            Input,
             {
               ...props,
               className: cn7(
@@ -496,7 +489,8 @@ var Input = forwardRef3(
                 "disabled:cursor-not-allowed",
                 "[&[type=file]]:border-none [&[type=file]]:p-0",
                 "[&[type=color]]:ml-0 [&[type=color]]:border-none [&[type=color]]:bg-transparent [&[type=color]]:p-0",
-                classNames2.input
+                classNames2.input,
+                className
               ),
               ref,
               type
@@ -509,97 +503,71 @@ var Input = forwardRef3(
   }
 );
 
-// src/ListBox/_ListBox.tsx
-import { forwardRef as forwardRef4 } from "react";
-import { useListBox } from "@react-aria/listbox";
-import { useObjectRef } from "@react-aria/utils";
-import { cn as cn8, useClassNames as useClassNames6 } from "@marigold/system";
+// src/ListBox/ListBox.tsx
+import {
+  forwardRef as forwardRef5
+} from "react";
+import { ListBox } from "react-aria-components";
+import { cn as cn9, useClassNames as useClassNames6 } from "@marigold/system";
 
 // src/ListBox/Context.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var ListBoxContext = createContext2({});
 var useListBoxContext = () => useContext2(ListBoxContext);
 
-// src/ListBox/_ListBoxOption.tsx
-import { useRef as useRef3 } from "react";
-import { useOption } from "@react-aria/listbox";
-import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { useStateProps as useStateProps2 } from "@marigold/system";
+// src/ListBox/ListBoxOption.tsx
+import { ListBoxItem } from "react-aria-components";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var ListBoxOption = ({ item, state }) => {
-  const ref = useRef3(null);
-  const { optionProps, isSelected, isDisabled, isFocused } = useOption(
-    {
-      key: item.key
-    },
-    state,
-    ref
-  );
-  const { onPointerUp, ...props } = optionProps;
+var _ListBoxItem = (props) => {
   const { classNames: classNames2 } = useListBoxContext();
-  const stateProps = useStateProps2({
-    selected: isSelected,
-    disabled: isDisabled,
-    focusVisible: isFocused
-  });
-  return /* @__PURE__ */ jsx12(
-    "li",
-    {
-      ref,
-      className: classNames2.option,
-      ...mergeProps3(props, { onPointerDown: onPointerUp }, { ...stateProps }),
-      children: item.props.children
-    }
-  );
+  return /* @__PURE__ */ jsx12(ListBoxItem, { ...props, className: classNames2.option });
 };
 
-// src/ListBox/_ListBoxSection.tsx
-import { useListBoxSection } from "@react-aria/listbox";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
-var ListBoxSection = ({ section, state }) => {
+// src/ListBox/ListBoxSection.tsx
+import { Section } from "react-aria-components";
+import { cn as cn8 } from "@marigold/system";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var _Section = (props) => {
   const { classNames: classNames2 } = useListBoxContext();
-  const { itemProps, headingProps, groupProps } = useListBoxSection({
-    heading: section.rendered,
-    "aria-label": section["aria-label"]
-  });
-  return /* @__PURE__ */ jsxs7("li", { className: classNames2.section, ...itemProps, children: [
-    section.rendered && /* @__PURE__ */ jsx13("div", { className: classNames2.sectionTitle, ...headingProps, children: section.rendered }),
-    /* @__PURE__ */ jsx13("ul", { className: classNames2.list, ...groupProps, children: [...section.props.children].map((node) => /* @__PURE__ */ jsx13(ListBoxOption, { item: node, state }, node.key)) })
-  ] });
+  return /* @__PURE__ */ jsx13(
+    Section,
+    {
+      ...props,
+      className: cn8(classNames2.section, classNames2.sectionTitle)
+    }
+  );
 };
 
-// src/ListBox/_ListBox.tsx
+// src/ListBox/ListBox.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-var ListBox = forwardRef4(
-  ({ state, variant, size, ...props }, ref) => {
-    const innerRef = useObjectRef(ref);
-    const { listBoxProps } = useListBox(props, state, innerRef);
+var _ListBox = forwardRef5(
+  ({ variant, size, ...props }, ref) => {
     const classNames2 = useClassNames6({ component: "ListBox", variant, size });
     return /* @__PURE__ */ jsx14(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx14("div", { className: classNames2.container, children: /* @__PURE__ */ jsx14(
-      "ul",
+      ListBox,
       {
-        className: cn8(
+        ...props,
+        className: cn9(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
-        ref: innerRef,
-        ...listBoxProps,
-        children: [...state.collection].map(
-          (item) => item.type === "section" ? /* @__PURE__ */ jsx14(ListBoxSection, { section: item, state }, item.key) : /* @__PURE__ */ jsx14(ListBoxOption, { item, state }, item.key)
-        )
+        ref,
+        children: props.children
       }
     ) }) });
   }
 );
+_ListBox.Item = _ListBoxItem;
+_ListBox.Section = _Section;
 
-// src/Overlay/Modal.tsx
-import { forwardRef as forwardRef5 } from "react";
-import { Modal } from "react-aria-components";
-import { useTheme } from "@marigold/system";
+// src/Overlay/Popover.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { Popover } from "react-aria-components";
+import { cn as cn11, useClassNames as useClassNames8, useSmallScreen, useTheme } from "@marigold/system";
 
 // src/Overlay/Underlay.tsx
 import { ModalOverlay } from "react-aria-components";
-import { cn as cn9, useClassNames as useClassNames7 } from "@marigold/system";
+import { cn as cn10, useClassNames as useClassNames7 } from "@marigold/system";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var Underlay = ({
   size,
@@ -619,242 +587,115 @@ var Underlay = ({
   return /* @__PURE__ */ jsx15(
     ModalOverlay,
     {
-      className: ({ isEntering, isExiting }) => cn9(
+      className: ({ isEntering, isExiting }) => cn10(
         "fixed inset-0 z-10 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur ",
         isEntering ? "animate-in fade-in duration-300 ease-out" : "",
         isExiting ? "animate-out fade-out duration-200 ease-in" : "",
         classNames2
       ),
       ...props,
+      "data-testid": "underlay-id",
       children: props.children
     }
   );
 };
 
-// src/Overlay/Modal.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var _Modal = forwardRef5(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
-  const theme = useTheme();
-  const props = {
-    isOpen: open,
-    isDismissable: dismissable,
-    isKeyboardDismissDisabled: keyboardDismissable,
-    ...rest
-  };
-  return /* @__PURE__ */ jsx16(
-    Underlay,
-    {
-      dismissable,
-      keyboardDismissable,
-      open,
-      variant: "modal",
-      children: /* @__PURE__ */ jsx16(Modal, { ref, "data-theme": theme.name, ...props, children: props.children })
-    }
-  );
-});
-
-// src/Overlay/Overlay.tsx
-import { useRef as useRef4 } from "react";
-import {
-  Overlay as ReactAriaOverlay
-} from "@react-aria/overlays";
-import { useTheme as useTheme2 } from "@marigold/system";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var Overlay = ({ children, container, open }) => {
-  const nodeRef = useRef4(null);
-  const theme = useTheme2();
-  let mountOverlay = open;
-  if (!mountOverlay) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx17(ReactAriaOverlay, { portalContainer: container, children: /* @__PURE__ */ jsx17(
-    "div",
-    {
-      ref: nodeRef,
-      "data-testid": "overlay",
-      "data-theme": theme.name,
-      className: "opacity-100",
-      children
-    }
-  ) });
-};
-
-// src/Overlay/_Popover.tsx
-import { forwardRef as forwardRef6, useRef as useRef5 } from "react";
-import { FocusScope } from "@react-aria/focus";
-import {
-  DismissButton,
-  usePopover
-} from "@react-aria/overlays";
-import { useClassNames as useClassNames8 } from "@marigold/system";
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
-var Popover = forwardRef6(
-  (props, ref) => {
-    const fallbackRef = useRef5(null);
-    const popoverRef = ref || fallbackRef;
-    let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ jsx18(Overlay, { open: state.isOpen, ...otherProps, children: /* @__PURE__ */ jsx18(PopoverWrapper, { ref: popoverRef, ...props, children }) });
-  }
-);
-var PopoverWrapper = forwardRef6(
-  ({
-    children,
-    isNonModal,
-    state,
-    keyboardDismissDisabled,
-    ...props
-  }, ref) => {
-    const { popoverProps, underlayProps, placement } = usePopover(
-      {
-        ...props,
-        isNonModal,
-        isKeyboardDismissDisabled: keyboardDismissDisabled,
-        popoverRef: ref,
-        placement: "bottom left"
-      },
-      state
-    );
+// src/Overlay/Popover.tsx
+import { Fragment, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var _Popover = forwardRef6(
+  ({ keyboardDismissDisabled, placement, open, children, ...rest }, ref) => {
+    const props = {
+      isKeyboardDismissDisabled: keyboardDismissDisabled,
+      isOpen: open,
+      placement,
+      ...rest
+    };
     const classNames2 = useClassNames8({
       component: "Popover",
-      variant: placement
+      variant: placement,
+      // Make Popover as wide as trigger element
+      className: "w-[--trigger-width]"
     });
-    return /* @__PURE__ */ jsxs8(FocusScope, { restoreFocus: true, children: [
-      !isNonModal && /* @__PURE__ */ jsx18(Underlay, { ...underlayProps }),
-      /* @__PURE__ */ jsxs8(
-        "div",
+    const isSmallScreen = useSmallScreen();
+    const theme = useTheme();
+    return /* @__PURE__ */ jsx16(Fragment, { children: isSmallScreen ? /* @__PURE__ */ jsxs7(Fragment, { children: [
+      /* @__PURE__ */ jsx16(Underlay, { open, variant: "modal" }),
+      /* @__PURE__ */ jsx16(
+        Popover,
         {
-          ...popoverProps,
-          className: classNames2,
-          style: {
-            ...popoverProps.style,
-            minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
-          },
           ref,
-          role: "presentation",
-          children: [
-            !isNonModal && /* @__PURE__ */ jsx18(DismissButton, { onDismiss: state.close }),
-            children,
-            /* @__PURE__ */ jsx18(DismissButton, { onDismiss: state.close })
-          ]
+          ...props,
+          className: cn11(
+            "!left-0 bottom-0 !mt-auto flex !max-h-fit w-full flex-col"
+          ),
+          "data-theme": theme.name,
+          children
         }
       )
-    ] });
+    ] }) : /* @__PURE__ */ jsx16(
+      Popover,
+      {
+        ref,
+        ...props,
+        className: classNames2,
+        offset: 0,
+        "data-theme": theme.name,
+        children
+      }
+    ) });
   }
 );
 
-// src/Overlay/Tray.tsx
-import { forwardRef as forwardRef7 } from "react";
-import { FocusScope as FocusScope2 } from "@react-aria/focus";
-import {
-  DismissButton as DismissButton2,
-  useModalOverlay
-} from "@react-aria/overlays";
-import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
-
-// src/Overlay/_Underlay.tsx
-import { cn as cn10, useClassNames as useClassNames9 } from "@marigold/system";
-import { jsx as jsx19 } from "react/jsx-runtime";
-var Underlay2 = ({ size, variant, ...props }) => {
-  const classNames2 = useClassNames9({ component: "Underlay", size, variant });
-  return /* @__PURE__ */ jsx19("div", { className: cn10("fixed inset-0 z-40", classNames2), ...props });
-};
+// src/Autocomplete/ClearButton.tsx
+import React from "react";
+import { ComboBoxStateContext } from "react-aria-components";
+import { cn as cn13 } from "@marigold/system";
 
-// src/Overlay/Tray.tsx
-import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
-var Tray = forwardRef7(
-  ({ state, children, ...props }, ref) => {
-    const trayRef = useObjectRef2(ref);
-    return /* @__PURE__ */ jsx20(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx20(TrayWrapper, { state, ...props, ref: trayRef, children }) });
-  }
-);
-var TrayWrapper = forwardRef7(
-  ({ children, state, ...props }, ref) => {
-    let { modalProps, underlayProps } = useModalOverlay(
+// src/Button/Button.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { Button } from "react-aria-components";
+import { cn as cn12, useClassNames as useClassNames9 } from "@marigold/system";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var _Button = forwardRef7(
+  ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
+    const classNames2 = useClassNames9({
+      component: "Button",
+      variant,
+      size,
+      className
+    });
+    return /* @__PURE__ */ jsx17(
+      Button,
       {
         ...props,
-        isDismissable: true
-      },
-      state,
-      ref
-    );
-    return /* @__PURE__ */ jsx20(FocusScope2, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx20(Underlay2, { ...underlayProps, variant: "modal", children: /* @__PURE__ */ jsxs9(
-      "div",
-      {
-        ...modalProps,
         ref,
-        className: "absolute bottom-0 w-full",
-        "data-testid": "tray",
-        children: [
-          /* @__PURE__ */ jsx20(DismissButton2, { onDismiss: state.close }),
-          children,
-          /* @__PURE__ */ jsx20(DismissButton2, { onDismiss: state.close })
-        ]
+        className: cn12(
+          "inline-flex items-center justify-center gap-[0.5ch]",
+          classNames2,
+          fullWidth ? "w-full" : void 0
+        ),
+        isDisabled: disabled,
+        children
       }
-    ) }) });
+    );
   }
 );
 
 // src/Autocomplete/ClearButton.tsx
-import { useRef as useRef6 } from "react";
-import { useButton as useButton2 } from "@react-aria/button";
-import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
-import { useHover } from "@react-aria/interactions";
-import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn11, useStateProps as useStateProps3 } from "@marigold/system";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var ClearButton = ({
-  preventFocus,
-  disabled,
-  onClick,
-  onPress,
-  onPressStart,
-  onPressEnd,
-  onPressChange,
-  onPressUp,
-  excludeFromTabOrder,
-  preventFocusOnPress,
-  className,
-  ...props
-}) => {
-  const buttonRef = useRef6(null);
-  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
-  const { isFocusVisible, focusProps } = useFocusRing2({
-    autoFocus: props.autoFocus
-  });
-  const { buttonProps, isPressed } = useButton2(
-    {
-      ...props,
-      onClick,
-      onPress,
-      onPressStart,
-      onPressEnd,
-      onPressChange,
-      onPressUp,
-      excludeFromTabOrder,
-      preventFocusOnPress,
-      isDisabled: disabled
-    },
-    buttonRef
-  );
-  if (preventFocus) {
-    delete buttonProps.tabIndex;
-  }
-  const stateProps = useStateProps3({
-    active: isPressed,
-    focusVisible: isFocusVisible,
-    hover: isHovered
-  });
-  return /* @__PURE__ */ jsx21(
-    "button",
+import { jsx as jsx18 } from "react/jsx-runtime";
+var AutocompleteClearButton = ({ className }) => {
+  let state = React.useContext(ComboBoxStateContext);
+  return /* @__PURE__ */ jsx18(
+    _Button,
     {
-      ...mergeProps4(buttonProps, focusProps, hoverProps, props),
-      ...stateProps,
-      ref: buttonRef,
-      className: cn11(
+      "aria-label": "Clear",
+      onPress: () => state == null ? void 0 : state.setInputValue(""),
+      variant: "icon",
+      className: cn13(
         "cursor-pointer appearance-none border-none p-0 pr-1",
         className
       ),
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx18(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -862,7 +703,7 @@ var ClearButton = ({
           fill: "currentColor",
           width: 20,
           height: 20,
-          children: /* @__PURE__ */ jsx21("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+          children: /* @__PURE__ */ jsx18("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
         }
       )
     }
@@ -870,8 +711,29 @@ var ClearButton = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
-var SearchIcon = (props) => /* @__PURE__ */ jsx22(
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+var SearchInput = ({ onSubmit, ref }) => {
+  const state = React2.useContext(ComboBoxStateContext2);
+  return /* @__PURE__ */ jsx19(
+    _Input,
+    {
+      ref,
+      icon: /* @__PURE__ */ jsx19(SearchIcon, {}),
+      action: (state == null ? void 0 : state.inputValue) !== "" ? /* @__PURE__ */ jsx19(AutocompleteClearButton, {}) : void 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === "Escape") {
+          e.preventDefault();
+        }
+        if (e.key === "Enter") {
+          if (state.selectionManager.focusedKey === null) {
+            onSubmit == null ? void 0 : onSubmit(null, state.inputValue);
+          }
+        }
+      }
+    }
+  );
+};
+var SearchIcon = (props) => /* @__PURE__ */ jsx19(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -880,238 +742,94 @@ var SearchIcon = (props) => /* @__PURE__ */ jsx22(
     width: 24,
     height: 24,
     ...props,
-    children: /* @__PURE__ */ jsx22("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+    children: /* @__PURE__ */ jsx19("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
   }
 );
-var Autocomplete = ({
-  disabled,
-  required,
-  readOnly,
-  error,
-  onChange,
-  value,
-  defaultValue,
-  variant,
-  size,
-  width,
-  ...rest
-}) => {
-  const { contains } = useFilter({ sensitivity: "base" });
-  const props = {
-    ...rest,
-    onInputChange: onChange,
-    inputValue: value,
-    defaultInputValue: defaultValue,
-    isDisabled: disabled,
-    isRequired: required,
-    isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid"
-  };
-  const state = useComboBoxState({
-    ...props,
-    defaultFilter: contains,
-    allowsCustomValue: true,
-    onSelectionChange: (key) => {
-      var _a;
-      return key !== null && ((_a = props.onSubmit) == null ? void 0 : _a.call(props, key, null));
-    },
-    selectedKey: void 0,
-    defaultSelectedKey: void 0
-  });
-  const inputRef = useRef7(null);
-  const listBoxRef = useRef7(null);
-  const popoverRef = useRef7(null);
-  const { inputProps, listBoxProps, labelProps, clearButtonProps } = useSearchAutocomplete(
-    {
-      ...props,
-      onSubmit: (value2, key) => {
-        var _a;
-        return (_a = props.onSubmit) == null ? void 0 : _a.call(props, key, value2);
-      },
-      popoverRef,
-      listBoxRef,
-      inputRef
-    },
-    state
-  );
-  const { isDisabled, ...restClearButtonProps } = clearButtonProps;
-  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    /* @__PURE__ */ jsx22(
-      FieldBase,
-      {
-        label: props.label,
-        labelProps,
-        description: props.description,
-        error,
-        errorMessage: props.errorMessage,
-        disabled,
-        width,
-        children: /* @__PURE__ */ jsx22(
-          Input,
-          {
-            ...inputProps,
-            ref: inputRef,
-            icon: /* @__PURE__ */ jsx22(SearchIcon, {}),
-            action: state.inputValue !== "" ? /* @__PURE__ */ jsx22(
-              ClearButton,
-              {
-                preventFocus: true,
-                disabled: isDisabled,
-                ...restClearButtonProps
-              }
-            ) : null
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx22(
-      Popover,
-      {
-        state,
-        ref: popoverRef,
-        triggerRef: inputRef,
-        scrollRef: listBoxRef,
-        isNonModal: true,
-        children: /* @__PURE__ */ jsx22(ListBox, { ref: listBoxRef, state, ...listBoxProps })
-      }
-    )
-  ] });
-};
-Autocomplete.Item = Item2;
-
-// src/ComboBox/ComboBox.tsx
-import React from "react";
-import { useComboBox } from "@react-aria/combobox";
-import { useFilter as useFilter2 } from "@react-aria/i18n";
-import { Item as Item3 } from "@react-stately/collections";
-import { useComboBoxState as useComboBoxState2 } from "@react-stately/combobox";
-
-// src/Button/Button.tsx
-import { forwardRef as forwardRef8 } from "react";
-import { Button } from "react-aria-components";
-import { cn as cn12, useClassNames as useClassNames10 } from "@marigold/system";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var _Button = forwardRef8(
-  ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
-    const classNames2 = useClassNames10({
-      component: "Button",
-      variant,
-      size,
-      className
-    });
-    return /* @__PURE__ */ jsx23(
-      Button,
-      {
-        ...props,
-        ref,
-        className: cn12(
-          "inline-flex items-center justify-center gap-[0.5ch]",
-          classNames2,
-          fullWidth ? "w-full" : void 0
-        ),
-        isDisabled: disabled,
-        children
-      }
-    );
+var _Autocomplete = forwardRef8(
+  ({
+    children,
+    defaultValue,
+    value,
+    onChange,
+    onSubmit,
+    disabled,
+    error,
+    readOnly,
+    required,
+    ...rest
+  }, ref) => {
+    const props = {
+      onSelectionChange: (key) => key !== null && (onSubmit == null ? void 0 : onSubmit(key, null)),
+      defaultInputValue: defaultValue,
+      inputValue: value,
+      onInputChange: onChange,
+      allowsCustomValue: true,
+      isDisabled: disabled,
+      isInvalid: error,
+      isReadOnly: readOnly,
+      isRequired: required,
+      ...rest
+    };
+    return /* @__PURE__ */ jsx19(Fragment2, { children: /* @__PURE__ */ jsxs8(FieldBase, { as: ComboBox, ...props, children: [
+      /* @__PURE__ */ jsx19(SearchInput, { onSubmit, ref }),
+      /* @__PURE__ */ jsx19(_Popover, { children: /* @__PURE__ */ jsx19(_ListBox, { children }) })
+    ] }) });
   }
 );
+_Autocomplete.Item = _ListBox.Item;
 
 // src/ComboBox/ComboBox.tsx
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
-var ComboBox = ({
-  error,
-  width,
-  disabled,
-  required,
-  readOnly,
-  defaultValue,
-  value,
-  onChange,
-  variant,
-  size,
-  ...rest
-}) => {
-  const props = {
-    isDisabled: disabled,
-    isRequired: required,
-    isReadOnly: readOnly,
-    defaultInputValue: defaultValue,
-    inputValue: value,
-    onInputChange: onChange,
+import { forwardRef as forwardRef9 } from "react";
+import { ComboBox as ComboBox2 } from "react-aria-components";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
+var _ComboBox = forwardRef9(
+  ({
+    variant,
+    size,
+    required,
+    disabled,
+    readOnly,
+    error,
+    defaultValue,
+    value,
+    onChange,
+    children,
     ...rest
-  };
-  const { contains } = useFilter2({ sensitivity: "base" });
-  const state = useComboBoxState2({ ...props, defaultFilter: contains });
-  const buttonRef = React.useRef(null);
-  const inputRef = React.useRef(null);
-  const listBoxRef = React.useRef(null);
-  const popoverRef = React.useRef(null);
-  const {
-    buttonProps: triggerProps,
-    inputProps,
-    listBoxProps,
-    labelProps
-  } = useComboBox(
-    { ...props, inputRef, buttonRef, listBoxRef, popoverRef },
-    state
-  );
-  const errorMessageProps = { "aria-invalid": error };
-  const { label, description, errorMessage } = props;
-  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
-    /* @__PURE__ */ jsx24(
-      FieldBase,
-      {
-        label,
-        labelProps,
-        description,
-        error,
-        errorMessage,
-        errorMessageProps,
-        width,
-        children: /* @__PURE__ */ jsx24(
-          Input,
-          {
-            ...inputProps,
-            ref: inputRef,
-            action: /* @__PURE__ */ jsx24(
-              _Button,
-              {
-                className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0",
-                ref: buttonRef,
-                ...triggerProps,
-                children: /* @__PURE__ */ jsx24(ChevronDown, { className: "h-4 w-4" })
-              }
-            )
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx24(
-      Popover,
-      {
-        state,
-        ref: popoverRef,
-        triggerRef: inputRef,
-        scrollRef: listBoxRef,
-        isNonModal: true,
-        children: /* @__PURE__ */ jsx24(ListBox, { ref: listBoxRef, state, ...listBoxProps })
-      }
-    )
-  ] });
-};
-ComboBox.Item = Item3;
+  }, ref) => {
+    const props = {
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isRequired: required,
+      isInvalid: error,
+      defaultInputValue: defaultValue,
+      inputValue: value,
+      onInputChange: onChange,
+      ...rest
+    };
+    return /* @__PURE__ */ jsxs9(FieldBase, { as: ComboBox2, ref, ...props, children: [
+      /* @__PURE__ */ jsx20(
+        _Input,
+        {
+          action: /* @__PURE__ */ jsx20(_Button, { className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0", children: /* @__PURE__ */ jsx20(ChevronDown, { className: "h-4 w-4" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx20(_Popover, { children: /* @__PURE__ */ jsx20(_ListBox, { children }) })
+    ] });
+  }
+);
+_ComboBox.Item = _ListBox.Item;
 
 // src/Badge/Badge.tsx
-import { useClassNames as useClassNames11 } from "@marigold/system";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { useClassNames as useClassNames10 } from "@marigold/system";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Badge = ({ variant, size, children, ...props }) => {
-  const classNames2 = useClassNames11({ component: "Badge", variant, size });
-  return /* @__PURE__ */ jsx25("div", { ...props, className: classNames2, children });
+  const classNames2 = useClassNames10({ component: "Badge", variant, size });
+  return /* @__PURE__ */ jsx21("div", { ...props, className: classNames2, children });
 };
 
 // src/Breakout/Breakout.tsx
-import { alignment, cn as cn13, createVar as createVar4 } from "@marigold/system";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { alignment, cn as cn14, createVar as createVar4 } from "@marigold/system";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var Breakout = ({
   height,
   children,
@@ -1121,10 +839,10 @@ var Breakout = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
-      className: cn13(
+      className: cn14(
         "col-start-[1_!important] col-end-[-1_!important] w-full",
         alignX && ((_b = (_a = alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
         alignY && ((_d = (_c = alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
@@ -1139,16 +857,16 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-import { useClassNames as useClassNames12 } from "@marigold/system";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { useClassNames as useClassNames11 } from "@marigold/system";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Body = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames12({ component: "Body", variant, size });
-  return /* @__PURE__ */ jsx27("section", { ...props, className: classNames2, children });
+  const classNames2 = useClassNames11({ component: "Body", variant, size });
+  return /* @__PURE__ */ jsx23("section", { ...props, className: classNames2, children });
 };
 
 // src/Card/Card.tsx
 import {
-  cn as cn14,
+  cn as cn15,
   gapSpace as gapSpace2,
   paddingBottom,
   paddingLeft,
@@ -1157,9 +875,9 @@ import {
   paddingSpaceX,
   paddingSpaceY,
   paddingTop,
-  useClassNames as useClassNames13
+  useClassNames as useClassNames12
 } from "@marigold/system";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var Card = ({
   children,
   variant,
@@ -1174,12 +892,12 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames2 = useClassNames13({ component: "Card", variant, size });
-  return /* @__PURE__ */ jsx28(
+  const classNames2 = useClassNames12({ component: "Card", variant, size });
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       ...props,
-      className: cn14(
+      className: cn15(
         "flex flex-col",
         classNames2,
         gapSpace2[space],
@@ -1197,19 +915,19 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-import { cn as cn15, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { cn as cn16, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Center = ({
   maxWidth = "100%",
   space = 0,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx25(
     "div",
     {
       ...props,
-      className: cn15(
+      className: cn16(
         "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
         gapSpace3[space],
         "max-w-[--maxWidth]"
@@ -1221,11 +939,11 @@ var Center = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef10 } from "react";
 import { Checkbox } from "react-aria-components";
-import { cn as cn16, useClassNames as useClassNames14 } from "@marigold/system";
-import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
-var CheckMark = () => /* @__PURE__ */ jsx30("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx30(
+import { cn as cn17, useClassNames as useClassNames13 } from "@marigold/system";
+import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+var CheckMark = () => /* @__PURE__ */ jsx26("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx26(
   "path",
   {
     fill: "currentColor",
@@ -1233,7 +951,7 @@ var CheckMark = () => /* @__PURE__ */ jsx30("svg", { viewBox: "0 0 12 10", child
     d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
   }
 ) });
-var IndeterminateMark = () => /* @__PURE__ */ jsx30("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx30(
+var IndeterminateMark = () => /* @__PURE__ */ jsx26("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx26(
   "path",
   {
     fill: "currentColor",
@@ -1242,11 +960,11 @@ var IndeterminateMark = () => /* @__PURE__ */ jsx30("svg", { width: "12", height
   }
 ) });
 var Icon = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       "aria-hidden": "true",
-      className: cn16(
+      className: cn17(
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
@@ -1254,11 +972,11 @@ var Icon = ({ className, checked, indeterminate, ...props }) => {
         className
       ),
       ...props,
-      children: indeterminate ? /* @__PURE__ */ jsx30(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx30(CheckMark, {}) : null
+      children: indeterminate ? /* @__PURE__ */ jsx26(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx26(CheckMark, {}) : null
     }
   );
 };
-var _Checkbox = forwardRef9(
+var _Checkbox = forwardRef10(
   ({
     className,
     indeterminate,
@@ -1283,19 +1001,19 @@ var _Checkbox = forwardRef9(
       defaultSelected: defaultChecked,
       ...rest
     };
-    const classNames2 = useClassNames14({ component: "Checkbox", variant, size });
-    return /* @__PURE__ */ jsx30(
+    const classNames2 = useClassNames13({ component: "Checkbox", variant, size });
+    return /* @__PURE__ */ jsx26(
       Checkbox,
       {
         ref,
-        className: cn16(
+        className: cn17(
           "group/checkbox flex items-center gap-[0.5rem]",
           "cursor-pointer data-[disabled]:cursor-not-allowed",
           classNames2.container
         ),
         ...props,
-        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs12(Fragment4, { children: [
-          /* @__PURE__ */ jsx30(
+        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs10(Fragment3, { children: [
+          /* @__PURE__ */ jsx26(
             Icon,
             {
               checked: isSelected,
@@ -1303,7 +1021,7 @@ var _Checkbox = forwardRef9(
               className: classNames2.checkbox
             }
           ),
-          /* @__PURE__ */ jsx30("div", { className: classNames2.label, children })
+          /* @__PURE__ */ jsx26("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -1312,109 +1030,8 @@ var _Checkbox = forwardRef9(
 
 // src/Checkbox/CheckboxGroup.tsx
 import { CheckboxGroup } from "react-aria-components";
-import { useClassNames as useClassNames17 } from "@marigold/system";
-
-// src/FieldBase/_FieldBase.tsx
-import { forwardRef as forwardRef10 } from "react";
-import { cn as cn18, width as twWidth2, useClassNames as useClassNames16 } from "@marigold/system";
-
-// src/HelpText/_HelpText.tsx
-import { FieldError, Text } from "react-aria-components";
-import { cn as cn17, useClassNames as useClassNames15 } from "@marigold/system";
-import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
-var HelpText2 = ({
-  variant,
-  size,
-  description,
-  error,
-  errorMessage,
-  ...props
-}) => {
-  const hasErrorMessage = errorMessage && error;
-  const classNames2 = useClassNames15({
-    component: "HelpText",
-    variant,
-    size
-  });
-  if (!description && !errorMessage) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs13("div", { className: cn17(classNames2.container), children: [
-    /* @__PURE__ */ jsxs13(
-      FieldError,
-      {
-        ...props,
-        className: "grid grid-flow-col items-center justify-start gap-1",
-        children: [
-          /* @__PURE__ */ jsx31(
-            "svg",
-            {
-              className: cn17("h-4 w-4", classNames2.icon),
-              viewBox: "0 0 24 24",
-              role: "presentation",
-              fill: "currentColor",
-              children: /* @__PURE__ */ jsx31("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
-            }
-          ),
-          errorMessage
-        ]
-      }
-    ),
-    !hasErrorMessage && /* @__PURE__ */ jsx31(Text, { slot: "description", children: description })
-  ] });
-};
-
-// src/FieldBase/_FieldBase.tsx
-import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
-var fixedForwardRef = forwardRef10;
-var _FieldBase = (props, ref) => {
-  const {
-    as: Component = "div",
-    children,
-    label,
-    size,
-    variant,
-    width = "full",
-    description,
-    errorMessage,
-    className,
-    stateProps,
-    ...rest
-  } = props;
-  const classNames2 = useClassNames16({
-    component: "Field",
-    variant,
-    size
-  });
-  return /* @__PURE__ */ jsxs14(
-    Component,
-    {
-      ref,
-      className: cn18("group/field", twWidth2[width], classNames2, className),
-      "data-required": props.isRequired ? true : void 0,
-      "data-error": props.isInvalid ? true : void 0,
-      ...rest,
-      children: [
-        label ? /* @__PURE__ */ jsx32(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx32("span", { "aria-hidden": "true" }),
-        children,
-        /* @__PURE__ */ jsx32(
-          HelpText2,
-          {
-            variant,
-            size,
-            description,
-            errorMessage,
-            error: props.isInvalid
-          }
-        )
-      ]
-    }
-  );
-};
-var FieldBase2 = fixedForwardRef(_FieldBase);
-
-// src/Checkbox/CheckboxGroup.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { useClassNames as useClassNames14 } from "@marigold/system";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var _CheckboxGroup = ({
   children,
   variant,
@@ -1425,7 +1042,7 @@ var _CheckboxGroup = ({
   error,
   ...rest
 }) => {
-  const classNames2 = useClassNames17({
+  const classNames2 = useClassNames14({
     component: "Checkbox",
     variant,
     size,
@@ -1439,13 +1056,13 @@ var _CheckboxGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx33(FieldBase2, { as: CheckboxGroup, ...props, children });
+  return /* @__PURE__ */ jsx27(FieldBase, { as: CheckboxGroup, ...props, children });
 };
 
 // src/Columns/Columns.tsx
-import { Children as Children3, cloneElement as cloneElement3, isValidElement as isValidElement2 } from "react";
-import { cn as cn19, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { Children as Children3 } from "react";
+import { cn as cn18, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
   columns,
@@ -1461,23 +1078,23 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
-      className: cn19(
+      className: cn18(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
         gapSpace4[space]
       ),
       ...props,
-      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx34(
+      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx28(
         "div",
         {
-          className: cn19(
+          className: cn18(
             "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
           style: createVar6({ collapseAt, columnSize: columns[idx] }),
-          children: isValidElement2(child) ? cloneElement3(child) : child
+          children: child
         }
       ))
     }
@@ -1486,13 +1103,13 @@ var Columns = ({
 
 // src/Container/Container.tsx
 import {
-  cn as cn20,
+  cn as cn19,
   createVar as createVar7,
   gridColsAlign,
   gridColumn,
   placeItems
 } from "@marigold/system";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var content = {
   small: "20ch",
   medium: "45ch",
@@ -1512,11 +1129,11 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       ...props,
-      className: cn20(
+      className: cn19(
         "grid",
         placeItems[alignItems],
         gridColsAlign[align],
@@ -1531,19 +1148,19 @@ var Container = ({
 // src/Dialog/Dialog.tsx
 import { useContext as useContext3 } from "react";
 import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
-import { cn as cn22, useClassNames as useClassNames19 } from "@marigold/system";
+import { cn as cn21, useClassNames as useClassNames16 } from "@marigold/system";
 
 // src/Headline/Headline.tsx
 import { Heading } from "react-aria-components";
 import {
-  cn as cn21,
+  cn as cn20,
   createVar as createVar8,
   get,
   textAlign,
-  useClassNames as useClassNames18,
-  useTheme as useTheme3
+  useClassNames as useClassNames15,
+  useTheme as useTheme2
 } from "@marigold/system";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var _Headline = ({
   variant,
   size,
@@ -1553,18 +1170,18 @@ var _Headline = ({
   level = 1,
   ...props
 }) => {
-  const theme = useTheme3();
-  const classNames2 = useClassNames18({
+  const theme = useTheme2();
+  const classNames2 = useClassNames15({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx30(
     Heading,
     {
       level: Number(level),
       ...props,
-      className: cn21(classNames2, "text-[--color]", textAlign[align]),
+      className: cn20(classNames2, "text-[--color]", textAlign[align]),
       style: createVar8({
         color: color && theme.colors && get(
           theme.colors,
@@ -1579,9 +1196,36 @@ var _Headline = ({
 };
 
 // src/Dialog/DialogTrigger.tsx
-import { Children as Children4 } from "react";
-import { DialogTrigger } from "react-aria-components";
-import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Children as Children4 } from "react";
+import { DialogTrigger } from "react-aria-components";
+
+// src/Overlay/Modal.tsx
+import { forwardRef as forwardRef11 } from "react";
+import { Modal } from "react-aria-components";
+import { useTheme as useTheme3 } from "@marigold/system";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var _Modal = forwardRef11(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
+  const theme = useTheme3();
+  const props = {
+    isOpen: open,
+    isDismissable: dismissable,
+    isKeyboardDismissDisabled: keyboardDismissable,
+    ...rest
+  };
+  return /* @__PURE__ */ jsx31(
+    Underlay,
+    {
+      dismissable,
+      keyboardDismissable,
+      open,
+      variant: "modal",
+      children: /* @__PURE__ */ jsx31(Modal, { ref, "data-theme": theme.name, ...props, children: props.children })
+    }
+  );
+});
+
+// src/Dialog/DialogTrigger.tsx
+import { jsx as jsx32, jsxs as jsxs11 } from "react/jsx-runtime";
 var _DialogTrigger = ({
   open,
   dismissable,
@@ -1598,10 +1242,10 @@ var _DialogTrigger = ({
   const hasDialogTrigger = dialogTrigger.type !== _Dialog;
   const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
   if (isNonModal)
-    return /* @__PURE__ */ jsx37(DialogTrigger, { ...props, children: props.children });
-  return /* @__PURE__ */ jsxs15(DialogTrigger, { ...props, children: [
+    return /* @__PURE__ */ jsx32(DialogTrigger, { ...props, children: props.children });
+  return /* @__PURE__ */ jsxs11(DialogTrigger, { ...props, children: [
     hasDialogTrigger && dialogTrigger,
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx32(
       _Modal,
       {
         dismissable,
@@ -1613,18 +1257,18 @@ var _DialogTrigger = ({
 };
 
 // src/Dialog/Dialog.tsx
-import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
   const { close } = useContext3(OverlayTriggerStateContext);
-  return /* @__PURE__ */ jsx38("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx33("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx33(
     "button",
     {
-      className: cn22(
+      className: cn21(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
       onClick: close,
-      children: /* @__PURE__ */ jsx38("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx33("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx33(
         "path",
         {
           fillRule: "evenodd",
@@ -1635,7 +1279,7 @@ var CloseButton = ({ className }) => {
     }
   ) });
 };
-var DialogHeadline = ({ children }) => /* @__PURE__ */ jsx38(_Headline, { slot: "title", children });
+var DialogHeadline = ({ children }) => /* @__PURE__ */ jsx33(_Headline, { slot: "title", children });
 var _Dialog = ({
   variant,
   size,
@@ -1643,7 +1287,7 @@ var _Dialog = ({
   isNonModal,
   ...props
 }) => {
-  const classNames2 = useClassNames19({ component: "Dialog", variant, size });
+  const classNames2 = useClassNames16({ component: "Dialog", variant, size });
   let state = useContext3(OverlayTriggerStateContext);
   let children = props.children;
   if (typeof children === "function") {
@@ -1652,13 +1296,13 @@ var _Dialog = ({
       })
     });
   }
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx33(
     Dialog,
     {
       ...props,
-      className: cn22("relative outline-none", classNames2.container),
-      children: /* @__PURE__ */ jsxs16(Fragment5, { children: [
-        closeButton && /* @__PURE__ */ jsx38(CloseButton, { className: classNames2.closeButton }),
+      className: cn21("relative outline-none", classNames2.container),
+      children: /* @__PURE__ */ jsxs12(Fragment4, { children: [
+        closeButton && /* @__PURE__ */ jsx33(CloseButton, { className: classNames2.closeButton }),
         children
       ] })
     }
@@ -1669,42 +1313,45 @@ _Dialog.Headline = DialogHeadline;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { useClassNames as useClassNames20 } from "@marigold/system";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { useClassNames as useClassNames17 } from "@marigold/system";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
-  const classNames2 = useClassNames20({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx39(Separator, { className: classNames2, ...props });
+  const classNames2 = useClassNames17({ component: "Divider", variant });
+  return /* @__PURE__ */ jsx34(Separator, { className: classNames2, ...props });
 };
 
 // src/Footer/Footer.tsx
-import { useClassNames as useClassNames21 } from "@marigold/system";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { useClassNames as useClassNames18 } from "@marigold/system";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames21({ component: "Footer", variant, size });
-  return /* @__PURE__ */ jsx40("footer", { ...props, className: classNames2, children });
+  const classNames2 = useClassNames18({ component: "Footer", variant, size });
+  return /* @__PURE__ */ jsx35("footer", { ...props, className: classNames2, children });
 };
 
+// src/Form/Form.tsx
+import { Form } from "react-aria-components";
+
 // src/Header/Header.tsx
 import { Header } from "react-aria-components";
-import { useClassNames as useClassNames22 } from "@marigold/system";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { useClassNames as useClassNames19 } from "@marigold/system";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var _Header = ({ variant, size, ...props }) => {
-  const classNames2 = useClassNames22({
+  const classNames2 = useClassNames19({
     component: "Header",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx41(Header, { className: classNames2, ...props, children: props.children });
+  return /* @__PURE__ */ jsx36(Header, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Image/Image.tsx
 import {
-  cn as cn23,
+  cn as cn22,
   objectFit,
   objectPosition,
-  useClassNames as useClassNames23
+  useClassNames as useClassNames20
 } from "@marigold/system";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var Image = ({
   variant,
   size,
@@ -1712,13 +1359,13 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = useClassNames23({ component: "Image", variant, size });
-  return /* @__PURE__ */ jsx42(
+  const classNames2 = useClassNames20({ component: "Image", variant, size });
+  return /* @__PURE__ */ jsx37(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: cn23(
+      className: cn22(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1731,10 +1378,10 @@ var Image = ({
 // src/Inline/Inline.tsx
 import {
   alignment as alignment2,
-  cn as cn24,
+  cn as cn23,
   gapSpace as gapSpace5
 } from "@marigold/system";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
   orientation,
@@ -1744,11 +1391,11 @@ var Inline = ({
   ...props
 }) => {
   var _a2, _b2, _c, _d;
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       ...props,
-      className: cn24(
+      className: cn23(
         "flex flex-wrap",
         gapSpace5[space],
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
@@ -1760,247 +1407,123 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-import { createCalendar } from "@internationalized/date";
-import { useRef as useRef9 } from "react";
-import { useDateField } from "@react-aria/datepicker";
-import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
-import { useLocale } from "@react-aria/i18n";
-import { useHover as useHover2 } from "@react-aria/interactions";
-import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { useDateFieldState } from "@react-stately/datepicker";
-import { cn as cn26, useClassNames as useClassNames24, useStateProps as useStateProps5 } from "@marigold/system";
+import { forwardRef as forwardRef12 } from "react";
+import { DateField } from "react-aria-components";
+
+// src/DateField/DateInput.tsx
+import { DateInput, Group } from "react-aria-components";
+import { useClassNames as useClassNames21 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
-import { useRef as useRef8 } from "react";
-import { useDateSegment } from "@react-aria/datepicker";
-import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
-import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { cn as cn25, useStateProps as useStateProps4 } from "@marigold/system";
-import { jsx as jsx44, jsxs as jsxs17 } from "react/jsx-runtime";
-var DateSegment = ({
-  className,
-  segment,
-  state,
-  isPrevPlaceholder
-}) => {
-  const ref = useRef8(null);
-  const { segmentProps } = useDateSegment(segment, state, ref);
-  const { focusProps, isFocused } = useFocusRing3({
-    within: true,
-    isTextInput: true
-  });
-  const stateProps = useStateProps4({
-    disabled: state.isDisabled,
-    focusVisible: isFocused
-  });
-  const { isPlaceholder, placeholder, text, type, maxValue } = segment;
-  return /* @__PURE__ */ jsxs17(
-    "div",
+import { DateSegment } from "react-aria-components";
+import { cn as cn24 } from "@marigold/system";
+import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs13 } from "react/jsx-runtime";
+var _DateSegment = ({ segment, ...props }) => {
+  return /* @__PURE__ */ jsx39(
+    DateSegment,
     {
-      ...mergeProps5(segmentProps, stateProps, focusProps),
-      ref,
-      className: cn25(
-        "group/segment",
-        "text-center leading-none outline-0",
-        type !== "literal" && "p-0.5",
-        className
-      ),
+      ...props,
+      segment,
       style: {
-        ...segmentProps.style,
-        minWidth: maxValue != null ? String(maxValue).length + "ch" : void 0
+        minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
-      children: [
-        /* @__PURE__ */ jsx44(
+      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs13(Fragment5, { children: [
+        /* @__PURE__ */ jsx39(
           "span",
           {
             "aria-hidden": "true",
-            className: cn25(
+            className: cn24(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ jsx44("span", { children: isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text })
-      ]
+        /* @__PURE__ */ jsx39("span", { children: isPlaceholder ? "" : (segment.type === "month" || segment.type === "day") && Number(segment.text) < 10 ? "0" + segment.text : text })
+      ] })
     }
   );
 };
 
+// src/DateField/DateInput.tsx
+import { jsx as jsx40, jsxs as jsxs14 } from "react/jsx-runtime";
+var _DateInput = ({ variant, size, action, ...props }) => {
+  const classNames2 = useClassNames21({ component: "DateField", variant, size });
+  return /* @__PURE__ */ jsxs14(Group, { className: classNames2.field, children: [
+    /* @__PURE__ */ jsx40(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx40(_DateSegment, { className: classNames2.segment, segment }) }),
+    action ? action : /* @__PURE__ */ jsx40("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx40(
+      "svg",
+      {
+        "data-testid": "action",
+        className: classNames2.action,
+        viewBox: "0 0 24 24",
+        width: 24,
+        height: 24,
+        children: /* @__PURE__ */ jsx40("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" })
+      }
+    ) })
+  ] });
+};
+
 // src/DateField/DateField.tsx
-import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
-var DateField = ({
-  disabled,
-  readOnly,
-  required,
-  error,
-  errorMessage,
-  errorMessageProps,
-  variant,
-  size,
-  action,
-  isPressed,
-  triggerRef,
-  width,
-  ...res
-}) => {
-  const { locale } = useLocale();
-  const props = {
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    isRequired: required,
-    ...res
-  };
-  const { label, description } = props;
-  const state = useDateFieldState({
-    ...props,
-    locale,
-    createCalendar
-  });
-  const ref = useRef9(null);
-  const { fieldProps, labelProps, descriptionProps } = useDateField(
-    props,
-    state,
-    ref
-  );
-  const classNames2 = useClassNames24({ component: "DateField", variant, size });
-  const { focusProps, isFocused } = useFocusRing4({
-    within: true,
-    isTextInput: true,
-    autoFocus: props.autoFocus
-  });
-  const { hoverProps, isHovered } = useHover2({ isDisabled: disabled });
-  const stateProps = useStateProps5({
-    hover: isHovered,
-    error,
-    readOnly,
+import { jsx as jsx41 } from "react/jsx-runtime";
+var _DateField = forwardRef12(
+  ({
+    variant,
+    size,
+    action,
     disabled,
     required,
-    focus: isFocused || isPressed
-  });
-  return /* @__PURE__ */ jsx45(
-    FieldBase,
-    {
-      error,
-      errorMessage,
-      errorMessageProps,
-      label,
-      labelProps,
-      description,
-      descriptionProps,
-      disabled,
-      stateProps,
-      variant,
-      size,
-      width,
-      children: /* @__PURE__ */ jsxs18(
-        "div",
-        {
-          ...mergeProps6(fieldProps, focusProps, stateProps, hoverProps),
-          className: cn26(
-            "relative flex flex-row flex-nowrap",
-            "cursor-text aria-disabled:cursor-not-allowed",
-            classNames2.field
-          ),
-          "data-testid": "date-field",
-          ref: triggerRef,
-          children: [
-            /* @__PURE__ */ jsx45("div", { ref, className: "flex basis-full items-center", children: state.segments.map((segment, i) => {
-              var _a;
-              return /* @__PURE__ */ jsx45(
-                DateSegment,
-                {
-                  className: classNames2.segment,
-                  isPrevPlaceholder: (_a = state.segments[i - 1]) == null ? void 0 : _a.isPlaceholder,
-                  segment,
-                  state
-                },
-                i
-              );
-            }) }),
-            action ? action : /* @__PURE__ */ jsx45("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx45(
-              "svg",
-              {
-                "data-testid": "action",
-                className: cn26(classNames2.action),
-                viewBox: "0 0 24 24",
-                width: 24,
-                height: 24,
-                children: /* @__PURE__ */ jsx45("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" })
-              }
-            ) })
-          ]
-        }
-      )
-    }
-  );
-};
+    error,
+    readOnly,
+    ...rest
+  }, ref) => {
+    const props = {
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isInvalid: error,
+      isRequired: required,
+      ...rest
+    };
+    return /* @__PURE__ */ jsx41(
+      FieldBase,
+      {
+        as: DateField,
+        variant,
+        size,
+        ref,
+        ...props,
+        children: /* @__PURE__ */ jsx41(_DateInput, { action })
+      }
+    );
+  }
+);
 
 // src/Calendar/Calendar.tsx
-import { createCalendar as createCalendar2 } from "@internationalized/date";
-import { useRef as useRef12, useState } from "react";
-import {
-  useCalendar
-} from "@react-aria/calendar";
-import { useDateFormatter as useDateFormatter3, useLocale as useLocale3 } from "@react-aria/i18n";
-import { useCalendarState } from "@react-stately/calendar";
-import { ChevronDown as ChevronDown2, ChevronLeft, ChevronRight } from "@marigold/icons";
-import { cn as cn28, useClassNames as useClassNames26, useStateProps as useStateProps7 } from "@marigold/system";
+import { useState } from "react";
+import { Calendar } from "react-aria-components";
+import { cn as cn28, useClassNames as useClassNames26 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
-import { getWeeksInMonth, startOfWeek, today } from "@internationalized/date";
-import { useMemo } from "react";
-import { useCalendarGrid } from "@react-aria/calendar";
-import { useLocale as useLocale2 } from "@react-aria/i18n";
-import { useDateFormatter } from "@react-aria/i18n";
-
-// src/Calendar/CalendarCell.tsx
-import { useRef as useRef10 } from "react";
-import { useCalendarCell } from "@react-aria/calendar";
-import { useHover as useHover3 } from "@react-aria/interactions";
-import { mergeProps as mergeProps7 } from "@react-aria/utils";
-import { cn as cn27, useClassNames as useClassNames25, useStateProps as useStateProps6 } from "@marigold/system";
-import { jsx as jsx46 } from "react/jsx-runtime";
-var CalendarCell = (props) => {
-  const ref = useRef10(null);
-  const { state } = props;
-  let { cellProps, buttonProps, formattedDate, isOutsideVisibleRange } = useCalendarCell(props, state, ref);
-  const classNames2 = useClassNames25({
-    component: "Calendar"
-  });
-  const isDisabled = cellProps["aria-disabled"];
-  const { hoverProps, isHovered } = useHover3({
-    isDisabled: isDisabled || cellProps["aria-selected"]
-  });
-  const stateProps = useStateProps6({
-    disabled: isDisabled,
-    hover: isHovered,
-    selected: cellProps["aria-selected"]
-  });
-  return /* @__PURE__ */ jsx46("td", { className: "group/cell", ...cellProps, children: /* @__PURE__ */ jsx46(
-    "div",
-    {
-      className: cn27(
-        "flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
-        classNames2.calendarCell
-      ),
-      hidden: isOutsideVisibleRange,
-      ref,
-      ...mergeProps7(buttonProps, stateProps, hoverProps),
-      children: formattedDate
-    }
-  ) });
-};
+import {
+  CalendarCell,
+  CalendarGrid,
+  CalendarGridBody
+} from "react-aria-components";
+import { cn as cn25, useClassNames as useClassNames23 } from "@marigold/system";
 
-// src/Calendar/CalendarGrid.tsx
-import { jsx as jsx47, jsxs as jsxs19 } from "react/jsx-runtime";
-var CalendarGrid = ({ state, ...props }) => {
-  const { locale } = useLocale2();
-  const { gridProps, headerProps } = useCalendarGrid(props, state);
-  const numberOfWeeksInMonth = getWeeksInMonth(
-    state.visibleRange.start,
-    locale
-  );
+// src/Calendar/CalendarGridHeader.tsx
+import { startOfWeek, today } from "@internationalized/date";
+import { useContext as useContext4, useMemo } from "react";
+import { CalendarStateContext } from "react-aria-components";
+import { useCalendarGrid } from "@react-aria/calendar";
+import { useDateFormatter, useLocale } from "@react-aria/i18n";
+import { useClassNames as useClassNames22 } from "@marigold/system";
+import { jsx as jsx42 } from "react/jsx-runtime";
+function CalendarGridHeader(props) {
+  const state = useContext4(CalendarStateContext);
+  const { headerProps } = useCalendarGrid(props, state);
+  const { locale } = useLocale();
   const dayFormatter = useDateFormatter({
     weekday: "short",
     timeZone: state.timeZone
@@ -2013,50 +1536,143 @@ var CalendarGrid = ({ state, ...props }) => {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  return /* @__PURE__ */ jsxs19(
-    "table",
+  const classNames2 = useClassNames22({ component: "Calendar" });
+  return /* @__PURE__ */ jsx42("thead", { ...headerProps, children: /* @__PURE__ */ jsx42("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx42("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
+}
+
+// src/Calendar/CalendarGrid.tsx
+import { jsx as jsx43, jsxs as jsxs15 } from "react/jsx-runtime";
+var _CalendarGrid = () => {
+  const classNames2 = useClassNames23({ component: "Calendar" });
+  return /* @__PURE__ */ jsxs15(CalendarGrid, { className: classNames2.calendarGrid, children: [
+    /* @__PURE__ */ jsx43(CalendarGridHeader, {}),
+    /* @__PURE__ */ jsx43(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx43(
+      CalendarCell,
+      {
+        date,
+        className: cn25(
+          "flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
+          classNames2.calendarCell
+        )
+      }
+    ) })
+  ] });
+};
+
+// src/Calendar/CalendarListBox.tsx
+import { useContext as useContext5 } from "react";
+import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
+import { ChevronDown as ChevronDown2 } from "@marigold/icons";
+import { cn as cn26, useClassNames as useClassNames24 } from "@marigold/system";
+
+// src/Calendar/useFormattedMonths.tsx
+import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
+function useFormattedMonths(timeZone, focusedDate) {
+  let months = [];
+  let formatter = useDateFormatter2({
+    month: "long",
+    timeZone
+  });
+  let numMonths = focusedDate.calendar.getMonthsInYear(focusedDate);
+  for (let i = 1; i <= numMonths; i++) {
+    let date = focusedDate.set({ month: i });
+    months.push(formatter.format(date.toDate(timeZone)));
+  }
+  return months;
+}
+
+// src/Calendar/CalendarListBox.tsx
+import { jsx as jsx44, jsxs as jsxs16 } from "react/jsx-runtime";
+function CalendarListBox({
+  type,
+  isDisabled,
+  setSelectedDropdown
+}) {
+  const state = useContext5(CalendarStateContext2);
+  const months = useFormattedMonths(state.timeZone, state.focusedDate);
+  const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
+  const { select: selectClassNames } = useClassNames24({ component: "Select" });
+  return /* @__PURE__ */ jsxs16(
+    "button",
     {
-      className: "w-full border-spacing-[6px]",
-      ...gridProps,
-      cellPadding: "8",
+      disabled: isDisabled,
+      onClick: () => setSelectedDropdown(type),
+      className: cn26(buttonStyles, selectClassNames),
+      "data-testid": type,
       children: [
-        /* @__PURE__ */ jsx47("thead", { ...headerProps, children: /* @__PURE__ */ jsx47("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx47("th", { style: { fontWeight: "bolder" }, children: day.substring(0, 2) }, index)) }) }),
-        /* @__PURE__ */ jsx47("tbody", { children: [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx47("tr", { children: state.getDatesInWeek(weekIndex).map(
-          (date, i) => date ? /* @__PURE__ */ jsx47(
-            CalendarCell,
-            {
-              date,
-              state
-            },
-            i
-          ) : /* @__PURE__ */ jsx47("td", {}, i)
-        ) }, weekIndex)) })
+        type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
+        /* @__PURE__ */ jsx44(ChevronDown2, {})
       ]
     }
   );
-};
+}
 
-// src/Calendar/MonthDropdown.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var MonthDropdown = ({
-  state,
-  setSelectedDropdown,
-  months
-}) => {
+// src/Calendar/MonthControls.tsx
+import { Button as Button2 } from "react-aria-components";
+import { ChevronLeft, ChevronRight } from "@marigold/icons";
+import { cn as cn27, useClassNames as useClassNames25 } from "@marigold/system";
+import { jsx as jsx45, jsxs as jsxs17 } from "react/jsx-runtime";
+function MonthControls() {
+  const classNames2 = useClassNames25({ component: "Calendar" });
+  const buttonClassNames = useClassNames25({ component: "Button" });
+  return /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      className: cn27(
+        "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
+        classNames2.calendarControllers
+      ),
+      children: [
+        /* @__PURE__ */ jsx45(
+          Button2,
+          {
+            className: cn27(
+              "inline-flex items-center justify-center gap-[0.5ch]",
+              buttonClassNames
+            ),
+            slot: "previous",
+            children: /* @__PURE__ */ jsx45(ChevronLeft, {})
+          }
+        ),
+        /* @__PURE__ */ jsx45(
+          Button2,
+          {
+            className: cn27(
+              "inline-flex items-center justify-center gap-[0.5ch]",
+              buttonClassNames
+            ),
+            slot: "next",
+            children: /* @__PURE__ */ jsx45(ChevronRight, {})
+          }
+        )
+      ]
+    }
+  );
+}
+var MonthControls_default = MonthControls;
+
+// src/Calendar/MonthListBox.tsx
+import { useContext as useContext6 } from "react";
+import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var MonthListBox = ({ setSelectedDropdown }) => {
+  const state = useContext6(CalendarStateContext3);
+  const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange = (index) => {
     let value = Number(index) + 1;
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx46(
     "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, index) => {
-        return /* @__PURE__ */ jsx48("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx48(
+        return /* @__PURE__ */ jsx46("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx46(
           _Button,
           {
+            slot: "previous",
             variant: index === state.focusedDate.month - 1 ? "secondary" : "text",
             size: "small",
             onPress: () => {
@@ -2071,15 +1687,21 @@ var MonthDropdown = ({
     }
   );
 };
-var MonthDropdown_default = MonthDropdown;
+var MonthListBox_default = MonthListBox;
 
-// src/Calendar/YearDropdown.tsx
-import { useEffect as useEffect2, useRef as useRef11 } from "react";
-import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
-import { jsx as jsx49 } from "react/jsx-runtime";
-var YearDropdown = ({ state, setSelectedDropdown }) => {
+// src/Calendar/YearListBox.tsx
+import {
+  useContext as useContext7,
+  useEffect as useEffect2,
+  useRef as useRef3
+} from "react";
+import { CalendarStateContext as CalendarStateContext4 } from "react-aria-components";
+import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var YearListBox = ({ setSelectedDropdown }) => {
+  const state = useContext7(CalendarStateContext4);
   const years = [];
-  let formatter = useDateFormatter2({
+  let formatter = useDateFormatter3({
     year: "numeric",
     timeZone: state.timeZone
   });
@@ -2090,7 +1712,7 @@ var YearDropdown = ({ state, setSelectedDropdown }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
-  const activeButtonRef = useRef11(null);
+  const activeButtonRef = useRef3(null);
   useEffect2(() => {
     if (activeButtonRef.current) {
       const activeButton = activeButtonRef.current;
@@ -2105,21 +1727,22 @@ var YearDropdown = ({ state, setSelectedDropdown }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx47(
     "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, index) => {
         const isActive = +year.formatted === state.focusedDate.year;
-        return /* @__PURE__ */ jsx49("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx49(
+        return /* @__PURE__ */ jsx47("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx47(
           "div",
           {
             ref: isActive ? activeButtonRef : null,
             style: { height: "100%", width: "100%" },
-            children: /* @__PURE__ */ jsx49(
+            children: /* @__PURE__ */ jsx47(
               _Button,
               {
+                slot: "previous",
                 disabled: state.isDisabled,
                 variant: isActive ? "secondary" : "text",
                 size: "small",
@@ -2138,218 +1761,117 @@ var YearDropdown = ({ state, setSelectedDropdown }) => {
     }
   );
 };
-var YearDropdown_default = YearDropdown;
+var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment6, jsx as jsx50, jsxs as jsxs20 } from "react/jsx-runtime";
-var buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-var Calendar = ({
+import { Fragment as Fragment6, jsx as jsx48, jsxs as jsxs18 } from "react/jsx-runtime";
+var _Calendar = ({
   disabled,
   readOnly,
   size,
   variant,
   ...rest
 }) => {
-  const { locale } = useLocale3();
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
     ...rest
   };
-  const state = useCalendarState({
-    ...props,
-    locale,
-    createCalendar: createCalendar2
-  });
-  const ref = useRef12(null);
-  const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
-    props,
-    state
-  );
-  const {
-    isDisabled: prevIsDisabled,
-    onFocusChange: prevFocusChange,
-    ...prevPropsRest
-  } = prevButtonProps;
-  const {
-    isDisabled: nextIsDisabled,
-    onFocusChange: nextFocusChange,
-    ...nextPropsRest
-  } = nextButtonProps;
-  const calendarState = useStateProps7({
-    disabled: state.isDisabled,
-    focusVisible: state.isFocused
-  });
   const classNames2 = useClassNames26({ component: "Calendar" });
-  const { select: selectClassNames } = useClassNames26({ component: "Select" });
   const [selectedDropdown, setSelectedDropdown] = useState();
-  let months = [];
-  let formatter = useDateFormatter3({
-    month: "long",
-    timeZone: state.timeZone
-  });
-  let numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
-  for (let i = 1; i <= numMonths; i++) {
-    let date = state.focusedDate.set({ month: i });
-    months.push(formatter.format(date.toDate(state.timeZone)));
-  }
-  const selectedValue = {
-    month: months[state.focusedDate.month - 1].substring(0, 3),
-    year: state.focusedDate.year
+  const ViewMap = {
+    month: /* @__PURE__ */ jsx48(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ jsx48(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ jsx50(
-    "div",
+  return /* @__PURE__ */ jsx48(
+    Calendar,
     {
-      tabIndex: -1,
       className: cn28(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4  shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
         classNames2.calendar
       ),
-      ...calendarProps,
-      ...calendarState,
-      ref,
-      children: selectedDropdown ? selectedDropdown === "month" ? /* @__PURE__ */ jsx50(
-        MonthDropdown_default,
-        {
-          setSelectedDropdown,
-          months,
-          state
-        }
-      ) : /* @__PURE__ */ jsx50(
-        YearDropdown_default,
-        {
-          setSelectedDropdown,
-          state
-        }
-      ) : /* @__PURE__ */ jsxs20(Fragment6, { children: [
-        /* @__PURE__ */ jsxs20("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs20("div", { className: "flex w-full gap-4", children: [
-            /* @__PURE__ */ jsxs20(
-              "button",
+      ...props,
+      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+        /* @__PURE__ */ jsxs18("div", { className: "mb-4 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs18("div", { className: "flex w-full gap-4", children: [
+            /* @__PURE__ */ jsx48(
+              CalendarListBox,
               {
-                disabled: state.isDisabled,
-                onClick: () => setSelectedDropdown("month"),
-                className: cn28(buttonStyles, selectClassNames),
-                "data-testid": "month",
-                children: [
-                  selectedValue.month,
-                  /* @__PURE__ */ jsx50(ChevronDown2, {})
-                ]
+                type: "month",
+                isDisabled: props.isDisabled,
+                setSelectedDropdown
               }
             ),
-            /* @__PURE__ */ jsxs20(
-              "button",
+            /* @__PURE__ */ jsx48(
+              CalendarListBox,
               {
-                disabled: state.isDisabled,
-                onClick: () => setSelectedDropdown("year"),
-                className: cn28(buttonStyles, selectClassNames),
-                "data-testid": "year",
-                children: [
-                  selectedValue.year,
-                  /* @__PURE__ */ jsx50(ChevronDown2, {})
-                ]
+                type: "year",
+                isDisabled: props.isDisabled,
+                setSelectedDropdown
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs20(
-            "div",
-            {
-              className: cn28(
-                "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
-                classNames2.calendarControllers
-              ),
-              children: [
-                /* @__PURE__ */ jsx50(_Button, { ...prevPropsRest, disabled: prevIsDisabled, children: /* @__PURE__ */ jsx50(ChevronLeft, {}) }),
-                /* @__PURE__ */ jsx50(_Button, { ...nextPropsRest, disabled: nextIsDisabled, children: /* @__PURE__ */ jsx50(ChevronRight, {}) })
-              ]
-            }
-          )
+          /* @__PURE__ */ jsx48(MonthControls_default, {})
         ] }),
-        /* @__PURE__ */ jsx50(CalendarGrid, { state })
+        /* @__PURE__ */ jsx48(_CalendarGrid, {})
       ] })
     }
   );
 };
 
 // src/DatePicker/DatePicker.tsx
-import { useRef as useRef13 } from "react";
-import { useDatePicker } from "@react-aria/datepicker";
-import { mergeProps as mergeProps8 } from "@react-aria/utils";
-import { useDatePickerState } from "@react-stately/datepicker";
-import { useClassNames as useClassNames27, useStateProps as useStateProps8 } from "@marigold/system";
-import { Fragment as Fragment7, jsx as jsx51, jsxs as jsxs21 } from "react/jsx-runtime";
-var DatePicker = ({
+import { DatePicker } from "react-aria-components";
+import { useClassNames as useClassNames27 } from "@marigold/system";
+import { jsx as jsx49, jsxs as jsxs19 } from "react/jsx-runtime";
+var _DatePicker = ({
   disabled,
   required,
-  readonly,
-  open,
+  readOnly,
   error,
-  shouldCloseOnSelect,
   variant,
   size,
-  width,
+  open,
   ...rest
 }) => {
   const props = {
     isDisabled: disabled,
-    isReadOnly: readonly,
+    isReadOnly: readOnly,
     isRequired: required,
+    isInvalid: error,
     isOpen: open,
     ...rest
   };
-  const state = useDatePickerState({
-    shouldCloseOnSelect,
-    ...props
-  });
-  const ref = useRef13(null);
-  const stateProps = useStateProps8({
-    focus: state.isOpen
-  });
-  const { groupProps, fieldProps, buttonProps, calendarProps } = useDatePicker(
-    props,
-    state,
-    ref
-  );
-  const { isDisabled, errorMessage, description, label } = props;
   const classNames2 = useClassNames27({
     component: "DatePicker",
     size,
     variant
   });
-  return /* @__PURE__ */ jsxs21(Fragment7, { children: [
-    /* @__PURE__ */ jsx51("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ jsx51(
-      DateField,
+  return /* @__PURE__ */ jsxs19(FieldBase, { as: DatePicker, variant, size, ...props, children: [
+    /* @__PURE__ */ jsx49(
+      _DateInput,
       {
-        ...fieldProps,
-        label,
-        isPressed: state.isOpen,
-        disabled,
-        required,
-        errorMessage,
-        error,
-        description: !state.isOpen && description,
-        triggerRef: ref,
-        width,
-        action: /* @__PURE__ */ jsx51("div", { className: classNames2.container, children: /* @__PURE__ */ jsx51(
+        action: /* @__PURE__ */ jsx49("div", { className: classNames2.container, children: /* @__PURE__ */ jsx49(
           _Button,
           {
-            ...mergeProps8(buttonProps, stateProps),
-            disabled: isDisabled,
-            children: /* @__PURE__ */ jsx51(
+            size: "small",
+            disabled,
+            className: classNames2.button,
+            children: /* @__PURE__ */ jsx49(
               "svg",
               {
-                width: "24",
-                height: "24",
+                "data-testid": "action",
                 viewBox: "0 0 24 24",
+                width: 24,
+                height: 24,
                 fill: "currentColor",
-                children: /* @__PURE__ */ jsx51("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__ */ jsx49("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" })
               }
             )
           }
         ) })
       }
-    ) }),
-    state.isOpen && /* @__PURE__ */ jsx51(Popover, { triggerRef: ref, state, children: /* @__PURE__ */ jsx51(Calendar, { disabled, ...calendarProps }) })
+    ),
+    /* @__PURE__ */ jsx49(_Popover, { children: /* @__PURE__ */ jsx49(_Calendar, { disabled }) })
   ] });
 };
 
@@ -2360,8 +1882,8 @@ import {
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
-import { jsx as jsx52 } from "react/jsx-runtime";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
+import { jsx as jsx50 } from "react/jsx-runtime";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx50(
   "div",
   {
     className: cn29(
@@ -2374,18 +1896,18 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
 );
 
 // src/Link/Link.tsx
-import { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef13 } from "react";
 import { Link } from "react-aria-components";
 import { useClassNames as useClassNames28 } from "@marigold/system";
-import { jsx as jsx53 } from "react/jsx-runtime";
-var _Link = forwardRef11(
+import { jsx as jsx51 } from "react/jsx-runtime";
+var _Link = forwardRef13(
   ({ variant, size, disabled, children, ...props }, ref) => {
     const classNames2 = useClassNames28({
       component: "Link",
       variant,
       size
     });
-    return /* @__PURE__ */ jsx53(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ jsx51(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
@@ -2393,19 +1915,19 @@ var _Link = forwardRef11(
 import { useClassNames as useClassNames29 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext3, useContext as useContext4 } from "react";
+import { createContext as createContext3, useContext as useContext8 } from "react";
 var ListContext = createContext3({});
-var useListContext = () => useContext4(ListContext);
+var useListContext = () => useContext8(ListContext);
 
 // src/List/ListItem.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ jsx54("li", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx52("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -2415,207 +1937,78 @@ var List = ({
 }) => {
   const Component = as;
   const classNames2 = useClassNames29({ component: "List", variant, size });
-  return /* @__PURE__ */ jsx55(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx55(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
+  return /* @__PURE__ */ jsx53(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx53(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import { useRef as useRef16 } from "react";
-import { useMenu } from "@react-aria/menu";
-import { useSyncRef } from "@react-aria/utils";
-import { Item as Item4, Section } from "@react-stately/collections";
-import { useTreeState as useTreeState2 } from "@react-stately/tree";
-import { useClassNames as useClassNames31 } from "@marigold/system";
-
-// src/Menu/Context.ts
-import {
-  createContext as createContext4,
-  useContext as useContext5
-} from "react";
-var MenuContext = createContext4({});
-var useMenuContext = () => useContext5(MenuContext);
+import { Menu, MenuTrigger } from "react-aria-components";
+import { useClassNames as useClassNames32 } from "@marigold/system";
 
 // src/Menu/MenuItem.tsx
-import { useRef as useRef14 } from "react";
-import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
-import { useMenuItem } from "@react-aria/menu";
-import { mergeProps as mergeProps9 } from "@react-aria/utils";
-import { useStateProps as useStateProps9 } from "@marigold/system";
-import { jsx as jsx56 } from "react/jsx-runtime";
-var MenuItem = ({
-  item,
-  state,
-  onAction,
-  className
-}) => {
-  const ref = useRef14(null);
-  const { onClose } = useMenuContext();
-  const { menuItemProps } = useMenuItem(
-    {
-      key: item.key,
-      onAction,
-      onClose
-    },
-    state,
-    ref
-  );
-  const { isFocusVisible, focusProps } = useFocusRing5();
-  const stateProps = useStateProps9({
-    focus: isFocusVisible
-  });
-  const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ jsx56(
-    "li",
-    {
-      ref,
-      className,
-      ...mergeProps9(
-        props,
-        { onPointerDown: onPointerUp },
-        stateProps,
-        focusProps
-      ),
-      children: item.props.children
-    }
-  );
+import { MenuItem } from "react-aria-components";
+import { useClassNames as useClassNames30 } from "@marigold/system";
+import { jsx as jsx54 } from "react/jsx-runtime";
+var _MenuItem = ({ children, ...props }) => {
+  const classNames2 = useClassNames30({ component: "Menu" });
+  return /* @__PURE__ */ jsx54(MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
-import { useMenuSection } from "@react-aria/menu";
-import { useClassNames as useClassNames30 } from "@marigold/system";
-import { Fragment as Fragment8, jsx as jsx57, jsxs as jsxs22 } from "react/jsx-runtime";
-var MenuSection = ({ onAction, item, state }) => {
-  let { itemProps, headingProps, groupProps } = useMenuSection({
-    heading: item.rendered,
-    "aria-label": item["aria-label"]
-  });
-  const className = useClassNames30({ component: "Menu" });
-  return /* @__PURE__ */ jsxs22(Fragment8, { children: [
-    item.key !== state.collection.getFirstKey() && /* @__PURE__ */ jsx57("li", { children: /* @__PURE__ */ jsx57(_Divider, { variant: "section" }) }),
-    /* @__PURE__ */ jsxs22("li", { ...itemProps, children: [
-      item.rendered && /* @__PURE__ */ jsx57("span", { ...headingProps, className: className.section, children: item.rendered }),
-      /* @__PURE__ */ jsx57("ul", { ...groupProps, className: "pb-1", children: [...item.props.children].map((node) => /* @__PURE__ */ jsx57(
-        MenuItem,
-        {
-          item: node,
-          state,
-          onAction,
-          className: className.item
-        },
-        node.key
-      )) })
-    ] })
+import { Section as Section2 } from "react-aria-components";
+import { useClassNames as useClassNames31 } from "@marigold/system";
+import { jsx as jsx55, jsxs as jsxs20 } from "react/jsx-runtime";
+var _MenuSection = ({ children, title, ...props }) => {
+  const className = useClassNames31({ component: "Menu" });
+  return /* @__PURE__ */ jsxs20(Section2, { ...props, children: [
+    /* @__PURE__ */ jsx55(_Header, { className: className.section, children: title }),
+    children
   ] });
 };
-var MenuSection_default = MenuSection;
 
-// src/Menu/MenuTrigger.tsx
-import { Children as Children5, useRef as useRef15 } from "react";
-import { PressResponder } from "@react-aria/interactions";
-import { useMenuTrigger } from "@react-aria/menu";
-import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
-import { useMenuTriggerState } from "@react-stately/menu";
-import { useSmallScreen } from "@marigold/system";
-import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
-var MenuTrigger = ({
+// src/Menu/Menu.tsx
+import { jsx as jsx56, jsxs as jsxs21 } from "react/jsx-runtime";
+var _Menu = ({
+  children,
+  label,
+  variant,
+  size,
   disabled,
   open,
-  onOpenChange,
-  children
+  ...props
 }) => {
-  const [menuTrigger, menu] = Children5.toArray(children);
-  const menuTriggerRef = useRef15(null);
-  const menuRef = useObjectRef3();
-  const state = useMenuTriggerState({
-    isOpen: open,
-    onOpenChange
-  });
-  const { menuTriggerProps, menuProps } = useMenuTrigger(
-    { trigger: "press", isDisabled: disabled },
-    state,
-    menuTriggerRef
-  );
-  const menuContext = {
-    ...menuProps,
-    ref: menuRef,
-    open: state.isOpen,
-    onClose: state.close,
-    autoFocus: state.focusStrategy
-  };
-  const isSmallScreen = useSmallScreen();
-  return /* @__PURE__ */ jsxs23(MenuContext.Provider, { value: menuContext, children: [
-    /* @__PURE__ */ jsx58(
-      PressResponder,
-      {
-        ...menuTriggerProps,
-        ref: menuTriggerRef,
-        isPressed: state.isOpen,
-        children: menuTrigger
-      }
-    ),
-    isSmallScreen ? /* @__PURE__ */ jsx58(Tray, { state, children: menu }) : /* @__PURE__ */ jsx58(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state, children: menu })
+  const classNames2 = useClassNames32({ component: "Menu", variant, size });
+  return /* @__PURE__ */ jsxs21(MenuTrigger, { ...props, children: [
+    /* @__PURE__ */ jsx56(_Button, { variant: "menu", disabled, children: label }),
+    /* @__PURE__ */ jsx56(_Popover, { open, children: /* @__PURE__ */ jsx56(Menu, { ...props, className: classNames2.container, children }) })
   ] });
 };
-
-// src/Menu/Menu.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
-var Menu = ({ variant, size, ...props }) => {
-  const { ref: scrollRef, ...menuContext } = useMenuContext();
-  const ownProps = { ...props, ...menuContext };
-  const ref = useRef16(null);
-  const state = useTreeState2({ ...ownProps, selectionMode: "none" });
-  const { menuProps } = useMenu(ownProps, state, ref);
-  useSyncRef({ ref: scrollRef }, ref);
-  const classNames2 = useClassNames31({ component: "Menu", variant, size });
-  return /* @__PURE__ */ jsx59("ul", { ref, className: classNames2.container, ...menuProps, children: [...state.collection].map((item) => {
-    if (item.type === "section") {
-      return /* @__PURE__ */ jsx59(
-        MenuSection_default,
-        {
-          item,
-          state,
-          onAction: props.onAction
-        },
-        item.key
-      );
-    }
-    return /* @__PURE__ */ jsx59(
-      MenuItem,
-      {
-        item,
-        state,
-        onAction: props.onAction,
-        className: classNames2.item
-      },
-      item.key
-    );
-  }) });
-};
-Menu.Trigger = MenuTrigger;
-Menu.Item = Item4;
-Menu.Section = Section;
+_Menu.Item = _MenuItem;
+_Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
-import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx60, jsxs as jsxs24 } from "react/jsx-runtime";
-var ActionMenu = (props) => {
-  return /* @__PURE__ */ jsxs24(Menu.Trigger, { children: [
-    /* @__PURE__ */ jsx60(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ jsx60(SVG5, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx60("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__ */ jsx60(Menu, { ...props })
+import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
+import { SVG as SVG4, useClassNames as useClassNames33 } from "@marigold/system";
+import { jsx as jsx57, jsxs as jsxs22 } from "react/jsx-runtime";
+var ActionMenu = ({ variant, size, ...props }) => {
+  const classNames2 = useClassNames33({ component: "Menu", variant, size });
+  return /* @__PURE__ */ jsxs22(MenuTrigger2, { children: [
+    /* @__PURE__ */ jsx57(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ jsx57(SVG4, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx57("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__ */ jsx57(_Popover, { children: /* @__PURE__ */ jsx57(Menu2, { ...props, className: classNames2.container, children: props.children }) })
   ] });
 };
 
 // src/Message/Message.tsx
-import { cn as cn30, useClassNames as useClassNames32 } from "@marigold/system";
-import { jsx as jsx61, jsxs as jsxs25 } from "react/jsx-runtime";
+import { cn as cn30, useClassNames as useClassNames34 } from "@marigold/system";
+import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
 var icons = {
-  success: () => /* @__PURE__ */ jsx61(
+  success: () => /* @__PURE__ */ jsx58(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx61(
+      children: /* @__PURE__ */ jsx58(
         "path",
         {
           fillRule: "evenodd",
@@ -2625,13 +2018,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ jsx61(
+  info: () => /* @__PURE__ */ jsx58(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx61(
+      children: /* @__PURE__ */ jsx58(
         "path",
         {
           fillRule: "evenodd",
@@ -2641,13 +2034,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx61(
+  warning: () => /* @__PURE__ */ jsx58(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx61(
+      children: /* @__PURE__ */ jsx58(
         "path",
         {
           fillRule: "evenodd",
@@ -2657,13 +2050,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx61(
+  error: () => /* @__PURE__ */ jsx58(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx61(
+      children: /* @__PURE__ */ jsx58(
         "path",
         {
           fillRule: "evenodd",
@@ -2681,9 +2074,9 @@ var Message = ({
   children,
   ...props
 }) => {
-  const classNames2 = useClassNames32({ component: "Message", variant, size });
+  const classNames2 = useClassNames34({ component: "Message", variant, size });
   const Icon3 = icons[variant];
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs23(
     "div",
     {
       className: cn30(
@@ -2692,89 +2085,30 @@ var Message = ({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx61("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx61(Icon3, {}) }),
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx58("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx58(Icon3, {}) }),
+        /* @__PURE__ */ jsx58(
           "div",
           {
             className: cn30("col-start-2 row-start-1 self-center", classNames2.title),
             children: messageTitle
           }
         ),
-        /* @__PURE__ */ jsx61("div", { className: cn30("col-start-2", classNames2.content), children })
+        /* @__PURE__ */ jsx58("div", { className: cn30("col-start-2", classNames2.content), children })
       ]
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { forwardRef as forwardRef13 } from "react";
-import { Group, NumberField } from "react-aria-components";
-import { cn as cn33, useClassNames as useClassNames34 } from "@marigold/system";
-
-// src/Input/_Input.tsx
-import { cloneElement as cloneElement4, forwardRef as forwardRef12 } from "react";
-import { Input as Input2 } from "react-aria-components";
-import { cn as cn31, useClassNames as useClassNames33 } from "@marigold/system";
-import { jsx as jsx62, jsxs as jsxs26 } from "react/jsx-runtime";
-var _Input = forwardRef12(
-  ({ type, icon, action, variant, size, className, ...props }, ref) => {
-    const classNames2 = useClassNames33({
-      component: "Input",
-      variant,
-      size
-    });
-    const inputIcon = icon ? cloneElement4(icon, {
-      className: cn31(
-        "pointer-events-none absolute",
-        classNames2.icon,
-        icon.props.className
-      ),
-      ...icon.props
-    }) : null;
-    const inputAction = action && !props.readOnly ? cloneElement4(action, {
-      className: cn31(
-        "absolute",
-        classNames2.action,
-        action.props.className
-      ),
-      ...action.props
-    }) : null;
-    return /* @__PURE__ */ jsxs26(
-      "div",
-      {
-        className: "group/input relative flex items-center",
-        "data-icon": icon && "",
-        "data-action": action && "",
-        children: [
-          inputIcon,
-          /* @__PURE__ */ jsx62(
-            Input2,
-            {
-              ...props,
-              className: cn31(
-                "w-full flex-1",
-                "disabled:cursor-not-allowed",
-                "[&[type=file]]:border-none [&[type=file]]:p-0",
-                "[&[type=color]]:ml-0 [&[type=color]]:border-none [&[type=color]]:bg-transparent [&[type=color]]:p-0",
-                classNames2.input,
-                className
-              ),
-              ref,
-              type
-            }
-          ),
-          inputAction
-        ]
-      }
-    );
-  }
-);
+import { forwardRef as forwardRef14 } from "react";
+import { Group as Group2, NumberField } from "react-aria-components";
+import { cn as cn32, useClassNames as useClassNames35 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import { Button as Button2 } from "react-aria-components";
-import { cn as cn32 } from "@marigold/system";
-import { jsx as jsx63 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx63("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx63(
+import { Button as Button3 } from "react-aria-components";
+import { cn as cn31 } from "@marigold/system";
+import { jsx as jsx59 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx59("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx59(
   "path",
   {
     fillRule: "evenodd",
@@ -2782,7 +2116,7 @@ var Plus = () => /* @__PURE__ */ jsx63("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__ */ jsx63("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx63(
+var Minus = () => /* @__PURE__ */ jsx59("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx59(
   "path",
   {
     fillRule: "evenodd",
@@ -2792,10 +2126,10 @@ var Minus = () => /* @__PURE__ */ jsx63("svg", { width: 16, height: 16, viewBox:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx63(
-    Button2,
+  return /* @__PURE__ */ jsx59(
+    Button3,
     {
-      className: cn32(
+      className: cn31(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2803,14 +2137,14 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx63(Icon3, {})
+      children: /* @__PURE__ */ jsx59(Icon3, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx64, jsxs as jsxs27 } from "react/jsx-runtime";
-var _NumberField = forwardRef13(
+import { jsx as jsx60, jsxs as jsxs24 } from "react/jsx-runtime";
+var _NumberField = forwardRef14(
   ({
     variant,
     size,
@@ -2821,7 +2155,7 @@ var _NumberField = forwardRef13(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames34({
+    const classNames2 = useClassNames35({
       component: "NumberField",
       size,
       variant
@@ -2834,8 +2168,8 @@ var _NumberField = forwardRef13(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx64(FieldBase2, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group, { className: cn33("flex items-stretch", classNames2.group), children: [
-      showStepper && /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx60(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs24(Group2, { className: cn32("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ jsx60(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2843,7 +2177,7 @@ var _NumberField = forwardRef13(
           slot: "decrement"
         }
       ),
-      /* @__PURE__ */ jsx64("div", { className: "flex-1", children: /* @__PURE__ */ jsx64(
+      /* @__PURE__ */ jsx60("div", { className: "flex-1", children: /* @__PURE__ */ jsx60(
         _Input,
         {
           ref,
@@ -2852,7 +2186,7 @@ var _NumberField = forwardRef13(
           className: classNames2.input
         }
       ) }),
-      showStepper && /* @__PURE__ */ jsx64(
+      showStepper && /* @__PURE__ */ jsx60(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2874,34 +2208,34 @@ import {
   defaultTheme,
   useTheme as useTheme4
 } from "@marigold/system";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 function MarigoldProvider({
   children,
   theme
 }) {
   const outerTheme = useTheme4();
   const isTopLevel = outerTheme === defaultTheme;
-  return /* @__PURE__ */ jsx65(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx65(OverlayProvider, { children }) : children });
+  return /* @__PURE__ */ jsx61(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx61(OverlayProvider, { children }) : children });
 }
 
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef14
+  forwardRef as forwardRef15
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn35, useClassNames as useClassNames36 } from "@marigold/system";
+import { cn as cn34, useClassNames as useClassNames37 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext5, useContext as useContext6 } from "react";
-var RadioGroupContext = createContext5(
+import { createContext as createContext4, useContext as useContext9 } from "react";
+var RadioGroupContext = createContext4(
   null
 );
-var useRadioGroupContext = () => useContext6(RadioGroupContext);
+var useRadioGroupContext = () => useContext9(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn34, useClassNames as useClassNames35 } from "@marigold/system";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { cn as cn33, useClassNames as useClassNames36 } from "@marigold/system";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
   size,
@@ -2917,7 +2251,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = useClassNames35({ component: "Radio", variant, size });
+  const classNames2 = useClassNames36({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2925,8 +2259,8 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx66(
-    FieldBase2,
+  return /* @__PURE__ */ jsx62(
+    FieldBase,
     {
       as: RadioGroup,
       width,
@@ -2936,18 +2270,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ jsx66(
+      children: /* @__PURE__ */ jsx62(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn34(
+          className: cn33(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx66(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ jsx62(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -2955,33 +2289,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment9, jsx as jsx67, jsxs as jsxs28 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx67("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx67("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx67(
+import { Fragment as Fragment7, jsx as jsx63, jsxs as jsxs25 } from "react/jsx-runtime";
+var Dot = () => /* @__PURE__ */ jsx63("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx63("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx63(
   "div",
   {
-    className: cn35(
+    className: cn34(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ jsx67(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx63(Dot, {}) : null
   }
 );
-var _Radio = forwardRef14(
+var _Radio = forwardRef15(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = useClassNames36({
+    const classNames2 = useClassNames37({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsx63(
       Radio,
       {
         ref,
-        className: cn35(
+        className: cn34(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -2990,18 +2324,18 @@ var _Radio = forwardRef14(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs28(Fragment9, { children: [
-          /* @__PURE__ */ jsx67(
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs25(Fragment7, { children: [
+          /* @__PURE__ */ jsx63(
             Icon2,
             {
               checked: isSelected,
-              className: cn35(
+              className: cn34(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ jsx67("div", { className: classNames2.label, children })
+          /* @__PURE__ */ jsx63("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -3010,10 +2344,10 @@ var _Radio = forwardRef14(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 import { SearchField } from "react-aria-components";
-import { jsx as jsx68 } from "react/jsx-runtime";
-var SearchIcon2 = (props) => /* @__PURE__ */ jsx68(
+import { jsx as jsx64 } from "react/jsx-runtime";
+var SearchIcon2 = (props) => /* @__PURE__ */ jsx64(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3022,10 +2356,10 @@ var SearchIcon2 = (props) => /* @__PURE__ */ jsx68(
     width: 24,
     height: 24,
     ...props,
-    children: /* @__PURE__ */ jsx68("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+    children: /* @__PURE__ */ jsx64("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
   }
 );
-var _SearchField = forwardRef15(
+var _SearchField = forwardRef16(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -3034,159 +2368,64 @@ var _SearchField = forwardRef15(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ jsx68(FieldBase2, { as: SearchField, ...props, children: /* @__PURE__ */ jsx68(_Input, { ref, icon: /* @__PURE__ */ jsx68(SearchIcon2, {}) }) });
+    return /* @__PURE__ */ jsx64(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx64(_Input, { ref, icon: /* @__PURE__ */ jsx64(SearchIcon2, {}) }) });
   }
 );
 
 // src/Select/Select.tsx
+import { forwardRef as forwardRef17 } from "react";
 import {
-  forwardRef as forwardRef16,
-  useRef as useRef17
-} from "react";
-import { useButton as useButton3 } from "@react-aria/button";
-import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
-import { useLocalizedStringFormatter } from "@react-aria/i18n";
-import { HiddenSelect, useSelect } from "@react-aria/select";
-import { mergeProps as mergeProps10, useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import { Item as Item5, Section as Section2 } from "@react-stately/collections";
-import { useSelectState } from "@react-stately/select";
-import {
-  cn as cn36,
-  useClassNames as useClassNames37,
-  useSmallScreen as useSmallScreen2,
-  useStateProps as useStateProps10
-} from "@marigold/system";
-
-// src/Select/intl.ts
-var messages = {
-  "en-US": {
-    placeholder: "Select an option\u2026"
-  },
-  "de-DE": {
-    placeholder: "Option ausw\xE4hlen\u2026"
-  }
-};
-
-// src/Select/Select.tsx
-import { jsx as jsx69, jsxs as jsxs29 } from "react/jsx-runtime";
-var Select = forwardRef16(
+  Button as Button4,
+  Select,
+  SelectValue
+} from "react-aria-components";
+import { cn as cn35, useClassNames as useClassNames38 } from "@marigold/system";
+import { jsx as jsx65, jsxs as jsxs26 } from "react/jsx-runtime";
+var _Select = forwardRef17(
   ({
-    variant,
-    size,
     width,
-    open,
     disabled,
     required,
+    items,
+    variant,
+    size,
     error,
+    open,
     onChange,
     ...rest
   }, ref) => {
-    const formatMessage = useLocalizedStringFormatter(messages);
     const props = {
-      isOpen: open,
       isDisabled: disabled,
+      isInvalid: error,
+      isOpen: open,
       isRequired: required,
-      validationState: error ? "invalid" : "valid",
-      placeholder: rest.placeholder || formatMessage.format("placeholder"),
       onSelectionChange: onChange,
       ...rest
     };
-    const buttonRef = useObjectRef4(ref);
-    const listboxRef = useRef17(null);
-    const state = useSelectState(props);
-    const {
-      labelProps,
-      triggerProps,
-      valueProps,
-      menuProps,
-      descriptionProps,
-      errorMessageProps
-    } = useSelect(props, state, buttonRef);
-    const { buttonProps } = useButton3(
-      { isDisabled: disabled, ...triggerProps },
-      buttonRef
-    );
-    const { focusProps, isFocusVisible } = useFocusRing6();
-    const classNames2 = useClassNames37({ component: "Select", variant, size });
-    const isSmallScreen = useSmallScreen2();
-    const stateProps = useStateProps10({
-      disabled,
-      error,
-      focusVisible: isFocusVisible,
-      expanded: state.isOpen,
-      required
-    });
-    return /* @__PURE__ */ jsxs29(
-      FieldBase,
-      {
-        variant,
-        size,
-        width,
-        label: props.label,
-        labelProps: { elementType: "span", ...labelProps },
-        description: props.description,
-        descriptionProps,
-        error,
-        errorMessage: props.errorMessage,
-        errorMessageProps,
-        stateProps,
-        disabled,
-        children: [
-          /* @__PURE__ */ jsx69(
-            HiddenSelect,
-            {
-              state,
-              triggerRef: buttonRef,
-              label: props.label,
-              name: props.name,
-              isDisabled: disabled
-            }
-          ),
-          /* @__PURE__ */ jsxs29(
-            "button",
-            {
-              className: cn36(
-                "flex w-full items-center justify-between gap-1 overflow-hidden",
-                classNames2.select
-              ),
-              ref: buttonRef,
-              ...mergeProps10(buttonProps, focusProps),
-              ...stateProps,
-              children: [
-                /* @__PURE__ */ jsx69("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
-                /* @__PURE__ */ jsx69(ChevronDown, { className: "h-4 w-4" })
-              ]
-            }
+    const classNames2 = useClassNames38({ component: "Select", variant, size });
+    return /* @__PURE__ */ jsxs26(FieldBase, { isOpen: true, as: Select, ref, ...props, children: [
+      /* @__PURE__ */ jsxs26(
+        Button4,
+        {
+          className: cn35(
+            "flex w-full items-center justify-between gap-1 overflow-hidden",
+            classNames2.select
           ),
-          isSmallScreen ? /* @__PURE__ */ jsx69(Tray, { state, children: /* @__PURE__ */ jsx69(
-            ListBox,
-            {
-              ref: listboxRef,
-              state,
-              variant,
-              size,
-              ...menuProps
-            }
-          ) }) : /* @__PURE__ */ jsx69(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ jsx69(
-            ListBox,
-            {
-              ref: listboxRef,
-              state,
-              variant,
-              size,
-              ...menuProps
-            }
-          ) })
-        ]
-      }
-    );
+          children: [
+            /* @__PURE__ */ jsx65(SelectValue, {}),
+            /* @__PURE__ */ jsx65(ChevronDown, { className: "h-4 w-4" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx65(_Popover, { children: /* @__PURE__ */ jsx65(_ListBox, { items, children: props.children }) })
+    ] });
   }
 );
-Select.Option = Item5;
-Select.Section = Section2;
+_Select.Option = _ListBox.Item;
+_Select.Section = _ListBox.Section;
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef17 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -3194,12 +2433,12 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn37,
-  width as twWidth3,
-  useClassNames as useClassNames38
+  cn as cn36,
+  width as twWidth2,
+  useClassNames as useClassNames39
 } from "@marigold/system";
-import { jsx as jsx70, jsxs as jsxs30 } from "react/jsx-runtime";
-var _Slider = forwardRef17(
+import { jsx as jsx66, jsxs as jsxs27 } from "react/jsx-runtime";
+var _Slider = forwardRef18(
   ({
     thumbLabels,
     variant,
@@ -3208,7 +2447,7 @@ var _Slider = forwardRef17(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames38({
+    const classNames2 = useClassNames39({
       component: "Slider",
       variant,
       size
@@ -3217,27 +2456,27 @@ var _Slider = forwardRef17(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ jsxs30(
+    return /* @__PURE__ */ jsxs27(
       Slider,
       {
-        className: cn37(
+        className: cn36(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
-          twWidth3[width]
+          twWidth2[width]
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx70(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx70(SliderOutput, { className: cn37("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx70(
+          /* @__PURE__ */ jsx66(_Label, { children: props.children }),
+          /* @__PURE__ */ jsx66(SliderOutput, { className: cn36("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx66(
             SliderTrack,
             {
-              className: cn37("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx70(
+              className: cn36("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx66(
                 SliderThumb,
                 {
-                  className: cn37("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn36("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -3252,16 +2491,16 @@ var _Slider = forwardRef17(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
-var Split = (props) => /* @__PURE__ */ jsx71("div", { ...props, role: "separator", className: "grow" });
+import { jsx as jsx67 } from "react/jsx-runtime";
+var Split = (props) => /* @__PURE__ */ jsx67("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn38,
+  cn as cn37,
   gapSpace as gapSpace6
 } from "@marigold/system";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -3272,10 +2511,10 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx68(
     "div",
     {
-      className: cn38(
+      className: cn37(
         "flex flex-col",
         gapSpace6[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -3289,15 +2528,15 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn39,
-  width as twWidth4,
-  useClassNames as useClassNames39
+  cn as cn38,
+  width as twWidth3,
+  useClassNames as useClassNames40
 } from "@marigold/system";
-import { jsx as jsx73, jsxs as jsxs31 } from "react/jsx-runtime";
-var _Switch = forwardRef18(
+import { jsx as jsx69, jsxs as jsxs28 } from "react/jsx-runtime";
+var _Switch = forwardRef19(
   ({
     variant,
     size,
@@ -3308,37 +2547,37 @@ var _Switch = forwardRef18(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames39({ component: "Switch", size, variant });
+    const classNames2 = useClassNames40({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ jsxs31(
+    return /* @__PURE__ */ jsxs28(
       Switch,
       {
         ...props,
         ref,
-        className: cn39(
-          twWidth4[width],
+        className: cn38(
+          twWidth3[width],
           "group/switch",
           "flex items-center justify-between gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ jsx73(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ jsx73("div", { className: "relative", children: /* @__PURE__ */ jsx73(
+          /* @__PURE__ */ jsx69(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ jsx69("div", { className: "relative", children: /* @__PURE__ */ jsx69(
             "div",
             {
-              className: cn39(
+              className: cn38(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ jsx73(
+              children: /* @__PURE__ */ jsx69(
                 "div",
                 {
-                  className: cn39(
+                  className: cn38(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -3357,7 +2596,7 @@ var _Switch = forwardRef18(
 );
 
 // src/Table/Table.tsx
-import { useRef as useRef24 } from "react";
+import { useRef as useRef10 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   TableBody as Body2,
@@ -3367,30 +2606,30 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn44, useClassNames as useClassNames41 } from "@marigold/system";
+import { cn as cn43, useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext6, useContext as useContext7 } from "react";
-var TableContext = createContext6({});
-var useTableContext = () => useContext7(TableContext);
+import { createContext as createContext5, useContext as useContext10 } from "react";
+var TableContext = createContext5({});
+var useTableContext = () => useContext10(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ jsx74("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx70("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
-import { useRef as useRef18 } from "react";
-import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
+import { useRef as useRef4 } from "react";
+import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
-import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { useStateProps as useStateProps11 } from "@marigold/system";
-import { jsx as jsx75 } from "react/jsx-runtime";
-var TableCell = ({ cell }) => {
-  const ref = useRef18(null);
+import { mergeProps as mergeProps3 } from "@react-aria/utils";
+import { useStateProps as useStateProps2 } from "@marigold/system";
+import { jsx as jsx71 } from "react/jsx-runtime";
+var TableCell = ({ cell, align }) => {
+  const ref = useRef4(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -3409,26 +2648,27 @@ var TableCell = ({ cell }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = useFocusRing7();
-  const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx75(
+  const { focusProps, isFocusVisible } = useFocusRing2();
+  const stateProps = useStateProps2({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ jsx71(
     "td",
     {
       ref,
       className: classNames2 == null ? void 0 : classNames2.cell,
-      ...mergeProps11(cellProps, focusProps),
+      ...mergeProps3(cellProps, focusProps),
       ...stateProps,
+      align,
       children: cell.rendered
     }
   );
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { useRef as useRef19 } from "react";
-import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
+import { useRef as useRef5 } from "react";
+import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
-import { mergeProps as mergeProps12 } from "@react-aria/utils";
-import { cn as cn40, useStateProps as useStateProps12 } from "@marigold/system";
+import { mergeProps as mergeProps4 } from "@react-aria/utils";
+import { cn as cn39, useStateProps as useStateProps3 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3451,9 +2691,9 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx76 } from "react/jsx-runtime";
-var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef19(null);
+import { jsx as jsx72 } from "react/jsx-runtime";
+var TableCheckboxCell = ({ cell, align }) => {
+  const ref = useRef5(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -3466,36 +2706,38 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     useTableSelectionCheckbox({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = useFocusRing8();
-  const stateProps = useStateProps12({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx76(
+  const { focusProps, isFocusVisible } = useFocusRing3();
+  const stateProps = useStateProps3({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ jsx72(
     "td",
     {
       ref,
-      className: cn40("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
-      ...mergeProps12(gridCellProps, focusProps),
+      className: cn39("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      align,
+      ...mergeProps4(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx76(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx72(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-import { useRef as useRef20 } from "react";
-import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
-import { useHover as useHover4 } from "@react-aria/interactions";
+import { useRef as useRef6 } from "react";
+import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
-import { mergeProps as mergeProps13 } from "@react-aria/utils";
+import { mergeProps as mergeProps5 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn41, useStateProps as useStateProps13 } from "@marigold/system";
-import { width as twWidth5 } from "@marigold/system";
-import { jsx as jsx77, jsxs as jsxs32 } from "react/jsx-runtime";
+import { cn as cn40, useStateProps as useStateProps4 } from "@marigold/system";
+import { width as twWidth4 } from "@marigold/system";
+import { jsx as jsx73, jsxs as jsxs29 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
-  width = "auto"
+  width = "auto",
+  align
 }) => {
   var _a, _b;
-  const ref = useRef20(null);
+  const ref = useRef6(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -3504,23 +2746,24 @@ var TableColumnHeader = ({
     state,
     ref
   );
-  const { hoverProps, isHovered } = useHover4({});
-  const { focusProps, isFocusVisible } = useFocusRing9();
-  const stateProps = useStateProps13({
+  const { hoverProps, isHovered } = useHover({});
+  const { focusProps, isFocusVisible } = useFocusRing4();
+  const stateProps = useStateProps4({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs29(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: cn41("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
-      ...mergeProps13(columnHeaderProps, hoverProps, focusProps),
+      className: cn40("cursor-default", twWidth4[width], classNames2 == null ? void 0 : classNames2.header),
+      ...mergeProps5(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
+      align,
       children: [
         column.rendered,
-        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx77(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx77(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx77(SortDown, { className: "inline-block" }))
+        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx73(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx73(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx73(SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3528,36 +2771,36 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ jsx78("thead", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx74("thead", { ...rowGroupProps, children });
 };
 
 // src/Table/TableHeaderRow.tsx
-import { useRef as useRef21 } from "react";
+import { useRef as useRef7 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef21(null);
+  const ref = useRef7(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx79("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ jsx75("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-import { useRef as useRef22 } from "react";
-import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
-import { useHover as useHover5 } from "@react-aria/interactions";
+import { useRef as useRef8 } from "react";
+import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
+import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
-import { mergeProps as mergeProps14 } from "@react-aria/utils";
-import { cn as cn42, useClassNames as useClassNames40, useStateProps as useStateProps14 } from "@marigold/system";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { mergeProps as mergeProps6 } from "@react-aria/utils";
+import { cn as cn41, useClassNames as useClassNames41, useStateProps as useStateProps5 } from "@marigold/system";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
-  const ref = useRef22(null);
+  const ref = useRef8(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames40({
+  const classNames2 = useClassNames41({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3571,28 +2814,28 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = useFocusRing10({ within: true });
-  const { hoverProps, isHovered } = useHover5({
+  const { focusProps, isFocusVisible } = useFocusRing5({ within: true });
+  const { hoverProps, isHovered } = useHover2({
     isDisabled: disabled || !interactive
   });
-  const stateProps = useStateProps14({
+  const stateProps = useStateProps5({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx76(
     "tr",
     {
       ref,
-      className: cn42(
+      className: cn41(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
         classNames2 == null ? void 0 : classNames2.row
       ),
-      ...mergeProps14(rowProps, focusProps, hoverProps),
+      ...mergeProps6(rowProps, focusProps, hoverProps),
       ...stateProps,
       children
     }
@@ -3600,25 +2843,26 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import { useRef as useRef23 } from "react";
-import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
-import { useHover as useHover6 } from "@react-aria/interactions";
+import { useRef as useRef9 } from "react";
+import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
+import { useHover as useHover3 } from "@react-aria/interactions";
 import {
   useTableColumnHeader as useTableColumnHeader2,
   useTableSelectAllCheckbox
 } from "@react-aria/table";
-import { mergeProps as mergeProps15 } from "@react-aria/utils";
+import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import {
-  cn as cn43,
-  width as twWidth6,
-  useStateProps as useStateProps15
+  cn as cn42,
+  width as twWidth5,
+  useStateProps as useStateProps6
 } from "@marigold/system";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
-  width = "auto"
+  width = "auto",
+  align
 }) => {
-  const ref = useRef23(null);
+  const ref = useRef9(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -3628,30 +2872,31 @@ var TableSelectAllCell = ({
     ref
   );
   const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
-  const { hoverProps, isHovered } = useHover6({});
-  const { focusProps, isFocusVisible } = useFocusRing11();
-  const stateProps = useStateProps15({
+  const { hoverProps, isHovered } = useHover3({});
+  const { focusProps, isFocusVisible } = useFocusRing6();
+  const stateProps = useStateProps6({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx77(
     "th",
     {
       ref,
-      className: cn43(
-        twWidth6[width],
+      className: cn42(
+        twWidth5[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
       ),
-      ...mergeProps15(columnHeaderProps, hoverProps, focusProps),
+      align,
+      ...mergeProps7(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx81(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx77(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx82, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs30 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
@@ -3660,7 +2905,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = useRef24(null);
+  const tableRef = useRef10(null);
   const state = useTableState({
     ...props,
     selectionMode,
@@ -3668,21 +2913,21 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames41({
+  const classNames2 = useClassNames42({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx78(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ jsxs33(
+      children: /* @__PURE__ */ jsxs30(
         "table",
         {
           ref: tableRef,
-          className: cn44(
+          className: cn43(
             "group/table",
             "border-collapse overflow-auto whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3690,34 +2935,48 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx82(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx82(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ jsx78(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx78(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
-                var _a, _b, _c;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx82(
+                var _a, _b, _c, _d;
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx78(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
                     column
                   },
                   column.key
-                ) : /* @__PURE__ */ jsx82(
+                ) : /* @__PURE__ */ jsx78(
                   TableColumnHeader,
                   {
                     width: (_c = column.props) == null ? void 0 : _c.width,
-                    column
+                    column,
+                    align: (_d = column.props) == null ? void 0 : _d.align
                   },
                   column.key
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ jsxs33(TableBody, { children: [
+            /* @__PURE__ */ jsxs30(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx82(TableRow, { row, children: [...collection.getChildren(row.key)].map(
-                  (cell) => {
-                    var _a;
-                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx82(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx82(TableCell, { cell }, cell.key);
-                  }
-                ) }, row.key)
+                (row) => row.type === "item" && /* @__PURE__ */ jsx78(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                  var _a, _b, _c;
+                  const currentColumn = collection.columns[index];
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx78(
+                    TableCheckboxCell,
+                    {
+                      align: (_b = currentColumn.props) == null ? void 0 : _b.align,
+                      cell
+                    },
+                    cell.key
+                  ) : /* @__PURE__ */ jsx78(
+                    TableCell,
+                    {
+                      align: (_c = currentColumn.props) == null ? void 0 : _c.align,
+                      cell
+                    },
+                    cell.key
+                  );
+                }) }, row.key)
               )
             ] })
           ]
@@ -3734,7 +2993,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn45,
+  cn as cn44,
   createVar as createVar9,
   cursorStyle,
   fontWeight,
@@ -3742,10 +3001,10 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames42,
+  useClassNames as useClassNames43,
   useTheme as useTheme6
 } from "@marigold/system";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var Text2 = ({
   variant,
   size,
@@ -3759,16 +3018,16 @@ var Text2 = ({
   ...props
 }) => {
   const theme = useTheme6();
-  const classNames2 = useClassNames42({
+  const classNames2 = useClassNames43({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx79(
     "p",
     {
       ...props,
-      className: cn45(
+      className: cn44(
         classNames2,
         "text-[--color] outline-[--outline]",
         fontStyle && textStyle[fontStyle],
@@ -3791,11 +3050,11 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames43 } from "@marigold/system";
-import { jsx as jsx84 } from "react/jsx-runtime";
-var _TextArea = forwardRef19(
+import { useClassNames as useClassNames44 } from "@marigold/system";
+import { jsx as jsx80 } from "react/jsx-runtime";
+var _TextArea = forwardRef20(
   ({
     variant,
     size,
@@ -3806,7 +3065,7 @@ var _TextArea = forwardRef19(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames43({ component: "TextArea", variant, size });
+    const classNames2 = useClassNames44({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3814,15 +3073,15 @@ var _TextArea = forwardRef19(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx84(FieldBase2, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx84(TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ jsx80(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx80(TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
-import { jsx as jsx85 } from "react/jsx-runtime";
-var _TextField = forwardRef20(
+import { jsx as jsx81 } from "react/jsx-runtime";
+var _TextField = forwardRef21(
   ({
     variant,
     size,
@@ -3839,13 +3098,13 @@ var _TextField = forwardRef20(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx85(FieldBase2, { as: TextField2, ...props, children: /* @__PURE__ */ jsx85(_Input, { ref }) });
+    return /* @__PURE__ */ jsx81(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx81(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn46, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { cn as cn45, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3858,11 +3117,11 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx82(
     "div",
     {
       ...props,
-      className: cn46(
+      className: cn45(
         "grid",
         gapSpace7[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3876,11 +3135,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn47, useClassNames as useClassNames44 } from "@marigold/system";
+import { cn as cn46, useClassNames as useClassNames45 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3894,32 +3153,32 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ jsx87(TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ jsx83(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx88, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs31 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames2 = useClassNames44({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ jsxs34(Tooltip, { ...props, className: cn47("group/tooltip", classNames2.container), children: [
-    /* @__PURE__ */ jsx88(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx88("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx88("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+  const classNames2 = useClassNames45({ component: "Tooltip", variant, size });
+  return /* @__PURE__ */ jsxs31(Tooltip, { ...props, className: cn46("group/tooltip", classNames2.container), children: [
+    /* @__PURE__ */ jsx84(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx84("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx84("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
   ] });
 };
 _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
-import { Button as Button3, Tag } from "react-aria-components";
-import { cn as cn48, useClassNames as useClassNames46 } from "@marigold/system";
+import { Button as Button5, Tag } from "react-aria-components";
+import { cn as cn47, useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
-import { useClassNames as useClassNames45 } from "@marigold/system";
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { useClassNames as useClassNames46 } from "@marigold/system";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
   items,
@@ -3928,24 +3187,24 @@ var _TagGroup = ({
   size,
   ...rest
 }) => {
-  const classNames2 = useClassNames45({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx89(FieldBase2, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx89(TagList, { items, className: classNames2.listItems, children }) });
+  const classNames2 = useClassNames46({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx85(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx85(TagList, { items, className: classNames2.listItems, children }) });
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment10, jsx as jsx90, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx86, jsxs as jsxs32 } from "react/jsx-runtime";
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ jsx90(Button3, { slot: "remove", className, children: /* @__PURE__ */ jsx90("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx90("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__ */ jsx86(Button5, { slot: "remove", className, children: /* @__PURE__ */ jsx86("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx86("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 _Tag = ({ variant, size, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames2 = useClassNames46({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx90(Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs35(Fragment10, { children: [
+  const classNames2 = useClassNames47({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx86(Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs32(Fragment8, { children: [
     children,
-    allowsRemoving && /* @__PURE__ */ jsx90(
+    allowsRemoving && /* @__PURE__ */ jsx86(
       CloseButton2,
       {
-        className: cn48("flex items-center", classNames2.closeButton)
+        className: cn47("flex items-center", classNames2.closeButton)
       }
     )
   ] }) });
@@ -3956,11 +3215,11 @@ _Tag.Group = _TagGroup;
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { forwardRef as forwardRef21 } from "react";
-import { SVG as SVG6 } from "@marigold/system";
-import { jsx as jsx91, jsxs as jsxs36 } from "react/jsx-runtime";
-var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
-  SVG6,
+import { forwardRef as forwardRef22 } from "react";
+import { SVG as SVG5 } from "@marigold/system";
+import { jsx as jsx87, jsxs as jsxs33 } from "react/jsx-runtime";
+var XLoader = forwardRef22((props, ref) => /* @__PURE__ */ jsxs33(
+  SVG5,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -3969,13 +3228,13 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ jsx91("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx87("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ jsx87(
         "path",
         {
           id: "XMLID_5_",
           d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx91(
+          children: /* @__PURE__ */ jsx87(
             "animate",
             {
               attributeName: "opacity",
@@ -3988,12 +3247,12 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx87(
         "path",
         {
           id: "XMLID_18_",
           d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx91(
+          children: /* @__PURE__ */ jsx87(
             "animate",
             {
               attributeName: "opacity",
@@ -4006,12 +3265,12 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx87(
         "path",
         {
           id: "XMLID_19_",
           d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx91(
+          children: /* @__PURE__ */ jsx87(
             "animate",
             {
               attributeName: "opacity",
@@ -4024,12 +3283,12 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx87(
         "path",
         {
           id: "XMLID_20_",
           d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx91(
+          children: /* @__PURE__ */ jsx87(
             "animate",
             {
               attributeName: "opacity",
@@ -4042,12 +3301,12 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx87(
         "path",
         {
           id: "XMLID_21_",
           d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx91(
+          children: /* @__PURE__ */ jsx87(
             "animate",
             {
               attributeName: "opacity",
@@ -4060,12 +3319,12 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx87(
         "path",
         {
           id: "XMLID_22_",
           d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z",
-          children: /* @__PURE__ */ jsx91(
+          children: /* @__PURE__ */ jsx87(
             "animate",
             {
               attributeName: "opacity",
@@ -4078,12 +3337,12 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx87(
         "path",
         {
           id: "XMLID_23_",
           d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx91(
+          children: /* @__PURE__ */ jsx87(
             "animate",
             {
               attributeName: "opacity",
@@ -4096,12 +3355,12 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx87(
         "path",
         {
           id: "XMLID_24_",
           d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx91(
+          children: /* @__PURE__ */ jsx87(
             "animate",
             {
               attributeName: "opacity",
@@ -4114,12 +3373,12 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx87(
         "path",
         {
           id: "XMLID_25_",
           d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx91(
+          children: /* @__PURE__ */ jsx87(
             "animate",
             {
               attributeName: "opacity",
@@ -4132,12 +3391,12 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx87(
         "path",
         {
           id: "XMLID_26_",
           d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx91(
+          children: /* @__PURE__ */ jsx87(
             "animate",
             {
               attributeName: "opacity",
@@ -4150,12 +3409,12 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx87(
         "path",
         {
           id: "XMLID_27_",
           d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ jsx91(
+          children: /* @__PURE__ */ jsx87(
             "animate",
             {
               attributeName: "opacity",
@@ -4174,24 +3433,24 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames47 } from "@marigold/system";
+import { useClassNames as useClassNames48 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext7, useContext as useContext8 } from "react";
-var TabContext = createContext7({});
-var useTabContext = () => useContext8(TabContext);
+import { createContext as createContext6, useContext as useContext11 } from "react";
+var TabContext = createContext6({});
+var useTabContext = () => useContext11(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn49 } from "@marigold/system";
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { cn as cn48 } from "@marigold/system";
+import { jsx as jsx88 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx88(
     Tab,
     {
       ...props,
-      className: cn49(
+      className: cn48(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -4202,15 +3461,15 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn50, gapSpace as gapSpace8 } from "@marigold/system";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { cn as cn49, gapSpace as gapSpace8 } from "@marigold/system";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx89(
     TabList,
     {
       ...props,
-      className: cn50("flex", gapSpace8[space], classNames2.tabsList),
+      className: cn49("flex", gapSpace8[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -4218,25 +3477,25 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 import { TabPanel } from "react-aria-components";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx94(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ jsx90(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = useClassNames47({
+  const classNames2 = useClassNames48({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ jsx95(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx95(Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ jsx91(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx91(Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -4247,50 +3506,48 @@ export {
   ActionMenu,
   Aside,
   Aspect,
-  Autocomplete,
+  _Autocomplete as Autocomplete,
   Badge,
   Body,
   Breakout,
   _Button as Button,
-  Calendar,
-  CalendarCell,
-  CalendarGrid,
+  _Calendar as Calendar,
   Card,
   Center,
   _Checkbox as Checkbox,
   _CheckboxGroup as CheckboxGroup,
   CloseButton2 as CloseButton,
   Columns,
-  ComboBox,
+  _ComboBox as ComboBox,
   Container,
-  DateField,
-  DatePicker,
+  _DateField as DateField,
+  _DatePicker as DatePicker,
   _Dialog as Dialog,
   _Divider as Divider,
   FieldBase,
   FieldGroup,
   FieldGroupContext,
   Footer,
+  Form,
   _Header as Header,
   _Headline as Headline,
   Image,
   Inline,
-  Input,
+  _Input as Input,
   Inset,
   _Label as Label,
   _Link as Link,
   List,
   MarigoldProvider,
-  Menu,
+  _Menu as Menu,
   Message,
   _Modal as Modal,
   _NumberField as NumberField,
-  Overlay,
-  Popover,
+  _Popover as Popover,
   _Radio as Radio,
   _RadioGroup as RadioGroup,
   _SearchField as SearchField,
-  Select,
+  _Select as Select,
   _Slider as Slider,
   Split,
   Stack,
@@ -4304,11 +3561,10 @@ export {
   ThemeProvider2 as ThemeProvider,
   Tiles,
   _Tooltip as Tooltip,
-  Tray,
-  TrayWrapper,
   Underlay,
   VisuallyHidden,
   XLoader,
+  _Calendar,
   useAsyncList,
   useFieldGroupContext,
   useListData,