@marigold/components 6.8.0 → 6.9.1

package/dist/index.js

@@ -52,7 +52,7 @@ __export(src_exports, {
   Container: () => Container,
   DateField: () => DateField,
   DatePicker: () => DatePicker,
-  Dialog: () => Dialog,
+  Dialog: () => _Dialog,
   Divider: () => _Divider,
   FieldBase: () => FieldBase,
   FieldGroup: () => FieldGroup,
@@ -70,8 +70,8 @@ __export(src_exports, {
   MarigoldProvider: () => MarigoldProvider,
   Menu: () => Menu,
   Message: () => Message,
-  Modal: () => Modal,
-  NumberField: () => NumberField,
+  Modal: () => _Modal,
+  NumberField: () => _NumberField,
   Overlay: () => Overlay,
   Popover: () => Popover,
   Radio: () => _Radio,
@@ -85,21 +85,22 @@ __export(src_exports, {
   Tabs: () => Tabs,
   Tag: () => Tag2,
   Text: () => Text2,
-  TextArea: () => TextArea,
-  TextField: () => TextField,
-  ThemeProvider: () => import_system52.ThemeProvider,
+  TextArea: () => _TextArea,
+  TextField: () => _TextField,
+  ThemeProvider: () => import_system55.ThemeProvider,
   Tiles: () => Tiles,
-  Tooltip: () => Tooltip,
+  Tooltip: () => _Tooltip,
   Tray: () => Tray,
   TrayWrapper: () => TrayWrapper,
   Underlay: () => Underlay,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   XLoader: () => XLoader,
   _Slider: () => _Slider,
+  _TextArea: () => _TextArea,
   useAsyncList: () => import_data.useAsyncList,
   useFieldGroupContext: () => useFieldGroupContext,
   useListData: () => import_data.useListData,
-  useTheme: () => import_system52.useTheme
+  useTheme: () => import_system55.useTheme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -698,62 +699,78 @@ var ListBox = (0, import_react10.forwardRef)(
 
 // src/Overlay/Modal.tsx
 var import_react11 = require("react");
-var import_focus2 = require("@react-aria/focus");
-var import_overlays = require("@react-aria/overlays");
-var import_utils7 = require("@react-aria/utils");
+var import_react_aria_components3 = require("react-aria-components");
+var import_system13 = require("@marigold/system");
 
 // src/Overlay/Underlay.tsx
+var import_react_aria_components2 = require("react-aria-components");
 var import_system12 = require("@marigold/system");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var Underlay = ({ size, variant, ...props }) => {
+var Underlay = ({
+  size,
+  variant,
+  open,
+  dismissable,
+  keyboardDismissable,
+  ...rest
+}) => {
   const classNames2 = (0, import_system12.useClassNames)({ component: "Underlay", size, variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: (0, import_system12.cn)("fixed inset-0 z-40", classNames2), ...props });
+  const props = {
+    isOpen: open,
+    isDismissable: dismissable,
+    isKeyboardDismissDisabled: keyboardDismissable,
+    ...rest
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_react_aria_components2.ModalOverlay,
+    {
+      className: ({ isEntering, isExiting }) => (0, import_system12.cn)(
+        "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
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Modal = (0, import_react11.forwardRef)(
-  ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
-    const modalRef = (0, import_utils7.useObjectRef)(ref);
-    const { overlayProps, underlayProps } = (0, import_overlays.useOverlay)(
-      {
-        isOpen: open,
-        onClose,
-        isDismissable: dismissable,
-        isKeyboardDismissDisabled: !keyboardDismissable
-      },
-      modalRef
-    );
-    (0, import_overlays.usePreventScroll)();
-    const { modalProps } = (0, import_overlays.useModal)({});
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_focus2.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Underlay, { ...underlayProps, variant: "modal" }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        "div",
-        {
-          className: "pointer-none fixed inset-0 z-50 flex items-center justify-center",
-          ref: modalRef,
-          ...(0, import_utils7.mergeProps)(props, overlayProps, modalProps),
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { pointerEvents: "auto" }, children })
-        }
-      )
-    ] });
-  }
-);
+var _Modal = (0, import_react11.forwardRef)(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
+  const theme = (0, import_system13.useTheme)();
+  const props = {
+    isOpen: open,
+    isDismissable: dismissable,
+    isKeyboardDismissDisabled: keyboardDismissable,
+    ...rest
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    Underlay,
+    {
+      dismissable,
+      keyboardDismissable,
+      open,
+      variant: "modal",
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components3.Modal, { ref, "data-theme": theme.name, ...props, children: props.children })
+    }
+  );
+});
 
 // src/Overlay/Overlay.tsx
 var import_react12 = require("react");
-var import_overlays2 = require("@react-aria/overlays");
-var import_system13 = require("@marigold/system");
+var import_overlays = require("@react-aria/overlays");
+var import_system14 = require("@marigold/system");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var Overlay = ({ children, container, open }) => {
   const nodeRef = (0, import_react12.useRef)(null);
-  const theme = (0, import_system13.useTheme)();
+  const theme = (0, import_system14.useTheme)();
   let mountOverlay = open;
   if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_overlays2.Overlay, { portalContainer: container, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_overlays.Overlay, { portalContainer: container, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       ref: nodeRef,
@@ -767,9 +784,9 @@ var Overlay = ({ children, container, open }) => {
 
 // src/Overlay/Popover.tsx
 var import_react13 = require("react");
-var import_focus3 = require("@react-aria/focus");
-var import_overlays3 = require("@react-aria/overlays");
-var import_system14 = require("@marigold/system");
+var import_focus2 = require("@react-aria/focus");
+var import_overlays2 = require("@react-aria/overlays");
+var import_system15 = require("@marigold/system");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var Popover = (0, import_react13.forwardRef)(
   (props, ref) => {
@@ -787,7 +804,7 @@ var PopoverWrapper = (0, import_react13.forwardRef)(
     keyboardDismissDisabled,
     ...props
   }, ref) => {
-    const { popoverProps, underlayProps, placement } = (0, import_overlays3.usePopover)(
+    const { popoverProps, underlayProps, placement } = (0, import_overlays2.usePopover)(
       {
         ...props,
         isNonModal,
@@ -797,11 +814,11 @@ var PopoverWrapper = (0, import_react13.forwardRef)(
       },
       state
     );
-    const classNames2 = (0, import_system14.useClassNames)({
+    const classNames2 = (0, import_system15.useClassNames)({
       component: "Popover",
       variant: placement
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_focus3.FocusScope, { restoreFocus: true, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_focus2.FocusScope, { restoreFocus: true, children: [
       !isNonModal && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Underlay, { ...underlayProps }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
         "div",
@@ -815,9 +832,9 @@ var PopoverWrapper = (0, import_react13.forwardRef)(
           ref,
           role: "presentation",
           children: [
-            !isNonModal && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_overlays3.DismissButton, { onDismiss: state.close }),
+            !isNonModal && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_overlays2.DismissButton, { onDismiss: state.close }),
             children,
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_overlays3.DismissButton, { onDismiss: state.close })
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_overlays2.DismissButton, { onDismiss: state.close })
           ]
         }
       )
@@ -827,19 +844,29 @@ var PopoverWrapper = (0, import_react13.forwardRef)(
 
 // src/Overlay/Tray.tsx
 var import_react14 = require("react");
-var import_focus4 = require("@react-aria/focus");
-var import_overlays4 = require("@react-aria/overlays");
-var import_utils8 = require("@react-aria/utils");
+var import_focus3 = require("@react-aria/focus");
+var import_overlays3 = require("@react-aria/overlays");
+var import_utils7 = require("@react-aria/utils");
+
+// src/Overlay/_Underlay.tsx
+var import_system16 = require("@marigold/system");
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var Underlay2 = ({ size, variant, ...props }) => {
+  const classNames2 = (0, import_system16.useClassNames)({ component: "Underlay", size, variant });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: (0, import_system16.cn)("fixed inset-0 z-40", classNames2), ...props });
+};
+
+// src/Overlay/Tray.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var Tray = (0, import_react14.forwardRef)(
   ({ state, children, ...props }, ref) => {
-    const trayRef = (0, import_utils8.useObjectRef)(ref);
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Overlay, { open: state.isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TrayWrapper, { state, ...props, ref: trayRef, children }) });
+    const trayRef = (0, import_utils7.useObjectRef)(ref);
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Overlay, { open: state.isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TrayWrapper, { state, ...props, ref: trayRef, children }) });
   }
 );
 var TrayWrapper = (0, import_react14.forwardRef)(
   ({ children, state, ...props }, ref) => {
-    let { modalProps, underlayProps } = (0, import_overlays4.useModalOverlay)(
+    let { modalProps, underlayProps } = (0, import_overlays3.useModalOverlay)(
       {
         ...props,
         isDismissable: true
@@ -847,7 +874,7 @@ var TrayWrapper = (0, import_react14.forwardRef)(
       state,
       ref
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_focus4.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Underlay, { ...underlayProps, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_focus3.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Underlay2, { ...underlayProps, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       "div",
       {
         ...modalProps,
@@ -855,9 +882,9 @@ var TrayWrapper = (0, import_react14.forwardRef)(
         className: "absolute bottom-0 w-full",
         "data-testid": "tray",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_overlays4.DismissButton, { onDismiss: state.close }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_overlays3.DismissButton, { onDismiss: state.close }),
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_overlays4.DismissButton, { onDismiss: state.close })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_overlays3.DismissButton, { onDismiss: state.close })
         ]
       }
     ) }) });
@@ -867,11 +894,11 @@ var TrayWrapper = (0, import_react14.forwardRef)(
 // src/Autocomplete/ClearButton.tsx
 var import_react15 = require("react");
 var import_button2 = require("@react-aria/button");
-var import_focus5 = require("@react-aria/focus");
+var import_focus4 = require("@react-aria/focus");
 var import_interactions = require("@react-aria/interactions");
-var import_utils9 = require("@react-aria/utils");
-var import_system15 = require("@marigold/system");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_utils8 = require("@react-aria/utils");
+var import_system17 = require("@marigold/system");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var ClearButton = ({
   preventFocus,
   disabled,
@@ -888,7 +915,7 @@ var ClearButton = ({
 }) => {
   const buttonRef = (0, import_react15.useRef)(null);
   const { hoverProps, isHovered } = (0, import_interactions.useHover)({ isDisabled: disabled });
-  const { isFocusVisible, focusProps } = (0, import_focus5.useFocusRing)({
+  const { isFocusVisible, focusProps } = (0, import_focus4.useFocusRing)({
     autoFocus: props.autoFocus
   });
   const { buttonProps, isPressed } = (0, import_button2.useButton)(
@@ -909,22 +936,22 @@ var ClearButton = ({
   if (preventFocus) {
     delete buttonProps.tabIndex;
   }
-  const stateProps = (0, import_system15.useStateProps)({
+  const stateProps = (0, import_system17.useStateProps)({
     active: isPressed,
     focusVisible: isFocusVisible,
     hover: isHovered
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "button",
     {
-      ...(0, import_utils9.mergeProps)(buttonProps, focusProps, hoverProps, props),
+      ...(0, import_utils8.mergeProps)(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       ref: buttonRef,
-      className: (0, import_system15.cn)(
+      className: (0, import_system17.cn)(
         "cursor-pointer appearance-none border-none p-0 pr-1",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -932,7 +959,7 @@ var ClearButton = ({
           fill: "currentColor",
           width: 20,
           height: 20,
-          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("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__ */ (0, import_jsx_runtime21.jsx)("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" })
         }
       )
     }
@@ -940,8 +967,8 @@ var ClearButton = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
-var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -950,7 +977,7 @@ var SearchIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     width: 24,
     height: 24,
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime22.jsx)("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 = ({
@@ -1005,8 +1032,8 @@ var Autocomplete = ({
     state
   );
   const { isDisabled, ...restClearButtonProps } = clearButtonProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       FieldBase,
       {
         label: props.label,
@@ -1016,13 +1043,13 @@ var Autocomplete = ({
         errorMessage: props.errorMessage,
         disabled,
         width,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           Input,
           {
             ...inputProps,
             ref: inputRef,
-            icon: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SearchIcon, {}),
-            action: state.inputValue !== "" ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SearchIcon, {}),
+            action: state.inputValue !== "" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               ClearButton,
               {
                 preventFocus: true,
@@ -1034,7 +1061,7 @@ var Autocomplete = ({
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       Popover,
       {
         state,
@@ -1042,7 +1069,7 @@ var Autocomplete = ({
         triggerRef: inputRef,
         scrollRef: listBoxRef,
         isNonModal: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ListBox, { ref: listBoxRef, state, ...listBoxProps })
       }
     )
   ] });
@@ -1058,23 +1085,23 @@ var import_combobox3 = require("@react-stately/combobox");
 
 // src/Button/Button.tsx
 var import_react17 = require("react");
-var import_react_aria_components2 = require("react-aria-components");
-var import_system16 = require("@marigold/system");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_react_aria_components4 = require("react-aria-components");
+var import_system18 = require("@marigold/system");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var _Button = (0, import_react17.forwardRef)(
   ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
-    const classNames2 = (0, import_system16.useClassNames)({
+    const classNames2 = (0, import_system18.useClassNames)({
       component: "Button",
       variant,
       size,
       className
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      import_react_aria_components2.Button,
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      import_react_aria_components4.Button,
       {
         ...props,
         ref,
-        className: (0, import_system16.cn)(
+        className: (0, import_system18.cn)(
           "inline-flex items-center justify-center gap-[0.5ch]",
           classNames2,
           fullWidth ? "w-full" : void 0
@@ -1087,7 +1114,7 @@ var _Button = (0, import_react17.forwardRef)(
 );
 
 // src/ComboBox/ComboBox.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var ComboBox = ({
   error,
   width,
@@ -1127,8 +1154,8 @@ var ComboBox = ({
   );
   const errorMessageProps = { "aria-invalid": error };
   const { label, description, errorMessage } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       FieldBase,
       {
         label,
@@ -1138,25 +1165,25 @@ var ComboBox = ({
         errorMessage,
         errorMessageProps,
         width,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           Input,
           {
             ...inputProps,
             ref: inputRef,
-            action: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            action: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               _Button,
               {
                 className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0",
                 ref: buttonRef,
                 ...triggerProps,
-                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ChevronDown, { className: "h-4 w-4" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChevronDown, { className: "h-4 w-4" })
               }
             )
           }
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Popover,
       {
         state,
@@ -1164,7 +1191,7 @@ var ComboBox = ({
         triggerRef: inputRef,
         scrollRef: listBoxRef,
         isNonModal: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ListBox, { ref: listBoxRef, state, ...listBoxProps })
       }
     )
   ] });
@@ -1172,16 +1199,16 @@ var ComboBox = ({
 ComboBox.Item = import_collections3.Item;
 
 // src/Badge/Badge.tsx
-var import_system17 = require("@marigold/system");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_system19 = require("@marigold/system");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var Badge = ({ variant, size, children, ...props }) => {
-  const classNames2 = (0, import_system17.useClassNames)({ component: "Badge", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ...props, className: classNames2, children });
+  const classNames2 = (0, import_system19.useClassNames)({ component: "Badge", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...props, className: classNames2, children });
 };
 
 // src/Breakout/Breakout.tsx
-var import_system18 = require("@marigold/system");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_system20 = require("@marigold/system");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var Breakout = ({
   height,
   children,
@@ -1191,17 +1218,17 @@ var Breakout = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
-      className: (0, import_system18.cn)(
+      className: (0, import_system20.cn)(
         "col-start-[1_!important] col-end-[-1_!important] w-full",
-        alignX && ((_b = (_a = import_system18.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system18.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
+        alignX && ((_b = (_a = import_system20.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system20.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
         alignX || alignY ? "flex" : "block",
         "h-[--height]"
       ),
-      style: (0, import_system18.createVar)({ height }),
+      style: (0, import_system20.createVar)({ height }),
       ...props,
       children
     }
@@ -1209,16 +1236,16 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-var import_system19 = require("@marigold/system");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_system21 = require("@marigold/system");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Body = ({ children, variant, size, ...props }) => {
-  const classNames2 = (0, import_system19.useClassNames)({ component: "Body", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("section", { ...props, className: classNames2, children });
+  const classNames2 = (0, import_system21.useClassNames)({ component: "Body", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("section", { ...props, className: classNames2, children });
 };
 
 // src/Card/Card.tsx
-var import_system20 = require("@marigold/system");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_system22 = require("@marigold/system");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Card = ({
   children,
   variant,
@@ -1233,22 +1260,22 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames2 = (0, import_system20.useClassNames)({ component: "Card", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  const classNames2 = (0, import_system22.useClassNames)({ component: "Card", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system20.cn)(
+      className: (0, import_system22.cn)(
         "flex flex-col",
         classNames2,
-        import_system20.gapSpace[space],
-        import_system20.paddingSpace !== void 0 && import_system20.paddingSpace[p],
-        import_system20.paddingSpaceX !== void 0 && import_system20.paddingSpaceX[px],
-        import_system20.paddingSpaceY !== void 0 && import_system20.paddingSpaceY[py],
-        import_system20.paddingRight !== void 0 && import_system20.paddingRight[pr],
-        import_system20.paddingLeft !== void 0 && import_system20.paddingLeft[pl],
-        import_system20.paddingBottom !== void 0 && import_system20.paddingBottom[pb],
-        import_system20.paddingTop !== void 0 && import_system20.paddingTop[pt]
+        import_system22.gapSpace[space],
+        import_system22.paddingSpace !== void 0 && import_system22.paddingSpace[p],
+        import_system22.paddingSpaceX !== void 0 && import_system22.paddingSpaceX[px],
+        import_system22.paddingSpaceY !== void 0 && import_system22.paddingSpaceY[py],
+        import_system22.paddingRight !== void 0 && import_system22.paddingRight[pr],
+        import_system22.paddingLeft !== void 0 && import_system22.paddingLeft[pl],
+        import_system22.paddingBottom !== void 0 && import_system22.paddingBottom[pb],
+        import_system22.paddingTop !== void 0 && import_system22.paddingTop[pt]
       ),
       children
     }
@@ -1256,24 +1283,24 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-var import_system21 = require("@marigold/system");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_system23 = require("@marigold/system");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var Center = ({
   maxWidth = "100%",
   space = 0,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system21.cn)(
+      className: (0, import_system23.cn)(
         "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
-        import_system21.gapSpace[space],
+        import_system23.gapSpace[space],
         "max-w-[--maxWidth]"
       ),
-      style: (0, import_system21.createVar)({ maxWidth }),
+      style: (0, import_system23.createVar)({ maxWidth }),
       children
     }
   );
@@ -1281,10 +1308,10 @@ var Center = ({
 
 // src/Checkbox/Checkbox.tsx
 var import_react19 = require("react");
-var import_react_aria_components3 = require("react-aria-components");
-var import_system22 = require("@marigold/system");
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var CheckMark = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var import_react_aria_components5 = require("react-aria-components");
+var import_system24 = require("@marigold/system");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var CheckMark = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   "path",
   {
     fill: "currentColor",
@@ -1292,7 +1319,7 @@ var CheckMark = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg", { vie
     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__ */ (0, import_jsx_runtime29.jsx)("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var IndeterminateMark = () => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
   "path",
   {
     fill: "currentColor",
@@ -1301,11 +1328,11 @@ var IndeterminateMark = () => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("svg
   }
 ) });
 var Icon = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
       "aria-hidden": "true",
-      className: (0, import_system22.cn)(
+      className: (0, import_system24.cn)(
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
@@ -1313,7 +1340,7 @@ var Icon = ({ className, checked, indeterminate, ...props }) => {
         className
       ),
       ...props,
-      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(IndeterminateMark, {}) : checked ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CheckMark, {}) : null
+      children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IndeterminateMark, {}) : checked ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CheckMark, {}) : null
     }
   );
 };
@@ -1342,19 +1369,19 @@ var _Checkbox = (0, import_react19.forwardRef)(
       defaultSelected: defaultChecked,
       ...rest
     };
-    const classNames2 = (0, import_system22.useClassNames)({ component: "Checkbox", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      import_react_aria_components3.Checkbox,
+    const classNames2 = (0, import_system24.useClassNames)({ component: "Checkbox", variant, size });
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      import_react_aria_components5.Checkbox,
       {
         ref,
-        className: (0, import_system22.cn)(
+        className: (0, import_system24.cn)(
           "group/checkbox flex items-center gap-[0.5rem]",
           "cursor-pointer data-[disabled]:cursor-not-allowed",
           classNames2.container
         ),
         ...props,
-        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             Icon,
             {
               checked: isSelected,
@@ -1362,7 +1389,7 @@ var _Checkbox = (0, import_react19.forwardRef)(
               className: classNames2.checkbox
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: classNames2.label, children })
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -1370,17 +1397,17 @@ var _Checkbox = (0, import_react19.forwardRef)(
 );
 
 // src/Checkbox/CheckboxGroup.tsx
-var import_react_aria_components5 = require("react-aria-components");
-var import_system25 = require("@marigold/system");
+var import_react_aria_components7 = require("react-aria-components");
+var import_system27 = require("@marigold/system");
 
 // src/FieldBase/_FieldBase.tsx
 var import_react20 = require("react");
-var import_system24 = require("@marigold/system");
+var import_system26 = require("@marigold/system");
 
 // src/HelpText/_HelpText.tsx
-var import_react_aria_components4 = require("react-aria-components");
-var import_system23 = require("@marigold/system");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react_aria_components6 = require("react-aria-components");
+var import_system25 = require("@marigold/system");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var HelpText2 = ({
   variant,
   size,
@@ -1391,7 +1418,7 @@ var HelpText2 = ({
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
-  const classNames2 = (0, import_system23.useClassNames)({
+  const classNames2 = (0, import_system25.useClassNames)({
     component: "HelpText",
     variant,
     size
@@ -1399,33 +1426,33 @@ var HelpText2 = ({
   if (!description && !errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: (0, import_system23.cn)(classNames2.container), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
-      import_react_aria_components4.FieldError,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: (0, import_system25.cn)(classNames2.container), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+      import_react_aria_components6.FieldError,
       {
         ...props,
         className: "grid grid-flow-col items-center justify-start gap-1",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "svg",
             {
-              className: (0, import_system23.cn)("h-4 w-4", classNames2.icon),
+              className: (0, import_system25.cn)("h-4 w-4", classNames2.icon),
               viewBox: "0 0 24 24",
               role: "presentation",
               fill: "currentColor",
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components4.Text, { slot: "description", children: description })
+    !hasErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_aria_components6.Text, { slot: "description", children: description })
   ] });
 };
 
 // src/FieldBase/_FieldBase.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var fixedForwardRef = import_react20.forwardRef;
 var _FieldBase = (props, ref) => {
   const {
@@ -1438,24 +1465,26 @@ var _FieldBase = (props, ref) => {
     description,
     errorMessage,
     className,
+    stateProps,
     ...rest
   } = props;
-  const classNames2 = (0, import_system24.useClassNames)({
+  const classNames2 = (0, import_system26.useClassNames)({
     component: "Field",
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     Component,
     {
       ref,
-      className: (0, import_system24.cn)("group/field", import_system24.width[width], classNames2, className),
+      className: (0, import_system26.cn)("group/field", import_system26.width[width], classNames2, className),
       "data-required": props.isRequired ? true : void 0,
+      "data-error": props.isInvalid ? true : void 0,
       ...rest,
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(_Label, { variant, size, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { "aria-hidden": "true" }),
+        label ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(_Label, { variant, size, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { "aria-hidden": "true" }),
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           HelpText2,
           {
             variant,
@@ -1472,7 +1501,7 @@ var _FieldBase = (props, ref) => {
 var FieldBase2 = fixedForwardRef(_FieldBase);
 
 // src/Checkbox/CheckboxGroup.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var _CheckboxGroup = ({
   children,
   variant,
@@ -1483,7 +1512,7 @@ var _CheckboxGroup = ({
   error,
   ...rest
 }) => {
-  const classNames2 = (0, import_system25.useClassNames)({
+  const classNames2 = (0, import_system27.useClassNames)({
     component: "Checkbox",
     variant,
     size,
@@ -1497,13 +1526,13 @@ var _CheckboxGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(FieldBase2, { as: import_react_aria_components5.CheckboxGroup, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(FieldBase2, { as: import_react_aria_components7.CheckboxGroup, ...props, children });
 };
 
 // src/Columns/Columns.tsx
 var import_react21 = require("react");
-var import_system26 = require("@marigold/system");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_system28 = require("@marigold/system");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var Columns = ({
   space = 0,
   columns,
@@ -1519,22 +1548,22 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "div",
     {
-      className: (0, import_system26.cn)(
+      className: (0, import_system28.cn)(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
-        import_system26.gapSpace[space]
+        import_system28.gapSpace[space]
       ),
       ...props,
-      children: import_react21.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: import_react21.Children.map(children, (child, idx) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {
-          className: (0, import_system26.cn)(
+          className: (0, import_system28.cn)(
             "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
-          style: (0, import_system26.createVar)({ collapseAt, columnSize: columns[idx] }),
+          style: (0, import_system28.createVar)({ collapseAt, columnSize: columns[idx] }),
           children: (0, import_react21.isValidElement)(child) ? (0, import_react21.cloneElement)(child) : child
         }
       ))
@@ -1543,8 +1572,8 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-var import_system27 = require("@marigold/system");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_system29 = require("@marigold/system");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var content = {
   small: "20ch",
   medium: "45ch",
@@ -1564,44 +1593,30 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system27.cn)(
+      className: (0, import_system29.cn)(
         "grid",
-        import_system27.placeItems[alignItems],
-        import_system27.gridColsAlign[align],
-        import_system27.gridColumn[align]
+        import_system29.placeItems[alignItems],
+        import_system29.gridColsAlign[align],
+        import_system29.gridColumn[align]
       ),
-      style: (0, import_system27.createVar)({ maxWidth }),
+      style: (0, import_system29.createVar)({ maxWidth }),
       children
     }
   );
 };
 
 // src/Dialog/Dialog.tsx
-var import_react24 = require("react");
-var import_button3 = require("@react-aria/button");
-var import_dialog = require("@react-aria/dialog");
-var import_system30 = require("@marigold/system");
-
-// src/Header/Header.tsx
-var import_react_aria_components6 = require("react-aria-components");
-var import_system28 = require("@marigold/system");
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var _Header = ({ variant, size, ...props }) => {
-  const classNames2 = (0, import_system28.useClassNames)({
-    component: "Header",
-    variant,
-    size
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_aria_components6.Header, { className: classNames2, ...props, children: props.children });
-};
+var import_react23 = require("react");
+var import_react_aria_components10 = require("react-aria-components");
+var import_system31 = require("@marigold/system");
 
 // src/Headline/Headline.tsx
-var import_react_aria_components7 = require("react-aria-components");
-var import_system29 = require("@marigold/system");
+var import_react_aria_components8 = require("react-aria-components");
+var import_system30 = require("@marigold/system");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var _Headline = ({
   variant,
@@ -1612,20 +1627,20 @@ var _Headline = ({
   level = 1,
   ...props
 }) => {
-  const theme = (0, import_system29.useTheme)();
-  const classNames2 = (0, import_system29.useClassNames)({
+  const theme = (0, import_system30.useTheme)();
+  const classNames2 = (0, import_system30.useClassNames)({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
   });
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_react_aria_components7.Heading,
+    import_react_aria_components8.Heading,
     {
       level: Number(level),
       ...props,
-      className: (0, import_system29.cn)(classNames2, "text-[--color]", import_system29.textAlign[align]),
-      style: (0, import_system29.createVar)({
-        color: color && theme.colors && (0, import_system29.get)(
+      className: (0, import_system30.cn)(classNames2, "text-[--color]", import_system30.textAlign[align]),
+      style: (0, import_system30.createVar)({
+        color: color && theme.colors && (0, import_system30.get)(
           theme.colors,
           color.replace("-", "."),
           color
@@ -1637,96 +1652,50 @@ var _Headline = ({
   );
 };
 
-// src/Dialog/Context.ts
+// src/Dialog/DialogTrigger.tsx
 var import_react22 = require("react");
-var DialogContext = (0, import_react22.createContext)({});
-var useDialogContext = () => (0, import_react22.useContext)(DialogContext);
-
-// src/Dialog/DialogController.tsx
-var import_overlays5 = require("@react-stately/overlays");
+var import_react_aria_components9 = require("react-aria-components");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var DialogController = ({
-  children,
-  dismissable = true,
-  keyboardDismissable = true,
+var _DialogTrigger = ({
   open,
-  onOpenChange
+  dismissable,
+  keyboardDismissable,
+  ...rest
 }) => {
-  const state = (0, import_overlays5.useOverlayTriggerState)({
+  const props = {
     isOpen: open,
-    onOpenChange
-  });
-  const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Overlay, { open: state.isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
-    Modal,
-    {
-      open: state.isOpen,
-      onClose: state.close,
-      dismissable,
-      keyboardDismissable,
-      children
-    }
-  ) }) });
-};
-
-// src/Dialog/DialogTrigger.tsx
-var import_react23 = require("react");
-var import_interactions2 = require("@react-aria/interactions");
-var import_overlays6 = require("@react-stately/overlays");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-var DialogTrigger = ({
-  children,
-  dismissable = true,
-  keyboardDismissable = true
-}) => {
-  const [dialogTrigger, dialog] = import_react23.Children.toArray(children);
-  const dialogTriggerRef = (0, import_react23.useRef)(null);
-  const state = (0, import_overlays6.useOverlayTriggerState)({});
-  const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(DialogContext.Provider, { value: ctx, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      import_interactions2.PressResponder,
-      {
-        ref: dialogTriggerRef,
-        isPressed: state.isOpen,
-        onPress: state.toggle,
-        children: dialogTrigger
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Overlay, { open: state.isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-      Modal,
+    ...rest
+  };
+  const children = import_react22.Children.toArray(props.children);
+  const [dialogTrigger, dialog] = children;
+  const hasDialogTrigger = dialogTrigger.type !== _Dialog;
+  const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_aria_components9.DialogTrigger, { ...props, children: [
+    hasDialogTrigger && dialogTrigger,
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      _Modal,
       {
-        open: state.isOpen,
-        onClose: state.close,
         dismissable,
         keyboardDismissable,
-        children: dialog
+        children: currentDialog
       }
-    ) })
+    )
   ] });
 };
 
 // src/Dialog/Dialog.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var CloseButton = ({ className }) => {
-  const ref = (0, import_react24.useRef)(null);
-  const { close } = useDialogContext();
-  const { buttonProps } = (0, import_button3.useButton)(
-    {
-      onPress: () => close == null ? void 0 : close()
-    },
-    ref
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  const { close } = (0, import_react23.useContext)(import_react_aria_components10.OverlayTriggerStateContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "button",
     {
-      className: (0, import_system30.cn)(
+      className: (0, import_system31.cn)(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
-      ref,
-      ...buttonProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      onClick: close,
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -1737,62 +1706,70 @@ var CloseButton = ({ className }) => {
     }
   ) });
 };
-var addTitleProps = (children, titleProps) => {
-  const childs = import_react24.Children.toArray(children);
-  const titleIndex = childs.findIndex(
-    (child) => (0, import_react24.isValidElement)(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 = (0, import_react24.cloneElement)(
-    childs[titleIndex],
-    titleProps
-  );
-  childs.splice(titleIndex, 1, titleChild);
-  return childs;
-};
-var Dialog = ({
-  children,
+var DialogHeadline = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(_Headline, { slot: "title", children });
+var _Dialog = ({
   variant,
   size,
   closeButton,
+  isNonModal,
   ...props
 }) => {
-  const ref = (0, import_react24.useRef)(null);
-  const { close } = useDialogContext();
-  const { dialogProps, titleProps } = (0, import_dialog.useDialog)(props, ref);
-  const classNames2 = (0, import_system30.useClassNames)({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: classNames2.container, ...dialogProps, children: [
-    closeButton && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CloseButton, { className: classNames2.closeButton }),
-    typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps)
-  ] });
+  const classNames2 = (0, import_system31.useClassNames)({ component: "Dialog", variant, size });
+  let state = (0, import_react23.useContext)(import_react_aria_components10.OverlayTriggerStateContext);
+  let children = props.children;
+  if (typeof children === "function") {
+    children = children({
+      close: (state == null ? void 0 : state.close) || (() => {
+      })
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    import_react_aria_components10.Dialog,
+    {
+      ...props,
+      className: (0, import_system31.cn)("relative outline-none", classNames2.container),
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+        closeButton && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CloseButton, { className: classNames2.closeButton }),
+        children
+      ] })
+    }
+  );
 };
-Dialog.Trigger = DialogTrigger;
-Dialog.Controller = DialogController;
+_Dialog.Trigger = _DialogTrigger;
+_Dialog.Headline = DialogHeadline;
 
 // src/Divider/Divider.tsx
-var import_react_aria_components8 = require("react-aria-components");
-var import_system31 = require("@marigold/system");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react_aria_components11 = require("react-aria-components");
+var import_system32 = require("@marigold/system");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var _Divider = ({ variant, ...props }) => {
-  const classNames2 = (0, import_system31.useClassNames)({ component: "Divider", variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_aria_components8.Separator, { className: classNames2, ...props });
+  const classNames2 = (0, import_system32.useClassNames)({ component: "Divider", variant });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_aria_components11.Separator, { className: classNames2, ...props });
 };
 
 // src/Footer/Footer.tsx
-var import_system32 = require("@marigold/system");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_system33 = require("@marigold/system");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = (0, import_system32.useClassNames)({ component: "Footer", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("footer", { ...props, className: classNames2, children });
+  const classNames2 = (0, import_system33.useClassNames)({ component: "Footer", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("footer", { ...props, className: classNames2, children });
+};
+
+// src/Header/Header.tsx
+var import_react_aria_components12 = require("react-aria-components");
+var import_system34 = require("@marigold/system");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var _Header = ({ variant, size, ...props }) => {
+  const classNames2 = (0, import_system34.useClassNames)({
+    component: "Header",
+    variant,
+    size
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_aria_components12.Header, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Image/Image.tsx
-var import_system33 = require("@marigold/system");
+var import_system35 = require("@marigold/system");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var Image = ({
   variant,
@@ -1801,24 +1778,24 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = (0, import_system33.useClassNames)({ component: "Image", variant, size });
+  const classNames2 = (0, import_system35.useClassNames)({ component: "Image", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: (0, import_system33.cn)(
+      className: (0, import_system35.cn)(
         fit !== "none" && "h-full w-full",
         classNames2,
-        import_system33.objectFit[fit],
-        import_system33.objectPosition[position]
+        import_system35.objectFit[fit],
+        import_system35.objectPosition[position]
       )
     }
   );
 };
 
 // src/Inline/Inline.tsx
-var import_system34 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var Inline = ({
   space = 0,
@@ -1833,11 +1810,11 @@ var Inline = ({
     "div",
     {
       ...props,
-      className: (0, import_system34.cn)(
+      className: (0, import_system36.cn)(
         "flex flex-wrap",
-        import_system34.gapSpace[space],
-        alignX && ((_b2 = (_a2 = import_system34.alignment) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system34.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
+        import_system36.gapSpace[space],
+        alignX && ((_b2 = (_a2 = import_system36.alignment) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system36.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
       children
     }
@@ -1846,21 +1823,21 @@ var Inline = ({
 
 // src/DateField/DateField.tsx
 var import_date = require("@internationalized/date");
-var import_react26 = require("react");
+var import_react25 = require("react");
 var import_datepicker2 = require("@react-aria/datepicker");
-var import_focus7 = require("@react-aria/focus");
+var import_focus6 = require("@react-aria/focus");
 var import_i18n3 = require("@react-aria/i18n");
-var import_interactions3 = require("@react-aria/interactions");
-var import_utils11 = require("@react-aria/utils");
+var import_interactions2 = require("@react-aria/interactions");
+var import_utils10 = require("@react-aria/utils");
 var import_datepicker3 = require("@react-stately/datepicker");
-var import_system36 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 
 // src/DateField/DateSegment.tsx
-var import_react25 = require("react");
+var import_react24 = require("react");
 var import_datepicker = require("@react-aria/datepicker");
-var import_focus6 = require("@react-aria/focus");
-var import_utils10 = require("@react-aria/utils");
-var import_system35 = require("@marigold/system");
+var import_focus5 = require("@react-aria/focus");
+var import_utils9 = require("@react-aria/utils");
+var import_system37 = require("@marigold/system");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var DateSegment = ({
   className,
@@ -1868,13 +1845,13 @@ var DateSegment = ({
   state,
   isPrevPlaceholder
 }) => {
-  const ref = (0, import_react25.useRef)(null);
+  const ref = (0, import_react24.useRef)(null);
   const { segmentProps } = (0, import_datepicker.useDateSegment)(segment, state, ref);
-  const { focusProps, isFocused } = (0, import_focus6.useFocusRing)({
+  const { focusProps, isFocused } = (0, import_focus5.useFocusRing)({
     within: true,
     isTextInput: true
   });
-  const stateProps = (0, import_system35.useStateProps)({
+  const stateProps = (0, import_system37.useStateProps)({
     disabled: state.isDisabled,
     focusVisible: isFocused
   });
@@ -1882,9 +1859,9 @@ var DateSegment = ({
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
-      ...(0, import_utils10.mergeProps)(segmentProps, stateProps, focusProps),
+      ...(0, import_utils9.mergeProps)(segmentProps, stateProps, focusProps),
       ref,
-      className: (0, import_system35.cn)(
+      className: (0, import_system37.cn)(
         "group/segment",
         "text-center leading-none outline-0",
         type !== "literal" && "p-0.5",
@@ -1899,7 +1876,7 @@ var DateSegment = ({
           "span",
           {
             "aria-hidden": "true",
-            className: (0, import_system35.cn)(
+            className: (0, import_system37.cn)(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
@@ -1942,20 +1919,20 @@ var DateField = ({
     locale,
     createCalendar: import_date.createCalendar
   });
-  const ref = (0, import_react26.useRef)(null);
+  const ref = (0, import_react25.useRef)(null);
   const { fieldProps, labelProps, descriptionProps } = (0, import_datepicker2.useDateField)(
     props,
     state,
     ref
   );
-  const classNames2 = (0, import_system36.useClassNames)({ component: "DateField", variant, size });
-  const { focusProps, isFocused } = (0, import_focus7.useFocusRing)({
+  const classNames2 = (0, import_system38.useClassNames)({ component: "DateField", variant, size });
+  const { focusProps, isFocused } = (0, import_focus6.useFocusRing)({
     within: true,
     isTextInput: true,
     autoFocus: props.autoFocus
   });
-  const { hoverProps, isHovered } = (0, import_interactions3.useHover)({ isDisabled: disabled });
-  const stateProps = (0, import_system36.useStateProps)({
+  const { hoverProps, isHovered } = (0, import_interactions2.useHover)({ isDisabled: disabled });
+  const stateProps = (0, import_system38.useStateProps)({
     hover: isHovered,
     error,
     readOnly,
@@ -1981,8 +1958,8 @@ var DateField = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
         "div",
         {
-          ...(0, import_utils11.mergeProps)(fieldProps, focusProps, stateProps, hoverProps),
-          className: (0, import_system36.cn)(
+          ...(0, import_utils10.mergeProps)(fieldProps, focusProps, stateProps, hoverProps),
+          className: (0, import_system38.cn)(
             "relative flex flex-row flex-nowrap",
             "cursor-text aria-disabled:cursor-not-allowed",
             classNames2.field
@@ -2007,7 +1984,7 @@ var DateField = ({
               "svg",
               {
                 "data-testid": "action",
-                className: (0, import_system36.cn)(classNames2.action),
+                className: (0, import_system38.cn)(classNames2.action),
                 viewBox: "0 0 24 24",
                 width: 24,
                 height: 24,
@@ -2023,39 +2000,39 @@ var DateField = ({
 
 // src/Calendar/Calendar.tsx
 var import_date3 = require("@internationalized/date");
-var import_react30 = require("react");
+var import_react29 = require("react");
 var import_calendar3 = require("@react-aria/calendar");
 var import_i18n7 = require("@react-aria/i18n");
 var import_calendar4 = require("@react-stately/calendar");
 var import_icons = require("@marigold/icons");
-var import_system38 = require("@marigold/system");
+var import_system40 = require("@marigold/system");
 
 // src/Calendar/CalendarGrid.tsx
 var import_date2 = require("@internationalized/date");
-var import_react28 = require("react");
+var import_react27 = require("react");
 var import_calendar2 = require("@react-aria/calendar");
 var import_i18n4 = require("@react-aria/i18n");
 var import_i18n5 = require("@react-aria/i18n");
 
 // src/Calendar/CalendarCell.tsx
-var import_react27 = require("react");
+var import_react26 = require("react");
 var import_calendar = require("@react-aria/calendar");
-var import_interactions4 = require("@react-aria/interactions");
-var import_utils12 = require("@react-aria/utils");
-var import_system37 = require("@marigold/system");
+var import_interactions3 = require("@react-aria/interactions");
+var import_utils11 = require("@react-aria/utils");
+var import_system39 = require("@marigold/system");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 var CalendarCell = (props) => {
-  const ref = (0, import_react27.useRef)(null);
+  const ref = (0, import_react26.useRef)(null);
   const { state } = props;
   let { cellProps, buttonProps, formattedDate, isOutsideVisibleRange } = (0, import_calendar.useCalendarCell)(props, state, ref);
-  const classNames2 = (0, import_system37.useClassNames)({
+  const classNames2 = (0, import_system39.useClassNames)({
     component: "Calendar"
   });
   const isDisabled = cellProps["aria-disabled"];
-  const { hoverProps, isHovered } = (0, import_interactions4.useHover)({
+  const { hoverProps, isHovered } = (0, import_interactions3.useHover)({
     isDisabled: isDisabled || cellProps["aria-selected"]
   });
-  const stateProps = (0, import_system37.useStateProps)({
+  const stateProps = (0, import_system39.useStateProps)({
     disabled: isDisabled,
     hover: isHovered,
     selected: cellProps["aria-selected"]
@@ -2063,13 +2040,13 @@ var CalendarCell = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("td", { className: "group/cell", ...cellProps, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     "div",
     {
-      className: (0, import_system37.cn)(
+      className: (0, import_system39.cn)(
         "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,
-      ...(0, import_utils12.mergeProps)(buttonProps, stateProps, hoverProps),
+      ...(0, import_utils11.mergeProps)(buttonProps, stateProps, hoverProps),
       children: formattedDate
     }
   ) });
@@ -2088,7 +2065,7 @@ var CalendarGrid = ({ state, ...props }) => {
     weekday: "short",
     timeZone: state.timeZone
   });
-  const weekDays = (0, import_react28.useMemo)(() => {
+  const weekDays = (0, import_react27.useMemo)(() => {
     const weekStart = (0, import_date2.startOfWeek)((0, import_date2.today)(state.timeZone), locale);
     return [...new Array(7).keys()].map((index) => {
       const date = weekStart.add({ days: index });
@@ -2157,7 +2134,7 @@ var MonthDropdown = ({
 var MonthDropdown_default = MonthDropdown;
 
 // src/Calendar/YearDropdown.tsx
-var import_react29 = require("react");
+var import_react28 = require("react");
 var import_i18n6 = require("@react-aria/i18n");
 var import_jsx_runtime49 = require("react/jsx-runtime");
 var YearDropdown = ({ state, setSelectedDropdown }) => {
@@ -2173,8 +2150,8 @@ var YearDropdown = ({ state, setSelectedDropdown }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
-  const activeButtonRef = (0, import_react29.useRef)(null);
-  (0, import_react29.useEffect)(() => {
+  const activeButtonRef = (0, import_react28.useRef)(null);
+  (0, import_react28.useEffect)(() => {
     if (activeButtonRef.current) {
       const activeButton = activeButtonRef.current;
       activeButton == null ? void 0 : activeButton.scrollIntoView({
@@ -2244,7 +2221,7 @@ var Calendar = ({
     locale,
     createCalendar: import_date3.createCalendar
   });
-  const ref = (0, import_react30.useRef)(null);
+  const ref = (0, import_react29.useRef)(null);
   const { calendarProps, prevButtonProps, nextButtonProps } = (0, import_calendar3.useCalendar)(
     props,
     state
@@ -2259,13 +2236,13 @@ var Calendar = ({
     onFocusChange: nextFocusChange,
     ...nextPropsRest
   } = nextButtonProps;
-  const calendarState = (0, import_system38.useStateProps)({
+  const calendarState = (0, import_system40.useStateProps)({
     disabled: state.isDisabled,
     focusVisible: state.isFocused
   });
-  const classNames2 = (0, import_system38.useClassNames)({ component: "Calendar" });
-  const { select: selectClassNames } = (0, import_system38.useClassNames)({ component: "Select" });
-  const [selectedDropdown, setSelectedDropdown] = (0, import_react30.useState)();
+  const classNames2 = (0, import_system40.useClassNames)({ component: "Calendar" });
+  const { select: selectClassNames } = (0, import_system40.useClassNames)({ component: "Select" });
+  const [selectedDropdown, setSelectedDropdown] = (0, import_react29.useState)();
   let months = [];
   let formatter = (0, import_i18n7.useDateFormatter)({
     month: "long",
@@ -2284,7 +2261,7 @@ var Calendar = ({
     "div",
     {
       tabIndex: -1,
-      className: (0, import_system38.cn)(
+      className: (0, import_system40.cn)(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4  shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
         classNames2.calendar
       ),
@@ -2312,7 +2289,7 @@ var Calendar = ({
               {
                 disabled: state.isDisabled,
                 onClick: () => setSelectedDropdown("month"),
-                className: (0, import_system38.cn)(buttonStyles, selectClassNames),
+                className: (0, import_system40.cn)(buttonStyles, selectClassNames),
                 "data-testid": "month",
                 children: [
                   selectedValue.month,
@@ -2325,7 +2302,7 @@ var Calendar = ({
               {
                 disabled: state.isDisabled,
                 onClick: () => setSelectedDropdown("year"),
-                className: (0, import_system38.cn)(buttonStyles, selectClassNames),
+                className: (0, import_system40.cn)(buttonStyles, selectClassNames),
                 "data-testid": "year",
                 children: [
                   selectedValue.year,
@@ -2337,7 +2314,7 @@ var Calendar = ({
           /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
             "div",
             {
-              className: (0, import_system38.cn)(
+              className: (0, import_system40.cn)(
                 "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
                 classNames2.calendarControllers
               ),
@@ -2355,11 +2332,11 @@ var Calendar = ({
 };
 
 // src/DatePicker/DatePicker.tsx
-var import_react31 = require("react");
+var import_react30 = require("react");
 var import_datepicker4 = require("@react-aria/datepicker");
-var import_utils13 = require("@react-aria/utils");
+var import_utils12 = require("@react-aria/utils");
 var import_datepicker5 = require("@react-stately/datepicker");
-var import_system39 = require("@marigold/system");
+var import_system41 = require("@marigold/system");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var DatePicker = ({
   disabled,
@@ -2384,8 +2361,8 @@ var DatePicker = ({
     shouldCloseOnSelect,
     ...props
   });
-  const ref = (0, import_react31.useRef)(null);
-  const stateProps = (0, import_system39.useStateProps)({
+  const ref = (0, import_react30.useRef)(null);
+  const stateProps = (0, import_system41.useStateProps)({
     focus: state.isOpen
   });
   const { groupProps, fieldProps, buttonProps, calendarProps } = (0, import_datepicker4.useDatePicker)(
@@ -2394,7 +2371,7 @@ var DatePicker = ({
     ref
   );
   const { isDisabled, errorMessage, description, label } = props;
-  const classNames2 = (0, import_system39.useClassNames)({
+  const classNames2 = (0, import_system41.useClassNames)({
     component: "DatePicker",
     size,
     variant
@@ -2416,7 +2393,7 @@ var DatePicker = ({
         action: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           _Button,
           {
-            ...(0, import_utils13.mergeProps)(buttonProps, stateProps),
+            ...(0, import_utils12.mergeProps)(buttonProps, stateProps),
             disabled: isDisabled,
             children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               "svg",
@@ -2437,43 +2414,43 @@ var DatePicker = ({
 };
 
 // src/Inset/Inset.tsx
-var import_system40 = require("@marigold/system");
+var import_system42 = require("@marigold/system");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
   "div",
   {
-    className: (0, import_system40.cn)(
-      space && import_system40.paddingSpace[space],
-      !space && spaceX && import_system40.paddingSpaceX[spaceX],
-      !space && spaceY && import_system40.paddingSpaceY[spaceY]
+    className: (0, import_system42.cn)(
+      space && import_system42.paddingSpace[space],
+      !space && spaceX && import_system42.paddingSpaceX[spaceX],
+      !space && spaceY && import_system42.paddingSpaceY[spaceY]
     ),
     children
   }
 );
 
 // src/Link/Link.tsx
-var import_react32 = require("react");
-var import_react_aria_components9 = require("react-aria-components");
-var import_system41 = require("@marigold/system");
+var import_react31 = require("react");
+var import_react_aria_components13 = require("react-aria-components");
+var import_system43 = require("@marigold/system");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var _Link = (0, import_react32.forwardRef)(
+var _Link = (0, import_react31.forwardRef)(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = (0, import_system41.useClassNames)({
+    const classNames2 = (0, import_system43.useClassNames)({
       component: "Link",
       variant,
       size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_aria_components9.Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_aria_components13.Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-var import_system42 = require("@marigold/system");
+var import_system44 = require("@marigold/system");
 
 // src/List/Context.ts
-var import_react33 = require("react");
-var ListContext = (0, import_react33.createContext)({});
-var useListContext = () => (0, import_react33.useContext)(ListContext);
+var import_react32 = require("react");
+var ListContext = (0, import_react32.createContext)({});
+var useListContext = () => (0, import_react32.useContext)(ListContext);
 
 // src/List/ListItem.tsx
 var import_jsx_runtime54 = require("react/jsx-runtime");
@@ -2492,30 +2469,30 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = (0, import_system42.useClassNames)({ component: "List", variant, size });
+  const classNames2 = (0, import_system44.useClassNames)({ component: "List", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-var import_react37 = require("react");
+var import_react36 = require("react");
 var import_menu5 = require("@react-aria/menu");
-var import_utils16 = require("@react-aria/utils");
+var import_utils15 = require("@react-aria/utils");
 var import_collections4 = require("@react-stately/collections");
 var import_tree2 = require("@react-stately/tree");
-var import_system46 = require("@marigold/system");
+var import_system48 = require("@marigold/system");
 
 // src/Menu/Context.ts
-var import_react34 = require("react");
-var MenuContext = (0, import_react34.createContext)({});
-var useMenuContext = () => (0, import_react34.useContext)(MenuContext);
+var import_react33 = require("react");
+var MenuContext = (0, import_react33.createContext)({});
+var useMenuContext = () => (0, import_react33.useContext)(MenuContext);
 
 // src/Menu/MenuItem.tsx
-var import_react35 = require("react");
-var import_focus8 = require("@react-aria/focus");
+var import_react34 = require("react");
+var import_focus7 = require("@react-aria/focus");
 var import_menu = require("@react-aria/menu");
-var import_utils14 = require("@react-aria/utils");
-var import_system43 = require("@marigold/system");
+var import_utils13 = require("@react-aria/utils");
+var import_system45 = require("@marigold/system");
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var MenuItem = ({
   item,
@@ -2523,7 +2500,7 @@ var MenuItem = ({
   onAction,
   className
 }) => {
-  const ref = (0, import_react35.useRef)(null);
+  const ref = (0, import_react34.useRef)(null);
   const { onClose } = useMenuContext();
   const { menuItemProps } = (0, import_menu.useMenuItem)(
     {
@@ -2534,8 +2511,8 @@ var MenuItem = ({
     state,
     ref
   );
-  const { isFocusVisible, focusProps } = (0, import_focus8.useFocusRing)();
-  const stateProps = (0, import_system43.useStateProps)({
+  const { isFocusVisible, focusProps } = (0, import_focus7.useFocusRing)();
+  const stateProps = (0, import_system45.useStateProps)({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
@@ -2544,7 +2521,7 @@ var MenuItem = ({
     {
       ref,
       className,
-      ...(0, import_utils14.mergeProps)(
+      ...(0, import_utils13.mergeProps)(
         props,
         { onPointerDown: onPointerUp },
         stateProps,
@@ -2557,14 +2534,14 @@ var MenuItem = ({
 
 // src/Menu/MenuSection.tsx
 var import_menu2 = require("@react-aria/menu");
-var import_system44 = require("@marigold/system");
+var import_system46 = require("@marigold/system");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 var MenuSection = ({ onAction, item, state }) => {
   let { itemProps, headingProps, groupProps } = (0, import_menu2.useMenuSection)({
     heading: item.rendered,
     "aria-label": item["aria-label"]
   });
-  const className = (0, import_system44.useClassNames)({ component: "Menu" });
+  const className = (0, import_system46.useClassNames)({ component: "Menu" });
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
     item.key !== state.collection.getFirstKey() && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(_Divider, { variant: "section" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("li", { ...itemProps, children: [
@@ -2585,12 +2562,12 @@ var MenuSection = ({ onAction, item, state }) => {
 var MenuSection_default = MenuSection;
 
 // src/Menu/MenuTrigger.tsx
-var import_react36 = require("react");
-var import_interactions5 = require("@react-aria/interactions");
+var import_react35 = require("react");
+var import_interactions4 = require("@react-aria/interactions");
 var import_menu3 = require("@react-aria/menu");
-var import_utils15 = require("@react-aria/utils");
+var import_utils14 = require("@react-aria/utils");
 var import_menu4 = require("@react-stately/menu");
-var import_system45 = require("@marigold/system");
+var import_system47 = require("@marigold/system");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var MenuTrigger = ({
   disabled,
@@ -2598,9 +2575,9 @@ var MenuTrigger = ({
   onOpenChange,
   children
 }) => {
-  const [menuTrigger, menu] = import_react36.Children.toArray(children);
-  const menuTriggerRef = (0, import_react36.useRef)(null);
-  const menuRef = (0, import_utils15.useObjectRef)();
+  const [menuTrigger, menu] = import_react35.Children.toArray(children);
+  const menuTriggerRef = (0, import_react35.useRef)(null);
+  const menuRef = (0, import_utils14.useObjectRef)();
   const state = (0, import_menu4.useMenuTriggerState)({
     isOpen: open,
     onOpenChange
@@ -2617,10 +2594,10 @@ var MenuTrigger = ({
     onClose: state.close,
     autoFocus: state.focusStrategy
   };
-  const isSmallScreen = (0, import_system45.useSmallScreen)();
+  const isSmallScreen = (0, import_system47.useSmallScreen)();
   return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(MenuContext.Provider, { value: menuContext, children: [
     /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-      import_interactions5.PressResponder,
+      import_interactions4.PressResponder,
       {
         ...menuTriggerProps,
         ref: menuTriggerRef,
@@ -2637,11 +2614,11 @@ var import_jsx_runtime59 = require("react/jsx-runtime");
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
-  const ref = (0, import_react37.useRef)(null);
+  const ref = (0, import_react36.useRef)(null);
   const state = (0, import_tree2.useTreeState)({ ...ownProps, selectionMode: "none" });
   const { menuProps } = (0, import_menu5.useMenu)(ownProps, state, ref);
-  (0, import_utils16.useSyncRef)({ ref: scrollRef }, ref);
-  const classNames2 = (0, import_system46.useClassNames)({ component: "Menu", variant, size });
+  (0, import_utils15.useSyncRef)({ ref: scrollRef }, ref);
+  const classNames2 = (0, import_system48.useClassNames)({ component: "Menu", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("ul", { ref, className: classNames2.container, ...menuProps, children: [...state.collection].map((item) => {
     if (item.type === "section") {
       return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -2671,19 +2648,35 @@ Menu.Item = import_collections4.Item;
 Menu.Section = import_collections4.Section;
 
 // src/Menu/ActionMenu.tsx
-var import_system47 = require("@marigold/system");
+var import_system49 = require("@marigold/system");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var ActionMenu = (props) => {
   return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(Menu.Trigger, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_system47.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsx)(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_system49.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("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__ */ (0, import_jsx_runtime60.jsx)(Menu, { ...props })
   ] });
 };
 
 // src/Message/Message.tsx
-var import_system48 = require("@marigold/system");
+var import_system50 = require("@marigold/system");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var icons = {
+  success: () => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        "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__ */ (0, import_jsx_runtime61.jsx)(
     "svg",
     {
@@ -2740,49 +2733,100 @@ var Message = ({
   children,
   ...props
 }) => {
-  const classNames2 = (0, import_system48.useClassNames)({ component: "Message", variant, size });
+  const classNames2 = (0, import_system50.useClassNames)({ component: "Message", variant, size });
   const Icon3 = icons[variant];
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
-      className: (0, import_system48.cn)(
+      className: (0, import_system50.cn)(
         "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
         classNames2.container
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_system48.cn)("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon3, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_system50.cn)("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon3, {}) }),
         /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "div",
           {
-            className: (0, import_system48.cn)("col-start-2 row-start-1 self-center", classNames2.title),
+            className: (0, import_system50.cn)("col-start-2 row-start-1 self-center", classNames2.title),
             children: messageTitle
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_system48.cn)("col-start-2", classNames2.content), children })
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: (0, import_system50.cn)("col-start-2", classNames2.content), children })
       ]
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-var import_react39 = require("react");
-var import_focus9 = require("@react-aria/focus");
-var import_i18n8 = require("@react-aria/i18n");
-var import_interactions7 = require("@react-aria/interactions");
-var import_numberfield = require("@react-aria/numberfield");
-var import_utils18 = require("@react-aria/utils");
-var import_numberfield2 = require("@react-stately/numberfield");
-var import_system50 = require("@marigold/system");
-
-// src/NumberField/StepButton.tsx
 var import_react38 = require("react");
-var import_button4 = require("@react-aria/button");
-var import_interactions6 = require("@react-aria/interactions");
-var import_utils17 = require("@react-aria/utils");
-var import_system49 = require("@marigold/system");
+var import_react_aria_components16 = require("react-aria-components");
+var import_system53 = require("@marigold/system");
+
+// src/Input/_Input.tsx
+var import_react37 = require("react");
+var import_react_aria_components14 = require("react-aria-components");
+var import_system51 = require("@marigold/system");
 var import_jsx_runtime62 = require("react/jsx-runtime");
-var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var _Input = (0, import_react37.forwardRef)(
+  ({ type, icon, action, variant, size, className, ...props }, ref) => {
+    const classNames2 = (0, import_system51.useClassNames)({
+      component: "Input",
+      variant,
+      size
+    });
+    const inputIcon = icon ? (0, import_react37.cloneElement)(icon, {
+      className: (0, import_system51.cn)(
+        "pointer-events-none absolute",
+        classNames2.icon,
+        icon.props.className
+      ),
+      ...icon.props
+    }) : null;
+    const inputAction = action && !props.readOnly ? (0, import_react37.cloneElement)(action, {
+      className: (0, import_system51.cn)(
+        "absolute",
+        classNames2.action,
+        action.props.className
+      ),
+      ...action.props
+    }) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+      "div",
+      {
+        className: "group/input relative flex items-center",
+        "data-icon": icon && "",
+        "data-action": action && "",
+        children: [
+          inputIcon,
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            import_react_aria_components14.Input,
+            {
+              ...props,
+              className: (0, import_system51.cn)(
+                "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
+var import_react_aria_components15 = require("react-aria-components");
+var import_system52 = require("@marigold/system");
+var import_jsx_runtime63 = require("react/jsx-runtime");
+var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -2790,7 +2834,7 @@ var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { width: 1
     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__ */ (0, import_jsx_runtime62.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -2798,47 +2842,30 @@ var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { width:
     d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
   }
 ) });
-var StepButton = ({
-  direction,
-  className,
-  ...props
-}) => {
-  const ref = (0, import_react38.useRef)(null);
-  const { buttonProps, isPressed } = (0, import_button4.useButton)(
-    { ...props, elementType: "div" },
-    ref
-  );
-  const { hoverProps, isHovered } = (0, import_interactions6.useHover)(props);
-  const stateProps = (0, import_system49.useStateProps)({
-    active: isPressed,
-    hover: isHovered,
-    disabled: props.isDisabled
-  });
+var _StepButton = ({ direction, className, ...props }) => {
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    import_react_aria_components15.Button,
     {
-      className: (0, import_system49.cn)(
+      className: (0, import_system52.cn)(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
         ],
         className
       ),
-      ...(0, import_utils17.mergeProps)(buttonProps, hoverProps),
-      ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon3, {})
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon3, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
-var NumberField = (0, import_react39.forwardRef)(
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var _NumberField = (0, import_react38.forwardRef)(
   ({
     variant,
     size,
-    width,
     disabled,
     required,
     readOnly,
@@ -2846,134 +2873,81 @@ var NumberField = (0, import_react39.forwardRef)(
     hideStepper,
     ...rest
   }, ref) => {
+    const classNames2 = (0, import_system53.useClassNames)({
+      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 } = (0, import_i18n8.useLocale)();
-    const inputRef = (0, import_utils18.useObjectRef)(ref);
-    const state = (0, import_numberfield2.useNumberFieldState)({ ...props, locale });
-    const {
-      labelProps,
-      groupProps,
-      inputProps,
-      descriptionProps,
-      errorMessageProps,
-      incrementButtonProps,
-      decrementButtonProps
-    } = (0, import_numberfield.useNumberField)(props, state, inputRef);
-    const { hoverProps, isHovered } = (0, import_interactions7.useHover)({ isDisabled: disabled });
-    const { focusProps, isFocused } = (0, import_focus9.useFocusRing)({
-      within: true,
-      isTextInput: true,
-      autoFocus: props.autoFocus
-    });
-    const stateProps = (0, import_system50.useStateProps)({
-      hover: isHovered,
-      focus: isFocused,
-      disabled,
-      error,
-      readOnly,
-      required
-    });
-    const classNames2 = (0, import_system50.useClassNames)({
-      component: "NumberField",
-      size,
-      variant
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-      FieldBase,
-      {
-        label: props.label,
-        labelProps,
-        description: props.description,
-        descriptionProps,
-        error,
-        errorMessage: props.errorMessage,
-        errorMessageProps,
-        stateProps,
-        variant,
-        size,
-        width,
-        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
-          "div",
-          {
-            "data-group": true,
-            className: (0, import_system50.cn)("flex items-stretch", classNames2.group),
-            "data-testid": "number-field-container",
-            ...(0, import_utils18.mergeProps)(groupProps, focusProps, hoverProps),
-            ...stateProps,
-            children: [
-              showStepper && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                StepButton,
-                {
-                  className: classNames2.stepper,
-                  direction: "down",
-                  ...decrementButtonProps
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                Input,
-                {
-                  ref: inputRef,
-                  variant,
-                  size,
-                  ...inputProps,
-                  ...stateProps
-                }
-              ) }),
-              showStepper && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-                StepButton,
-                {
-                  className: classNames2.stepper,
-                  direction: "up",
-                  ...incrementButtonProps
-                }
-              )
-            ]
-          }
-        )
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(FieldBase2, { as: import_react_aria_components16.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react_aria_components16.Group, { className: (0, import_system53.cn)("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        _StepButton,
+        {
+          className: classNames2.stepper,
+          direction: "down",
+          slot: "decrement"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        _Input,
+        {
+          ref,
+          variant,
+          size,
+          className: classNames2.input
+        }
+      ) }),
+      showStepper && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+        _StepButton,
+        {
+          className: classNames2.stepper,
+          direction: "up",
+          slot: "increment"
+        }
+      )
+    ] }) });
   }
 );
 
 // src/Provider/index.ts
-var import_system52 = require("@marigold/system");
+var import_system55 = require("@marigold/system");
 
 // src/Provider/MarigoldProvider.tsx
-var import_overlays7 = require("@react-aria/overlays");
-var import_system51 = require("@marigold/system");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_overlays4 = require("@react-aria/overlays");
+var import_system54 = require("@marigold/system");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function MarigoldProvider({
   children,
   theme
 }) {
-  const outerTheme = (0, import_system51.useTheme)();
-  const isTopLevel = outerTheme === import_system51.defaultTheme;
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_system51.ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_overlays7.OverlayProvider, { children }) : children });
+  const outerTheme = (0, import_system54.useTheme)();
+  const isTopLevel = outerTheme === import_system54.defaultTheme;
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_system54.ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_overlays4.OverlayProvider, { children }) : children });
 }
 
 // src/Radio/Radio.tsx
-var import_react41 = require("react");
-var import_react_aria_components11 = require("react-aria-components");
-var import_system54 = require("@marigold/system");
+var import_react40 = require("react");
+var import_react_aria_components18 = require("react-aria-components");
+var import_system57 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react40 = require("react");
-var RadioGroupContext = (0, import_react40.createContext)(
+var import_react39 = require("react");
+var RadioGroupContext = (0, import_react39.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react40.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react39.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_react_aria_components10 = require("react-aria-components");
-var import_system53 = require("@marigold/system");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_react_aria_components17 = require("react-aria-components");
+var import_system56 = require("@marigold/system");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var _RadioGroup = ({
   variant,
   size,
@@ -2989,7 +2963,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = (0, import_system53.useClassNames)({ component: "Radio", variant, size });
+  const classNames2 = (0, import_system56.useClassNames)({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2997,10 +2971,10 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     FieldBase2,
     {
-      as: import_react_aria_components10.RadioGroup,
+      as: import_react_aria_components17.RadioGroup,
       width,
       label,
       description,
@@ -3008,18 +2982,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system53.cn)(
+          className: (0, import_system56.cn)(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -3027,33 +3001,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
   "div",
   {
-    className: (0, import_system54.cn)(
+    className: (0, import_system57.cn)(
       "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__ */ (0, import_jsx_runtime66.jsx)(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Dot, {}) : null
   }
 );
-var _Radio = (0, import_react41.forwardRef)(
+var _Radio = (0, import_react40.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = (0, import_system54.useClassNames)({
+    const classNames2 = (0, import_system57.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-      import_react_aria_components11.Radio,
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      import_react_aria_components18.Radio,
       {
         ref,
-        className: (0, import_system54.cn)(
+        className: (0, import_system57.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -3062,18 +3036,18 @@ var _Radio = (0, import_react41.forwardRef)(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             Icon2,
             {
               checked: isSelected,
-              className: (0, import_system54.cn)(
+              className: (0, import_system57.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: classNames2.label, children })
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -3082,15 +3056,15 @@ var _Radio = (0, import_react41.forwardRef)(
 _Radio.Group = _RadioGroup;
 
 // src/Select/Select.tsx
-var import_react42 = require("react");
-var import_button5 = require("@react-aria/button");
-var import_focus10 = require("@react-aria/focus");
-var import_i18n9 = require("@react-aria/i18n");
+var import_react41 = require("react");
+var import_button3 = require("@react-aria/button");
+var import_focus8 = require("@react-aria/focus");
+var import_i18n8 = require("@react-aria/i18n");
 var import_select = require("@react-aria/select");
-var import_utils19 = require("@react-aria/utils");
+var import_utils16 = require("@react-aria/utils");
 var import_collections5 = require("@react-stately/collections");
 var import_select2 = require("@react-stately/select");
-var import_system55 = require("@marigold/system");
+var import_system58 = require("@marigold/system");
 
 // src/Select/intl.ts
 var messages = {
@@ -3103,8 +3077,8 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var Select = (0, import_react42.forwardRef)(
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var Select = (0, import_react41.forwardRef)(
   ({
     variant,
     size,
@@ -3116,7 +3090,7 @@ var Select = (0, import_react42.forwardRef)(
     onChange,
     ...rest
   }, ref) => {
-    const formatMessage = (0, import_i18n9.useLocalizedStringFormatter)(messages);
+    const formatMessage = (0, import_i18n8.useLocalizedStringFormatter)(messages);
     const props = {
       isOpen: open,
       isDisabled: disabled,
@@ -3126,8 +3100,8 @@ var Select = (0, import_react42.forwardRef)(
       onSelectionChange: onChange,
       ...rest
     };
-    const buttonRef = (0, import_utils19.useObjectRef)(ref);
-    const listboxRef = (0, import_react42.useRef)(null);
+    const buttonRef = (0, import_utils16.useObjectRef)(ref);
+    const listboxRef = (0, import_react41.useRef)(null);
     const state = (0, import_select2.useSelectState)(props);
     const {
       labelProps,
@@ -3137,21 +3111,21 @@ var Select = (0, import_react42.forwardRef)(
       descriptionProps,
       errorMessageProps
     } = (0, import_select.useSelect)(props, state, buttonRef);
-    const { buttonProps } = (0, import_button5.useButton)(
+    const { buttonProps } = (0, import_button3.useButton)(
       { isDisabled: disabled, ...triggerProps },
       buttonRef
     );
-    const { focusProps, isFocusVisible } = (0, import_focus10.useFocusRing)();
-    const classNames2 = (0, import_system55.useClassNames)({ component: "Select", variant, size });
-    const isSmallScreen = (0, import_system55.useSmallScreen)();
-    const stateProps = (0, import_system55.useStateProps)({
+    const { focusProps, isFocusVisible } = (0, import_focus8.useFocusRing)();
+    const classNames2 = (0, import_system58.useClassNames)({ component: "Select", variant, size });
+    const isSmallScreen = (0, import_system58.useSmallScreen)();
+    const stateProps = (0, import_system58.useStateProps)({
       disabled,
       error,
       focusVisible: isFocusVisible,
       expanded: state.isOpen,
       required
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       FieldBase,
       {
         variant,
@@ -3167,7 +3141,7 @@ var Select = (0, import_react42.forwardRef)(
         stateProps,
         disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             import_select.HiddenSelect,
             {
               state,
@@ -3177,23 +3151,23 @@ var Select = (0, import_react42.forwardRef)(
               isDisabled: disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
             "button",
             {
-              className: (0, import_system55.cn)(
+              className: (0, import_system58.cn)(
                 "flex w-full items-center justify-between gap-1 overflow-hidden",
                 classNames2.select
               ),
               ref: buttonRef,
-              ...(0, import_utils19.mergeProps)(buttonProps, focusProps),
+              ...(0, import_utils16.mergeProps)(buttonProps, focusProps),
               ...stateProps,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ChevronDown, { className: "h-4 w-4" })
+                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronDown, { className: "h-4 w-4" })
               ]
             }
           ),
-          isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Tray, { state, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Tray, { state, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             ListBox,
             {
               ref: listboxRef,
@@ -3202,7 +3176,7 @@ var Select = (0, import_react42.forwardRef)(
               size,
               ...menuProps
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             ListBox,
             {
               ref: listboxRef,
@@ -3221,11 +3195,11 @@ Select.Option = import_collections5.Item;
 Select.Section = import_collections5.Section;
 
 // src/Slider/Slider.tsx
-var import_react43 = require("react");
-var import_react_aria_components12 = require("react-aria-components");
-var import_system56 = require("@marigold/system");
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var _Slider = (0, import_react43.forwardRef)(
+var import_react42 = require("react");
+var import_react_aria_components19 = require("react-aria-components");
+var import_system59 = require("@marigold/system");
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var _Slider = (0, import_react42.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -3234,7 +3208,7 @@ var _Slider = (0, import_react43.forwardRef)(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system56.useClassNames)({
+    const classNames2 = (0, import_system59.useClassNames)({
       component: "Slider",
       variant,
       size
@@ -3243,27 +3217,27 @@ var _Slider = (0, import_react43.forwardRef)(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
-      import_react_aria_components12.Slider,
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+      import_react_aria_components19.Slider,
       {
-        className: (0, import_system56.cn)(
+        className: (0, import_system59.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
-          import_system56.width[width]
+          import_system59.width[width]
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(_Label, { children: props.children }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_aria_components12.SliderOutput, { className: (0, import_system56.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-            import_react_aria_components12.SliderTrack,
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(_Label, { children: props.children }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react_aria_components19.SliderOutput, { className: (0, import_system59.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+            import_react_aria_components19.SliderTrack,
             {
-              className: (0, import_system56.cn)("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-                import_react_aria_components12.SliderThumb,
+              className: (0, import_system59.cn)("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                import_react_aria_components19.SliderThumb,
                 {
-                  className: (0, import_system56.cn)("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: (0, import_system59.cn)("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -3278,12 +3252,12 @@ var _Slider = (0, import_react43.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ...props, role: "separator", className: "grow" });
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_system57 = require("@marigold/system");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_system60 = require("@marigold/system");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var Stack = ({
   children,
   space = 0,
@@ -3294,14 +3268,14 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     "div",
     {
-      className: (0, import_system57.cn)(
+      className: (0, import_system60.cn)(
         "flex flex-col",
-        import_system57.gapSpace[space],
-        alignX && ((_b = (_a = import_system57.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system57.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system60.gapSpace[space],
+        alignX && ((_b = (_a = import_system60.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system60.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -3311,11 +3285,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react44 = require("react");
-var import_react_aria_components13 = require("react-aria-components");
-var import_system58 = require("@marigold/system");
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var _Switch = (0, import_react44.forwardRef)(
+var import_react43 = require("react");
+var import_react_aria_components20 = require("react-aria-components");
+var import_system61 = require("@marigold/system");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var _Switch = (0, import_react43.forwardRef)(
   ({
     variant,
     size,
@@ -3326,37 +3300,37 @@ var _Switch = (0, import_react44.forwardRef)(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system58.useClassNames)({ component: "Switch", size, variant });
+    const classNames2 = (0, import_system61.useClassNames)({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
-      import_react_aria_components13.Switch,
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+      import_react_aria_components20.Switch,
       {
         ...props,
         ref,
-        className: (0, import_system58.cn)(
-          import_system58.width[width],
+        className: (0, import_system61.cn)(
+          import_system61.width[width],
           "group/switch",
           "flex items-center justify-between gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             "div",
             {
-              className: (0, import_system58.cn)(
+              className: (0, import_system61.cn)(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                 "div",
                 {
-                  className: (0, import_system58.cn)(
+                  className: (0, import_system61.cn)(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -3375,33 +3349,33 @@ var _Switch = (0, import_react44.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react52 = require("react");
+var import_react51 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system65 = require("@marigold/system");
+var import_system68 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react45 = require("react");
-var TableContext = (0, import_react45.createContext)({});
-var useTableContext = () => (0, import_react45.useContext)(TableContext);
+var import_react44 = require("react");
+var TableContext = (0, import_react44.createContext)({});
+var useTableContext = () => (0, import_react44.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var TableBody = ({ children }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
-var import_react46 = require("react");
-var import_focus11 = require("@react-aria/focus");
+var import_react45 = require("react");
+var import_focus9 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
-var import_utils20 = require("@react-aria/utils");
-var import_system59 = require("@marigold/system");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_utils17 = require("@react-aria/utils");
+var import_system62 = require("@marigold/system");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var TableCell = ({ cell }) => {
-  const ref = (0, import_react46.useRef)(null);
+  const ref = (0, import_react45.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -3420,14 +3394,14 @@ var TableCell = ({ cell }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = (0, import_focus11.useFocusRing)();
-  const stateProps = (0, import_system59.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  const { focusProps, isFocusVisible } = (0, import_focus9.useFocusRing)();
+  const stateProps = (0, import_system62.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "td",
     {
       ref,
       className: classNames2 == null ? void 0 : classNames2.cell,
-      ...(0, import_utils20.mergeProps)(cellProps, focusProps),
+      ...(0, import_utils17.mergeProps)(cellProps, focusProps),
       ...stateProps,
       children: cell.rendered
     }
@@ -3435,11 +3409,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react47 = require("react");
-var import_focus12 = require("@react-aria/focus");
+var import_react46 = require("react");
+var import_focus10 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
-var import_utils21 = require("@react-aria/utils");
-var import_system60 = require("@marigold/system");
+var import_utils18 = require("@react-aria/utils");
+var import_system63 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3462,9 +3436,9 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react47.useRef)(null);
+  const ref = (0, import_react46.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -3477,36 +3451,36 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
-  const stateProps = (0, import_system60.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  const { focusProps, isFocusVisible } = (0, import_focus10.useFocusRing)();
+  const stateProps = (0, import_system63.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system60.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
-      ...(0, import_utils21.mergeProps)(gridCellProps, focusProps),
+      className: (0, import_system63.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      ...(0, import_utils18.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react48 = require("react");
-var import_focus13 = require("@react-aria/focus");
-var import_interactions8 = require("@react-aria/interactions");
+var import_react47 = require("react");
+var import_focus11 = require("@react-aria/focus");
+var import_interactions5 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
-var import_utils23 = require("@react-aria/utils");
+var import_utils20 = require("@react-aria/utils");
 var import_icons2 = require("@marigold/icons");
-var import_system61 = require("@marigold/system");
-var import_system62 = require("@marigold/system");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_system64 = require("@marigold/system");
+var import_system65 = require("@marigold/system");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column,
   width = "auto"
 }) => {
   var _a, _b;
-  const ref = (0, import_react48.useRef)(null);
+  const ref = (0, import_react47.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -3515,23 +3489,23 @@ var TableColumnHeader = ({
     state,
     ref
   );
-  const { hoverProps, isHovered } = (0, import_interactions8.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
-  const stateProps = (0, import_system61.useStateProps)({
+  const { hoverProps, isHovered } = (0, import_interactions5.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus11.useFocusRing)();
+  const stateProps = (0, import_system64.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: (0, import_system61.cn)("cursor-default", import_system62.width[width], classNames2 == null ? void 0 : classNames2.header),
-      ...(0, import_utils23.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      className: (0, import_system64.cn)("cursor-default", import_system65.width[width], classNames2 == null ? void 0 : classNames2.header),
+      ...(0, import_utils20.mergeProps)(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__ */ (0, import_jsx_runtime75.jsx)(import_icons2.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_icons2.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_icons2.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__ */ (0, import_jsx_runtime76.jsx)(import_icons2.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_icons2.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_icons2.SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3539,36 +3513,36 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("thead", { ...rowGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("thead", { ...rowGroupProps, children });
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react49 = require("react");
+var import_react48 = require("react");
 var import_table6 = require("@react-aria/table");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react49.useRef)(null);
+  const ref = (0, import_react48.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react50 = require("react");
-var import_focus14 = require("@react-aria/focus");
-var import_interactions9 = require("@react-aria/interactions");
+var import_react49 = require("react");
+var import_focus12 = require("@react-aria/focus");
+var import_interactions6 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
-var import_utils24 = require("@react-aria/utils");
-var import_system63 = require("@marigold/system");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_utils21 = require("@react-aria/utils");
+var import_system66 = require("@marigold/system");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react50.useRef)(null);
+  const ref = (0, import_react49.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = (0, import_system63.useClassNames)({
+  const classNames2 = (0, import_system66.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3582,28 +3556,28 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)({ within: true });
-  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({
+  const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)({ within: true });
+  const { hoverProps, isHovered } = (0, import_interactions6.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system63.useStateProps)({
+  const stateProps = (0, import_system66.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "tr",
     {
       ref,
-      className: (0, import_system63.cn)(
+      className: (0, import_system66.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
         classNames2 == null ? void 0 : classNames2.row
       ),
-      ...(0, import_utils24.mergeProps)(rowProps, focusProps, hoverProps),
+      ...(0, import_utils21.mergeProps)(rowProps, focusProps, hoverProps),
       ...stateProps,
       children
     }
@@ -3611,18 +3585,18 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react51 = require("react");
-var import_focus15 = require("@react-aria/focus");
-var import_interactions10 = require("@react-aria/interactions");
+var import_react50 = require("react");
+var import_focus13 = require("@react-aria/focus");
+var import_interactions7 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
-var import_utils25 = require("@react-aria/utils");
-var import_system64 = require("@marigold/system");
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_utils22 = require("@react-aria/utils");
+var import_system67 = require("@marigold/system");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column,
   width = "auto"
 }) => {
-  const ref = (0, import_react51.useRef)(null);
+  const ref = (0, import_react50.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -3632,30 +3606,30 @@ var TableSelectAllCell = ({
     ref
   );
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
-  const { hoverProps, isHovered } = (0, import_interactions10.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)();
-  const stateProps = (0, import_system64.useStateProps)({
+  const { hoverProps, isHovered } = (0, import_interactions7.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
+  const stateProps = (0, import_system67.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     "th",
     {
       ref,
-      className: (0, import_system64.cn)(
-        import_system64.width[width],
+      className: (0, import_system67.cn)(
+        import_system67.width[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
       ),
-      ...(0, import_utils25.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      ...(0, import_utils22.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var Table = ({
   variant,
   size,
@@ -3664,7 +3638,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react52.useRef)(null);
+  const tableRef = (0, import_react51.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -3672,21 +3646,21 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames2 = (0, import_system65.useClassNames)({
+  const classNames2 = (0, import_system68.useClassNames)({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
         "table",
         {
           ref: tableRef,
-          className: (0, import_system65.cn)(
+          className: (0, import_system68.cn)(
             "group/table",
             "border-collapse overflow-auto whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3694,17 +3668,17 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
                     column
                   },
                   column.key
-                ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                   TableColumnHeader,
                   {
                     width: (_c = column.props) == null ? void 0 : _c.width,
@@ -3714,12 +3688,12 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(TableBody, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map(
+                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map(
                   (cell) => {
                     var _a;
-                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableCell, { cell }, cell.key);
+                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TableCell, { cell }, cell.key);
                   }
                 ) }, row.key)
               )
@@ -3737,8 +3711,8 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_system66 = require("@marigold/system");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_system69 = require("@marigold/system");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var Text2 = ({
   variant,
   size,
@@ -3751,27 +3725,27 @@ var Text2 = ({
   children,
   ...props
 }) => {
-  const theme = (0, import_system66.useTheme)();
-  const classNames2 = (0, import_system66.useClassNames)({
+  const theme = (0, import_system69.useTheme)();
+  const classNames2 = (0, import_system69.useClassNames)({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     "p",
     {
       ...props,
-      className: (0, import_system66.cn)(
+      className: (0, import_system69.cn)(
         classNames2,
         "text-[--color] outline-[--outline]",
-        fontStyle && import_system66.textStyle[fontStyle],
-        align && import_system66.textAlign[align],
-        cursor && import_system66.cursorStyle[cursor],
-        weight && import_system66.fontWeight[weight],
-        fontSize && import_system66.textSize[fontSize]
+        fontStyle && import_system69.textStyle[fontStyle],
+        align && import_system69.textAlign[align],
+        cursor && import_system69.cursorStyle[cursor],
+        weight && import_system69.fontWeight[weight],
+        fontSize && import_system69.textSize[fontSize]
       ),
-      style: (0, import_system66.createVar)({
-        color: color && theme.colors && (0, import_system66.get)(
+      style: (0, import_system69.createVar)({
+        color: color && theme.colors && (0, import_system69.get)(
           theme.colors,
           color.replace("-", "."),
           color
@@ -3784,145 +3758,61 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-var import_react53 = require("react");
-var import_focus16 = require("@react-aria/focus");
-var import_interactions11 = require("@react-aria/interactions");
-var import_textfield = require("@react-aria/textfield");
-var import_utils27 = require("@react-aria/utils");
-var import_system67 = require("@marigold/system");
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var TextArea = (0, import_react53.forwardRef)(
+var import_react52 = require("react");
+var import_react_aria_components21 = require("react-aria-components");
+var import_system70 = require("@marigold/system");
+var import_jsx_runtime83 = require("react/jsx-runtime");
+var _TextArea = (0, import_react52.forwardRef)(
   ({
     variant,
     size,
-    width,
-    disabled,
     required,
+    disabled,
     readOnly,
     error,
     rows,
-    ...props
+    ...rest
   }, ref) => {
-    const { label, description, errorMessage } = props;
-    const textAreaRef = (0, import_utils27.useObjectRef)(ref);
-    const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
-      {
-        inputElementType: "textarea",
-        isDisabled: disabled,
-        isRequired: required,
-        isReadOnly: readOnly,
-        validationState: error ? "invalid" : "valid",
-        ...props
-      },
-      textAreaRef
-    );
-    const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
-    const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
-    const stateProps = (0, import_system67.useStateProps)({
-      hover: isHovered,
-      focus: isFocusVisible,
-      disabled,
-      readOnly,
-      required,
-      error
-    });
-    const classNames2 = (0, import_system67.useClassNames)({ component: "TextArea", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-      FieldBase,
-      {
-        label,
-        labelProps,
-        description,
-        descriptionProps,
-        error,
-        errorMessage,
-        errorMessageProps,
-        stateProps,
-        variant,
-        size,
-        width,
-        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-          "textarea",
-          {
-            className: classNames2,
-            ref: textAreaRef,
-            rows,
-            ...inputProps,
-            ...focusProps,
-            ...hoverProps
-          }
-        )
-      }
-    );
+    const classNames2 = (0, import_system70.useClassNames)({ component: "TextArea", variant, size });
+    const props = {
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isInvalid: error,
+      isRequired: required,
+      ...rest
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(FieldBase2, { as: import_react_aria_components21.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_react_aria_components21.TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-var import_react54 = require("react");
-var import_focus17 = require("@react-aria/focus");
-var import_interactions12 = require("@react-aria/interactions");
-var import_textfield2 = require("@react-aria/textfield");
-var import_utils28 = require("@react-aria/utils");
-var import_system68 = require("@marigold/system");
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var TextField = (0, import_react54.forwardRef)(
-  ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
-    const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = (0, import_utils28.useObjectRef)(ref);
-    const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(
-      {
-        isDisabled: disabled,
-        isRequired: required,
-        isReadOnly: readOnly,
-        validationState: error ? "invalid" : "valid",
-        ...props
-      },
-      inputRef
-    );
-    const { hoverProps, isHovered } = (0, import_interactions12.useHover)({});
-    const { focusProps, isFocused } = (0, import_focus17.useFocusRing)({
-      isTextInput: true,
-      autoFocus
-    });
-    const stateProps = (0, import_system68.useStateProps)({
-      hover: isHovered,
-      focus: isFocused,
-      disabled,
-      error,
-      readOnly,
-      required
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-      FieldBase,
-      {
-        label,
-        labelProps,
-        description,
-        descriptionProps,
-        error,
-        errorMessage,
-        errorMessageProps,
-        stateProps,
-        variant,
-        size,
-        width,
-        children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
-          Input,
-          {
-            ref: inputRef,
-            variant,
-            size,
-            ...(0, import_utils28.mergeProps)(focusProps, inputProps, hoverProps)
-          }
-        )
-      }
-    );
+var import_react53 = require("react");
+var import_react_aria_components22 = require("react-aria-components");
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var _TextField = (0, import_react53.forwardRef)(
+  ({
+    variant,
+    size,
+    required,
+    disabled,
+    readOnly,
+    error,
+    ...rest
+  }, ref) => {
+    const props = {
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isInvalid: error,
+      isRequired: required,
+      ...rest
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(FieldBase2, { as: import_react_aria_components22.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-var import_system69 = require("@marigold/system");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_system71 = require("@marigold/system");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3935,151 +3825,89 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system69.cn)(
+      className: (0, import_system71.cn)(
         "grid",
-        import_system69.gapSpace[space],
+        import_system71.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system69.createVar)({ column, tilesWidth }),
+      style: (0, import_system71.createVar)({ column, tilesWidth }),
       children
     }
   );
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_tooltip3 = require("@react-aria/tooltip");
-var import_system70 = require("@marigold/system");
-
-// src/Tooltip/Context.ts
-var import_react55 = require("react");
-var TooltipContext = (0, import_react55.createContext)({});
-var useTooltipContext = () => (0, import_react55.useContext)(TooltipContext);
+var import_react_aria_components24 = require("react-aria-components");
+var import_system72 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react56 = require("react");
-var import_focus18 = require("@react-aria/focus");
-var import_overlays8 = require("@react-aria/overlays");
-var import_tooltip = require("@react-aria/tooltip");
-var import_tooltip2 = require("@react-stately/tooltip");
-var import_jsx_runtime85 = require("react/jsx-runtime");
-var TooltipTrigger = ({
-  disabled,
-  open,
+var import_react_aria_components23 = require("react-aria-components");
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var _TooltipTrigger = ({
   delay = 1e3,
-  placement = "top",
   children,
+  disabled,
+  open,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = import_react56.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
     isOpen: open,
-    delay,
-    placement
+    delay
   };
-  const tooltipTriggerRef = (0, import_react56.useRef)(null);
-  const overlayRef = (0, import_react56.useRef)(null);
-  const state = (0, import_tooltip2.useTooltipTriggerState)(props);
-  const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)(
-    props,
-    state,
-    tooltipTriggerRef
-  );
-  const {
-    overlayProps: positionProps,
-    placement: overlayPlacement,
-    arrowProps
-  } = (0, import_overlays8.useOverlayPosition)({
-    placement: props.placement,
-    targetRef: tooltipTriggerRef,
-    offset: props.offset,
-    crossOffset: props.crossOffset,
-    isOpen: state.isOpen,
-    overlayRef
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_focus18.FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps, children: [
-    tooltipTrigger,
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-      TooltipContext.Provider,
-      {
-        value: {
-          state,
-          overlayRef,
-          arrowProps,
-          placement: overlayPlacement,
-          ...tooltipProps,
-          ...positionProps
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Overlay, { open: state.isOpen, children: tooltip })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_aria_components23.TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
-var Tooltip = ({ children, variant, size }) => {
-  const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
-  const { tooltipProps } = (0, import_tooltip3.useTooltip)({}, state);
-  const classNames2 = (0, import_system70.useClassNames)({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
-    "div",
-    {
-      ...tooltipProps,
-      ...rest,
-      ref: overlayRef,
-      className: (0, import_system70.cn)("group/tooltip", classNames2.container),
-      "data-placement": placement,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { children }),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-          "div",
-          {
-            ...arrowProps,
-            className: (0, import_system70.cn)("absolute h-0 w-0", classNames2.arrow)
-          }
-        )
-      ]
-    }
-  );
+var import_jsx_runtime87 = require("react/jsx-runtime");
+var _Tooltip = ({ children, variant, size, open, ...rest }) => {
+  const props = {
+    ...rest,
+    isOpen: open
+  };
+  const classNames2 = (0, import_system72.useClassNames)({ component: "Tooltip", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_react_aria_components24.Tooltip, { ...props, className: (0, import_system72.cn)("group/tooltip", classNames2.container), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react_aria_components24.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+    children
+  ] });
 };
-Tooltip.Trigger = TooltipTrigger;
+_Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/index.ts
 var import_collections6 = require("@react-stately/collections");
 
 // src/TagGroup/TagGroup.tsx
-var import_react58 = require("react");
+var import_react55 = require("react");
 var import_tag2 = require("@react-aria/tag");
 var import_list = require("@react-stately/list");
-var import_system72 = require("@marigold/system");
+var import_system74 = require("@marigold/system");
 
 // src/TagGroup/Tag.tsx
-var import_react57 = __toESM(require("react"));
-var import_button6 = require("@react-aria/button");
-var import_focus19 = require("@react-aria/focus");
+var import_react54 = __toESM(require("react"));
+var import_button4 = require("@react-aria/button");
+var import_focus14 = require("@react-aria/focus");
 var import_tag = require("@react-aria/tag");
-var import_utils29 = require("@react-aria/utils");
-var import_system71 = require("@marigold/system");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_utils24 = require("@react-aria/utils");
+var import_system73 = require("@marigold/system");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var CloseButton2 = ({ className, ...props }) => {
-  const ref = (0, import_react57.useRef)(null);
-  const { buttonProps } = (0, import_button6.useButton)({ ...props }, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("button", { className, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("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 = (0, import_react54.useRef)(null);
+  const { buttonProps } = (0, import_button4.useButton)({ ...props }, ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("button", { className, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("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 = {
     item,
     ...rest
   };
-  let ref = import_react57.default.useRef(null);
-  let { focusProps } = (0, import_focus19.useFocusRing)({ within: true });
+  let ref = import_react54.default.useRef(null);
+  let { focusProps } = (0, import_focus14.useFocusRing)({ within: true });
   const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = (0, import_tag.useTag)(
     {
       ...props,
@@ -4088,20 +3916,20 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     state,
     ref
   );
-  const classNames2 = (0, import_system71.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  const classNames2 = (0, import_system73.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "span",
     {
       ref,
-      ...(0, import_utils29.mergeProps)(rowProps, focusProps),
+      ...(0, import_utils24.mergeProps)(rowProps, focusProps),
       className: classNames2.tag,
-      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ...gridCellProps, className: classNames2.gridCell, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: item.rendered }),
-        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { ...gridCellProps, className: classNames2.gridCell, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { children: item.rendered }),
+        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
           CloseButton2,
           {
             ...removeButtonProps,
-            className: (0, import_system71.cn)("flex items-center", classNames2.closeButton)
+            className: (0, import_system73.cn)("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -4110,8 +3938,8 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
 };
 
 // src/TagGroup/TagGroup.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
-var import_react59 = require("react");
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_react56 = require("react");
 var TagGroup = ({
   width,
   required,
@@ -4124,14 +3952,14 @@ var TagGroup = ({
     validationState: error ? "invalid" : "valid",
     ...rest
   };
-  const inputRef = (0, import_react58.useRef)(null);
+  const inputRef = (0, import_react55.useRef)(null);
   const state = (0, import_list.useListState)(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = (0, import_tag2.useTagGroup)(props, state, inputRef);
-  const stateProps = (0, import_system72.useStateProps)({
+  const stateProps = (0, import_system74.useStateProps)({
     error,
     required
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     FieldBase,
     {
       width,
@@ -4144,13 +3972,13 @@ var TagGroup = ({
       errorMessageProps,
       stateProps,
       ...gridProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "div",
         {
           role: "presentation",
           ref: inputRef,
           className: "flex flex-wrap items-start gap-1",
-          children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_react59.createElement)(
+          children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_react56.createElement)(
             Tag,
             {
               ...item.props,
@@ -4176,11 +4004,11 @@ Tag2.Group = TagGroup;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react60 = require("react");
-var import_system73 = require("@marigold/system");
-var import_jsx_runtime89 = require("react/jsx-runtime");
-var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
-  import_system73.SVG,
+var import_react57 = require("react");
+var import_system75 = require("@marigold/system");
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+  import_system75.SVG,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -4189,13 +4017,13 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "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__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4208,12 +4036,12 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "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__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4226,12 +4054,12 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "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__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4244,12 +4072,12 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "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__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4262,12 +4090,12 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "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__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4280,12 +4108,12 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "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__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4298,12 +4126,12 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "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__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4316,12 +4144,12 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "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__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4334,12 +4162,12 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "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__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4352,12 +4180,12 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "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__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4370,12 +4198,12 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "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__ */ (0, import_jsx_runtime89.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4393,43 +4221,43 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 ));
 
 // src/Tabs/Tabs.tsx
-var import_react64 = require("react");
+var import_react61 = require("react");
 var import_tabs3 = require("@react-aria/tabs");
 var import_collections7 = require("@react-stately/collections");
 var import_tabs4 = require("@react-stately/tabs");
-var import_system76 = require("@marigold/system");
+var import_system78 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react61 = require("react");
-var TabContext = (0, import_react61.createContext)({});
-var useTabContext = () => (0, import_react61.useContext)(TabContext);
+var import_react58 = require("react");
+var TabContext = (0, import_react58.createContext)({});
+var useTabContext = () => (0, import_react58.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react62 = require("react");
-var import_interactions13 = require("@react-aria/interactions");
+var import_react59 = require("react");
+var import_interactions8 = require("@react-aria/interactions");
 var import_tabs = require("@react-aria/tabs");
-var import_utils30 = require("@react-aria/utils");
-var import_system74 = require("@marigold/system");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_utils25 = require("@react-aria/utils");
+var import_system76 = require("@marigold/system");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
-  const ref = (0, import_react62.useRef)(null);
+  const ref = (0, import_react59.useRef)(null);
   const { tabProps, isSelected } = (0, import_tabs.useTab)({ key }, state, ref);
   const disabled = tabProps["aria-disabled"];
-  const { hoverProps, isHovered } = (0, import_interactions13.useHover)({
+  const { hoverProps, isHovered } = (0, import_interactions8.useHover)({
     isDisabled: disabled || isSelected
   });
-  const { focusProps } = (0, import_interactions13.useFocus)({});
-  const stateProps = (0, import_system74.useStateProps)({ active: isSelected, hover: isHovered });
+  const { focusProps } = (0, import_interactions8.useFocus)({});
+  const stateProps = (0, import_system76.useStateProps)({ active: isSelected, hover: isHovered });
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     "div",
     {
-      className: (0, import_system74.cn)(
+      className: (0, import_system76.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
-      ...(0, import_utils30.mergeProps)(tabProps, stateProps, focusProps, hoverProps),
+      ...(0, import_utils25.mergeProps)(tabProps, stateProps, focusProps, hoverProps),
       ref,
       children: rendered
     }
@@ -4437,21 +4265,21 @@ var Tab = ({ item, state }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react63 = require("react");
+var import_react60 = require("react");
 var import_tabs2 = require("@react-aria/tabs");
-var import_system75 = require("@marigold/system");
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_system77 = require("@marigold/system");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var TabPanel = ({ state, ...props }) => {
   var _a;
-  const ref = (0, import_react63.useRef)(null);
+  const ref = (0, import_react60.useRef)(null);
   const { tabPanelProps } = (0, import_tabs2.useTabPanel)(props, state, ref);
   const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_system75.cn)(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_system77.cn)(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
 };
 
 // src/Tabs/Tabs.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var Tabs = ({
   space = 2,
   size = "medium",
@@ -4460,31 +4288,31 @@ var Tabs = ({
   ...rest
 }) => {
   var _a;
-  const ref = (0, import_react64.useRef)(null);
+  const ref = (0, import_react61.useRef)(null);
   const props = {
     isDisabled: disabled,
     ...rest
   };
   const state = (0, import_tabs4.useTabListState)(props);
   const { tabListProps } = (0, import_tabs3.useTabList)(props, state, ref);
-  const classNames2 = (0, import_system76.useClassNames)({
+  const classNames2 = (0, import_system78.useClassNames)({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: (0, import_system76.cn)(classNames2.container), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_system78.cn)(classNames2.container), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       "div",
       {
-        className: (0, import_system76.cn)("flex", import_system76.gapSpace[space], classNames2.tabs),
+        className: (0, import_system78.cn)("flex", import_system78.gapSpace[space], classNames2.tabs),
         ...tabListProps,
         ref,
         children: [...state.collection].map((item) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Tab, { item, state }, item.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Tab, { item, state }, item.key);
         })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TabPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key)
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(TabPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key)
   ] }) });
 };
 Tabs.Item = import_collections7.Item;
@@ -4556,6 +4384,7 @@ Tabs.Item = import_collections7.Item;
   VisuallyHidden,
   XLoader,
   _Slider,
+  _TextArea,
   useAsyncList,
   useFieldGroupContext,
   useListData,