@marigold/components 6.3.1 → 6.5.0

package/dist/index.mjs

@@ -14,107 +14,30 @@ import { useTreeState } from "@react-stately/tree";
 
 // src/Accordion/AccordionItem.tsx
 import { useEffect, useRef } from "react";
-import { FocusRing, useFocusRing as useFocusRing2 } from "@react-aria/focus";
-import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { useClassNames as useClassNames2, useStateProps as useStateProps2 } from "@marigold/system";
-
-// src/Button/Button.tsx
-import { forwardRef } from "react";
-import { useButton } from "@react-aria/button";
-import { useFocusRing } from "@react-aria/focus";
-import { useHover } from "@react-aria/interactions";
-import { mergeProps, useObjectRef } from "@react-aria/utils";
+import { FocusRing, useFocusRing } from "@react-aria/focus";
+import { mergeProps as mergeProps2 } from "@react-aria/utils";
 import { cn, useClassNames, useStateProps } from "@marigold/system";
-import { jsx } from "react/jsx-runtime";
-var Button = forwardRef(
-  ({
-    as = "button",
-    children,
-    variant,
-    size,
-    disabled,
-    onPress,
-    onPressStart,
-    onPressEnd,
-    onPressChange,
-    onPressUp,
-    fullWidth,
-    className,
-    excludeFromTabOrder,
-    ...props
-  }, ref) => {
-    const Component = as;
-    const buttonRef = useObjectRef(ref);
-    const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
-    const { isFocusVisible, focusProps } = useFocusRing({
-      autoFocus: props.autoFocus
-    });
-    const { buttonProps, isPressed } = useButton(
-      {
-        /**
-         * `react-aria` only expected `Element` but we casted
-         * it to a `HTMLButtonElement` internally.
-         */
-        ...props,
-        onPress,
-        onPressStart,
-        onPressEnd,
-        onPressChange,
-        onPressUp,
-        elementType: typeof as === "string" ? as : "span",
-        isDisabled: disabled,
-        excludeFromTabOrder
-      },
-      buttonRef
-    );
-    const classNames2 = useClassNames({
-      component: "Button",
-      variant,
-      size,
-      className
-    });
-    const stateProps = useStateProps({
-      active: isPressed,
-      focusVisible: isFocusVisible,
-      hover: isHovered
-    });
-    return /* @__PURE__ */ jsx(
-      Component,
-      {
-        ...mergeProps(buttonProps, focusProps, hoverProps, props),
-        ...stateProps,
-        ref: buttonRef,
-        className: cn(
-          "inline-flex items-center justify-center gap-[0.5ch]",
-          classNames2,
-          fullWidth ? "w-full" : void 0
-        ),
-        children
-      }
-    );
-  }
-);
 
 // src/Chevron/ChevronUp.tsx
-import { forwardRef as forwardRef2 } from "react";
+import { forwardRef } from "react";
 import { SVG } from "@marigold/system";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ChevronUp = forwardRef2(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx2("path", { d: "M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" }) })
+import { jsx } from "react/jsx-runtime";
+var ChevronUp = forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx("path", { d: "M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" }) })
 );
 
 // src/Chevron/ChevronDown.tsx
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef2 } from "react";
 import { SVG as SVG2 } from "@marigold/system";
-import { jsx as jsx3 } from "react/jsx-runtime";
-var ChevronDown = forwardRef3(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3(SVG2, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx3("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ChevronDown = forwardRef2(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(SVG2, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx2("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
 );
 
 // src/Accordion/useAccordionItem.ts
-import { useButton as useButton2 } from "@react-aria/button";
+import { useButton } from "@react-aria/button";
 import { useSelectableItem } from "@react-aria/selection";
-import { mergeProps as mergeProps2, useId } from "@react-aria/utils";
+import { mergeProps, useId } from "@react-aria/utils";
 import { isAppleDevice } from "@react-aria/utils";
 import { isMac } from "@react-aria/utils";
 function isNonContiguousSelectionModifier(e) {
@@ -182,8 +105,8 @@ function useAccordionItem(props, state, ref) {
       }
     }
   };
-  let { buttonProps } = useButton2(
-    mergeProps2(itemProps, {
+  let { buttonProps } = useButton(
+    mergeProps(itemProps, {
       id: buttonId,
       elementType: "button",
       isDisabled,
@@ -208,7 +131,7 @@ function useAccordionItem(props, state, ref) {
 }
 
 // src/Accordion/AccordionItem.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var AccordionItem = ({
   item,
   state,
@@ -241,30 +164,33 @@ var AccordionItem = ({
     state,
     ref
   );
-  const { isFocusVisible, focusProps } = useFocusRing2();
-  const stateProps = useStateProps2({
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const stateProps = useStateProps({
     focus: isFocusVisible,
     expanded: defaultExpanded || expanded
   });
-  const classNames2 = useClassNames2({ component: "Accordion", variant, size });
+  const classNames2 = useClassNames({ component: "Accordion", variant, size });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", ...props, children: [
-    /* @__PURE__ */ jsx4(FocusRing, { within: true, children: /* @__PURE__ */ jsxs(
-      Button,
+    /* @__PURE__ */ jsx3(FocusRing, { within: true, children: /* @__PURE__ */ jsxs(
+      "button",
       {
-        className: classNames2.button,
-        ...mergeProps3(buttonProps, stateProps, props),
+        className: cn(
+          "inline-flex items-center justify-center gap-[0.5ch]",
+          classNames2.button
+        ),
+        ...mergeProps2(buttonProps, stateProps, props),
         ref,
         "aria-label": item.textValue,
         children: [
           title,
-          !expanded ? /* @__PURE__ */ jsx4(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ jsx4(ChevronDown, { className: "h3 w-6" })
+          expanded ? /* @__PURE__ */ jsx3(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ jsx3(ChevronDown, { className: "h3 w-6" })
         ]
       }
     ) }),
-    expanded || defaultExpanded ? /* @__PURE__ */ jsx4(
+    expanded || defaultExpanded ? /* @__PURE__ */ jsx3(
       "div",
       {
-        ...mergeProps3(regionProps, focusProps, stateProps),
+        ...mergeProps2(regionProps, focusProps, stateProps),
         className: classNames2.item,
         children: item.props.children
       }
@@ -273,7 +199,7 @@ var AccordionItem = ({
 };
 
 // src/Accordion/Accordion.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var Accordion = ({ children, ...props }) => {
   const ownProps = {
     ...props,
@@ -298,7 +224,8 @@ var Accordion = ({ children, ...props }) => {
     state,
     ref
   );
-  return /* @__PURE__ */ jsx5("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsx5(
+  delete accordionProps.onKeyDownCapture;
+  return /* @__PURE__ */ jsx4("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsx4(
     AccordionItem,
     {
       title: item.props.title,
@@ -315,7 +242,7 @@ Accordion.Item = Item;
 // src/Aside/Aside.tsx
 import { Children as Children2 } from "react";
 import { cn as cn2, createVar, gapSpace } from "@marigold/system";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var classNames = {
   aside: "grow basis-[--sideWidth]",
   content: "basis-0 grow-[999] [min-inline-size:--wrap]"
@@ -342,7 +269,7 @@ var Aside = ({
         !stretch && "items-start"
       ),
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             className: classNames[side === "left" ? "aside" : "content"],
@@ -350,7 +277,7 @@ var Aside = ({
             children: left
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             className: classNames[side === "right" ? "aside" : "content"],
@@ -365,13 +292,13 @@ var Aside = ({
 
 // src/Aspect/Aspect.tsx
 import { aspect, cn as cn3, createVar as createVar2 } from "@marigold/system";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var Aspect = ({
   ratio = "square",
   maxWidth,
   children
 }) => {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: cn3(
@@ -396,12 +323,12 @@ import { useComboBoxState } from "@react-stately/combobox";
 import {
   cn as cn6,
   width as twWidth,
-  useClassNames as useClassNames5
+  useClassNames as useClassNames4
 } from "@marigold/system";
 
 // src/HelpText/HelpText.tsx
-import { SVG as SVG3, cn as cn4, useClassNames as useClassNames3 } from "@marigold/system";
-import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { SVG as SVG3, cn as cn4, useClassNames as useClassNames2 } from "@marigold/system";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var HelpText = ({
   variant,
   size,
@@ -414,48 +341,53 @@ var HelpText = ({
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
-  const classNames2 = useClassNames3({
+  const classNames2 = useClassNames2({
     component: "HelpText",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       ...props,
       ...hasErrorMessage ? errorMessageProps : descriptionProps,
       className: cn4("flex items-center gap-1", classNames2.container),
       children: hasErrorMessage ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx7(
           SVG3,
           {
             className: cn4("h-4 w-4", classNames2.icon),
             viewBox: "0 0 24 24",
             role: "presentation",
-            children: /* @__PURE__ */ jsx8("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__ */ jsx7("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
           }
         ),
         errorMessage
-      ] }) : /* @__PURE__ */ jsx8(Fragment, { children: description })
+      ] }) : /* @__PURE__ */ jsx7(Fragment, { children: description })
     }
   );
 };
 
 // src/Label/Label.tsx
-import { SVG as SVG4, cn as cn5, createVar as createVar3, useClassNames as useClassNames4 } from "@marigold/system";
+import { Label } from "react-aria-components";
+import { SVG as SVG4, cn as cn5, createVar as createVar3, useClassNames as useClassNames3 } from "@marigold/system";
+
+// src/FieldBase/FieldGroup.tsx
+import { createContext, useContext } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var FieldGroupContext = createContext({});
+var useFieldGroupContext = () => useContext(FieldGroupContext);
+var FieldGroup = ({ labelWidth, children }) => {
+  return /* @__PURE__ */ jsx8(FieldGroupContext.Provider, { value: { labelWidth }, children });
+};
+
+// src/Label/Label.tsx
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-var Label = ({
-  as = "label",
-  children,
-  variant,
-  size,
-  labelWidth,
-  ...props
-}) => {
-  const Component = as;
-  const classNames2 = useClassNames4({ component: "Label", size, variant });
+var _Label = ({ size, variant, children, ...props }) => {
+  const classNames2 = useClassNames3({ component: "Label", size, variant });
+  const { labelWidth } = useFieldGroupContext();
   return /* @__PURE__ */ jsxs4(
-    Component,
+    Label,
     {
       ...props,
       className: cn5(classNames2.container, "flex w-[var(--labelWidth)]"),
@@ -477,17 +409,8 @@ var Label = ({
   );
 };
 
-// src/FieldBase/FieldGroup.tsx
-import { createContext, useContext } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var FieldGroupContext = createContext({});
-var useFieldGroupContext = () => useContext(FieldGroupContext);
-var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ jsx10(FieldGroupContext.Provider, { value: { labelWidth }, children });
-};
-
 // src/FieldBase/FieldBase.tsx
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var FieldBase = ({
   children,
   variant,
@@ -505,8 +428,7 @@ var FieldBase = ({
   ...props
 }) => {
   const hasHelpText = !!description || errorMessage && error;
-  const { labelWidth } = useFieldGroupContext();
-  const classNames2 = useClassNames5({
+  const classNames2 = useClassNames4({
     component: "Field",
     variant,
     size
@@ -518,18 +440,9 @@ var FieldBase = ({
       ...stateProps,
       className: cn6("group/field", twWidth[width], classNames2),
       children: [
-        label && /* @__PURE__ */ jsx11(
-          Label,
-          {
-            variant,
-            size,
-            labelWidth,
-            ...labelProps,
-            children: label
-          }
-        ),
+        label && /* @__PURE__ */ jsx10(_Label, { variant, size, ...labelProps, children: label }),
         children,
-        hasHelpText && /* @__PURE__ */ jsx11(
+        hasHelpText && /* @__PURE__ */ jsx10(
           HelpText,
           {
             variant,
@@ -550,13 +463,13 @@ var FieldBase = ({
 // src/Input/Input.tsx
 import {
   cloneElement as cloneElement2,
-  forwardRef as forwardRef4
+  forwardRef as forwardRef3
 } from "react";
-import { cn as cn7, useClassNames as useClassNames6 } from "@marigold/system";
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var Input = forwardRef4(
+import { cn as cn7, useClassNames as useClassNames5 } from "@marigold/system";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+var Input = forwardRef3(
   ({ type = "text", icon, action, variant, size, ...props }, ref) => {
-    const classNames2 = useClassNames6({
+    const classNames2 = useClassNames5({
       component: "Input",
       variant,
       size
@@ -585,12 +498,12 @@ var Input = forwardRef4(
         "data-action": action && "",
         children: [
           inputIcon,
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx11(
             "input",
             {
               ...props,
               className: cn7(
-                "flex-1",
+                "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",
@@ -608,10 +521,10 @@ var Input = forwardRef4(
 );
 
 // src/ListBox/ListBox.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef4 } from "react";
 import { useListBox } from "@react-aria/listbox";
-import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
-import { cn as cn8, useClassNames as useClassNames7 } from "@marigold/system";
+import { useObjectRef } from "@react-aria/utils";
+import { cn as cn8, useClassNames as useClassNames6 } from "@marigold/system";
 
 // src/ListBox/Context.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
@@ -621,9 +534,9 @@ var useListBoxContext = () => useContext2(ListBoxContext);
 // src/ListBox/ListBoxOption.tsx
 import { useRef as useRef3 } from "react";
 import { useOption } from "@react-aria/listbox";
-import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { useStateProps as useStateProps3 } from "@marigold/system";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { mergeProps as mergeProps3 } from "@react-aria/utils";
+import { useStateProps as useStateProps2 } from "@marigold/system";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var ListBoxOption = ({ item, state }) => {
   const ref = useRef3(null);
   const { optionProps, isSelected, isDisabled, isFocused } = useOption(
@@ -635,17 +548,17 @@ var ListBoxOption = ({ item, state }) => {
   );
   const { onPointerUp, ...props } = optionProps;
   const { classNames: classNames2 } = useListBoxContext();
-  const stateProps = useStateProps3({
+  const stateProps = useStateProps2({
     selected: isSelected,
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx12(
     "li",
     {
       ref,
       className: classNames2.option,
-      ...mergeProps4(props, { onPointerDown: onPointerUp }, { ...stateProps }),
+      ...mergeProps3(props, { onPointerDown: onPointerUp }, { ...stateProps }),
       children: item.props.children
     }
   );
@@ -653,7 +566,7 @@ var ListBoxOption = ({ item, state }) => {
 
 // src/ListBox/ListBoxSection.tsx
 import { useListBoxSection } from "@react-aria/listbox";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var ListBoxSection = ({ section, state }) => {
   const { classNames: classNames2 } = useListBoxContext();
   const { itemProps, headingProps, groupProps } = useListBoxSection({
@@ -661,19 +574,19 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   return /* @__PURE__ */ jsxs7("li", { className: classNames2.section, ...itemProps, children: [
-    section.rendered && /* @__PURE__ */ jsx14("div", { className: classNames2.sectionTitle, ...headingProps, children: section.rendered }),
-    /* @__PURE__ */ jsx14("ul", { className: classNames2.list, ...groupProps, children: [...section.props.children].map((node) => /* @__PURE__ */ jsx14(ListBoxOption, { item: node, state }, node.key)) })
+    section.rendered && /* @__PURE__ */ jsx13("div", { className: classNames2.sectionTitle, ...headingProps, children: section.rendered }),
+    /* @__PURE__ */ jsx13("ul", { className: classNames2.list, ...groupProps, children: [...section.props.children].map((node) => /* @__PURE__ */ jsx13(ListBoxOption, { item: node, state }, node.key)) })
   ] });
 };
 
 // src/ListBox/ListBox.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var ListBox = forwardRef5(
+import { jsx as jsx14 } from "react/jsx-runtime";
+var ListBox = forwardRef4(
   ({ state, variant, size, ...props }, ref) => {
-    const innerRef = useObjectRef2(ref);
+    const innerRef = useObjectRef(ref);
     const { listBoxProps } = useListBox(props, state, innerRef);
-    const classNames2 = useClassNames7({ component: "ListBox", variant, size });
-    return /* @__PURE__ */ jsx15(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx15("div", { className: classNames2.container, children: /* @__PURE__ */ jsx15(
+    const classNames2 = useClassNames6({ component: "ListBox", variant, size });
+    return /* @__PURE__ */ jsx14(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx14("div", { className: classNames2.container, children: /* @__PURE__ */ jsx14(
       "ul",
       {
         className: cn8(
@@ -683,7 +596,7 @@ var ListBox = forwardRef5(
         ref: innerRef,
         ...listBoxProps,
         children: [...state.collection].map(
-          (item) => item.type === "section" ? /* @__PURE__ */ jsx15(ListBoxSection, { section: item, state }, item.key) : /* @__PURE__ */ jsx15(ListBoxOption, { item, state }, item.key)
+          (item) => item.type === "section" ? /* @__PURE__ */ jsx14(ListBoxSection, { section: item, state }, item.key) : /* @__PURE__ */ jsx14(ListBoxOption, { item, state }, item.key)
         )
       }
     ) }) });
@@ -691,24 +604,24 @@ var ListBox = forwardRef5(
 );
 
 // src/Overlay/Modal.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 import { FocusScope } from "@react-aria/focus";
 import { useModal, useOverlay, usePreventScroll } from "@react-aria/overlays";
-import { mergeProps as mergeProps5, useObjectRef as useObjectRef3 } from "@react-aria/utils";
+import { mergeProps as mergeProps4, useObjectRef as useObjectRef2 } from "@react-aria/utils";
 
 // src/Overlay/Underlay.tsx
-import { cn as cn9, useClassNames as useClassNames8 } from "@marigold/system";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { cn as cn9, useClassNames as useClassNames7 } from "@marigold/system";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var Underlay = ({ size, variant, ...props }) => {
-  const classNames2 = useClassNames8({ component: "Underlay", size, variant });
-  return /* @__PURE__ */ jsx16("div", { className: cn9("fixed inset-0 z-40", classNames2), ...props });
+  const classNames2 = useClassNames7({ component: "Underlay", size, variant });
+  return /* @__PURE__ */ jsx15("div", { className: cn9("fixed inset-0 z-40", classNames2), ...props });
 };
 
 // src/Overlay/Modal.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
-var Modal = forwardRef6(
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+var Modal = forwardRef5(
   ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
-    const modalRef = useObjectRef3(ref);
+    const modalRef = useObjectRef2(ref);
     const { overlayProps, underlayProps } = useOverlay(
       {
         isOpen: open,
@@ -721,14 +634,14 @@ var Modal = forwardRef6(
     usePreventScroll();
     const { modalProps } = useModal({});
     return /* @__PURE__ */ jsxs8(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: [
-      /* @__PURE__ */ jsx17(Underlay, { ...underlayProps, variant: "modal" }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx16(Underlay, { ...underlayProps, variant: "modal" }),
+      /* @__PURE__ */ jsx16(
         "div",
         {
           className: "pointer-none fixed inset-0 z-50 flex items-center justify-center",
           ref: modalRef,
-          ...mergeProps5(props, overlayProps, modalProps),
-          children: /* @__PURE__ */ jsx17("div", { style: { pointerEvents: "auto" }, children })
+          ...mergeProps4(props, overlayProps, modalProps),
+          children: /* @__PURE__ */ jsx16("div", { style: { pointerEvents: "auto" }, children })
         }
       )
     ] });
@@ -741,7 +654,7 @@ import {
   Overlay as ReactAriaOverlay
 } from "@react-aria/overlays";
 import { useTheme } from "@marigold/system";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Overlay = ({ children, container, open }) => {
   const nodeRef = useRef4(null);
   const theme = useTheme();
@@ -749,7 +662,7 @@ var Overlay = ({ children, container, open }) => {
   if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ jsx18(ReactAriaOverlay, { portalContainer: container, children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx17(ReactAriaOverlay, { portalContainer: container, children: /* @__PURE__ */ jsx17(
     "div",
     {
       ref: nodeRef,
@@ -762,23 +675,23 @@ var Overlay = ({ children, container, open }) => {
 };
 
 // src/Overlay/Popover.tsx
-import { forwardRef as forwardRef7, useRef as useRef5 } from "react";
+import { forwardRef as forwardRef6, useRef as useRef5 } from "react";
 import { FocusScope as FocusScope2 } from "@react-aria/focus";
 import {
   DismissButton,
   usePopover
 } from "@react-aria/overlays";
-import { useClassNames as useClassNames9 } from "@marigold/system";
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
-var Popover = forwardRef7(
+import { useClassNames as useClassNames8 } from "@marigold/system";
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+var Popover = forwardRef6(
   (props, ref) => {
     const fallbackRef = useRef5(null);
     const popoverRef = ref || fallbackRef;
     let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ jsx19(Overlay, { open: state.isOpen, ...otherProps, children: /* @__PURE__ */ jsx19(PopoverWrapper, { ref: popoverRef, ...props, children }) });
+    return /* @__PURE__ */ jsx18(Overlay, { open: state.isOpen, ...otherProps, children: /* @__PURE__ */ jsx18(PopoverWrapper, { ref: popoverRef, ...props, children }) });
   }
 );
-var PopoverWrapper = forwardRef7(
+var PopoverWrapper = forwardRef6(
   ({
     children,
     isNonModal,
@@ -796,12 +709,12 @@ var PopoverWrapper = forwardRef7(
       },
       state
     );
-    const classNames2 = useClassNames9({
+    const classNames2 = useClassNames8({
       component: "Popover",
       variant: placement
     });
     return /* @__PURE__ */ jsxs9(FocusScope2, { restoreFocus: true, children: [
-      !isNonModal && /* @__PURE__ */ jsx19(Underlay, { ...underlayProps }),
+      !isNonModal && /* @__PURE__ */ jsx18(Underlay, { ...underlayProps }),
       /* @__PURE__ */ jsxs9(
         "div",
         {
@@ -814,9 +727,9 @@ var PopoverWrapper = forwardRef7(
           ref,
           role: "presentation",
           children: [
-            !isNonModal && /* @__PURE__ */ jsx19(DismissButton, { onDismiss: state.close }),
+            !isNonModal && /* @__PURE__ */ jsx18(DismissButton, { onDismiss: state.close }),
             children,
-            /* @__PURE__ */ jsx19(DismissButton, { onDismiss: state.close })
+            /* @__PURE__ */ jsx18(DismissButton, { onDismiss: state.close })
           ]
         }
       )
@@ -825,21 +738,21 @@ var PopoverWrapper = forwardRef7(
 );
 
 // src/Overlay/Tray.tsx
-import { forwardRef as forwardRef8 } from "react";
+import { forwardRef as forwardRef7 } from "react";
 import { FocusScope as FocusScope3 } from "@react-aria/focus";
 import {
   DismissButton as DismissButton2,
   useModalOverlay
 } from "@react-aria/overlays";
-import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
-var Tray = forwardRef8(
+import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
+var Tray = forwardRef7(
   ({ state, children, ...props }, ref) => {
-    const trayRef = useObjectRef4(ref);
-    return /* @__PURE__ */ jsx20(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx20(TrayWrapper, { state, ...props, ref: trayRef, children }) });
+    const trayRef = useObjectRef3(ref);
+    return /* @__PURE__ */ jsx19(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx19(TrayWrapper, { state, ...props, ref: trayRef, children }) });
   }
 );
-var TrayWrapper = forwardRef8(
+var TrayWrapper = forwardRef7(
   ({ children, state, ...props }, ref) => {
     let { modalProps, underlayProps } = useModalOverlay(
       {
@@ -849,7 +762,7 @@ var TrayWrapper = forwardRef8(
       state,
       ref
     );
-    return /* @__PURE__ */ jsx20(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx20(Underlay, { ...underlayProps, variant: "modal", children: /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsx19(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx19(Underlay, { ...underlayProps, variant: "modal", children: /* @__PURE__ */ jsxs10(
       "div",
       {
         ...modalProps,
@@ -857,9 +770,9 @@ var TrayWrapper = forwardRef8(
         className: "absolute bottom-0 w-full",
         "data-testid": "tray",
         children: [
-          /* @__PURE__ */ jsx20(DismissButton2, { onDismiss: state.close }),
+          /* @__PURE__ */ jsx19(DismissButton2, { onDismiss: state.close }),
           children,
-          /* @__PURE__ */ jsx20(DismissButton2, { onDismiss: state.close })
+          /* @__PURE__ */ jsx19(DismissButton2, { onDismiss: state.close })
         ]
       }
     ) }) });
@@ -868,12 +781,12 @@ var TrayWrapper = forwardRef8(
 
 // src/Autocomplete/ClearButton.tsx
 import { useRef as useRef6 } from "react";
-import { useButton as useButton3 } from "@react-aria/button";
-import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
-import { useHover as useHover2 } from "@react-aria/interactions";
-import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn10, useStateProps as useStateProps4 } from "@marigold/system";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { useButton as useButton2 } from "@react-aria/button";
+import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
+import { useHover } from "@react-aria/interactions";
+import { mergeProps as mergeProps5 } from "@react-aria/utils";
+import { cn as cn10, useStateProps as useStateProps3 } from "@marigold/system";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ClearButton = ({
   preventFocus,
   disabled,
@@ -889,11 +802,11 @@ var ClearButton = ({
   ...props
 }) => {
   const buttonRef = useRef6(null);
-  const { hoverProps, isHovered } = useHover2({ isDisabled: disabled });
-  const { isFocusVisible, focusProps } = useFocusRing3({
+  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
+  const { isFocusVisible, focusProps } = useFocusRing2({
     autoFocus: props.autoFocus
   });
-  const { buttonProps, isPressed } = useButton3(
+  const { buttonProps, isPressed } = useButton2(
     {
       ...props,
       onClick,
@@ -911,22 +824,22 @@ var ClearButton = ({
   if (preventFocus) {
     delete buttonProps.tabIndex;
   }
-  const stateProps = useStateProps4({
+  const stateProps = useStateProps3({
     active: isPressed,
     focusVisible: isFocusVisible,
     hover: isHovered
   });
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx20(
     "button",
     {
-      ...mergeProps6(buttonProps, focusProps, hoverProps, props),
+      ...mergeProps5(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       ref: buttonRef,
       className: cn10(
         "cursor-pointer appearance-none border-none p-0 pr-1",
         className
       ),
-      children: /* @__PURE__ */ jsx21(
+      children: /* @__PURE__ */ jsx20(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -934,7 +847,7 @@ var ClearButton = ({
           fill: "currentColor",
           width: 20,
           height: 20,
-          children: /* @__PURE__ */ jsx21("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+          children: /* @__PURE__ */ jsx20("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
         }
       )
     }
@@ -942,8 +855,8 @@ var ClearButton = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
-var SearchIcon = (props) => /* @__PURE__ */ jsx22(
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var SearchIcon = (props) => /* @__PURE__ */ jsx21(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -952,7 +865,7 @@ var SearchIcon = (props) => /* @__PURE__ */ jsx22(
     width: 24,
     height: 24,
     ...props,
-    children: /* @__PURE__ */ jsx22("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+    children: /* @__PURE__ */ jsx21("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
   }
 );
 var Autocomplete = ({
@@ -1008,7 +921,7 @@ var Autocomplete = ({
   );
   const { isDisabled, ...restClearButtonProps } = clearButtonProps;
   return /* @__PURE__ */ jsxs11(Fragment2, { children: [
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx21(
       FieldBase,
       {
         label: props.label,
@@ -1018,13 +931,13 @@ var Autocomplete = ({
         errorMessage: props.errorMessage,
         disabled,
         width,
-        children: /* @__PURE__ */ jsx22(
+        children: /* @__PURE__ */ jsx21(
           Input,
           {
             ...inputProps,
             ref: inputRef,
-            icon: /* @__PURE__ */ jsx22(SearchIcon, {}),
-            action: state.inputValue !== "" ? /* @__PURE__ */ jsx22(
+            icon: /* @__PURE__ */ jsx21(SearchIcon, {}),
+            action: state.inputValue !== "" ? /* @__PURE__ */ jsx21(
               ClearButton,
               {
                 preventFocus: true,
@@ -1036,7 +949,7 @@ var Autocomplete = ({
         )
       }
     ),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx21(
       Popover,
       {
         state,
@@ -1044,7 +957,7 @@ var Autocomplete = ({
         triggerRef: inputRef,
         scrollRef: listBoxRef,
         isNonModal: true,
-        children: /* @__PURE__ */ jsx22(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+        children: /* @__PURE__ */ jsx21(ListBox, { ref: listBoxRef, state, ...listBoxProps })
       }
     )
   ] });
@@ -1053,11 +966,41 @@ Autocomplete.Item = Item2;
 
 // src/ComboBox/ComboBox.tsx
 import React from "react";
-import { useButton as useButton4 } from "@react-aria/button";
 import { useComboBox } from "@react-aria/combobox";
 import { useFilter as useFilter2 } from "@react-aria/i18n";
 import { Item as Item3 } from "@react-stately/collections";
 import { useComboBoxState as useComboBoxState2 } from "@react-stately/combobox";
+
+// src/Button/Button.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { Button } from "react-aria-components";
+import { cn as cn11, useClassNames as useClassNames9 } from "@marigold/system";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var _Button = forwardRef8(
+  ({ children, variant, size, disabled, fullWidth, ...props }, ref) => {
+    const classNames2 = useClassNames9({
+      component: "Button",
+      variant,
+      size
+    });
+    return /* @__PURE__ */ jsx22(
+      Button,
+      {
+        ...props,
+        ref,
+        className: cn11(
+          "inline-flex items-center justify-center gap-[0.5ch]",
+          classNames2,
+          fullWidth ? "w-full" : void 0
+        ),
+        isDisabled: disabled,
+        children
+      }
+    );
+  }
+);
+
+// src/ComboBox/ComboBox.tsx
 import { Fragment as Fragment3, jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 var ComboBox = ({
   error,
@@ -1097,7 +1040,6 @@ var ComboBox = ({
     state
   );
   const errorMessageProps = { "aria-invalid": error };
-  const { buttonProps } = useButton4(triggerProps, buttonRef);
   const { label, description, errorMessage } = props;
   return /* @__PURE__ */ jsxs12(Fragment3, { children: [
     /* @__PURE__ */ jsx23(
@@ -1116,11 +1058,11 @@ var ComboBox = ({
             ...inputProps,
             ref: inputRef,
             action: /* @__PURE__ */ jsx23(
-              Button,
+              _Button,
               {
                 className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0",
                 ref: buttonRef,
-                ...buttonProps,
+                ...triggerProps,
                 children: /* @__PURE__ */ jsx23(ChevronDown, { className: "h-4 w-4" })
               }
             )
@@ -1152,7 +1094,7 @@ var Badge = ({ variant, size, children, ...props }) => {
 };
 
 // src/Breakout/Breakout.tsx
-import { alignment, cn as cn11, createVar as createVar4 } from "@marigold/system";
+import { alignment, cn as cn12, createVar as createVar4 } from "@marigold/system";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var Breakout = ({
   height,
@@ -1166,7 +1108,7 @@ var Breakout = ({
   return /* @__PURE__ */ jsx25(
     "div",
     {
-      className: cn11(
+      className: cn12(
         "col-start-[1_!important] col-end-[-1_!important] w-full",
         alignX && ((_b = (_a = alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
         alignY && ((_d = (_c = alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
@@ -1190,7 +1132,7 @@ var Body = ({ children, variant, size, ...props }) => {
 
 // src/Card/Card.tsx
 import {
-  cn as cn12,
+  cn as cn13,
   gapSpace as gapSpace2,
   paddingBottom,
   paddingLeft,
@@ -1221,7 +1163,7 @@ var Card = ({
     "div",
     {
       ...props,
-      className: cn12(
+      className: cn13(
         "flex flex-col",
         classNames2,
         gapSpace2[space],
@@ -1239,7 +1181,7 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-import { cn as cn13, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
+import { cn as cn14, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
 import { jsx as jsx28 } from "react/jsx-runtime";
 var Center = ({
   maxWidth = "100%",
@@ -1251,7 +1193,7 @@ var Center = ({
     "div",
     {
       ...props,
-      className: cn13(
+      className: cn14(
         "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
         gapSpace3[space],
         "max-w-[--maxWidth]"
@@ -1264,27 +1206,92 @@ var Center = ({
 
 // src/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { useCheckbox, useCheckboxGroupItem } from "@react-aria/checkbox";
-import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
-import { useHover as useHover3 } from "@react-aria/interactions";
-import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
-import { useToggleState } from "@react-stately/toggle";
-import {
-  cn as cn14,
-  useClassNames as useClassNames14,
-  useStateProps as useStateProps6
-} from "@marigold/system";
-
-// src/Checkbox/CheckboxField.tsx
-import { createVar as createVar6, useClassNames as useClassNames13 } from "@marigold/system";
-import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
-var CheckboxField = ({ children, labelWidth }) => {
-  const classNames2 = useClassNames13({ component: "Field" });
-  return /* @__PURE__ */ jsxs13("div", { className: classNames2, children: [
-    /* @__PURE__ */ jsx29("div", { className: "w-[--labelWidth]", style: createVar6({ labelWidth }) }),
-    children
-  ] });
+import { Checkbox } from "react-aria-components";
+import { cn as cn15, useClassNames as useClassNames13 } from "@marigold/system";
+import { Fragment as Fragment4, jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+var CheckMark = () => /* @__PURE__ */ jsx29("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx29(
+  "path",
+  {
+    fill: "currentColor",
+    stroke: "none",
+    d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
+  }
+) });
+var IndeterminateMark = () => /* @__PURE__ */ jsx29("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx29(
+  "path",
+  {
+    fill: "currentColor",
+    stroke: "none",
+    d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
+  }
+) });
+var Icon = ({ className, checked, indeterminate, ...props }) => {
+  return /* @__PURE__ */ jsx29(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn15(
+        "flex shrink-0 grow-0 basis-4 items-center justify-center",
+        "h-4 w-4 p-px",
+        "bg-white",
+        "rounded-[3px] border border-solid border-black ",
+        className
+      ),
+      ...props,
+      children: indeterminate ? /* @__PURE__ */ jsx29(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx29(CheckMark, {}) : null
+    }
+  );
 };
+var _Checkbox = forwardRef9(
+  ({
+    className,
+    indeterminate,
+    error,
+    disabled,
+    defaultChecked,
+    children,
+    checked,
+    readOnly,
+    required,
+    variant,
+    size,
+    ...rest
+  }, ref) => {
+    const props = {
+      isIndeterminate: indeterminate,
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isRequired: required,
+      isInvalid: error,
+      defaultSelected: defaultChecked,
+      ...rest
+    };
+    const classNames2 = useClassNames13({ component: "Checkbox", variant, size });
+    return /* @__PURE__ */ jsx29(
+      Checkbox,
+      {
+        ref,
+        className: cn15(
+          "group/checkbox flex items-center gap-[0.5rem]",
+          "cursor-pointer data-[disabled]:cursor-not-allowed",
+          classNames2.container
+        ),
+        ...props,
+        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs13(Fragment4, { children: [
+          /* @__PURE__ */ jsx29(
+            Icon,
+            {
+              checked: isSelected,
+              indeterminate: isIndeterminate,
+              className: classNames2.checkbox
+            }
+          ),
+          /* @__PURE__ */ jsx29("div", { className: classNames2.label, children })
+        ] })
+      }
+    );
+  }
+);
 
 // src/Checkbox/CheckboxGroup.tsx
 import { createContext as createContext3, useContext as useContext3 } from "react";
@@ -1292,13 +1299,15 @@ import { useCheckboxGroup } from "@react-aria/checkbox";
 import {
   useCheckboxGroupState
 } from "@react-stately/checkbox";
-import { useStateProps as useStateProps5 } from "@marigold/system";
+import { useClassNames as useClassNames14, useStateProps as useStateProps4 } from "@marigold/system";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var CheckboxGroupContext = createContext3(
   null
 );
 var useCheckboxGroupContext = () => useContext3(CheckboxGroupContext);
 var CheckboxGroup = ({
+  variant,
+  size,
   children,
   required,
   disabled,
@@ -1316,7 +1325,13 @@ var CheckboxGroup = ({
   };
   const state = useCheckboxGroupState(props);
   const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
-  const stateProps = useStateProps5({
+  const classNames2 = useClassNames14({
+    component: "Checkbox",
+    variant,
+    size,
+    className: { group: "flex flex-col items-start gap-[0.5ch]" }
+  });
+  const stateProps = useStateProps4({
     disabled,
     readOnly,
     error
@@ -1325,7 +1340,7 @@ var CheckboxGroup = ({
     FieldBase,
     {
       label: props.label,
-      labelProps: { as: "span", ...labelProps },
+      labelProps: { elementType: "span", ...labelProps },
       description: props.description,
       descriptionProps,
       error,
@@ -1335,149 +1350,15 @@ var CheckboxGroup = ({
       stateProps,
       width,
       ...groupProps,
-      children: /* @__PURE__ */ jsx30("div", { role: "presentation", className: "flex flex-col items-start", children: /* @__PURE__ */ jsx30(CheckboxGroupContext.Provider, { value: { error, ...state }, children }) })
-    }
-  );
-};
-
-// src/Checkbox/Checkbox.tsx
-import { jsx as jsx31, jsxs as jsxs14 } from "react/jsx-runtime";
-var CheckMark = () => /* @__PURE__ */ jsx31("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx31(
-  "path",
-  {
-    fill: "currentColor",
-    stroke: "none",
-    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__ */ jsx31("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx31(
-  "path",
-  {
-    fill: "currentColor",
-    stroke: "none",
-    d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
-  }
-) });
-var Icon = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ jsx31(
-    "div",
-    {
-      "aria-hidden": "true",
-      className: cn14(
-        "flex shrink-0 grow-0 basis-4 items-center justify-center",
-        "h-4 w-4 p-px",
-        "bg-white",
-        "rounded-[3px] border border-solid border-black",
-        className
-      ),
-      ...props,
-      children: indeterminate ? /* @__PURE__ */ jsx31(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx31(CheckMark, {}) : null
+      children: /* @__PURE__ */ jsx30("div", { role: "presentation", className: classNames2.group, children: /* @__PURE__ */ jsx30(CheckboxGroupContext.Provider, { value: { error, ...state }, children }) })
     }
   );
 };
-var Checkbox = forwardRef9(
-  ({
-    size,
-    variant,
-    disabled,
-    checked,
-    defaultChecked,
-    indeterminate,
-    readOnly,
-    required,
-    error,
-    ...props
-  }, ref) => {
-    const inputRef = useObjectRef5(ref);
-    const checkboxProps = {
-      isIndeterminate: indeterminate,
-      isDisabled: disabled,
-      isReadOnly: readOnly,
-      isRequired: required,
-      validationState: error ? "invalid" : "valid"
-    };
-    const groupState = useCheckboxGroupContext();
-    const { inputProps } = groupState ? useCheckboxGroupItem(
-      {
-        ...props,
-        ...checkboxProps,
-        /**
-         * value is optional for standalone checkboxes, but required when
-         * used inside a group.
-         */
-        value: props.value
-      },
-      groupState,
-      inputRef
-    ) : useCheckbox(
-      {
-        isSelected: checked,
-        defaultSelected: defaultChecked,
-        ...checkboxProps,
-        ...props
-      },
-      useToggleState({
-        isSelected: checked,
-        defaultSelected: defaultChecked,
-        isReadOnly: readOnly,
-        ...props
-      }),
-      inputRef
-    );
-    const classNames2 = useClassNames14({ component: "Checkbox", variant, size });
-    const { hoverProps, isHovered } = useHover3({
-      isDisabled: inputProps.disabled
-    });
-    const { labelWidth } = useFieldGroupContext();
-    const { isFocusVisible, focusProps } = useFocusRing4();
-    const stateProps = useStateProps6({
-      hover: isHovered,
-      focus: isFocusVisible,
-      checked: inputProps.checked,
-      disabled: inputProps.disabled,
-      error: (groupState == null ? void 0 : groupState.error) || error,
-      readOnly,
-      indeterminate
-    });
-    const component = /* @__PURE__ */ jsxs14(
-      "label",
-      {
-        className: cn14(
-          "group/checkbox relative flex items-center gap-[1ch]",
-          classNames2.container
-        ),
-        ...hoverProps,
-        ...stateProps,
-        children: [
-          /* @__PURE__ */ jsx31(
-            "input",
-            {
-              ref: inputRef,
-              className: "z-1 absolute left-0 top-0 h-full w-full cursor-pointer opacity-[0.0001] group-disabled/checkbox:cursor-not-allowed",
-              ...inputProps,
-              ...focusProps
-            }
-          ),
-          /* @__PURE__ */ jsx31(
-            Icon,
-            {
-              checked: inputProps.checked,
-              indeterminate,
-              className: classNames2.checkbox
-            }
-          ),
-          props.children && /* @__PURE__ */ jsx31("div", { className: classNames2.label, children: props.children })
-        ]
-      }
-    );
-    return !groupState && labelWidth ? /* @__PURE__ */ jsx31(CheckboxField, { labelWidth, children: component }) : component;
-  }
-);
 
 // src/Columns/Columns.tsx
 import { Children as Children3, cloneElement as cloneElement3, isValidElement as isValidElement2 } from "react";
-import { cn as cn15, createVar as createVar7, gapSpace as gapSpace4 } from "@marigold/system";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { cn as cn16, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
   columns,
@@ -1493,22 +1374,22 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
-      className: cn15(
+      className: cn16(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
         gapSpace4[space]
       ),
       ...props,
-      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx32(
+      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx31(
         "div",
         {
-          className: cn15(
+          className: cn16(
             "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
-          style: createVar7({ collapseAt, columnSize: columns[idx] }),
+          style: createVar6({ collapseAt, columnSize: columns[idx] }),
           children: isValidElement2(child) ? cloneElement3(child) : child
         }
       ))
@@ -1518,13 +1399,13 @@ var Columns = ({
 
 // src/Container/Container.tsx
 import {
-  cn as cn16,
-  createVar as createVar8,
+  cn as cn17,
+  createVar as createVar7,
   gridColsAlign,
   gridColumn,
   placeItems
 } from "@marigold/system";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var content = {
   small: "20ch",
   medium: "45ch",
@@ -1544,17 +1425,17 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       ...props,
-      className: cn16(
+      className: cn17(
         "grid",
         placeItems[alignItems],
         gridColsAlign[align],
         gridColumn[align]
       ),
-      style: createVar8({ maxWidth }),
+      style: createVar7({ maxWidth }),
       children
     }
   );
@@ -1567,40 +1448,40 @@ import {
   isValidElement as isValidElement3,
   useRef as useRef9
 } from "react";
-import { useButton as useButton5 } from "@react-aria/button";
+import { useButton as useButton3 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
-import { cn as cn19, useClassNames as useClassNames17 } from "@marigold/system";
+import { cn as cn20, useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/Header/Header.tsx
-import { cn as cn17, useClassNames as useClassNames15 } from "@marigold/system";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { cn as cn18, useClassNames as useClassNames15 } from "@marigold/system";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Header = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames15({
     component: "Header",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx34("header", { ...props, className: cn17(classNames2), children });
+  return /* @__PURE__ */ jsx33("header", { ...props, className: cn18(classNames2), children });
 };
 
 // src/Headline/Headline.tsx
+import { Heading } from "react-aria-components";
 import {
-  cn as cn18,
-  createVar as createVar9,
+  cn as cn19,
+  createVar as createVar8,
   get,
   textAlign,
   useClassNames as useClassNames16,
   useTheme as useTheme2
 } from "@marigold/system";
-import { jsx as jsx35 } from "react/jsx-runtime";
-var Headline = ({
-  children,
+import { jsx as jsx34 } from "react/jsx-runtime";
+var _Headline = ({
   variant,
   size,
+  children,
   align = "left",
   color,
-  level = "1",
-  as = `h${level}`,
+  level = 1,
   ...props
 }) => {
   const theme = useTheme2();
@@ -1609,13 +1490,13 @@ var Headline = ({
     variant,
     size: size != null ? size : `level-${level}`
   });
-  const Component = as;
-  return /* @__PURE__ */ jsx35(
-    Component,
+  return /* @__PURE__ */ jsx34(
+    Heading,
     {
+      level: Number(level),
       ...props,
-      className: cn18(classNames2, "text-[--color]", textAlign[align]),
-      style: createVar9({
+      className: cn19(classNames2, "text-[--color]", textAlign[align]),
+      style: createVar8({
         color: color && theme.colors && get(
           theme.colors,
           color.replace("-", "."),
@@ -1635,7 +1516,7 @@ var useDialogContext = () => useContext4(DialogContext);
 
 // src/Dialog/DialogController.tsx
 import { useOverlayTriggerState } from "@react-stately/overlays";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var DialogController = ({
   children,
   dismissable = true,
@@ -1648,7 +1529,7 @@ var DialogController = ({
     onOpenChange
   });
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ jsx36(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx36(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx35(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx35(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx35(
     Modal,
     {
       open: state.isOpen,
@@ -1664,7 +1545,7 @@ var DialogController = ({
 import { Children as Children4, useRef as useRef8 } from "react";
 import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
-import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
 var DialogTrigger = ({
   children,
   dismissable = true,
@@ -1674,8 +1555,8 @@ var DialogTrigger = ({
   const dialogTriggerRef = useRef8(null);
   const state = useOverlayTriggerState2({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ jsxs15(DialogContext.Provider, { value: ctx, children: [
-    /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsxs14(DialogContext.Provider, { value: ctx, children: [
+    /* @__PURE__ */ jsx36(
       PressResponder,
       {
         ref: dialogTriggerRef,
@@ -1684,7 +1565,7 @@ var DialogTrigger = ({
         children: dialogTrigger
       }
     ),
-    /* @__PURE__ */ jsx37(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx36(Overlay, { open: state.isOpen, children: /* @__PURE__ */ jsx36(
       Modal,
       {
         open: state.isOpen,
@@ -1698,26 +1579,26 @@ var DialogTrigger = ({
 };
 
 // src/Dialog/Dialog.tsx
-import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
   const ref = useRef9(null);
   const { close } = useDialogContext();
-  const { buttonProps } = useButton5(
+  const { buttonProps } = useButton3(
     {
       onPress: () => close == null ? void 0 : close()
     },
     ref
   );
-  return /* @__PURE__ */ jsx38("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx37("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx37(
     "button",
     {
-      className: cn19(
+      className: cn20(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
       ref,
       ...buttonProps,
-      children: /* @__PURE__ */ jsx38("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx38(
+      children: /* @__PURE__ */ jsx37("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx37(
         "path",
         {
           fillRule: "evenodd",
@@ -1731,7 +1612,7 @@ var CloseButton = ({ className }) => {
 var addTitleProps = (children, titleProps) => {
   const childs = Children5.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => isValidElement3(child) && (child.type === Header || child.type === Headline)
+    (child) => isValidElement3(child) && (child.type === Header || child.type === _Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1757,8 +1638,8 @@ var Dialog = ({
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
   const classNames2 = useClassNames17({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ jsxs16("div", { className: classNames2.container, ...dialogProps, children: [
-    closeButton && /* @__PURE__ */ jsx38(CloseButton, { className: classNames2.closeButton }),
+  return /* @__PURE__ */ jsxs15("div", { className: classNames2.container, ...dialogProps, children: [
+    closeButton && /* @__PURE__ */ jsx37(CloseButton, { className: classNames2.closeButton }),
     typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps)
   ] });
 };
@@ -1766,31 +1647,30 @@ Dialog.Trigger = DialogTrigger;
 Dialog.Controller = DialogController;
 
 // src/Divider/Divider.tsx
-import { useSeparator } from "@react-aria/separator";
+import { Separator } from "react-aria-components";
 import { useClassNames as useClassNames18 } from "@marigold/system";
-import { jsx as jsx39 } from "react/jsx-runtime";
-var Divider = ({ variant, ...props }) => {
-  const { separatorProps } = useSeparator(props);
+import { jsx as jsx38 } from "react/jsx-runtime";
+var _Divider = ({ variant, ...props }) => {
   const classNames2 = useClassNames18({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx39("div", { className: classNames2, ...props, ...separatorProps });
+  return /* @__PURE__ */ jsx38(Separator, { className: classNames2, ...props });
 };
 
 // src/Footer/Footer.tsx
 import { useClassNames as useClassNames19 } from "@marigold/system";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames19({ component: "Footer", variant, size });
-  return /* @__PURE__ */ jsx40("footer", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx39("footer", { ...props, className: classNames2, children });
 };
 
 // src/Image/Image.tsx
 import {
-  cn as cn20,
+  cn as cn21,
   objectFit,
   objectPosition,
   useClassNames as useClassNames20
 } from "@marigold/system";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var Image = ({
   variant,
   size,
@@ -1799,12 +1679,12 @@ var Image = ({
   ...props
 }) => {
   const classNames2 = useClassNames20({ component: "Image", variant, size });
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx40(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: cn20(
+      className: cn21(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1817,10 +1697,10 @@ var Image = ({
 // src/Inline/Inline.tsx
 import {
   alignment as alignment2,
-  cn as cn21,
+  cn as cn22,
   gapSpace as gapSpace5
 } from "@marigold/system";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
   orientation,
@@ -1830,11 +1710,11 @@ var Inline = ({
   ...props
 }) => {
   var _a2, _b2, _c, _d;
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       ...props,
-      className: cn21(
+      className: cn22(
         "flex flex-wrap",
         gapSpace5[space],
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
@@ -1849,20 +1729,20 @@ var Inline = ({
 import { createCalendar } from "@internationalized/date";
 import { useRef as useRef11 } from "react";
 import { useDateField } from "@react-aria/datepicker";
-import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useLocale } from "@react-aria/i18n";
-import { useHover as useHover4 } from "@react-aria/interactions";
-import { mergeProps as mergeProps8 } from "@react-aria/utils";
+import { useHover as useHover2 } from "@react-aria/interactions";
+import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import { useDateFieldState } from "@react-stately/datepicker";
-import { cn as cn23, useClassNames as useClassNames21, useStateProps as useStateProps8 } from "@marigold/system";
+import { cn as cn24, useClassNames as useClassNames21, useStateProps as useStateProps6 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { useRef as useRef10 } from "react";
 import { useDateSegment } from "@react-aria/datepicker";
-import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
-import { mergeProps as mergeProps7 } from "@react-aria/utils";
-import { cn as cn22, useStateProps as useStateProps7 } from "@marigold/system";
-import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
+import { mergeProps as mergeProps6 } from "@react-aria/utils";
+import { cn as cn23, useStateProps as useStateProps5 } from "@marigold/system";
+import { jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
 var DateSegment = ({
   className,
   segment,
@@ -1871,21 +1751,21 @@ var DateSegment = ({
 }) => {
   const ref = useRef10(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
-  const { focusProps, isFocused } = useFocusRing5({
+  const { focusProps, isFocused } = useFocusRing3({
     within: true,
     isTextInput: true
   });
-  const stateProps = useStateProps7({
+  const stateProps = useStateProps5({
     disabled: state.isDisabled,
     focusVisible: isFocused
   });
   const { isPlaceholder, placeholder, text, type, maxValue } = segment;
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
-      ...mergeProps7(segmentProps, stateProps, focusProps),
+      ...mergeProps6(segmentProps, stateProps, focusProps),
       ref,
-      className: cn22(
+      className: cn23(
         "group/segment",
         "text-center leading-none outline-0",
         type !== "literal" && "p-0.5",
@@ -1896,25 +1776,25 @@ var DateSegment = ({
         minWidth: maxValue != null ? String(maxValue).length + "ch" : void 0
       },
       children: [
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx42(
           "span",
           {
             "aria-hidden": "true",
-            className: cn22(
+            className: cn23(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ jsx43("span", { children: isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text })
+        /* @__PURE__ */ jsx42("span", { children: isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text })
       ]
     }
   );
 };
 
 // src/DateField/DateField.tsx
-import { jsx as jsx44, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs17 } from "react/jsx-runtime";
 var DateField = ({
   disabled,
   readOnly,
@@ -1950,13 +1830,13 @@ var DateField = ({
     ref
   );
   const classNames2 = useClassNames21({ component: "DateField", variant, size });
-  const { focusProps, isFocused } = useFocusRing6({
+  const { focusProps, isFocused } = useFocusRing4({
     within: true,
     isTextInput: true,
     autoFocus: props.autoFocus
   });
-  const { hoverProps, isHovered } = useHover4({ isDisabled: disabled });
-  const stateProps = useStateProps8({
+  const { hoverProps, isHovered } = useHover2({ isDisabled: disabled });
+  const stateProps = useStateProps6({
     hover: isHovered,
     error,
     readOnly,
@@ -1964,7 +1844,7 @@ var DateField = ({
     required,
     focus: isFocused || isPressed
   });
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx43(
     FieldBase,
     {
       error,
@@ -1979,11 +1859,11 @@ var DateField = ({
       variant,
       size,
       width,
-      children: /* @__PURE__ */ jsxs18(
+      children: /* @__PURE__ */ jsxs17(
         "div",
         {
-          ...mergeProps8(fieldProps, focusProps, stateProps, hoverProps),
-          className: cn23(
+          ...mergeProps7(fieldProps, focusProps, stateProps, hoverProps),
+          className: cn24(
             "relative flex flex-row flex-nowrap",
             "cursor-text aria-disabled:cursor-not-allowed",
             classNames2.field
@@ -1991,9 +1871,9 @@ var DateField = ({
           "data-testid": "date-field",
           ref: triggerRef,
           children: [
-            /* @__PURE__ */ jsx44("div", { ref, className: "flex basis-full items-center", children: state.segments.map((segment, i) => {
+            /* @__PURE__ */ jsx43("div", { ref, className: "flex basis-full items-center", children: state.segments.map((segment, i) => {
               var _a;
-              return /* @__PURE__ */ jsx44(
+              return /* @__PURE__ */ jsx43(
                 DateSegment,
                 {
                   className: classNames2.segment,
@@ -2004,15 +1884,15 @@ var DateField = ({
                 i
               );
             }) }),
-            action ? action : /* @__PURE__ */ jsx44("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx44(
+            action ? action : /* @__PURE__ */ jsx43("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx43(
               "svg",
               {
                 "data-testid": "action",
-                className: cn23(classNames2.action),
+                className: cn24(classNames2.action),
                 viewBox: "0 0 24 24",
                 width: 24,
                 height: 24,
-                children: /* @__PURE__ */ jsx44("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                children: /* @__PURE__ */ jsx43("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
               }
             ) })
           ]
@@ -2031,7 +1911,7 @@ import {
 import { useLocale as useLocale3 } from "@react-aria/i18n";
 import { useCalendarState } from "@react-stately/calendar";
 import { ChevronLeft, ChevronRight } from "@marigold/icons";
-import { cn as cn26, useClassNames as useClassNames24, useStateProps as useStateProps11 } from "@marigold/system";
+import { cn as cn27, useClassNames as useClassNames24, useStateProps as useStateProps9 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import { getWeeksInMonth, startOfWeek, today } from "@internationalized/date";
@@ -2043,10 +1923,10 @@ import { useDateFormatter } from "@react-aria/i18n";
 // src/Calendar/CalendarCell.tsx
 import { useRef as useRef12 } from "react";
 import { useCalendarCell } from "@react-aria/calendar";
-import { useHover as useHover5 } from "@react-aria/interactions";
-import { mergeProps as mergeProps9 } from "@react-aria/utils";
-import { cn as cn24, useClassNames as useClassNames22, useStateProps as useStateProps9 } from "@marigold/system";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { useHover as useHover3 } from "@react-aria/interactions";
+import { mergeProps as mergeProps8 } from "@react-aria/utils";
+import { cn as cn25, useClassNames as useClassNames22, useStateProps as useStateProps7 } from "@marigold/system";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var CalendarCell = (props) => {
   const ref = useRef12(null);
   const { state } = props;
@@ -2055,31 +1935,31 @@ var CalendarCell = (props) => {
     component: "Calendar"
   });
   const isDisabled = cellProps["aria-disabled"];
-  const { hoverProps, isHovered } = useHover5({
+  const { hoverProps, isHovered } = useHover3({
     isDisabled: isDisabled || cellProps["aria-selected"]
   });
-  const stateProps = useStateProps9({
+  const stateProps = useStateProps7({
     disabled: isDisabled,
     hover: isHovered,
     selected: cellProps["aria-selected"]
   });
-  return /* @__PURE__ */ jsx45("td", { className: "group/cell", ...cellProps, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx44("td", { className: "group/cell", ...cellProps, children: /* @__PURE__ */ jsx44(
     "div",
     {
-      className: cn24(
+      className: cn25(
         "flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
         classNames2.calendarCell
       ),
       hidden: isOutsideVisibleRange,
       ref,
-      ...mergeProps9(buttonProps, stateProps, hoverProps),
+      ...mergeProps8(buttonProps, stateProps, hoverProps),
       children: formattedDate
     }
   ) });
 };
 
 // src/Calendar/CalendarGrid.tsx
-import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs18 } from "react/jsx-runtime";
 var CalendarGrid = ({ state, ...props }) => {
   const { locale } = useLocale2();
   const { gridProps, headerProps } = useCalendarGrid(props, state);
@@ -2099,23 +1979,23 @@ var CalendarGrid = ({ state, ...props }) => {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs18(
     "table",
     {
       className: "w-full border-spacing-[6px]",
       ...gridProps,
       cellPadding: "8",
       children: [
-        /* @__PURE__ */ jsx46("thead", { ...headerProps, children: /* @__PURE__ */ jsx46("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx46("th", { style: { fontWeight: "bolder" }, children: day.substring(0, 2) }, index)) }) }),
-        /* @__PURE__ */ jsx46("tbody", { children: [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx46("tr", { children: state.getDatesInWeek(weekIndex).map(
-          (date, i) => date ? /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx45("thead", { ...headerProps, children: /* @__PURE__ */ jsx45("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx45("th", { style: { fontWeight: "bolder" }, children: day.substring(0, 2) }, index)) }) }),
+        /* @__PURE__ */ jsx45("tbody", { children: [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ jsx45("tr", { children: state.getDatesInWeek(weekIndex).map(
+          (date, i) => date ? /* @__PURE__ */ jsx45(
             CalendarCell,
             {
               date,
               state
             },
             i
-          ) : /* @__PURE__ */ jsx46("td", {}, i)
+          ) : /* @__PURE__ */ jsx45("td", {}, i)
         ) }, weekIndex)) })
       ]
     }
@@ -2130,18 +2010,18 @@ import {
   forwardRef as forwardRef10,
   useRef as useRef13
 } from "react";
-import { useButton as useButton6 } from "@react-aria/button";
-import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
+import { useButton as useButton4 } from "@react-aria/button";
+import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useLocalizedStringFormatter } from "@react-aria/i18n";
 import { HiddenSelect, useSelect } from "@react-aria/select";
-import { mergeProps as mergeProps10, useObjectRef as useObjectRef6 } from "@react-aria/utils";
+import { mergeProps as mergeProps9, useObjectRef as useObjectRef4 } from "@react-aria/utils";
 import { Item as Item4, Section } from "@react-stately/collections";
 import { useSelectState } from "@react-stately/select";
 import {
-  cn as cn25,
+  cn as cn26,
   useClassNames as useClassNames23,
   useSmallScreen,
-  useStateProps as useStateProps10
+  useStateProps as useStateProps8
 } from "@marigold/system";
 
 // src/Select/intl.ts
@@ -2155,7 +2035,7 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-import { jsx as jsx47, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
 var Select = forwardRef10(
   ({
     variant,
@@ -2178,7 +2058,7 @@ var Select = forwardRef10(
       onSelectionChange: onChange,
       ...rest
     };
-    const buttonRef = useObjectRef6(ref);
+    const buttonRef = useObjectRef4(ref);
     const listboxRef = useRef13(null);
     const state = useSelectState(props);
     const {
@@ -2189,28 +2069,28 @@ var Select = forwardRef10(
       descriptionProps,
       errorMessageProps
     } = useSelect(props, state, buttonRef);
-    const { buttonProps } = useButton6(
+    const { buttonProps } = useButton4(
       { isDisabled: disabled, ...triggerProps },
       buttonRef
     );
-    const { focusProps, isFocusVisible } = useFocusRing7();
+    const { focusProps, isFocusVisible } = useFocusRing5();
     const classNames2 = useClassNames23({ component: "Select", variant, size });
     const isSmallScreen = useSmallScreen();
-    const stateProps = useStateProps10({
+    const stateProps = useStateProps8({
       disabled,
       error,
       focusVisible: isFocusVisible,
       expanded: state.isOpen,
       required
     });
-    return /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs19(
       FieldBase,
       {
         variant,
         size,
         width,
         label: props.label,
-        labelProps: { as: "span", ...labelProps },
+        labelProps: { elementType: "span", ...labelProps },
         description: props.description,
         descriptionProps,
         error,
@@ -2219,7 +2099,7 @@ var Select = forwardRef10(
         stateProps,
         disabled,
         children: [
-          /* @__PURE__ */ jsx47(
+          /* @__PURE__ */ jsx46(
             HiddenSelect,
             {
               state,
@@ -2229,23 +2109,23 @@ var Select = forwardRef10(
               isDisabled: disabled
             }
           ),
-          /* @__PURE__ */ jsxs20(
+          /* @__PURE__ */ jsxs19(
             "button",
             {
-              className: cn25(
+              className: cn26(
                 "flex w-full items-center justify-between gap-1 overflow-hidden",
                 classNames2.select
               ),
               ref: buttonRef,
-              ...mergeProps10(buttonProps, focusProps),
+              ...mergeProps9(buttonProps, focusProps),
               ...stateProps,
               children: [
-                /* @__PURE__ */ jsx47("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
-                /* @__PURE__ */ jsx47(ChevronDown, { className: "h-4 w-4" })
+                /* @__PURE__ */ jsx46("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
+                /* @__PURE__ */ jsx46(ChevronDown, { className: "h-4 w-4" })
               ]
             }
           ),
-          isSmallScreen ? /* @__PURE__ */ jsx47(Tray, { state, children: /* @__PURE__ */ jsx47(
+          isSmallScreen ? /* @__PURE__ */ jsx46(Tray, { state, children: /* @__PURE__ */ jsx46(
             ListBox,
             {
               ref: listboxRef,
@@ -2254,7 +2134,7 @@ var Select = forwardRef10(
               size,
               ...menuProps
             }
-          ) }) : /* @__PURE__ */ jsx47(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ jsx47(
+          ) }) : /* @__PURE__ */ jsx46(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ jsx46(
             ListBox,
             {
               ref: listboxRef,
@@ -2273,7 +2153,7 @@ Select.Option = Item4;
 Select.Section = Section;
 
 // src/Calendar/MonthDropdown.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var MonthDropdown = ({ state }) => {
   let months = [];
   let formatter = useDateFormatter2({
@@ -2290,7 +2170,7 @@ var MonthDropdown = ({ state }) => {
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx47(
     Select,
     {
       "aria-label": "Month",
@@ -2298,7 +2178,7 @@ var MonthDropdown = ({ state }) => {
       selectedKey: String(state.focusedDate.month),
       "data-testid": "month",
       disabled: state.isDisabled,
-      children: months.map((month, i) => /* @__PURE__ */ jsx48(Select.Option, { children: month.substring(0, 3) }, i + 1))
+      children: months.map((month, i) => /* @__PURE__ */ jsx47(Select.Option, { children: month.substring(0, 3) }, i + 1))
     }
   );
 };
@@ -2306,7 +2186,7 @@ var MonthDropdown_default = MonthDropdown;
 
 // src/Calendar/YearDropdown.tsx
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var YearDropdown = ({ state }) => {
   const years = [];
   let formatter = useDateFormatter3({
@@ -2325,7 +2205,7 @@ var YearDropdown = ({ state }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx48(
     Select,
     {
       "aria-label": "Year",
@@ -2333,14 +2213,14 @@ var YearDropdown = ({ state }) => {
       onChange,
       "data-testid": "year",
       disabled: state.isDisabled,
-      children: years.map((year, i) => /* @__PURE__ */ jsx49(Select.Option, { children: year.formatted }, i))
+      children: years.map((year, i) => /* @__PURE__ */ jsx48(Select.Option, { children: year.formatted }, i))
     }
   );
 };
 var YearDropdown_default = YearDropdown;
 
 // src/Calendar/Calendar.tsx
-import { jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs20 } from "react/jsx-runtime";
 var Calendar = ({
   disabled,
   readOnly,
@@ -2374,16 +2254,16 @@ var Calendar = ({
     onFocusChange: nextFocusChange,
     ...nextPropsRest
   } = nextButtonProps;
-  const calendarState = useStateProps11({
+  const calendarState = useStateProps9({
     disabled: state.isDisabled,
     focusVisible: state.isFocused
   });
   const classNames2 = useClassNames24({ component: "Calendar" });
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs20(
     "div",
     {
       tabIndex: -1,
-      className: cn26(
+      className: cn27(
         "flex w-[360px] flex-col rounded-sm p-4 shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
         classNames2.calendar
       ),
@@ -2391,33 +2271,33 @@ var Calendar = ({
       ...calendarState,
       ref,
       children: [
-        /* @__PURE__ */ jsxs21("div", { className: "mb-4 flex items-center gap-[60px]", children: [
-          /* @__PURE__ */ jsxs21("div", { className: "flex min-w-[170px] gap-[9px] [&_div]:flex", children: [
-            /* @__PURE__ */ jsx50(MonthDropdown_default, { state }),
-            /* @__PURE__ */ jsx50(YearDropdown_default, { state })
+        /* @__PURE__ */ jsxs20("div", { className: "mb-4 flex items-center gap-[60px]", children: [
+          /* @__PURE__ */ jsxs20("div", { className: "flex min-w-[170px] gap-[9px] [&_div]:flex", children: [
+            /* @__PURE__ */ jsx49(MonthDropdown_default, { state }),
+            /* @__PURE__ */ jsx49(YearDropdown_default, { state })
           ] }),
-          /* @__PURE__ */ jsxs21("div", { className: "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1", children: [
-            /* @__PURE__ */ jsx50(
-              Button,
+          /* @__PURE__ */ jsxs20("div", { className: "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1", children: [
+            /* @__PURE__ */ jsx49(
+              _Button,
               {
                 className: classNames2.calendarControllers,
                 ...prevPropsRest,
                 disabled: prevIsDisabled,
-                children: /* @__PURE__ */ jsx50(ChevronLeft, {})
+                children: /* @__PURE__ */ jsx49(ChevronLeft, {})
               }
             ),
-            /* @__PURE__ */ jsx50(
-              Button,
+            /* @__PURE__ */ jsx49(
+              _Button,
               {
                 className: classNames2.calendarControllers,
                 ...nextPropsRest,
                 disabled: nextIsDisabled,
-                children: /* @__PURE__ */ jsx50(ChevronRight, {})
+                children: /* @__PURE__ */ jsx49(ChevronRight, {})
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx50(CalendarGrid, { state })
+        /* @__PURE__ */ jsx49(CalendarGrid, { state })
       ]
     }
   );
@@ -2426,10 +2306,10 @@ var Calendar = ({
 // src/DatePicker/DatePicker.tsx
 import { useRef as useRef15 } from "react";
 import { useDatePicker } from "@react-aria/datepicker";
-import { mergeProps as mergeProps11 } from "@react-aria/utils";
+import { mergeProps as mergeProps10 } from "@react-aria/utils";
 import { useDatePickerState } from "@react-stately/datepicker";
-import { cn as cn27, useClassNames as useClassNames25, useStateProps as useStateProps12 } from "@marigold/system";
-import { Fragment as Fragment4, jsx as jsx51, jsxs as jsxs22 } from "react/jsx-runtime";
+import { cn as cn28, useClassNames as useClassNames25, useStateProps as useStateProps10 } from "@marigold/system";
+import { Fragment as Fragment5, jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
 var DatePicker = ({
   disabled,
   required,
@@ -2454,7 +2334,7 @@ var DatePicker = ({
     ...props
   });
   const ref = useRef15(null);
-  const stateProps = useStateProps12({
+  const stateProps = useStateProps10({
     focus: state.isOpen
   });
   const { groupProps, fieldProps, buttonProps, calendarProps } = useDatePicker(
@@ -2468,8 +2348,8 @@ var DatePicker = ({
     size,
     variant
   });
-  return /* @__PURE__ */ jsxs22(Fragment4, { children: [
-    /* @__PURE__ */ jsx51("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
+    /* @__PURE__ */ jsx50("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ jsx50(
       DateField,
       {
         ...fieldProps,
@@ -2482,42 +2362,42 @@ var DatePicker = ({
         description: !state.isOpen && description,
         triggerRef: ref,
         width,
-        action: /* @__PURE__ */ jsx51("div", { className: classNames2.container, children: /* @__PURE__ */ jsx51(
-          Button,
+        action: /* @__PURE__ */ jsx50("div", { className: classNames2.container, children: /* @__PURE__ */ jsx50(
+          _Button,
           {
-            ...mergeProps11(buttonProps, stateProps),
-            className: cn27("absolute right-0 top-0", classNames2.button),
+            ...mergeProps10(buttonProps, stateProps),
+            className: cn28("absolute right-0 top-0", classNames2.button),
             disabled: isDisabled,
-            children: /* @__PURE__ */ jsx51(
+            children: /* @__PURE__ */ jsx50(
               "svg",
               {
                 width: "24",
                 height: "24",
                 viewBox: "0 0 24 24",
                 fill: "currentColor",
-                children: /* @__PURE__ */ jsx51("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                children: /* @__PURE__ */ jsx50("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
               }
             )
           }
         ) })
       }
     ) }),
-    state.isOpen && /* @__PURE__ */ jsx51(Popover, { triggerRef: ref, state, children: /* @__PURE__ */ jsx51(Calendar, { disabled, ...calendarProps }) })
+    state.isOpen && /* @__PURE__ */ jsx50(Popover, { triggerRef: ref, state, children: /* @__PURE__ */ jsx50(Calendar, { disabled, ...calendarProps }) })
   ] });
 };
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn28,
+  cn as cn29,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
-import { jsx as jsx52 } from "react/jsx-runtime";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
+import { jsx as jsx51 } from "react/jsx-runtime";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx51(
   "div",
   {
-    className: cn28(
+    className: cn29(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -2528,47 +2408,17 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
 
 // src/Link/Link.tsx
 import { forwardRef as forwardRef11 } from "react";
-import { useLink } from "@react-aria/link";
-import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
+import { Link } from "react-aria-components";
 import { useClassNames as useClassNames26 } from "@marigold/system";
-import { jsx as jsx53 } from "react/jsx-runtime";
-var Link = forwardRef11(
-  ({
-    as = "a",
-    variant,
-    size,
-    children,
-    disabled,
-    onPress,
-    onPressStart,
-    ...props
-  }, ref) => {
-    const linkRef = useObjectRef7(ref);
-    const { linkProps } = useLink(
-      {
-        ...props,
-        elementType: typeof as === "string" ? as : "span",
-        isDisabled: disabled
-      },
-      linkRef
-    );
-    const Component = as;
+import { jsx as jsx52 } from "react/jsx-runtime";
+var _Link = forwardRef11(
+  ({ variant, size, disabled, children, ...props }, ref) => {
     const classNames2 = useClassNames26({
       component: "Link",
       variant,
       size
     });
-    return /* @__PURE__ */ jsx53(
-      Component,
-      {
-        ...props,
-        role: "link",
-        className: classNames2,
-        ref: linkRef,
-        ...linkProps,
-        children
-      }
-    );
+    return /* @__PURE__ */ jsx52(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
@@ -2581,14 +2431,14 @@ var ListContext = createContext5({});
 var useListContext = () => useContext5(ListContext);
 
 // src/List/ListItem.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ jsx54("li", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx53("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -2598,7 +2448,7 @@ var List = ({
 }) => {
   const Component = as;
   const classNames2 = useClassNames27({ component: "List", variant, size });
-  return /* @__PURE__ */ jsx55(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx55(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
+  return /* @__PURE__ */ jsx54(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx54(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
@@ -2620,11 +2470,11 @@ var useMenuContext = () => useContext6(MenuContext);
 
 // src/Menu/MenuItem.tsx
 import { useRef as useRef16 } from "react";
-import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
-import { mergeProps as mergeProps12 } from "@react-aria/utils";
-import { useStateProps as useStateProps13 } from "@marigold/system";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { mergeProps as mergeProps11 } from "@react-aria/utils";
+import { useStateProps as useStateProps11 } from "@marigold/system";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var MenuItem = ({
   item,
   state,
@@ -2642,17 +2492,17 @@ var MenuItem = ({
     state,
     ref
   );
-  const { isFocusVisible, focusProps } = useFocusRing8();
-  const stateProps = useStateProps13({
+  const { isFocusVisible, focusProps } = useFocusRing6();
+  const stateProps = useStateProps11({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx55(
     "li",
     {
       ref,
       className,
-      ...mergeProps12(
+      ...mergeProps11(
         props,
         { onPointerDown: onPointerUp },
         stateProps,
@@ -2666,18 +2516,18 @@ var MenuItem = ({
 // src/Menu/MenuSection.tsx
 import { useMenuSection } from "@react-aria/menu";
 import { useClassNames as useClassNames28 } from "@marigold/system";
-import { Fragment as Fragment5, jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
 var MenuSection = ({ onAction, item, state }) => {
   let { itemProps, headingProps, groupProps } = useMenuSection({
     heading: item.rendered,
     "aria-label": item["aria-label"]
   });
   const className = useClassNames28({ component: "Menu" });
-  return /* @__PURE__ */ jsxs23(Fragment5, { children: [
-    item.key !== state.collection.getFirstKey() && /* @__PURE__ */ jsx57("li", { children: /* @__PURE__ */ jsx57(Divider, { variant: "section" }) }),
-    /* @__PURE__ */ jsxs23("li", { ...itemProps, children: [
-      item.rendered && /* @__PURE__ */ jsx57("span", { ...headingProps, className: className.section, children: item.rendered }),
-      /* @__PURE__ */ jsx57("ul", { ...groupProps, className: "pb-1", children: [...item.props.children].map((node) => /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
+    item.key !== state.collection.getFirstKey() && /* @__PURE__ */ jsx56("li", { children: /* @__PURE__ */ jsx56(_Divider, { variant: "section" }) }),
+    /* @__PURE__ */ jsxs22("li", { ...itemProps, children: [
+      item.rendered && /* @__PURE__ */ jsx56("span", { ...headingProps, className: className.section, children: item.rendered }),
+      /* @__PURE__ */ jsx56("ul", { ...groupProps, className: "pb-1", children: [...item.props.children].map((node) => /* @__PURE__ */ jsx56(
         MenuItem,
         {
           item: node,
@@ -2696,10 +2546,10 @@ var MenuSection_default = MenuSection;
 import { Children as Children6, useRef as useRef17 } from "react";
 import { PressResponder as PressResponder2 } from "@react-aria/interactions";
 import { useMenuTrigger } from "@react-aria/menu";
-import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { useSmallScreen as useSmallScreen2 } from "@marigold/system";
-import { jsx as jsx58, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
 var MenuTrigger = ({
   disabled,
   open,
@@ -2708,7 +2558,7 @@ var MenuTrigger = ({
 }) => {
   const [menuTrigger, menu] = Children6.toArray(children);
   const menuTriggerRef = useRef17(null);
-  const menuRef = useObjectRef8();
+  const menuRef = useObjectRef5();
   const state = useMenuTriggerState({
     isOpen: open,
     onOpenChange
@@ -2726,8 +2576,8 @@ var MenuTrigger = ({
     autoFocus: state.focusStrategy
   };
   const isSmallScreen = useSmallScreen2();
-  return /* @__PURE__ */ jsxs24(MenuContext.Provider, { value: menuContext, children: [
-    /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsxs23(MenuContext.Provider, { value: menuContext, children: [
+    /* @__PURE__ */ jsx57(
       PressResponder2,
       {
         ...menuTriggerProps,
@@ -2736,12 +2586,12 @@ var MenuTrigger = ({
         children: menuTrigger
       }
     ),
-    isSmallScreen ? /* @__PURE__ */ jsx58(Tray, { state, children: menu }) : /* @__PURE__ */ jsx58(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state, children: menu })
+    isSmallScreen ? /* @__PURE__ */ jsx57(Tray, { state, children: menu }) : /* @__PURE__ */ jsx57(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state, children: menu })
   ] });
 };
 
 // src/Menu/Menu.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
@@ -2750,9 +2600,9 @@ var Menu = ({ variant, size, ...props }) => {
   const { menuProps } = useMenu(ownProps, state, ref);
   useSyncRef({ ref: scrollRef }, ref);
   const classNames2 = useClassNames29({ component: "Menu", variant, size });
-  return /* @__PURE__ */ jsx59("ul", { ref, className: classNames2.container, ...menuProps, children: [...state.collection].map((item) => {
+  return /* @__PURE__ */ jsx58("ul", { ref, className: classNames2.container, ...menuProps, children: [...state.collection].map((item) => {
     if (item.type === "section") {
-      return /* @__PURE__ */ jsx59(
+      return /* @__PURE__ */ jsx58(
         MenuSection_default,
         {
           item,
@@ -2762,7 +2612,7 @@ var Menu = ({ variant, size, ...props }) => {
         item.key
       );
     }
-    return /* @__PURE__ */ jsx59(
+    return /* @__PURE__ */ jsx58(
       MenuItem,
       {
         item,
@@ -2780,25 +2630,25 @@ Menu.Section = Section2;
 
 // src/Menu/ActionMenu.tsx
 import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ jsxs25(Menu.Trigger, { children: [
-    /* @__PURE__ */ jsx60(Button, { variant: "menu", size: "small", children: /* @__PURE__ */ jsx60(SVG5, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx60("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
-    /* @__PURE__ */ jsx60(Menu, { ...props })
+  return /* @__PURE__ */ jsxs24(Menu.Trigger, { children: [
+    /* @__PURE__ */ jsx59(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ jsx59(SVG5, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx59("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__ */ jsx59(Menu, { ...props })
   ] });
 };
 
 // src/Message/Message.tsx
-import { cn as cn29, useClassNames as useClassNames30 } from "@marigold/system";
-import { jsx as jsx61, jsxs as jsxs26 } from "react/jsx-runtime";
+import { cn as cn30, useClassNames as useClassNames30 } from "@marigold/system";
+import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
 var icons = {
-  info: () => /* @__PURE__ */ jsx61(
+  info: () => /* @__PURE__ */ jsx60(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx61(
+      children: /* @__PURE__ */ jsx60(
         "path",
         {
           fillRule: "evenodd",
@@ -2808,13 +2658,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx61(
+  warning: () => /* @__PURE__ */ jsx60(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx61(
+      children: /* @__PURE__ */ jsx60(
         "path",
         {
           fillRule: "evenodd",
@@ -2824,13 +2674,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx61(
+  error: () => /* @__PURE__ */ jsx60(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx61(
+      children: /* @__PURE__ */ jsx60(
         "path",
         {
           fillRule: "evenodd",
@@ -2850,24 +2700,24 @@ var Message = ({
 }) => {
   const classNames2 = useClassNames30({ component: "Message", variant, size });
   const Icon3 = icons[variant];
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
-      className: cn29(
+      className: cn30(
         "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
         classNames2.container
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx61("div", { className: cn29("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx61(Icon3, {}) }),
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx60("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx60(Icon3, {}) }),
+        /* @__PURE__ */ jsx60(
           "div",
           {
-            className: cn29("col-start-2 row-start-1 self-center", classNames2.title),
+            className: cn30("col-start-2 row-start-1 self-center", classNames2.title),
             children: messageTitle
           }
         ),
-        /* @__PURE__ */ jsx61("div", { className: cn29("col-start-2", classNames2.content), children })
+        /* @__PURE__ */ jsx60("div", { className: cn30("col-start-2", classNames2.content), children })
       ]
     }
   );
@@ -2875,22 +2725,22 @@ var Message = ({
 
 // src/NumberField/NumberField.tsx
 import { forwardRef as forwardRef12 } from "react";
-import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
 import { useLocale as useLocale4 } from "@react-aria/i18n";
-import { useHover as useHover7 } from "@react-aria/interactions";
+import { useHover as useHover5 } from "@react-aria/interactions";
 import { useNumberField } from "@react-aria/numberfield";
-import { mergeProps as mergeProps14, useObjectRef as useObjectRef9 } from "@react-aria/utils";
+import { mergeProps as mergeProps13, useObjectRef as useObjectRef6 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
-import { cn as cn31, useClassNames as useClassNames31, useStateProps as useStateProps15 } from "@marigold/system";
+import { cn as cn32, useClassNames as useClassNames31, useStateProps as useStateProps13 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { useRef as useRef19 } from "react";
-import { useButton as useButton7 } from "@react-aria/button";
-import { useHover as useHover6 } from "@react-aria/interactions";
-import { mergeProps as mergeProps13 } from "@react-aria/utils";
-import { cn as cn30, useStateProps as useStateProps14 } from "@marigold/system";
-import { jsx as jsx62 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx62("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx62(
+import { useButton as useButton5 } from "@react-aria/button";
+import { useHover as useHover4 } from "@react-aria/interactions";
+import { mergeProps as mergeProps12 } from "@react-aria/utils";
+import { cn as cn31, useStateProps as useStateProps12 } from "@marigold/system";
+import { jsx as jsx61 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx61("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx61(
   "path",
   {
     fillRule: "evenodd",
@@ -2898,7 +2748,7 @@ var Plus = () => /* @__PURE__ */ jsx62("svg", { width: 16, height: 16, viewBox:
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ jsx62("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx62(
+var Minus = () => /* @__PURE__ */ jsx61("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx61(
   "path",
   {
     fillRule: "evenodd",
@@ -2912,36 +2762,36 @@ var StepButton = ({
   ...props
 }) => {
   const ref = useRef19(null);
-  const { buttonProps, isPressed } = useButton7(
+  const { buttonProps, isPressed } = useButton5(
     { ...props, elementType: "div" },
     ref
   );
-  const { hoverProps, isHovered } = useHover6(props);
-  const stateProps = useStateProps14({
+  const { hoverProps, isHovered } = useHover4(props);
+  const stateProps = useStateProps12({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx61(
     "div",
     {
-      className: cn30(
+      className: cn31(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
         ],
         className
       ),
-      ...mergeProps13(buttonProps, hoverProps),
+      ...mergeProps12(buttonProps, hoverProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx62(Icon3, {})
+      children: /* @__PURE__ */ jsx61(Icon3, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx63, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs26 } from "react/jsx-runtime";
 var NumberField = forwardRef12(
   ({
     variant,
@@ -2963,7 +2813,7 @@ var NumberField = forwardRef12(
     };
     const showStepper = !hideStepper;
     const { locale } = useLocale4();
-    const inputRef = useObjectRef9(ref);
+    const inputRef = useObjectRef6(ref);
     const state = useNumberFieldState({ ...props, locale });
     const {
       labelProps,
@@ -2974,13 +2824,13 @@ var NumberField = forwardRef12(
       incrementButtonProps,
       decrementButtonProps
     } = useNumberField(props, state, inputRef);
-    const { hoverProps, isHovered } = useHover7({ isDisabled: disabled });
-    const { focusProps, isFocused } = useFocusRing9({
+    const { hoverProps, isHovered } = useHover5({ isDisabled: disabled });
+    const { focusProps, isFocused } = useFocusRing7({
       within: true,
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const stateProps = useStateProps15({
+    const stateProps = useStateProps13({
       hover: isHovered,
       focus: isFocused,
       disabled,
@@ -2993,7 +2843,7 @@ var NumberField = forwardRef12(
       size,
       variant
     });
-    return /* @__PURE__ */ jsx63(
+    return /* @__PURE__ */ jsx62(
       FieldBase,
       {
         label: props.label,
@@ -3007,16 +2857,16 @@ var NumberField = forwardRef12(
         variant,
         size,
         width,
-        children: /* @__PURE__ */ jsxs27(
+        children: /* @__PURE__ */ jsxs26(
           "div",
           {
             "data-group": true,
-            className: cn31("flex items-stretch", classNames2.group),
+            className: cn32("flex items-stretch", classNames2.group),
             "data-testid": "number-field-container",
-            ...mergeProps14(groupProps, focusProps, hoverProps),
+            ...mergeProps13(groupProps, focusProps, hoverProps),
             ...stateProps,
             children: [
-              showStepper && /* @__PURE__ */ jsx63(
+              showStepper && /* @__PURE__ */ jsx62(
                 StepButton,
                 {
                   className: classNames2.stepper,
@@ -3024,20 +2874,17 @@ var NumberField = forwardRef12(
                   ...decrementButtonProps
                 }
               ),
-              /* @__PURE__ */ jsx63("div", { className: "flex-1", children: /* @__PURE__ */ jsx63(
+              /* @__PURE__ */ jsx62("div", { className: "flex-1", children: /* @__PURE__ */ jsx62(
                 Input,
                 {
                   ref: inputRef,
                   variant,
                   size,
-                  className: {
-                    input: "min-w-0 items-stretch  border-none"
-                  },
                   ...inputProps,
                   ...stateProps
                 }
               ) }),
-              showStepper && /* @__PURE__ */ jsx63(
+              showStepper && /* @__PURE__ */ jsx62(
                 StepButton,
                 {
                   className: classNames2.stepper,
@@ -3063,29 +2910,22 @@ import {
   defaultTheme,
   useTheme as useTheme3
 } from "@marigold/system";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 function MarigoldProvider({
   children,
   theme
 }) {
   const outerTheme = useTheme3();
   const isTopLevel = outerTheme === defaultTheme;
-  return /* @__PURE__ */ jsx64(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx64(OverlayProvider, { children }) : children });
+  return /* @__PURE__ */ jsx63(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx63(OverlayProvider, { children }) : children });
 }
 
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef13
+  forwardRef as forwardRef14
 } from "react";
-import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
-import { useHover as useHover8 } from "@react-aria/interactions";
-import { useRadio } from "@react-aria/radio";
-import { mergeProps as mergeProps15, useObjectRef as useObjectRef10 } from "@react-aria/utils";
-import {
-  cn as cn33,
-  useClassNames as useClassNames32,
-  useStateProps as useStateProps17
-} from "@marigold/system";
+import { Radio } from "react-aria-components";
+import { cn as cn36, useClassNames as useClassNames35 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext7, useContext as useContext7 } from "react";
@@ -3095,59 +2935,149 @@ var RadioGroupContext = createContext7(
 var useRadioGroupContext = () => useContext7(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import { useRadioGroup } from "@react-aria/radio";
-import { useRadioGroupState } from "@react-stately/radio";
-import { cn as cn32, useStateProps as useStateProps16 } from "@marigold/system";
-import { jsx as jsx65 } from "react/jsx-runtime";
-var RadioGroup = ({
-  children,
-  orientation = "vertical",
-  width,
-  required,
+import { RadioGroup } from "react-aria-components";
+import { cn as cn35, useClassNames as useClassNames34 } from "@marigold/system";
+
+// src/FieldBase/_FieldBase.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { cn as cn34, width as twWidth2, useClassNames as useClassNames33 } from "@marigold/system";
+
+// src/HelpText/_HelpText.tsx
+import { Text } from "react-aria-components";
+import { cn as cn33, useClassNames as useClassNames32 } from "@marigold/system";
+import { Fragment as Fragment7, jsx as jsx64, jsxs as jsxs27 } from "react/jsx-runtime";
+var HelpText2 = ({
+  variant,
+  size,
+  description,
+  error,
+  errorMessage,
+  ...props
+}) => {
+  const hasErrorMessage = errorMessage && error;
+  const classNames2 = useClassNames32({
+    component: "HelpText",
+    variant,
+    size
+  });
+  if (!description && !errorMessage) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx64(
+    Text,
+    {
+      ...props,
+      slot: hasErrorMessage ? "errorMessage" : "description",
+      className: cn33("flex items-center gap-1", classNames2.container),
+      children: hasErrorMessage ? /* @__PURE__ */ jsxs27(Fragment7, { children: [
+        /* @__PURE__ */ jsx64(
+          "svg",
+          {
+            className: cn33("h-4 w-4", classNames2.icon),
+            viewBox: "0 0 24 24",
+            role: "presentation",
+            children: /* @__PURE__ */ jsx64("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
+      ] }) : description
+    }
+  );
+};
+
+// src/FieldBase/_FieldBase.tsx
+import { jsx as jsx65, jsxs as jsxs28 } from "react/jsx-runtime";
+var fixedForwardRef = forwardRef13;
+var _FieldBase = (props, ref) => {
+  const {
+    as: Component = "div",
+    children,
+    label,
+    size,
+    variant,
+    width = "full",
+    description,
+    errorMessage,
+    ...rest
+  } = props;
+  const classNames2 = useClassNames33({
+    component: "Field",
+    variant,
+    size
+  });
+  return /* @__PURE__ */ jsxs28(
+    Component,
+    {
+      ref,
+      className: cn34("group/field", twWidth2[width], classNames2),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx65(_Label, { variant, size, children: label }),
+        children,
+        /* @__PURE__ */ jsx65(
+          HelpText2,
+          {
+            variant,
+            size,
+            description,
+            errorMessage,
+            error: props.isInvalid
+          }
+        )
+      ]
+    }
+  );
+};
+var FieldBase2 = fixedForwardRef(_FieldBase);
+
+// src/Radio/RadioGroup.tsx
+import { jsx as jsx66 } from "react/jsx-runtime";
+var _RadioGroup = ({
+  variant,
+  size,
+  label,
+  error,
   disabled,
+  required,
   readOnly,
-  error,
+  description,
+  errorMessage,
+  orientation = "vertical",
+  children,
+  width,
   ...rest
 }) => {
+  const classNames2 = useClassNames34({ component: "Radio", variant, size });
   const props = {
-    isRequired: required,
     isDisabled: disabled,
     isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid",
+    isRequired: required,
+    isInvalid: error,
     ...rest
   };
-  const state = useRadioGroupState(props);
-  const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup(props, state);
-  const stateProps = useStateProps16({
-    disabled,
-    readOnly,
-    error,
-    required
-  });
-  return /* @__PURE__ */ jsx65(
-    FieldBase,
+  return /* @__PURE__ */ jsx66(
+    FieldBase2,
     {
+      as: RadioGroup,
       width,
-      label: props.label,
-      labelProps: { as: "span", ...labelProps },
-      description: props.description,
-      descriptionProps,
-      error,
-      errorMessage: props.errorMessage,
-      errorMessageProps,
-      disabled,
-      stateProps,
-      ...radioGroupProps,
-      children: /* @__PURE__ */ jsx65(
+      label,
+      description,
+      errorMessage,
+      variant,
+      size,
+      ...props,
+      children: /* @__PURE__ */ jsx66(
         "div",
         {
           role: "presentation",
+          "data-testid": "group",
           "data-orientation": orientation,
-          className: cn32(
+          className: cn35(
+            classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx65(RadioGroupContext.Provider, { value: { width, error, state }, children })
+          children: /* @__PURE__ */ jsx66(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -3155,208 +3085,118 @@ var RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { jsx as jsx66, jsxs as jsxs28 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx66("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx66("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx66(
+import { Fragment as Fragment8, jsx as jsx67, jsxs as jsxs29 } from "react/jsx-runtime";
+var Dot = () => /* @__PURE__ */ jsx67("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx67("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx67(
   "div",
   {
-    className: cn33(
+    className: cn36(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ jsx66(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx67(Dot, {}) : null
   }
 );
-var Radio = forwardRef13(
-  ({ width, disabled, ...props }, ref) => {
-    const {
-      variant,
-      size,
-      error,
-      width: groupWidth,
-      state
-    } = useRadioGroupContext();
-    const inputRef = useObjectRef10(ref);
-    const { inputProps } = useRadio(
-      { isDisabled: disabled, ...props },
-      state,
-      inputRef
-    );
-    const classNames2 = useClassNames32({
+var _Radio = forwardRef14(
+  ({ value, disabled, width, children, ...props }, ref) => {
+    const { variant, size, width: groupWidth } = useRadioGroupContext();
+    const classNames2 = useClassNames35({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    const { hoverProps, isHovered } = useHover8({ isDisabled: disabled });
-    const { isFocusVisible, focusProps } = useFocusRing10();
-    const stateProps = useStateProps17({
-      hover: isHovered,
-      focus: isFocusVisible,
-      checked: inputProps.checked,
-      disabled: inputProps.disabled,
-      readOnly: props.readOnly,
-      error
-    });
-    return /* @__PURE__ */ jsxs28(
-      "label",
+    return /* @__PURE__ */ jsx67(
+      Radio,
       {
-        className: cn33(
+        ref,
+        className: cn36(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
           classNames2.container
         ),
-        ...mergeProps15(hoverProps, stateProps),
-        children: [
-          /* @__PURE__ */ jsx66(
-            "input",
+        value,
+        isDisabled: disabled,
+        ...props,
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs29(Fragment8, { children: [
+          /* @__PURE__ */ jsx67(
+            Icon2,
             {
-              ref: inputRef,
-              className: cn33(
-                "absolute left-0 top-0 z-[1] h-full w-full opacity-[0.0001]",
-                inputProps.disabled ? "cursor-not-allowed" : "cursor-pointer"
-              ),
-              ...mergeProps15(inputProps, focusProps)
+              checked: isSelected,
+              className: cn36(
+                disabled ? "cursor-not-allowed" : "cursor-pointer",
+                classNames2.radio
+              )
             }
           ),
-          /* @__PURE__ */ jsx66(Icon2, { checked: inputProps.checked, className: classNames2.radio }),
-          /* @__PURE__ */ jsx66("div", { className: classNames2.label, children: props.children })
-        ]
+          /* @__PURE__ */ jsx67("div", { className: classNames2.label, children })
+        ] })
       }
     );
   }
 );
-Radio.Group = RadioGroup;
+_Radio.Group = _RadioGroup;
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef14 } from "react";
-import { useNumberFormatter } from "@react-aria/i18n";
-import { useSlider } from "@react-aria/slider";
-import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
-import { useSliderState } from "@react-stately/slider";
+import { forwardRef as forwardRef15 } from "react";
+import {
+  Slider,
+  SliderOutput,
+  SliderThumb,
+  SliderTrack
+} from "react-aria-components";
 import {
-  cn as cn35,
-  width as twWidth2,
-  useClassNames as useClassNames33,
-  useStateProps as useStateProps19
+  cn as cn37,
+  width as twWidth3,
+  useClassNames as useClassNames36
 } from "@marigold/system";
-
-// src/Slider/Thumb.tsx
-import { useEffect as useEffect2, useRef as useRef20 } from "react";
-import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
-import { useSliderThumb } from "@react-aria/slider";
-import { mergeProps as mergeProps16 } from "@react-aria/utils";
-import { cn as cn34, useStateProps as useStateProps18 } from "@marigold/system";
-
-// src/VisuallyHidden/VisuallyHidden.tsx
-import { VisuallyHidden } from "@react-aria/visually-hidden";
-
-// src/Slider/Thumb.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
-var Thumb = ({ state, trackRef, className, ...props }) => {
-  const { disabled } = props;
-  const inputRef = useRef20(null);
-  const { isFocusVisible, focusProps, isFocused } = useFocusRing11();
-  const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
-  const stateProps = useStateProps18({
-    focus: focused,
-    disabled
-  });
-  const { thumbProps, inputProps } = useSliderThumb(
-    {
-      index: 0,
-      trackRef,
-      inputRef,
-      isDisabled: disabled
-    },
-    state
-  );
-  useEffect2(() => {
-    state.setThumbEditable(0, !disabled);
-  }, [disabled, state]);
-  return /* @__PURE__ */ jsx67("div", { className: cn34("top-1/2", className), ...thumbProps, ...stateProps, children: /* @__PURE__ */ jsx67(VisuallyHidden, { children: /* @__PURE__ */ jsx67(
-    "input",
-    {
-      type: "range",
-      ref: inputRef,
-      ...mergeProps16(inputProps, focusProps)
-    }
-  ) }) });
-};
-
-// src/Slider/Slider.tsx
-import { jsx as jsx68, jsxs as jsxs29 } from "react/jsx-runtime";
-var Slider = forwardRef14(
-  ({ variant, size, width = "full", ...props }, ref) => {
-    const { formatOptions } = props;
-    const trackRef = useObjectRef11(ref);
-    const numberFormatter = useNumberFormatter(formatOptions);
-    const state = useSliderState({ ...props, numberFormatter });
-    const { groupProps, trackProps, labelProps, outputProps } = useSlider(
-      {
-        label: props.children,
-        ...props
-      },
-      state,
-      trackRef
-    );
-    const classNames2 = useClassNames33({
+import { jsx as jsx68, jsxs as jsxs30 } from "react/jsx-runtime";
+var _Slider = forwardRef15(
+  ({
+    thumbLabels,
+    variant,
+    size,
+    width = "full",
+    disabled,
+    ...rest
+  }, ref) => {
+    const classNames2 = useClassNames36({
       component: "Slider",
       variant,
       size
     });
-    const sliderState = useStateProps19({
-      disabled: props.disabled
-    });
-    return /* @__PURE__ */ jsxs29(
-      "div",
+    const props = {
+      isDisabled: disabled,
+      ...rest
+    };
+    return /* @__PURE__ */ jsxs30(
+      Slider,
       {
-        className: cn35("flex touch-none flex-col", twWidth2[width]),
-        ...groupProps,
+        className: cn37(
+          "grid grid-cols-[auto_1fr] gap-y-1",
+          classNames2.container,
+          twWidth3[width]
+        ),
+        ref,
+        ...props,
         children: [
-          /* @__PURE__ */ jsxs29("div", { className: "flex self-stretch", children: [
-            props.children && /* @__PURE__ */ jsx68("label", { className: classNames2.label, ...labelProps, children: props.children }),
-            /* @__PURE__ */ jsx68(
-              "output",
-              {
-                className: cn35(
-                  "flex flex-shrink-0 flex-grow basis-auto",
-                  classNames2.output
-                ),
-                ...outputProps,
-                children: state.getThumbValueLabel(0)
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs29(
-            "div",
+          /* @__PURE__ */ jsx68(_Label, { children: props.children }),
+          /* @__PURE__ */ jsx68(SliderOutput, { className: cn37("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx68(
+            SliderTrack,
             {
-              className: "h-8 w-full cursor-pointer data-[disabled]:cursor-not-allowed",
-              ...trackProps,
-              ...sliderState,
-              ref: trackRef,
-              children: [
-                /* @__PURE__ */ jsx68(
-                  "div",
-                  {
-                    className: cn35(
-                      "absolute top-2/4 h-2 w-full -translate-y-1/2",
-                      classNames2.track
-                    )
-                  }
-                ),
-                /* @__PURE__ */ jsx68(
-                  Thumb,
-                  {
-                    state,
-                    trackRef,
-                    disabled: props.disabled,
-                    className: classNames2.thumb
-                  }
-                )
-              ]
+              className: cn37("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx68(
+                SliderThumb,
+                {
+                  className: cn37("top-1/2 cursor-pointer", classNames2.thumb),
+                  index: i,
+                  "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
+                },
+                i
+              ))
             }
           )
         ]
@@ -3372,7 +3212,7 @@ var Split = (props) => /* @__PURE__ */ jsx69("div", { ...props, role: "separator
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn36,
+  cn as cn38,
   gapSpace as gapSpace6
 } from "@marigold/system";
 import { jsx as jsx70 } from "react/jsx-runtime";
@@ -3389,7 +3229,7 @@ var Stack = ({
   return /* @__PURE__ */ jsx70(
     "div",
     {
-      className: cn36(
+      className: cn38(
         "flex flex-col",
         gapSpace6[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -3403,78 +3243,52 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
-import { useSwitch } from "@react-aria/switch";
-import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
-import { useToggleState as useToggleState2 } from "@react-stately/toggle";
+import { forwardRef as forwardRef16 } from "react";
+import { Switch } from "react-aria-components";
 import {
-  cn as cn37,
-  width as twWidth3,
-  useClassNames as useClassNames34,
-  useStateProps as useStateProps20
+  cn as cn39,
+  width as twWidth4,
+  useClassNames as useClassNames37
 } from "@marigold/system";
-import { Fragment as Fragment6, jsx as jsx71, jsxs as jsxs30 } from "react/jsx-runtime";
-var Switch = forwardRef15(
+import { jsx as jsx71, jsxs as jsxs31 } from "react/jsx-runtime";
+var _Switch = forwardRef16(
   ({
     variant,
     size,
     width = "full",
+    children,
     selected,
     disabled,
     readOnly,
-    defaultChecked,
-    ...rest
+    ...props
   }, ref) => {
-    const inputRef = useObjectRef12(ref);
-    const props = {
-      isSelected: selected,
-      isDisabled: disabled,
-      isReadOnly: readOnly,
-      defaultSelected: defaultChecked,
-      ...rest
-    };
-    const state = useToggleState2(props);
-    const { inputProps } = useSwitch(props, state, inputRef);
-    const { isFocusVisible, focusProps } = useFocusRing12();
-    const stateProps = useStateProps20({
-      selected: state.isSelected,
-      disabled,
-      readOnly,
-      focus: isFocusVisible
-    });
-    const classNames2 = useClassNames34({ component: "Switch", size, variant });
-    return /* @__PURE__ */ jsxs30(
-      "label",
+    const classNames2 = useClassNames37({ component: "Switch", size, variant });
+    return /* @__PURE__ */ jsxs31(
+      Switch,
       {
-        className: cn37(
+        ...props,
+        ref,
+        className: cn39(
+          twWidth4[width],
           "group/switch",
-          twWidth3[width],
-          "relative flex items-center justify-between gap-[1ch]"
+          "flex items-center justify-between gap-[1ch]",
+          classNames2.container
         ),
-        ...stateProps,
+        isDisabled: disabled,
+        isReadOnly: readOnly,
         children: [
-          /* @__PURE__ */ jsx71(
-            "input",
-            {
-              ref: inputRef,
-              className: "absolute left-0 top-0 z-[1] h-full w-full cursor-pointer opacity-[0.0001] disabled:cursor-not-allowed",
-              ...inputProps,
-              ...focusProps
-            }
-          ),
-          props.children && /* @__PURE__ */ jsx71(Fragment6, { children: props.children }),
-          /* @__PURE__ */ jsx71(
+          children,
+          /* @__PURE__ */ jsx71("div", { className: " relative", children: /* @__PURE__ */ jsx71(
             "div",
             {
-              className: cn37(
-                "relative h-6 flex-shrink-0 flex-grow-0 basis-12 rounded-3xl",
+              className: cn39(
+                "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
               children: /* @__PURE__ */ jsx71(
                 "div",
                 {
-                  className: cn37(
+                  className: cn39(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -3485,7 +3299,7 @@ var Switch = forwardRef15(
                 }
               )
             }
-          )
+          ) })
         ]
       }
     );
@@ -3493,7 +3307,7 @@ var Switch = forwardRef15(
 );
 
 // src/Table/Table.tsx
-import { useRef as useRef27 } from "react";
+import { useRef as useRef26 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   TableBody as Body2,
@@ -3503,7 +3317,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn42, useClassNames as useClassNames36 } from "@marigold/system";
+import { cn as cn44, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext8, useContext as useContext8 } from "react";
@@ -3519,14 +3333,14 @@ var TableBody = ({ children }) => {
 };
 
 // src/Table/TableCell.tsx
-import { useRef as useRef21 } from "react";
-import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
+import { useRef as useRef20 } from "react";
+import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
-import { mergeProps as mergeProps17 } from "@react-aria/utils";
-import { useStateProps as useStateProps21 } from "@marigold/system";
+import { mergeProps as mergeProps14 } from "@react-aria/utils";
+import { useStateProps as useStateProps14 } from "@marigold/system";
 import { jsx as jsx73 } from "react/jsx-runtime";
 var TableCell = ({ cell }) => {
-  const ref = useRef21(null);
+  const ref = useRef20(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -3545,14 +3359,14 @@ var TableCell = ({ cell }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = useFocusRing13();
-  const stateProps = useStateProps21({ disabled, focusVisible: isFocusVisible });
+  const { focusProps, isFocusVisible } = useFocusRing8();
+  const stateProps = useStateProps14({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ jsx73(
     "td",
     {
       ref,
       className: classNames2 == null ? void 0 : classNames2.cell,
-      ...mergeProps17(cellProps, focusProps),
+      ...mergeProps14(cellProps, focusProps),
       ...stateProps,
       children: cell.rendered
     }
@@ -3560,11 +3374,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { useRef as useRef22 } from "react";
-import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
+import { useRef as useRef21 } from "react";
+import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
-import { mergeProps as mergeProps18 } from "@react-aria/utils";
-import { cn as cn38, useStateProps as useStateProps22 } from "@marigold/system";
+import { mergeProps as mergeProps15 } from "@react-aria/utils";
+import { cn as cn40, useStateProps as useStateProps15 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3589,7 +3403,7 @@ var mapCheckboxProps = ({
 // src/Table/TableCheckboxCell.tsx
 import { jsx as jsx74 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef22(null);
+  const ref = useRef21(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -3602,36 +3416,36 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     useTableSelectionCheckbox({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = useFocusRing14();
-  const stateProps = useStateProps22({ disabled, focusVisible: isFocusVisible });
+  const { focusProps, isFocusVisible } = useFocusRing9();
+  const stateProps = useStateProps15({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ jsx74(
     "td",
     {
       ref,
-      className: cn38("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
-      ...mergeProps18(gridCellProps, focusProps),
+      className: cn40("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      ...mergeProps15(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx74(Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx74(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-import { useRef as useRef23 } from "react";
-import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
-import { useHover as useHover9 } from "@react-aria/interactions";
+import { useRef as useRef22 } from "react";
+import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
+import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
-import { mergeProps as mergeProps19 } from "@react-aria/utils";
+import { mergeProps as mergeProps16 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn39, useStateProps as useStateProps23 } from "@marigold/system";
-import { width as twWidth4 } from "@marigold/system";
-import { jsx as jsx75, jsxs as jsxs31 } from "react/jsx-runtime";
+import { cn as cn41, useStateProps as useStateProps16 } from "@marigold/system";
+import { width as twWidth5 } from "@marigold/system";
+import { jsx as jsx75, jsxs as jsxs32 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto"
 }) => {
   var _a, _b;
-  const ref = useRef23(null);
+  const ref = useRef22(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -3640,19 +3454,19 @@ var TableColumnHeader = ({
     state,
     ref
   );
-  const { hoverProps, isHovered } = useHover9({});
-  const { focusProps, isFocusVisible } = useFocusRing15();
-  const stateProps = useStateProps23({
+  const { hoverProps, isHovered } = useHover6({});
+  const { focusProps, isFocusVisible } = useFocusRing10();
+  const stateProps = useStateProps16({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: cn39("cursor-default", twWidth4[width], classNames2 == null ? void 0 : classNames2.header),
-      ...mergeProps19(columnHeaderProps, hoverProps, focusProps),
+      className: cn41("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      ...mergeProps16(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       children: [
         column.rendered,
@@ -3671,29 +3485,29 @@ var TableHeader = ({ children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-import { useRef as useRef24 } from "react";
+import { useRef as useRef23 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 import { jsx as jsx77 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef24(null);
+  const ref = useRef23(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
   return /* @__PURE__ */ jsx77("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-import { useRef as useRef25 } from "react";
-import { useFocusRing as useFocusRing16 } from "@react-aria/focus";
-import { useHover as useHover10 } from "@react-aria/interactions";
+import { useRef as useRef24 } from "react";
+import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
+import { useHover as useHover7 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
-import { mergeProps as mergeProps20 } from "@react-aria/utils";
-import { cn as cn40, useClassNames as useClassNames35, useStateProps as useStateProps24 } from "@marigold/system";
+import { mergeProps as mergeProps17 } from "@react-aria/utils";
+import { cn as cn42, useClassNames as useClassNames38, useStateProps as useStateProps17 } from "@marigold/system";
 import { jsx as jsx78 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
-  const ref = useRef25(null);
+  const ref = useRef24(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames35({
+  const classNames2 = useClassNames38({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3707,11 +3521,11 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = useFocusRing16({ within: true });
-  const { hoverProps, isHovered } = useHover10({
+  const { focusProps, isFocusVisible } = useFocusRing11({ within: true });
+  const { hoverProps, isHovered } = useHover7({
     isDisabled: disabled || !interactive
   });
-  const stateProps = useStateProps24({
+  const stateProps = useStateProps17({
     disabled,
     selected,
     hover: isHovered,
@@ -3722,13 +3536,13 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: cn40(
+      className: cn42(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
         classNames2 == null ? void 0 : classNames2.row
       ),
-      ...mergeProps20(rowProps, focusProps, hoverProps),
+      ...mergeProps17(rowProps, focusProps, hoverProps),
       ...stateProps,
       children
     }
@@ -3736,25 +3550,25 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import { useRef as useRef26 } from "react";
-import { useFocusRing as useFocusRing17 } from "@react-aria/focus";
-import { useHover as useHover11 } from "@react-aria/interactions";
+import { useRef as useRef25 } from "react";
+import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
+import { useHover as useHover8 } from "@react-aria/interactions";
 import {
   useTableColumnHeader as useTableColumnHeader2,
   useTableSelectAllCheckbox
 } from "@react-aria/table";
-import { mergeProps as mergeProps21 } from "@react-aria/utils";
+import { mergeProps as mergeProps18 } from "@react-aria/utils";
 import {
-  cn as cn41,
-  width as twWidth5,
-  useStateProps as useStateProps25
+  cn as cn43,
+  width as twWidth6,
+  useStateProps as useStateProps18
 } from "@marigold/system";
 import { jsx as jsx79 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto"
 }) => {
-  const ref = useRef26(null);
+  const ref = useRef25(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -3764,9 +3578,9 @@ var TableSelectAllCell = ({
     ref
   );
   const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
-  const { hoverProps, isHovered } = useHover11({});
-  const { focusProps, isFocusVisible } = useFocusRing17();
-  const stateProps = useStateProps25({
+  const { hoverProps, isHovered } = useHover8({});
+  const { focusProps, isFocusVisible } = useFocusRing12();
+  const stateProps = useStateProps18({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -3774,20 +3588,20 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: cn41(
-        twWidth5[width],
+      className: cn43(
+        twWidth6[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
       ),
-      ...mergeProps21(columnHeaderProps, hoverProps, focusProps),
+      ...mergeProps18(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx79(Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx79(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx80, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs33 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
@@ -3796,7 +3610,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = useRef27(null);
+  const tableRef = useRef26(null);
   const state = useTableState({
     ...props,
     selectionMode,
@@ -3804,7 +3618,7 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames36({
+  const classNames2 = useClassNames39({
     component: "Table",
     variant,
     size
@@ -3814,11 +3628,11 @@ var Table = ({
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ jsxs32(
+      children: /* @__PURE__ */ jsxs33(
         "table",
         {
           ref: tableRef,
-          className: cn42(
+          className: cn44(
             "group/table",
             "border-collapse overflow-auto whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3846,7 +3660,7 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ jsxs32(TableBody, { children: [
+            /* @__PURE__ */ jsxs33(TableBody, { children: [
               ...collection.rows.map(
                 (row) => row.type === "item" && /* @__PURE__ */ jsx80(TableRow, { row, children: [...collection.getChildren(row.key)].map(
                   (cell) => {
@@ -3870,19 +3684,19 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn43,
-  createVar as createVar10,
+  cn as cn45,
+  createVar as createVar9,
   cursorStyle,
   fontWeight,
   get as get2,
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames37,
+  useClassNames as useClassNames40,
   useTheme as useTheme5
 } from "@marigold/system";
 import { jsx as jsx81 } from "react/jsx-runtime";
-var Text = ({
+var Text2 = ({
   variant,
   size,
   color,
@@ -3895,7 +3709,7 @@ var Text = ({
   ...props
 }) => {
   const theme = useTheme5();
-  const classNames2 = useClassNames37({
+  const classNames2 = useClassNames40({
     component: "Text",
     variant,
     size
@@ -3904,7 +3718,7 @@ var Text = ({
     "p",
     {
       ...props,
-      className: cn43(
+      className: cn45(
         classNames2,
         "text-[--color] outline-[--outline]",
         fontStyle && textStyle[fontStyle],
@@ -3913,7 +3727,7 @@ var Text = ({
         weight && fontWeight[weight],
         fontSize && textSize[fontSize]
       ),
-      style: createVar10({
+      style: createVar9({
         color: color && theme.colors && get2(
           theme.colors,
           color.replace("-", "."),
@@ -3927,14 +3741,14 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { useFocusRing as useFocusRing18 } from "@react-aria/focus";
-import { useHover as useHover12 } from "@react-aria/interactions";
+import { forwardRef as forwardRef17 } from "react";
+import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
+import { useHover as useHover9 } from "@react-aria/interactions";
 import { useTextField } from "@react-aria/textfield";
-import { useObjectRef as useObjectRef13 } from "@react-aria/utils";
-import { useClassNames as useClassNames38, useStateProps as useStateProps26 } from "@marigold/system";
+import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
+import { useClassNames as useClassNames41, useStateProps as useStateProps19 } from "@marigold/system";
 import { jsx as jsx82 } from "react/jsx-runtime";
-var TextArea = forwardRef16(
+var TextArea = forwardRef17(
   ({
     variant,
     size,
@@ -3947,7 +3761,7 @@ var TextArea = forwardRef16(
     ...props
   }, ref) => {
     const { label, description, errorMessage } = props;
-    const textAreaRef = useObjectRef13(ref);
+    const textAreaRef = useObjectRef7(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
       {
         inputElementType: "textarea",
@@ -3959,9 +3773,9 @@ var TextArea = forwardRef16(
       },
       textAreaRef
     );
-    const { hoverProps, isHovered } = useHover12({});
-    const { focusProps, isFocusVisible } = useFocusRing18();
-    const stateProps = useStateProps26({
+    const { hoverProps, isHovered } = useHover9({});
+    const { focusProps, isFocusVisible } = useFocusRing13();
+    const stateProps = useStateProps19({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
@@ -3969,7 +3783,7 @@ var TextArea = forwardRef16(
       required,
       error
     });
-    const classNames2 = useClassNames38({ component: "TextArea", variant, size });
+    const classNames2 = useClassNames41({ component: "TextArea", variant, size });
     return /* @__PURE__ */ jsx82(
       FieldBase,
       {
@@ -4001,17 +3815,17 @@ var TextArea = forwardRef16(
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { useFocusRing as useFocusRing19 } from "@react-aria/focus";
-import { useHover as useHover13 } from "@react-aria/interactions";
+import { forwardRef as forwardRef18 } from "react";
+import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
+import { useHover as useHover10 } from "@react-aria/interactions";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
-import { mergeProps as mergeProps22, useObjectRef as useObjectRef14 } from "@react-aria/utils";
-import { useStateProps as useStateProps27 } from "@marigold/system";
+import { mergeProps as mergeProps19, useObjectRef as useObjectRef8 } from "@react-aria/utils";
+import { useStateProps as useStateProps20 } from "@marigold/system";
 import { jsx as jsx83 } from "react/jsx-runtime";
-var TextField = forwardRef17(
+var TextField = forwardRef18(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = useObjectRef14(ref);
+    const inputRef = useObjectRef8(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField2(
       {
         isDisabled: disabled,
@@ -4022,12 +3836,12 @@ var TextField = forwardRef17(
       },
       inputRef
     );
-    const { hoverProps, isHovered } = useHover13({});
-    const { focusProps, isFocused } = useFocusRing19({
+    const { hoverProps, isHovered } = useHover10({});
+    const { focusProps, isFocused } = useFocusRing14({
       isTextInput: true,
       autoFocus
     });
-    const stateProps = useStateProps27({
+    const stateProps = useStateProps20({
       hover: isHovered,
       focus: isFocused,
       disabled,
@@ -4055,7 +3869,7 @@ var TextField = forwardRef17(
             ref: inputRef,
             variant,
             size,
-            ...mergeProps22(focusProps, inputProps, hoverProps)
+            ...mergeProps19(focusProps, inputProps, hoverProps)
           }
         )
       }
@@ -4064,7 +3878,7 @@ var TextField = forwardRef17(
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn44, createVar as createVar11, gapSpace as gapSpace7 } from "@marigold/system";
+import { cn as cn46, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
 import { jsx as jsx84 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
@@ -4082,13 +3896,13 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: cn44(
+      className: cn46(
         "grid",
         gapSpace7[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: createVar11({ column, tilesWidth }),
+      style: createVar10({ column, tilesWidth }),
       children
     }
   );
@@ -4096,7 +3910,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { useTooltip } from "@react-aria/tooltip";
-import { cn as cn45, useClassNames as useClassNames39 } from "@marigold/system";
+import { cn as cn47, useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/Tooltip/Context.ts
 import { createContext as createContext9, useContext as useContext9 } from "react";
@@ -4104,12 +3918,12 @@ var TooltipContext = createContext9({});
 var useTooltipContext = () => useContext9(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import { Children as Children7, useRef as useRef28 } from "react";
+import { Children as Children7, useRef as useRef27 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
 import { useTooltipTriggerState } from "@react-stately/tooltip";
-import { jsx as jsx85, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
 var TooltipTrigger = ({
   disabled,
   open,
@@ -4126,8 +3940,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = useRef28(null);
-  const overlayRef = useRef28(null);
+  const tooltipTriggerRef = useRef27(null);
+  const overlayRef = useRef27(null);
   const state = useTooltipTriggerState(props);
   const { triggerProps, tooltipProps } = useTooltipTrigger(
     props,
@@ -4146,7 +3960,7 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ jsxs33(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps, children: [
+  return /* @__PURE__ */ jsxs34(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps, children: [
     tooltipTrigger,
     /* @__PURE__ */ jsx85(
       TooltipContext.Provider,
@@ -4166,18 +3980,18 @@ var TooltipTrigger = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx86, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs35 } from "react/jsx-runtime";
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = useTooltip({}, state);
-  const classNames2 = useClassNames39({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ jsxs34(
+  const classNames2 = useClassNames42({ component: "Tooltip", variant, size });
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       ...tooltipProps,
       ...rest,
       ref: overlayRef,
-      className: cn45("group/tooltip", classNames2.container),
+      className: cn47("group/tooltip", classNames2.container),
       "data-placement": placement,
       children: [
         /* @__PURE__ */ jsx86("div", { children }),
@@ -4185,7 +3999,7 @@ var Tooltip = ({ children, variant, size }) => {
           "div",
           {
             ...arrowProps,
-            className: cn45("absolute h-0 w-0", classNames2.arrow)
+            className: cn47("absolute h-0 w-0", classNames2.arrow)
           }
         )
       ]
@@ -4198,22 +4012,22 @@ Tooltip.Trigger = TooltipTrigger;
 import { Item as Item6 } from "@react-stately/collections";
 
 // src/TagGroup/TagGroup.tsx
-import { useRef as useRef30 } from "react";
+import { useRef as useRef29 } from "react";
 import { useTagGroup } from "@react-aria/tag";
 import { useListState } from "@react-stately/list";
-import { useStateProps as useStateProps28 } from "@marigold/system";
+import { useStateProps as useStateProps21 } from "@marigold/system";
 
 // src/TagGroup/Tag.tsx
-import React2, { useRef as useRef29 } from "react";
-import { useButton as useButton8 } from "@react-aria/button";
-import { useFocusRing as useFocusRing20 } from "@react-aria/focus";
+import React3, { useRef as useRef28 } from "react";
+import { useButton as useButton6 } from "@react-aria/button";
+import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useTag } from "@react-aria/tag";
-import { mergeProps as mergeProps23 } from "@react-aria/utils";
-import { cn as cn46, useClassNames as useClassNames40 } from "@marigold/system";
-import { jsx as jsx87, jsxs as jsxs35 } from "react/jsx-runtime";
+import { mergeProps as mergeProps20 } from "@react-aria/utils";
+import { cn as cn48, useClassNames as useClassNames43 } from "@marigold/system";
+import { jsx as jsx87, jsxs as jsxs36 } from "react/jsx-runtime";
 var CloseButton2 = ({ className, ...props }) => {
-  const ref = useRef29(null);
-  const { buttonProps } = useButton8({ ...props }, ref);
+  const ref = useRef28(null);
+  const { buttonProps } = useButton6({ ...props }, ref);
   return /* @__PURE__ */ jsx87("button", { className, ...buttonProps, children: /* @__PURE__ */ jsx87("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx87("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var Tag = ({ variant, size, item, state, ...rest }) => {
@@ -4221,8 +4035,8 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     item,
     ...rest
   };
-  let ref = React2.useRef(null);
-  let { focusProps } = useFocusRing20({ within: true });
+  let ref = React3.useRef(null);
+  let { focusProps } = useFocusRing15({ within: true });
   const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = useTag(
     {
       ...props,
@@ -4231,20 +4045,20 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     state,
     ref
   );
-  const classNames2 = useClassNames40({ component: "Tag", variant, size });
+  const classNames2 = useClassNames43({ component: "Tag", variant, size });
   return /* @__PURE__ */ jsx87(
     "span",
     {
       ref,
-      ...mergeProps23(rowProps, focusProps),
+      ...mergeProps20(rowProps, focusProps),
       className: classNames2.tag,
-      children: /* @__PURE__ */ jsxs35("div", { ...gridCellProps, className: classNames2.gridCell, children: [
+      children: /* @__PURE__ */ jsxs36("div", { ...gridCellProps, className: classNames2.gridCell, children: [
         /* @__PURE__ */ jsx87("span", { children: item.rendered }),
         allowsRemoving && /* @__PURE__ */ jsx87(
           CloseButton2,
           {
             ...removeButtonProps,
-            className: cn46("flex items-center", classNames2.closeButton)
+            className: cn48("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -4267,10 +4081,10 @@ var TagGroup = ({
     validationState: error ? "invalid" : "valid",
     ...rest
   };
-  const inputRef = useRef30(null);
+  const inputRef = useRef29(null);
   const state = useListState(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = useTagGroup(props, state, inputRef);
-  const stateProps = useStateProps28({
+  const stateProps = useStateProps21({
     error,
     required
   });
@@ -4315,11 +4129,14 @@ var TagGroup = ({
 var Tag2 = Item6;
 Tag2.Group = TagGroup;
 
+// src/VisuallyHidden/VisuallyHidden.tsx
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+
 // src/XLoader/XLoader.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { SVG as SVG6 } from "@marigold/system";
-import { jsx as jsx89, jsxs as jsxs36 } from "react/jsx-runtime";
-var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs36(
+import { jsx as jsx89, jsxs as jsxs37 } from "react/jsx-runtime";
+var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
   SVG6,
   {
     id: "XLoader",
@@ -4533,11 +4350,11 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs36(
 ));
 
 // src/Tabs/Tabs.tsx
-import { useRef as useRef33 } from "react";
+import { useRef as useRef32 } from "react";
 import { useTabList } from "@react-aria/tabs";
 import { Item as Item7 } from "@react-stately/collections";
 import { useTabListState } from "@react-stately/tabs";
-import { cn as cn49, gapSpace as gapSpace8, useClassNames as useClassNames41 } from "@marigold/system";
+import { cn as cn51, gapSpace as gapSpace8, useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/Tabs/Context.ts
 import { createContext as createContext10, useContext as useContext10 } from "react";
@@ -4545,31 +4362,31 @@ var TabContext = createContext10({});
 var useTabContext = () => useContext10(TabContext);
 
 // src/Tabs/Tab.tsx
-import { useRef as useRef31 } from "react";
-import { useFocus, useHover as useHover14 } from "@react-aria/interactions";
+import { useRef as useRef30 } from "react";
+import { useFocus, useHover as useHover11 } from "@react-aria/interactions";
 import { useTab } from "@react-aria/tabs";
-import { mergeProps as mergeProps24 } from "@react-aria/utils";
-import { cn as cn47, useStateProps as useStateProps29 } from "@marigold/system";
+import { mergeProps as mergeProps21 } from "@react-aria/utils";
+import { cn as cn49, useStateProps as useStateProps22 } from "@marigold/system";
 import { jsx as jsx90 } from "react/jsx-runtime";
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
-  const ref = useRef31(null);
+  const ref = useRef30(null);
   const { tabProps, isSelected } = useTab({ key }, state, ref);
   const disabled = tabProps["aria-disabled"];
-  const { hoverProps, isHovered } = useHover14({
+  const { hoverProps, isHovered } = useHover11({
     isDisabled: disabled || isSelected
   });
   const { focusProps } = useFocus({});
-  const stateProps = useStateProps29({ active: isSelected, hover: isHovered });
+  const stateProps = useStateProps22({ active: isSelected, hover: isHovered });
   const { classNames: classNames2 } = useTabContext();
   return /* @__PURE__ */ jsx90(
     "div",
     {
-      className: cn47(
+      className: cn49(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
-      ...mergeProps24(tabProps, stateProps, focusProps, hoverProps),
+      ...mergeProps21(tabProps, stateProps, focusProps, hoverProps),
       ref,
       children: rendered
     }
@@ -4577,21 +4394,21 @@ var Tab = ({ item, state }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-import { useRef as useRef32 } from "react";
+import { useRef as useRef31 } from "react";
 import { useTabPanel } from "@react-aria/tabs";
-import { cn as cn48 } from "@marigold/system";
+import { cn as cn50 } from "@marigold/system";
 import { jsx as jsx91 } from "react/jsx-runtime";
 var TabPanel = ({ state, ...props }) => {
   var _a;
-  const ref = useRef32(null);
+  const ref = useRef31(null);
   const { tabPanelProps } = useTabPanel(props, state, ref);
   const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx91("div", { className: cn48(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
+  return /* @__PURE__ */ jsx91("div", { className: cn50(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx92, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs38 } from "react/jsx-runtime";
 var Tabs = ({
   space = 2,
   size = "medium",
@@ -4600,23 +4417,23 @@ var Tabs = ({
   ...rest
 }) => {
   var _a;
-  const ref = useRef33(null);
+  const ref = useRef32(null);
   const props = {
     isDisabled: disabled,
     ...rest
   };
   const state = useTabListState(props);
   const { tabListProps } = useTabList(props, state, ref);
-  const classNames2 = useClassNames41({
+  const classNames2 = useClassNames44({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ jsx92(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs37("div", { className: cn49(classNames2.container), children: [
+  return /* @__PURE__ */ jsx92(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs38("div", { className: cn51(classNames2.container), children: [
     /* @__PURE__ */ jsx92(
       "div",
       {
-        className: cn49("flex", gapSpace8[space], classNames2.tabs),
+        className: cn51("flex", gapSpace8[space], classNames2.tabs),
         ...tabListProps,
         ref,
         children: [...state.collection].map((item) => {
@@ -4638,13 +4455,13 @@ export {
   Badge,
   Body,
   Breakout,
-  Button,
+  _Button as Button,
   Calendar,
   CalendarCell,
   CalendarGrid,
   Card,
   Center,
-  Checkbox,
+  _Checkbox as Checkbox,
   CheckboxGroup,
   CheckboxGroupContext,
   Columns,
@@ -4653,19 +4470,19 @@ export {
   DateField,
   DatePicker,
   Dialog,
-  Divider,
+  _Divider as Divider,
   FieldBase,
   FieldGroup,
   FieldGroupContext,
   Footer,
   Header,
-  Headline,
+  _Headline as Headline,
   Image,
   Inline,
   Input,
   Inset,
-  Label,
-  Link,
+  _Label as Label,
+  _Link as Link,
   List,
   MarigoldProvider,
   Menu,
@@ -4674,17 +4491,17 @@ export {
   NumberField,
   Overlay,
   Popover,
-  Radio,
-  RadioGroup,
+  _Radio as Radio,
+  _RadioGroup as RadioGroup,
   Select,
-  Slider,
+  _Slider as Slider,
   Split,
   Stack,
-  Switch,
+  _Switch as Switch,
   Table,
   Tabs,
   Tag2 as Tag,
-  Text,
+  Text2 as Text,
   TextArea,
   TextField,
   ThemeProvider2 as ThemeProvider,
@@ -4695,6 +4512,7 @@ export {
   Underlay,
   VisuallyHidden,
   XLoader,
+  _Slider,
   useAsyncList,
   useCheckboxGroupContext,
   useFieldGroupContext,