@marigold/components 6.8.0 → 6.9.0

package/dist/index.mjs

@@ -605,59 +605,75 @@ var ListBox = forwardRef4(
 
 // src/Overlay/Modal.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { FocusScope } from "@react-aria/focus";
-import { useModal, useOverlay, usePreventScroll } from "@react-aria/overlays";
-import { mergeProps as mergeProps4, useObjectRef as useObjectRef2 } from "@react-aria/utils";
+import { Modal } from "react-aria-components";
+import { 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 { jsx as jsx15 } from "react/jsx-runtime";
-var Underlay = ({ size, variant, ...props }) => {
+var Underlay = ({
+  size,
+  variant,
+  open,
+  dismissable,
+  keyboardDismissable,
+  ...rest
+}) => {
   const classNames2 = useClassNames7({ component: "Underlay", size, variant });
-  return /* @__PURE__ */ jsx15("div", { className: cn9("fixed inset-0 z-40", classNames2), ...props });
+  const props = {
+    isOpen: open,
+    isDismissable: dismissable,
+    isKeyboardDismissDisabled: keyboardDismissable,
+    ...rest
+  };
+  return /* @__PURE__ */ jsx15(
+    ModalOverlay,
+    {
+      className: ({ isEntering, isExiting }) => cn9(
+        "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,
+      children: props.children
+    }
+  );
 };
 
 // src/Overlay/Modal.tsx
-import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
-var Modal = forwardRef5(
-  ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
-    const modalRef = useObjectRef2(ref);
-    const { overlayProps, underlayProps } = useOverlay(
-      {
-        isOpen: open,
-        onClose,
-        isDismissable: dismissable,
-        isKeyboardDismissDisabled: !keyboardDismissable
-      },
-      modalRef
-    );
-    usePreventScroll();
-    const { modalProps } = useModal({});
-    return /* @__PURE__ */ jsxs8(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: [
-      /* @__PURE__ */ jsx16(Underlay, { ...underlayProps, variant: "modal" }),
-      /* @__PURE__ */ jsx16(
-        "div",
-        {
-          className: "pointer-none fixed inset-0 z-50 flex items-center justify-center",
-          ref: modalRef,
-          ...mergeProps4(props, overlayProps, modalProps),
-          children: /* @__PURE__ */ jsx16("div", { style: { pointerEvents: "auto" }, children })
-        }
-      )
-    ] });
-  }
-);
+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 } from "@marigold/system";
+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 = useTheme();
+  const theme = useTheme2();
   let mountOverlay = open;
   if (!mountOverlay) {
     return null;
@@ -676,13 +692,13 @@ var Overlay = ({ children, container, open }) => {
 
 // src/Overlay/Popover.tsx
 import { forwardRef as forwardRef6, useRef as useRef5 } from "react";
-import { FocusScope as FocusScope2 } from "@react-aria/focus";
+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 jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var Popover = forwardRef6(
   (props, ref) => {
     const fallbackRef = useRef5(null);
@@ -713,9 +729,9 @@ var PopoverWrapper = forwardRef6(
       component: "Popover",
       variant: placement
     });
-    return /* @__PURE__ */ jsxs9(FocusScope2, { restoreFocus: true, children: [
+    return /* @__PURE__ */ jsxs8(FocusScope, { restoreFocus: true, children: [
       !isNonModal && /* @__PURE__ */ jsx18(Underlay, { ...underlayProps }),
-      /* @__PURE__ */ jsxs9(
+      /* @__PURE__ */ jsxs8(
         "div",
         {
           ...popoverProps,
@@ -739,17 +755,27 @@ var PopoverWrapper = forwardRef6(
 
 // src/Overlay/Tray.tsx
 import { forwardRef as forwardRef7 } from "react";
-import { FocusScope as FocusScope3 } from "@react-aria/focus";
+import { FocusScope as FocusScope2 } from "@react-aria/focus";
 import {
   DismissButton as DismissButton2,
   useModalOverlay
 } from "@react-aria/overlays";
-import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
-import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+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/Overlay/Tray.tsx
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var Tray = forwardRef7(
   ({ state, children, ...props }, ref) => {
-    const trayRef = useObjectRef3(ref);
-    return /* @__PURE__ */ jsx19(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx19(TrayWrapper, { state, ...props, ref: trayRef, children }) });
+    const trayRef = useObjectRef2(ref);
+    return /* @__PURE__ */ jsx20(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx20(TrayWrapper, { state, ...props, ref: trayRef, children }) });
   }
 );
 var TrayWrapper = forwardRef7(
@@ -762,7 +788,7 @@ var TrayWrapper = forwardRef7(
       state,
       ref
     );
-    return /* @__PURE__ */ jsx19(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx19(Underlay, { ...underlayProps, variant: "modal", children: /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsx20(FocusScope2, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx20(Underlay2, { ...underlayProps, variant: "modal", children: /* @__PURE__ */ jsxs9(
       "div",
       {
         ...modalProps,
@@ -770,9 +796,9 @@ var TrayWrapper = forwardRef7(
         className: "absolute bottom-0 w-full",
         "data-testid": "tray",
         children: [
-          /* @__PURE__ */ jsx19(DismissButton2, { onDismiss: state.close }),
+          /* @__PURE__ */ jsx20(DismissButton2, { onDismiss: state.close }),
           children,
-          /* @__PURE__ */ jsx19(DismissButton2, { onDismiss: state.close })
+          /* @__PURE__ */ jsx20(DismissButton2, { onDismiss: state.close })
         ]
       }
     ) }) });
@@ -784,9 +810,9 @@ 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 mergeProps5 } from "@react-aria/utils";
-import { cn as cn10, useStateProps as useStateProps3 } from "@marigold/system";
-import { jsx as jsx20 } from "react/jsx-runtime";
+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,
@@ -829,17 +855,17 @@ var ClearButton = ({
     focusVisible: isFocusVisible,
     hover: isHovered
   });
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
-      ...mergeProps5(buttonProps, focusProps, hoverProps, props),
+      ...mergeProps4(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       ref: buttonRef,
-      className: cn10(
+      className: cn11(
         "cursor-pointer appearance-none border-none p-0 pr-1",
         className
       ),
-      children: /* @__PURE__ */ jsx20(
+      children: /* @__PURE__ */ jsx21(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -847,7 +873,7 @@ var ClearButton = ({
           fill: "currentColor",
           width: 20,
           height: 20,
-          children: /* @__PURE__ */ jsx20("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__ */ 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" })
         }
       )
     }
@@ -855,8 +881,8 @@ var ClearButton = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
-var SearchIcon = (props) => /* @__PURE__ */ jsx21(
+import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+var SearchIcon = (props) => /* @__PURE__ */ jsx22(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -865,7 +891,7 @@ var SearchIcon = (props) => /* @__PURE__ */ jsx21(
     width: 24,
     height: 24,
     ...props,
-    children: /* @__PURE__ */ jsx21("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__ */ 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" })
   }
 );
 var Autocomplete = ({
@@ -920,8 +946,8 @@ var Autocomplete = ({
     state
   );
   const { isDisabled, ...restClearButtonProps } = clearButtonProps;
-  return /* @__PURE__ */ jsxs11(Fragment2, { children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    /* @__PURE__ */ jsx22(
       FieldBase,
       {
         label: props.label,
@@ -931,13 +957,13 @@ var Autocomplete = ({
         errorMessage: props.errorMessage,
         disabled,
         width,
-        children: /* @__PURE__ */ jsx21(
+        children: /* @__PURE__ */ jsx22(
           Input,
           {
             ...inputProps,
             ref: inputRef,
-            icon: /* @__PURE__ */ jsx21(SearchIcon, {}),
-            action: state.inputValue !== "" ? /* @__PURE__ */ jsx21(
+            icon: /* @__PURE__ */ jsx22(SearchIcon, {}),
+            action: state.inputValue !== "" ? /* @__PURE__ */ jsx22(
               ClearButton,
               {
                 preventFocus: true,
@@ -949,7 +975,7 @@ var Autocomplete = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx22(
       Popover,
       {
         state,
@@ -957,7 +983,7 @@ var Autocomplete = ({
         triggerRef: inputRef,
         scrollRef: listBoxRef,
         isNonModal: true,
-        children: /* @__PURE__ */ jsx21(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+        children: /* @__PURE__ */ jsx22(ListBox, { ref: listBoxRef, state, ...listBoxProps })
       }
     )
   ] });
@@ -974,22 +1000,22 @@ 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 cn11, useClassNames as useClassNames9 } from "@marigold/system";
-import { jsx as jsx22 } from "react/jsx-runtime";
+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 = useClassNames9({
+    const classNames2 = useClassNames10({
       component: "Button",
       variant,
       size,
       className
     });
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       Button,
       {
         ...props,
         ref,
-        className: cn11(
+        className: cn12(
           "inline-flex items-center justify-center gap-[0.5ch]",
           classNames2,
           fullWidth ? "w-full" : void 0
@@ -1002,7 +1028,7 @@ var _Button = forwardRef8(
 );
 
 // src/ComboBox/ComboBox.tsx
-import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 var ComboBox = ({
   error,
   width,
@@ -1042,8 +1068,8 @@ var ComboBox = ({
   );
   const errorMessageProps = { "aria-invalid": error };
   const { label, description, errorMessage } = props;
-  return /* @__PURE__ */ jsxs12(Fragment3, { children: [
-    /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    /* @__PURE__ */ jsx24(
       FieldBase,
       {
         label,
@@ -1053,25 +1079,25 @@ var ComboBox = ({
         errorMessage,
         errorMessageProps,
         width,
-        children: /* @__PURE__ */ jsx23(
+        children: /* @__PURE__ */ jsx24(
           Input,
           {
             ...inputProps,
             ref: inputRef,
-            action: /* @__PURE__ */ jsx23(
+            action: /* @__PURE__ */ jsx24(
               _Button,
               {
                 className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0",
                 ref: buttonRef,
                 ...triggerProps,
-                children: /* @__PURE__ */ jsx23(ChevronDown, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ jsx24(ChevronDown, { className: "h-4 w-4" })
               }
             )
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsx24(
       Popover,
       {
         state,
@@ -1079,7 +1105,7 @@ var ComboBox = ({
         triggerRef: inputRef,
         scrollRef: listBoxRef,
         isNonModal: true,
-        children: /* @__PURE__ */ jsx23(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+        children: /* @__PURE__ */ jsx24(ListBox, { ref: listBoxRef, state, ...listBoxProps })
       }
     )
   ] });
@@ -1087,16 +1113,16 @@ var ComboBox = ({
 ComboBox.Item = Item3;
 
 // src/Badge/Badge.tsx
-import { useClassNames as useClassNames10 } from "@marigold/system";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { useClassNames as useClassNames11 } from "@marigold/system";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var Badge = ({ variant, size, children, ...props }) => {
-  const classNames2 = useClassNames10({ component: "Badge", variant, size });
-  return /* @__PURE__ */ jsx24("div", { ...props, className: classNames2, children });
+  const classNames2 = useClassNames11({ component: "Badge", variant, size });
+  return /* @__PURE__ */ jsx25("div", { ...props, className: classNames2, children });
 };
 
 // src/Breakout/Breakout.tsx
-import { alignment, cn as cn12, createVar as createVar4 } from "@marigold/system";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { alignment, cn as cn13, createVar as createVar4 } from "@marigold/system";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var Breakout = ({
   height,
   children,
@@ -1106,10 +1132,10 @@ var Breakout = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
-      className: cn12(
+      className: cn13(
         "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]),
@@ -1124,16 +1150,16 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-import { useClassNames as useClassNames11 } from "@marigold/system";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { useClassNames as useClassNames12 } from "@marigold/system";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var Body = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames11({ component: "Body", variant, size });
-  return /* @__PURE__ */ jsx26("section", { ...props, className: classNames2, children });
+  const classNames2 = useClassNames12({ component: "Body", variant, size });
+  return /* @__PURE__ */ jsx27("section", { ...props, className: classNames2, children });
 };
 
 // src/Card/Card.tsx
 import {
-  cn as cn13,
+  cn as cn14,
   gapSpace as gapSpace2,
   paddingBottom,
   paddingLeft,
@@ -1142,9 +1168,9 @@ import {
   paddingSpaceX,
   paddingSpaceY,
   paddingTop,
-  useClassNames as useClassNames12
+  useClassNames as useClassNames13
 } from "@marigold/system";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Card = ({
   children,
   variant,
@@ -1159,12 +1185,12 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames2 = useClassNames12({ component: "Card", variant, size });
-  return /* @__PURE__ */ jsx27(
+  const classNames2 = useClassNames13({ component: "Card", variant, size });
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       ...props,
-      className: cn13(
+      className: cn14(
         "flex flex-col",
         classNames2,
         gapSpace2[space],
@@ -1182,19 +1208,19 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-import { cn as cn14, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { cn as cn15, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var Center = ({
   maxWidth = "100%",
   space = 0,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       ...props,
-      className: cn14(
+      className: cn15(
         "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
         gapSpace3[space],
         "max-w-[--maxWidth]"
@@ -1208,9 +1234,9 @@ var Center = ({
 // src/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef9 } from "react";
 import { Checkbox } from "react-aria-components";
-import { cn as cn15, useClassNames as useClassNames13 } from "@marigold/system";
-import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
-var CheckMark = () => /* @__PURE__ */ jsx29("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx29(
+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(
   "path",
   {
     fill: "currentColor",
@@ -1218,7 +1244,7 @@ var CheckMark = () => /* @__PURE__ */ jsx29("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__ */ jsx29("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx29(
+var IndeterminateMark = () => /* @__PURE__ */ jsx30("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx30(
   "path",
   {
     fill: "currentColor",
@@ -1227,11 +1253,11 @@ var IndeterminateMark = () => /* @__PURE__ */ jsx29("svg", { width: "12", height
   }
 ) });
 var Icon = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       "aria-hidden": "true",
-      className: cn15(
+      className: cn16(
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
@@ -1239,7 +1265,7 @@ var Icon = ({ className, checked, indeterminate, ...props }) => {
         className
       ),
       ...props,
-      children: indeterminate ? /* @__PURE__ */ jsx29(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx29(CheckMark, {}) : null
+      children: indeterminate ? /* @__PURE__ */ jsx30(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx30(CheckMark, {}) : null
     }
   );
 };
@@ -1268,19 +1294,19 @@ var _Checkbox = forwardRef9(
       defaultSelected: defaultChecked,
       ...rest
     };
-    const classNames2 = useClassNames13({ component: "Checkbox", variant, size });
-    return /* @__PURE__ */ jsx29(
+    const classNames2 = useClassNames14({ component: "Checkbox", variant, size });
+    return /* @__PURE__ */ jsx30(
       Checkbox,
       {
         ref,
-        className: cn15(
+        className: cn16(
           "group/checkbox flex items-center gap-[0.5rem]",
           "cursor-pointer data-[disabled]:cursor-not-allowed",
           classNames2.container
         ),
         ...props,
-        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs13(Fragment4, { children: [
-          /* @__PURE__ */ jsx29(
+        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs12(Fragment4, { children: [
+          /* @__PURE__ */ jsx30(
             Icon,
             {
               checked: isSelected,
@@ -1288,7 +1314,7 @@ var _Checkbox = forwardRef9(
               className: classNames2.checkbox
             }
           ),
-          /* @__PURE__ */ jsx29("div", { className: classNames2.label, children })
+          /* @__PURE__ */ jsx30("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -1297,16 +1323,16 @@ var _Checkbox = forwardRef9(
 
 // src/Checkbox/CheckboxGroup.tsx
 import { CheckboxGroup } from "react-aria-components";
-import { useClassNames as useClassNames16 } from "@marigold/system";
+import { useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/FieldBase/_FieldBase.tsx
 import { forwardRef as forwardRef10 } from "react";
-import { cn as cn17, width as twWidth2, useClassNames as useClassNames15 } from "@marigold/system";
+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 cn16, useClassNames as useClassNames14 } from "@marigold/system";
-import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+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,
@@ -1317,7 +1343,7 @@ var HelpText2 = ({
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
-  const classNames2 = useClassNames14({
+  const classNames2 = useClassNames15({
     component: "HelpText",
     variant,
     size
@@ -1325,33 +1351,33 @@ var HelpText2 = ({
   if (!description && !errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ jsxs14("div", { className: cn16(classNames2.container), children: [
-    /* @__PURE__ */ jsxs14(
+  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__ */ jsx30(
+          /* @__PURE__ */ jsx31(
             "svg",
             {
-              className: cn16("h-4 w-4", classNames2.icon),
+              className: cn17("h-4 w-4", classNames2.icon),
               viewBox: "0 0 24 24",
               role: "presentation",
               fill: "currentColor",
-              children: /* @__PURE__ */ jsx30("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" })
+              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__ */ jsx30(Text, { slot: "description", children: description })
+    !hasErrorMessage && /* @__PURE__ */ jsx31(Text, { slot: "description", children: description })
   ] });
 };
 
 // src/FieldBase/_FieldBase.tsx
-import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
 var fixedForwardRef = forwardRef10;
 var _FieldBase = (props, ref) => {
   const {
@@ -1364,24 +1390,26 @@ var _FieldBase = (props, ref) => {
     description,
     errorMessage,
     className,
+    stateProps,
     ...rest
   } = props;
-  const classNames2 = useClassNames15({
+  const classNames2 = useClassNames16({
     component: "Field",
     variant,
     size
   });
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs14(
     Component,
     {
       ref,
-      className: cn17("group/field", twWidth2[width], classNames2, className),
+      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__ */ jsx31(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx31("span", { "aria-hidden": "true" }),
+        label ? /* @__PURE__ */ jsx32(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx32("span", { "aria-hidden": "true" }),
         children,
-        /* @__PURE__ */ jsx31(
+        /* @__PURE__ */ jsx32(
           HelpText2,
           {
             variant,
@@ -1398,7 +1426,7 @@ var _FieldBase = (props, ref) => {
 var FieldBase2 = fixedForwardRef(_FieldBase);
 
 // src/Checkbox/CheckboxGroup.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var _CheckboxGroup = ({
   children,
   variant,
@@ -1409,7 +1437,7 @@ var _CheckboxGroup = ({
   error,
   ...rest
 }) => {
-  const classNames2 = useClassNames16({
+  const classNames2 = useClassNames17({
     component: "Checkbox",
     variant,
     size,
@@ -1423,13 +1451,13 @@ var _CheckboxGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx32(FieldBase2, { as: CheckboxGroup, ...props, children });
+  return /* @__PURE__ */ jsx33(FieldBase2, { as: CheckboxGroup, ...props, children });
 };
 
 // src/Columns/Columns.tsx
 import { Children as Children3, cloneElement as cloneElement3, isValidElement as isValidElement2 } from "react";
-import { cn as cn18, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { cn as cn19, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
   columns,
@@ -1445,19 +1473,19 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
-      className: cn18(
+      className: cn19(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
         gapSpace4[space]
       ),
       ...props,
-      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx33(
+      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx34(
         "div",
         {
-          className: cn18(
+          className: cn19(
             "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
           style: createVar6({ collapseAt, columnSize: columns[idx] }),
@@ -1470,13 +1498,13 @@ var Columns = ({
 
 // src/Container/Container.tsx
 import {
-  cn as cn19,
+  cn as cn20,
   createVar as createVar7,
   gridColsAlign,
   gridColumn,
   placeItems
 } from "@marigold/system";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var content = {
   small: "20ch",
   medium: "45ch",
@@ -1496,11 +1524,11 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       ...props,
-      className: cn19(
+      className: cn20(
         "grid",
         placeItems[alignItems],
         gridColsAlign[align],
@@ -1513,38 +1541,19 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import {
-  Children as Children5,
-  cloneElement as cloneElement4,
-  isValidElement as isValidElement3,
-  useRef as useRef9
-} from "react";
-import { useButton as useButton3 } from "@react-aria/button";
-import { useDialog } from "@react-aria/dialog";
-import { cn as cn21, useClassNames as useClassNames19 } from "@marigold/system";
-
-// src/Header/Header.tsx
-import { Header } from "react-aria-components";
-import { useClassNames as useClassNames17 } from "@marigold/system";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var _Header = ({ variant, size, ...props }) => {
-  const classNames2 = useClassNames17({
-    component: "Header",
-    variant,
-    size
-  });
-  return /* @__PURE__ */ jsx35(Header, { className: classNames2, ...props, children: props.children });
-};
+import { useContext as useContext3 } from "react";
+import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
+import { cn as cn22, useClassNames as useClassNames19 } from "@marigold/system";
 
 // src/Headline/Headline.tsx
 import { Heading } from "react-aria-components";
 import {
-  cn as cn20,
+  cn as cn21,
   createVar as createVar8,
   get,
   textAlign,
   useClassNames as useClassNames18,
-  useTheme as useTheme2
+  useTheme as useTheme3
 } from "@marigold/system";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var _Headline = ({
@@ -1556,7 +1565,7 @@ var _Headline = ({
   level = 1,
   ...props
 }) => {
-  const theme = useTheme2();
+  const theme = useTheme3();
   const classNames2 = useClassNames18({
     component: "Headline",
     variant,
@@ -1567,7 +1576,7 @@ var _Headline = ({
     {
       level: Number(level),
       ...props,
-      className: cn20(classNames2, "text-[--color]", textAlign[align]),
+      className: cn21(classNames2, "text-[--color]", textAlign[align]),
       style: createVar8({
         color: color && theme.colors && get(
           theme.colors,
@@ -1581,96 +1590,50 @@ var _Headline = ({
   );
 };
 
-// src/Dialog/Context.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var DialogContext = createContext3({});
-var useDialogContext = () => useContext3(DialogContext);
-
-// src/Dialog/DialogController.tsx
-import { useOverlayTriggerState } from "@react-stately/overlays";
-import { jsx as jsx37 } from "react/jsx-runtime";
-var DialogController = ({
-  children,
-  dismissable = true,
-  keyboardDismissable = true,
+// 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";
+var _DialogTrigger = ({
   open,
-  onOpenChange
+  dismissable,
+  keyboardDismissable,
+  ...rest
 }) => {
-  const state = useOverlayTriggerState({
+  const props = {
     isOpen: open,
-    onOpenChange
-  });
-  const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ jsx37(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx37(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx37(
-    Modal,
-    {
-      open: state.isOpen,
-      onClose: state.close,
-      dismissable,
-      keyboardDismissable,
-      children
-    }
-  ) }) });
-};
-
-// src/Dialog/DialogTrigger.tsx
-import { Children as Children4, useRef as useRef8 } from "react";
-import { PressResponder } from "@react-aria/interactions";
-import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
-import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
-var DialogTrigger = ({
-  children,
-  dismissable = true,
-  keyboardDismissable = true
-}) => {
-  const [dialogTrigger, dialog] = Children4.toArray(children);
-  const dialogTriggerRef = useRef8(null);
-  const state = useOverlayTriggerState2({});
-  const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ jsxs16(DialogContext.Provider, { value: ctx, children: [
-    /* @__PURE__ */ jsx38(
-      PressResponder,
-      {
-        ref: dialogTriggerRef,
-        isPressed: state.isOpen,
-        onPress: state.toggle,
-        children: dialogTrigger
-      }
-    ),
-    /* @__PURE__ */ jsx38(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx38(
-      Modal,
+    ...rest
+  };
+  const children = Children4.toArray(props.children);
+  const [dialogTrigger, dialog] = children;
+  const hasDialogTrigger = dialogTrigger.type !== _Dialog;
+  const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
+  return /* @__PURE__ */ jsxs15(DialogTrigger, { ...props, children: [
+    hasDialogTrigger && dialogTrigger,
+    /* @__PURE__ */ jsx37(
+      _Modal,
       {
-        open: state.isOpen,
-        onClose: state.close,
         dismissable,
         keyboardDismissable,
-        children: dialog
+        children: currentDialog
       }
-    ) })
+    )
   ] });
 };
 
 // src/Dialog/Dialog.tsx
-import { jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
-  const ref = useRef9(null);
-  const { close } = useDialogContext();
-  const { buttonProps } = useButton3(
-    {
-      onPress: () => close == null ? void 0 : close()
-    },
-    ref
-  );
-  return /* @__PURE__ */ jsx39("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx39(
+  const { close } = useContext3(OverlayTriggerStateContext);
+  return /* @__PURE__ */ jsx38("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx38(
     "button",
     {
-      className: cn21(
+      className: cn22(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
-      ref,
-      ...buttonProps,
-      children: /* @__PURE__ */ jsx39("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx39(
+      onClick: close,
+      children: /* @__PURE__ */ jsx38("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx38(
         "path",
         {
           fillRule: "evenodd",
@@ -1681,66 +1644,74 @@ var CloseButton = ({ className }) => {
     }
   ) });
 };
-var addTitleProps = (children, titleProps) => {
-  const childs = Children5.toArray(children);
-  const titleIndex = childs.findIndex(
-    (child) => isValidElement3(child) && (child.type === _Header || child.type === _Headline)
-  );
-  if (titleIndex < 0) {
-    console.warn(
-      "No child in <Dialog> found that can act as title for accessibility. Please add a <Header> or <Headline> as direct child."
-    );
-    return children;
-  }
-  const titleChild = cloneElement4(
-    childs[titleIndex],
-    titleProps
-  );
-  childs.splice(titleIndex, 1, titleChild);
-  return childs;
-};
-var Dialog = ({
-  children,
+var DialogHeadline = ({ children }) => /* @__PURE__ */ jsx38(_Headline, { slot: "title", children });
+var _Dialog = ({
   variant,
   size,
   closeButton,
+  isNonModal,
   ...props
 }) => {
-  const ref = useRef9(null);
-  const { close } = useDialogContext();
-  const { dialogProps, titleProps } = useDialog(props, ref);
   const classNames2 = useClassNames19({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ jsxs17("div", { className: classNames2.container, ...dialogProps, children: [
-    closeButton && /* @__PURE__ */ jsx39(CloseButton, { className: classNames2.closeButton }),
-    typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps)
-  ] });
+  let state = useContext3(OverlayTriggerStateContext);
+  let children = props.children;
+  if (typeof children === "function") {
+    children = children({
+      close: (state == null ? void 0 : state.close) || (() => {
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx38(
+    Dialog,
+    {
+      ...props,
+      className: cn22("relative outline-none", classNames2.container),
+      children: /* @__PURE__ */ jsxs16(Fragment5, { children: [
+        closeButton && /* @__PURE__ */ jsx38(CloseButton, { className: classNames2.closeButton }),
+        children
+      ] })
+    }
+  );
 };
-Dialog.Trigger = DialogTrigger;
-Dialog.Controller = DialogController;
+_Dialog.Trigger = _DialogTrigger;
+_Dialog.Headline = DialogHeadline;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
 import { useClassNames as useClassNames20 } from "@marigold/system";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
   const classNames2 = useClassNames20({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx40(Separator, { className: classNames2, ...props });
+  return /* @__PURE__ */ jsx39(Separator, { className: classNames2, ...props });
 };
 
 // src/Footer/Footer.tsx
 import { useClassNames as useClassNames21 } from "@marigold/system";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames21({ component: "Footer", variant, size });
-  return /* @__PURE__ */ jsx41("footer", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx40("footer", { ...props, className: classNames2, children });
+};
+
+// 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";
+var _Header = ({ variant, size, ...props }) => {
+  const classNames2 = useClassNames22({
+    component: "Header",
+    variant,
+    size
+  });
+  return /* @__PURE__ */ jsx41(Header, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Image/Image.tsx
 import {
-  cn as cn22,
+  cn as cn23,
   objectFit,
   objectPosition,
-  useClassNames as useClassNames22
+  useClassNames as useClassNames23
 } from "@marigold/system";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var Image = ({
@@ -1750,13 +1721,13 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = useClassNames22({ component: "Image", variant, size });
+  const classNames2 = useClassNames23({ component: "Image", variant, size });
   return /* @__PURE__ */ jsx42(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: cn22(
+      className: cn23(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1769,7 +1740,7 @@ var Image = ({
 // src/Inline/Inline.tsx
 import {
   alignment as alignment2,
-  cn as cn23,
+  cn as cn24,
   gapSpace as gapSpace5
 } from "@marigold/system";
 import { jsx as jsx43 } from "react/jsx-runtime";
@@ -1786,7 +1757,7 @@ var Inline = ({
     "div",
     {
       ...props,
-      className: cn23(
+      className: cn24(
         "flex flex-wrap",
         gapSpace5[space],
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
@@ -1799,29 +1770,29 @@ var Inline = ({
 
 // src/DateField/DateField.tsx
 import { createCalendar } from "@internationalized/date";
-import { useRef as useRef11 } from "react";
+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 mergeProps7 } from "@react-aria/utils";
+import { mergeProps as mergeProps6 } from "@react-aria/utils";
 import { useDateFieldState } from "@react-stately/datepicker";
-import { cn as cn25, useClassNames as useClassNames23, useStateProps as useStateProps5 } from "@marigold/system";
+import { cn as cn26, useClassNames as useClassNames24, useStateProps as useStateProps5 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
-import { useRef as useRef10 } from "react";
+import { useRef as useRef8 } from "react";
 import { useDateSegment } from "@react-aria/datepicker";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
-import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn24, useStateProps as useStateProps4 } from "@marigold/system";
-import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
+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 = useRef10(null);
+  const ref = useRef8(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
   const { focusProps, isFocused } = useFocusRing3({
     within: true,
@@ -1832,12 +1803,12 @@ var DateSegment = ({
     focusVisible: isFocused
   });
   const { isPlaceholder, placeholder, text, type, maxValue } = segment;
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
-      ...mergeProps6(segmentProps, stateProps, focusProps),
+      ...mergeProps5(segmentProps, stateProps, focusProps),
       ref,
-      className: cn24(
+      className: cn25(
         "group/segment",
         "text-center leading-none outline-0",
         type !== "literal" && "p-0.5",
@@ -1852,7 +1823,7 @@ var DateSegment = ({
           "span",
           {
             "aria-hidden": "true",
-            className: cn24(
+            className: cn25(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
@@ -1866,7 +1837,7 @@ var DateSegment = ({
 };
 
 // src/DateField/DateField.tsx
-import { jsx as jsx45, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
 var DateField = ({
   disabled,
   readOnly,
@@ -1895,13 +1866,13 @@ var DateField = ({
     locale,
     createCalendar
   });
-  const ref = useRef11(null);
+  const ref = useRef9(null);
   const { fieldProps, labelProps, descriptionProps } = useDateField(
     props,
     state,
     ref
   );
-  const classNames2 = useClassNames23({ component: "DateField", variant, size });
+  const classNames2 = useClassNames24({ component: "DateField", variant, size });
   const { focusProps, isFocused } = useFocusRing4({
     within: true,
     isTextInput: true,
@@ -1931,11 +1902,11 @@ var DateField = ({
       variant,
       size,
       width,
-      children: /* @__PURE__ */ jsxs19(
+      children: /* @__PURE__ */ jsxs18(
         "div",
         {
-          ...mergeProps7(fieldProps, focusProps, stateProps, hoverProps),
-          className: cn25(
+          ...mergeProps6(fieldProps, focusProps, stateProps, hoverProps),
+          className: cn26(
             "relative flex flex-row flex-nowrap",
             "cursor-text aria-disabled:cursor-not-allowed",
             classNames2.field
@@ -1960,7 +1931,7 @@ var DateField = ({
               "svg",
               {
                 "data-testid": "action",
-                className: cn25(classNames2.action),
+                className: cn26(classNames2.action),
                 viewBox: "0 0 24 24",
                 width: 24,
                 height: 24,
@@ -1976,14 +1947,14 @@ var DateField = ({
 
 // src/Calendar/Calendar.tsx
 import { createCalendar as createCalendar2 } from "@internationalized/date";
-import { useRef as useRef14, useState } from "react";
+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 cn27, useClassNames as useClassNames25, useStateProps as useStateProps7 } from "@marigold/system";
+import { cn as cn28, useClassNames as useClassNames26, useStateProps as useStateProps7 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import { getWeeksInMonth, startOfWeek, today } from "@internationalized/date";
@@ -1993,17 +1964,17 @@ import { useLocale as useLocale2 } from "@react-aria/i18n";
 import { useDateFormatter } from "@react-aria/i18n";
 
 // src/Calendar/CalendarCell.tsx
-import { useRef as useRef12 } from "react";
+import { useRef as useRef10 } from "react";
 import { useCalendarCell } from "@react-aria/calendar";
 import { useHover as useHover3 } from "@react-aria/interactions";
-import { mergeProps as mergeProps8 } from "@react-aria/utils";
-import { cn as cn26, useClassNames as useClassNames24, useStateProps as useStateProps6 } from "@marigold/system";
+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 = useRef12(null);
+  const ref = useRef10(null);
   const { state } = props;
   let { cellProps, buttonProps, formattedDate, isOutsideVisibleRange } = useCalendarCell(props, state, ref);
-  const classNames2 = useClassNames24({
+  const classNames2 = useClassNames25({
     component: "Calendar"
   });
   const isDisabled = cellProps["aria-disabled"];
@@ -2018,20 +1989,20 @@ var CalendarCell = (props) => {
   return /* @__PURE__ */ jsx46("td", { className: "group/cell", ...cellProps, children: /* @__PURE__ */ jsx46(
     "div",
     {
-      className: cn26(
+      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,
-      ...mergeProps8(buttonProps, stateProps, hoverProps),
+      ...mergeProps7(buttonProps, stateProps, hoverProps),
       children: formattedDate
     }
   ) });
 };
 
 // src/Calendar/CalendarGrid.tsx
-import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs19 } from "react/jsx-runtime";
 var CalendarGrid = ({ state, ...props }) => {
   const { locale } = useLocale2();
   const { gridProps, headerProps } = useCalendarGrid(props, state);
@@ -2051,7 +2022,7 @@ var CalendarGrid = ({ state, ...props }) => {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs19(
     "table",
     {
       className: "w-full border-spacing-[6px]",
@@ -2112,7 +2083,7 @@ var MonthDropdown = ({
 var MonthDropdown_default = MonthDropdown;
 
 // src/Calendar/YearDropdown.tsx
-import { useEffect as useEffect2, useRef as useRef13 } from "react";
+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 }) => {
@@ -2128,7 +2099,7 @@ var YearDropdown = ({ state, setSelectedDropdown }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
-  const activeButtonRef = useRef13(null);
+  const activeButtonRef = useRef11(null);
   useEffect2(() => {
     if (activeButtonRef.current) {
       const activeButton = activeButtonRef.current;
@@ -2179,7 +2150,7 @@ var YearDropdown = ({ state, setSelectedDropdown }) => {
 var YearDropdown_default = YearDropdown;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment5, jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+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 = ({
   disabled,
@@ -2199,7 +2170,7 @@ var Calendar = ({
     locale,
     createCalendar: createCalendar2
   });
-  const ref = useRef14(null);
+  const ref = useRef12(null);
   const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(
     props,
     state
@@ -2218,8 +2189,8 @@ var Calendar = ({
     disabled: state.isDisabled,
     focusVisible: state.isFocused
   });
-  const classNames2 = useClassNames25({ component: "Calendar" });
-  const { select: selectClassNames } = useClassNames25({ component: "Select" });
+  const classNames2 = useClassNames26({ component: "Calendar" });
+  const { select: selectClassNames } = useClassNames26({ component: "Select" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   let months = [];
   let formatter = useDateFormatter3({
@@ -2239,7 +2210,7 @@ var Calendar = ({
     "div",
     {
       tabIndex: -1,
-      className: cn27(
+      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
       ),
@@ -2259,15 +2230,15 @@ var Calendar = ({
           setSelectedDropdown,
           state
         }
-      ) : /* @__PURE__ */ jsxs21(Fragment5, { children: [
-        /* @__PURE__ */ jsxs21("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs21("div", { className: "flex w-full gap-4", children: [
-            /* @__PURE__ */ jsxs21(
+      ) : /* @__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",
               {
                 disabled: state.isDisabled,
                 onClick: () => setSelectedDropdown("month"),
-                className: cn27(buttonStyles, selectClassNames),
+                className: cn28(buttonStyles, selectClassNames),
                 "data-testid": "month",
                 children: [
                   selectedValue.month,
@@ -2275,12 +2246,12 @@ var Calendar = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs21(
+            /* @__PURE__ */ jsxs20(
               "button",
               {
                 disabled: state.isDisabled,
                 onClick: () => setSelectedDropdown("year"),
-                className: cn27(buttonStyles, selectClassNames),
+                className: cn28(buttonStyles, selectClassNames),
                 "data-testid": "year",
                 children: [
                   selectedValue.year,
@@ -2289,10 +2260,10 @@ var Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs21(
+          /* @__PURE__ */ jsxs20(
             "div",
             {
-              className: cn27(
+              className: cn28(
                 "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
                 classNames2.calendarControllers
               ),
@@ -2310,12 +2281,12 @@ var Calendar = ({
 };
 
 // src/DatePicker/DatePicker.tsx
-import { useRef as useRef15 } from "react";
+import { useRef as useRef13 } from "react";
 import { useDatePicker } from "@react-aria/datepicker";
-import { mergeProps as mergeProps9 } from "@react-aria/utils";
+import { mergeProps as mergeProps8 } from "@react-aria/utils";
 import { useDatePickerState } from "@react-stately/datepicker";
-import { useClassNames as useClassNames26, useStateProps as useStateProps8 } from "@marigold/system";
-import { Fragment as Fragment6, jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
+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 = ({
   disabled,
   required,
@@ -2339,7 +2310,7 @@ var DatePicker = ({
     shouldCloseOnSelect,
     ...props
   });
-  const ref = useRef15(null);
+  const ref = useRef13(null);
   const stateProps = useStateProps8({
     focus: state.isOpen
   });
@@ -2349,12 +2320,12 @@ var DatePicker = ({
     ref
   );
   const { isDisabled, errorMessage, description, label } = props;
-  const classNames2 = useClassNames26({
+  const classNames2 = useClassNames27({
     component: "DatePicker",
     size,
     variant
   });
-  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs21(Fragment7, { children: [
     /* @__PURE__ */ jsx51("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ jsx51(
       DateField,
       {
@@ -2371,7 +2342,7 @@ var DatePicker = ({
         action: /* @__PURE__ */ jsx51("div", { className: classNames2.container, children: /* @__PURE__ */ jsx51(
           _Button,
           {
-            ...mergeProps9(buttonProps, stateProps),
+            ...mergeProps8(buttonProps, stateProps),
             disabled: isDisabled,
             children: /* @__PURE__ */ jsx51(
               "svg",
@@ -2393,7 +2364,7 @@ var DatePicker = ({
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn28,
+  cn as cn29,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
@@ -2402,7 +2373,7 @@ import { jsx as jsx52 } from "react/jsx-runtime";
 var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
   "div",
   {
-    className: cn28(
+    className: cn29(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -2414,11 +2385,11 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
 // src/Link/Link.tsx
 import { forwardRef as forwardRef11 } from "react";
 import { Link } from "react-aria-components";
-import { useClassNames as useClassNames27 } from "@marigold/system";
+import { useClassNames as useClassNames28 } from "@marigold/system";
 import { jsx as jsx53 } from "react/jsx-runtime";
 var _Link = forwardRef11(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = useClassNames27({
+    const classNames2 = useClassNames28({
       component: "Link",
       variant,
       size
@@ -2428,11 +2399,11 @@ var _Link = forwardRef11(
 );
 
 // src/List/List.tsx
-import { useClassNames as useClassNames28 } from "@marigold/system";
+import { useClassNames as useClassNames29 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext4, useContext as useContext4 } from "react";
-var ListContext = createContext4({});
+import { createContext as createContext3, useContext as useContext4 } from "react";
+var ListContext = createContext3({});
 var useListContext = () => useContext4(ListContext);
 
 // src/List/ListItem.tsx
@@ -2452,32 +2423,32 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = useClassNames28({ component: "List", variant, size });
+  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 }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import { useRef as useRef18 } from "react";
+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 useClassNames30 } from "@marigold/system";
+import { useClassNames as useClassNames31 } from "@marigold/system";
 
 // src/Menu/Context.ts
 import {
-  createContext as createContext5,
+  createContext as createContext4,
   useContext as useContext5
 } from "react";
-var MenuContext = createContext5({});
+var MenuContext = createContext4({});
 var useMenuContext = () => useContext5(MenuContext);
 
 // src/Menu/MenuItem.tsx
-import { useRef as useRef16 } from "react";
+import { useRef as useRef14 } from "react";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
-import { mergeProps as mergeProps10 } from "@react-aria/utils";
+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 = ({
@@ -2486,7 +2457,7 @@ var MenuItem = ({
   onAction,
   className
 }) => {
-  const ref = useRef16(null);
+  const ref = useRef14(null);
   const { onClose } = useMenuContext();
   const { menuItemProps } = useMenuItem(
     {
@@ -2507,7 +2478,7 @@ var MenuItem = ({
     {
       ref,
       className,
-      ...mergeProps10(
+      ...mergeProps9(
         props,
         { onPointerDown: onPointerUp },
         stateProps,
@@ -2520,17 +2491,17 @@ var MenuItem = ({
 
 // src/Menu/MenuSection.tsx
 import { useMenuSection } from "@react-aria/menu";
-import { useClassNames as useClassNames29 } from "@marigold/system";
-import { Fragment as Fragment7, jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
+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 = useClassNames29({ component: "Menu" });
-  return /* @__PURE__ */ jsxs23(Fragment7, { children: [
+  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__ */ jsxs23("li", { ...itemProps, children: [
+    /* @__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,
@@ -2548,22 +2519,22 @@ var MenuSection = ({ onAction, item, state }) => {
 var MenuSection_default = MenuSection;
 
 // src/Menu/MenuTrigger.tsx
-import { Children as Children6, useRef as useRef17 } from "react";
-import { PressResponder as PressResponder2 } from "@react-aria/interactions";
+import { Children as Children5, useRef as useRef15 } from "react";
+import { PressResponder } from "@react-aria/interactions";
 import { useMenuTrigger } from "@react-aria/menu";
-import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
+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 jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
 var MenuTrigger = ({
   disabled,
   open,
   onOpenChange,
   children
 }) => {
-  const [menuTrigger, menu] = Children6.toArray(children);
-  const menuTriggerRef = useRef17(null);
-  const menuRef = useObjectRef4();
+  const [menuTrigger, menu] = Children5.toArray(children);
+  const menuTriggerRef = useRef15(null);
+  const menuRef = useObjectRef3();
   const state = useMenuTriggerState({
     isOpen: open,
     onOpenChange
@@ -2581,9 +2552,9 @@ var MenuTrigger = ({
     autoFocus: state.focusStrategy
   };
   const isSmallScreen = useSmallScreen();
-  return /* @__PURE__ */ jsxs24(MenuContext.Provider, { value: menuContext, children: [
+  return /* @__PURE__ */ jsxs23(MenuContext.Provider, { value: menuContext, children: [
     /* @__PURE__ */ jsx58(
-      PressResponder2,
+      PressResponder,
       {
         ...menuTriggerProps,
         ref: menuTriggerRef,
@@ -2600,11 +2571,11 @@ import { jsx as jsx59 } from "react/jsx-runtime";
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
-  const ref = useRef18(null);
+  const ref = useRef16(null);
   const state = useTreeState2({ ...ownProps, selectionMode: "none" });
   const { menuProps } = useMenu(ownProps, state, ref);
   useSyncRef({ ref: scrollRef }, ref);
-  const classNames2 = useClassNames30({ component: "Menu", variant, size });
+  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(
@@ -2635,18 +2606,34 @@ Menu.Section = Section;
 
 // src/Menu/ActionMenu.tsx
 import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs24 } from "react/jsx-runtime";
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ jsxs25(Menu.Trigger, { children: [
+  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 })
   ] });
 };
 
 // src/Message/Message.tsx
-import { cn as cn29, useClassNames as useClassNames31 } from "@marigold/system";
-import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
+import { cn as cn30, useClassNames as useClassNames32 } from "@marigold/system";
+import { jsx as jsx61, jsxs as jsxs25 } from "react/jsx-runtime";
 var icons = {
+  success: () => /* @__PURE__ */ jsx61(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      children: /* @__PURE__ */ jsx61(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  ),
   info: () => /* @__PURE__ */ jsx61(
     "svg",
     {
@@ -2703,105 +2690,139 @@ var Message = ({
   children,
   ...props
 }) => {
-  const classNames2 = useClassNames31({ component: "Message", variant, size });
+  const classNames2 = useClassNames32({ component: "Message", variant, size });
   const Icon3 = icons[variant];
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
-      className: cn29(
+      className: cn30(
         "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
         classNames2.container
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx61("div", { className: cn29("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx61(Icon3, {}) }),
+        /* @__PURE__ */ jsx61("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx61(Icon3, {}) }),
         /* @__PURE__ */ jsx61(
           "div",
           {
-            className: cn29("col-start-2 row-start-1 self-center", classNames2.title),
+            className: cn30("col-start-2 row-start-1 self-center", classNames2.title),
             children: messageTitle
           }
         ),
-        /* @__PURE__ */ jsx61("div", { className: cn29("col-start-2", classNames2.content), children })
+        /* @__PURE__ */ jsx61("div", { className: cn30("col-start-2", classNames2.content), children })
       ]
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { forwardRef as forwardRef12 } from "react";
-import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
-import { useLocale as useLocale4 } from "@react-aria/i18n";
-import { useHover as useHover5 } from "@react-aria/interactions";
-import { useNumberField } from "@react-aria/numberfield";
-import { mergeProps as mergeProps12, useObjectRef as useObjectRef5 } from "@react-aria/utils";
-import { useNumberFieldState } from "@react-stately/numberfield";
-import { cn as cn31, useClassNames as useClassNames32, useStateProps as useStateProps11 } from "@marigold/system";
+import { forwardRef as forwardRef13 } from "react";
+import { Group, NumberField } from "react-aria-components";
+import { cn as cn33, useClassNames as useClassNames34 } from "@marigold/system";
 
-// src/NumberField/StepButton.tsx
-import { useRef as useRef19 } from "react";
-import { useButton as useButton4 } from "@react-aria/button";
-import { useHover as useHover4 } from "@react-aria/interactions";
-import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { cn as cn30, useStateProps as useStateProps10 } from "@marigold/system";
-import { jsx as jsx62 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx62("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx62(
-  "path",
-  {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
-  }
-) });
-var Minus = () => /* @__PURE__ */ jsx62("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx62(
-  "path",
-  {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
-  }
-) });
-var StepButton = ({
-  direction,
-  className,
-  ...props
-}) => {
-  const ref = useRef19(null);
-  const { buttonProps, isPressed } = useButton4(
-    { ...props, elementType: "div" },
-    ref
-  );
-  const { hoverProps, isHovered } = useHover4(props);
-  const stateProps = useStateProps10({
-    active: isPressed,
-    hover: isHovered,
-    disabled: props.isDisabled
-  });
+// 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
+        ]
+      }
+    );
+  }
+);
+
+// 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(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+  }
+) });
+var Minus = () => /* @__PURE__ */ jsx63("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx63(
+  "path",
+  {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+  }
+) });
+var _StepButton = ({ direction, className, ...props }) => {
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx62(
-    "div",
+  return /* @__PURE__ */ jsx63(
+    Button2,
     {
-      className: cn30(
+      className: cn32(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
         ],
         className
       ),
-      ...mergeProps11(buttonProps, hoverProps),
-      ...stateProps,
-      children: /* @__PURE__ */ jsx62(Icon3, {})
+      ...props,
+      children: /* @__PURE__ */ jsx63(Icon3, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx63, jsxs as jsxs27 } from "react/jsx-runtime";
-var NumberField = forwardRef12(
+import { jsx as jsx64, jsxs as jsxs27 } from "react/jsx-runtime";
+var _NumberField = forwardRef13(
   ({
     variant,
     size,
-    width,
     disabled,
     required,
     readOnly,
@@ -2809,140 +2830,87 @@ var NumberField = forwardRef12(
     hideStepper,
     ...rest
   }, ref) => {
+    const classNames2 = useClassNames34({
+      component: "NumberField",
+      size,
+      variant
+    });
     const props = {
       isDisabled: disabled,
-      isRequired: required,
       isReadOnly: readOnly,
-      validationState: error ? "invalid" : "valid",
+      isInvalid: error,
+      isRequired: required,
       ...rest
     };
     const showStepper = !hideStepper;
-    const { locale } = useLocale4();
-    const inputRef = useObjectRef5(ref);
-    const state = useNumberFieldState({ ...props, locale });
-    const {
-      labelProps,
-      groupProps,
-      inputProps,
-      descriptionProps,
-      errorMessageProps,
-      incrementButtonProps,
-      decrementButtonProps
-    } = useNumberField(props, state, inputRef);
-    const { hoverProps, isHovered } = useHover5({ isDisabled: disabled });
-    const { focusProps, isFocused } = useFocusRing6({
-      within: true,
-      isTextInput: true,
-      autoFocus: props.autoFocus
-    });
-    const stateProps = useStateProps11({
-      hover: isHovered,
-      focus: isFocused,
-      disabled,
-      error,
-      readOnly,
-      required
-    });
-    const classNames2 = useClassNames32({
-      component: "NumberField",
-      size,
-      variant
-    });
-    return /* @__PURE__ */ jsx63(
-      FieldBase,
-      {
-        label: props.label,
-        labelProps,
-        description: props.description,
-        descriptionProps,
-        error,
-        errorMessage: props.errorMessage,
-        errorMessageProps,
-        stateProps,
-        variant,
-        size,
-        width,
-        children: /* @__PURE__ */ jsxs27(
-          "div",
-          {
-            "data-group": true,
-            className: cn31("flex items-stretch", classNames2.group),
-            "data-testid": "number-field-container",
-            ...mergeProps12(groupProps, focusProps, hoverProps),
-            ...stateProps,
-            children: [
-              showStepper && /* @__PURE__ */ jsx63(
-                StepButton,
-                {
-                  className: classNames2.stepper,
-                  direction: "down",
-                  ...decrementButtonProps
-                }
-              ),
-              /* @__PURE__ */ jsx63("div", { className: "flex-1", children: /* @__PURE__ */ jsx63(
-                Input,
-                {
-                  ref: inputRef,
-                  variant,
-                  size,
-                  ...inputProps,
-                  ...stateProps
-                }
-              ) }),
-              showStepper && /* @__PURE__ */ jsx63(
-                StepButton,
-                {
-                  className: classNames2.stepper,
-                  direction: "up",
-                  ...incrementButtonProps
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
+    return /* @__PURE__ */ jsx64(FieldBase2, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group, { className: cn33("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ jsx64(
+        _StepButton,
+        {
+          className: classNames2.stepper,
+          direction: "down",
+          slot: "decrement"
+        }
+      ),
+      /* @__PURE__ */ jsx64("div", { className: "flex-1", children: /* @__PURE__ */ jsx64(
+        _Input,
+        {
+          ref,
+          variant,
+          size,
+          className: classNames2.input
+        }
+      ) }),
+      showStepper && /* @__PURE__ */ jsx64(
+        _StepButton,
+        {
+          className: classNames2.stepper,
+          direction: "up",
+          slot: "increment"
+        }
+      )
+    ] }) });
   }
 );
 
 // src/Provider/index.ts
-import { useTheme as useTheme4, ThemeProvider as ThemeProvider2 } from "@marigold/system";
+import { useTheme as useTheme5, ThemeProvider as ThemeProvider2 } from "@marigold/system";
 
 // src/Provider/MarigoldProvider.tsx
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   ThemeProvider,
   defaultTheme,
-  useTheme as useTheme3
+  useTheme as useTheme4
 } from "@marigold/system";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function MarigoldProvider({
   children,
   theme
 }) {
-  const outerTheme = useTheme3();
+  const outerTheme = useTheme4();
   const isTopLevel = outerTheme === defaultTheme;
-  return /* @__PURE__ */ jsx64(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx64(OverlayProvider, { children }) : children });
+  return /* @__PURE__ */ jsx65(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx65(OverlayProvider, { children }) : children });
 }
 
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef13
+  forwardRef as forwardRef14
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn33, useClassNames as useClassNames34 } from "@marigold/system";
+import { cn as cn35, useClassNames as useClassNames36 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext6, useContext as useContext6 } from "react";
-var RadioGroupContext = createContext6(
+import { createContext as createContext5, useContext as useContext6 } from "react";
+var RadioGroupContext = createContext5(
   null
 );
 var useRadioGroupContext = () => useContext6(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn32, useClassNames as useClassNames33 } from "@marigold/system";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { cn as cn34, useClassNames as useClassNames35 } from "@marigold/system";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
   size,
@@ -2958,7 +2926,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = useClassNames33({ component: "Radio", variant, size });
+  const classNames2 = useClassNames35({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2966,7 +2934,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     FieldBase2,
     {
       as: RadioGroup,
@@ -2977,18 +2945,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ jsx65(
+      children: /* @__PURE__ */ jsx66(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn32(
+          className: cn34(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx65(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ jsx66(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -2996,33 +2964,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment8, jsx as jsx66, jsxs as jsxs28 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx66("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx66("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx66(
+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(
   "div",
   {
-    className: cn33(
+    className: cn35(
       "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__ */ jsx66(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx67(Dot, {}) : null
   }
 );
-var _Radio = forwardRef13(
+var _Radio = forwardRef14(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = useClassNames34({
+    const classNames2 = useClassNames36({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ jsx66(
+    return /* @__PURE__ */ jsx67(
       Radio,
       {
         ref,
-        className: cn33(
+        className: cn35(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -3031,18 +2999,18 @@ var _Radio = forwardRef13(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs28(Fragment8, { children: [
-          /* @__PURE__ */ jsx66(
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs28(Fragment9, { children: [
+          /* @__PURE__ */ jsx67(
             Icon2,
             {
               checked: isSelected,
-              className: cn33(
+              className: cn35(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ jsx66("div", { className: classNames2.label, children })
+          /* @__PURE__ */ jsx67("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -3052,21 +3020,21 @@ _Radio.Group = _RadioGroup;
 
 // src/Select/Select.tsx
 import {
-  forwardRef as forwardRef14,
-  useRef as useRef20
+  forwardRef as forwardRef15,
+  useRef as useRef17
 } from "react";
-import { useButton as useButton5 } from "@react-aria/button";
-import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
+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 mergeProps13, useObjectRef as useObjectRef6 } from "@react-aria/utils";
+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 cn34,
-  useClassNames as useClassNames35,
+  cn as cn36,
+  useClassNames as useClassNames37,
   useSmallScreen as useSmallScreen2,
-  useStateProps as useStateProps12
+  useStateProps as useStateProps10
 } from "@marigold/system";
 
 // src/Select/intl.ts
@@ -3080,8 +3048,8 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-import { jsx as jsx67, jsxs as jsxs29 } from "react/jsx-runtime";
-var Select = forwardRef14(
+import { jsx as jsx68, jsxs as jsxs29 } from "react/jsx-runtime";
+var Select = forwardRef15(
   ({
     variant,
     size,
@@ -3103,8 +3071,8 @@ var Select = forwardRef14(
       onSelectionChange: onChange,
       ...rest
     };
-    const buttonRef = useObjectRef6(ref);
-    const listboxRef = useRef20(null);
+    const buttonRef = useObjectRef4(ref);
+    const listboxRef = useRef17(null);
     const state = useSelectState(props);
     const {
       labelProps,
@@ -3114,14 +3082,14 @@ var Select = forwardRef14(
       descriptionProps,
       errorMessageProps
     } = useSelect(props, state, buttonRef);
-    const { buttonProps } = useButton5(
+    const { buttonProps } = useButton3(
       { isDisabled: disabled, ...triggerProps },
       buttonRef
     );
-    const { focusProps, isFocusVisible } = useFocusRing7();
-    const classNames2 = useClassNames35({ component: "Select", variant, size });
+    const { focusProps, isFocusVisible } = useFocusRing6();
+    const classNames2 = useClassNames37({ component: "Select", variant, size });
     const isSmallScreen = useSmallScreen2();
-    const stateProps = useStateProps12({
+    const stateProps = useStateProps10({
       disabled,
       error,
       focusVisible: isFocusVisible,
@@ -3144,7 +3112,7 @@ var Select = forwardRef14(
         stateProps,
         disabled,
         children: [
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx68(
             HiddenSelect,
             {
               state,
@@ -3157,20 +3125,20 @@ var Select = forwardRef14(
           /* @__PURE__ */ jsxs29(
             "button",
             {
-              className: cn34(
+              className: cn36(
                 "flex w-full items-center justify-between gap-1 overflow-hidden",
                 classNames2.select
               ),
               ref: buttonRef,
-              ...mergeProps13(buttonProps, focusProps),
+              ...mergeProps10(buttonProps, focusProps),
               ...stateProps,
               children: [
-                /* @__PURE__ */ jsx67("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
-                /* @__PURE__ */ jsx67(ChevronDown, { className: "h-4 w-4" })
+                /* @__PURE__ */ jsx68("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
+                /* @__PURE__ */ jsx68(ChevronDown, { className: "h-4 w-4" })
               ]
             }
           ),
-          isSmallScreen ? /* @__PURE__ */ jsx67(Tray, { state, children: /* @__PURE__ */ jsx67(
+          isSmallScreen ? /* @__PURE__ */ jsx68(Tray, { state, children: /* @__PURE__ */ jsx68(
             ListBox,
             {
               ref: listboxRef,
@@ -3179,7 +3147,7 @@ var Select = forwardRef14(
               size,
               ...menuProps
             }
-          ) }) : /* @__PURE__ */ jsx67(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ jsx67(
+          ) }) : /* @__PURE__ */ jsx68(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ jsx68(
             ListBox,
             {
               ref: listboxRef,
@@ -3198,7 +3166,7 @@ Select.Option = Item5;
 Select.Section = Section2;
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -3206,12 +3174,12 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn35,
+  cn as cn37,
   width as twWidth3,
-  useClassNames as useClassNames36
+  useClassNames as useClassNames38
 } from "@marigold/system";
-import { jsx as jsx68, jsxs as jsxs30 } from "react/jsx-runtime";
-var _Slider = forwardRef15(
+import { jsx as jsx69, jsxs as jsxs30 } from "react/jsx-runtime";
+var _Slider = forwardRef16(
   ({
     thumbLabels,
     variant,
@@ -3220,7 +3188,7 @@ var _Slider = forwardRef15(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames36({
+    const classNames2 = useClassNames38({
       component: "Slider",
       variant,
       size
@@ -3232,7 +3200,7 @@ var _Slider = forwardRef15(
     return /* @__PURE__ */ jsxs30(
       Slider,
       {
-        className: cn35(
+        className: cn37(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -3240,16 +3208,16 @@ var _Slider = forwardRef15(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx68(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx68(SliderOutput, { className: cn35("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx68(
+          /* @__PURE__ */ jsx69(_Label, { children: props.children }),
+          /* @__PURE__ */ jsx69(SliderOutput, { className: cn37("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx69(
             SliderTrack,
             {
-              className: cn35("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx68(
+              className: cn37("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx69(
                 SliderThumb,
                 {
-                  className: cn35("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn37("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -3264,16 +3232,16 @@ var _Slider = forwardRef15(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
-var Split = (props) => /* @__PURE__ */ jsx69("div", { ...props, role: "separator", className: "grow" });
+import { jsx as jsx70 } from "react/jsx-runtime";
+var Split = (props) => /* @__PURE__ */ jsx70("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn36,
+  cn as cn38,
   gapSpace as gapSpace6
 } from "@marigold/system";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -3284,10 +3252,10 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx71(
     "div",
     {
-      className: cn36(
+      className: cn38(
         "flex flex-col",
         gapSpace6[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -3301,15 +3269,15 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef17 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn37,
+  cn as cn39,
   width as twWidth4,
-  useClassNames as useClassNames37
+  useClassNames as useClassNames39
 } from "@marigold/system";
-import { jsx as jsx71, jsxs as jsxs31 } from "react/jsx-runtime";
-var _Switch = forwardRef16(
+import { jsx as jsx72, jsxs as jsxs31 } from "react/jsx-runtime";
+var _Switch = forwardRef17(
   ({
     variant,
     size,
@@ -3320,7 +3288,7 @@ var _Switch = forwardRef16(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames37({ component: "Switch", size, variant });
+    const classNames2 = useClassNames39({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3332,25 +3300,25 @@ var _Switch = forwardRef16(
       {
         ...props,
         ref,
-        className: cn37(
+        className: cn39(
           twWidth4[width],
           "group/switch",
           "flex items-center justify-between gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ jsx71(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ jsx71("div", { className: "relative", children: /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsx72(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ jsx72("div", { className: "relative", children: /* @__PURE__ */ jsx72(
             "div",
             {
-              className: cn37(
+              className: cn39(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ jsx71(
+              children: /* @__PURE__ */ jsx72(
                 "div",
                 {
-                  className: cn37(
+                  className: cn39(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -3369,7 +3337,7 @@ var _Switch = forwardRef16(
 );
 
 // src/Table/Table.tsx
-import { useRef as useRef27 } from "react";
+import { useRef as useRef24 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   TableBody as Body2,
@@ -3379,30 +3347,30 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn42, useClassNames as useClassNames39 } from "@marigold/system";
+import { cn as cn44, useClassNames as useClassNames41 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext7, useContext as useContext7 } from "react";
-var TableContext = createContext7({});
+import { createContext as createContext6, useContext as useContext7 } from "react";
+var TableContext = createContext6({});
 var useTableContext = () => useContext7(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ jsx72("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx73("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
-import { useRef as useRef21 } from "react";
-import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
+import { useRef as useRef18 } from "react";
+import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
-import { mergeProps as mergeProps14 } from "@react-aria/utils";
-import { useStateProps as useStateProps13 } from "@marigold/system";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { mergeProps as mergeProps11 } from "@react-aria/utils";
+import { useStateProps as useStateProps11 } from "@marigold/system";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var TableCell = ({ cell }) => {
-  const ref = useRef21(null);
+  const ref = useRef18(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -3421,14 +3389,14 @@ var TableCell = ({ cell }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = useFocusRing8();
-  const stateProps = useStateProps13({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx73(
+  const { focusProps, isFocusVisible } = useFocusRing7();
+  const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ jsx74(
     "td",
     {
       ref,
       className: classNames2 == null ? void 0 : classNames2.cell,
-      ...mergeProps14(cellProps, focusProps),
+      ...mergeProps11(cellProps, focusProps),
       ...stateProps,
       children: cell.rendered
     }
@@ -3436,11 +3404,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { useRef as useRef22 } from "react";
-import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
+import { useRef as useRef19 } from "react";
+import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
-import { mergeProps as mergeProps15 } from "@react-aria/utils";
-import { cn as cn38, useStateProps as useStateProps14 } from "@marigold/system";
+import { mergeProps as mergeProps12 } from "@react-aria/utils";
+import { cn as cn40, useStateProps as useStateProps12 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3463,9 +3431,9 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef22(null);
+  const ref = useRef19(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -3478,36 +3446,36 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     useTableSelectionCheckbox({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = useFocusRing9();
-  const stateProps = useStateProps14({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx74(
+  const { focusProps, isFocusVisible } = useFocusRing8();
+  const stateProps = useStateProps12({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ jsx75(
     "td",
     {
       ref,
-      className: cn38("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
-      ...mergeProps15(gridCellProps, focusProps),
+      className: cn40("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      ...mergeProps12(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx74(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx75(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-import { useRef as useRef23 } from "react";
-import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
-import { useHover as useHover6 } from "@react-aria/interactions";
+import { useRef as useRef20 } from "react";
+import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
+import { useHover as useHover4 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
-import { mergeProps as mergeProps16 } from "@react-aria/utils";
+import { mergeProps as mergeProps13 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn39, useStateProps as useStateProps15 } from "@marigold/system";
+import { cn as cn41, useStateProps as useStateProps13 } from "@marigold/system";
 import { width as twWidth5 } from "@marigold/system";
-import { jsx as jsx75, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs32 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto"
 }) => {
   var _a, _b;
-  const ref = useRef23(null);
+  const ref = useRef20(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -3516,9 +3484,9 @@ var TableColumnHeader = ({
     state,
     ref
   );
-  const { hoverProps, isHovered } = useHover6({});
-  const { focusProps, isFocusVisible } = useFocusRing10();
-  const stateProps = useStateProps15({
+  const { hoverProps, isHovered } = useHover4({});
+  const { focusProps, isFocusVisible } = useFocusRing9();
+  const stateProps = useStateProps13({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -3527,12 +3495,12 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: cn39("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
-      ...mergeProps16(columnHeaderProps, hoverProps, focusProps),
+      className: cn41("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      ...mergeProps13(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       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__ */ jsx75(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx75(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx75(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__ */ jsx76(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx76(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx76(SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3540,36 +3508,36 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ jsx76("thead", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx77("thead", { ...rowGroupProps, children });
 };
 
 // src/Table/TableHeaderRow.tsx
-import { useRef as useRef24 } from "react";
+import { useRef as useRef21 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef24(null);
+  const ref = useRef21(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx77("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ jsx78("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-import { useRef as useRef25 } from "react";
-import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
-import { useHover as useHover7 } from "@react-aria/interactions";
+import { useRef as useRef22 } from "react";
+import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
+import { useHover as useHover5 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
-import { mergeProps as mergeProps17 } from "@react-aria/utils";
-import { cn as cn40, useClassNames as useClassNames38, useStateProps as useStateProps16 } from "@marigold/system";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { mergeProps as mergeProps14 } from "@react-aria/utils";
+import { cn as cn42, useClassNames as useClassNames40, useStateProps as useStateProps14 } from "@marigold/system";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
-  const ref = useRef25(null);
+  const ref = useRef22(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames38({
+  const classNames2 = useClassNames40({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3583,28 +3551,28 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = useFocusRing11({ within: true });
-  const { hoverProps, isHovered } = useHover7({
+  const { focusProps, isFocusVisible } = useFocusRing10({ within: true });
+  const { hoverProps, isHovered } = useHover5({
     isDisabled: disabled || !interactive
   });
-  const stateProps = useStateProps16({
+  const stateProps = useStateProps14({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx79(
     "tr",
     {
       ref,
-      className: cn40(
+      className: cn42(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
         classNames2 == null ? void 0 : classNames2.row
       ),
-      ...mergeProps17(rowProps, focusProps, hoverProps),
+      ...mergeProps14(rowProps, focusProps, hoverProps),
       ...stateProps,
       children
     }
@@ -3612,25 +3580,25 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import { useRef as useRef26 } from "react";
-import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
-import { useHover as useHover8 } from "@react-aria/interactions";
+import { useRef as useRef23 } from "react";
+import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
+import { useHover as useHover6 } from "@react-aria/interactions";
 import {
   useTableColumnHeader as useTableColumnHeader2,
   useTableSelectAllCheckbox
 } from "@react-aria/table";
-import { mergeProps as mergeProps18 } from "@react-aria/utils";
+import { mergeProps as mergeProps15 } from "@react-aria/utils";
 import {
-  cn as cn41,
+  cn as cn43,
   width as twWidth6,
-  useStateProps as useStateProps17
+  useStateProps as useStateProps15
 } from "@marigold/system";
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto"
 }) => {
-  const ref = useRef26(null);
+  const ref = useRef23(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -3640,30 +3608,30 @@ var TableSelectAllCell = ({
     ref
   );
   const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
-  const { hoverProps, isHovered } = useHover8({});
-  const { focusProps, isFocusVisible } = useFocusRing12();
-  const stateProps = useStateProps17({
+  const { hoverProps, isHovered } = useHover6({});
+  const { focusProps, isFocusVisible } = useFocusRing11();
+  const stateProps = useStateProps15({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx80(
     "th",
     {
       ref,
-      className: cn41(
+      className: cn43(
         twWidth6[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
       ),
-      ...mergeProps18(columnHeaderProps, hoverProps, focusProps),
+      ...mergeProps15(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx79(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx80(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx80, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs33 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
@@ -3672,7 +3640,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = useRef27(null);
+  const tableRef = useRef24(null);
   const state = useTableState({
     ...props,
     selectionMode,
@@ -3680,13 +3648,13 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames39({
+  const classNames2 = useClassNames41({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx81(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
@@ -3694,7 +3662,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn42(
+          className: cn44(
             "group/table",
             "border-collapse overflow-auto whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3702,17 +3670,17 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx80(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx80(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ jsx81(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx81(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx80(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx81(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
                     column
                   },
                   column.key
-                ) : /* @__PURE__ */ jsx80(
+                ) : /* @__PURE__ */ jsx81(
                   TableColumnHeader,
                   {
                     width: (_c = column.props) == null ? void 0 : _c.width,
@@ -3724,10 +3692,10 @@ var Table = ({
             ) }, headerRow.key)) }),
             /* @__PURE__ */ jsxs33(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx80(TableRow, { row, children: [...collection.getChildren(row.key)].map(
+                (row) => row.type === "item" && /* @__PURE__ */ jsx81(TableRow, { row, children: [...collection.getChildren(row.key)].map(
                   (cell) => {
                     var _a;
-                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx80(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx80(TableCell, { cell }, cell.key);
+                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx81(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx81(TableCell, { cell }, cell.key);
                   }
                 ) }, row.key)
               )
@@ -3746,7 +3714,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn43,
+  cn as cn45,
   createVar as createVar9,
   cursorStyle,
   fontWeight,
@@ -3754,10 +3722,10 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames40,
-  useTheme as useTheme5
+  useClassNames as useClassNames42,
+  useTheme as useTheme6
 } from "@marigold/system";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var Text2 = ({
   variant,
   size,
@@ -3770,17 +3738,17 @@ var Text2 = ({
   children,
   ...props
 }) => {
-  const theme = useTheme5();
-  const classNames2 = useClassNames40({
+  const theme = useTheme6();
+  const classNames2 = useClassNames42({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx82(
     "p",
     {
       ...props,
-      className: cn43(
+      className: cn45(
         classNames2,
         "text-[--color] outline-[--outline]",
         fontStyle && textStyle[fontStyle],
@@ -3803,145 +3771,61 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
-import { useHover as useHover9 } from "@react-aria/interactions";
-import { useTextField } from "@react-aria/textfield";
-import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
-import { useClassNames as useClassNames41, useStateProps as useStateProps18 } from "@marigold/system";
-import { jsx as jsx82 } from "react/jsx-runtime";
-var TextArea = forwardRef17(
+import { forwardRef as forwardRef18 } from "react";
+import { TextArea, TextField } from "react-aria-components";
+import { useClassNames as useClassNames43 } from "@marigold/system";
+import { jsx as jsx83 } from "react/jsx-runtime";
+var _TextArea = forwardRef18(
   ({
     variant,
     size,
-    width,
-    disabled,
     required,
+    disabled,
     readOnly,
     error,
     rows,
-    ...props
+    ...rest
   }, ref) => {
-    const { label, description, errorMessage } = props;
-    const textAreaRef = useObjectRef7(ref);
-    const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
-      {
-        inputElementType: "textarea",
-        isDisabled: disabled,
-        isRequired: required,
-        isReadOnly: readOnly,
-        validationState: error ? "invalid" : "valid",
-        ...props
-      },
-      textAreaRef
-    );
-    const { hoverProps, isHovered } = useHover9({});
-    const { focusProps, isFocusVisible } = useFocusRing13();
-    const stateProps = useStateProps18({
-      hover: isHovered,
-      focus: isFocusVisible,
-      disabled,
-      readOnly,
-      required,
-      error
-    });
-    const classNames2 = useClassNames41({ component: "TextArea", variant, size });
-    return /* @__PURE__ */ jsx82(
-      FieldBase,
-      {
-        label,
-        labelProps,
-        description,
-        descriptionProps,
-        error,
-        errorMessage,
-        errorMessageProps,
-        stateProps,
-        variant,
-        size,
-        width,
-        children: /* @__PURE__ */ jsx82(
-          "textarea",
-          {
-            className: classNames2,
-            ref: textAreaRef,
-            rows,
-            ...inputProps,
-            ...focusProps,
-            ...hoverProps
-          }
-        )
-      }
-    );
+    const classNames2 = useClassNames43({ component: "TextArea", variant, size });
+    const props = {
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isInvalid: error,
+      isRequired: required,
+      ...rest
+    };
+    return /* @__PURE__ */ jsx83(FieldBase2, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx83(TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef18 } from "react";
-import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
-import { useHover as useHover10 } from "@react-aria/interactions";
-import { useTextField as useTextField2 } from "@react-aria/textfield";
-import { mergeProps as mergeProps19, useObjectRef as useObjectRef8 } from "@react-aria/utils";
-import { useStateProps as useStateProps19 } from "@marigold/system";
-import { jsx as jsx83 } from "react/jsx-runtime";
-var TextField = forwardRef18(
-  ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
-    const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = useObjectRef8(ref);
-    const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField2(
-      {
-        isDisabled: disabled,
-        isRequired: required,
-        isReadOnly: readOnly,
-        validationState: error ? "invalid" : "valid",
-        ...props
-      },
-      inputRef
-    );
-    const { hoverProps, isHovered } = useHover10({});
-    const { focusProps, isFocused } = useFocusRing14({
-      isTextInput: true,
-      autoFocus
-    });
-    const stateProps = useStateProps19({
-      hover: isHovered,
-      focus: isFocused,
-      disabled,
-      error,
-      readOnly,
-      required
-    });
-    return /* @__PURE__ */ jsx83(
-      FieldBase,
-      {
-        label,
-        labelProps,
-        description,
-        descriptionProps,
-        error,
-        errorMessage,
-        errorMessageProps,
-        stateProps,
-        variant,
-        size,
-        width,
-        children: /* @__PURE__ */ jsx83(
-          Input,
-          {
-            ref: inputRef,
-            variant,
-            size,
-            ...mergeProps19(focusProps, inputProps, hoverProps)
-          }
-        )
-      }
-    );
+import { forwardRef as forwardRef19 } from "react";
+import { TextField as TextField2 } from "react-aria-components";
+import { jsx as jsx84 } from "react/jsx-runtime";
+var _TextField = forwardRef19(
+  ({
+    variant,
+    size,
+    required,
+    disabled,
+    readOnly,
+    error,
+    ...rest
+  }, ref) => {
+    const props = {
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isInvalid: error,
+      isRequired: required,
+      ...rest
+    };
+    return /* @__PURE__ */ jsx84(FieldBase2, { as: TextField2, ...props, children: /* @__PURE__ */ jsx84(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn44, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { cn as cn46, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3954,11 +3838,11 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx85(
     "div",
     {
       ...props,
-      className: cn44(
+      className: cn46(
         "grid",
         gapSpace7[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3971,126 +3855,64 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-import { useTooltip } from "@react-aria/tooltip";
-import { cn as cn45, useClassNames as useClassNames42 } from "@marigold/system";
-
-// src/Tooltip/Context.ts
-import { createContext as createContext8, useContext as useContext8 } from "react";
-var TooltipContext = createContext8({});
-var useTooltipContext = () => useContext8(TooltipContext);
+import { OverlayArrow, Tooltip } from "react-aria-components";
+import { cn as cn47, useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
-import { Children as Children7, useRef as useRef28 } from "react";
-import { FocusableProvider } from "@react-aria/focus";
-import { useOverlayPosition } from "@react-aria/overlays";
-import { useTooltipTrigger } from "@react-aria/tooltip";
-import { useTooltipTriggerState } from "@react-stately/tooltip";
-import { jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
-var TooltipTrigger = ({
-  disabled,
-  open,
+import { TooltipTrigger } from "react-aria-components";
+import { jsx as jsx86 } from "react/jsx-runtime";
+var _TooltipTrigger = ({
   delay = 1e3,
-  placement = "top",
   children,
+  disabled,
+  open,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = Children7.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
     isOpen: open,
-    delay,
-    placement
+    delay
   };
-  const tooltipTriggerRef = useRef28(null);
-  const overlayRef = useRef28(null);
-  const state = useTooltipTriggerState(props);
-  const { triggerProps, tooltipProps } = useTooltipTrigger(
-    props,
-    state,
-    tooltipTriggerRef
-  );
-  const {
-    overlayProps: positionProps,
-    placement: overlayPlacement,
-    arrowProps
-  } = useOverlayPosition({
-    placement: props.placement,
-    targetRef: tooltipTriggerRef,
-    offset: props.offset,
-    crossOffset: props.crossOffset,
-    isOpen: state.isOpen,
-    overlayRef
-  });
-  return /* @__PURE__ */ jsxs34(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps, children: [
-    tooltipTrigger,
-    /* @__PURE__ */ jsx85(
-      TooltipContext.Provider,
-      {
-        value: {
-          state,
-          overlayRef,
-          arrowProps,
-          placement: overlayPlacement,
-          ...tooltipProps,
-          ...positionProps
-        },
-        children: /* @__PURE__ */ jsx85(Overlay, { open: state.isOpen, children: tooltip })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx86(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx86, jsxs as jsxs35 } from "react/jsx-runtime";
-var Tooltip = ({ children, variant, size }) => {
-  const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
-  const { tooltipProps } = useTooltip({}, state);
-  const classNames2 = useClassNames42({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ jsxs35(
-    "div",
-    {
-      ...tooltipProps,
-      ...rest,
-      ref: overlayRef,
-      className: cn45("group/tooltip", classNames2.container),
-      "data-placement": placement,
-      children: [
-        /* @__PURE__ */ jsx86("div", { children }),
-        /* @__PURE__ */ jsx86(
-          "div",
-          {
-            ...arrowProps,
-            className: cn45("absolute h-0 w-0", classNames2.arrow)
-          }
-        )
-      ]
-    }
-  );
+import { jsx as jsx87, jsxs as jsxs34 } 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__ */ jsx87(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx87("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx87("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+    children
+  ] });
 };
-Tooltip.Trigger = TooltipTrigger;
+_Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/index.ts
 import { Item as Item6 } from "@react-stately/collections";
 
 // src/TagGroup/TagGroup.tsx
-import { useRef as useRef30 } from "react";
+import { useRef as useRef26 } from "react";
 import { useTagGroup } from "@react-aria/tag";
 import { useListState } from "@react-stately/list";
-import { useStateProps as useStateProps20 } from "@marigold/system";
+import { useStateProps as useStateProps16 } from "@marigold/system";
 
 // src/TagGroup/Tag.tsx
-import React3, { useRef as useRef29 } from "react";
-import { useButton as useButton6 } from "@react-aria/button";
-import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
+import React3, { useRef as useRef25 } from "react";
+import { useButton as useButton4 } from "@react-aria/button";
+import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
 import { useTag } from "@react-aria/tag";
-import { mergeProps as mergeProps20 } from "@react-aria/utils";
-import { cn as cn46, useClassNames as useClassNames43 } from "@marigold/system";
-import { jsx as jsx87, jsxs as jsxs36 } from "react/jsx-runtime";
+import { mergeProps as mergeProps16 } from "@react-aria/utils";
+import { cn as cn48, useClassNames as useClassNames45 } from "@marigold/system";
+import { jsx as jsx88, jsxs as jsxs35 } from "react/jsx-runtime";
 var CloseButton2 = ({ className, ...props }) => {
-  const ref = useRef29(null);
-  const { buttonProps } = useButton6({ ...props }, ref);
-  return /* @__PURE__ */ jsx87("button", { className, ...buttonProps, children: /* @__PURE__ */ jsx87("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx87("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" }) }) });
+  const ref = useRef25(null);
+  const { buttonProps } = useButton4({ ...props }, ref);
+  return /* @__PURE__ */ jsx88("button", { className, ...buttonProps, children: /* @__PURE__ */ jsx88("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx88("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, item, state, ...rest }) => {
   const props = {
@@ -4098,7 +3920,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     ...rest
   };
   let ref = React3.useRef(null);
-  let { focusProps } = useFocusRing15({ within: true });
+  let { focusProps } = useFocusRing12({ within: true });
   const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = useTag(
     {
       ...props,
@@ -4107,20 +3929,20 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     state,
     ref
   );
-  const classNames2 = useClassNames43({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx87(
+  const classNames2 = useClassNames45({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx88(
     "span",
     {
       ref,
-      ...mergeProps20(rowProps, focusProps),
+      ...mergeProps16(rowProps, focusProps),
       className: classNames2.tag,
-      children: /* @__PURE__ */ jsxs36("div", { ...gridCellProps, className: classNames2.gridCell, children: [
-        /* @__PURE__ */ jsx87("span", { children: item.rendered }),
-        allowsRemoving && /* @__PURE__ */ jsx87(
+      children: /* @__PURE__ */ jsxs35("div", { ...gridCellProps, className: classNames2.gridCell, children: [
+        /* @__PURE__ */ jsx88("span", { children: item.rendered }),
+        allowsRemoving && /* @__PURE__ */ jsx88(
           CloseButton2,
           {
             ...removeButtonProps,
-            className: cn46("flex items-center", classNames2.closeButton)
+            className: cn48("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -4129,7 +3951,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
 };
 
 // src/TagGroup/TagGroup.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 import { createElement } from "react";
 var TagGroup = ({
   width,
@@ -4143,14 +3965,14 @@ var TagGroup = ({
     validationState: error ? "invalid" : "valid",
     ...rest
   };
-  const inputRef = useRef30(null);
+  const inputRef = useRef26(null);
   const state = useListState(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = useTagGroup(props, state, inputRef);
-  const stateProps = useStateProps20({
+  const stateProps = useStateProps16({
     error,
     required
   });
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx89(
     FieldBase,
     {
       width,
@@ -4163,7 +3985,7 @@ var TagGroup = ({
       errorMessageProps,
       stateProps,
       ...gridProps,
-      children: /* @__PURE__ */ jsx88(
+      children: /* @__PURE__ */ jsx89(
         "div",
         {
           role: "presentation",
@@ -4195,10 +4017,10 @@ Tag2.Group = TagGroup;
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import { SVG as SVG6 } from "@marigold/system";
-import { jsx as jsx89, jsxs as jsxs37 } from "react/jsx-runtime";
-var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
+import { jsx as jsx90, jsxs as jsxs36 } from "react/jsx-runtime";
+var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
   SVG6,
   {
     id: "XLoader",
@@ -4208,13 +4030,13 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ jsx89("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -4227,12 +4049,12 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -4245,12 +4067,12 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -4263,12 +4085,12 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -4281,12 +4103,12 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -4299,12 +4121,12 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -4317,12 +4139,12 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -4335,12 +4157,12 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -4353,12 +4175,12 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -4371,12 +4193,12 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -4389,12 +4211,12 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -4412,43 +4234,43 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
 ));
 
 // src/Tabs/Tabs.tsx
-import { useRef as useRef33 } from "react";
+import { useRef as useRef29 } from "react";
 import { useTabList } from "@react-aria/tabs";
 import { Item as Item7 } from "@react-stately/collections";
 import { useTabListState } from "@react-stately/tabs";
-import { cn as cn49, gapSpace as gapSpace8, useClassNames as useClassNames44 } from "@marigold/system";
+import { cn as cn51, gapSpace as gapSpace8, useClassNames as useClassNames46 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext9, useContext as useContext9 } from "react";
-var TabContext = createContext9({});
-var useTabContext = () => useContext9(TabContext);
+import { createContext as createContext7, useContext as useContext8 } from "react";
+var TabContext = createContext7({});
+var useTabContext = () => useContext8(TabContext);
 
 // src/Tabs/Tab.tsx
-import { useRef as useRef31 } from "react";
-import { useFocus, useHover as useHover11 } from "@react-aria/interactions";
+import { useRef as useRef27 } from "react";
+import { useFocus, useHover as useHover7 } from "@react-aria/interactions";
 import { useTab } from "@react-aria/tabs";
-import { mergeProps as mergeProps21 } from "@react-aria/utils";
-import { cn as cn47, useStateProps as useStateProps21 } from "@marigold/system";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { mergeProps as mergeProps17 } from "@react-aria/utils";
+import { cn as cn49, useStateProps as useStateProps17 } from "@marigold/system";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
-  const ref = useRef31(null);
+  const ref = useRef27(null);
   const { tabProps, isSelected } = useTab({ key }, state, ref);
   const disabled = tabProps["aria-disabled"];
-  const { hoverProps, isHovered } = useHover11({
+  const { hoverProps, isHovered } = useHover7({
     isDisabled: disabled || isSelected
   });
   const { focusProps } = useFocus({});
-  const stateProps = useStateProps21({ active: isSelected, hover: isHovered });
+  const stateProps = useStateProps17({ active: isSelected, hover: isHovered });
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx91(
     "div",
     {
-      className: cn47(
+      className: cn49(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
-      ...mergeProps21(tabProps, stateProps, focusProps, hoverProps),
+      ...mergeProps17(tabProps, stateProps, focusProps, hoverProps),
       ref,
       children: rendered
     }
@@ -4456,21 +4278,21 @@ var Tab = ({ item, state }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-import { useRef as useRef32 } from "react";
+import { useRef as useRef28 } from "react";
 import { useTabPanel } from "@react-aria/tabs";
-import { cn as cn48 } from "@marigold/system";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { cn as cn50 } from "@marigold/system";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var TabPanel = ({ state, ...props }) => {
   var _a;
-  const ref = useRef32(null);
+  const ref = useRef28(null);
   const { tabPanelProps } = useTabPanel(props, state, ref);
   const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx91("div", { className: cn48(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
+  return /* @__PURE__ */ jsx92("div", { className: cn50(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx92, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs37 } from "react/jsx-runtime";
 var Tabs = ({
   space = 2,
   size = "medium",
@@ -4479,31 +4301,31 @@ var Tabs = ({
   ...rest
 }) => {
   var _a;
-  const ref = useRef33(null);
+  const ref = useRef29(null);
   const props = {
     isDisabled: disabled,
     ...rest
   };
   const state = useTabListState(props);
   const { tabListProps } = useTabList(props, state, ref);
-  const classNames2 = useClassNames44({
+  const classNames2 = useClassNames46({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ jsx92(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs38("div", { className: cn49(classNames2.container), children: [
-    /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx93(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs37("div", { className: cn51(classNames2.container), children: [
+    /* @__PURE__ */ jsx93(
       "div",
       {
-        className: cn49("flex", gapSpace8[space], classNames2.tabs),
+        className: cn51("flex", gapSpace8[space], classNames2.tabs),
         ...tabListProps,
         ref,
         children: [...state.collection].map((item) => {
-          return /* @__PURE__ */ jsx92(Tab, { item, state }, item.key);
+          return /* @__PURE__ */ jsx93(Tab, { item, state }, item.key);
         })
       }
     ),
-    /* @__PURE__ */ jsx92(TabPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key)
+    /* @__PURE__ */ jsx93(TabPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key)
   ] }) });
 };
 Tabs.Item = Item7;
@@ -4530,7 +4352,7 @@ export {
   Container,
   DateField,
   DatePicker,
-  Dialog,
+  _Dialog as Dialog,
   _Divider as Divider,
   FieldBase,
   FieldGroup,
@@ -4548,8 +4370,8 @@ export {
   MarigoldProvider,
   Menu,
   Message,
-  Modal,
-  NumberField,
+  _Modal as Modal,
+  _NumberField as NumberField,
   Overlay,
   Popover,
   _Radio as Radio,
@@ -4563,19 +4385,20 @@ export {
   Tabs,
   Tag2 as Tag,
   Text2 as Text,
-  TextArea,
-  TextField,
+  _TextArea as TextArea,
+  _TextField as TextField,
   ThemeProvider2 as ThemeProvider,
   Tiles,
-  Tooltip,
+  _Tooltip as Tooltip,
   Tray,
   TrayWrapper,
   Underlay,
   VisuallyHidden,
   XLoader,
   _Slider,
+  _TextArea,
   useAsyncList,
   useFieldGroupContext,
   useListData,
-  useTheme4 as useTheme
+  useTheme5 as useTheme
 };