@marigold/components 6.0.1 → 6.2.0

package/dist/index.mjs

@@ -2,20 +2,116 @@
 import { useAsyncList, useListData } from "@react-stately/data";
 
 // src/Accordion/Accordion.tsx
-import React5, { Children, useRef as useRef2 } from "react";
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useRef as useRef2
+} from "react";
 import { useAccordion } from "@react-aria/accordion";
 import { Item } from "@react-stately/collections";
+import { useTreeState } from "@react-stately/tree";
 
 // src/Accordion/AccordionItem.tsx
-import React4, { useRef } from "react";
+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/Accordion/useAccordionItem.ts
-import { mergeProps, useId } from "@react-aria/utils";
+// 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 { cn, useClassNames, useStateProps } from "@marigold/system";
+var Button = forwardRef(
+  ({
+    as = "button",
+    children,
+    variant,
+    size,
+    disabled,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    fullWidth,
+    excludeFromTabOrder,
+    className,
+    ...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__ */ React.createElement(
+      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 { SVG } from "@marigold/system";
+var ChevronUp = forwardRef2(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(SVG, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React.createElement("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 { SVG as SVG2 } from "@marigold/system";
+var ChevronDown = forwardRef3(
+  ({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(SVG2, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React.createElement("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 { useSelectableItem } from "@react-aria/selection";
+import { mergeProps as mergeProps2, useId } from "@react-aria/utils";
 import { isAppleDevice } from "@react-aria/utils";
 import { isMac } from "@react-aria/utils";
 function isNonContiguousSelectionModifier(e) {
@@ -83,11 +179,12 @@ function useAccordionItem(props, state, ref) {
       }
     }
   };
-  let { buttonProps } = useButton(
-    mergeProps(itemProps, {
+  let { buttonProps } = useButton2(
+    mergeProps2(itemProps, {
       id: buttonId,
       elementType: "button",
       isDisabled,
+      // if remove than everything click
       onPress: onSelect
     }),
     ref
@@ -107,98 +204,6 @@ function useAccordionItem(props, state, ref) {
   };
 }
 
-// src/Button/Button.tsx
-import React, { forwardRef } from "react";
-import { useButton as useButton2 } from "@react-aria/button";
-import { useFocusRing } from "@react-aria/focus";
-import { useHover } from "@react-aria/interactions";
-import { mergeProps as mergeProps2, useObjectRef } from "@react-aria/utils";
-import { cn, useClassNames, useStateProps } from "@marigold/system";
-var Button = forwardRef(
-  ({
-    as = "button",
-    children,
-    variant,
-    size,
-    disabled,
-    onClick,
-    onPress,
-    onPressStart,
-    onPressEnd,
-    onPressChange,
-    onPressUp,
-    fullWidth,
-    excludeFromTabOrder,
-    className,
-    ...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 } = useButton2(
-      {
-        /**
-         * `react-aria` only expected `Element` but we casted
-         * it to a `HTMLButtonElement` internally.
-         */
-        ...props,
-        onClick,
-        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__ */ React.createElement(
-      Component,
-      {
-        ...mergeProps2(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 React2, { forwardRef as forwardRef2 } from "react";
-import { SVG } from "@marigold/system";
-var ChevronUp = forwardRef2(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(SVG, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React2.createElement("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 React3, { forwardRef as forwardRef3 } from "react";
-import { SVG as SVG2 } from "@marigold/system";
-var ChevronDown = forwardRef3(
-  ({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(SVG2, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React3.createElement("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }))
-);
-
 // src/Accordion/AccordionItem.tsx
 var AccordionItem = ({
   item,
@@ -213,7 +218,7 @@ var AccordionItem = ({
     item.key.toString().replace(".$", "")
   );
   const expanded = state.selectionManager.isSelected(item.key);
-  React4.useEffect(() => {
+  useEffect(() => {
     if (defaultExpanded) {
       if (state.selectionManager.selectionMode === "multiple") {
         state.expandedKeys.forEach((key) => {
@@ -225,14 +230,20 @@ var AccordionItem = ({
       }
     }
   }, [defaultExpanded, item.key, state.expandedKeys, state.selectionManager]);
-  const { buttonProps, regionProps } = useAccordionItem({ item }, state, ref);
+  const { buttonProps, regionProps } = useAccordionItem(
+    {
+      item
+    },
+    state,
+    ref
+  );
   const { isFocusVisible, focusProps } = useFocusRing2();
   const stateProps = useStateProps2({
     focus: isFocusVisible,
     expanded: defaultExpanded || expanded
   });
   const classNames2 = useClassNames2({ component: "Accordion", variant, size });
-  return /* @__PURE__ */ React4.createElement("div", { className: "flex flex-col", ...props }, /* @__PURE__ */ React4.createElement(FocusRing, { within: true }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col", ...props }, /* @__PURE__ */ React.createElement(FocusRing, { within: true }, /* @__PURE__ */ React.createElement(
     Button,
     {
       className: classNames2.button,
@@ -241,8 +252,8 @@ var AccordionItem = ({
       "aria-label": item.textValue
     },
     title,
-    !expanded ? /* @__PURE__ */ React4.createElement(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ React4.createElement(ChevronDown, { className: "h3 w-6" })
-  )), expanded || defaultExpanded ? /* @__PURE__ */ React4.createElement(
+    !expanded ? /* @__PURE__ */ React.createElement(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ React.createElement(ChevronDown, { className: "h3 w-6" })
+  )), expanded || defaultExpanded ? /* @__PURE__ */ React.createElement(
     "div",
     {
       ...mergeProps3(regionProps, focusProps, stateProps),
@@ -253,16 +264,15 @@ var AccordionItem = ({
 };
 
 // src/Accordion/Accordion.tsx
-import { useTreeState } from "@react-stately/tree";
 var Accordion = ({ children, ...props }) => {
   const ownProps = {
     ...props,
     // we have to do this because JSX childs are not supported
     children: Children.toArray(children).map((child) => {
-      if (!React5.isValidElement(child)) {
+      if (!isValidElement(child)) {
         return child;
       }
-      return React5.cloneElement(child, {
+      return cloneElement(child, {
         hasChildItems: false,
         ...child.props
       });
@@ -278,7 +288,7 @@ var Accordion = ({ children, ...props }) => {
     state,
     ref
   );
-  return /* @__PURE__ */ React5.createElement("div", { ...accordionProps, ref }, [...state.collection].map((item) => /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React.createElement("div", { ...accordionProps, ref }, [...state.collection].map((item) => /* @__PURE__ */ React.createElement(
     AccordionItem,
     {
       key: item.key,
@@ -293,7 +303,7 @@ var Accordion = ({ children, ...props }) => {
 Accordion.Item = Item;
 
 // src/Aside/Aside.tsx
-import React6 from "react";
+import { Children as Children2 } from "react";
 import { cn as cn2, createVar, gapSpace } from "@marigold/system";
 var classNames = {
   aside: "grow basis-[--sideWidth]",
@@ -307,12 +317,12 @@ var Aside = ({
   stretch = true,
   wrap = "50%"
 }) => {
-  const [left, right] = React6.Children.toArray(children);
+  const [left, right] = Children2.toArray(children);
   const vars = {
     aside: createVar({ sideWidth }),
     content: createVar({ wrap })
   };
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn2(
@@ -321,7 +331,7 @@ var Aside = ({
         !stretch && "items-start"
       )
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         className: classNames[side === "left" ? "aside" : "content"],
@@ -329,7 +339,7 @@ var Aside = ({
       },
       left
     ),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         className: classNames[side === "right" ? "aside" : "content"],
@@ -341,13 +351,12 @@ var Aside = ({
 };
 
 // src/Aspect/Aspect.tsx
-import React7 from "react";
-import { cn as cn3, createVar as createVar2, aspect } from "@marigold/system";
+import { aspect, cn as cn3, createVar as createVar2 } from "@marigold/system";
 var Aspect = ({
   ratio = "square",
   maxWidth,
   children
-}) => /* @__PURE__ */ React7.createElement(
+}) => /* @__PURE__ */ React.createElement(
   "div",
   {
     className: cn3("overflow-hidden", aspect[ratio], "max-w-[var(--maxWidth)]"),
@@ -357,57 +366,21 @@ var Aspect = ({
 );
 
 // src/Autocomplete/Autocomplete.tsx
-import React22, { useRef as useRef7 } from "react";
+import { useRef as useRef7 } from "react";
 import { useSearchAutocomplete } from "@react-aria/autocomplete";
 import { useFilter } from "@react-aria/i18n";
-import { useComboBoxState } from "@react-stately/combobox";
 import { Item as Item2 } from "@react-stately/collections";
+import { useComboBoxState } from "@react-stately/combobox";
 
 // src/FieldBase/FieldBase.tsx
-import React11 from "react";
 import {
   cn as cn6,
-  useClassNames as useClassNames5,
-  width as twWidth
+  width as twWidth,
+  useClassNames as useClassNames5
 } from "@marigold/system";
 
-// src/Label/Label.tsx
-import React8 from "react";
-import { SVG as SVG3, cn as cn4, createVar as createVar3, useClassNames as useClassNames3 } from "@marigold/system";
-var Label = ({
-  as = "label",
-  children,
-  variant,
-  size,
-  labelWidth,
-  ...props
-}) => {
-  const Component = as;
-  const classNames2 = useClassNames3({ component: "Label", size, variant });
-  return /* @__PURE__ */ React8.createElement(
-    Component,
-    {
-      ...props,
-      className: cn4(classNames2.container, "flex w-[var(--labelWidth)]"),
-      style: createVar3({ labelWidth })
-    },
-    children,
-    /* @__PURE__ */ React8.createElement(
-      SVG3,
-      {
-        viewBox: "0 0 24 24",
-        role: "presentation",
-        size: 16,
-        className: cn4("hidden", classNames2.indicator)
-      },
-      /* @__PURE__ */ React8.createElement("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
-    )
-  );
-};
-
 // src/HelpText/HelpText.tsx
-import React9 from "react";
-import { SVG as SVG4, cn as cn5, useClassNames as useClassNames4 } from "@marigold/system";
+import { SVG as SVG3, cn as cn4, useClassNames as useClassNames3 } from "@marigold/system";
 var HelpText = ({
   variant,
   size,
@@ -421,38 +394,70 @@ var HelpText = ({
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
-  const classNames2 = useClassNames4({
+  const classNames2 = useClassNames3({
     component: "HelpText",
     variant,
     size,
     className
   });
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...props,
       ...hasErrorMessage ? errorMessageProps : descriptionProps,
-      className: cn5("flex items-center gap-1", classNames2.container)
+      className: cn4("flex items-center gap-1", classNames2.container)
     },
-    hasErrorMessage ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
-      SVG4,
+    hasErrorMessage ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      SVG3,
       {
-        className: cn5("h-4 w-4", classNames2.icon),
+        className: cn4("h-4 w-4", classNames2.icon),
         viewBox: "0 0 24 24",
         role: "presentation"
       },
-      /* @__PURE__ */ React9.createElement("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__ */ React9.createElement(React9.Fragment, null, description)
+      /* @__PURE__ */ React.createElement("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__ */ React.createElement(React.Fragment, null, description)
+  );
+};
+
+// src/Label/Label.tsx
+import { SVG as SVG4, cn as cn5, createVar as createVar3, useClassNames as useClassNames4 } from "@marigold/system";
+var Label = ({
+  as = "label",
+  children,
+  variant,
+  size,
+  labelWidth,
+  ...props
+}) => {
+  const Component = as;
+  const classNames2 = useClassNames4({ component: "Label", size, variant });
+  return /* @__PURE__ */ React.createElement(
+    Component,
+    {
+      ...props,
+      className: cn5(classNames2.container, "flex w-[var(--labelWidth)]"),
+      style: createVar3({ labelWidth })
+    },
+    children,
+    /* @__PURE__ */ React.createElement(
+      SVG4,
+      {
+        viewBox: "0 0 24 24",
+        role: "presentation",
+        size: 16,
+        className: cn5("hidden", classNames2.indicator)
+      },
+      /* @__PURE__ */ React.createElement("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
+    )
   );
 };
 
 // src/FieldBase/FieldGroup.tsx
-import React10 from "react";
 import { createContext, useContext } from "react";
 var FieldGroupContext = createContext({});
 var useFieldGroupContext = () => useContext(FieldGroupContext);
 var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ React10.createElement(FieldGroupContext.Provider, { value: { labelWidth } }, children);
+  return /* @__PURE__ */ React.createElement(FieldGroupContext.Provider, { value: { labelWidth } }, children);
 };
 
 // src/FieldBase/FieldBase.tsx
@@ -479,14 +484,14 @@ var FieldBase = ({
     variant,
     size
   });
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...props,
       ...stateProps,
       className: cn6("group/field", twWidth[width], classNames2)
     },
-    label && /* @__PURE__ */ React11.createElement(
+    label && /* @__PURE__ */ React.createElement(
       Label,
       {
         variant,
@@ -497,7 +502,7 @@ var FieldBase = ({
       label
     ),
     children,
-    hasHelpText && /* @__PURE__ */ React11.createElement(
+    hasHelpText && /* @__PURE__ */ React.createElement(
       HelpText,
       {
         variant,
@@ -514,7 +519,10 @@ var FieldBase = ({
 };
 
 // src/Input/Input.tsx
-import React12, { cloneElement, forwardRef as forwardRef4 } from "react";
+import {
+  cloneElement as cloneElement2,
+  forwardRef as forwardRef4
+} from "react";
 import { cn as cn7, useClassNames as useClassNames6 } from "@marigold/system";
 var Input = forwardRef4(
   ({
@@ -532,7 +540,7 @@ var Input = forwardRef4(
       size,
       className
     });
-    const inputIcon = icon ? cloneElement(icon, {
+    const inputIcon = icon ? cloneElement2(icon, {
       className: cn7(
         "pointer-events-none absolute",
         classNames2.icon,
@@ -540,7 +548,7 @@ var Input = forwardRef4(
       ),
       ...icon.props
     }) : null;
-    const inputAction = action && !props.readOnly ? cloneElement(action, {
+    const inputAction = action && !props.readOnly ? cloneElement2(action, {
       className: cn7(
         "absolute",
         classNames2.action,
@@ -548,7 +556,7 @@ var Input = forwardRef4(
       ),
       ...action.props
     }) : null;
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "group/input relative flex items-center",
@@ -556,7 +564,7 @@ var Input = forwardRef4(
         "data-action": action && ""
       },
       inputIcon,
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React.createElement(
         "input",
         {
           ...props,
@@ -578,22 +586,18 @@ var Input = forwardRef4(
 );
 
 // src/ListBox/ListBox.tsx
-import React15, { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef5 } 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 { useListBox } from "@react-aria/listbox";
 
 // src/ListBox/Context.ts
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var ListBoxContext = createContext2({});
 var useListBoxContext = () => useContext2(ListBoxContext);
 
-// src/ListBox/ListBoxSection.tsx
-import React14 from "react";
-import { useListBoxSection } from "@react-aria/listbox";
-
 // src/ListBox/ListBoxOption.tsx
-import React13, { useRef as useRef3 } from "react";
+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";
@@ -613,7 +617,7 @@ var ListBoxOption = ({ item, state }) => {
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React.createElement(
     "li",
     {
       ref,
@@ -625,13 +629,14 @@ var ListBoxOption = ({ item, state }) => {
 };
 
 // src/ListBox/ListBoxSection.tsx
+import { useListBoxSection } from "@react-aria/listbox";
 var ListBoxSection = ({ section, state }) => {
   const { classNames: classNames2 } = useListBoxContext();
   const { itemProps, headingProps, groupProps } = useListBoxSection({
     heading: section.rendered,
     "aria-label": section["aria-label"]
   });
-  return /* @__PURE__ */ React14.createElement("li", { className: classNames2.section, ...itemProps }, section.rendered && /* @__PURE__ */ React14.createElement("div", { className: classNames2.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ React14.createElement("ul", { className: classNames2.list, ...groupProps }, [...section.props.children].map((node) => /* @__PURE__ */ React14.createElement(ListBoxOption, { key: node.key, item: node, state }))));
+  return /* @__PURE__ */ React.createElement("li", { className: classNames2.section, ...itemProps }, section.rendered && /* @__PURE__ */ React.createElement("div", { className: classNames2.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ React.createElement("ul", { className: classNames2.list, ...groupProps }, [...section.props.children].map((node) => /* @__PURE__ */ React.createElement(ListBoxOption, { key: node.key, item: node, state }))));
 };
 
 // src/ListBox/ListBox.tsx
@@ -640,7 +645,7 @@ var ListBox = forwardRef5(
     const innerRef = useObjectRef2(ref);
     const { listBoxProps } = useListBox(props, state, innerRef);
     const classNames2 = useClassNames7({ component: "ListBox", variant, size });
-    return /* @__PURE__ */ React15.createElement(ListBoxContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React15.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React.createElement(ListBoxContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React.createElement(
       "ul",
       {
         className: cn8(
@@ -651,24 +656,23 @@ var ListBox = forwardRef5(
         ...listBoxProps
       },
       [...state.collection].map(
-        (item) => item.type === "section" ? /* @__PURE__ */ React15.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React15.createElement(ListBoxOption, { key: item.key, item, state })
+        (item) => item.type === "section" ? /* @__PURE__ */ React.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React.createElement(ListBoxOption, { key: item.key, item, state })
       )
     )));
   }
 );
 
 // src/Overlay/Modal.tsx
-import React17, { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef6 } 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";
 
 // src/Overlay/Underlay.tsx
-import React16 from "react";
 import { cn as cn9, useClassNames as useClassNames8 } from "@marigold/system";
 var Underlay = ({ size, variant, ...props }) => {
   const classNames2 = useClassNames8({ component: "Underlay", size, variant });
-  return /* @__PURE__ */ React16.createElement("div", { className: cn9("fixed inset-0 z-40", classNames2), ...props });
+  return /* @__PURE__ */ React.createElement("div", { className: cn9("fixed inset-0 z-40", classNames2), ...props });
 };
 
 // src/Overlay/Modal.tsx
@@ -686,20 +690,20 @@ var Modal = forwardRef6(
     );
     usePreventScroll();
     const { modalProps } = useModal({});
-    return /* @__PURE__ */ React17.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React17.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "pointer-none fixed inset-0 z-50 flex items-center justify-center",
         ref: modalRef,
         ...mergeProps5(props, overlayProps, modalProps)
       },
-      /* @__PURE__ */ React17.createElement("div", { style: { pointerEvents: "auto" } }, children)
+      /* @__PURE__ */ React.createElement("div", { style: { pointerEvents: "auto" } }, children)
     ));
   }
 );
 
 // src/Overlay/Overlay.tsx
-import React18, { useRef as useRef4 } from "react";
+import { useRef as useRef4 } from "react";
 import {
   Overlay as ReactAriaOverlay
 } from "@react-aria/overlays";
@@ -711,7 +715,7 @@ var Overlay = ({ children, container, open }) => {
   if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ React18.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React.createElement(
     "div",
     {
       ref: nodeRef,
@@ -724,19 +728,19 @@ var Overlay = ({ children, container, open }) => {
 };
 
 // src/Overlay/Popover.tsx
-import React19, { forwardRef as forwardRef7, useRef as useRef5 } from "react";
+import { forwardRef as forwardRef7, useRef as useRef5 } from "react";
+import { FocusScope as FocusScope2 } from "@react-aria/focus";
 import {
   DismissButton,
   usePopover
 } from "@react-aria/overlays";
-import { FocusScope as FocusScope2 } from "@react-aria/focus";
 import { useClassNames as useClassNames9 } from "@marigold/system";
 var Popover = forwardRef7(
   (props, ref) => {
     const fallbackRef = useRef5(null);
     const popoverRef = ref || fallbackRef;
     let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ React19.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ React19.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
+    return /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ React.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
   }
 );
 var PopoverWrapper = forwardRef7(
@@ -761,7 +765,7 @@ var PopoverWrapper = forwardRef7(
       component: "Popover",
       variant: placement
     });
-    return /* @__PURE__ */ React19.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React19.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React19.createElement(
+    return /* @__PURE__ */ React.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React.createElement(
       "div",
       {
         ...popoverProps,
@@ -773,26 +777,25 @@ var PopoverWrapper = forwardRef7(
         ref,
         role: "presentation"
       },
-      !isNonModal && /* @__PURE__ */ React19.createElement(DismissButton, { onDismiss: state.close }),
+      !isNonModal && /* @__PURE__ */ React.createElement(DismissButton, { onDismiss: state.close }),
       children,
-      /* @__PURE__ */ React19.createElement(DismissButton, { onDismiss: state.close })
+      /* @__PURE__ */ React.createElement(DismissButton, { onDismiss: state.close })
     ));
   }
 );
 
 // src/Overlay/Tray.tsx
-import React20 from "react";
+import { forwardRef as forwardRef8 } 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 { forwardRef as forwardRef8 } from "react";
 var Tray = forwardRef8(
   ({ state, children, ...props }, ref) => {
     const trayRef = useObjectRef4(ref);
-    return /* @__PURE__ */ React20.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React20.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
+    return /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
   }
 );
 var TrayWrapper = forwardRef8(
@@ -805,7 +808,7 @@ var TrayWrapper = forwardRef8(
       state,
       ref
     );
-    return /* @__PURE__ */ React20.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React20.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React.createElement(
       "div",
       {
         ...modalProps,
@@ -813,18 +816,18 @@ var TrayWrapper = forwardRef8(
         className: "absolute bottom-0 w-full",
         "data-testid": "tray"
       },
-      /* @__PURE__ */ React20.createElement(DismissButton2, { onDismiss: state.close }),
+      /* @__PURE__ */ React.createElement(DismissButton2, { onDismiss: state.close }),
       children,
-      /* @__PURE__ */ React20.createElement(DismissButton2, { onDismiss: state.close })
+      /* @__PURE__ */ React.createElement(DismissButton2, { onDismiss: state.close })
     )));
   }
 );
 
 // src/Autocomplete/ClearButton.tsx
-import React21, { useRef as useRef6 } from "react";
-import { useHover as useHover2 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
+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";
 var ClearButton = ({
@@ -869,7 +872,7 @@ var ClearButton = ({
     focusVisible: isFocusVisible,
     hover: isHovered
   });
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React.createElement(
     "button",
     {
       ...mergeProps6(buttonProps, focusProps, hoverProps, props),
@@ -880,7 +883,7 @@ var ClearButton = ({
         className
       )
     },
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -889,13 +892,13 @@ var ClearButton = ({
         width: 20,
         height: 20
       },
-      /* @__PURE__ */ React21.createElement("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" })
+      /* @__PURE__ */ React.createElement("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" })
     )
   );
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var SearchIcon = (props) => /* @__PURE__ */ React22.createElement(
+var SearchIcon = (props) => /* @__PURE__ */ React.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -905,7 +908,7 @@ var SearchIcon = (props) => /* @__PURE__ */ React22.createElement(
     height: 24,
     ...props
   },
-  /* @__PURE__ */ React22.createElement("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" })
+  /* @__PURE__ */ React.createElement("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
 );
 var Autocomplete = ({
   disabled,
@@ -959,7 +962,7 @@ var Autocomplete = ({
     state
   );
   const { isDisabled, ...restClearButtonProps } = clearButtonProps;
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     FieldBase,
     {
       label: props.label,
@@ -970,13 +973,13 @@ var Autocomplete = ({
       disabled,
       width
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React.createElement(
       Input,
       {
         ...inputProps,
         ref: inputRef,
-        icon: /* @__PURE__ */ React22.createElement(SearchIcon, null),
-        action: state.inputValue !== "" ? /* @__PURE__ */ React22.createElement(
+        icon: /* @__PURE__ */ React.createElement(SearchIcon, null),
+        action: state.inputValue !== "" ? /* @__PURE__ */ React.createElement(
           ClearButton,
           {
             preventFocus: true,
@@ -986,7 +989,7 @@ var Autocomplete = ({
         ) : null
       }
     )
-  ), /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React.createElement(
     Popover,
     {
       state,
@@ -995,18 +998,18 @@ var Autocomplete = ({
       scrollRef: listBoxRef,
       isNonModal: true
     },
-    /* @__PURE__ */ React22.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+    /* @__PURE__ */ React.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
   ));
 };
 Autocomplete.Item = Item2;
 
 // src/ComboBox/ComboBox.tsx
-import React23 from "react";
-import { useComboBoxState as useComboBoxState2 } from "@react-stately/combobox";
+import React2 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 { useButton as useButton4 } from "@react-aria/button";
 import { Item as Item3 } from "@react-stately/collections";
+import { useComboBoxState as useComboBoxState2 } from "@react-stately/combobox";
 var ComboBox = ({
   error,
   width,
@@ -1031,10 +1034,10 @@ var ComboBox = ({
   };
   const { contains } = useFilter2({ sensitivity: "base" });
   const state = useComboBoxState2({ ...props, defaultFilter: contains });
-  const buttonRef = React23.useRef(null);
-  const inputRef = React23.useRef(null);
-  const listBoxRef = React23.useRef(null);
-  const popoverRef = React23.useRef(null);
+  const buttonRef = React2.useRef(null);
+  const inputRef = React2.useRef(null);
+  const listBoxRef = React2.useRef(null);
+  const popoverRef = React2.useRef(null);
   const {
     buttonProps: triggerProps,
     inputProps,
@@ -1047,7 +1050,7 @@ var ComboBox = ({
   const errorMessageProps = { "aria-invalid": error };
   const { buttonProps } = useButton4(triggerProps, buttonRef);
   const { label, description, errorMessage } = props;
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
     FieldBase,
     {
       label,
@@ -1058,23 +1061,23 @@ var ComboBox = ({
       errorMessageProps,
       width
     },
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React2.createElement(
       Input,
       {
         ...inputProps,
         ref: inputRef,
-        action: /* @__PURE__ */ React23.createElement(
+        action: /* @__PURE__ */ React2.createElement(
           Button,
           {
             className: "absolute right-2 h-4 w-4 border-none bg-transparent p-0",
             ref: buttonRef,
             ...buttonProps
           },
-          /* @__PURE__ */ React23.createElement(ChevronDown, { className: "h-4 w-4" })
+          /* @__PURE__ */ React2.createElement(ChevronDown, { className: "h-4 w-4" })
         )
       }
     )
-  ), /* @__PURE__ */ React23.createElement(
+  ), /* @__PURE__ */ React2.createElement(
     Popover,
     {
       state,
@@ -1083,22 +1086,20 @@ var ComboBox = ({
       scrollRef: listBoxRef,
       isNonModal: true
     },
-    /* @__PURE__ */ React23.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+    /* @__PURE__ */ React2.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
   ));
 };
 ComboBox.Item = Item3;
 
 // src/Badge/Badge.tsx
-import React24 from "react";
 import { useClassNames as useClassNames10 } from "@marigold/system";
 var Badge = ({ variant, size, children, ...props }) => {
   const classNames2 = useClassNames10({ component: "Badge", variant, size });
-  return /* @__PURE__ */ React24.createElement("div", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ React.createElement("div", { ...props, className: classNames2 }, children);
 };
 
 // src/Breakout/Breakout.tsx
-import React25 from "react";
-import { cn as cn11, createVar as createVar4, alignment } from "@marigold/system";
+import { alignment, cn as cn11, createVar as createVar4 } from "@marigold/system";
 var Breakout = ({
   height,
   children,
@@ -1108,7 +1109,7 @@ var Breakout = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn11(
@@ -1126,15 +1127,13 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-import React26 from "react";
 import { useClassNames as useClassNames11 } from "@marigold/system";
 var Body = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames11({ component: "Body", variant, size });
-  return /* @__PURE__ */ React26.createElement("section", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ React.createElement("section", { ...props, className: classNames2 }, children);
 };
 
 // src/Card/Card.tsx
-import React27 from "react";
 import {
   cn as cn12,
   gapSpace as gapSpace2,
@@ -1162,7 +1161,7 @@ var Card = ({
   ...props
 }) => {
   const classNames2 = useClassNames12({ component: "Card", variant, size });
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...props,
@@ -1184,7 +1183,6 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-import React28 from "react";
 import { cn as cn13, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
 var Center = ({
   maxWidth = "100%",
@@ -1192,7 +1190,7 @@ var Center = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn13(
@@ -1208,16 +1206,27 @@ var Center = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-import React30, { forwardRef as forwardRef9 } from "react";
+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 { useStateProps as useStateProps6 } from "@marigold/system";
+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";
+var CheckboxField = ({ children, labelWidth }) => {
+  const classNames2 = useClassNames13({ component: "Field" });
+  return /* @__PURE__ */ React.createElement("div", { className: classNames2 }, /* @__PURE__ */ React.createElement("div", { className: "w-[--labelWidth]", style: createVar6({ labelWidth }) }), children);
+};
 
 // src/Checkbox/CheckboxGroup.tsx
-import React29, { createContext as createContext3, useContext as useContext3 } from "react";
+import { createContext as createContext3, useContext as useContext3 } from "react";
 import { useCheckboxGroup } from "@react-aria/checkbox";
 import {
   useCheckboxGroupState
@@ -1250,7 +1259,7 @@ var CheckboxGroup = ({
     readOnly,
     error
   });
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React.createElement(
     FieldBase,
     {
       label: props.label,
@@ -1265,13 +1274,12 @@ var CheckboxGroup = ({
       width,
       ...groupProps
     },
-    /* @__PURE__ */ React29.createElement("div", { role: "presentation", className: "flex flex-col items-start" }, /* @__PURE__ */ React29.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children))
+    /* @__PURE__ */ React.createElement("div", { role: "presentation", className: "flex flex-col items-start" }, /* @__PURE__ */ React.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children))
   );
 };
 
 // src/Checkbox/Checkbox.tsx
-import { useClassNames as useClassNames13, cn as cn14 } from "@marigold/system";
-var CheckMark = () => /* @__PURE__ */ React30.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React30.createElement(
+var CheckMark = () => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React.createElement(
   "path",
   {
     fill: "currentColor",
@@ -1279,7 +1287,7 @@ var CheckMark = () => /* @__PURE__ */ React30.createElement("svg", { viewBox: "0
     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__ */ React30.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React30.createElement(
+var IndeterminateMark = () => /* @__PURE__ */ React.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React.createElement(
   "path",
   {
     fill: "currentColor",
@@ -1288,7 +1296,7 @@ var IndeterminateMark = () => /* @__PURE__ */ React30.createElement("svg", { wid
   }
 ));
 var Icon = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       "aria-hidden": "true",
@@ -1301,7 +1309,7 @@ var Icon = ({ className, checked, indeterminate, ...props }) => {
       ),
       ...props
     },
-    indeterminate ? /* @__PURE__ */ React30.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React30.createElement(CheckMark, null) : null
+    indeterminate ? /* @__PURE__ */ React.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React.createElement(CheckMark, null) : null
   );
 };
 var Checkbox = forwardRef9(
@@ -1353,10 +1361,11 @@ var Checkbox = forwardRef9(
       }),
       inputRef
     );
-    const classNames2 = useClassNames13({ component: "Checkbox", variant, size });
+    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,
@@ -1367,7 +1376,7 @@ var Checkbox = forwardRef9(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ React30.createElement(
+    const component = /* @__PURE__ */ React.createElement(
       "label",
       {
         className: cn14(
@@ -1377,7 +1386,7 @@ var Checkbox = forwardRef9(
         ...hoverProps,
         ...stateProps
       },
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React.createElement(
         "input",
         {
           ref: inputRef,
@@ -1386,7 +1395,7 @@ var Checkbox = forwardRef9(
           ...focusProps
         }
       ),
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React.createElement(
         Icon,
         {
           checked: inputProps.checked,
@@ -1394,18 +1403,15 @@ var Checkbox = forwardRef9(
           className: classNames2.checkbox
         }
       ),
-      props.children && /* @__PURE__ */ React30.createElement("div", { className: classNames2.label }, props.children)
+      props.children && /* @__PURE__ */ React.createElement("div", { className: classNames2.label }, props.children)
     );
+    return !groupState && labelWidth ? /* @__PURE__ */ React.createElement(CheckboxField, { labelWidth }, component) : component;
   }
 );
 
 // src/Columns/Columns.tsx
-import React31, {
-  Children as Children2,
-  cloneElement as cloneElement2,
-  isValidElement
-} from "react";
-import { cn as cn15, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
+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";
 var Columns = ({
   space = 0,
   columns,
@@ -1414,14 +1420,14 @@ var Columns = ({
   children,
   ...props
 }) => {
-  if (Children2.count(children) !== columns.length) {
+  if (Children3.count(children) !== columns.length) {
     throw new Error(
-      `Columns: expected ${columns.length} children, got ${Children2.count(
+      `Columns: expected ${columns.length} children, got ${Children3.count(
         children
       )}`
     );
   }
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn15(
@@ -1431,27 +1437,26 @@ var Columns = ({
       ),
       ...props
     },
-    Children2.map(children, (child, idx) => /* @__PURE__ */ React31.createElement(
+    Children3.map(children, (child, idx) => /* @__PURE__ */ React.createElement(
       "div",
       {
         className: cn15(
           "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
         ),
-        style: createVar6({ collapseAt, columnSize: columns[idx] })
+        style: createVar7({ collapseAt, columnSize: columns[idx] })
       },
-      isValidElement(child) ? cloneElement2(child) : child
+      isValidElement2(child) ? cloneElement3(child) : child
     ))
   );
 };
 
 // src/Container/Container.tsx
-import React32 from "react";
 import {
   cn as cn16,
-  createVar as createVar7,
-  placeItems,
+  createVar as createVar8,
   gridColsAlign,
-  gridColumn
+  gridColumn,
+  placeItems
 } from "@marigold/system";
 var content = {
   small: "20ch",
@@ -1472,7 +1477,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn16(
@@ -1481,7 +1486,7 @@ var Container = ({
         gridColsAlign[align],
         gridColumn[align]
       ),
-      style: createVar7({ maxWidth }),
+      style: createVar8({ maxWidth }),
       ...props
     },
     children
@@ -1489,14 +1494,18 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import React37, { useRef as useRef9 } from "react";
+import {
+  Children as Children5,
+  cloneElement as cloneElement4,
+  isValidElement as isValidElement3,
+  useRef as useRef9
+} from "react";
 import { useButton as useButton5 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
-import { cn as cn19, useClassNames as useClassNames16 } from "@marigold/system";
+import { cn as cn19, useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/Header/Header.tsx
-import React33 from "react";
-import { cn as cn17, useClassNames as useClassNames14 } from "@marigold/system";
+import { cn as cn17, useClassNames as useClassNames15 } from "@marigold/system";
 var Header = ({
   children,
   variant,
@@ -1504,24 +1513,23 @@ var Header = ({
   className,
   ...props
 }) => {
-  const classNames2 = useClassNames14({
+  const classNames2 = useClassNames15({
     component: "Header",
     variant,
     size,
     className
   });
-  return /* @__PURE__ */ React33.createElement("header", { ...props, className: cn17(classNames2) }, children);
+  return /* @__PURE__ */ React.createElement("header", { ...props, className: cn17(classNames2) }, children);
 };
 
 // src/Headline/Headline.tsx
-import React34 from "react";
 import {
-  useClassNames as useClassNames15,
   cn as cn18,
-  createVar as createVar8,
+  createVar as createVar9,
+  get,
   textAlign,
-  useTheme as useTheme2,
-  get
+  useClassNames as useClassNames16,
+  useTheme as useTheme2
 } from "@marigold/system";
 var Headline = ({
   children,
@@ -1534,18 +1542,18 @@ var Headline = ({
   ...props
 }) => {
   const theme = useTheme2();
-  const classNames2 = useClassNames15({
+  const classNames2 = useClassNames16({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
   });
   const Component = as;
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React.createElement(
     Component,
     {
       ...props,
       className: cn18(classNames2, "text-[--color]", textAlign[align]),
-      style: createVar8({
+      style: createVar9({
         color: color && theme.colors && get(
           theme.colors,
           color.replace("-", "."),
@@ -1563,28 +1571,22 @@ import { createContext as createContext4, useContext as useContext4 } from "reac
 var DialogContext = createContext4({});
 var useDialogContext = () => useContext4(DialogContext);
 
-// src/Dialog/DialogTrigger.tsx
-import React35, { useRef as useRef8 } from "react";
-import { PressResponder } from "@react-aria/interactions";
+// src/Dialog/DialogController.tsx
+import React3 from "react";
 import { useOverlayTriggerState } from "@react-stately/overlays";
-var DialogTrigger = ({
+var DialogController = ({
   children,
   dismissable = true,
-  keyboardDismissable = true
+  keyboardDismissable = true,
+  open,
+  onOpenChange
 }) => {
-  const [dialogTrigger, dialog] = React35.Children.toArray(children);
-  const dialogTriggerRef = useRef8(null);
-  const state = useOverlayTriggerState({});
+  const state = useOverlayTriggerState({
+    isOpen: open,
+    onOpenChange
+  });
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React35.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React35.createElement(
-    PressResponder,
-    {
-      ref: dialogTriggerRef,
-      isPressed: state.isOpen,
-      onPress: state.toggle
-    },
-    dialogTrigger
-  ), /* @__PURE__ */ React35.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React3.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React3.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React3.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1592,26 +1594,32 @@ var DialogTrigger = ({
       dismissable,
       keyboardDismissable
     },
-    dialog
+    children
   )));
 };
 
-// src/Dialog/DialogController.tsx
+// src/Dialog/DialogTrigger.tsx
+import { Children as Children4, useRef as useRef8 } from "react";
+import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
-import React36 from "react";
-var DialogController = ({
+var DialogTrigger = ({
   children,
   dismissable = true,
-  keyboardDismissable = true,
-  open,
-  onOpenChange
+  keyboardDismissable = true
 }) => {
-  const state = useOverlayTriggerState2({
-    isOpen: open,
-    onOpenChange
-  });
+  const [dialogTrigger, dialog] = Children4.toArray(children);
+  const dialogTriggerRef = useRef8(null);
+  const state = useOverlayTriggerState2({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React36.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React36.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React.createElement(
+    PressResponder,
+    {
+      ref: dialogTriggerRef,
+      isPressed: state.isOpen,
+      onPress: state.toggle
+    },
+    dialogTrigger
+  ), /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1619,7 +1627,7 @@ var DialogController = ({
       dismissable,
       keyboardDismissable
     },
-    children
+    dialog
   )));
 };
 
@@ -1633,7 +1641,7 @@ var CloseButton = ({ className }) => {
     },
     ref
   );
-  return /* @__PURE__ */ React37.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React.createElement(
     "button",
     {
       className: cn19(
@@ -1643,7 +1651,7 @@ var CloseButton = ({ className }) => {
       ref,
       ...buttonProps
     },
-    /* @__PURE__ */ React37.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -1654,9 +1662,9 @@ var CloseButton = ({ className }) => {
   ));
 };
 var addTitleProps = (children, titleProps) => {
-  const childs = React37.Children.toArray(children);
+  const childs = Children5.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => React37.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => isValidElement3(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1664,7 +1672,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = React37.cloneElement(
+  const titleChild = cloneElement4(
     childs[titleIndex],
     titleProps
   );
@@ -1681,37 +1689,34 @@ var Dialog = ({
   const ref = useRef9(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
-  const classNames2 = useClassNames16({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ React37.createElement("div", { className: classNames2.container, ...dialogProps }, closeButton && /* @__PURE__ */ React37.createElement(CloseButton, { className: classNames2.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
+  const classNames2 = useClassNames17({ component: "Dialog", variant, size });
+  return /* @__PURE__ */ React.createElement("div", { className: classNames2.container, ...dialogProps }, closeButton && /* @__PURE__ */ React.createElement(CloseButton, { className: classNames2.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
 };
 Dialog.Trigger = DialogTrigger;
 Dialog.Controller = DialogController;
 
 // src/Divider/Divider.tsx
-import React38 from "react";
 import { useSeparator } from "@react-aria/separator";
-import { useClassNames as useClassNames17 } from "@marigold/system";
+import { useClassNames as useClassNames18 } from "@marigold/system";
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = useSeparator(props);
-  const classNames2 = useClassNames17({ component: "Divider", variant });
-  return /* @__PURE__ */ React38.createElement("div", { className: classNames2, ...props, ...separatorProps });
+  const classNames2 = useClassNames18({ component: "Divider", variant });
+  return /* @__PURE__ */ React.createElement("div", { className: classNames2, ...props, ...separatorProps });
 };
 
 // src/Footer/Footer.tsx
-import React39 from "react";
-import { useClassNames as useClassNames18 } from "@marigold/system";
+import { useClassNames as useClassNames19 } from "@marigold/system";
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames18({ component: "Footer", variant, size });
-  return /* @__PURE__ */ React39.createElement("footer", { ...props, className: classNames2 }, children);
+  const classNames2 = useClassNames19({ component: "Footer", variant, size });
+  return /* @__PURE__ */ React.createElement("footer", { ...props, className: classNames2 }, children);
 };
 
 // src/Image/Image.tsx
-import React40 from "react";
 import {
   cn as cn20,
-  useClassNames as useClassNames19,
   objectFit,
-  objectPosition
+  objectPosition,
+  useClassNames as useClassNames20
 } from "@marigold/system";
 var Image = ({
   variant,
@@ -1720,8 +1725,8 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = useClassNames19({ component: "Image", variant, size });
-  return /* @__PURE__ */ React40.createElement(
+  const classNames2 = useClassNames20({ component: "Image", variant, size });
+  return /* @__PURE__ */ React.createElement(
     "img",
     {
       ...props,
@@ -1737,11 +1742,10 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import React41 from "react";
 import {
-  gapSpace as gapSpace5,
   alignment as alignment2,
-  cn as cn21
+  cn as cn21,
+  gapSpace as gapSpace5
 } from "@marigold/system";
 var Inline = ({
   space = 0,
@@ -1752,7 +1756,7 @@ var Inline = ({
   ...props
 }) => {
   var _a2, _b2, _c, _d;
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn21(
@@ -1768,19 +1772,22 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-import React43, { useRef as useRef11 } from "react";
+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 { useLocale } from "@react-aria/i18n";
+import { useHover as useHover4 } from "@react-aria/interactions";
+import { mergeProps as mergeProps8 } from "@react-aria/utils";
 import { useDateFieldState } from "@react-stately/datepicker";
-import { useDateField } from "@react-aria/datepicker";
-import { createCalendar } from "@internationalized/date";
-import { cn as cn23, useClassNames as useClassNames20, useStateProps as useStateProps8 } from "@marigold/system";
+import { cn as cn23, useClassNames as useClassNames21, useStateProps as useStateProps8 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
-import React42, { useRef as useRef10 } from "react";
-import { cn as cn22, useStateProps as useStateProps7 } from "@marigold/system";
+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";
 var DateSegment = ({
   className,
   segment,
@@ -1798,7 +1805,7 @@ var DateSegment = ({
     focusVisible: isFocused
   });
   const { isPlaceholder, placeholder, text, type, maxValue } = segment;
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...mergeProps7(segmentProps, stateProps, focusProps),
@@ -1814,7 +1821,7 @@ var DateSegment = ({
         minWidth: maxValue != null ? String(maxValue).length + "ch" : void 0
       }
     },
-    /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React.createElement(
       "span",
       {
         "aria-hidden": "true",
@@ -1825,14 +1832,11 @@ var DateSegment = ({
       },
       isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
     ),
-    /* @__PURE__ */ React42.createElement("span", null, isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text)
+    /* @__PURE__ */ React.createElement("span", null, isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text)
   );
 };
 
 // src/DateField/DateField.tsx
-import { mergeProps as mergeProps8 } from "@react-aria/utils";
-import { useHover as useHover4 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 var DateField = ({
   disabled,
   readOnly,
@@ -1867,7 +1871,7 @@ var DateField = ({
     state,
     ref
   );
-  const classNames2 = useClassNames20({ component: "DateField", variant, size });
+  const classNames2 = useClassNames21({ component: "DateField", variant, size });
   const { focusProps, isFocused } = useFocusRing6({
     within: true,
     isTextInput: true,
@@ -1882,7 +1886,7 @@ var DateField = ({
     required,
     focus: isFocused || isPressed
   });
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React.createElement(
     FieldBase,
     {
       error,
@@ -1898,7 +1902,7 @@ var DateField = ({
       size,
       width
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         ...mergeProps8(fieldProps, focusProps, stateProps, hoverProps),
@@ -1910,9 +1914,9 @@ var DateField = ({
         "data-testid": "date-field",
         ref: triggerRef
       },
-      /* @__PURE__ */ React43.createElement("div", { ref, className: "flex basis-full items-center" }, state.segments.map((segment, i) => {
+      /* @__PURE__ */ React.createElement("div", { ref, className: "flex basis-full items-center" }, state.segments.map((segment, i) => {
         var _a;
-        return /* @__PURE__ */ React43.createElement(
+        return /* @__PURE__ */ React.createElement(
           DateSegment,
           {
             className: classNames2.segment,
@@ -1923,7 +1927,7 @@ var DateField = ({
           }
         );
       })),
-      action ? action : /* @__PURE__ */ React43.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React43.createElement(
+      action ? action : /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React.createElement(
         "svg",
         {
           "data-testid": "action",
@@ -1932,39 +1936,41 @@ var DateField = ({
           width: 24,
           height: 24
         },
-        /* @__PURE__ */ React43.createElement("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+        /* @__PURE__ */ React.createElement("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
       ))
     )
   );
 };
 
 // src/Calendar/Calendar.tsx
-import React49, { useRef as useRef14 } from "react";
-import { useCalendarState } from "@react-stately/calendar";
+import { createCalendar as createCalendar2 } from "@internationalized/date";
+import { useRef as useRef14 } from "react";
 import {
   useCalendar
 } from "@react-aria/calendar";
 import { useLocale as useLocale3 } from "@react-aria/i18n";
-import { createCalendar as createCalendar2 } from "@internationalized/date";
+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";
 
 // src/Calendar/CalendarGrid.tsx
-import React45 from "react";
+import { getWeeksInMonth, startOfWeek, today } from "@internationalized/date";
 import { useMemo } from "react";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useLocale as useLocale2 } from "@react-aria/i18n";
-import { getWeeksInMonth, startOfWeek, today } from "@internationalized/date";
+import { useDateFormatter } from "@react-aria/i18n";
 
 // src/Calendar/CalendarCell.tsx
-import React44, { useRef as useRef12 } from "react";
+import { useRef as useRef12 } from "react";
 import { useCalendarCell } from "@react-aria/calendar";
-import { mergeProps as mergeProps9 } from "@react-aria/utils";
-import { cn as cn24, useClassNames as useClassNames21, useStateProps as useStateProps9 } from "@marigold/system";
 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";
 var CalendarCell = (props) => {
   const ref = useRef12(null);
   const { state } = props;
   let { cellProps, buttonProps, formattedDate, isOutsideVisibleRange } = useCalendarCell(props, state, ref);
-  const classNames2 = useClassNames21({
+  const classNames2 = useClassNames22({
     component: "Calendar"
   });
   const isDisabled = cellProps["aria-disabled"];
@@ -1976,7 +1982,7 @@ var CalendarCell = (props) => {
     hover: isHovered,
     selected: cellProps["aria-selected"]
   });
-  return /* @__PURE__ */ React44.createElement("td", { className: "group/cell", ...cellProps }, /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React.createElement("td", { className: "group/cell", ...cellProps }, /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn24(
@@ -1992,7 +1998,6 @@ var CalendarCell = (props) => {
 };
 
 // src/Calendar/CalendarGrid.tsx
-import { useDateFormatter } from "@react-aria/i18n";
 var CalendarGrid = ({ state, ...props }) => {
   const { locale } = useLocale2();
   const { gridProps, headerProps } = useCalendarGrid(props, state);
@@ -2012,37 +2017,32 @@ var CalendarGrid = ({ state, ...props }) => {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React.createElement(
     "table",
     {
       className: "w-full border-spacing-[6px]",
       ...gridProps,
       cellPadding: "8"
     },
-    /* @__PURE__ */ React45.createElement("thead", { ...headerProps }, /* @__PURE__ */ React45.createElement("tr", null, weekDays.map((day, index) => /* @__PURE__ */ React45.createElement("th", { style: { fontWeight: "bolder" }, key: index }, day.substring(0, 2))))),
-    /* @__PURE__ */ React45.createElement("tbody", null, [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ React45.createElement("tr", { key: weekIndex }, state.getDatesInWeek(weekIndex).map(
-      (date, i) => date ? /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React.createElement("thead", { ...headerProps }, /* @__PURE__ */ React.createElement("tr", null, weekDays.map((day, index) => /* @__PURE__ */ React.createElement("th", { style: { fontWeight: "bolder" }, key: index }, day.substring(0, 2))))),
+    /* @__PURE__ */ React.createElement("tbody", null, [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ React.createElement("tr", { key: weekIndex }, state.getDatesInWeek(weekIndex).map(
+      (date, i) => date ? /* @__PURE__ */ React.createElement(
         CalendarCell,
         {
           key: i,
           date,
           state
         }
-      ) : /* @__PURE__ */ React45.createElement("td", { key: i })
+      ) : /* @__PURE__ */ React.createElement("td", { key: i })
     ))))
   );
 };
 
-// src/Calendar/Calendar.tsx
-import { ChevronRight, ChevronLeft } from "@marigold/icons";
-import { cn as cn26, useClassNames as useClassNames23, useStateProps as useStateProps11 } from "@marigold/system";
-
 // src/Calendar/MonthDropdown.tsx
-import React47 from "react";
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
 
 // src/Select/Select.tsx
-import React46, {
+import {
   forwardRef as forwardRef10,
   useRef as useRef13
 } from "react";
@@ -2050,12 +2050,12 @@ import { useButton as useButton6 } from "@react-aria/button";
 import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
 import { useLocalizedStringFormatter } from "@react-aria/i18n";
 import { HiddenSelect, useSelect } from "@react-aria/select";
-import { useSelectState } from "@react-stately/select";
-import { Item as Item4, Section } from "@react-stately/collections";
 import { mergeProps as mergeProps10, useObjectRef as useObjectRef6 } from "@react-aria/utils";
+import { Item as Item4, Section } from "@react-stately/collections";
+import { useSelectState } from "@react-stately/select";
 import {
   cn as cn25,
-  useClassNames as useClassNames22,
+  useClassNames as useClassNames23,
   useSmallScreen,
   useStateProps as useStateProps10
 } from "@marigold/system";
@@ -2109,7 +2109,7 @@ var Select = forwardRef10(
       buttonRef
     );
     const { focusProps, isFocusVisible } = useFocusRing7();
-    const classNames2 = useClassNames22({ component: "Select", variant, size });
+    const classNames2 = useClassNames23({ component: "Select", variant, size });
     const isSmallScreen = useSmallScreen();
     const stateProps = useStateProps10({
       disabled,
@@ -2118,7 +2118,7 @@ var Select = forwardRef10(
       expanded: state.isOpen,
       required
     });
-    return /* @__PURE__ */ React46.createElement(
+    return /* @__PURE__ */ React.createElement(
       FieldBase,
       {
         variant,
@@ -2134,7 +2134,7 @@ var Select = forwardRef10(
         stateProps,
         disabled
       },
-      /* @__PURE__ */ React46.createElement(
+      /* @__PURE__ */ React.createElement(
         HiddenSelect,
         {
           state,
@@ -2144,7 +2144,7 @@ var Select = forwardRef10(
           isDisabled: disabled
         }
       ),
-      /* @__PURE__ */ React46.createElement(
+      /* @__PURE__ */ React.createElement(
         "button",
         {
           className: cn25(
@@ -2155,10 +2155,10 @@ var Select = forwardRef10(
           ...mergeProps10(buttonProps, focusProps),
           ...stateProps
         },
-        /* @__PURE__ */ React46.createElement("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder),
-        /* @__PURE__ */ React46.createElement(ChevronDown, { className: "h-4 w-4" })
+        /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder),
+        /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-4 w-4" })
       ),
-      isSmallScreen ? /* @__PURE__ */ React46.createElement(Tray, { state }, /* @__PURE__ */ React46.createElement(
+      isSmallScreen ? /* @__PURE__ */ React.createElement(Tray, { state }, /* @__PURE__ */ React.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2167,7 +2167,7 @@ var Select = forwardRef10(
           size,
           ...menuProps
         }
-      )) : /* @__PURE__ */ React46.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React46.createElement(
+      )) : /* @__PURE__ */ React.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2200,7 +2200,7 @@ var MonthDropdown = ({ state }) => {
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React.createElement(
     Select,
     {
       "aria-label": "Month",
@@ -2209,13 +2209,12 @@ var MonthDropdown = ({ state }) => {
       "data-testid": "month",
       disabled: state.isDisabled
     },
-    months.map((month, i) => /* @__PURE__ */ React47.createElement(Select.Option, { key: i + 1 }, month.substring(0, 3)))
+    months.map((month, i) => /* @__PURE__ */ React.createElement(Select.Option, { key: i + 1 }, month.substring(0, 3)))
   );
 };
 var MonthDropdown_default = MonthDropdown;
 
 // src/Calendar/YearDropdown.tsx
-import React48 from "react";
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
 var YearDropdown = ({ state }) => {
   const years = [];
@@ -2235,7 +2234,7 @@ var YearDropdown = ({ state }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React.createElement(
     Select,
     {
       "aria-label": "Year",
@@ -2244,7 +2243,7 @@ var YearDropdown = ({ state }) => {
       "data-testid": "year",
       disabled: state.isDisabled
     },
-    years.map((year, i) => /* @__PURE__ */ React48.createElement(Select.Option, { key: i }, year.formatted))
+    years.map((year, i) => /* @__PURE__ */ React.createElement(Select.Option, { key: i }, year.formatted))
   );
 };
 var YearDropdown_default = YearDropdown;
@@ -2273,13 +2272,22 @@ var Calendar = ({
     props,
     state
   );
-  const { isDisabled: prevIsDisabled, ...prevPropsRest } = prevButtonProps;
-  const { isDisabled: nextIsDisabled, ...nextPropsRest } = nextButtonProps;
+  const {
+    isDisabled: prevIsDisabled,
+    onFocusChange: prevFocusChange,
+    ...prevPropsRest
+  } = prevButtonProps;
+  const {
+    isDisabled: nextIsDisabled,
+    onFocusChange: nextFocusChange,
+    ...nextPropsRest
+  } = nextButtonProps;
   const calendarState = useStateProps11({
-    disabled: state.isDisabled
+    disabled: state.isDisabled,
+    focusVisible: state.isFocused
   });
-  const classNames2 = useClassNames23({ component: "Calendar" });
-  return /* @__PURE__ */ React49.createElement(
+  const classNames2 = useClassNames24({ component: "Calendar" });
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       tabIndex: -1,
@@ -2291,33 +2299,33 @@ var Calendar = ({
       ...calendarState,
       ref
     },
-    /* @__PURE__ */ React49.createElement("div", { className: "mb-4 flex items-center gap-[60px]" }, /* @__PURE__ */ React49.createElement("div", { className: "flex min-w-[170px] gap-[9px] [&_div]:flex" }, /* @__PURE__ */ React49.createElement(MonthDropdown_default, { state }), /* @__PURE__ */ React49.createElement(YearDropdown_default, { state })), /* @__PURE__ */ React49.createElement("div", { className: "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1" }, /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: "mb-4 flex items-center gap-[60px]" }, /* @__PURE__ */ React.createElement("div", { className: "flex min-w-[170px] gap-[9px] [&_div]:flex" }, /* @__PURE__ */ React.createElement(MonthDropdown_default, { state }), /* @__PURE__ */ React.createElement(YearDropdown_default, { state })), /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1" }, /* @__PURE__ */ React.createElement(
       Button,
       {
         className: classNames2.calendarControllers,
         ...prevPropsRest,
         disabled: prevIsDisabled
       },
-      /* @__PURE__ */ React49.createElement(ChevronLeft, null)
-    ), /* @__PURE__ */ React49.createElement(
+      /* @__PURE__ */ React.createElement(ChevronLeft, null)
+    ), /* @__PURE__ */ React.createElement(
       Button,
       {
         className: classNames2.calendarControllers,
         ...nextPropsRest,
         disabled: nextIsDisabled
       },
-      /* @__PURE__ */ React49.createElement(ChevronRight, null)
+      /* @__PURE__ */ React.createElement(ChevronRight, null)
     ))),
-    /* @__PURE__ */ React49.createElement(CalendarGrid, { state })
+    /* @__PURE__ */ React.createElement(CalendarGrid, { state })
   );
 };
 
 // src/DatePicker/DatePicker.tsx
-import React50, { useRef as useRef15 } from "react";
-import { useDatePickerState } from "@react-stately/datepicker";
+import { useRef as useRef15 } from "react";
 import { useDatePicker } from "@react-aria/datepicker";
-import { cn as cn27, useClassNames as useClassNames24, useStateProps as useStateProps12 } from "@marigold/system";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
+import { useDatePickerState } from "@react-stately/datepicker";
+import { cn as cn27, useClassNames as useClassNames25, useStateProps as useStateProps12 } from "@marigold/system";
 var DatePicker = ({
   disabled,
   required,
@@ -2350,12 +2358,12 @@ var DatePicker = ({
     ref
   );
   const { isDisabled, errorMessage, description, label } = props;
-  const classNames2 = useClassNames24({
+  const classNames2 = useClassNames25({
     component: "DatePicker",
     size,
     variant
   });
-  return /* @__PURE__ */ React50.createElement(React50.Fragment, null, /* @__PURE__ */ React50.createElement("div", { className: "flex w-full min-w-[300px]", ...groupProps }, /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "flex w-full min-w-[300px]", ...groupProps }, /* @__PURE__ */ React.createElement(
     DateField,
     {
       ...fieldProps,
@@ -2367,14 +2375,14 @@ var DatePicker = ({
       error,
       description: !state.isOpen && description,
       triggerRef: ref,
-      action: /* @__PURE__ */ React50.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React50.createElement(
+      action: /* @__PURE__ */ React.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React.createElement(
         Button,
         {
           ...mergeProps11(buttonProps, stateProps),
           className: cn27("absolute right-0 top-0", classNames2.button),
           disabled: isDisabled
         },
-        /* @__PURE__ */ React50.createElement(
+        /* @__PURE__ */ React.createElement(
           "svg",
           {
             width: "24",
@@ -2382,27 +2390,26 @@ var DatePicker = ({
             viewBox: "0 0 24 24",
             fill: "currentColor"
           },
-          /* @__PURE__ */ React50.createElement("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+          /* @__PURE__ */ React.createElement("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__ */ React50.createElement(Popover, { triggerRef: ref, state }, /* @__PURE__ */ React50.createElement(Calendar, { disabled, ...calendarProps })));
+  )), state.isOpen && /* @__PURE__ */ React.createElement(Popover, { triggerRef: ref, state }, /* @__PURE__ */ React.createElement(Calendar, { disabled, ...calendarProps })));
 };
 
 // src/Inset/Inset.tsx
-import React51 from "react";
 import {
+  cn as cn28,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
-  paddingSpaceY as paddingSpaceY2,
-  cn as cn28
+  paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
 var Inset = ({
   space = 0,
   spaceX = 0,
   spaceY = 0,
   children
-}) => /* @__PURE__ */ React51.createElement(
+}) => /* @__PURE__ */ React.createElement(
   "div",
   {
     className: cn28(
@@ -2414,10 +2421,10 @@ var Inset = ({
 );
 
 // src/Link/Link.tsx
-import React52, { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import { useLink } from "@react-aria/link";
-import { useClassNames as useClassNames25 } from "@marigold/system";
 import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
+import { useClassNames as useClassNames26 } from "@marigold/system";
 var Link = forwardRef11(
   ({
     as = "a",
@@ -2440,13 +2447,13 @@ var Link = forwardRef11(
       linkRef
     );
     const Component = as;
-    const classNames2 = useClassNames25({
+    const classNames2 = useClassNames26({
       component: "Link",
       variant,
       size,
       className
     });
-    return /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React.createElement(
       Component,
       {
         ...props,
@@ -2461,8 +2468,7 @@ var Link = forwardRef11(
 );
 
 // src/List/List.tsx
-import React54 from "react";
-import { useClassNames as useClassNames26 } from "@marigold/system";
+import { useClassNames as useClassNames27 } from "@marigold/system";
 
 // src/List/Context.ts
 import { createContext as createContext5, useContext as useContext5 } from "react";
@@ -2470,10 +2476,9 @@ var ListContext = createContext5({});
 var useListContext = () => useContext5(ListContext);
 
 // src/List/ListItem.tsx
-import React53 from "react";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ React53.createElement("li", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ React.createElement("li", { ...props, className: classNames2 }, children);
 };
 
 // src/List/List.tsx
@@ -2485,18 +2490,18 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = useClassNames26({ component: "List", variant, size });
-  return /* @__PURE__ */ React54.createElement(Component, { ...props, className: classNames2[as] }, /* @__PURE__ */ React54.createElement(ListContext.Provider, { value: { classNames: classNames2.item } }, children));
+  const classNames2 = useClassNames27({ component: "List", variant, size });
+  return /* @__PURE__ */ React.createElement(Component, { ...props, className: classNames2[as] }, /* @__PURE__ */ React.createElement(ListContext.Provider, { value: { classNames: classNames2.item } }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import React58, { useRef as useRef18 } from "react";
+import { useRef as useRef18 } from "react";
 import { useMenu } from "@react-aria/menu";
+import { useSyncRef } from "@react-aria/utils";
 import { Item as Item5, Section as Section2 } from "@react-stately/collections";
 import { useTreeState as useTreeState2 } from "@react-stately/tree";
-import { useSyncRef } from "@react-aria/utils";
-import { useClassNames as useClassNames28 } from "@marigold/system";
+import { useClassNames as useClassNames29 } from "@marigold/system";
 
 // src/Menu/Context.ts
 import {
@@ -2506,52 +2511,8 @@ import {
 var MenuContext = createContext6({});
 var useMenuContext = () => useContext6(MenuContext);
 
-// src/Menu/MenuTrigger.tsx
-import React55, { useRef as useRef16 } from "react";
-import { useMenuTriggerState } from "@react-stately/menu";
-import { PressResponder as PressResponder2 } from "@react-aria/interactions";
-import { useMenuTrigger } from "@react-aria/menu";
-import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
-import { useSmallScreen as useSmallScreen2 } from "@marigold/system";
-var MenuTrigger = ({
-  disabled,
-  open,
-  onOpenChange,
-  children
-}) => {
-  const [menuTrigger, menu] = React55.Children.toArray(children);
-  const menuTriggerRef = useRef16(null);
-  const menuRef = useObjectRef8();
-  const state = useMenuTriggerState({
-    isOpen: open,
-    onOpenChange
-  });
-  const { menuTriggerProps, menuProps } = useMenuTrigger(
-    { trigger: "press", isDisabled: disabled },
-    state,
-    menuTriggerRef
-  );
-  const menuContext = {
-    ...menuProps,
-    ref: menuRef,
-    open: state.isOpen,
-    onClose: state.close,
-    autoFocus: state.focusStrategy
-  };
-  const isSmallScreen = useSmallScreen2();
-  return /* @__PURE__ */ React55.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React55.createElement(
-    PressResponder2,
-    {
-      ...menuTriggerProps,
-      ref: menuTriggerRef,
-      isPressed: state.isOpen
-    },
-    menuTrigger
-  ), isSmallScreen ? /* @__PURE__ */ React55.createElement(Tray, { state }, menu) : /* @__PURE__ */ React55.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
-};
-
 // src/Menu/MenuItem.tsx
-import React56, { useRef as useRef17 } from "react";
+import { useRef as useRef16 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
 import { mergeProps as mergeProps12 } from "@react-aria/utils";
@@ -2562,7 +2523,7 @@ var MenuItem = ({
   onAction,
   className
 }) => {
-  const ref = useRef17(null);
+  const ref = useRef16(null);
   const { onClose } = useMenuContext();
   const { menuItemProps } = useMenuItem(
     {
@@ -2578,7 +2539,7 @@ var MenuItem = ({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React.createElement(
     "li",
     {
       ref,
@@ -2595,16 +2556,15 @@ var MenuItem = ({
 };
 
 // src/Menu/MenuSection.tsx
-import React57 from "react";
 import { useMenuSection } from "@react-aria/menu";
-import { useClassNames as useClassNames27 } from "@marigold/system";
+import { useClassNames as useClassNames28 } from "@marigold/system";
 var MenuSection = ({ onAction, item, state }) => {
   let { itemProps, headingProps, groupProps } = useMenuSection({
     heading: item.rendered,
     "aria-label": item["aria-label"]
   });
-  const className = useClassNames27({ component: "Menu" });
-  return /* @__PURE__ */ React57.createElement(React57.Fragment, null, item.key !== state.collection.getFirstKey() && /* @__PURE__ */ React57.createElement("li", null, /* @__PURE__ */ React57.createElement(Divider, { variant: "section" })), /* @__PURE__ */ React57.createElement("ul", { ...itemProps }, item.rendered && /* @__PURE__ */ React57.createElement("span", { ...headingProps, className: className.section }, item.rendered), /* @__PURE__ */ React57.createElement("li", { ...groupProps, className: "pb-1" }, [...item.props.children].map((node) => /* @__PURE__ */ React57.createElement(
+  const className = useClassNames28({ component: "Menu" });
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, item.key !== state.collection.getFirstKey() && /* @__PURE__ */ React.createElement("li", null, /* @__PURE__ */ React.createElement(Divider, { variant: "section" })), /* @__PURE__ */ React.createElement("li", { ...itemProps }, item.rendered && /* @__PURE__ */ React.createElement("span", { ...headingProps, className: className.section }, item.rendered), /* @__PURE__ */ React.createElement("ul", { ...groupProps, className: "pb-1" }, [...item.props.children].map((node) => /* @__PURE__ */ React.createElement(
     MenuItem,
     {
       key: node.key,
@@ -2617,6 +2577,50 @@ var MenuSection = ({ onAction, item, state }) => {
 };
 var MenuSection_default = MenuSection;
 
+// src/Menu/MenuTrigger.tsx
+import { Children as Children6, useRef as useRef17 } from "react";
+import { PressResponder as PressResponder2 } from "@react-aria/interactions";
+import { useMenuTrigger } from "@react-aria/menu";
+import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
+import { useMenuTriggerState } from "@react-stately/menu";
+import { useSmallScreen as useSmallScreen2 } from "@marigold/system";
+var MenuTrigger = ({
+  disabled,
+  open,
+  onOpenChange,
+  children
+}) => {
+  const [menuTrigger, menu] = Children6.toArray(children);
+  const menuTriggerRef = useRef17(null);
+  const menuRef = useObjectRef8();
+  const state = useMenuTriggerState({
+    isOpen: open,
+    onOpenChange
+  });
+  const { menuTriggerProps, menuProps } = useMenuTrigger(
+    { trigger: "press", isDisabled: disabled },
+    state,
+    menuTriggerRef
+  );
+  const menuContext = {
+    ...menuProps,
+    ref: menuRef,
+    open: state.isOpen,
+    onClose: state.close,
+    autoFocus: state.focusStrategy
+  };
+  const isSmallScreen = useSmallScreen2();
+  return /* @__PURE__ */ React.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React.createElement(
+    PressResponder2,
+    {
+      ...menuTriggerProps,
+      ref: menuTriggerRef,
+      isPressed: state.isOpen
+    },
+    menuTrigger
+  ), isSmallScreen ? /* @__PURE__ */ React.createElement(Tray, { state }, menu) : /* @__PURE__ */ React.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
+};
+
 // src/Menu/Menu.tsx
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
@@ -2625,10 +2629,10 @@ var Menu = ({ variant, size, ...props }) => {
   const state = useTreeState2({ ...ownProps, selectionMode: "none" });
   const { menuProps } = useMenu(ownProps, state, ref);
   useSyncRef({ ref: scrollRef }, ref);
-  const classNames2 = useClassNames28({ component: "Menu", variant, size });
-  return /* @__PURE__ */ React58.createElement("ul", { ref, className: classNames2.container, ...menuProps }, [...state.collection].map((item) => {
+  const classNames2 = useClassNames29({ component: "Menu", variant, size });
+  return /* @__PURE__ */ React.createElement("ul", { ref, className: classNames2.container, ...menuProps }, [...state.collection].map((item) => {
     if (item.type === "section") {
-      return /* @__PURE__ */ React58.createElement(
+      return /* @__PURE__ */ React.createElement(
         MenuSection_default,
         {
           key: item.key,
@@ -2638,7 +2642,7 @@ var Menu = ({ variant, size, ...props }) => {
         }
       );
     }
-    return /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React.createElement(
       MenuItem,
       {
         key: item.key,
@@ -2655,24 +2659,22 @@ Menu.Item = Item5;
 Menu.Section = Section2;
 
 // src/Menu/ActionMenu.tsx
-import React59 from "react";
 import { SVG as SVG5 } from "@marigold/system";
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ React59.createElement(Menu.Trigger, null, /* @__PURE__ */ React59.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ React59.createElement(SVG5, { viewBox: "0 0 24 24" }, /* @__PURE__ */ React59.createElement("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__ */ React59.createElement(Menu, { ...props }));
+  return /* @__PURE__ */ React.createElement(Menu.Trigger, null, /* @__PURE__ */ React.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ React.createElement(SVG5, { viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("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__ */ React.createElement(Menu, { ...props }));
 };
 
 // src/Message/Message.tsx
-import React60 from "react";
-import { cn as cn29, useClassNames as useClassNames29 } from "@marigold/system";
+import { cn as cn29, useClassNames as useClassNames30 } from "@marigold/system";
 var icons = {
-  info: () => /* @__PURE__ */ React60.createElement(
+  info: () => /* @__PURE__ */ React.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor"
     },
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2681,14 +2683,14 @@ var icons = {
       }
     )
   ),
-  warning: () => /* @__PURE__ */ React60.createElement(
+  warning: () => /* @__PURE__ */ React.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor"
     },
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2697,14 +2699,14 @@ var icons = {
       }
     )
   ),
-  error: () => /* @__PURE__ */ React60.createElement(
+  error: () => /* @__PURE__ */ React.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor"
     },
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2721,9 +2723,9 @@ var Message = ({
   children,
   ...props
 }) => {
-  const classNames2 = useClassNames29({ component: "Message", variant, size });
+  const classNames2 = useClassNames30({ component: "Message", variant, size });
   const Icon3 = icons[variant];
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn29(
@@ -2732,35 +2734,35 @@ var Message = ({
       ),
       ...props
     },
-    /* @__PURE__ */ React60.createElement("div", { className: cn29("col-span-1 h-5 w-5 self-center", classNames2.icon) }, /* @__PURE__ */ React60.createElement(Icon3, null)),
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React.createElement("div", { className: cn29("col-span-1 h-5 w-5 self-center", classNames2.icon) }, /* @__PURE__ */ React.createElement(Icon3, null)),
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         className: cn29("col-start-2 row-start-1 self-center", classNames2.title)
       },
       messageTitle
     ),
-    /* @__PURE__ */ React60.createElement("div", { className: cn29("col-start-2", classNames2.content) }, children)
+    /* @__PURE__ */ React.createElement("div", { className: cn29("col-start-2", classNames2.content) }, children)
   );
 };
 
 // src/NumberField/NumberField.tsx
-import React62, { forwardRef as forwardRef12 } from "react";
+import { forwardRef as forwardRef12 } from "react";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
-import { useHover as useHover7 } from "@react-aria/interactions";
 import { useLocale as useLocale4 } from "@react-aria/i18n";
+import { useHover as useHover7 } from "@react-aria/interactions";
 import { useNumberField } from "@react-aria/numberfield";
 import { mergeProps as mergeProps14, useObjectRef as useObjectRef9 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
-import { cn as cn31, useClassNames as useClassNames30, useStateProps as useStateProps15 } from "@marigold/system";
+import { cn as cn31, useClassNames as useClassNames31, useStateProps as useStateProps15 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import React61, { useRef as useRef19 } from "react";
+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";
-var Plus = () => /* @__PURE__ */ React61.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React61.createElement(
+var Plus = () => /* @__PURE__ */ React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React.createElement(
   "path",
   {
     fillRule: "evenodd",
@@ -2768,7 +2770,7 @@ var Plus = () => /* @__PURE__ */ React61.createElement("svg", { width: 16, heigh
     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__ */ React61.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React61.createElement(
+var Minus = () => /* @__PURE__ */ React.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React.createElement(
   "path",
   {
     fillRule: "evenodd",
@@ -2793,7 +2795,7 @@ var StepButton = ({
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn30(
@@ -2806,7 +2808,7 @@ var StepButton = ({
       ...mergeProps13(buttonProps, hoverProps),
       ...stateProps
     },
-    /* @__PURE__ */ React61.createElement(Icon3, null)
+    /* @__PURE__ */ React.createElement(Icon3, null)
   );
 };
 
@@ -2857,12 +2859,12 @@ var NumberField = forwardRef12(
       readOnly,
       required
     });
-    const classNames2 = useClassNames30({
+    const classNames2 = useClassNames31({
       component: "NumberField",
       size,
       variant
     });
-    return /* @__PURE__ */ React62.createElement(
+    return /* @__PURE__ */ React.createElement(
       FieldBase,
       {
         label: props.label,
@@ -2877,7 +2879,7 @@ var NumberField = forwardRef12(
         size,
         width
       },
-      /* @__PURE__ */ React62.createElement(
+      /* @__PURE__ */ React.createElement(
         "div",
         {
           "data-group": true,
@@ -2886,7 +2888,7 @@ var NumberField = forwardRef12(
           ...mergeProps14(groupProps, focusProps, hoverProps),
           ...stateProps
         },
-        showStepper && /* @__PURE__ */ React62.createElement(
+        showStepper && /* @__PURE__ */ React.createElement(
           StepButton,
           {
             className: classNames2.stepper,
@@ -2894,7 +2896,7 @@ var NumberField = forwardRef12(
             ...decrementButtonProps
           }
         ),
-        /* @__PURE__ */ React62.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React62.createElement(
+        /* @__PURE__ */ React.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React.createElement(
           Input,
           {
             ref: inputRef,
@@ -2907,7 +2909,7 @@ var NumberField = forwardRef12(
             ...stateProps
           }
         )),
-        showStepper && /* @__PURE__ */ React62.createElement(
+        showStepper && /* @__PURE__ */ React.createElement(
           StepButton,
           {
             className: classNames2.stepper,
@@ -2924,7 +2926,6 @@ var NumberField = forwardRef12(
 import { useTheme as useTheme4, ThemeProvider as ThemeProvider2 } from "@marigold/system";
 
 // src/Provider/MarigoldProvider.tsx
-import React63 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   ThemeProvider,
@@ -2937,20 +2938,20 @@ function MarigoldProvider({
 }) {
   const outerTheme = useTheme3();
   const isTopLevel = outerTheme === defaultTheme;
-  return /* @__PURE__ */ React63.createElement(ThemeProvider, { theme }, isTopLevel ? /* @__PURE__ */ React63.createElement(OverlayProvider, null, children) : children);
+  return /* @__PURE__ */ React.createElement(ThemeProvider, { theme }, isTopLevel ? /* @__PURE__ */ React.createElement(OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-import React65, {
+import {
   forwardRef as forwardRef13
 } from "react";
-import { useHover as useHover8 } from "@react-aria/interactions";
 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 useClassNames31,
+  useClassNames as useClassNames32,
   useStateProps as useStateProps17
 } from "@marigold/system";
 
@@ -2962,7 +2963,6 @@ var RadioGroupContext = createContext7(
 var useRadioGroupContext = () => useContext7(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import React64 from "react";
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
 import { cn as cn32, useStateProps as useStateProps16 } from "@marigold/system";
@@ -2991,7 +2991,7 @@ var RadioGroup = ({
     error,
     required
   });
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React.createElement(
     FieldBase,
     {
       width,
@@ -3006,7 +3006,7 @@ var RadioGroup = ({
       stateProps,
       ...radioGroupProps
     },
-    /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         role: "presentation",
@@ -3016,14 +3016,14 @@ var RadioGroup = ({
           orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
         )
       },
-      /* @__PURE__ */ React64.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
+      /* @__PURE__ */ React.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
     )
   );
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ React65.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ React65.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ React65.createElement(
+var Dot = () => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ React.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
+var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ React.createElement(
   "div",
   {
     className: cn33(
@@ -3033,7 +3033,7 @@ var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ React65.create
     "aria-hidden": "true",
     ...props
   },
-  checked ? /* @__PURE__ */ React65.createElement(Dot, null) : null
+  checked ? /* @__PURE__ */ React.createElement(Dot, null) : null
 );
 var Radio = forwardRef13(
   ({ width, disabled, ...props }, ref) => {
@@ -3050,7 +3050,7 @@ var Radio = forwardRef13(
       state,
       inputRef
     );
-    const classNames2 = useClassNames31({
+    const classNames2 = useClassNames32({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
@@ -3065,7 +3065,7 @@ var Radio = forwardRef13(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ React65.createElement(
+    return /* @__PURE__ */ React.createElement(
       "label",
       {
         className: cn33(
@@ -3076,7 +3076,7 @@ var Radio = forwardRef13(
         ),
         ...mergeProps15(hoverProps, stateProps)
       },
-      /* @__PURE__ */ React65.createElement(
+      /* @__PURE__ */ React.createElement(
         "input",
         {
           ref: inputRef,
@@ -3087,23 +3087,24 @@ var Radio = forwardRef13(
           ...mergeProps15(inputProps, focusProps)
         }
       ),
-      /* @__PURE__ */ React65.createElement(Icon2, { checked: inputProps.checked, className: classNames2.radio }),
-      /* @__PURE__ */ React65.createElement("div", { className: classNames2.label }, props.children)
+      /* @__PURE__ */ React.createElement(Icon2, { checked: inputProps.checked, className: classNames2.radio }),
+      /* @__PURE__ */ React.createElement("div", { className: classNames2.label }, props.children)
     );
   }
 );
 Radio.Group = RadioGroup;
 
 // src/Slider/Slider.tsx
-import React67, { forwardRef as forwardRef14 } from "react";
-import { useSlider } from "@react-aria/slider";
-import { useSliderState } from "@react-stately/slider";
+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 { cn as cn35, createVar as createVar9, useClassNames as useClassNames32, useStateProps as useStateProps19 } from "@marigold/system";
+import { useSliderState } from "@react-stately/slider";
+import { cn as cn35, createVar as createVar10, useClassNames as useClassNames33, useStateProps as useStateProps19 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
-import React66, { useEffect } from "react";
+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";
@@ -3112,10 +3113,9 @@ import { cn as cn34, useStateProps as useStateProps18 } from "@marigold/system";
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/Slider/Thumb.tsx
-import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 var Thumb = ({ state, trackRef, className, ...props }) => {
   const { disabled } = props;
-  const inputRef = React66.useRef(null);
+  const inputRef = useRef20(null);
   const { isFocusVisible, focusProps, isFocused } = useFocusRing11();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
   const stateProps = useStateProps18({
@@ -3131,10 +3131,10 @@ var Thumb = ({ state, trackRef, className, ...props }) => {
     },
     state
   );
-  useEffect(() => {
+  useEffect2(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ React66.createElement("div", { className: cn34("top-1/2", className), ...thumbProps, ...stateProps }, /* @__PURE__ */ React66.createElement(VisuallyHidden, null, /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: cn34("top-1/2", className), ...thumbProps, ...stateProps }, /* @__PURE__ */ React.createElement(VisuallyHidden, null, /* @__PURE__ */ React.createElement(
     "input",
     {
       type: "range",
@@ -3159,7 +3159,7 @@ var Slider = forwardRef14(
       state,
       trackRef
     );
-    const classNames2 = useClassNames32({
+    const classNames2 = useClassNames33({
       component: "Slider",
       variant,
       size
@@ -3167,14 +3167,14 @@ var Slider = forwardRef14(
     const sliderState = useStateProps19({
       disabled: props.disabled
     });
-    return /* @__PURE__ */ React67.createElement(
+    return /* @__PURE__ */ React.createElement(
       "div",
       {
         className: "flex w-[var(--slideWidth)] touch-none flex-col",
-        style: createVar9({ slideWidth: width }),
+        style: createVar10({ slideWidth: width }),
         ...groupProps
       },
-      /* @__PURE__ */ React67.createElement("div", { className: "flex self-stretch" }, props.children && /* @__PURE__ */ React67.createElement("label", { className: classNames2.label, ...labelProps }, props.children), /* @__PURE__ */ React67.createElement(
+      /* @__PURE__ */ React.createElement("div", { className: "flex self-stretch" }, props.children && /* @__PURE__ */ React.createElement("label", { className: classNames2.label, ...labelProps }, props.children), /* @__PURE__ */ React.createElement(
         "output",
         {
           className: cn35(
@@ -3185,7 +3185,7 @@ var Slider = forwardRef14(
         },
         state.getThumbValueLabel(0)
       )),
-      /* @__PURE__ */ React67.createElement(
+      /* @__PURE__ */ React.createElement(
         "div",
         {
           className: "h-8 w-full cursor-pointer data-[disabled]:cursor-not-allowed",
@@ -3193,7 +3193,7 @@ var Slider = forwardRef14(
           ...sliderState,
           ref: trackRef
         },
-        /* @__PURE__ */ React67.createElement(
+        /* @__PURE__ */ React.createElement(
           "div",
           {
             className: cn35(
@@ -3202,7 +3202,7 @@ var Slider = forwardRef14(
             )
           }
         ),
-        /* @__PURE__ */ React67.createElement(
+        /* @__PURE__ */ React.createElement(
           Thumb,
           {
             state,
@@ -3217,15 +3217,13 @@ var Slider = forwardRef14(
 );
 
 // src/Split/Split.tsx
-import React68 from "react";
-var Split = (props) => /* @__PURE__ */ React68.createElement("div", { ...props, role: "separator", className: "grow" });
+var Split = (props) => /* @__PURE__ */ React.createElement("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-import React69 from "react";
 import {
+  alignment as alignment3,
   cn as cn36,
-  gapSpace as gapSpace6,
-  alignment as alignment3
+  gapSpace as gapSpace6
 } from "@marigold/system";
 var Stack = ({
   children,
@@ -3237,7 +3235,7 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn36(
@@ -3254,12 +3252,12 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import React70, { forwardRef as forwardRef15 } from "react";
+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 { cn as cn37, createVar as createVar10, useStateProps as useStateProps20, useClassNames as useClassNames33 } from "@marigold/system";
+import { cn as cn37, createVar as createVar11, useClassNames as useClassNames34, useStateProps as useStateProps20 } from "@marigold/system";
 var Switch = forwardRef15(
   ({
     variant,
@@ -3288,8 +3286,8 @@ var Switch = forwardRef15(
       readOnly,
       focus: isFocusVisible
     });
-    const classNames2 = useClassNames33({ component: "Switch", size, variant });
-    return /* @__PURE__ */ React70.createElement(
+    const classNames2 = useClassNames34({ component: "Switch", size, variant });
+    return /* @__PURE__ */ React.createElement(
       "label",
       {
         className: cn37(
@@ -3297,10 +3295,10 @@ var Switch = forwardRef15(
           "w-[var(--switchWidth)]",
           "relative flex items-center justify-between gap-[1ch]"
         ),
-        style: createVar10({ switchWidth: width }),
+        style: createVar11({ switchWidth: width }),
         ...stateProps
       },
-      /* @__PURE__ */ React70.createElement(
+      /* @__PURE__ */ React.createElement(
         "input",
         {
           ref: inputRef,
@@ -3309,8 +3307,8 @@ var Switch = forwardRef15(
           ...focusProps
         }
       ),
-      props.children && /* @__PURE__ */ React70.createElement(React70.Fragment, null, props.children),
-      /* @__PURE__ */ React70.createElement(
+      props.children && /* @__PURE__ */ React.createElement(React.Fragment, null, props.children),
+      /* @__PURE__ */ React.createElement(
         "div",
         {
           className: cn37(
@@ -3318,7 +3316,7 @@ var Switch = forwardRef15(
             classNames2.track
           )
         },
-        /* @__PURE__ */ React70.createElement(
+        /* @__PURE__ */ React.createElement(
           "div",
           {
             className: cn37(
@@ -3337,17 +3335,17 @@ var Switch = forwardRef15(
 );
 
 // src/Table/Table.tsx
-import React79, { useRef as useRef26 } from "react";
+import { useRef as useRef27 } from "react";
 import { useTable } from "@react-aria/table";
 import {
+  TableBody as Body2,
   Cell,
   Column,
-  Row,
-  TableBody as Body2,
   TableHeader as Header2,
+  Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn42, useClassNames as useClassNames35 } from "@marigold/system";
+import { cn as cn42, useClassNames as useClassNames36 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext8, useContext as useContext8 } from "react";
@@ -3355,21 +3353,20 @@ var TableContext = createContext8({});
 var useTableContext = () => useContext8(TableContext);
 
 // src/Table/TableBody.tsx
-import React71 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React71.createElement("tbody", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ React.createElement("tbody", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableCell.tsx
-import React72, { useRef as useRef20 } from "react";
-import { useTableCell } from "@react-aria/table";
+import { useRef as useRef21 } from "react";
 import { useFocusRing as useFocusRing13 } 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";
 var TableCell = ({ cell }) => {
-  const ref = useRef20(null);
+  const ref = useRef21(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -3390,7 +3387,7 @@ var TableCell = ({ cell }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing13();
   const stateProps = useStateProps21({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React.createElement(
     "td",
     {
       ref,
@@ -3403,9 +3400,9 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React73, { useRef as useRef21 } from "react";
-import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
+import { useRef as useRef22 } from "react";
 import { useFocusRing as useFocusRing14 } 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";
 
@@ -3431,7 +3428,7 @@ var mapCheckboxProps = ({
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef21(null);
+  const ref = useRef22(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -3446,7 +3443,7 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing14();
   const stateProps = useStateProps22({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React.createElement(
     "td",
     {
       ref,
@@ -3454,37 +3451,25 @@ var TableCheckboxCell = ({ cell }) => {
       ...mergeProps18(gridCellProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ React73.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ React.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-import React74, { useRef as useRef22 } from "react";
+import { useRef as useRef23 } from "react";
 import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useHover as useHover9 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps19 } from "@react-aria/utils";
+import { SortDown, SortUp } from "@marigold/icons";
 import { cn as cn39, useStateProps as useStateProps23 } from "@marigold/system";
-var SortIndicator = ({
-  direction = "ascending",
-  visible
+import { width as twWidth2 } from "@marigold/system";
+var TableColumnHeader = ({
+  column,
+  width = "auto"
 }) => {
-  return /* @__PURE__ */ React74.createElement(
-    "span",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: cn39(
-        "ps-[0.5ch] text-current",
-        visible ? "visible" : "invisible"
-      )
-    },
-    direction === "ascending" ? "\u25B2" : "\u25BC"
-  );
-};
-var TableColumnHeader = ({ column }) => {
   var _a, _b;
-  const ref = useRef22(null);
+  const ref = useRef23(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -3499,56 +3484,49 @@ var TableColumnHeader = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React.createElement(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: cn39("cursor-default", classNames2 == null ? void 0 : classNames2.header),
+      className: cn39("cursor-default", twWidth2[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps19(columnHeaderProps, hoverProps, focusProps),
       ...stateProps
     },
     column.rendered,
-    column.props.allowsSorting && /* @__PURE__ */ React74.createElement(
-      SortIndicator,
-      {
-        direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
-        visible: ((_b = state.sortDescriptor) == null ? void 0 : _b.column) === column.key
-      }
-    )
+    column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ React.createElement(SortUp, { className: "inline-block" }) : /* @__PURE__ */ React.createElement(SortDown, { className: "inline-block" }) : /* @__PURE__ */ React.createElement(SortDown, { className: "inline-block" }))
   );
 };
 
 // src/Table/TableHeader.tsx
-import React75 from "react";
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React75.createElement("thead", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ React.createElement("thead", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React76, { useRef as useRef23 } from "react";
+import { useRef as useRef24 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef23(null);
+  const ref = useRef24(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React76.createElement("tr", { ...rowProps, ref }, children);
+  return /* @__PURE__ */ React.createElement("tr", { ...rowProps, ref }, children);
 };
 
 // src/Table/TableRow.tsx
-import React77, { useRef as useRef24 } from "react";
+import { useRef as useRef25 } from "react";
 import { useFocusRing as useFocusRing16 } from "@react-aria/focus";
 import { useHover as useHover10 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps20 } from "@react-aria/utils";
-import { cn as cn40, useClassNames as useClassNames34, useStateProps as useStateProps24 } from "@marigold/system";
+import { cn as cn40, useClassNames as useClassNames35, useStateProps as useStateProps24 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
-  const ref = useRef24(null);
+  const ref = useRef25(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames34({
+  const classNames2 = useClassNames35({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3573,7 +3551,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React.createElement(
     "tr",
     {
       ref,
@@ -3591,7 +3569,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React78, { useRef as useRef25 } from "react";
+import { useRef as useRef26 } from "react";
 import { useFocusRing as useFocusRing17 } from "@react-aria/focus";
 import { useHover as useHover11 } from "@react-aria/interactions";
 import {
@@ -3599,9 +3577,16 @@ import {
   useTableSelectAllCheckbox
 } from "@react-aria/table";
 import { mergeProps as mergeProps21 } from "@react-aria/utils";
-import { cn as cn41, useStateProps as useStateProps25 } from "@marigold/system";
-var TableSelectAllCell = ({ column }) => {
-  const ref = useRef25(null);
+import {
+  cn as cn41,
+  width as twWidth3,
+  useStateProps as useStateProps25
+} from "@marigold/system";
+var TableSelectAllCell = ({
+  column,
+  width = "auto"
+}) => {
+  const ref = useRef26(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -3617,18 +3602,19 @@ var TableSelectAllCell = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React.createElement(
     "th",
     {
       ref,
       className: cn41(
+        twWidth3[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
       ),
       ...mergeProps21(columnHeaderProps, hoverProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ React78.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ React.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
@@ -3641,7 +3627,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = useRef26(null);
+  const tableRef = useRef27(null);
   const state = useTableState({
     ...props,
     selectionMode,
@@ -3649,39 +3635,54 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames35({
+  const classNames2 = useClassNames36({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React.createElement(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size }
     },
-    /* @__PURE__ */ React79.createElement(
+    /* @__PURE__ */ React.createElement(
       "table",
       {
         ref: tableRef,
         className: cn42(
+          "group/table",
           "border-collapse overflow-auto whitespace-nowrap",
           stretch ? "table w-full" : "block",
           classNames2.table
         ),
         ...gridProps
       },
-      /* @__PURE__ */ React79.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React79.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...collection.getChildren(headerRow.key)].map(
+      /* @__PURE__ */ React.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...collection.getChildren(headerRow.key)].map(
         (column) => {
-          var _a;
-          return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React79.createElement(TableSelectAllCell, { key: column.key, column }) : /* @__PURE__ */ React79.createElement(TableColumnHeader, { key: column.key, column });
+          var _a, _b, _c;
+          return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React.createElement(
+            TableSelectAllCell,
+            {
+              width: (_b = column.props) == null ? void 0 : _b.width,
+              key: column.key,
+              column
+            }
+          ) : /* @__PURE__ */ React.createElement(
+            TableColumnHeader,
+            {
+              width: (_c = column.props) == null ? void 0 : _c.width,
+              key: column.key,
+              column
+            }
+          );
         }
       )))),
-      /* @__PURE__ */ React79.createElement(TableBody, null, ...collection.rows.map(
-        (row) => row.type === "item" && /* @__PURE__ */ React79.createElement(TableRow, { key: row.key, row }, [...collection.getChildren(row.key)].map(
+      /* @__PURE__ */ React.createElement(TableBody, null, ...collection.rows.map(
+        (row) => row.type === "item" && /* @__PURE__ */ React.createElement(TableRow, { key: row.key, row }, [...collection.getChildren(row.key)].map(
           (cell) => {
             var _a;
-            return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React79.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ React79.createElement(TableCell, { key: cell.key, cell });
+            return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ React.createElement(TableCell, { key: cell.key, cell });
           }
         ))
       ))
@@ -3695,18 +3696,17 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React80 from "react";
 import {
   cn as cn43,
-  createVar as createVar11,
+  createVar as createVar12,
   cursorStyle,
   fontWeight,
   get as get2,
   textAlign as textAlign2,
-  useClassNames as useClassNames36,
-  useTheme as useTheme5,
   textSize,
-  textStyle
+  textStyle,
+  useClassNames as useClassNames37,
+  useTheme as useTheme5
 } from "@marigold/system";
 var Text = ({
   variant,
@@ -3721,12 +3721,12 @@ var Text = ({
   ...props
 }) => {
   const theme = useTheme5();
-  const classNames2 = useClassNames36({
+  const classNames2 = useClassNames37({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React.createElement(
     "p",
     {
       ...props,
@@ -3739,7 +3739,7 @@ var Text = ({
         weight && fontWeight[weight],
         fontSize && textSize[fontSize]
       ),
-      style: createVar11({
+      style: createVar12({
         color: color && theme.colors && get2(
           theme.colors,
           color.replace("-", "."),
@@ -3753,12 +3753,12 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import React81, { forwardRef as forwardRef16 } from "react";
-import { useHover as useHover12 } from "@react-aria/interactions";
+import { forwardRef as forwardRef16 } from "react";
 import { useFocusRing as useFocusRing18 } from "@react-aria/focus";
+import { useHover as useHover12 } from "@react-aria/interactions";
 import { useTextField } from "@react-aria/textfield";
 import { useObjectRef as useObjectRef13 } from "@react-aria/utils";
-import { useClassNames as useClassNames37, useStateProps as useStateProps26 } from "@marigold/system";
+import { useClassNames as useClassNames38, useStateProps as useStateProps26 } from "@marigold/system";
 var TextArea = forwardRef16(
   ({
     variant,
@@ -3794,8 +3794,8 @@ var TextArea = forwardRef16(
       required,
       error
     });
-    const classNames2 = useClassNames37({ component: "TextArea", variant, size });
-    return /* @__PURE__ */ React81.createElement(
+    const classNames2 = useClassNames38({ component: "TextArea", variant, size });
+    return /* @__PURE__ */ React.createElement(
       FieldBase,
       {
         label,
@@ -3810,7 +3810,7 @@ var TextArea = forwardRef16(
         size,
         width
       },
-      /* @__PURE__ */ React81.createElement(
+      /* @__PURE__ */ React.createElement(
         "textarea",
         {
           className: classNames2,
@@ -3826,9 +3826,9 @@ var TextArea = forwardRef16(
 );
 
 // src/TextField/TextField.tsx
-import React82, { forwardRef as forwardRef17 } from "react";
-import { useHover as useHover13 } from "@react-aria/interactions";
+import { forwardRef as forwardRef17 } from "react";
 import { useFocusRing as useFocusRing19 } from "@react-aria/focus";
+import { useHover as useHover13 } 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";
@@ -3859,7 +3859,7 @@ var TextField = forwardRef17(
       readOnly,
       required
     });
-    return /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React.createElement(
       FieldBase,
       {
         label,
@@ -3874,7 +3874,7 @@ var TextField = forwardRef17(
         size,
         width
       },
-      /* @__PURE__ */ React82.createElement(
+      /* @__PURE__ */ React.createElement(
         Input,
         {
           ref: inputRef,
@@ -3888,8 +3888,7 @@ var TextField = forwardRef17(
 );
 
 // src/Tiles/Tiles.tsx
-import React83 from "react";
-import { gapSpace as gapSpace7, cn as cn44, createVar as createVar12 } from "@marigold/system";
+import { cn as cn44, createVar as createVar13, gapSpace as gapSpace7 } from "@marigold/system";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3902,7 +3901,7 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...props,
@@ -3912,16 +3911,15 @@ var Tiles = ({
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: createVar12({ column, tilesWidth })
+      style: createVar13({ column, tilesWidth })
     },
     children
   );
 };
 
 // src/Tooltip/Tooltip.tsx
-import React85 from "react";
 import { useTooltip } from "@react-aria/tooltip";
-import { cn as cn45, useClassNames as useClassNames38 } from "@marigold/system";
+import { cn as cn45, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/Tooltip/Context.ts
 import { createContext as createContext9, useContext as useContext9 } from "react";
@@ -3929,7 +3927,7 @@ var TooltipContext = createContext9({});
 var useTooltipContext = () => useContext9(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React84, { useRef as useRef27 } from "react";
+import { Children as Children7, useRef as useRef28 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
@@ -3942,7 +3940,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = React84.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = Children7.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -3950,8 +3948,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = useRef27(null);
-  const overlayRef = useRef27(null);
+  const tooltipTriggerRef = useRef28(null);
+  const overlayRef = useRef28(null);
   const state = useTooltipTriggerState(props);
   const { triggerProps, tooltipProps } = useTooltipTrigger(
     props,
@@ -3970,7 +3968,7 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React84.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React.createElement(
     TooltipContext.Provider,
     {
       value: {
@@ -3982,7 +3980,7 @@ var TooltipTrigger = ({
         ...positionProps
       }
     },
-    /* @__PURE__ */ React84.createElement(Overlay, { open: state.isOpen }, tooltip)
+    /* @__PURE__ */ React.createElement(Overlay, { open: state.isOpen }, tooltip)
   ));
 };
 
@@ -3990,8 +3988,8 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = useTooltip({}, state);
-  const classNames2 = useClassNames38({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ React85.createElement(
+  const classNames2 = useClassNames39({ component: "Tooltip", variant, size });
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       ...tooltipProps,
@@ -4000,8 +3998,8 @@ var Tooltip = ({ children, variant, size }) => {
       className: cn45("group/tooltip", classNames2.container),
       "data-placement": placement
     },
-    /* @__PURE__ */ React85.createElement("div", null, children),
-    /* @__PURE__ */ React85.createElement(
+    /* @__PURE__ */ React.createElement("div", null, children),
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         ...arrowProps,
@@ -4016,23 +4014,23 @@ Tooltip.Trigger = TooltipTrigger;
 import { Item as Item6 } from "@react-stately/collections";
 
 // src/TagGroup/TagGroup.tsx
-import React87, { useRef as useRef28 } 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";
 
 // src/TagGroup/Tag.tsx
-import React86 from "react";
-import { useTag } from "@react-aria/tag";
+import React4 from "react";
 import { useFocusRing as useFocusRing20 } from "@react-aria/focus";
-import { cn as cn46, useClassNames as useClassNames39 } from "@marigold/system";
+import { useTag } from "@react-aria/tag";
 import { mergeProps as mergeProps23 } from "@react-aria/utils";
+import { cn as cn46, useClassNames as useClassNames40 } from "@marigold/system";
 var Tag = ({ variant, size, item, state, ...rest }) => {
   const props = {
     item,
     ...rest
   };
-  let ref = React86.useRef(null);
+  let ref = React4.useRef(null);
   let { focusProps } = useFocusRing20({ within: true });
   const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = useTag(
     {
@@ -4042,22 +4040,22 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     state,
     ref
   );
-  const classNames2 = useClassNames39({ component: "Tag", variant, size });
-  return /* @__PURE__ */ React86.createElement(
+  const classNames2 = useClassNames40({ component: "Tag", variant, size });
+  return /* @__PURE__ */ React4.createElement(
     "span",
     {
       ref,
       ...mergeProps23(rowProps, focusProps),
       className: classNames2.tag
     },
-    /* @__PURE__ */ React86.createElement("div", { ...gridCellProps, className: classNames2.gridCell }, /* @__PURE__ */ React86.createElement("span", null, item.rendered), allowsRemoving && /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React4.createElement("div", { ...gridCellProps, className: classNames2.gridCell }, /* @__PURE__ */ React4.createElement("span", null, item.rendered), allowsRemoving && /* @__PURE__ */ React4.createElement(
       Button,
       {
         ...removeButtonProps,
         className: cn46("flex items-center", classNames2.closeButton),
         role: "button"
       },
-      /* @__PURE__ */ React86.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20 }, /* @__PURE__ */ React86.createElement("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" }))
+      /* @__PURE__ */ React4.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20 }, /* @__PURE__ */ React4.createElement("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" }))
     ))
   );
 };
@@ -4075,14 +4073,14 @@ var TagGroup = ({
     validationState: error ? "invalid" : "valid",
     ...rest
   };
-  const inputRef = useRef28(null);
+  const inputRef = useRef29(null);
   const state = useListState(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = useTagGroup(props, state, inputRef);
   const stateProps = useStateProps28({
     error,
     required
   });
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React.createElement(
     FieldBase,
     {
       width,
@@ -4096,14 +4094,14 @@ var TagGroup = ({
       stateProps,
       ...gridProps
     },
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React.createElement(
       "div",
       {
         role: "presentation",
         ref: inputRef,
         className: "flex flex-wrap items-start gap-1"
       },
-      [...state.collection].map((item) => /* @__PURE__ */ React87.createElement(
+      [...state.collection].map((item) => /* @__PURE__ */ React.createElement(
         Tag,
         {
           ...item.props,
@@ -4124,9 +4122,9 @@ var Tag2 = Item6;
 Tag2.Group = TagGroup;
 
 // src/XLoader/XLoader.tsx
+import { forwardRef as forwardRef18 } from "react";
 import { SVG as SVG6 } from "@marigold/system";
-import React88, { forwardRef as forwardRef18 } from "react";
-var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement(
+var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React.createElement(
   SVG6,
   {
     id: "XLoader",
@@ -4136,14 +4134,14 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
     ...props,
     ...ref
   },
-  /* @__PURE__ */ React88.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_5_",
       d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4155,13 +4153,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_18_",
       d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4173,13 +4171,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_19_",
       d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4191,13 +4189,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_20_",
       d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4209,13 +4207,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_21_",
       d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4227,13 +4225,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_22_",
       d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z"
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4245,13 +4243,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_23_",
       d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4263,13 +4261,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_24_",
       d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4281,13 +4279,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_25_",
       d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4299,13 +4297,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_26_",
       d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4317,13 +4315,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React.createElement(
     "path",
     {
       id: "XMLID_27_",
       d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z"
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4338,19 +4336,11 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
 ));
 
 // src/Tabs/Tabs.tsx
-import React91 from "react";
+import { useRef as useRef32 } from "react";
 import { useTabList } from "@react-aria/tabs";
-import { cn as cn48, useClassNames as useClassNames40, gapSpace as gapSpace8 } from "@marigold/system";
+import { Item as Item7 } from "@react-stately/collections";
 import { useTabListState } from "@react-stately/tabs";
-import { useRef as useRef31 } from "react";
-
-// src/Tabs/Tab.tsx
-import React89 from "react";
-import { useRef as useRef29 } from "react";
-import { cn as cn47, useStateProps as useStateProps29 } from "@marigold/system";
-import { useTab } from "@react-aria/tabs";
-import { useFocus, useHover as useHover14 } from "@react-aria/interactions";
-import { mergeProps as mergeProps24 } from "@react-aria/utils";
+import { cn as cn49, gapSpace as gapSpace8, useClassNames as useClassNames41 } from "@marigold/system";
 
 // src/Tabs/Context.ts
 import { createContext as createContext10, useContext as useContext10 } from "react";
@@ -4358,9 +4348,14 @@ var TabContext = createContext10({});
 var useTabContext = () => useContext10(TabContext);
 
 // src/Tabs/Tab.tsx
+import { useRef as useRef30 } from "react";
+import { useFocus, useHover as useHover14 } 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";
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
-  const ref = useRef29(null);
+  const ref = useRef30(null);
   const { tabProps, isSelected } = useTab({ key }, state, ref);
   const disabled = tabProps["aria-disabled"];
   const { hoverProps, isHovered } = useHover14({
@@ -4369,7 +4364,7 @@ var Tab = ({ item, state }) => {
   const { focusProps } = useFocus({});
   const stateProps = useStateProps29({ active: isSelected, hover: isHovered });
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ React89.createElement(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cn47(
@@ -4384,18 +4379,19 @@ var Tab = ({ item, state }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-import React90 from "react";
-import { useRef as useRef30 } from "react";
+import { useRef as useRef31 } from "react";
 import { useTabPanel } from "@react-aria/tabs";
+import { cn as cn48 } from "@marigold/system";
 var TabPanel = ({ state, ...props }) => {
   var _a;
-  const ref = useRef30(null);
+  const ref = useRef31(null);
   const { tabPanelProps } = useTabPanel(props, state, ref);
-  return /* @__PURE__ */ React90.createElement("div", { ...tabPanelProps, ref }, (_a = state.selectedItem) == null ? void 0 : _a.props.children);
+  const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
+  const { classNames: classNames2 } = useTabContext();
+  return /* @__PURE__ */ React.createElement("div", { className: cn48(classNames2.tabpanel), ref, ...tabPanelProps }, selectedItemProps == null ? void 0 : selectedItemProps.children);
 };
 
 // src/Tabs/Tabs.tsx
-import { Item as Item7 } from "@react-stately/collections";
 var Tabs = ({
   space = 2,
   size = "medium",
@@ -4404,29 +4400,29 @@ var Tabs = ({
   ...rest
 }) => {
   var _a;
-  const ref = useRef31(null);
+  const ref = useRef32(null);
   const props = {
     isDisabled: disabled,
     ...rest
   };
   const state = useTabListState(props);
   const { tabListProps } = useTabList(props, state, ref);
-  const classNames2 = useClassNames40({
+  const classNames2 = useClassNames41({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ React91.createElement(TabContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React.createElement(TabContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React.createElement("div", { className: cn49(classNames2.container) }, /* @__PURE__ */ React.createElement(
     "div",
     {
-      className: cn48("flex", gapSpace8[space], classNames2.tabs),
+      className: cn49("flex", gapSpace8[space], classNames2.tabs),
       ...tabListProps,
       ref
     },
     [...state.collection].map((item) => {
-      return /* @__PURE__ */ React91.createElement(Tab, { key: item.key, item, state });
+      return /* @__PURE__ */ React.createElement(Tab, { key: item.key, item, state });
     })
-  ), /* @__PURE__ */ React91.createElement(TabPanel, { key: (_a = state.selectedItem) == null ? void 0 : _a.key, state }));
+  ), /* @__PURE__ */ React.createElement(TabPanel, { key: (_a = state.selectedItem) == null ? void 0 : _a.key, state })));
 };
 Tabs.Item = Item7;
 export {
@@ -4476,6 +4472,7 @@ export {
   Overlay,
   Popover,
   Radio,
+  RadioGroup,
   Select,
   Slider,
   Split,