@marigold/components 6.0.0 → 6.1.0

package/dist/index.mjs

@@ -2,12 +2,12 @@
 import { useAsyncList, useListData } from "@react-stately/data";
 
 // src/Accordion/Accordion.tsx
-import React5, { Children, useRef as useRef2 } from "react";
+import React6, { Children, useRef as useRef2 } from "react";
 import { useAccordion } from "@react-aria/accordion";
 import { Item } from "@react-stately/collections";
 
 // src/Accordion/AccordionItem.tsx
-import React4, { useRef } from "react";
+import React5, { 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";
@@ -108,7 +108,7 @@ function useAccordionItem(props, state, ref) {
 }
 
 // src/Button/Button.tsx
-import React, { forwardRef } from "react";
+import React2, { forwardRef } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
 import { useFocusRing } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
@@ -168,7 +168,7 @@ var Button = forwardRef(
       focusVisible: isFocusVisible,
       hover: isHovered
     });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React2.createElement(
       Component,
       {
         ...mergeProps2(buttonProps, focusProps, hoverProps, props),
@@ -186,17 +186,17 @@ var Button = forwardRef(
 );
 
 // src/Chevron/ChevronUp.tsx
-import React2, { forwardRef as forwardRef2 } from "react";
+import React3, { 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" }))
+  ({ className, ...props }, ref) => /* @__PURE__ */ React3.createElement(SVG, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React3.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 React4, { 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" }))
+  ({ className, ...props }, ref) => /* @__PURE__ */ React4.createElement(SVG2, { className, ...props, viewBox: "0 0 24 24", ref }, /* @__PURE__ */ React4.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
@@ -213,7 +213,7 @@ var AccordionItem = ({
     item.key.toString().replace(".$", "")
   );
   const expanded = state.selectionManager.isSelected(item.key);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (defaultExpanded) {
       if (state.selectionManager.selectionMode === "multiple") {
         state.expandedKeys.forEach((key) => {
@@ -232,7 +232,7 @@ var AccordionItem = ({
     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__ */ React5.createElement("div", { className: "flex flex-col", ...props }, /* @__PURE__ */ React5.createElement(FocusRing, { within: true }, /* @__PURE__ */ React5.createElement(
     Button,
     {
       className: classNames2.button,
@@ -241,8 +241,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__ */ React5.createElement(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ React5.createElement(ChevronDown, { className: "h3 w-6" })
+  )), expanded || defaultExpanded ? /* @__PURE__ */ React5.createElement(
     "div",
     {
       ...mergeProps3(regionProps, focusProps, stateProps),
@@ -259,10 +259,10 @@ var Accordion = ({ children, ...props }) => {
     ...props,
     // we have to do this because JSX childs are not supported
     children: Children.toArray(children).map((child) => {
-      if (!React5.isValidElement(child)) {
+      if (!React6.isValidElement(child)) {
         return child;
       }
-      return React5.cloneElement(child, {
+      return React6.cloneElement(child, {
         hasChildItems: false,
         ...child.props
       });
@@ -278,7 +278,7 @@ var Accordion = ({ children, ...props }) => {
     state,
     ref
   );
-  return /* @__PURE__ */ React5.createElement("div", { ...accordionProps, ref }, [...state.collection].map((item) => /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement("div", { ...accordionProps, ref }, [...state.collection].map((item) => /* @__PURE__ */ React6.createElement(
     AccordionItem,
     {
       key: item.key,
@@ -293,7 +293,7 @@ var Accordion = ({ children, ...props }) => {
 Accordion.Item = Item;
 
 // src/Aside/Aside.tsx
-import React6 from "react";
+import React7 from "react";
 import { cn as cn2, createVar, gapSpace } from "@marigold/system";
 var classNames = {
   aside: "grow basis-[--sideWidth]",
@@ -307,12 +307,12 @@ var Aside = ({
   stretch = true,
   wrap = "50%"
 }) => {
-  const [left, right] = React6.Children.toArray(children);
+  const [left, right] = React7.Children.toArray(children);
   const vars = {
     aside: createVar({ sideWidth }),
     content: createVar({ wrap })
   };
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement(
     "div",
     {
       className: cn2(
@@ -321,7 +321,7 @@ var Aside = ({
         !stretch && "items-start"
       )
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       "div",
       {
         className: classNames[side === "left" ? "aside" : "content"],
@@ -329,7 +329,7 @@ var Aside = ({
       },
       left
     ),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement(
       "div",
       {
         className: classNames[side === "right" ? "aside" : "content"],
@@ -341,13 +341,13 @@ var Aside = ({
 };
 
 // src/Aspect/Aspect.tsx
-import React7 from "react";
+import React8 from "react";
 import { cn as cn3, createVar as createVar2, aspect } from "@marigold/system";
 var Aspect = ({
   ratio = "square",
   maxWidth,
   children
-}) => /* @__PURE__ */ React7.createElement(
+}) => /* @__PURE__ */ React8.createElement(
   "div",
   {
     className: cn3("overflow-hidden", aspect[ratio], "max-w-[var(--maxWidth)]"),
@@ -357,14 +357,14 @@ var Aspect = ({
 );
 
 // src/Autocomplete/Autocomplete.tsx
-import React22, { useRef as useRef7 } from "react";
+import React23, { 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";
 
 // src/FieldBase/FieldBase.tsx
-import React11 from "react";
+import React12 from "react";
 import {
   cn as cn6,
   useClassNames as useClassNames5,
@@ -372,7 +372,7 @@ import {
 } from "@marigold/system";
 
 // src/Label/Label.tsx
-import React8 from "react";
+import React9 from "react";
 import { SVG as SVG3, cn as cn4, createVar as createVar3, useClassNames as useClassNames3 } from "@marigold/system";
 var Label = ({
   as = "label",
@@ -384,7 +384,7 @@ var Label = ({
 }) => {
   const Component = as;
   const classNames2 = useClassNames3({ component: "Label", size, variant });
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     Component,
     {
       ...props,
@@ -392,7 +392,7 @@ var Label = ({
       style: createVar3({ labelWidth })
     },
     children,
-    /* @__PURE__ */ React8.createElement(
+    /* @__PURE__ */ React9.createElement(
       SVG3,
       {
         viewBox: "0 0 24 24",
@@ -400,13 +400,13 @@ var Label = ({
         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" })
+      /* @__PURE__ */ React9.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 React10 from "react";
 import { SVG as SVG4, cn as cn5, useClassNames as useClassNames4 } from "@marigold/system";
 var HelpText = ({
   variant,
@@ -427,32 +427,32 @@ var HelpText = ({
     size,
     className
   });
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     "div",
     {
       ...props,
       ...hasErrorMessage ? errorMessageProps : descriptionProps,
       className: cn5("flex items-center gap-1", classNames2.container)
     },
-    hasErrorMessage ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+    hasErrorMessage ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
       SVG4,
       {
         className: cn5("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__ */ React10.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__ */ React10.createElement(React10.Fragment, null, description)
   );
 };
 
 // src/FieldBase/FieldGroup.tsx
-import React10 from "react";
+import React11 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__ */ React11.createElement(FieldGroupContext.Provider, { value: { labelWidth } }, children);
 };
 
 // src/FieldBase/FieldBase.tsx
@@ -479,14 +479,14 @@ var FieldBase = ({
     variant,
     size
   });
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     "div",
     {
       ...props,
       ...stateProps,
       className: cn6("group/field", twWidth[width], classNames2)
     },
-    label && /* @__PURE__ */ React11.createElement(
+    label && /* @__PURE__ */ React12.createElement(
       Label,
       {
         variant,
@@ -497,7 +497,7 @@ var FieldBase = ({
       label
     ),
     children,
-    hasHelpText && /* @__PURE__ */ React11.createElement(
+    hasHelpText && /* @__PURE__ */ React12.createElement(
       HelpText,
       {
         variant,
@@ -514,7 +514,7 @@ var FieldBase = ({
 };
 
 // src/Input/Input.tsx
-import React12, { cloneElement, forwardRef as forwardRef4 } from "react";
+import React13, { cloneElement, forwardRef as forwardRef4 } from "react";
 import { cn as cn7, useClassNames as useClassNames6 } from "@marigold/system";
 var Input = forwardRef4(
   ({
@@ -548,7 +548,7 @@ var Input = forwardRef4(
       ),
       ...action.props
     }) : null;
-    return /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React13.createElement(
       "div",
       {
         className: "group/input relative flex items-center",
@@ -556,7 +556,7 @@ var Input = forwardRef4(
         "data-action": action && ""
       },
       inputIcon,
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React13.createElement(
         "input",
         {
           ...props,
@@ -578,7 +578,7 @@ var Input = forwardRef4(
 );
 
 // src/ListBox/ListBox.tsx
-import React15, { forwardRef as forwardRef5 } from "react";
+import React16, { forwardRef as forwardRef5 } from "react";
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 import { cn as cn8, useClassNames as useClassNames7 } from "@marigold/system";
 import { useListBox } from "@react-aria/listbox";
@@ -589,11 +589,11 @@ var ListBoxContext = createContext2({});
 var useListBoxContext = () => useContext2(ListBoxContext);
 
 // src/ListBox/ListBoxSection.tsx
-import React14 from "react";
+import React15 from "react";
 import { useListBoxSection } from "@react-aria/listbox";
 
 // src/ListBox/ListBoxOption.tsx
-import React13, { useRef as useRef3 } from "react";
+import React14, { 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 +613,7 @@ var ListBoxOption = ({ item, state }) => {
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "li",
     {
       ref,
@@ -631,7 +631,7 @@ var ListBoxSection = ({ section, state }) => {
     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__ */ React15.createElement("li", { className: classNames2.section, ...itemProps }, section.rendered && /* @__PURE__ */ React15.createElement("div", { className: classNames2.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ React15.createElement("ul", { className: classNames2.list, ...groupProps }, [...section.props.children].map((node) => /* @__PURE__ */ React15.createElement(ListBoxOption, { key: node.key, item: node, state }))));
 };
 
 // src/ListBox/ListBox.tsx
@@ -640,7 +640,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__ */ React16.createElement(ListBoxContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React16.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React16.createElement(
       "ul",
       {
         className: cn8(
@@ -651,24 +651,24 @@ 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__ */ React16.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React16.createElement(ListBoxOption, { key: item.key, item, state })
       )
     )));
   }
 );
 
 // src/Overlay/Modal.tsx
-import React17, { forwardRef as forwardRef6 } from "react";
+import React18, { 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 React17 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__ */ React17.createElement("div", { className: cn9("fixed inset-0 z-40", classNames2), ...props });
 };
 
 // src/Overlay/Modal.tsx
@@ -686,20 +686,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__ */ React18.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React18.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ React18.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__ */ React18.createElement("div", { style: { pointerEvents: "auto" } }, children)
     ));
   }
 );
 
 // src/Overlay/Overlay.tsx
-import React18, { useRef as useRef4 } from "react";
+import React19, { useRef as useRef4 } from "react";
 import {
   Overlay as ReactAriaOverlay
 } from "@react-aria/overlays";
@@ -711,7 +711,7 @@ var Overlay = ({ children, container, open }) => {
   if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ React18.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React19.createElement(
     "div",
     {
       ref: nodeRef,
@@ -724,18 +724,19 @@ var Overlay = ({ children, container, open }) => {
 };
 
 // src/Overlay/Popover.tsx
-import React19, { forwardRef as forwardRef7, useRef as useRef5 } from "react";
+import React20, { forwardRef as forwardRef7, useRef as useRef5 } from "react";
 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__ */ React20.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ React20.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
   }
 );
 var PopoverWrapper = forwardRef7(
@@ -756,11 +757,15 @@ var PopoverWrapper = forwardRef7(
       },
       state
     );
-    return /* @__PURE__ */ React19.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React19.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React19.createElement(
+    const classNames2 = useClassNames9({
+      component: "Popover",
+      variant: placement
+    });
+    return /* @__PURE__ */ React20.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React20.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React20.createElement(
       "div",
       {
         ...popoverProps,
-        className: placement === "top" ? "mb-0.5" : "mt-0.5",
+        className: classNames2,
         style: {
           ...popoverProps.style,
           minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
@@ -768,15 +773,15 @@ var PopoverWrapper = forwardRef7(
         ref,
         role: "presentation"
       },
-      !isNonModal && /* @__PURE__ */ React19.createElement(DismissButton, { onDismiss: state.close }),
+      !isNonModal && /* @__PURE__ */ React20.createElement(DismissButton, { onDismiss: state.close }),
       children,
-      /* @__PURE__ */ React19.createElement(DismissButton, { onDismiss: state.close })
+      /* @__PURE__ */ React20.createElement(DismissButton, { onDismiss: state.close })
     ));
   }
 );
 
 // src/Overlay/Tray.tsx
-import React20 from "react";
+import React21 from "react";
 import { FocusScope as FocusScope3 } from "@react-aria/focus";
 import {
   DismissButton as DismissButton2,
@@ -787,7 +792,7 @@ 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__ */ React21.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React21.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
   }
 );
 var TrayWrapper = forwardRef8(
@@ -800,7 +805,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__ */ React21.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React21.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React21.createElement(
       "div",
       {
         ...modalProps,
@@ -808,15 +813,15 @@ var TrayWrapper = forwardRef8(
         className: "absolute bottom-0 w-full",
         "data-testid": "tray"
       },
-      /* @__PURE__ */ React20.createElement(DismissButton2, { onDismiss: state.close }),
+      /* @__PURE__ */ React21.createElement(DismissButton2, { onDismiss: state.close }),
       children,
-      /* @__PURE__ */ React20.createElement(DismissButton2, { onDismiss: state.close })
+      /* @__PURE__ */ React21.createElement(DismissButton2, { onDismiss: state.close })
     )));
   }
 );
 
 // src/Autocomplete/ClearButton.tsx
-import React21, { useRef as useRef6 } from "react";
+import React22, { useRef as useRef6 } from "react";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useButton as useButton3 } from "@react-aria/button";
@@ -864,7 +869,7 @@ var ClearButton = ({
     focusVisible: isFocusVisible,
     hover: isHovered
   });
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(
     "button",
     {
       ...mergeProps6(buttonProps, focusProps, hoverProps, props),
@@ -875,7 +880,7 @@ var ClearButton = ({
         className
       )
     },
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React22.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -884,13 +889,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__ */ React22.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__ */ React23.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -900,7 +905,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__ */ React23.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,
@@ -954,7 +959,7 @@ var Autocomplete = ({
     state
   );
   const { isDisabled, ...restClearButtonProps } = clearButtonProps;
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
     FieldBase,
     {
       label: props.label,
@@ -965,13 +970,13 @@ var Autocomplete = ({
       disabled,
       width
     },
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React23.createElement(
       Input,
       {
         ...inputProps,
         ref: inputRef,
-        icon: /* @__PURE__ */ React22.createElement(SearchIcon, null),
-        action: state.inputValue !== "" ? /* @__PURE__ */ React22.createElement(
+        icon: /* @__PURE__ */ React23.createElement(SearchIcon, null),
+        action: state.inputValue !== "" ? /* @__PURE__ */ React23.createElement(
           ClearButton,
           {
             preventFocus: true,
@@ -981,7 +986,7 @@ var Autocomplete = ({
         ) : null
       }
     )
-  ), /* @__PURE__ */ React22.createElement(
+  ), /* @__PURE__ */ React23.createElement(
     Popover,
     {
       state,
@@ -990,13 +995,13 @@ var Autocomplete = ({
       scrollRef: listBoxRef,
       isNonModal: true
     },
-    /* @__PURE__ */ React22.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+    /* @__PURE__ */ React23.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
   ));
 };
 Autocomplete.Item = Item2;
 
 // src/ComboBox/ComboBox.tsx
-import React23 from "react";
+import React24 from "react";
 import { useComboBoxState as useComboBoxState2 } from "@react-stately/combobox";
 import { useComboBox } from "@react-aria/combobox";
 import { useFilter as useFilter2 } from "@react-aria/i18n";
@@ -1026,10 +1031,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 = React24.useRef(null);
+  const inputRef = React24.useRef(null);
+  const listBoxRef = React24.useRef(null);
+  const popoverRef = React24.useRef(null);
   const {
     buttonProps: triggerProps,
     inputProps,
@@ -1042,7 +1047,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__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(
     FieldBase,
     {
       label,
@@ -1053,23 +1058,23 @@ var ComboBox = ({
       errorMessageProps,
       width
     },
-    /* @__PURE__ */ React23.createElement(
+    /* @__PURE__ */ React24.createElement(
       Input,
       {
         ...inputProps,
         ref: inputRef,
-        action: /* @__PURE__ */ React23.createElement(
+        action: /* @__PURE__ */ React24.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__ */ React24.createElement(ChevronDown, { className: "h-4 w-4" })
         )
       }
     )
-  ), /* @__PURE__ */ React23.createElement(
+  ), /* @__PURE__ */ React24.createElement(
     Popover,
     {
       state,
@@ -1078,21 +1083,21 @@ var ComboBox = ({
       scrollRef: listBoxRef,
       isNonModal: true
     },
-    /* @__PURE__ */ React23.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+    /* @__PURE__ */ React24.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
   ));
 };
 ComboBox.Item = Item3;
 
 // src/Badge/Badge.tsx
-import React24 from "react";
-import { useClassNames as useClassNames9 } from "@marigold/system";
+import React25 from "react";
+import { useClassNames as useClassNames10 } from "@marigold/system";
 var Badge = ({ variant, size, children, ...props }) => {
-  const classNames2 = useClassNames9({ component: "Badge", variant, size });
-  return /* @__PURE__ */ React24.createElement("div", { ...props, className: classNames2 }, children);
+  const classNames2 = useClassNames10({ component: "Badge", variant, size });
+  return /* @__PURE__ */ React25.createElement("div", { ...props, className: classNames2 }, children);
 };
 
 // src/Breakout/Breakout.tsx
-import React25 from "react";
+import React26 from "react";
 import { cn as cn11, createVar as createVar4, alignment } from "@marigold/system";
 var Breakout = ({
   height,
@@ -1103,7 +1108,7 @@ var Breakout = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     "div",
     {
       className: cn11(
@@ -1121,15 +1126,15 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-import React26 from "react";
-import { useClassNames as useClassNames10 } from "@marigold/system";
+import React27 from "react";
+import { useClassNames as useClassNames11 } from "@marigold/system";
 var Body = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames10({ component: "Body", variant, size });
-  return /* @__PURE__ */ React26.createElement("section", { ...props, className: classNames2 }, children);
+  const classNames2 = useClassNames11({ component: "Body", variant, size });
+  return /* @__PURE__ */ React27.createElement("section", { ...props, className: classNames2 }, children);
 };
 
 // src/Card/Card.tsx
-import React27 from "react";
+import React28 from "react";
 import {
   cn as cn12,
   gapSpace as gapSpace2,
@@ -1140,7 +1145,7 @@ import {
   paddingSpaceX,
   paddingSpaceY,
   paddingTop,
-  useClassNames as useClassNames11
+  useClassNames as useClassNames12
 } from "@marigold/system";
 var Card = ({
   children,
@@ -1156,8 +1161,8 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames2 = useClassNames11({ component: "Card", variant, size });
-  return /* @__PURE__ */ React27.createElement(
+  const classNames2 = useClassNames12({ component: "Card", variant, size });
+  return /* @__PURE__ */ React28.createElement(
     "div",
     {
       ...props,
@@ -1179,7 +1184,7 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-import React28 from "react";
+import React29 from "react";
 import { cn as cn13, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
 var Center = ({
   maxWidth = "100%",
@@ -1187,7 +1192,7 @@ var Center = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React29.createElement(
     "div",
     {
       className: cn13(
@@ -1203,16 +1208,27 @@ var Center = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-import React30, { forwardRef as forwardRef9 } from "react";
+import React31, { 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 React30, { createContext as createContext3, useContext as useContext3 } from "react";
 import { useCheckboxGroup } from "@react-aria/checkbox";
 import {
   useCheckboxGroupState
@@ -1245,7 +1261,7 @@ var CheckboxGroup = ({
     readOnly,
     error
   });
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React30.createElement(
     FieldBase,
     {
       label: props.label,
@@ -1260,13 +1276,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__ */ React30.createElement("div", { role: "presentation", className: "flex flex-col items-start" }, /* @__PURE__ */ React30.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children))
   );
 };
 
 // src/Checkbox/Checkbox.tsx
-import { useClassNames as useClassNames12, cn as cn14 } from "@marigold/system";
-var CheckMark = () => /* @__PURE__ */ React30.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React30.createElement(
+var CheckMark = () => /* @__PURE__ */ React31.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React31.createElement(
   "path",
   {
     fill: "currentColor",
@@ -1274,7 +1289,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__ */ React31.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React31.createElement(
   "path",
   {
     fill: "currentColor",
@@ -1283,7 +1298,7 @@ var IndeterminateMark = () => /* @__PURE__ */ React30.createElement("svg", { wid
   }
 ));
 var Icon = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React31.createElement(
     "div",
     {
       "aria-hidden": "true",
@@ -1296,7 +1311,7 @@ var Icon = ({ className, checked, indeterminate, ...props }) => {
       ),
       ...props
     },
-    indeterminate ? /* @__PURE__ */ React30.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React30.createElement(CheckMark, null) : null
+    indeterminate ? /* @__PURE__ */ React31.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React31.createElement(CheckMark, null) : null
   );
 };
 var Checkbox = forwardRef9(
@@ -1348,10 +1363,11 @@ var Checkbox = forwardRef9(
       }),
       inputRef
     );
-    const classNames2 = useClassNames12({ 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,
@@ -1362,7 +1378,7 @@ var Checkbox = forwardRef9(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ React30.createElement(
+    const component = /* @__PURE__ */ React31.createElement(
       "label",
       {
         className: cn14(
@@ -1372,7 +1388,7 @@ var Checkbox = forwardRef9(
         ...hoverProps,
         ...stateProps
       },
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(
         "input",
         {
           ref: inputRef,
@@ -1381,7 +1397,7 @@ var Checkbox = forwardRef9(
           ...focusProps
         }
       ),
-      /* @__PURE__ */ React30.createElement(
+      /* @__PURE__ */ React31.createElement(
         Icon,
         {
           checked: inputProps.checked,
@@ -1389,18 +1405,19 @@ var Checkbox = forwardRef9(
           className: classNames2.checkbox
         }
       ),
-      props.children && /* @__PURE__ */ React30.createElement("div", { className: classNames2.label }, props.children)
+      props.children && /* @__PURE__ */ React31.createElement("div", { className: classNames2.label }, props.children)
     );
+    return !groupState && labelWidth ? /* @__PURE__ */ React31.createElement(CheckboxField, { labelWidth }, component) : component;
   }
 );
 
 // src/Columns/Columns.tsx
-import React31, {
+import React32, {
   Children as Children2,
   cloneElement as cloneElement2,
   isValidElement
 } from "react";
-import { cn as cn15, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
+import { cn as cn15, createVar as createVar7, gapSpace as gapSpace4 } from "@marigold/system";
 var Columns = ({
   space = 0,
   columns,
@@ -1416,7 +1433,7 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React32.createElement(
     "div",
     {
       className: cn15(
@@ -1426,13 +1443,13 @@ var Columns = ({
       ),
       ...props
     },
-    Children2.map(children, (child, idx) => /* @__PURE__ */ React31.createElement(
+    Children2.map(children, (child, idx) => /* @__PURE__ */ React32.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
     ))
@@ -1440,10 +1457,10 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-import React32 from "react";
+import React33 from "react";
 import {
   cn as cn16,
-  createVar as createVar7,
+  createVar as createVar8,
   placeItems,
   gridColsAlign,
   gridColumn
@@ -1467,7 +1484,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React33.createElement(
     "div",
     {
       className: cn16(
@@ -1476,7 +1493,7 @@ var Container = ({
         gridColsAlign[align],
         gridColumn[align]
       ),
-      style: createVar7({ maxWidth }),
+      style: createVar8({ maxWidth }),
       ...props
     },
     children
@@ -1484,14 +1501,14 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import React37, { useRef as useRef9 } from "react";
+import React38, { 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 useClassNames15 } 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 useClassNames13 } from "@marigold/system";
+import React34 from "react";
+import { cn as cn17, useClassNames as useClassNames15 } from "@marigold/system";
 var Header = ({
   children,
   variant,
@@ -1499,21 +1516,21 @@ var Header = ({
   className,
   ...props
 }) => {
-  const classNames2 = useClassNames13({
+  const classNames2 = useClassNames15({
     component: "Header",
     variant,
     size,
     className
   });
-  return /* @__PURE__ */ React33.createElement("header", { ...props, className: cn17(classNames2) }, children);
+  return /* @__PURE__ */ React34.createElement("header", { ...props, className: cn17(classNames2) }, children);
 };
 
 // src/Headline/Headline.tsx
-import React34 from "react";
+import React35 from "react";
 import {
-  useClassNames as useClassNames14,
+  useClassNames as useClassNames16,
   cn as cn18,
-  createVar as createVar8,
+  createVar as createVar9,
   textAlign,
   useTheme as useTheme2,
   get
@@ -1529,18 +1546,18 @@ var Headline = ({
   ...props
 }) => {
   const theme = useTheme2();
-  const classNames2 = useClassNames14({
+  const classNames2 = useClassNames16({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
   });
   const Component = as;
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React35.createElement(
     Component,
     {
       ...props,
       className: cn18(classNames2, "text-[--color]", textAlign[align]),
-      style: createVar8({
+      style: createVar9({
         color: color && theme.colors && get(
           theme.colors,
           color.replace("-", "."),
@@ -1559,7 +1576,7 @@ var DialogContext = createContext4({});
 var useDialogContext = () => useContext4(DialogContext);
 
 // src/Dialog/DialogTrigger.tsx
-import React35, { useRef as useRef8 } from "react";
+import React36, { useRef as useRef8 } from "react";
 import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState } from "@react-stately/overlays";
 var DialogTrigger = ({
@@ -1567,11 +1584,11 @@ var DialogTrigger = ({
   dismissable = true,
   keyboardDismissable = true
 }) => {
-  const [dialogTrigger, dialog] = React35.Children.toArray(children);
+  const [dialogTrigger, dialog] = React36.Children.toArray(children);
   const dialogTriggerRef = useRef8(null);
   const state = useOverlayTriggerState({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React35.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React36.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React36.createElement(
     PressResponder,
     {
       ref: dialogTriggerRef,
@@ -1579,7 +1596,7 @@ var DialogTrigger = ({
       onPress: state.toggle
     },
     dialogTrigger
-  ), /* @__PURE__ */ React35.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React35.createElement(
+  ), /* @__PURE__ */ React36.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React36.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1593,7 +1610,7 @@ var DialogTrigger = ({
 
 // src/Dialog/DialogController.tsx
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
-import React36 from "react";
+import React37 from "react";
 var DialogController = ({
   children,
   dismissable = true,
@@ -1606,7 +1623,7 @@ var DialogController = ({
     onOpenChange
   });
   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__ */ React37.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React37.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React37.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1628,7 +1645,7 @@ var CloseButton = ({ className }) => {
     },
     ref
   );
-  return /* @__PURE__ */ React37.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement("div", { className: "flex justify-end" }, /* @__PURE__ */ React38.createElement(
     "button",
     {
       className: cn19(
@@ -1638,7 +1655,7 @@ var CloseButton = ({ className }) => {
       ref,
       ...buttonProps
     },
-    /* @__PURE__ */ React37.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React38.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React38.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -1649,9 +1666,9 @@ var CloseButton = ({ className }) => {
   ));
 };
 var addTitleProps = (children, titleProps) => {
-  const childs = React37.Children.toArray(children);
+  const childs = React38.Children.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => React37.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => React38.isValidElement(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1659,7 +1676,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = React37.cloneElement(
+  const titleChild = React38.cloneElement(
     childs[titleIndex],
     titleProps
   );
@@ -1676,35 +1693,35 @@ var Dialog = ({
   const ref = useRef9(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
-  const classNames2 = useClassNames15({ 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__ */ React38.createElement("div", { className: classNames2.container, ...dialogProps }, closeButton && /* @__PURE__ */ React38.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 React39 from "react";
 import { useSeparator } from "@react-aria/separator";
-import { useClassNames as useClassNames16 } from "@marigold/system";
+import { useClassNames as useClassNames18 } from "@marigold/system";
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = useSeparator(props);
-  const classNames2 = useClassNames16({ component: "Divider", variant });
-  return /* @__PURE__ */ React38.createElement("div", { className: classNames2, ...props, ...separatorProps });
+  const classNames2 = useClassNames18({ component: "Divider", variant });
+  return /* @__PURE__ */ React39.createElement("div", { className: classNames2, ...props, ...separatorProps });
 };
 
 // src/Footer/Footer.tsx
-import React39 from "react";
-import { useClassNames as useClassNames17 } from "@marigold/system";
+import React40 from "react";
+import { useClassNames as useClassNames19 } from "@marigold/system";
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames17({ component: "Footer", variant, size });
-  return /* @__PURE__ */ React39.createElement("footer", { ...props, className: classNames2 }, children);
+  const classNames2 = useClassNames19({ component: "Footer", variant, size });
+  return /* @__PURE__ */ React40.createElement("footer", { ...props, className: classNames2 }, children);
 };
 
 // src/Image/Image.tsx
-import React40 from "react";
+import React41 from "react";
 import {
   cn as cn20,
-  useClassNames as useClassNames18,
+  useClassNames as useClassNames20,
   objectFit,
   objectPosition
 } from "@marigold/system";
@@ -1715,8 +1732,8 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = useClassNames18({ component: "Image", variant, size });
-  return /* @__PURE__ */ React40.createElement(
+  const classNames2 = useClassNames20({ component: "Image", variant, size });
+  return /* @__PURE__ */ React41.createElement(
     "img",
     {
       ...props,
@@ -1732,7 +1749,7 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import React41 from "react";
+import React42 from "react";
 import {
   gapSpace as gapSpace5,
   alignment as alignment2,
@@ -1747,7 +1764,7 @@ var Inline = ({
   ...props
 }) => {
   var _a2, _b2, _c, _d;
-  return /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React42.createElement(
     "div",
     {
       className: cn21(
@@ -1763,15 +1780,15 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-import React43, { useRef as useRef11 } from "react";
+import React44, { useRef as useRef11 } from "react";
 import { useLocale } from "@react-aria/i18n";
 import { useDateFieldState } from "@react-stately/datepicker";
 import { useDateField } from "@react-aria/datepicker";
 import { createCalendar } from "@internationalized/date";
-import { cn as cn23, useClassNames as useClassNames19, 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 React43, { useRef as useRef10 } from "react";
 import { cn as cn22, useStateProps as useStateProps7 } from "@marigold/system";
 import { useDateSegment } from "@react-aria/datepicker";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
@@ -1793,7 +1810,7 @@ var DateSegment = ({
     focusVisible: isFocused
   });
   const { isPlaceholder, placeholder, text, type, maxValue } = segment;
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React43.createElement(
     "div",
     {
       ...mergeProps7(segmentProps, stateProps, focusProps),
@@ -1809,7 +1826,7 @@ var DateSegment = ({
         minWidth: maxValue != null ? String(maxValue).length + "ch" : void 0
       }
     },
-    /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React43.createElement(
       "span",
       {
         "aria-hidden": "true",
@@ -1820,7 +1837,7 @@ 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__ */ React43.createElement("span", null, isPlaceholder ? "" : type === "month" || type === "day" ? Number(text) < 10 ? "0" + text : text : text)
   );
 };
 
@@ -1862,7 +1879,7 @@ var DateField = ({
     state,
     ref
   );
-  const classNames2 = useClassNames19({ component: "DateField", variant, size });
+  const classNames2 = useClassNames21({ component: "DateField", variant, size });
   const { focusProps, isFocused } = useFocusRing6({
     within: true,
     isTextInput: true,
@@ -1877,7 +1894,7 @@ var DateField = ({
     required,
     focus: isFocused || isPressed
   });
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React44.createElement(
     FieldBase,
     {
       error,
@@ -1893,7 +1910,7 @@ var DateField = ({
       size,
       width
     },
-    /* @__PURE__ */ React43.createElement(
+    /* @__PURE__ */ React44.createElement(
       "div",
       {
         ...mergeProps8(fieldProps, focusProps, stateProps, hoverProps),
@@ -1905,9 +1922,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__ */ React44.createElement("div", { ref, className: "flex basis-full items-center" }, state.segments.map((segment, i) => {
         var _a;
-        return /* @__PURE__ */ React43.createElement(
+        return /* @__PURE__ */ React44.createElement(
           DateSegment,
           {
             className: classNames2.segment,
@@ -1918,7 +1935,7 @@ var DateField = ({
           }
         );
       })),
-      action ? action : /* @__PURE__ */ React43.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React43.createElement(
+      action ? action : /* @__PURE__ */ React44.createElement("div", { className: "flex items-center justify-center" }, /* @__PURE__ */ React44.createElement(
         "svg",
         {
           "data-testid": "action",
@@ -1927,14 +1944,14 @@ 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__ */ React44.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 React50, { useRef as useRef14 } from "react";
 import { useCalendarState } from "@react-stately/calendar";
 import {
   useCalendar
@@ -1943,23 +1960,23 @@ import { useLocale as useLocale3 } from "@react-aria/i18n";
 import { createCalendar as createCalendar2 } from "@internationalized/date";
 
 // src/Calendar/CalendarGrid.tsx
-import React45 from "react";
+import React46 from "react";
 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";
 
 // src/Calendar/CalendarCell.tsx
-import React44, { useRef as useRef12 } from "react";
+import React45, { 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 useClassNames20, useStateProps as useStateProps9 } from "@marigold/system";
+import { cn as cn24, useClassNames as useClassNames22, useStateProps as useStateProps9 } from "@marigold/system";
 import { useHover as useHover5 } from "@react-aria/interactions";
 var CalendarCell = (props) => {
   const ref = useRef12(null);
   const { state } = props;
   let { cellProps, buttonProps, formattedDate, isOutsideVisibleRange } = useCalendarCell(props, state, ref);
-  const classNames2 = useClassNames20({
+  const classNames2 = useClassNames22({
     component: "Calendar"
   });
   const isDisabled = cellProps["aria-disabled"];
@@ -1971,7 +1988,7 @@ var CalendarCell = (props) => {
     hover: isHovered,
     selected: cellProps["aria-selected"]
   });
-  return /* @__PURE__ */ React44.createElement("td", { className: "group/cell", ...cellProps }, /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React45.createElement("td", { className: "group/cell", ...cellProps }, /* @__PURE__ */ React45.createElement(
     "div",
     {
       className: cn24(
@@ -2007,37 +2024,37 @@ var CalendarGrid = ({ state, ...props }) => {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  return /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React46.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__ */ React46.createElement("thead", { ...headerProps }, /* @__PURE__ */ React46.createElement("tr", null, weekDays.map((day, index) => /* @__PURE__ */ React46.createElement("th", { style: { fontWeight: "bolder" }, key: index }, day.substring(0, 2))))),
+    /* @__PURE__ */ React46.createElement("tbody", null, [...new Array(numberOfWeeksInMonth).keys()].map((weekIndex) => /* @__PURE__ */ React46.createElement("tr", { key: weekIndex }, state.getDatesInWeek(weekIndex).map(
+      (date, i) => date ? /* @__PURE__ */ React46.createElement(
         CalendarCell,
         {
           key: i,
           date,
           state
         }
-      ) : /* @__PURE__ */ React45.createElement("td", { key: i })
+      ) : /* @__PURE__ */ React46.createElement("td", { key: i })
     ))))
   );
 };
 
 // src/Calendar/Calendar.tsx
 import { ChevronRight, ChevronLeft } from "@marigold/icons";
-import { cn as cn26, useClassNames as useClassNames22, useStateProps as useStateProps11 } from "@marigold/system";
+import { cn as cn26, useClassNames as useClassNames24, useStateProps as useStateProps11 } from "@marigold/system";
 
 // src/Calendar/MonthDropdown.tsx
-import React47 from "react";
+import React48 from "react";
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
 
 // src/Select/Select.tsx
-import React46, {
+import React47, {
   forwardRef as forwardRef10,
   useRef as useRef13
 } from "react";
@@ -2050,7 +2067,7 @@ import { Item as Item4, Section } from "@react-stately/collections";
 import { mergeProps as mergeProps10, useObjectRef as useObjectRef6 } from "@react-aria/utils";
 import {
   cn as cn25,
-  useClassNames as useClassNames21,
+  useClassNames as useClassNames23,
   useSmallScreen,
   useStateProps as useStateProps10
 } from "@marigold/system";
@@ -2104,7 +2121,7 @@ var Select = forwardRef10(
       buttonRef
     );
     const { focusProps, isFocusVisible } = useFocusRing7();
-    const classNames2 = useClassNames21({ component: "Select", variant, size });
+    const classNames2 = useClassNames23({ component: "Select", variant, size });
     const isSmallScreen = useSmallScreen();
     const stateProps = useStateProps10({
       disabled,
@@ -2113,7 +2130,7 @@ var Select = forwardRef10(
       expanded: state.isOpen,
       required
     });
-    return /* @__PURE__ */ React46.createElement(
+    return /* @__PURE__ */ React47.createElement(
       FieldBase,
       {
         variant,
@@ -2129,7 +2146,7 @@ var Select = forwardRef10(
         stateProps,
         disabled
       },
-      /* @__PURE__ */ React46.createElement(
+      /* @__PURE__ */ React47.createElement(
         HiddenSelect,
         {
           state,
@@ -2139,7 +2156,7 @@ var Select = forwardRef10(
           isDisabled: disabled
         }
       ),
-      /* @__PURE__ */ React46.createElement(
+      /* @__PURE__ */ React47.createElement(
         "button",
         {
           className: cn25(
@@ -2150,10 +2167,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__ */ React47.createElement("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder),
+        /* @__PURE__ */ React47.createElement(ChevronDown, { className: "h-4 w-4" })
       ),
-      isSmallScreen ? /* @__PURE__ */ React46.createElement(Tray, { state }, /* @__PURE__ */ React46.createElement(
+      isSmallScreen ? /* @__PURE__ */ React47.createElement(Tray, { state }, /* @__PURE__ */ React47.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2162,7 +2179,7 @@ var Select = forwardRef10(
           size,
           ...menuProps
         }
-      )) : /* @__PURE__ */ React46.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React46.createElement(
+      )) : /* @__PURE__ */ React47.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React47.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2195,7 +2212,7 @@ var MonthDropdown = ({ state }) => {
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React48.createElement(
     Select,
     {
       "aria-label": "Month",
@@ -2204,13 +2221,13 @@ 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__ */ React48.createElement(Select.Option, { key: i + 1 }, month.substring(0, 3)))
   );
 };
 var MonthDropdown_default = MonthDropdown;
 
 // src/Calendar/YearDropdown.tsx
-import React48 from "react";
+import React49 from "react";
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
 var YearDropdown = ({ state }) => {
   const years = [];
@@ -2230,7 +2247,7 @@ var YearDropdown = ({ state }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ React48.createElement(
+  return /* @__PURE__ */ React49.createElement(
     Select,
     {
       "aria-label": "Year",
@@ -2239,7 +2256,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__ */ React49.createElement(Select.Option, { key: i }, year.formatted))
   );
 };
 var YearDropdown_default = YearDropdown;
@@ -2273,8 +2290,8 @@ var Calendar = ({
   const calendarState = useStateProps11({
     disabled: state.isDisabled
   });
-  const classNames2 = useClassNames22({ component: "Calendar" });
-  return /* @__PURE__ */ React49.createElement(
+  const classNames2 = useClassNames24({ component: "Calendar" });
+  return /* @__PURE__ */ React50.createElement(
     "div",
     {
       tabIndex: -1,
@@ -2286,32 +2303,32 @@ 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__ */ React50.createElement("div", { className: "mb-4 flex items-center gap-[60px]" }, /* @__PURE__ */ React50.createElement("div", { className: "flex min-w-[170px] gap-[9px] [&_div]:flex" }, /* @__PURE__ */ React50.createElement(MonthDropdown_default, { state }), /* @__PURE__ */ React50.createElement(YearDropdown_default, { state })), /* @__PURE__ */ React50.createElement("div", { className: "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1" }, /* @__PURE__ */ React50.createElement(
       Button,
       {
         className: classNames2.calendarControllers,
         ...prevPropsRest,
         disabled: prevIsDisabled
       },
-      /* @__PURE__ */ React49.createElement(ChevronLeft, null)
-    ), /* @__PURE__ */ React49.createElement(
+      /* @__PURE__ */ React50.createElement(ChevronLeft, null)
+    ), /* @__PURE__ */ React50.createElement(
       Button,
       {
         className: classNames2.calendarControllers,
         ...nextPropsRest,
         disabled: nextIsDisabled
       },
-      /* @__PURE__ */ React49.createElement(ChevronRight, null)
+      /* @__PURE__ */ React50.createElement(ChevronRight, null)
     ))),
-    /* @__PURE__ */ React49.createElement(CalendarGrid, { state })
+    /* @__PURE__ */ React50.createElement(CalendarGrid, { state })
   );
 };
 
 // src/DatePicker/DatePicker.tsx
-import React50, { useRef as useRef15 } from "react";
+import React51, { useRef as useRef15 } from "react";
 import { useDatePickerState } from "@react-stately/datepicker";
 import { useDatePicker } from "@react-aria/datepicker";
-import { cn as cn27, useClassNames as useClassNames23, useStateProps as useStateProps12 } from "@marigold/system";
+import { cn as cn27, useClassNames as useClassNames25, useStateProps as useStateProps12 } from "@marigold/system";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
 var DatePicker = ({
   disabled,
@@ -2345,12 +2362,12 @@ var DatePicker = ({
     ref
   );
   const { isDisabled, errorMessage, description, label } = props;
-  const classNames2 = useClassNames23({
+  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__ */ React51.createElement(React51.Fragment, null, /* @__PURE__ */ React51.createElement("div", { className: "flex w-full min-w-[300px]", ...groupProps }, /* @__PURE__ */ React51.createElement(
     DateField,
     {
       ...fieldProps,
@@ -2362,14 +2379,14 @@ var DatePicker = ({
       error,
       description: !state.isOpen && description,
       triggerRef: ref,
-      action: /* @__PURE__ */ React50.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React50.createElement(
+      action: /* @__PURE__ */ React51.createElement("div", { className: classNames2.container }, /* @__PURE__ */ React51.createElement(
         Button,
         {
           ...mergeProps11(buttonProps, stateProps),
           className: cn27("absolute right-0 top-0", classNames2.button),
           disabled: isDisabled
         },
-        /* @__PURE__ */ React50.createElement(
+        /* @__PURE__ */ React51.createElement(
           "svg",
           {
             width: "24",
@@ -2377,15 +2394,15 @@ 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__ */ React51.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__ */ React51.createElement(Popover, { triggerRef: ref, state }, /* @__PURE__ */ React51.createElement(Calendar, { disabled, ...calendarProps })));
 };
 
 // src/Inset/Inset.tsx
-import React51 from "react";
+import React52 from "react";
 import {
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
@@ -2397,7 +2414,7 @@ var Inset = ({
   spaceX = 0,
   spaceY = 0,
   children
-}) => /* @__PURE__ */ React51.createElement(
+}) => /* @__PURE__ */ React52.createElement(
   "div",
   {
     className: cn28(
@@ -2409,9 +2426,9 @@ var Inset = ({
 );
 
 // src/Link/Link.tsx
-import React52, { forwardRef as forwardRef11 } from "react";
+import React53, { forwardRef as forwardRef11 } from "react";
 import { useLink } from "@react-aria/link";
-import { useClassNames as useClassNames24 } from "@marigold/system";
+import { useClassNames as useClassNames26 } from "@marigold/system";
 import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
 var Link = forwardRef11(
   ({
@@ -2435,13 +2452,13 @@ var Link = forwardRef11(
       linkRef
     );
     const Component = as;
-    const classNames2 = useClassNames24({
+    const classNames2 = useClassNames26({
       component: "Link",
       variant,
       size,
       className
     });
-    return /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React53.createElement(
       Component,
       {
         ...props,
@@ -2456,8 +2473,8 @@ var Link = forwardRef11(
 );
 
 // src/List/List.tsx
-import React54 from "react";
-import { useClassNames as useClassNames25 } from "@marigold/system";
+import React55 from "react";
+import { useClassNames as useClassNames27 } from "@marigold/system";
 
 // src/List/Context.ts
 import { createContext as createContext5, useContext as useContext5 } from "react";
@@ -2465,10 +2482,10 @@ var ListContext = createContext5({});
 var useListContext = () => useContext5(ListContext);
 
 // src/List/ListItem.tsx
-import React53 from "react";
+import React54 from "react";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ React53.createElement("li", { ...props, className: classNames2 }, children);
+  return /* @__PURE__ */ React54.createElement("li", { ...props, className: classNames2 }, children);
 };
 
 // src/List/List.tsx
@@ -2480,18 +2497,18 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = useClassNames25({ 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__ */ React55.createElement(Component, { ...props, className: classNames2[as] }, /* @__PURE__ */ React55.createElement(ListContext.Provider, { value: { classNames: classNames2.item } }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import React58, { useRef as useRef18 } from "react";
+import React59, { useRef as useRef18 } from "react";
 import { useMenu } from "@react-aria/menu";
 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 useClassNames27 } from "@marigold/system";
+import { useClassNames as useClassNames29 } from "@marigold/system";
 
 // src/Menu/Context.ts
 import {
@@ -2502,7 +2519,7 @@ var MenuContext = createContext6({});
 var useMenuContext = () => useContext6(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-import React55, { useRef as useRef16 } from "react";
+import React56, { 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";
@@ -2514,7 +2531,7 @@ var MenuTrigger = ({
   onOpenChange,
   children
 }) => {
-  const [menuTrigger, menu] = React55.Children.toArray(children);
+  const [menuTrigger, menu] = React56.Children.toArray(children);
   const menuTriggerRef = useRef16(null);
   const menuRef = useObjectRef8();
   const state = useMenuTriggerState({
@@ -2534,7 +2551,7 @@ var MenuTrigger = ({
     autoFocus: state.focusStrategy
   };
   const isSmallScreen = useSmallScreen2();
-  return /* @__PURE__ */ React55.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React55.createElement(
+  return /* @__PURE__ */ React56.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React56.createElement(
     PressResponder2,
     {
       ...menuTriggerProps,
@@ -2542,11 +2559,11 @@ var MenuTrigger = ({
       isPressed: state.isOpen
     },
     menuTrigger
-  ), isSmallScreen ? /* @__PURE__ */ React55.createElement(Tray, { state }, menu) : /* @__PURE__ */ React55.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
+  ), isSmallScreen ? /* @__PURE__ */ React56.createElement(Tray, { state }, menu) : /* @__PURE__ */ React56.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
 };
 
 // src/Menu/MenuItem.tsx
-import React56, { useRef as useRef17 } from "react";
+import React57, { useRef as useRef17 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
 import { mergeProps as mergeProps12 } from "@react-aria/utils";
@@ -2573,7 +2590,7 @@ var MenuItem = ({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ React56.createElement(
+  return /* @__PURE__ */ React57.createElement(
     "li",
     {
       ref,
@@ -2590,16 +2607,16 @@ var MenuItem = ({
 };
 
 // src/Menu/MenuSection.tsx
-import React57 from "react";
+import React58 from "react";
 import { useMenuSection } from "@react-aria/menu";
-import { useClassNames as useClassNames26 } 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 = useClassNames26({ 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__ */ React58.createElement(React58.Fragment, null, item.key !== state.collection.getFirstKey() && /* @__PURE__ */ React58.createElement("li", null, /* @__PURE__ */ React58.createElement(Divider, { variant: "section" })), /* @__PURE__ */ React58.createElement("ul", { ...itemProps }, item.rendered && /* @__PURE__ */ React58.createElement("span", { ...headingProps, className: className.section }, item.rendered), /* @__PURE__ */ React58.createElement("li", { ...groupProps, className: "pb-1" }, [...item.props.children].map((node) => /* @__PURE__ */ React58.createElement(
     MenuItem,
     {
       key: node.key,
@@ -2620,10 +2637,10 @@ var Menu = ({ variant, size, ...props }) => {
   const state = useTreeState2({ ...ownProps, selectionMode: "none" });
   const { menuProps } = useMenu(ownProps, state, ref);
   useSyncRef({ ref: scrollRef }, ref);
-  const classNames2 = useClassNames27({ 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__ */ React59.createElement("ul", { ref, className: classNames2.container, ...menuProps }, [...state.collection].map((item) => {
     if (item.type === "section") {
-      return /* @__PURE__ */ React58.createElement(
+      return /* @__PURE__ */ React59.createElement(
         MenuSection_default,
         {
           key: item.key,
@@ -2633,7 +2650,7 @@ var Menu = ({ variant, size, ...props }) => {
         }
       );
     }
-    return /* @__PURE__ */ React58.createElement(
+    return /* @__PURE__ */ React59.createElement(
       MenuItem,
       {
         key: item.key,
@@ -2650,24 +2667,24 @@ Menu.Item = Item5;
 Menu.Section = Section2;
 
 // src/Menu/ActionMenu.tsx
-import React59 from "react";
+import React60 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__ */ React60.createElement(Menu.Trigger, null, /* @__PURE__ */ React60.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ React60.createElement(SVG5, { viewBox: "0 0 24 24" }, /* @__PURE__ */ React60.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__ */ React60.createElement(Menu, { ...props }));
 };
 
 // src/Message/Message.tsx
-import React60 from "react";
-import { cn as cn29, useClassNames as useClassNames28 } from "@marigold/system";
+import React61 from "react";
+import { cn as cn29, useClassNames as useClassNames30 } from "@marigold/system";
 var icons = {
-  info: () => /* @__PURE__ */ React60.createElement(
+  info: () => /* @__PURE__ */ React61.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor"
     },
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React61.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2676,14 +2693,14 @@ var icons = {
       }
     )
   ),
-  warning: () => /* @__PURE__ */ React60.createElement(
+  warning: () => /* @__PURE__ */ React61.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor"
     },
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React61.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2692,14 +2709,14 @@ var icons = {
       }
     )
   ),
-  error: () => /* @__PURE__ */ React60.createElement(
+  error: () => /* @__PURE__ */ React61.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor"
     },
-    /* @__PURE__ */ React60.createElement(
+    /* @__PURE__ */ React61.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -2716,9 +2733,9 @@ var Message = ({
   children,
   ...props
 }) => {
-  const classNames2 = useClassNames28({ component: "Message", variant, size });
+  const classNames2 = useClassNames30({ component: "Message", variant, size });
   const Icon3 = icons[variant];
-  return /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React61.createElement(
     "div",
     {
       className: cn29(
@@ -2727,35 +2744,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__ */ React61.createElement("div", { className: cn29("col-span-1 h-5 w-5 self-center", classNames2.icon) }, /* @__PURE__ */ React61.createElement(Icon3, null)),
+    /* @__PURE__ */ React61.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__ */ React61.createElement("div", { className: cn29("col-start-2", classNames2.content) }, children)
   );
 };
 
 // src/NumberField/NumberField.tsx
-import React62, { forwardRef as forwardRef12 } from "react";
+import React63, { 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 { 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 useClassNames29, 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 React62, { 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__ */ React62.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React62.createElement(
   "path",
   {
     fillRule: "evenodd",
@@ -2763,7 +2780,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__ */ React62.createElement("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React62.createElement(
   "path",
   {
     fillRule: "evenodd",
@@ -2788,7 +2805,7 @@ var StepButton = ({
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React61.createElement(
+  return /* @__PURE__ */ React62.createElement(
     "div",
     {
       className: cn30(
@@ -2801,7 +2818,7 @@ var StepButton = ({
       ...mergeProps13(buttonProps, hoverProps),
       ...stateProps
     },
-    /* @__PURE__ */ React61.createElement(Icon3, null)
+    /* @__PURE__ */ React62.createElement(Icon3, null)
   );
 };
 
@@ -2852,12 +2869,12 @@ var NumberField = forwardRef12(
       readOnly,
       required
     });
-    const classNames2 = useClassNames29({
+    const classNames2 = useClassNames31({
       component: "NumberField",
       size,
       variant
     });
-    return /* @__PURE__ */ React62.createElement(
+    return /* @__PURE__ */ React63.createElement(
       FieldBase,
       {
         label: props.label,
@@ -2872,7 +2889,7 @@ var NumberField = forwardRef12(
         size,
         width
       },
-      /* @__PURE__ */ React62.createElement(
+      /* @__PURE__ */ React63.createElement(
         "div",
         {
           "data-group": true,
@@ -2881,7 +2898,7 @@ var NumberField = forwardRef12(
           ...mergeProps14(groupProps, focusProps, hoverProps),
           ...stateProps
         },
-        showStepper && /* @__PURE__ */ React62.createElement(
+        showStepper && /* @__PURE__ */ React63.createElement(
           StepButton,
           {
             className: classNames2.stepper,
@@ -2889,7 +2906,7 @@ var NumberField = forwardRef12(
             ...decrementButtonProps
           }
         ),
-        /* @__PURE__ */ React62.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React62.createElement(
+        /* @__PURE__ */ React63.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React63.createElement(
           Input,
           {
             ref: inputRef,
@@ -2902,7 +2919,7 @@ var NumberField = forwardRef12(
             ...stateProps
           }
         )),
-        showStepper && /* @__PURE__ */ React62.createElement(
+        showStepper && /* @__PURE__ */ React63.createElement(
           StepButton,
           {
             className: classNames2.stepper,
@@ -2919,7 +2936,7 @@ var NumberField = forwardRef12(
 import { useTheme as useTheme4, ThemeProvider as ThemeProvider2 } from "@marigold/system";
 
 // src/Provider/MarigoldProvider.tsx
-import React63 from "react";
+import React64 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   ThemeProvider,
@@ -2932,11 +2949,11 @@ 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__ */ React64.createElement(ThemeProvider, { theme }, isTopLevel ? /* @__PURE__ */ React64.createElement(OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-import React65, {
+import React66, {
   forwardRef as forwardRef13
 } from "react";
 import { useHover as useHover8 } from "@react-aria/interactions";
@@ -2945,7 +2962,7 @@ import { useRadio } from "@react-aria/radio";
 import { mergeProps as mergeProps15, useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import {
   cn as cn33,
-  useClassNames as useClassNames30,
+  useClassNames as useClassNames32,
   useStateProps as useStateProps17
 } from "@marigold/system";
 
@@ -2957,7 +2974,7 @@ var RadioGroupContext = createContext7(
 var useRadioGroupContext = () => useContext7(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import React64 from "react";
+import React65 from "react";
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
 import { cn as cn32, useStateProps as useStateProps16 } from "@marigold/system";
@@ -2986,7 +3003,7 @@ var RadioGroup = ({
     error,
     required
   });
-  return /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React65.createElement(
     FieldBase,
     {
       width,
@@ -3001,7 +3018,7 @@ var RadioGroup = ({
       stateProps,
       ...radioGroupProps
     },
-    /* @__PURE__ */ React64.createElement(
+    /* @__PURE__ */ React65.createElement(
       "div",
       {
         role: "presentation",
@@ -3011,14 +3028,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__ */ React65.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__ */ React66.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ React66.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
+var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ React66.createElement(
   "div",
   {
     className: cn33(
@@ -3028,7 +3045,7 @@ var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ React65.create
     "aria-hidden": "true",
     ...props
   },
-  checked ? /* @__PURE__ */ React65.createElement(Dot, null) : null
+  checked ? /* @__PURE__ */ React66.createElement(Dot, null) : null
 );
 var Radio = forwardRef13(
   ({ width, disabled, ...props }, ref) => {
@@ -3045,7 +3062,7 @@ var Radio = forwardRef13(
       state,
       inputRef
     );
-    const classNames2 = useClassNames30({
+    const classNames2 = useClassNames32({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
@@ -3060,7 +3077,7 @@ var Radio = forwardRef13(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ React65.createElement(
+    return /* @__PURE__ */ React66.createElement(
       "label",
       {
         className: cn33(
@@ -3071,7 +3088,7 @@ var Radio = forwardRef13(
         ),
         ...mergeProps15(hoverProps, stateProps)
       },
-      /* @__PURE__ */ React65.createElement(
+      /* @__PURE__ */ React66.createElement(
         "input",
         {
           ref: inputRef,
@@ -3082,23 +3099,23 @@ 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__ */ React66.createElement(Icon2, { checked: inputProps.checked, className: classNames2.radio }),
+      /* @__PURE__ */ React66.createElement("div", { className: classNames2.label }, props.children)
     );
   }
 );
 Radio.Group = RadioGroup;
 
 // src/Slider/Slider.tsx
-import React67, { forwardRef as forwardRef14 } from "react";
+import React68, { forwardRef as forwardRef14 } from "react";
 import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
 import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
-import { cn as cn35, createVar as createVar9, useClassNames as useClassNames31, useStateProps as useStateProps19 } from "@marigold/system";
+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 React67, { useEffect } from "react";
 import { useSliderThumb } from "@react-aria/slider";
 import { mergeProps as mergeProps16 } from "@react-aria/utils";
 import { cn as cn34, useStateProps as useStateProps18 } from "@marigold/system";
@@ -3110,7 +3127,7 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 var Thumb = ({ state, trackRef, className, ...props }) => {
   const { disabled } = props;
-  const inputRef = React66.useRef(null);
+  const inputRef = React67.useRef(null);
   const { isFocusVisible, focusProps, isFocused } = useFocusRing11();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
   const stateProps = useStateProps18({
@@ -3129,7 +3146,7 @@ var Thumb = ({ state, trackRef, className, ...props }) => {
   useEffect(() => {
     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__ */ React67.createElement("div", { className: cn34("top-1/2", className), ...thumbProps, ...stateProps }, /* @__PURE__ */ React67.createElement(VisuallyHidden, null, /* @__PURE__ */ React67.createElement(
     "input",
     {
       type: "range",
@@ -3154,7 +3171,7 @@ var Slider = forwardRef14(
       state,
       trackRef
     );
-    const classNames2 = useClassNames31({
+    const classNames2 = useClassNames33({
       component: "Slider",
       variant,
       size
@@ -3162,14 +3179,14 @@ var Slider = forwardRef14(
     const sliderState = useStateProps19({
       disabled: props.disabled
     });
-    return /* @__PURE__ */ React67.createElement(
+    return /* @__PURE__ */ React68.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__ */ React68.createElement("div", { className: "flex self-stretch" }, props.children && /* @__PURE__ */ React68.createElement("label", { className: classNames2.label, ...labelProps }, props.children), /* @__PURE__ */ React68.createElement(
         "output",
         {
           className: cn35(
@@ -3180,7 +3197,7 @@ var Slider = forwardRef14(
         },
         state.getThumbValueLabel(0)
       )),
-      /* @__PURE__ */ React67.createElement(
+      /* @__PURE__ */ React68.createElement(
         "div",
         {
           className: "h-8 w-full cursor-pointer data-[disabled]:cursor-not-allowed",
@@ -3188,7 +3205,7 @@ var Slider = forwardRef14(
           ...sliderState,
           ref: trackRef
         },
-        /* @__PURE__ */ React67.createElement(
+        /* @__PURE__ */ React68.createElement(
           "div",
           {
             className: cn35(
@@ -3197,7 +3214,7 @@ var Slider = forwardRef14(
             )
           }
         ),
-        /* @__PURE__ */ React67.createElement(
+        /* @__PURE__ */ React68.createElement(
           Thumb,
           {
             state,
@@ -3212,11 +3229,11 @@ var Slider = forwardRef14(
 );
 
 // src/Split/Split.tsx
-import React68 from "react";
-var Split = (props) => /* @__PURE__ */ React68.createElement("div", { ...props, role: "separator", className: "grow" });
+import React69 from "react";
+var Split = (props) => /* @__PURE__ */ React69.createElement("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-import React69 from "react";
+import React70 from "react";
 import {
   cn as cn36,
   gapSpace as gapSpace6,
@@ -3232,7 +3249,7 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React70.createElement(
     "div",
     {
       className: cn36(
@@ -3249,12 +3266,12 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import React70, { forwardRef as forwardRef15 } from "react";
+import React71, { 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 useClassNames32 } from "@marigold/system";
+import { cn as cn37, createVar as createVar11, useStateProps as useStateProps20, useClassNames as useClassNames34 } from "@marigold/system";
 var Switch = forwardRef15(
   ({
     variant,
@@ -3283,8 +3300,8 @@ var Switch = forwardRef15(
       readOnly,
       focus: isFocusVisible
     });
-    const classNames2 = useClassNames32({ component: "Switch", size, variant });
-    return /* @__PURE__ */ React70.createElement(
+    const classNames2 = useClassNames34({ component: "Switch", size, variant });
+    return /* @__PURE__ */ React71.createElement(
       "label",
       {
         className: cn37(
@@ -3292,10 +3309,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__ */ React71.createElement(
         "input",
         {
           ref: inputRef,
@@ -3304,8 +3321,8 @@ var Switch = forwardRef15(
           ...focusProps
         }
       ),
-      props.children && /* @__PURE__ */ React70.createElement(React70.Fragment, null, props.children),
-      /* @__PURE__ */ React70.createElement(
+      props.children && /* @__PURE__ */ React71.createElement(React71.Fragment, null, props.children),
+      /* @__PURE__ */ React71.createElement(
         "div",
         {
           className: cn37(
@@ -3313,7 +3330,7 @@ var Switch = forwardRef15(
             classNames2.track
           )
         },
-        /* @__PURE__ */ React70.createElement(
+        /* @__PURE__ */ React71.createElement(
           "div",
           {
             className: cn37(
@@ -3332,17 +3349,17 @@ var Switch = forwardRef15(
 );
 
 // src/Table/Table.tsx
-import React79, { useRef as useRef26 } from "react";
+import React80, { useRef as useRef26 } 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 useClassNames34 } 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";
@@ -3350,15 +3367,15 @@ var TableContext = createContext8({});
 var useTableContext = () => useContext8(TableContext);
 
 // src/Table/TableBody.tsx
-import React71 from "react";
+import React72 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React71.createElement("tbody", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ React72.createElement("tbody", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableCell.tsx
-import React72, { useRef as useRef20 } from "react";
+import React73, { useRef as useRef20 } from "react";
 import { useTableCell } from "@react-aria/table";
 import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
 import { mergeProps as mergeProps17 } from "@react-aria/utils";
@@ -3385,7 +3402,7 @@ var TableCell = ({ cell }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing13();
   const stateProps = useStateProps21({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React72.createElement(
+  return /* @__PURE__ */ React73.createElement(
     "td",
     {
       ref,
@@ -3398,7 +3415,7 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React73, { useRef as useRef21 } from "react";
+import React74, { useRef as useRef21 } from "react";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
 import { mergeProps as mergeProps18 } from "@react-aria/utils";
@@ -3441,7 +3458,7 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing14();
   const stateProps = useStateProps22({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React74.createElement(
     "td",
     {
       ref,
@@ -3449,22 +3466,23 @@ var TableCheckboxCell = ({ cell }) => {
       ...mergeProps18(gridCellProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ React73.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ React74.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-import React74, { useRef as useRef22 } from "react";
+import React75, { useRef as useRef22 } 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 { cn as cn39, useStateProps as useStateProps23 } from "@marigold/system";
+import { width as twWidth2 } from "@marigold/system";
 var SortIndicator = ({
   direction = "ascending",
   visible
 }) => {
-  return /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React75.createElement(
     "span",
     {
       role: "presentation",
@@ -3477,7 +3495,10 @@ var SortIndicator = ({
     direction === "ascending" ? "\u25B2" : "\u25BC"
   );
 };
-var TableColumnHeader = ({ column }) => {
+var TableColumnHeader = ({
+  column,
+  width = "auto"
+}) => {
   var _a, _b;
   const ref = useRef22(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -3494,17 +3515,17 @@ var TableColumnHeader = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React75.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(
+    column.props.allowsSorting && /* @__PURE__ */ React75.createElement(
       SortIndicator,
       {
         direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
@@ -3515,35 +3536,35 @@ var TableColumnHeader = ({ column }) => {
 };
 
 // src/Table/TableHeader.tsx
-import React75 from "react";
+import React76 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__ */ React76.createElement("thead", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React76, { useRef as useRef23 } from "react";
+import React77, { useRef as useRef23 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef23(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React76.createElement("tr", { ...rowProps, ref }, children);
+  return /* @__PURE__ */ React77.createElement("tr", { ...rowProps, ref }, children);
 };
 
 // src/Table/TableRow.tsx
-import React77, { useRef as useRef24 } from "react";
+import React78, { useRef as useRef24 } 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 useClassNames33, 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 { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames33({
+  const classNames2 = useClassNames35({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3568,7 +3589,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React77.createElement(
+  return /* @__PURE__ */ React78.createElement(
     "tr",
     {
       ref,
@@ -3586,7 +3607,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React78, { useRef as useRef25 } from "react";
+import React79, { useRef as useRef25 } from "react";
 import { useFocusRing as useFocusRing17 } from "@react-aria/focus";
 import { useHover as useHover11 } from "@react-aria/interactions";
 import {
@@ -3594,8 +3615,15 @@ 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 }) => {
+import {
+  cn as cn41,
+  width as twWidth3,
+  useStateProps as useStateProps25
+} from "@marigold/system";
+var TableSelectAllCell = ({
+  column,
+  width = "auto"
+}) => {
   const ref = useRef25(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
@@ -3612,18 +3640,19 @@ var TableSelectAllCell = ({ column }) => {
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React79.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__ */ React79.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
@@ -3644,18 +3673,18 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames34({
+  const classNames2 = useClassNames36({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React80.createElement(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size }
     },
-    /* @__PURE__ */ React79.createElement(
+    /* @__PURE__ */ React80.createElement(
       "table",
       {
         ref: tableRef,
@@ -3666,17 +3695,31 @@ var 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__ */ React80.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React80.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__ */ React80.createElement(
+            TableSelectAllCell,
+            {
+              width: (_b = column.props) == null ? void 0 : _b.width,
+              key: column.key,
+              column
+            }
+          ) : /* @__PURE__ */ React80.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__ */ React80.createElement(TableBody, null, ...collection.rows.map(
+        (row) => row.type === "item" && /* @__PURE__ */ React80.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__ */ React80.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ React80.createElement(TableCell, { key: cell.key, cell });
           }
         ))
       ))
@@ -3690,15 +3733,15 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React80 from "react";
+import React81 from "react";
 import {
   cn as cn43,
-  createVar as createVar11,
+  createVar as createVar12,
   cursorStyle,
   fontWeight,
   get as get2,
   textAlign as textAlign2,
-  useClassNames as useClassNames35,
+  useClassNames as useClassNames37,
   useTheme as useTheme5,
   textSize,
   textStyle
@@ -3716,12 +3759,12 @@ var Text = ({
   ...props
 }) => {
   const theme = useTheme5();
-  const classNames2 = useClassNames35({
+  const classNames2 = useClassNames37({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ React80.createElement(
+  return /* @__PURE__ */ React81.createElement(
     "p",
     {
       ...props,
@@ -3734,7 +3777,7 @@ var Text = ({
         weight && fontWeight[weight],
         fontSize && textSize[fontSize]
       ),
-      style: createVar11({
+      style: createVar12({
         color: color && theme.colors && get2(
           theme.colors,
           color.replace("-", "."),
@@ -3748,12 +3791,12 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import React81, { forwardRef as forwardRef16 } from "react";
+import React82, { forwardRef as forwardRef16 } from "react";
 import { useHover as useHover12 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing18 } from "@react-aria/focus";
 import { useTextField } from "@react-aria/textfield";
 import { useObjectRef as useObjectRef13 } from "@react-aria/utils";
-import { useClassNames as useClassNames36, useStateProps as useStateProps26 } from "@marigold/system";
+import { useClassNames as useClassNames38, useStateProps as useStateProps26 } from "@marigold/system";
 var TextArea = forwardRef16(
   ({
     variant,
@@ -3789,8 +3832,8 @@ var TextArea = forwardRef16(
       required,
       error
     });
-    const classNames2 = useClassNames36({ component: "TextArea", variant, size });
-    return /* @__PURE__ */ React81.createElement(
+    const classNames2 = useClassNames38({ component: "TextArea", variant, size });
+    return /* @__PURE__ */ React82.createElement(
       FieldBase,
       {
         label,
@@ -3805,7 +3848,7 @@ var TextArea = forwardRef16(
         size,
         width
       },
-      /* @__PURE__ */ React81.createElement(
+      /* @__PURE__ */ React82.createElement(
         "textarea",
         {
           className: classNames2,
@@ -3821,7 +3864,7 @@ var TextArea = forwardRef16(
 );
 
 // src/TextField/TextField.tsx
-import React82, { forwardRef as forwardRef17 } from "react";
+import React83, { forwardRef as forwardRef17 } from "react";
 import { useHover as useHover13 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing19 } from "@react-aria/focus";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
@@ -3854,7 +3897,7 @@ var TextField = forwardRef17(
       readOnly,
       required
     });
-    return /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React83.createElement(
       FieldBase,
       {
         label,
@@ -3869,7 +3912,7 @@ var TextField = forwardRef17(
         size,
         width
       },
-      /* @__PURE__ */ React82.createElement(
+      /* @__PURE__ */ React83.createElement(
         Input,
         {
           ref: inputRef,
@@ -3883,8 +3926,8 @@ 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 React84 from "react";
+import { gapSpace as gapSpace7, cn as cn44, createVar as createVar13 } from "@marigold/system";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3897,7 +3940,7 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React84.createElement(
     "div",
     {
       ...props,
@@ -3907,16 +3950,16 @@ 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 React86 from "react";
 import { useTooltip } from "@react-aria/tooltip";
-import { cn as cn45, useClassNames as useClassNames37 } 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";
@@ -3924,7 +3967,7 @@ var TooltipContext = createContext9({});
 var useTooltipContext = () => useContext9(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React84, { useRef as useRef27 } from "react";
+import React85, { useRef as useRef27 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
@@ -3937,7 +3980,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = React84.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = React85.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -3965,7 +4008,7 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React84.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React84.createElement(
+  return /* @__PURE__ */ React85.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React85.createElement(
     TooltipContext.Provider,
     {
       value: {
@@ -3977,7 +4020,7 @@ var TooltipTrigger = ({
         ...positionProps
       }
     },
-    /* @__PURE__ */ React84.createElement(Overlay, { open: state.isOpen }, tooltip)
+    /* @__PURE__ */ React85.createElement(Overlay, { open: state.isOpen }, tooltip)
   ));
 };
 
@@ -3985,8 +4028,8 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = useTooltip({}, state);
-  const classNames2 = useClassNames37({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ React85.createElement(
+  const classNames2 = useClassNames39({ component: "Tooltip", variant, size });
+  return /* @__PURE__ */ React86.createElement(
     "div",
     {
       ...tooltipProps,
@@ -3995,8 +4038,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__ */ React86.createElement("div", null, children),
+    /* @__PURE__ */ React86.createElement(
       "div",
       {
         ...arrowProps,
@@ -4011,23 +4054,23 @@ Tooltip.Trigger = TooltipTrigger;
 import { Item as Item6 } from "@react-stately/collections";
 
 // src/TagGroup/TagGroup.tsx
-import React87, { useRef as useRef28 } from "react";
+import React88, { useRef as useRef28 } 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 React87 from "react";
 import { useTag } from "@react-aria/tag";
 import { useFocusRing as useFocusRing20 } from "@react-aria/focus";
-import { cn as cn46, useClassNames as useClassNames38 } from "@marigold/system";
+import { cn as cn46, useClassNames as useClassNames40 } from "@marigold/system";
 import { mergeProps as mergeProps23 } from "@react-aria/utils";
 var Tag = ({ variant, size, item, state, ...rest }) => {
   const props = {
     item,
     ...rest
   };
-  let ref = React86.useRef(null);
+  let ref = React87.useRef(null);
   let { focusProps } = useFocusRing20({ within: true });
   const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = useTag(
     {
@@ -4037,22 +4080,22 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     state,
     ref
   );
-  const classNames2 = useClassNames38({ component: "Tag", variant, size });
-  return /* @__PURE__ */ React86.createElement(
+  const classNames2 = useClassNames40({ component: "Tag", variant, size });
+  return /* @__PURE__ */ React87.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__ */ React87.createElement("div", { ...gridCellProps, className: classNames2.gridCell }, /* @__PURE__ */ React87.createElement("span", null, item.rendered), allowsRemoving && /* @__PURE__ */ React87.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__ */ React87.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20 }, /* @__PURE__ */ React87.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" }))
     ))
   );
 };
@@ -4077,7 +4120,7 @@ var TagGroup = ({
     error,
     required
   });
-  return /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React88.createElement(
     FieldBase,
     {
       width,
@@ -4091,14 +4134,14 @@ var TagGroup = ({
       stateProps,
       ...gridProps
     },
-    /* @__PURE__ */ React87.createElement(
+    /* @__PURE__ */ React88.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__ */ React88.createElement(
         Tag,
         {
           ...item.props,
@@ -4120,8 +4163,8 @@ Tag2.Group = TagGroup;
 
 // src/XLoader/XLoader.tsx
 import { SVG as SVG6 } from "@marigold/system";
-import React88, { forwardRef as forwardRef18 } from "react";
-var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement(
+import React89, { forwardRef as forwardRef18 } from "react";
+var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React89.createElement(
   SVG6,
   {
     id: "XLoader",
@@ -4131,14 +4174,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__ */ React89.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+  /* @__PURE__ */ React89.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__ */ React89.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4150,13 +4193,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React89.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__ */ React89.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4168,13 +4211,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React89.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__ */ React89.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4186,13 +4229,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React89.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__ */ React89.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4204,13 +4247,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React89.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__ */ React89.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4222,13 +4265,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React89.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__ */ React89.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4240,13 +4283,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React89.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__ */ React89.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4258,13 +4301,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React89.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__ */ React89.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4276,13 +4319,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React89.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__ */ React89.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4294,13 +4337,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React89.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__ */ React89.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4312,13 +4355,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
       }
     )
   ),
-  /* @__PURE__ */ React88.createElement(
+  /* @__PURE__ */ React89.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__ */ React89.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -4333,19 +4376,12 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ React88.createElement
 ));
 
 // src/Tabs/Tabs.tsx
-import React91 from "react";
+import React92 from "react";
+import { useRef as useRef31 } from "react";
 import { useTabList } from "@react-aria/tabs";
-import { cn as cn48, useClassNames as useClassNames39, 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";
@@ -4353,6 +4389,12 @@ var TabContext = createContext10({});
 var useTabContext = () => useContext10(TabContext);
 
 // src/Tabs/Tab.tsx
+import React90 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";
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
   const ref = useRef29(null);
@@ -4364,7 +4406,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__ */ React90.createElement(
     "div",
     {
       className: cn47(
@@ -4379,18 +4421,20 @@ var Tab = ({ item, state }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-import React90 from "react";
+import React91 from "react";
 import { useRef as useRef30 } 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 { 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__ */ React91.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",
@@ -4406,22 +4450,22 @@ var Tabs = ({
   };
   const state = useTabListState(props);
   const { tabListProps } = useTabList(props, state, ref);
-  const classNames2 = useClassNames39({
+  const classNames2 = useClassNames41({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ React91.createElement(TabContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React92.createElement(TabContext.Provider, { value: { classNames: classNames2 } }, /* @__PURE__ */ React92.createElement("div", { className: cn49(classNames2.container) }, /* @__PURE__ */ React92.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__ */ React92.createElement(Tab, { key: item.key, item, state });
     })
-  ), /* @__PURE__ */ React91.createElement(TabPanel, { key: (_a = state.selectedItem) == null ? void 0 : _a.key, state }));
+  ), /* @__PURE__ */ React92.createElement(TabPanel, { key: (_a = state.selectedItem) == null ? void 0 : _a.key, state })));
 };
 Tabs.Item = Item7;
 export {