@marigold/components 6.5.1 → 6.6.0

package/dist/index.mjs

@@ -977,11 +977,12 @@ import { Button } from "react-aria-components";
 import { cn as cn11, useClassNames as useClassNames9 } from "@marigold/system";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var _Button = forwardRef8(
-  ({ children, variant, size, disabled, fullWidth, ...props }, ref) => {
+  ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
     const classNames2 = useClassNames9({
       component: "Button",
       variant,
-      size
+      size,
+      className
     });
     return /* @__PURE__ */ jsx22(
       Button,
@@ -1263,6 +1264,7 @@ var _Checkbox = forwardRef9(
       isReadOnly: readOnly,
       isRequired: required,
       isInvalid: error,
+      isSelected: checked,
       defaultSelected: defaultChecked,
       ...rest
     };
@@ -1450,24 +1452,25 @@ import {
 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
-import { cn as cn20, useClassNames as useClassNames17 } from "@marigold/system";
+import { cn as cn19, useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/Header/Header.tsx
-import { cn as cn18, useClassNames as useClassNames15 } from "@marigold/system";
+import { Header } from "react-aria-components";
+import { useClassNames as useClassNames15 } from "@marigold/system";
 import { jsx as jsx33 } from "react/jsx-runtime";
-var Header = ({ children, variant, size, ...props }) => {
+var _Header = ({ variant, size, ...props }) => {
   const classNames2 = useClassNames15({
     component: "Header",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx33("header", { ...props, className: cn18(classNames2), children });
+  return /* @__PURE__ */ jsx33(Header, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Headline/Headline.tsx
 import { Heading } from "react-aria-components";
 import {
-  cn as cn19,
+  cn as cn18,
   createVar as createVar8,
   get,
   textAlign,
@@ -1495,7 +1498,7 @@ var _Headline = ({
     {
       level: Number(level),
       ...props,
-      className: cn19(classNames2, "text-[--color]", textAlign[align]),
+      className: cn18(classNames2, "text-[--color]", textAlign[align]),
       style: createVar8({
         color: color && theme.colors && get(
           theme.colors,
@@ -1592,7 +1595,7 @@ var CloseButton = ({ className }) => {
   return /* @__PURE__ */ jsx37("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx37(
     "button",
     {
-      className: cn20(
+      className: cn19(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
@@ -1612,7 +1615,7 @@ var CloseButton = ({ className }) => {
 var addTitleProps = (children, titleProps) => {
   const childs = Children5.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => isValidElement3(child) && (child.type === Header || child.type === _Headline)
+    (child) => isValidElement3(child) && (child.type === _Header || child.type === _Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1665,7 +1668,7 @@ var Footer = ({ children, variant, size, ...props }) => {
 
 // src/Image/Image.tsx
 import {
-  cn as cn21,
+  cn as cn20,
   objectFit,
   objectPosition,
   useClassNames as useClassNames20
@@ -1684,7 +1687,7 @@ var Image = ({
     {
       ...props,
       alt: props.alt,
-      className: cn21(
+      className: cn20(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1697,7 +1700,7 @@ var Image = ({
 // src/Inline/Inline.tsx
 import {
   alignment as alignment2,
-  cn as cn22,
+  cn as cn21,
   gapSpace as gapSpace5
 } from "@marigold/system";
 import { jsx as jsx41 } from "react/jsx-runtime";
@@ -1714,7 +1717,7 @@ var Inline = ({
     "div",
     {
       ...props,
-      className: cn22(
+      className: cn21(
         "flex flex-wrap",
         gapSpace5[space],
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
@@ -1734,14 +1737,14 @@ import { useLocale } from "@react-aria/i18n";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import { useDateFieldState } from "@react-stately/datepicker";
-import { cn as cn24, useClassNames as useClassNames21, useStateProps as useStateProps6 } from "@marigold/system";
+import { cn as cn23, useClassNames as useClassNames21, useStateProps as useStateProps6 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { useRef as useRef10 } from "react";
 import { useDateSegment } from "@react-aria/datepicker";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn23, useStateProps as useStateProps5 } from "@marigold/system";
+import { cn as cn22, useStateProps as useStateProps5 } from "@marigold/system";
 import { jsx as jsx42, jsxs as jsxs16 } from "react/jsx-runtime";
 var DateSegment = ({
   className,
@@ -1765,7 +1768,7 @@ var DateSegment = ({
     {
       ...mergeProps6(segmentProps, stateProps, focusProps),
       ref,
-      className: cn23(
+      className: cn22(
         "group/segment",
         "text-center leading-none outline-0",
         type !== "literal" && "p-0.5",
@@ -1780,7 +1783,7 @@ var DateSegment = ({
           "span",
           {
             "aria-hidden": "true",
-            className: cn23(
+            className: cn22(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
@@ -1863,7 +1866,7 @@ var DateField = ({
         "div",
         {
           ...mergeProps7(fieldProps, focusProps, stateProps, hoverProps),
-          className: cn24(
+          className: cn23(
             "relative flex flex-row flex-nowrap",
             "cursor-text aria-disabled:cursor-not-allowed",
             classNames2.field
@@ -1888,7 +1891,7 @@ var DateField = ({
               "svg",
               {
                 "data-testid": "action",
-                className: cn24(classNames2.action),
+                className: cn23(classNames2.action),
                 viewBox: "0 0 24 24",
                 width: 24,
                 height: 24,
@@ -1904,14 +1907,14 @@ var DateField = ({
 
 // src/Calendar/Calendar.tsx
 import { createCalendar as createCalendar2 } from "@internationalized/date";
-import { useRef as useRef14 } from "react";
+import { useRef as useRef14, useState } from "react";
 import {
   useCalendar
 } from "@react-aria/calendar";
-import { useLocale as useLocale3 } from "@react-aria/i18n";
+import { useDateFormatter as useDateFormatter3, useLocale as useLocale3 } from "@react-aria/i18n";
 import { useCalendarState } from "@react-stately/calendar";
-import { ChevronLeft, ChevronRight } from "@marigold/icons";
-import { cn as cn27, useClassNames as useClassNames24, useStateProps as useStateProps9 } from "@marigold/system";
+import { ChevronDown as ChevronDown2, ChevronLeft, ChevronRight } from "@marigold/icons";
+import { cn as cn25, useClassNames as useClassNames23, useStateProps as useStateProps8 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import { getWeeksInMonth, startOfWeek, today } from "@internationalized/date";
@@ -1925,7 +1928,7 @@ import { useRef as useRef12 } from "react";
 import { useCalendarCell } from "@react-aria/calendar";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import { mergeProps as mergeProps8 } from "@react-aria/utils";
-import { cn as cn25, useClassNames as useClassNames22, useStateProps as useStateProps7 } from "@marigold/system";
+import { cn as cn24, useClassNames as useClassNames22, useStateProps as useStateProps7 } from "@marigold/system";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var CalendarCell = (props) => {
   const ref = useRef12(null);
@@ -1946,7 +1949,7 @@ var CalendarCell = (props) => {
   return /* @__PURE__ */ jsx44("td", { className: "group/cell", ...cellProps, children: /* @__PURE__ */ jsx44(
     "div",
     {
-      className: cn25(
+      className: cn24(
         "flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
         classNames2.calendarCell
       ),
@@ -2003,193 +2006,49 @@ var CalendarGrid = ({ state, ...props }) => {
 };
 
 // src/Calendar/MonthDropdown.tsx
-import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
-
-// src/Select/Select.tsx
-import {
-  forwardRef as forwardRef10,
-  useRef as useRef13
-} from "react";
-import { useButton as useButton4 } from "@react-aria/button";
-import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
-import { useLocalizedStringFormatter } from "@react-aria/i18n";
-import { HiddenSelect, useSelect } from "@react-aria/select";
-import { mergeProps as mergeProps9, useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import { Item as Item4, Section } from "@react-stately/collections";
-import { useSelectState } from "@react-stately/select";
-import {
-  cn as cn26,
-  useClassNames as useClassNames23,
-  useSmallScreen,
-  useStateProps as useStateProps8
-} from "@marigold/system";
-
-// src/Select/intl.ts
-var messages = {
-  "en-US": {
-    placeholder: "Select an option\u2026"
-  },
-  "de-DE": {
-    placeholder: "Option ausw\xE4hlen\u2026"
-  }
-};
-
-// src/Select/Select.tsx
-import { jsx as jsx46, jsxs as jsxs19 } from "react/jsx-runtime";
-var Select = forwardRef10(
-  ({
-    variant,
-    size,
-    width,
-    open,
-    disabled,
-    required,
-    error,
-    onChange,
-    ...rest
-  }, ref) => {
-    const formatMessage = useLocalizedStringFormatter(messages);
-    const props = {
-      isOpen: open,
-      isDisabled: disabled,
-      isRequired: required,
-      validationState: error ? "invalid" : "valid",
-      placeholder: rest.placeholder || formatMessage.format("placeholder"),
-      onSelectionChange: onChange,
-      ...rest
-    };
-    const buttonRef = useObjectRef4(ref);
-    const listboxRef = useRef13(null);
-    const state = useSelectState(props);
-    const {
-      labelProps,
-      triggerProps,
-      valueProps,
-      menuProps,
-      descriptionProps,
-      errorMessageProps
-    } = useSelect(props, state, buttonRef);
-    const { buttonProps } = useButton4(
-      { isDisabled: disabled, ...triggerProps },
-      buttonRef
-    );
-    const { focusProps, isFocusVisible } = useFocusRing5();
-    const classNames2 = useClassNames23({ component: "Select", variant, size });
-    const isSmallScreen = useSmallScreen();
-    const stateProps = useStateProps8({
-      disabled,
-      error,
-      focusVisible: isFocusVisible,
-      expanded: state.isOpen,
-      required
-    });
-    return /* @__PURE__ */ jsxs19(
-      FieldBase,
-      {
-        variant,
-        size,
-        width,
-        label: props.label,
-        labelProps: { elementType: "span", ...labelProps },
-        description: props.description,
-        descriptionProps,
-        error,
-        errorMessage: props.errorMessage,
-        errorMessageProps,
-        stateProps,
-        disabled,
-        children: [
-          /* @__PURE__ */ jsx46(
-            HiddenSelect,
-            {
-              state,
-              triggerRef: buttonRef,
-              label: props.label,
-              name: props.name,
-              isDisabled: disabled
-            }
-          ),
-          /* @__PURE__ */ jsxs19(
-            "button",
-            {
-              className: cn26(
-                "flex w-full items-center justify-between gap-1 overflow-hidden",
-                classNames2.select
-              ),
-              ref: buttonRef,
-              ...mergeProps9(buttonProps, focusProps),
-              ...stateProps,
-              children: [
-                /* @__PURE__ */ jsx46("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
-                /* @__PURE__ */ jsx46(ChevronDown, { className: "h-4 w-4" })
-              ]
-            }
-          ),
-          isSmallScreen ? /* @__PURE__ */ jsx46(Tray, { state, children: /* @__PURE__ */ jsx46(
-            ListBox,
-            {
-              ref: listboxRef,
-              state,
-              variant,
-              size,
-              ...menuProps
-            }
-          ) }) : /* @__PURE__ */ jsx46(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ jsx46(
-            ListBox,
-            {
-              ref: listboxRef,
-              state,
-              variant,
-              size,
-              ...menuProps
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-Select.Option = Item4;
-Select.Section = Section;
-
-// src/Calendar/MonthDropdown.tsx
-import { jsx as jsx47 } from "react/jsx-runtime";
-var MonthDropdown = ({ state }) => {
-  let months = [];
-  let formatter = useDateFormatter2({
-    month: "long",
-    timeZone: state.timeZone
-  });
-  let numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
-  for (let i = 1; i <= numMonths; i++) {
-    let date = state.focusedDate.set({ month: i });
-    months.push(formatter.format(date.toDate(state.timeZone)));
-  }
+import { jsx as jsx46 } from "react/jsx-runtime";
+var MonthDropdown = ({
+  state,
+  setSelectedDropdown,
+  months
+}) => {
   let onChange = (index) => {
-    let value = Number(index);
+    let value = Number(index) + 1;
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx47(
-    Select,
+  return /* @__PURE__ */ jsx46(
+    "ul",
     {
-      "aria-label": "Month",
-      onChange,
-      selectedKey: String(state.focusedDate.month),
-      "data-testid": "month",
-      disabled: state.isDisabled,
-      children: months.map((month, i) => /* @__PURE__ */ jsx47(Select.Option, { children: month.substring(0, 3) }, i + 1))
+      "data-testid": "monthOptions",
+      className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
+      children: months.map((month, index) => {
+        return /* @__PURE__ */ jsx46("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx46(
+          _Button,
+          {
+            variant: index === state.focusedDate.month - 1 ? "secondary" : "text",
+            size: "small",
+            onPress: () => {
+              onChange(index);
+              setSelectedDropdown(void 0);
+            },
+            children: month.substring(0, 3)
+          },
+          index + 1
+        ) }, index);
+      })
     }
   );
 };
 var MonthDropdown_default = MonthDropdown;
 
 // src/Calendar/YearDropdown.tsx
-import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
-import { jsx as jsx48 } from "react/jsx-runtime";
-var YearDropdown = ({ state }) => {
+import { useEffect as useEffect2, useRef as useRef13 } from "react";
+import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var YearDropdown = ({ state, setSelectedDropdown }) => {
   const years = [];
-  let formatter = useDateFormatter3({
+  let formatter = useDateFormatter2({
     year: "numeric",
     timeZone: state.timeZone
   });
@@ -2200,27 +2059,59 @@ var YearDropdown = ({ state }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
+  const activeButtonRef = useRef13(null);
+  useEffect2(() => {
+    if (activeButtonRef.current) {
+      const activeButton = activeButtonRef.current;
+      activeButton == null ? void 0 : activeButton.scrollIntoView({
+        behavior: "instant",
+        block: "center"
+      });
+    }
+  }, [state.focusedDate]);
   let onChange = (key) => {
     let index = Number(key);
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx48(
-    Select,
+  return /* @__PURE__ */ jsx47(
+    "ul",
     {
-      "aria-label": "Year",
-      selectedKey: "20",
-      onChange,
-      "data-testid": "year",
-      disabled: state.isDisabled,
-      children: years.map((year, i) => /* @__PURE__ */ jsx48(Select.Option, { children: year.formatted }, i))
+      "data-testid": "yearOptions",
+      className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
+      children: years.map((year, index) => {
+        const isActive = +year.formatted === state.focusedDate.year;
+        return /* @__PURE__ */ jsx47("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx47(
+          "div",
+          {
+            ref: isActive ? activeButtonRef : null,
+            style: { height: "100%", width: "100%" },
+            children: /* @__PURE__ */ jsx47(
+              _Button,
+              {
+                disabled: state.isDisabled,
+                variant: isActive ? "secondary" : "text",
+                size: "small",
+                onPress: () => {
+                  onChange(index);
+                  setSelectedDropdown(void 0);
+                },
+                "data-value": year.formatted,
+                children: year.formatted
+              },
+              index
+            )
+          }
+        ) }, index);
+      })
     }
   );
 };
 var YearDropdown_default = YearDropdown;
 
 // src/Calendar/Calendar.tsx
-import { jsx as jsx49, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx48, jsxs as jsxs19 } from "react/jsx-runtime";
+var buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
 var Calendar = ({
   disabled,
   readOnly,
@@ -2254,51 +2145,97 @@ var Calendar = ({
     onFocusChange: nextFocusChange,
     ...nextPropsRest
   } = nextButtonProps;
-  const calendarState = useStateProps9({
+  const calendarState = useStateProps8({
     disabled: state.isDisabled,
     focusVisible: state.isFocused
   });
-  const classNames2 = useClassNames24({ component: "Calendar" });
-  return /* @__PURE__ */ jsxs20(
+  const classNames2 = useClassNames23({ component: "Calendar" });
+  const { select: selectClassNames } = useClassNames23({ component: "Select" });
+  const [selectedDropdown, setSelectedDropdown] = useState();
+  let months = [];
+  let formatter = useDateFormatter3({
+    month: "long",
+    timeZone: state.timeZone
+  });
+  let numMonths = state.focusedDate.calendar.getMonthsInYear(state.focusedDate);
+  for (let i = 1; i <= numMonths; i++) {
+    let date = state.focusedDate.set({ month: i });
+    months.push(formatter.format(date.toDate(state.timeZone)));
+  }
+  const selectedValue = {
+    month: months[state.focusedDate.month - 1].substring(0, 3),
+    year: state.focusedDate.year
+  };
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       tabIndex: -1,
-      className: cn27(
-        "flex w-[360px] flex-col rounded-sm p-4 shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
+      className: cn25(
+        "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4  shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
         classNames2.calendar
       ),
       ...calendarProps,
       ...calendarState,
       ref,
-      children: [
-        /* @__PURE__ */ jsxs20("div", { className: "mb-4 flex items-center gap-[60px]", children: [
-          /* @__PURE__ */ jsxs20("div", { className: "flex min-w-[170px] gap-[9px] [&_div]:flex", children: [
-            /* @__PURE__ */ jsx49(MonthDropdown_default, { state }),
-            /* @__PURE__ */ jsx49(YearDropdown_default, { state })
-          ] }),
-          /* @__PURE__ */ jsxs20("div", { className: "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1", children: [
-            /* @__PURE__ */ jsx49(
-              _Button,
+      children: selectedDropdown ? selectedDropdown === "month" ? /* @__PURE__ */ jsx48(
+        MonthDropdown_default,
+        {
+          setSelectedDropdown,
+          months,
+          state
+        }
+      ) : /* @__PURE__ */ jsx48(
+        YearDropdown_default,
+        {
+          setSelectedDropdown,
+          state
+        }
+      ) : /* @__PURE__ */ jsxs19(Fragment5, { children: [
+        /* @__PURE__ */ jsxs19("div", { className: "mb-4 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs19("div", { className: "flex w-full gap-4", children: [
+            /* @__PURE__ */ jsxs19(
+              "button",
               {
-                className: classNames2.calendarControllers,
-                ...prevPropsRest,
-                disabled: prevIsDisabled,
-                children: /* @__PURE__ */ jsx49(ChevronLeft, {})
+                disabled: state.isDisabled,
+                onClick: () => setSelectedDropdown("month"),
+                className: cn25(buttonStyles, selectClassNames),
+                "data-testid": "month",
+                children: [
+                  selectedValue.month,
+                  /* @__PURE__ */ jsx48(ChevronDown2, {})
+                ]
               }
             ),
-            /* @__PURE__ */ jsx49(
-              _Button,
+            /* @__PURE__ */ jsxs19(
+              "button",
               {
-                className: classNames2.calendarControllers,
-                ...nextPropsRest,
-                disabled: nextIsDisabled,
-                children: /* @__PURE__ */ jsx49(ChevronRight, {})
+                disabled: state.isDisabled,
+                onClick: () => setSelectedDropdown("year"),
+                className: cn25(buttonStyles, selectClassNames),
+                "data-testid": "year",
+                children: [
+                  selectedValue.year,
+                  /* @__PURE__ */ jsx48(ChevronDown2, {})
+                ]
               }
             )
-          ] })
+          ] }),
+          /* @__PURE__ */ jsxs19(
+            "div",
+            {
+              className: cn25(
+                "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
+                classNames2.calendarControllers
+              ),
+              children: [
+                /* @__PURE__ */ jsx48(_Button, { ...prevPropsRest, disabled: prevIsDisabled, children: /* @__PURE__ */ jsx48(ChevronLeft, {}) }),
+                /* @__PURE__ */ jsx48(_Button, { ...nextPropsRest, disabled: nextIsDisabled, children: /* @__PURE__ */ jsx48(ChevronRight, {}) })
+              ]
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx49(CalendarGrid, { state })
-      ]
+        /* @__PURE__ */ jsx48(CalendarGrid, { state })
+      ] })
     }
   );
 };
@@ -2306,10 +2243,10 @@ var Calendar = ({
 // src/DatePicker/DatePicker.tsx
 import { useRef as useRef15 } from "react";
 import { useDatePicker } from "@react-aria/datepicker";
-import { mergeProps as mergeProps10 } from "@react-aria/utils";
+import { mergeProps as mergeProps9 } from "@react-aria/utils";
 import { useDatePickerState } from "@react-stately/datepicker";
-import { cn as cn28, useClassNames as useClassNames25, useStateProps as useStateProps10 } from "@marigold/system";
-import { Fragment as Fragment5, jsx as jsx50, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useClassNames as useClassNames24, useStateProps as useStateProps9 } from "@marigold/system";
+import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs20 } from "react/jsx-runtime";
 var DatePicker = ({
   disabled,
   required,
@@ -2334,7 +2271,7 @@ var DatePicker = ({
     ...props
   });
   const ref = useRef15(null);
-  const stateProps = useStateProps10({
+  const stateProps = useStateProps9({
     focus: state.isOpen
   });
   const { groupProps, fieldProps, buttonProps, calendarProps } = useDatePicker(
@@ -2343,13 +2280,13 @@ var DatePicker = ({
     ref
   );
   const { isDisabled, errorMessage, description, label } = props;
-  const classNames2 = useClassNames25({
+  const classNames2 = useClassNames24({
     component: "DatePicker",
     size,
     variant
   });
-  return /* @__PURE__ */ jsxs21(Fragment5, { children: [
-    /* @__PURE__ */ jsx50("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs20(Fragment6, { children: [
+    /* @__PURE__ */ jsx49("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ jsx49(
       DateField,
       {
         ...fieldProps,
@@ -2362,42 +2299,41 @@ var DatePicker = ({
         description: !state.isOpen && description,
         triggerRef: ref,
         width,
-        action: /* @__PURE__ */ jsx50("div", { className: classNames2.container, children: /* @__PURE__ */ jsx50(
+        action: /* @__PURE__ */ jsx49("div", { className: classNames2.container, children: /* @__PURE__ */ jsx49(
           _Button,
           {
-            ...mergeProps10(buttonProps, stateProps),
-            className: cn28("absolute right-0 top-0", classNames2.button),
+            ...mergeProps9(buttonProps, stateProps),
             disabled: isDisabled,
-            children: /* @__PURE__ */ jsx50(
+            children: /* @__PURE__ */ jsx49(
               "svg",
               {
                 width: "24",
                 height: "24",
                 viewBox: "0 0 24 24",
                 fill: "currentColor",
-                children: /* @__PURE__ */ jsx50("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                children: /* @__PURE__ */ jsx49("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__ */ jsx50(Popover, { triggerRef: ref, state, children: /* @__PURE__ */ jsx50(Calendar, { disabled, ...calendarProps }) })
+    state.isOpen && /* @__PURE__ */ jsx49(Popover, { triggerRef: ref, state, children: /* @__PURE__ */ jsx49(Calendar, { disabled, ...calendarProps }) })
   ] });
 };
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn29,
+  cn as cn26,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
-import { jsx as jsx51 } from "react/jsx-runtime";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx51(
+import { jsx as jsx50 } from "react/jsx-runtime";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx50(
   "div",
   {
-    className: cn29(
+    className: cn26(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -2407,23 +2343,23 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx51(
 );
 
 // src/Link/Link.tsx
-import { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef10 } from "react";
 import { Link } from "react-aria-components";
-import { useClassNames as useClassNames26 } from "@marigold/system";
-import { jsx as jsx52 } from "react/jsx-runtime";
-var _Link = forwardRef11(
+import { useClassNames as useClassNames25 } from "@marigold/system";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var _Link = forwardRef10(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = useClassNames26({
+    const classNames2 = useClassNames25({
       component: "Link",
       variant,
       size
     });
-    return /* @__PURE__ */ jsx52(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ jsx51(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-import { useClassNames as useClassNames27 } from "@marigold/system";
+import { useClassNames as useClassNames26 } from "@marigold/system";
 
 // src/List/Context.ts
 import { createContext as createContext5, useContext as useContext5 } from "react";
@@ -2431,14 +2367,14 @@ var ListContext = createContext5({});
 var useListContext = () => useContext5(ListContext);
 
 // src/List/ListItem.tsx
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ jsx53("li", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx52("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -2447,8 +2383,8 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = useClassNames27({ component: "List", variant, size });
-  return /* @__PURE__ */ jsx54(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx54(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
+  const classNames2 = useClassNames26({ component: "List", variant, size });
+  return /* @__PURE__ */ jsx53(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx53(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
@@ -2456,9 +2392,9 @@ List.Item = ListItem;
 import { useRef as useRef18 } from "react";
 import { useMenu } from "@react-aria/menu";
 import { useSyncRef } from "@react-aria/utils";
-import { Item as Item5, Section as Section2 } from "@react-stately/collections";
+import { Item as Item4, Section } from "@react-stately/collections";
 import { useTreeState as useTreeState2 } from "@react-stately/tree";
-import { useClassNames as useClassNames29 } from "@marigold/system";
+import { useClassNames as useClassNames28 } from "@marigold/system";
 
 // src/Menu/Context.ts
 import {
@@ -2470,11 +2406,11 @@ var useMenuContext = () => useContext6(MenuContext);
 
 // src/Menu/MenuItem.tsx
 import { useRef as useRef16 } from "react";
-import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
-import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { useStateProps as useStateProps11 } from "@marigold/system";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { mergeProps as mergeProps10 } from "@react-aria/utils";
+import { useStateProps as useStateProps10 } from "@marigold/system";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var MenuItem = ({
   item,
   state,
@@ -2492,17 +2428,17 @@ var MenuItem = ({
     state,
     ref
   );
-  const { isFocusVisible, focusProps } = useFocusRing6();
-  const stateProps = useStateProps11({
+  const { isFocusVisible, focusProps } = useFocusRing5();
+  const stateProps = useStateProps10({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx54(
     "li",
     {
       ref,
       className,
-      ...mergeProps11(
+      ...mergeProps10(
         props,
         { onPointerDown: onPointerUp },
         stateProps,
@@ -2515,19 +2451,19 @@ var MenuItem = ({
 
 // src/Menu/MenuSection.tsx
 import { useMenuSection } from "@react-aria/menu";
-import { useClassNames as useClassNames28 } from "@marigold/system";
-import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useClassNames as useClassNames27 } from "@marigold/system";
+import { Fragment as Fragment7, jsx as jsx55, jsxs as jsxs21 } from "react/jsx-runtime";
 var MenuSection = ({ onAction, item, state }) => {
   let { itemProps, headingProps, groupProps } = useMenuSection({
     heading: item.rendered,
     "aria-label": item["aria-label"]
   });
-  const className = useClassNames28({ component: "Menu" });
-  return /* @__PURE__ */ jsxs22(Fragment6, { children: [
-    item.key !== state.collection.getFirstKey() && /* @__PURE__ */ jsx56("li", { children: /* @__PURE__ */ jsx56(_Divider, { variant: "section" }) }),
-    /* @__PURE__ */ jsxs22("li", { ...itemProps, children: [
-      item.rendered && /* @__PURE__ */ jsx56("span", { ...headingProps, className: className.section, children: item.rendered }),
-      /* @__PURE__ */ jsx56("ul", { ...groupProps, className: "pb-1", children: [...item.props.children].map((node) => /* @__PURE__ */ jsx56(
+  const className = useClassNames27({ component: "Menu" });
+  return /* @__PURE__ */ jsxs21(Fragment7, { children: [
+    item.key !== state.collection.getFirstKey() && /* @__PURE__ */ jsx55("li", { children: /* @__PURE__ */ jsx55(_Divider, { variant: "section" }) }),
+    /* @__PURE__ */ jsxs21("li", { ...itemProps, children: [
+      item.rendered && /* @__PURE__ */ jsx55("span", { ...headingProps, className: className.section, children: item.rendered }),
+      /* @__PURE__ */ jsx55("ul", { ...groupProps, className: "pb-1", children: [...item.props.children].map((node) => /* @__PURE__ */ jsx55(
         MenuItem,
         {
           item: node,
@@ -2546,10 +2482,10 @@ var MenuSection_default = MenuSection;
 import { Children as Children6, useRef as useRef17 } from "react";
 import { PressResponder as PressResponder2 } from "@react-aria/interactions";
 import { useMenuTrigger } from "@react-aria/menu";
-import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
 import { useMenuTriggerState } from "@react-stately/menu";
-import { useSmallScreen as useSmallScreen2 } from "@marigold/system";
-import { jsx as jsx57, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useSmallScreen } from "@marigold/system";
+import { jsx as jsx56, jsxs as jsxs22 } from "react/jsx-runtime";
 var MenuTrigger = ({
   disabled,
   open,
@@ -2558,7 +2494,7 @@ var MenuTrigger = ({
 }) => {
   const [menuTrigger, menu] = Children6.toArray(children);
   const menuTriggerRef = useRef17(null);
-  const menuRef = useObjectRef5();
+  const menuRef = useObjectRef4();
   const state = useMenuTriggerState({
     isOpen: open,
     onOpenChange
@@ -2575,9 +2511,9 @@ var MenuTrigger = ({
     onClose: state.close,
     autoFocus: state.focusStrategy
   };
-  const isSmallScreen = useSmallScreen2();
-  return /* @__PURE__ */ jsxs23(MenuContext.Provider, { value: menuContext, children: [
-    /* @__PURE__ */ jsx57(
+  const isSmallScreen = useSmallScreen();
+  return /* @__PURE__ */ jsxs22(MenuContext.Provider, { value: menuContext, children: [
+    /* @__PURE__ */ jsx56(
       PressResponder2,
       {
         ...menuTriggerProps,
@@ -2586,12 +2522,12 @@ var MenuTrigger = ({
         children: menuTrigger
       }
     ),
-    isSmallScreen ? /* @__PURE__ */ jsx57(Tray, { state, children: menu }) : /* @__PURE__ */ jsx57(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state, children: menu })
+    isSmallScreen ? /* @__PURE__ */ jsx56(Tray, { state, children: menu }) : /* @__PURE__ */ jsx56(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state, children: menu })
   ] });
 };
 
 // src/Menu/Menu.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
@@ -2599,10 +2535,10 @@ var Menu = ({ variant, size, ...props }) => {
   const state = useTreeState2({ ...ownProps, selectionMode: "none" });
   const { menuProps } = useMenu(ownProps, state, ref);
   useSyncRef({ ref: scrollRef }, ref);
-  const classNames2 = useClassNames29({ component: "Menu", variant, size });
-  return /* @__PURE__ */ jsx58("ul", { ref, className: classNames2.container, ...menuProps, children: [...state.collection].map((item) => {
+  const classNames2 = useClassNames28({ component: "Menu", variant, size });
+  return /* @__PURE__ */ jsx57("ul", { ref, className: classNames2.container, ...menuProps, children: [...state.collection].map((item) => {
     if (item.type === "section") {
-      return /* @__PURE__ */ jsx58(
+      return /* @__PURE__ */ jsx57(
         MenuSection_default,
         {
           item,
@@ -2612,7 +2548,7 @@ var Menu = ({ variant, size, ...props }) => {
         item.key
       );
     }
-    return /* @__PURE__ */ jsx58(
+    return /* @__PURE__ */ jsx57(
       MenuItem,
       {
         item,
@@ -2625,30 +2561,30 @@ var Menu = ({ variant, size, ...props }) => {
   }) });
 };
 Menu.Trigger = MenuTrigger;
-Menu.Item = Item5;
-Menu.Section = Section2;
+Menu.Item = Item4;
+Menu.Section = Section;
 
 // src/Menu/ActionMenu.tsx
 import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs23 } from "react/jsx-runtime";
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ jsxs24(Menu.Trigger, { children: [
-    /* @__PURE__ */ jsx59(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ jsx59(SVG5, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx59("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
-    /* @__PURE__ */ jsx59(Menu, { ...props })
+  return /* @__PURE__ */ jsxs23(Menu.Trigger, { children: [
+    /* @__PURE__ */ jsx58(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ jsx58(SVG5, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx58("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__ */ jsx58(Menu, { ...props })
   ] });
 };
 
 // src/Message/Message.tsx
-import { cn as cn30, useClassNames as useClassNames30 } from "@marigold/system";
-import { jsx as jsx60, jsxs as jsxs25 } from "react/jsx-runtime";
+import { cn as cn27, useClassNames as useClassNames29 } from "@marigold/system";
+import { jsx as jsx59, jsxs as jsxs24 } from "react/jsx-runtime";
 var icons = {
-  info: () => /* @__PURE__ */ jsx60(
+  info: () => /* @__PURE__ */ jsx59(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx60(
+      children: /* @__PURE__ */ jsx59(
         "path",
         {
           fillRule: "evenodd",
@@ -2658,13 +2594,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx60(
+  warning: () => /* @__PURE__ */ jsx59(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx60(
+      children: /* @__PURE__ */ jsx59(
         "path",
         {
           fillRule: "evenodd",
@@ -2674,13 +2610,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx60(
+  error: () => /* @__PURE__ */ jsx59(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx60(
+      children: /* @__PURE__ */ jsx59(
         "path",
         {
           fillRule: "evenodd",
@@ -2698,49 +2634,49 @@ var Message = ({
   children,
   ...props
 }) => {
-  const classNames2 = useClassNames30({ component: "Message", variant, size });
+  const classNames2 = useClassNames29({ component: "Message", variant, size });
   const Icon3 = icons[variant];
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
-      className: cn30(
+      className: cn27(
         "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
         classNames2.container
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx60("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx60(Icon3, {}) }),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx59("div", { className: cn27("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx59(Icon3, {}) }),
+        /* @__PURE__ */ jsx59(
           "div",
           {
-            className: cn30("col-start-2 row-start-1 self-center", classNames2.title),
+            className: cn27("col-start-2 row-start-1 self-center", classNames2.title),
             children: messageTitle
           }
         ),
-        /* @__PURE__ */ jsx60("div", { className: cn30("col-start-2", classNames2.content), children })
+        /* @__PURE__ */ jsx59("div", { className: cn27("col-start-2", classNames2.content), children })
       ]
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { forwardRef as forwardRef12 } from "react";
-import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
+import { forwardRef as forwardRef11 } from "react";
+import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 import { useLocale as useLocale4 } from "@react-aria/i18n";
 import { useHover as useHover5 } from "@react-aria/interactions";
 import { useNumberField } from "@react-aria/numberfield";
-import { mergeProps as mergeProps13, useObjectRef as useObjectRef6 } from "@react-aria/utils";
+import { mergeProps as mergeProps12, useObjectRef as useObjectRef5 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
-import { cn as cn32, useClassNames as useClassNames31, useStateProps as useStateProps13 } from "@marigold/system";
+import { cn as cn29, useClassNames as useClassNames30, useStateProps as useStateProps12 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { useRef as useRef19 } from "react";
-import { useButton as useButton5 } from "@react-aria/button";
+import { useButton as useButton4 } from "@react-aria/button";
 import { useHover as useHover4 } from "@react-aria/interactions";
-import { mergeProps as mergeProps12 } from "@react-aria/utils";
-import { cn as cn31, useStateProps as useStateProps12 } from "@marigold/system";
-import { jsx as jsx61 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx61("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx61(
+import { mergeProps as mergeProps11 } from "@react-aria/utils";
+import { cn as cn28, useStateProps as useStateProps11 } from "@marigold/system";
+import { jsx as jsx60 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx60("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx60(
   "path",
   {
     fillRule: "evenodd",
@@ -2748,7 +2684,7 @@ var Plus = () => /* @__PURE__ */ jsx61("svg", { width: 16, height: 16, viewBox:
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ jsx61("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx61(
+var Minus = () => /* @__PURE__ */ jsx60("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx60(
   "path",
   {
     fillRule: "evenodd",
@@ -2762,37 +2698,37 @@ var StepButton = ({
   ...props
 }) => {
   const ref = useRef19(null);
-  const { buttonProps, isPressed } = useButton5(
+  const { buttonProps, isPressed } = useButton4(
     { ...props, elementType: "div" },
     ref
   );
   const { hoverProps, isHovered } = useHover4(props);
-  const stateProps = useStateProps12({
+  const stateProps = useStateProps11({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx60(
     "div",
     {
-      className: cn31(
+      className: cn28(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
         ],
         className
       ),
-      ...mergeProps12(buttonProps, hoverProps),
+      ...mergeProps11(buttonProps, hoverProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx61(Icon3, {})
+      children: /* @__PURE__ */ jsx60(Icon3, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx62, jsxs as jsxs26 } from "react/jsx-runtime";
-var NumberField = forwardRef12(
+import { jsx as jsx61, jsxs as jsxs25 } from "react/jsx-runtime";
+var NumberField = forwardRef11(
   ({
     variant,
     size,
@@ -2813,7 +2749,7 @@ var NumberField = forwardRef12(
     };
     const showStepper = !hideStepper;
     const { locale } = useLocale4();
-    const inputRef = useObjectRef6(ref);
+    const inputRef = useObjectRef5(ref);
     const state = useNumberFieldState({ ...props, locale });
     const {
       labelProps,
@@ -2825,12 +2761,12 @@ var NumberField = forwardRef12(
       decrementButtonProps
     } = useNumberField(props, state, inputRef);
     const { hoverProps, isHovered } = useHover5({ isDisabled: disabled });
-    const { focusProps, isFocused } = useFocusRing7({
+    const { focusProps, isFocused } = useFocusRing6({
       within: true,
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const stateProps = useStateProps13({
+    const stateProps = useStateProps12({
       hover: isHovered,
       focus: isFocused,
       disabled,
@@ -2838,12 +2774,12 @@ var NumberField = forwardRef12(
       readOnly,
       required
     });
-    const classNames2 = useClassNames31({
+    const classNames2 = useClassNames30({
       component: "NumberField",
       size,
       variant
     });
-    return /* @__PURE__ */ jsx62(
+    return /* @__PURE__ */ jsx61(
       FieldBase,
       {
         label: props.label,
@@ -2857,16 +2793,16 @@ var NumberField = forwardRef12(
         variant,
         size,
         width,
-        children: /* @__PURE__ */ jsxs26(
+        children: /* @__PURE__ */ jsxs25(
           "div",
           {
             "data-group": true,
-            className: cn32("flex items-stretch", classNames2.group),
+            className: cn29("flex items-stretch", classNames2.group),
             "data-testid": "number-field-container",
-            ...mergeProps13(groupProps, focusProps, hoverProps),
+            ...mergeProps12(groupProps, focusProps, hoverProps),
             ...stateProps,
             children: [
-              showStepper && /* @__PURE__ */ jsx62(
+              showStepper && /* @__PURE__ */ jsx61(
                 StepButton,
                 {
                   className: classNames2.stepper,
@@ -2874,7 +2810,7 @@ var NumberField = forwardRef12(
                   ...decrementButtonProps
                 }
               ),
-              /* @__PURE__ */ jsx62("div", { className: "flex-1", children: /* @__PURE__ */ jsx62(
+              /* @__PURE__ */ jsx61("div", { className: "flex-1", children: /* @__PURE__ */ jsx61(
                 Input,
                 {
                   ref: inputRef,
@@ -2884,7 +2820,7 @@ var NumberField = forwardRef12(
                   ...stateProps
                 }
               ) }),
-              showStepper && /* @__PURE__ */ jsx62(
+              showStepper && /* @__PURE__ */ jsx61(
                 StepButton,
                 {
                   className: classNames2.stepper,
@@ -2910,22 +2846,22 @@ import {
   defaultTheme,
   useTheme as useTheme3
 } from "@marigold/system";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 function MarigoldProvider({
   children,
   theme
 }) {
   const outerTheme = useTheme3();
   const isTopLevel = outerTheme === defaultTheme;
-  return /* @__PURE__ */ jsx63(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx63(OverlayProvider, { children }) : children });
+  return /* @__PURE__ */ jsx62(ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ jsx62(OverlayProvider, { children }) : children });
 }
 
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef14
+  forwardRef as forwardRef13
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn36, useClassNames as useClassNames35 } from "@marigold/system";
+import { cn as cn33, useClassNames as useClassNames34 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext7, useContext as useContext7 } from "react";
@@ -2936,16 +2872,16 @@ var useRadioGroupContext = () => useContext7(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn35, useClassNames as useClassNames34 } from "@marigold/system";
+import { cn as cn32, useClassNames as useClassNames33 } from "@marigold/system";
 
 // src/FieldBase/_FieldBase.tsx
-import { forwardRef as forwardRef13 } from "react";
-import { cn as cn34, width as twWidth2, useClassNames as useClassNames33 } from "@marigold/system";
+import { forwardRef as forwardRef12 } from "react";
+import { cn as cn31, width as twWidth2, useClassNames as useClassNames32 } from "@marigold/system";
 
 // src/HelpText/_HelpText.tsx
 import { Text } from "react-aria-components";
-import { cn as cn33, useClassNames as useClassNames32 } from "@marigold/system";
-import { Fragment as Fragment7, jsx as jsx64, jsxs as jsxs27 } from "react/jsx-runtime";
+import { cn as cn30, useClassNames as useClassNames31 } from "@marigold/system";
+import { Fragment as Fragment8, jsx as jsx63, jsxs as jsxs26 } from "react/jsx-runtime";
 var HelpText2 = ({
   variant,
   size,
@@ -2955,7 +2891,7 @@ var HelpText2 = ({
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
-  const classNames2 = useClassNames32({
+  const classNames2 = useClassNames31({
     component: "HelpText",
     variant,
     size
@@ -2963,20 +2899,20 @@ var HelpText2 = ({
   if (!description && !errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx63(
     Text,
     {
       ...props,
       slot: hasErrorMessage ? "errorMessage" : "description",
-      className: cn33("flex items-center gap-1", classNames2.container),
-      children: hasErrorMessage ? /* @__PURE__ */ jsxs27(Fragment7, { children: [
-        /* @__PURE__ */ jsx64(
+      className: cn30("flex items-center gap-1", classNames2.container),
+      children: hasErrorMessage ? /* @__PURE__ */ jsxs26(Fragment8, { children: [
+        /* @__PURE__ */ jsx63(
           "svg",
           {
-            className: cn33("h-4 w-4", classNames2.icon),
+            className: cn30("h-4 w-4", classNames2.icon),
             viewBox: "0 0 24 24",
             role: "presentation",
-            children: /* @__PURE__ */ jsx64("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
+            children: /* @__PURE__ */ jsx63("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
@@ -2986,8 +2922,8 @@ var HelpText2 = ({
 };
 
 // src/FieldBase/_FieldBase.tsx
-import { jsx as jsx65, jsxs as jsxs28 } from "react/jsx-runtime";
-var fixedForwardRef = forwardRef13;
+import { jsx as jsx64, jsxs as jsxs27 } from "react/jsx-runtime";
+var fixedForwardRef = forwardRef12;
 var _FieldBase = (props, ref) => {
   const {
     as: Component = "div",
@@ -3000,21 +2936,21 @@ var _FieldBase = (props, ref) => {
     errorMessage,
     ...rest
   } = props;
-  const classNames2 = useClassNames33({
+  const classNames2 = useClassNames32({
     component: "Field",
     variant,
     size
   });
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs27(
     Component,
     {
       ref,
-      className: cn34("group/field", twWidth2[width], classNames2),
+      className: cn31("group/field", twWidth2[width], classNames2),
       ...rest,
       children: [
-        label ? /* @__PURE__ */ jsx65(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx65("span", { "aria-hidden": "true" }),
+        label ? /* @__PURE__ */ jsx64(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx64("span", { "aria-hidden": "true" }),
         children,
-        /* @__PURE__ */ jsx65(
+        /* @__PURE__ */ jsx64(
           HelpText2,
           {
             variant,
@@ -3031,7 +2967,7 @@ var _FieldBase = (props, ref) => {
 var FieldBase2 = fixedForwardRef(_FieldBase);
 
 // src/Radio/RadioGroup.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
   size,
@@ -3047,7 +2983,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = useClassNames34({ component: "Radio", variant, size });
+  const classNames2 = useClassNames33({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -3055,7 +2991,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx65(
     FieldBase2,
     {
       as: RadioGroup,
@@ -3066,18 +3002,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ jsx66(
+      children: /* @__PURE__ */ jsx65(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn35(
+          className: cn32(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx66(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ jsx65(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -3085,33 +3021,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment8, jsx as jsx67, jsxs as jsxs29 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx67("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx67("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx67(
+import { Fragment as Fragment9, jsx as jsx66, jsxs as jsxs28 } from "react/jsx-runtime";
+var Dot = () => /* @__PURE__ */ jsx66("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx66("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx66(
   "div",
   {
-    className: cn36(
+    className: cn33(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ jsx67(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx66(Dot, {}) : null
   }
 );
-var _Radio = forwardRef14(
+var _Radio = forwardRef13(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = useClassNames35({
+    const classNames2 = useClassNames34({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsx66(
       Radio,
       {
         ref,
-        className: cn36(
+        className: cn33(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -3120,18 +3056,18 @@ var _Radio = forwardRef14(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs29(Fragment8, { children: [
-          /* @__PURE__ */ jsx67(
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs28(Fragment9, { children: [
+          /* @__PURE__ */ jsx66(
             Icon2,
             {
               checked: isSelected,
-              className: cn36(
+              className: cn33(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ jsx67("div", { className: classNames2.label, children })
+          /* @__PURE__ */ jsx66("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -3139,6 +3075,153 @@ var _Radio = forwardRef14(
 );
 _Radio.Group = _RadioGroup;
 
+// src/Select/Select.tsx
+import {
+  forwardRef as forwardRef14,
+  useRef as useRef20
+} from "react";
+import { useButton as useButton5 } from "@react-aria/button";
+import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
+import { useLocalizedStringFormatter } from "@react-aria/i18n";
+import { HiddenSelect, useSelect } from "@react-aria/select";
+import { mergeProps as mergeProps13, useObjectRef as useObjectRef6 } from "@react-aria/utils";
+import { Item as Item5, Section as Section2 } from "@react-stately/collections";
+import { useSelectState } from "@react-stately/select";
+import {
+  cn as cn34,
+  useClassNames as useClassNames35,
+  useSmallScreen as useSmallScreen2,
+  useStateProps as useStateProps13
+} from "@marigold/system";
+
+// src/Select/intl.ts
+var messages = {
+  "en-US": {
+    placeholder: "Select an option\u2026"
+  },
+  "de-DE": {
+    placeholder: "Option ausw\xE4hlen\u2026"
+  }
+};
+
+// src/Select/Select.tsx
+import { jsx as jsx67, jsxs as jsxs29 } from "react/jsx-runtime";
+var Select = forwardRef14(
+  ({
+    variant,
+    size,
+    width,
+    open,
+    disabled,
+    required,
+    error,
+    onChange,
+    ...rest
+  }, ref) => {
+    const formatMessage = useLocalizedStringFormatter(messages);
+    const props = {
+      isOpen: open,
+      isDisabled: disabled,
+      isRequired: required,
+      validationState: error ? "invalid" : "valid",
+      placeholder: rest.placeholder || formatMessage.format("placeholder"),
+      onSelectionChange: onChange,
+      ...rest
+    };
+    const buttonRef = useObjectRef6(ref);
+    const listboxRef = useRef20(null);
+    const state = useSelectState(props);
+    const {
+      labelProps,
+      triggerProps,
+      valueProps,
+      menuProps,
+      descriptionProps,
+      errorMessageProps
+    } = useSelect(props, state, buttonRef);
+    const { buttonProps } = useButton5(
+      { isDisabled: disabled, ...triggerProps },
+      buttonRef
+    );
+    const { focusProps, isFocusVisible } = useFocusRing7();
+    const classNames2 = useClassNames35({ component: "Select", variant, size });
+    const isSmallScreen = useSmallScreen2();
+    const stateProps = useStateProps13({
+      disabled,
+      error,
+      focusVisible: isFocusVisible,
+      expanded: state.isOpen,
+      required
+    });
+    return /* @__PURE__ */ jsxs29(
+      FieldBase,
+      {
+        variant,
+        size,
+        width,
+        label: props.label,
+        labelProps: { elementType: "span", ...labelProps },
+        description: props.description,
+        descriptionProps,
+        error,
+        errorMessage: props.errorMessage,
+        errorMessageProps,
+        stateProps,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx67(
+            HiddenSelect,
+            {
+              state,
+              triggerRef: buttonRef,
+              label: props.label,
+              name: props.name,
+              isDisabled: disabled
+            }
+          ),
+          /* @__PURE__ */ jsxs29(
+            "button",
+            {
+              className: cn34(
+                "flex w-full items-center justify-between gap-1 overflow-hidden",
+                classNames2.select
+              ),
+              ref: buttonRef,
+              ...mergeProps13(buttonProps, focusProps),
+              ...stateProps,
+              children: [
+                /* @__PURE__ */ jsx67("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
+                /* @__PURE__ */ jsx67(ChevronDown, { className: "h-4 w-4" })
+              ]
+            }
+          ),
+          isSmallScreen ? /* @__PURE__ */ jsx67(Tray, { state, children: /* @__PURE__ */ jsx67(
+            ListBox,
+            {
+              ref: listboxRef,
+              state,
+              variant,
+              size,
+              ...menuProps
+            }
+          ) }) : /* @__PURE__ */ jsx67(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ jsx67(
+            ListBox,
+            {
+              ref: listboxRef,
+              state,
+              variant,
+              size,
+              ...menuProps
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Select.Option = Item5;
+Select.Section = Section2;
+
 // src/Slider/Slider.tsx
 import { forwardRef as forwardRef15 } from "react";
 import {
@@ -3148,7 +3231,7 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn37,
+  cn as cn35,
   width as twWidth3,
   useClassNames as useClassNames36
 } from "@marigold/system";
@@ -3174,7 +3257,7 @@ var _Slider = forwardRef15(
     return /* @__PURE__ */ jsxs30(
       Slider,
       {
-        className: cn37(
+        className: cn35(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -3183,15 +3266,15 @@ var _Slider = forwardRef15(
         ...props,
         children: [
           /* @__PURE__ */ jsx68(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx68(SliderOutput, { className: cn37("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx68(SliderOutput, { className: cn35("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
           /* @__PURE__ */ jsx68(
             SliderTrack,
             {
-              className: cn37("relative col-span-2 h-2 w-full", classNames2.track),
+              className: cn35("relative col-span-2 h-2 w-full", classNames2.track),
               children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx68(
                 SliderThumb,
                 {
-                  className: cn37("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn35("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -3212,7 +3295,7 @@ var Split = (props) => /* @__PURE__ */ jsx69("div", { ...props, role: "separator
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn38,
+  cn as cn36,
   gapSpace as gapSpace6
 } from "@marigold/system";
 import { jsx as jsx70 } from "react/jsx-runtime";
@@ -3229,7 +3312,7 @@ var Stack = ({
   return /* @__PURE__ */ jsx70(
     "div",
     {
-      className: cn38(
+      className: cn36(
         "flex flex-col",
         gapSpace6[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -3246,7 +3329,7 @@ var Stack = ({
 import { forwardRef as forwardRef16 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn39,
+  cn as cn37,
   width as twWidth4,
   useClassNames as useClassNames37
 } from "@marigold/system";
@@ -3268,7 +3351,7 @@ var _Switch = forwardRef16(
       {
         ...props,
         ref,
-        className: cn39(
+        className: cn37(
           twWidth4[width],
           "group/switch",
           "flex items-center justify-between gap-[1ch]",
@@ -3281,14 +3364,14 @@ var _Switch = forwardRef16(
           /* @__PURE__ */ jsx71("div", { className: " relative", children: /* @__PURE__ */ jsx71(
             "div",
             {
-              className: cn39(
+              className: cn37(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
               children: /* @__PURE__ */ jsx71(
                 "div",
                 {
-                  className: cn39(
+                  className: cn37(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -3307,7 +3390,7 @@ var _Switch = forwardRef16(
 );
 
 // src/Table/Table.tsx
-import { useRef as useRef26 } from "react";
+import { useRef as useRef27 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   TableBody as Body2,
@@ -3317,7 +3400,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn44, useClassNames as useClassNames39 } from "@marigold/system";
+import { cn as cn42, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext8, useContext as useContext8 } from "react";
@@ -3333,14 +3416,14 @@ var TableBody = ({ children }) => {
 };
 
 // src/Table/TableCell.tsx
-import { useRef as useRef20 } from "react";
+import { useRef as useRef21 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps14 } from "@react-aria/utils";
 import { useStateProps as useStateProps14 } from "@marigold/system";
 import { jsx as jsx73 } from "react/jsx-runtime";
 var TableCell = ({ cell }) => {
-  const ref = useRef20(null);
+  const ref = useRef21(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -3374,11 +3457,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { useRef as useRef21 } from "react";
+import { useRef as useRef22 } from "react";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps15 } from "@react-aria/utils";
-import { cn as cn40, useStateProps as useStateProps15 } from "@marigold/system";
+import { cn as cn38, useStateProps as useStateProps15 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3403,7 +3486,7 @@ var mapCheckboxProps = ({
 // src/Table/TableCheckboxCell.tsx
 import { jsx as jsx74 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef21(null);
+  const ref = useRef22(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -3422,7 +3505,7 @@ var TableCheckboxCell = ({ cell }) => {
     "td",
     {
       ref,
-      className: cn40("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: cn38("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps15(gridCellProps, focusProps),
       ...stateProps,
       children: /* @__PURE__ */ jsx74(_Checkbox, { ...checkboxProps })
@@ -3431,13 +3514,13 @@ var TableCheckboxCell = ({ cell }) => {
 };
 
 // src/Table/TableColumnHeader.tsx
-import { useRef as useRef22 } from "react";
+import { useRef as useRef23 } from "react";
 import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
 import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps16 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn41, useStateProps as useStateProps16 } from "@marigold/system";
+import { cn as cn39, useStateProps as useStateProps16 } from "@marigold/system";
 import { width as twWidth5 } from "@marigold/system";
 import { jsx as jsx75, jsxs as jsxs32 } from "react/jsx-runtime";
 var TableColumnHeader = ({
@@ -3445,7 +3528,7 @@ var TableColumnHeader = ({
   width = "auto"
 }) => {
   var _a, _b;
-  const ref = useRef22(null);
+  const ref = useRef23(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -3465,7 +3548,7 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: cn41("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn39("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps16(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       children: [
@@ -3485,26 +3568,26 @@ var TableHeader = ({ children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-import { useRef as useRef23 } from "react";
+import { useRef as useRef24 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 import { jsx as jsx77 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef23(null);
+  const ref = useRef24(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
   return /* @__PURE__ */ jsx77("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-import { useRef as useRef24 } from "react";
+import { useRef as useRef25 } from "react";
 import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 import { useHover as useHover7 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps17 } from "@react-aria/utils";
-import { cn as cn42, useClassNames as useClassNames38, useStateProps as useStateProps17 } from "@marigold/system";
+import { cn as cn40, useClassNames as useClassNames38, useStateProps as useStateProps17 } from "@marigold/system";
 import { jsx as jsx78 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
-  const ref = useRef24(null);
+  const ref = useRef25(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
   const classNames2 = useClassNames38({
@@ -3536,7 +3619,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: cn42(
+      className: cn40(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3550,7 +3633,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import { useRef as useRef25 } from "react";
+import { useRef as useRef26 } from "react";
 import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
 import { useHover as useHover8 } from "@react-aria/interactions";
 import {
@@ -3559,7 +3642,7 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps18 } from "@react-aria/utils";
 import {
-  cn as cn43,
+  cn as cn41,
   width as twWidth6,
   useStateProps as useStateProps18
 } from "@marigold/system";
@@ -3568,7 +3651,7 @@ var TableSelectAllCell = ({
   column,
   width = "auto"
 }) => {
-  const ref = useRef25(null);
+  const ref = useRef26(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -3588,7 +3671,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: cn43(
+      className: cn41(
         twWidth6[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
@@ -3610,7 +3693,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = useRef26(null);
+  const tableRef = useRef27(null);
   const state = useTableState({
     ...props,
     selectionMode,
@@ -3632,7 +3715,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn44(
+          className: cn42(
             "group/table",
             "border-collapse overflow-auto whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3684,7 +3767,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn45,
+  cn as cn43,
   createVar as createVar9,
   cursorStyle,
   fontWeight,
@@ -3718,7 +3801,7 @@ var Text2 = ({
     "p",
     {
       ...props,
-      className: cn45(
+      className: cn43(
         classNames2,
         "text-[--color] outline-[--outline]",
         fontStyle && textStyle[fontStyle],
@@ -3878,7 +3961,7 @@ var TextField = forwardRef18(
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn46, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
+import { cn as cn44, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
 import { jsx as jsx84 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
@@ -3896,7 +3979,7 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: cn46(
+      className: cn44(
         "grid",
         gapSpace7[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3910,7 +3993,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { useTooltip } from "@react-aria/tooltip";
-import { cn as cn47, useClassNames as useClassNames42 } from "@marigold/system";
+import { cn as cn45, useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/Tooltip/Context.ts
 import { createContext as createContext9, useContext as useContext9 } from "react";
@@ -3918,7 +4001,7 @@ var TooltipContext = createContext9({});
 var useTooltipContext = () => useContext9(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import { Children as Children7, useRef as useRef27 } from "react";
+import { Children as Children7, useRef as useRef28 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
@@ -3940,8 +4023,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = useRef27(null);
-  const overlayRef = useRef27(null);
+  const tooltipTriggerRef = useRef28(null);
+  const overlayRef = useRef28(null);
   const state = useTooltipTriggerState(props);
   const { triggerProps, tooltipProps } = useTooltipTrigger(
     props,
@@ -3991,7 +4074,7 @@ var Tooltip = ({ children, variant, size }) => {
       ...tooltipProps,
       ...rest,
       ref: overlayRef,
-      className: cn47("group/tooltip", classNames2.container),
+      className: cn45("group/tooltip", classNames2.container),
       "data-placement": placement,
       children: [
         /* @__PURE__ */ jsx86("div", { children }),
@@ -3999,7 +4082,7 @@ var Tooltip = ({ children, variant, size }) => {
           "div",
           {
             ...arrowProps,
-            className: cn47("absolute h-0 w-0", classNames2.arrow)
+            className: cn45("absolute h-0 w-0", classNames2.arrow)
           }
         )
       ]
@@ -4012,21 +4095,21 @@ Tooltip.Trigger = TooltipTrigger;
 import { Item as Item6 } from "@react-stately/collections";
 
 // src/TagGroup/TagGroup.tsx
-import { useRef as useRef29 } from "react";
+import { useRef as useRef30 } from "react";
 import { useTagGroup } from "@react-aria/tag";
 import { useListState } from "@react-stately/list";
 import { useStateProps as useStateProps21 } from "@marigold/system";
 
 // src/TagGroup/Tag.tsx
-import React3, { useRef as useRef28 } from "react";
+import React3, { useRef as useRef29 } from "react";
 import { useButton as useButton6 } from "@react-aria/button";
 import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useTag } from "@react-aria/tag";
 import { mergeProps as mergeProps20 } from "@react-aria/utils";
-import { cn as cn48, useClassNames as useClassNames43 } from "@marigold/system";
+import { cn as cn46, useClassNames as useClassNames43 } from "@marigold/system";
 import { jsx as jsx87, jsxs as jsxs36 } from "react/jsx-runtime";
 var CloseButton2 = ({ className, ...props }) => {
-  const ref = useRef28(null);
+  const ref = useRef29(null);
   const { buttonProps } = useButton6({ ...props }, ref);
   return /* @__PURE__ */ jsx87("button", { className, ...buttonProps, children: /* @__PURE__ */ jsx87("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx87("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
@@ -4058,7 +4141,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
           CloseButton2,
           {
             ...removeButtonProps,
-            className: cn48("flex items-center", classNames2.closeButton)
+            className: cn46("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -4081,7 +4164,7 @@ var TagGroup = ({
     validationState: error ? "invalid" : "valid",
     ...rest
   };
-  const inputRef = useRef29(null);
+  const inputRef = useRef30(null);
   const state = useListState(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = useTagGroup(props, state, inputRef);
   const stateProps = useStateProps21({
@@ -4350,11 +4433,11 @@ var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
 ));
 
 // src/Tabs/Tabs.tsx
-import { useRef as useRef32 } from "react";
+import { useRef as useRef33 } from "react";
 import { useTabList } from "@react-aria/tabs";
 import { Item as Item7 } from "@react-stately/collections";
 import { useTabListState } from "@react-stately/tabs";
-import { cn as cn51, gapSpace as gapSpace8, useClassNames as useClassNames44 } from "@marigold/system";
+import { cn as cn49, gapSpace as gapSpace8, useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/Tabs/Context.ts
 import { createContext as createContext10, useContext as useContext10 } from "react";
@@ -4362,15 +4445,15 @@ var TabContext = createContext10({});
 var useTabContext = () => useContext10(TabContext);
 
 // src/Tabs/Tab.tsx
-import { useRef as useRef30 } from "react";
+import { useRef as useRef31 } from "react";
 import { useFocus, useHover as useHover11 } from "@react-aria/interactions";
 import { useTab } from "@react-aria/tabs";
 import { mergeProps as mergeProps21 } from "@react-aria/utils";
-import { cn as cn49, useStateProps as useStateProps22 } from "@marigold/system";
+import { cn as cn47, useStateProps as useStateProps22 } from "@marigold/system";
 import { jsx as jsx90 } from "react/jsx-runtime";
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
-  const ref = useRef30(null);
+  const ref = useRef31(null);
   const { tabProps, isSelected } = useTab({ key }, state, ref);
   const disabled = tabProps["aria-disabled"];
   const { hoverProps, isHovered } = useHover11({
@@ -4382,7 +4465,7 @@ var Tab = ({ item, state }) => {
   return /* @__PURE__ */ jsx90(
     "div",
     {
-      className: cn49(
+      className: cn47(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -4394,17 +4477,17 @@ var Tab = ({ item, state }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-import { useRef as useRef31 } from "react";
+import { useRef as useRef32 } from "react";
 import { useTabPanel } from "@react-aria/tabs";
-import { cn as cn50 } from "@marigold/system";
+import { cn as cn48 } from "@marigold/system";
 import { jsx as jsx91 } from "react/jsx-runtime";
 var TabPanel = ({ state, ...props }) => {
   var _a;
-  const ref = useRef31(null);
+  const ref = useRef32(null);
   const { tabPanelProps } = useTabPanel(props, state, ref);
   const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx91("div", { className: cn50(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
+  return /* @__PURE__ */ jsx91("div", { className: cn48(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
 };
 
 // src/Tabs/Tabs.tsx
@@ -4417,7 +4500,7 @@ var Tabs = ({
   ...rest
 }) => {
   var _a;
-  const ref = useRef32(null);
+  const ref = useRef33(null);
   const props = {
     isDisabled: disabled,
     ...rest
@@ -4429,11 +4512,11 @@ var Tabs = ({
     size,
     variant
   });
-  return /* @__PURE__ */ jsx92(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs38("div", { className: cn51(classNames2.container), children: [
+  return /* @__PURE__ */ jsx92(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs38("div", { className: cn49(classNames2.container), children: [
     /* @__PURE__ */ jsx92(
       "div",
       {
-        className: cn51("flex", gapSpace8[space], classNames2.tabs),
+        className: cn49("flex", gapSpace8[space], classNames2.tabs),
         ...tabListProps,
         ref,
         children: [...state.collection].map((item) => {
@@ -4475,7 +4558,7 @@ export {
   FieldGroup,
   FieldGroupContext,
   Footer,
-  Header,
+  _Header as Header,
   _Headline as Headline,
   Image,
   Inline,