@marigold/components 6.5.1 → 6.6.0

package/dist/index.js

@@ -59,7 +59,7 @@ __export(src_exports, {
   FieldGroup: () => FieldGroup,
   FieldGroupContext: () => FieldGroupContext,
   Footer: () => Footer,
-  Header: () => Header,
+  Header: () => _Header,
   Headline: () => _Headline,
   Image: () => Image,
   Inline: () => Inline,
@@ -88,7 +88,7 @@ __export(src_exports, {
   Text: () => Text2,
   TextArea: () => TextArea,
   TextField: () => TextField,
-  ThemeProvider: () => import_system51.ThemeProvider,
+  ThemeProvider: () => import_system50.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => Tooltip,
   Tray: () => Tray,
@@ -101,7 +101,7 @@ __export(src_exports, {
   useCheckboxGroupContext: () => useCheckboxGroupContext,
   useFieldGroupContext: () => useFieldGroupContext,
   useListData: () => import_data.useListData,
-  useTheme: () => import_system51.useTheme
+  useTheme: () => import_system50.useTheme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -1064,11 +1064,12 @@ var import_react_aria_components2 = require("react-aria-components");
 var import_system16 = require("@marigold/system");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var _Button = (0, import_react17.forwardRef)(
-  ({ children, variant, size, disabled, fullWidth, ...props }, ref) => {
+  ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
     const classNames2 = (0, import_system16.useClassNames)({
       component: "Button",
       variant,
-      size
+      size,
+      className
     });
     return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       import_react_aria_components2.Button,
@@ -1339,6 +1340,7 @@ var _Checkbox = (0, import_react19.forwardRef)(
       isReadOnly: readOnly,
       isRequired: required,
       isInvalid: error,
+      isSelected: checked,
       defaultSelected: defaultChecked,
       ...rest
     };
@@ -1516,19 +1518,20 @@ var import_dialog = require("@react-aria/dialog");
 var import_system28 = require("@marigold/system");
 
 // src/Header/Header.tsx
+var import_react_aria_components4 = require("react-aria-components");
 var import_system26 = require("@marigold/system");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var Header = ({ children, variant, size, ...props }) => {
+var _Header = ({ variant, size, ...props }) => {
   const classNames2 = (0, import_system26.useClassNames)({
     component: "Header",
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("header", { ...props, className: (0, import_system26.cn)(classNames2), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components4.Header, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Headline/Headline.tsx
-var import_react_aria_components4 = require("react-aria-components");
+var import_react_aria_components5 = require("react-aria-components");
 var import_system27 = require("@marigold/system");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var _Headline = ({
@@ -1547,7 +1550,7 @@ var _Headline = ({
     size: size != null ? size : `level-${level}`
   });
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_react_aria_components4.Heading,
+    import_react_aria_components5.Heading,
     {
       level: Number(level),
       ...props,
@@ -1668,7 +1671,7 @@ var CloseButton = ({ className }) => {
 var addTitleProps = (children, titleProps) => {
   const childs = import_react24.Children.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => (0, import_react24.isValidElement)(child) && (child.type === Header || child.type === _Headline)
+    (child) => (0, import_react24.isValidElement)(child) && (child.type === _Header || child.type === _Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1703,12 +1706,12 @@ Dialog.Trigger = DialogTrigger;
 Dialog.Controller = DialogController;
 
 // src/Divider/Divider.tsx
-var import_react_aria_components5 = require("react-aria-components");
+var import_react_aria_components6 = require("react-aria-components");
 var import_system29 = require("@marigold/system");
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var _Divider = ({ variant, ...props }) => {
   const classNames2 = (0, import_system29.useClassNames)({ component: "Divider", variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_aria_components5.Separator, { className: classNames2, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_aria_components6.Separator, { className: classNames2, ...props });
 };
 
 // src/Footer/Footer.tsx
@@ -1953,10 +1956,10 @@ var DateField = ({
 var import_date3 = require("@internationalized/date");
 var import_react30 = require("react");
 var import_calendar3 = require("@react-aria/calendar");
-var import_i18n9 = require("@react-aria/i18n");
+var import_i18n7 = require("@react-aria/i18n");
 var import_calendar4 = require("@react-stately/calendar");
 var import_icons = require("@marigold/icons");
-var import_system37 = require("@marigold/system");
+var import_system36 = require("@marigold/system");
 
 // src/Calendar/CalendarGrid.tsx
 var import_date2 = require("@internationalized/date");
@@ -2048,185 +2051,49 @@ var CalendarGrid = ({ state, ...props }) => {
 };
 
 // src/Calendar/MonthDropdown.tsx
-var import_i18n7 = require("@react-aria/i18n");
-
-// src/Select/Select.tsx
-var import_react29 = require("react");
-var import_button4 = require("@react-aria/button");
-var import_focus8 = require("@react-aria/focus");
-var import_i18n6 = require("@react-aria/i18n");
-var import_select = require("@react-aria/select");
-var import_utils13 = require("@react-aria/utils");
-var import_collections4 = require("@react-stately/collections");
-var import_select2 = require("@react-stately/select");
-var import_system36 = require("@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
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var Select = (0, import_react29.forwardRef)(
-  ({
-    variant,
-    size,
-    width,
-    open,
-    disabled,
-    required,
-    error,
-    onChange,
-    ...rest
-  }, ref) => {
-    const formatMessage = (0, import_i18n6.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 = (0, import_utils13.useObjectRef)(ref);
-    const listboxRef = (0, import_react29.useRef)(null);
-    const state = (0, import_select2.useSelectState)(props);
-    const {
-      labelProps,
-      triggerProps,
-      valueProps,
-      menuProps,
-      descriptionProps,
-      errorMessageProps
-    } = (0, import_select.useSelect)(props, state, buttonRef);
-    const { buttonProps } = (0, import_button4.useButton)(
-      { isDisabled: disabled, ...triggerProps },
-      buttonRef
-    );
-    const { focusProps, isFocusVisible } = (0, import_focus8.useFocusRing)();
-    const classNames2 = (0, import_system36.useClassNames)({ component: "Select", variant, size });
-    const isSmallScreen = (0, import_system36.useSmallScreen)();
-    const stateProps = (0, import_system36.useStateProps)({
-      disabled,
-      error,
-      focusVisible: isFocusVisible,
-      expanded: state.isOpen,
-      required
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-      FieldBase,
-      {
-        variant,
-        size,
-        width,
-        label: props.label,
-        labelProps: { elementType: "span", ...labelProps },
-        description: props.description,
-        descriptionProps,
-        error,
-        errorMessage: props.errorMessage,
-        errorMessageProps,
-        stateProps,
-        disabled,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            import_select.HiddenSelect,
-            {
-              state,
-              triggerRef: buttonRef,
-              label: props.label,
-              name: props.name,
-              isDisabled: disabled
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-            "button",
-            {
-              className: (0, import_system36.cn)(
-                "flex w-full items-center justify-between gap-1 overflow-hidden",
-                classNames2.select
-              ),
-              ref: buttonRef,
-              ...(0, import_utils13.mergeProps)(buttonProps, focusProps),
-              ...stateProps,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ChevronDown, { className: "h-4 w-4" })
-              ]
-            }
-          ),
-          isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Tray, { state, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            ListBox,
-            {
-              ref: listboxRef,
-              state,
-              variant,
-              size,
-              ...menuProps
-            }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-            ListBox,
-            {
-              ref: listboxRef,
-              state,
-              variant,
-              size,
-              ...menuProps
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-Select.Option = import_collections4.Item;
-Select.Section = import_collections4.Section;
-
-// src/Calendar/MonthDropdown.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
-var MonthDropdown = ({ state }) => {
-  let months = [];
-  let formatter = (0, import_i18n7.useDateFormatter)({
-    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)));
-  }
+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__ */ (0, import_jsx_runtime47.jsx)(
-    Select,
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    "ul",
     {
-      "aria-label": "Month",
-      onChange,
-      selectedKey: String(state.focusedDate.month),
-      "data-testid": "month",
-      disabled: state.isDisabled,
-      children: months.map((month, i) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(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__ */ (0, import_jsx_runtime46.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          _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
-var import_i18n8 = require("@react-aria/i18n");
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var YearDropdown = ({ state }) => {
+var import_react29 = require("react");
+var import_i18n6 = require("@react-aria/i18n");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var YearDropdown = ({ state, setSelectedDropdown }) => {
   const years = [];
-  let formatter = (0, import_i18n8.useDateFormatter)({
+  let formatter = (0, import_i18n6.useDateFormatter)({
     year: "numeric",
     timeZone: state.timeZone
   });
@@ -2237,27 +2104,59 @@ var YearDropdown = ({ state }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
+  const activeButtonRef = (0, import_react29.useRef)(null);
+  (0, import_react29.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime48.jsx)(
-    Select,
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    "ul",
     {
-      "aria-label": "Year",
-      selectedKey: "20",
-      onChange,
-      "data-testid": "year",
-      disabled: state.isDisabled,
-      children: years.map((year, i) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(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__ */ (0, import_jsx_runtime47.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+          "div",
+          {
+            ref: isActive ? activeButtonRef : null,
+            style: { height: "100%", width: "100%" },
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              _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
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
 var Calendar = ({
   disabled,
   readOnly,
@@ -2265,7 +2164,7 @@ var Calendar = ({
   variant,
   ...rest
 }) => {
-  const { locale } = (0, import_i18n9.useLocale)();
+  const { locale } = (0, import_i18n7.useLocale)();
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2291,51 +2190,97 @@ var Calendar = ({
     onFocusChange: nextFocusChange,
     ...nextPropsRest
   } = nextButtonProps;
-  const calendarState = (0, import_system37.useStateProps)({
+  const calendarState = (0, import_system36.useStateProps)({
     disabled: state.isDisabled,
     focusVisible: state.isFocused
   });
-  const classNames2 = (0, import_system37.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  const classNames2 = (0, import_system36.useClassNames)({ component: "Calendar" });
+  const { select: selectClassNames } = (0, import_system36.useClassNames)({ component: "Select" });
+  const [selectedDropdown, setSelectedDropdown] = (0, import_react30.useState)();
+  let months = [];
+  let formatter = (0, import_i18n7.useDateFormatter)({
+    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__ */ (0, import_jsx_runtime48.jsx)(
     "div",
     {
       tabIndex: -1,
-      className: (0, import_system37.cn)(
-        "flex w-[360px] flex-col rounded-sm p-4 shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
+      className: (0, import_system36.cn)(
+        "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4  shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
         classNames2.calendar
       ),
       ...calendarProps,
       ...calendarState,
       ref,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "mb-4 flex items-center gap-[60px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex min-w-[170px] gap-[9px] [&_div]:flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MonthDropdown_default, { state }),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(YearDropdown_default, { state })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-              _Button,
+      children: selectedDropdown ? selectedDropdown === "month" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        MonthDropdown_default,
+        {
+          setSelectedDropdown,
+          months,
+          state
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        YearDropdown_default,
+        {
+          setSelectedDropdown,
+          state
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex w-full gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+              "button",
               {
-                className: classNames2.calendarControllers,
-                ...prevPropsRest,
-                disabled: prevIsDisabled,
-                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons.ChevronLeft, {})
+                disabled: state.isDisabled,
+                onClick: () => setSelectedDropdown("month"),
+                className: (0, import_system36.cn)(buttonStyles, selectClassNames),
+                "data-testid": "month",
+                children: [
+                  selectedValue.month,
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons.ChevronDown, {})
+                ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-              _Button,
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+              "button",
               {
-                className: classNames2.calendarControllers,
-                ...nextPropsRest,
-                disabled: nextIsDisabled,
-                children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons.ChevronRight, {})
+                disabled: state.isDisabled,
+                onClick: () => setSelectedDropdown("year"),
+                className: (0, import_system36.cn)(buttonStyles, selectClassNames),
+                "data-testid": "year",
+                children: [
+                  selectedValue.year,
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons.ChevronDown, {})
+                ]
               }
             )
-          ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+            "div",
+            {
+              className: (0, import_system36.cn)(
+                "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
+                classNames2.calendarControllers
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(_Button, { ...prevPropsRest, disabled: prevIsDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons.ChevronLeft, {}) }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(_Button, { ...nextPropsRest, disabled: nextIsDisabled, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons.ChevronRight, {}) })
+              ]
+            }
+          )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(CalendarGrid, { state })
-      ]
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(CalendarGrid, { state })
+      ] })
     }
   );
 };
@@ -2343,10 +2288,10 @@ var Calendar = ({
 // src/DatePicker/DatePicker.tsx
 var import_react31 = require("react");
 var import_datepicker4 = require("@react-aria/datepicker");
-var import_utils14 = require("@react-aria/utils");
+var import_utils13 = require("@react-aria/utils");
 var import_datepicker5 = require("@react-stately/datepicker");
-var import_system38 = require("@marigold/system");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_system37 = require("@marigold/system");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var DatePicker = ({
   disabled,
   required,
@@ -2371,7 +2316,7 @@ var DatePicker = ({
     ...props
   });
   const ref = (0, import_react31.useRef)(null);
-  const stateProps = (0, import_system38.useStateProps)({
+  const stateProps = (0, import_system37.useStateProps)({
     focus: state.isOpen
   });
   const { groupProps, fieldProps, buttonProps, calendarProps } = (0, import_datepicker4.useDatePicker)(
@@ -2380,13 +2325,13 @@ var DatePicker = ({
     ref
   );
   const { isDisabled, errorMessage, description, label } = props;
-  const classNames2 = (0, import_system38.useClassNames)({
+  const classNames2 = (0, import_system37.useClassNames)({
     component: "DatePicker",
     size,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex w-full min-w-[300px]", ...groupProps, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       DateField,
       {
         ...fieldProps,
@@ -2399,40 +2344,39 @@ var DatePicker = ({
         description: !state.isOpen && description,
         triggerRef: ref,
         width,
-        action: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+        action: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           _Button,
           {
-            ...(0, import_utils14.mergeProps)(buttonProps, stateProps),
-            className: (0, import_system38.cn)("absolute right-0 top-0", classNames2.button),
+            ...(0, import_utils13.mergeProps)(buttonProps, stateProps),
             disabled: isDisabled,
-            children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               "svg",
               {
                 width: "24",
                 height: "24",
                 viewBox: "0 0 24 24",
                 fill: "currentColor",
-                children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("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__ */ (0, import_jsx_runtime49.jsx)("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__ */ (0, import_jsx_runtime50.jsx)(Popover, { triggerRef: ref, state, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Calendar, { disabled, ...calendarProps }) })
+    state.isOpen && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Popover, { triggerRef: ref, state, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Calendar, { disabled, ...calendarProps }) })
   ] });
 };
 
 // src/Inset/Inset.tsx
-var import_system39 = require("@marigold/system");
-var import_jsx_runtime51 = require("react/jsx-runtime");
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+var import_system38 = require("@marigold/system");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
   "div",
   {
-    className: (0, import_system39.cn)(
-      space && import_system39.paddingSpace[space],
-      !space && spaceX && import_system39.paddingSpaceX[spaceX],
-      !space && spaceY && import_system39.paddingSpaceY[spaceY]
+    className: (0, import_system38.cn)(
+      space && import_system38.paddingSpace[space],
+      !space && spaceX && import_system38.paddingSpaceX[spaceX],
+      !space && spaceY && import_system38.paddingSpaceY[spaceY]
     ),
     children
   }
@@ -2440,22 +2384,22 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_
 
 // src/Link/Link.tsx
 var import_react32 = require("react");
-var import_react_aria_components6 = require("react-aria-components");
-var import_system40 = require("@marigold/system");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react_aria_components7 = require("react-aria-components");
+var import_system39 = require("@marigold/system");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var _Link = (0, import_react32.forwardRef)(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = (0, import_system40.useClassNames)({
+    const classNames2 = (0, import_system39.useClassNames)({
       component: "Link",
       variant,
       size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_aria_components6.Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_aria_components7.Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-var import_system41 = require("@marigold/system");
+var import_system40 = require("@marigold/system");
 
 // src/List/Context.ts
 var import_react33 = require("react");
@@ -2463,14 +2407,14 @@ var ListContext = (0, import_react33.createContext)({});
 var useListContext = () => (0, import_react33.useContext)(ListContext);
 
 // src/List/ListItem.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("li", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var List = ({
   as = "ul",
   children,
@@ -2479,18 +2423,18 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = (0, import_system41.useClassNames)({ component: "List", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
+  const classNames2 = (0, import_system40.useClassNames)({ component: "List", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 var import_react37 = require("react");
 var import_menu5 = require("@react-aria/menu");
-var import_utils17 = require("@react-aria/utils");
-var import_collections5 = require("@react-stately/collections");
+var import_utils16 = require("@react-aria/utils");
+var import_collections4 = require("@react-stately/collections");
 var import_tree2 = require("@react-stately/tree");
-var import_system45 = require("@marigold/system");
+var import_system44 = require("@marigold/system");
 
 // src/Menu/Context.ts
 var import_react34 = require("react");
@@ -2499,11 +2443,11 @@ var useMenuContext = () => (0, import_react34.useContext)(MenuContext);
 
 // src/Menu/MenuItem.tsx
 var import_react35 = require("react");
-var import_focus9 = require("@react-aria/focus");
+var import_focus8 = require("@react-aria/focus");
 var import_menu = require("@react-aria/menu");
-var import_utils15 = require("@react-aria/utils");
-var import_system42 = require("@marigold/system");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_utils14 = require("@react-aria/utils");
+var import_system41 = require("@marigold/system");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var MenuItem = ({
   item,
   state,
@@ -2521,17 +2465,17 @@ var MenuItem = ({
     state,
     ref
   );
-  const { isFocusVisible, focusProps } = (0, import_focus9.useFocusRing)();
-  const stateProps = (0, import_system42.useStateProps)({
+  const { isFocusVisible, focusProps } = (0, import_focus8.useFocusRing)();
+  const stateProps = (0, import_system41.useStateProps)({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "li",
     {
       ref,
       className,
-      ...(0, import_utils15.mergeProps)(
+      ...(0, import_utils14.mergeProps)(
         props,
         { onPointerDown: onPointerUp },
         stateProps,
@@ -2544,19 +2488,19 @@ var MenuItem = ({
 
 // src/Menu/MenuSection.tsx
 var import_menu2 = require("@react-aria/menu");
-var import_system43 = require("@marigold/system");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_system42 = require("@marigold/system");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var MenuSection = ({ onAction, item, state }) => {
   let { itemProps, headingProps, groupProps } = (0, import_menu2.useMenuSection)({
     heading: item.rendered,
     "aria-label": item["aria-label"]
   });
-  const className = (0, import_system43.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-    item.key !== state.collection.getFirstKey() && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(_Divider, { variant: "section" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("li", { ...itemProps, children: [
-      item.rendered && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { ...headingProps, className: className.section, children: item.rendered }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("ul", { ...groupProps, className: "pb-1", children: [...item.props.children].map((node) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  const className = (0, import_system42.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+    item.key !== state.collection.getFirstKey() && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(_Divider, { variant: "section" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("li", { ...itemProps, children: [
+      item.rendered && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { ...headingProps, className: className.section, children: item.rendered }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("ul", { ...groupProps, className: "pb-1", children: [...item.props.children].map((node) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         MenuItem,
         {
           item: node,
@@ -2575,10 +2519,10 @@ var MenuSection_default = MenuSection;
 var import_react36 = require("react");
 var import_interactions5 = require("@react-aria/interactions");
 var import_menu3 = require("@react-aria/menu");
-var import_utils16 = require("@react-aria/utils");
+var import_utils15 = require("@react-aria/utils");
 var import_menu4 = require("@react-stately/menu");
-var import_system44 = require("@marigold/system");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_system43 = require("@marigold/system");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var MenuTrigger = ({
   disabled,
   open,
@@ -2587,7 +2531,7 @@ var MenuTrigger = ({
 }) => {
   const [menuTrigger, menu] = import_react36.Children.toArray(children);
   const menuTriggerRef = (0, import_react36.useRef)(null);
-  const menuRef = (0, import_utils16.useObjectRef)();
+  const menuRef = (0, import_utils15.useObjectRef)();
   const state = (0, import_menu4.useMenuTriggerState)({
     isOpen: open,
     onOpenChange
@@ -2604,9 +2548,9 @@ var MenuTrigger = ({
     onClose: state.close,
     autoFocus: state.focusStrategy
   };
-  const isSmallScreen = (0, import_system44.useSmallScreen)();
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(MenuContext.Provider, { value: menuContext, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  const isSmallScreen = (0, import_system43.useSmallScreen)();
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(MenuContext.Provider, { value: menuContext, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       import_interactions5.PressResponder,
       {
         ...menuTriggerProps,
@@ -2615,23 +2559,23 @@ var MenuTrigger = ({
         children: menuTrigger
       }
     ),
-    isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Tray, { state, children: menu }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state, children: menu })
+    isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Tray, { state, children: menu }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state, children: menu })
   ] });
 };
 
 // src/Menu/Menu.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
   const ref = (0, import_react37.useRef)(null);
   const state = (0, import_tree2.useTreeState)({ ...ownProps, selectionMode: "none" });
   const { menuProps } = (0, import_menu5.useMenu)(ownProps, state, ref);
-  (0, import_utils17.useSyncRef)({ ref: scrollRef }, ref);
-  const classNames2 = (0, import_system45.useClassNames)({ component: "Menu", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ul", { ref, className: classNames2.container, ...menuProps, children: [...state.collection].map((item) => {
+  (0, import_utils16.useSyncRef)({ ref: scrollRef }, ref);
+  const classNames2 = (0, import_system44.useClassNames)({ component: "Menu", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("ul", { ref, className: classNames2.container, ...menuProps, children: [...state.collection].map((item) => {
     if (item.type === "section") {
-      return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         MenuSection_default,
         {
           item,
@@ -2641,7 +2585,7 @@ var Menu = ({ variant, size, ...props }) => {
         item.key
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       MenuItem,
       {
         item,
@@ -2654,30 +2598,30 @@ var Menu = ({ variant, size, ...props }) => {
   }) });
 };
 Menu.Trigger = MenuTrigger;
-Menu.Item = import_collections5.Item;
-Menu.Section = import_collections5.Section;
+Menu.Item = import_collections4.Item;
+Menu.Section = import_collections4.Section;
 
 // src/Menu/ActionMenu.tsx
-var import_system46 = require("@marigold/system");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_system45 = require("@marigold/system");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Menu.Trigger, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_system46.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Menu, { ...props })
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(Menu.Trigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(_Button, { variant: "menu", size: "small", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_system45.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Menu, { ...props })
   ] });
 };
 
 // src/Message/Message.tsx
-var import_system47 = require("@marigold/system");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_system46 = require("@marigold/system");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var icons = {
-  info: () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  info: () => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2687,13 +2631,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  warning: () => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2703,13 +2647,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  error: () => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2727,26 +2671,26 @@ var Message = ({
   children,
   ...props
 }) => {
-  const classNames2 = (0, import_system47.useClassNames)({ component: "Message", variant, size });
+  const classNames2 = (0, import_system46.useClassNames)({ component: "Message", variant, size });
   const Icon3 = icons[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     "div",
     {
-      className: (0, import_system47.cn)(
+      className: (0, import_system46.cn)(
         "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
         classNames2.container
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_system47.cn)("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon3, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: (0, import_system46.cn)("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon3, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "div",
           {
-            className: (0, import_system47.cn)("col-start-2 row-start-1 self-center", classNames2.title),
+            className: (0, import_system46.cn)("col-start-2 row-start-1 self-center", classNames2.title),
             children: messageTitle
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_system47.cn)("col-start-2", classNames2.content), children })
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: (0, import_system46.cn)("col-start-2", classNames2.content), children })
       ]
     }
   );
@@ -2754,22 +2698,22 @@ var Message = ({
 
 // src/NumberField/NumberField.tsx
 var import_react39 = require("react");
-var import_focus10 = require("@react-aria/focus");
-var import_i18n10 = require("@react-aria/i18n");
+var import_focus9 = require("@react-aria/focus");
+var import_i18n8 = require("@react-aria/i18n");
 var import_interactions7 = require("@react-aria/interactions");
 var import_numberfield = require("@react-aria/numberfield");
-var import_utils19 = require("@react-aria/utils");
+var import_utils18 = require("@react-aria/utils");
 var import_numberfield2 = require("@react-stately/numberfield");
-var import_system49 = require("@marigold/system");
+var import_system48 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
 var import_react38 = require("react");
-var import_button5 = require("@react-aria/button");
+var import_button4 = require("@react-aria/button");
 var import_interactions6 = require("@react-aria/interactions");
-var import_utils18 = require("@react-aria/utils");
-var import_system48 = require("@marigold/system");
-var import_jsx_runtime61 = require("react/jsx-runtime");
-var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+var import_utils17 = require("@react-aria/utils");
+var import_system47 = require("@marigold/system");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -2777,7 +2721,7 @@ var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("svg", { width: 1
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -2791,36 +2735,36 @@ var StepButton = ({
   ...props
 }) => {
   const ref = (0, import_react38.useRef)(null);
-  const { buttonProps, isPressed } = (0, import_button5.useButton)(
+  const { buttonProps, isPressed } = (0, import_button4.useButton)(
     { ...props, elementType: "div" },
     ref
   );
   const { hoverProps, isHovered } = (0, import_interactions6.useHover)(props);
-  const stateProps = (0, import_system48.useStateProps)({
+  const stateProps = (0, import_system47.useStateProps)({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
-      className: (0, import_system48.cn)(
+      className: (0, import_system47.cn)(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
         ],
         className
       ),
-      ...(0, import_utils18.mergeProps)(buttonProps, hoverProps),
+      ...(0, import_utils17.mergeProps)(buttonProps, hoverProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon3, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon3, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var NumberField = (0, import_react39.forwardRef)(
   ({
     variant,
@@ -2841,8 +2785,8 @@ var NumberField = (0, import_react39.forwardRef)(
       ...rest
     };
     const showStepper = !hideStepper;
-    const { locale } = (0, import_i18n10.useLocale)();
-    const inputRef = (0, import_utils19.useObjectRef)(ref);
+    const { locale } = (0, import_i18n8.useLocale)();
+    const inputRef = (0, import_utils18.useObjectRef)(ref);
     const state = (0, import_numberfield2.useNumberFieldState)({ ...props, locale });
     const {
       labelProps,
@@ -2854,12 +2798,12 @@ var NumberField = (0, import_react39.forwardRef)(
       decrementButtonProps
     } = (0, import_numberfield.useNumberField)(props, state, inputRef);
     const { hoverProps, isHovered } = (0, import_interactions7.useHover)({ isDisabled: disabled });
-    const { focusProps, isFocused } = (0, import_focus10.useFocusRing)({
+    const { focusProps, isFocused } = (0, import_focus9.useFocusRing)({
       within: true,
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const stateProps = (0, import_system49.useStateProps)({
+    const stateProps = (0, import_system48.useStateProps)({
       hover: isHovered,
       focus: isFocused,
       disabled,
@@ -2867,12 +2811,12 @@ var NumberField = (0, import_react39.forwardRef)(
       readOnly,
       required
     });
-    const classNames2 = (0, import_system49.useClassNames)({
+    const classNames2 = (0, import_system48.useClassNames)({
       component: "NumberField",
       size,
       variant
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       FieldBase,
       {
         label: props.label,
@@ -2886,16 +2830,16 @@ var NumberField = (0, import_react39.forwardRef)(
         variant,
         size,
         width,
-        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           "div",
           {
             "data-group": true,
-            className: (0, import_system49.cn)("flex items-stretch", classNames2.group),
+            className: (0, import_system48.cn)("flex items-stretch", classNames2.group),
             "data-testid": "number-field-container",
-            ...(0, import_utils19.mergeProps)(groupProps, focusProps, hoverProps),
+            ...(0, import_utils18.mergeProps)(groupProps, focusProps, hoverProps),
             ...stateProps,
             children: [
-              showStepper && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+              showStepper && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 StepButton,
                 {
                   className: classNames2.stepper,
@@ -2903,7 +2847,7 @@ var NumberField = (0, import_react39.forwardRef)(
                   ...decrementButtonProps
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 Input,
                 {
                   ref: inputRef,
@@ -2913,7 +2857,7 @@ var NumberField = (0, import_react39.forwardRef)(
                   ...stateProps
                 }
               ) }),
-              showStepper && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+              showStepper && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 StepButton,
                 {
                   className: classNames2.stepper,
@@ -2930,25 +2874,25 @@ var NumberField = (0, import_react39.forwardRef)(
 );
 
 // src/Provider/index.ts
-var import_system51 = require("@marigold/system");
+var import_system50 = require("@marigold/system");
 
 // src/Provider/MarigoldProvider.tsx
 var import_overlays7 = require("@react-aria/overlays");
-var import_system50 = require("@marigold/system");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_system49 = require("@marigold/system");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function MarigoldProvider({
   children,
   theme
 }) {
-  const outerTheme = (0, import_system50.useTheme)();
-  const isTopLevel = outerTheme === import_system50.defaultTheme;
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_system50.ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_overlays7.OverlayProvider, { children }) : children });
+  const outerTheme = (0, import_system49.useTheme)();
+  const isTopLevel = outerTheme === import_system49.defaultTheme;
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_system49.ThemeProvider, { theme, children: isTopLevel ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_overlays7.OverlayProvider, { children }) : children });
 }
 
 // src/Radio/Radio.tsx
 var import_react42 = require("react");
-var import_react_aria_components9 = require("react-aria-components");
-var import_system55 = require("@marigold/system");
+var import_react_aria_components10 = require("react-aria-components");
+var import_system54 = require("@marigold/system");
 
 // src/Radio/Context.ts
 var import_react40 = require("react");
@@ -2958,17 +2902,17 @@ var RadioGroupContext = (0, import_react40.createContext)(
 var useRadioGroupContext = () => (0, import_react40.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_react_aria_components8 = require("react-aria-components");
-var import_system54 = require("@marigold/system");
+var import_react_aria_components9 = require("react-aria-components");
+var import_system53 = require("@marigold/system");
 
 // src/FieldBase/_FieldBase.tsx
 var import_react41 = require("react");
-var import_system53 = require("@marigold/system");
+var import_system52 = require("@marigold/system");
 
 // src/HelpText/_HelpText.tsx
-var import_react_aria_components7 = require("react-aria-components");
-var import_system52 = require("@marigold/system");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_react_aria_components8 = require("react-aria-components");
+var import_system51 = require("@marigold/system");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var HelpText2 = ({
   variant,
   size,
@@ -2978,7 +2922,7 @@ var HelpText2 = ({
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
-  const classNames2 = (0, import_system52.useClassNames)({
+  const classNames2 = (0, import_system51.useClassNames)({
     component: "HelpText",
     variant,
     size
@@ -2986,20 +2930,20 @@ var HelpText2 = ({
   if (!description && !errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-    import_react_aria_components7.Text,
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    import_react_aria_components8.Text,
     {
       ...props,
       slot: hasErrorMessage ? "errorMessage" : "description",
-      className: (0, import_system52.cn)("flex items-center gap-1", classNames2.container),
-      children: hasErrorMessage ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      className: (0, import_system51.cn)("flex items-center gap-1", classNames2.container),
+      children: hasErrorMessage ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           "svg",
           {
-            className: (0, import_system52.cn)("h-4 w-4", classNames2.icon),
+            className: (0, import_system51.cn)("h-4 w-4", classNames2.icon),
             viewBox: "0 0 24 24",
             role: "presentation",
-            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
           }
         ),
         errorMessage
@@ -3009,7 +2953,7 @@ var HelpText2 = ({
 };
 
 // src/FieldBase/_FieldBase.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var fixedForwardRef = import_react41.forwardRef;
 var _FieldBase = (props, ref) => {
   const {
@@ -3023,21 +2967,21 @@ var _FieldBase = (props, ref) => {
     errorMessage,
     ...rest
   } = props;
-  const classNames2 = (0, import_system53.useClassNames)({
+  const classNames2 = (0, import_system52.useClassNames)({
     component: "Field",
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
     Component,
     {
       ref,
-      className: (0, import_system53.cn)("group/field", import_system53.width[width], classNames2),
+      className: (0, import_system52.cn)("group/field", import_system52.width[width], classNames2),
       ...rest,
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(_Label, { variant, size, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { "aria-hidden": "true" }),
+        label ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(_Label, { variant, size, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { "aria-hidden": "true" }),
         children,
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           HelpText2,
           {
             variant,
@@ -3054,7 +2998,7 @@ var _FieldBase = (props, ref) => {
 var FieldBase2 = fixedForwardRef(_FieldBase);
 
 // src/Radio/RadioGroup.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var _RadioGroup = ({
   variant,
   size,
@@ -3070,7 +3014,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = (0, import_system54.useClassNames)({ component: "Radio", variant, size });
+  const classNames2 = (0, import_system53.useClassNames)({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -3078,10 +3022,10 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     FieldBase2,
     {
-      as: import_react_aria_components8.RadioGroup,
+      as: import_react_aria_components9.RadioGroup,
       width,
       label,
       description,
@@ -3089,18 +3033,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system54.cn)(
+          className: (0, import_system53.cn)(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -3108,33 +3052,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
   "div",
   {
-    className: (0, import_system55.cn)(
+    className: (0, import_system54.cn)(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Dot, {}) : null
   }
 );
 var _Radio = (0, import_react42.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = (0, import_system55.useClassNames)({
+    const classNames2 = (0, import_system54.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
-      import_react_aria_components9.Radio,
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      import_react_aria_components10.Radio,
       {
         ref,
-        className: (0, import_system55.cn)(
+        className: (0, import_system54.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -3143,18 +3087,18 @@ var _Radio = (0, import_react42.forwardRef)(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             Icon2,
             {
               checked: isSelected,
-              className: (0, import_system55.cn)(
+              className: (0, import_system54.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: classNames2.label, children })
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -3162,12 +3106,151 @@ var _Radio = (0, import_react42.forwardRef)(
 );
 _Radio.Group = _RadioGroup;
 
-// src/Slider/Slider.tsx
+// src/Select/Select.tsx
 var import_react43 = require("react");
-var import_react_aria_components10 = require("react-aria-components");
+var import_button5 = require("@react-aria/button");
+var import_focus10 = require("@react-aria/focus");
+var import_i18n9 = require("@react-aria/i18n");
+var import_select = require("@react-aria/select");
+var import_utils19 = require("@react-aria/utils");
+var import_collections5 = require("@react-stately/collections");
+var import_select2 = require("@react-stately/select");
+var import_system55 = require("@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
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var Select = (0, import_react43.forwardRef)(
+  ({
+    variant,
+    size,
+    width,
+    open,
+    disabled,
+    required,
+    error,
+    onChange,
+    ...rest
+  }, ref) => {
+    const formatMessage = (0, import_i18n9.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 = (0, import_utils19.useObjectRef)(ref);
+    const listboxRef = (0, import_react43.useRef)(null);
+    const state = (0, import_select2.useSelectState)(props);
+    const {
+      labelProps,
+      triggerProps,
+      valueProps,
+      menuProps,
+      descriptionProps,
+      errorMessageProps
+    } = (0, import_select.useSelect)(props, state, buttonRef);
+    const { buttonProps } = (0, import_button5.useButton)(
+      { isDisabled: disabled, ...triggerProps },
+      buttonRef
+    );
+    const { focusProps, isFocusVisible } = (0, import_focus10.useFocusRing)();
+    const classNames2 = (0, import_system55.useClassNames)({ component: "Select", variant, size });
+    const isSmallScreen = (0, import_system55.useSmallScreen)();
+    const stateProps = (0, import_system55.useStateProps)({
+      disabled,
+      error,
+      focusVisible: isFocusVisible,
+      expanded: state.isOpen,
+      required
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+      FieldBase,
+      {
+        variant,
+        size,
+        width,
+        label: props.label,
+        labelProps: { elementType: "span", ...labelProps },
+        description: props.description,
+        descriptionProps,
+        error,
+        errorMessage: props.errorMessage,
+        errorMessageProps,
+        stateProps,
+        disabled,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            import_select.HiddenSelect,
+            {
+              state,
+              triggerRef: buttonRef,
+              label: props.label,
+              name: props.name,
+              isDisabled: disabled
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+            "button",
+            {
+              className: (0, import_system55.cn)(
+                "flex w-full items-center justify-between gap-1 overflow-hidden",
+                classNames2.select
+              ),
+              ref: buttonRef,
+              ...(0, import_utils19.mergeProps)(buttonProps, focusProps),
+              ...stateProps,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ChevronDown, { className: "h-4 w-4" })
+              ]
+            }
+          ),
+          isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Tray, { state, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            ListBox,
+            {
+              ref: listboxRef,
+              state,
+              variant,
+              size,
+              ...menuProps
+            }
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            ListBox,
+            {
+              ref: listboxRef,
+              state,
+              variant,
+              size,
+              ...menuProps
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Select.Option = import_collections5.Item;
+Select.Section = import_collections5.Section;
+
+// src/Slider/Slider.tsx
+var import_react44 = require("react");
+var import_react_aria_components11 = require("react-aria-components");
 var import_system56 = require("@marigold/system");
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var _Slider = (0, import_react43.forwardRef)(
+var _Slider = (0, import_react44.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -3186,7 +3269,7 @@ var _Slider = (0, import_react43.forwardRef)(
       ...rest
     };
     return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
-      import_react_aria_components10.Slider,
+      import_react_aria_components11.Slider,
       {
         className: (0, import_system56.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
@@ -3197,13 +3280,13 @@ var _Slider = (0, import_react43.forwardRef)(
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(_Label, { children: props.children }),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_aria_components10.SliderOutput, { className: (0, import_system56.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_aria_components11.SliderOutput, { className: (0, import_system56.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
           /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-            import_react_aria_components10.SliderTrack,
+            import_react_aria_components11.SliderTrack,
             {
               className: (0, import_system56.cn)("relative col-span-2 h-2 w-full", classNames2.track),
               children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-                import_react_aria_components10.SliderThumb,
+                import_react_aria_components11.SliderThumb,
                 {
                   className: (0, import_system56.cn)("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
@@ -3253,11 +3336,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react44 = require("react");
-var import_react_aria_components11 = require("react-aria-components");
+var import_react45 = require("react");
+var import_react_aria_components12 = require("react-aria-components");
 var import_system58 = require("@marigold/system");
 var import_jsx_runtime71 = require("react/jsx-runtime");
-var _Switch = (0, import_react44.forwardRef)(
+var _Switch = (0, import_react45.forwardRef)(
   ({
     variant,
     size,
@@ -3270,7 +3353,7 @@ var _Switch = (0, import_react44.forwardRef)(
   }, ref) => {
     const classNames2 = (0, import_system58.useClassNames)({ component: "Switch", size, variant });
     return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
-      import_react_aria_components11.Switch,
+      import_react_aria_components12.Switch,
       {
         ...props,
         ref,
@@ -3313,15 +3396,15 @@ var _Switch = (0, import_react44.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
 var import_system65 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react45 = require("react");
-var TableContext = (0, import_react45.createContext)({});
-var useTableContext = () => (0, import_react45.useContext)(TableContext);
+var import_react46 = require("react");
+var TableContext = (0, import_react46.createContext)({});
+var useTableContext = () => (0, import_react46.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
@@ -3332,14 +3415,14 @@ var TableBody = ({ children }) => {
 };
 
 // src/Table/TableCell.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_focus11 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
 var import_utils20 = require("@react-aria/utils");
 var import_system59 = require("@marigold/system");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var TableCell = ({ cell }) => {
-  const ref = (0, import_react46.useRef)(null);
+  const ref = (0, import_react47.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -3373,7 +3456,7 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_focus12 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
 var import_utils21 = require("@react-aria/utils");
@@ -3402,7 +3485,7 @@ var mapCheckboxProps = ({
 // src/Table/TableCheckboxCell.tsx
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react47.useRef)(null);
+  const ref = (0, import_react48.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -3430,7 +3513,7 @@ var TableCheckboxCell = ({ cell }) => {
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_focus13 = require("@react-aria/focus");
 var import_interactions8 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
@@ -3444,7 +3527,7 @@ var TableColumnHeader = ({
   width = "auto"
 }) => {
   var _a, _b;
-  const ref = (0, import_react48.useRef)(null);
+  const ref = (0, import_react49.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -3484,18 +3567,18 @@ var TableHeader = ({ children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_table6 = require("@react-aria/table");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react49.useRef)(null);
+  const ref = (0, import_react50.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
   return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_focus14 = require("@react-aria/focus");
 var import_interactions9 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
@@ -3503,7 +3586,7 @@ var import_utils24 = require("@react-aria/utils");
 var import_system63 = require("@marigold/system");
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react50.useRef)(null);
+  const ref = (0, import_react51.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
   const classNames2 = (0, import_system63.useClassNames)({
@@ -3549,7 +3632,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_focus15 = require("@react-aria/focus");
 var import_interactions10 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
@@ -3560,7 +3643,7 @@ var TableSelectAllCell = ({
   column,
   width = "auto"
 }) => {
-  const ref = (0, import_react51.useRef)(null);
+  const ref = (0, import_react52.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -3602,7 +3685,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react52.useRef)(null);
+  const tableRef = (0, import_react53.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -3722,14 +3805,14 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_focus16 = require("@react-aria/focus");
 var import_interactions11 = require("@react-aria/interactions");
 var import_textfield = require("@react-aria/textfield");
 var import_utils27 = require("@react-aria/utils");
 var import_system67 = require("@marigold/system");
 var import_jsx_runtime82 = require("react/jsx-runtime");
-var TextArea = (0, import_react53.forwardRef)(
+var TextArea = (0, import_react54.forwardRef)(
   ({
     variant,
     size,
@@ -3796,14 +3879,14 @@ var TextArea = (0, import_react53.forwardRef)(
 );
 
 // src/TextField/TextField.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_focus17 = require("@react-aria/focus");
 var import_interactions12 = require("@react-aria/interactions");
 var import_textfield2 = require("@react-aria/textfield");
 var import_utils28 = require("@react-aria/utils");
 var import_system68 = require("@marigold/system");
 var import_jsx_runtime83 = require("react/jsx-runtime");
-var TextField = (0, import_react54.forwardRef)(
+var TextField = (0, import_react55.forwardRef)(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
     const inputRef = (0, import_utils28.useObjectRef)(ref);
@@ -3894,12 +3977,12 @@ var import_tooltip3 = require("@react-aria/tooltip");
 var import_system70 = require("@marigold/system");
 
 // src/Tooltip/Context.ts
-var import_react55 = require("react");
-var TooltipContext = (0, import_react55.createContext)({});
-var useTooltipContext = () => (0, import_react55.useContext)(TooltipContext);
+var import_react56 = require("react");
+var TooltipContext = (0, import_react56.createContext)({});
+var useTooltipContext = () => (0, import_react56.useContext)(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_focus18 = require("@react-aria/focus");
 var import_overlays8 = require("@react-aria/overlays");
 var import_tooltip = require("@react-aria/tooltip");
@@ -3913,7 +3996,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = import_react56.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = import_react57.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -3921,8 +4004,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = (0, import_react56.useRef)(null);
-  const overlayRef = (0, import_react56.useRef)(null);
+  const tooltipTriggerRef = (0, import_react57.useRef)(null);
+  const overlayRef = (0, import_react57.useRef)(null);
   const state = (0, import_tooltip2.useTooltipTriggerState)(props);
   const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)(
     props,
@@ -3993,13 +4076,13 @@ Tooltip.Trigger = TooltipTrigger;
 var import_collections6 = require("@react-stately/collections");
 
 // src/TagGroup/TagGroup.tsx
-var import_react58 = require("react");
+var import_react59 = require("react");
 var import_tag2 = require("@react-aria/tag");
 var import_list = require("@react-stately/list");
 var import_system72 = require("@marigold/system");
 
 // src/TagGroup/Tag.tsx
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var import_button6 = require("@react-aria/button");
 var import_focus19 = require("@react-aria/focus");
 var import_tag = require("@react-aria/tag");
@@ -4007,7 +4090,7 @@ var import_utils29 = require("@react-aria/utils");
 var import_system71 = require("@marigold/system");
 var import_jsx_runtime87 = require("react/jsx-runtime");
 var CloseButton2 = ({ className, ...props }) => {
-  const ref = (0, import_react57.useRef)(null);
+  const ref = (0, import_react58.useRef)(null);
   const { buttonProps } = (0, import_button6.useButton)({ ...props }, ref);
   return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("button", { className, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
@@ -4016,7 +4099,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     item,
     ...rest
   };
-  let ref = import_react57.default.useRef(null);
+  let ref = import_react58.default.useRef(null);
   let { focusProps } = (0, import_focus19.useFocusRing)({ within: true });
   const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = (0, import_tag.useTag)(
     {
@@ -4049,7 +4132,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
 
 // src/TagGroup/TagGroup.tsx
 var import_jsx_runtime88 = require("react/jsx-runtime");
-var import_react59 = require("react");
+var import_react60 = require("react");
 var TagGroup = ({
   width,
   required,
@@ -4062,7 +4145,7 @@ var TagGroup = ({
     validationState: error ? "invalid" : "valid",
     ...rest
   };
-  const inputRef = (0, import_react58.useRef)(null);
+  const inputRef = (0, import_react59.useRef)(null);
   const state = (0, import_list.useListState)(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = (0, import_tag2.useTagGroup)(props, state, inputRef);
   const stateProps = (0, import_system72.useStateProps)({
@@ -4088,7 +4171,7 @@ var TagGroup = ({
           role: "presentation",
           ref: inputRef,
           className: "flex flex-wrap items-start gap-1",
-          children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_react59.createElement)(
+          children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_react60.createElement)(
             Tag,
             {
               ...item.props,
@@ -4114,10 +4197,10 @@ Tag2.Group = TagGroup;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react60 = require("react");
+var import_react61 = require("react");
 var import_system73 = require("@marigold/system");
 var import_jsx_runtime89 = require("react/jsx-runtime");
-var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+var XLoader = (0, import_react61.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
   import_system73.SVG,
   {
     id: "XLoader",
@@ -4331,19 +4414,19 @@ var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 ));
 
 // src/Tabs/Tabs.tsx
-var import_react64 = require("react");
+var import_react65 = require("react");
 var import_tabs3 = require("@react-aria/tabs");
 var import_collections7 = require("@react-stately/collections");
 var import_tabs4 = require("@react-stately/tabs");
 var import_system76 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react61 = require("react");
-var TabContext = (0, import_react61.createContext)({});
-var useTabContext = () => (0, import_react61.useContext)(TabContext);
+var import_react62 = require("react");
+var TabContext = (0, import_react62.createContext)({});
+var useTabContext = () => (0, import_react62.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_interactions13 = require("@react-aria/interactions");
 var import_tabs = require("@react-aria/tabs");
 var import_utils30 = require("@react-aria/utils");
@@ -4351,7 +4434,7 @@ var import_system74 = require("@marigold/system");
 var import_jsx_runtime90 = require("react/jsx-runtime");
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
-  const ref = (0, import_react62.useRef)(null);
+  const ref = (0, import_react63.useRef)(null);
   const { tabProps, isSelected } = (0, import_tabs.useTab)({ key }, state, ref);
   const disabled = tabProps["aria-disabled"];
   const { hoverProps, isHovered } = (0, import_interactions13.useHover)({
@@ -4375,13 +4458,13 @@ var Tab = ({ item, state }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_tabs2 = require("@react-aria/tabs");
 var import_system75 = require("@marigold/system");
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var TabPanel = ({ state, ...props }) => {
   var _a;
-  const ref = (0, import_react63.useRef)(null);
+  const ref = (0, import_react64.useRef)(null);
   const { tabPanelProps } = (0, import_tabs2.useTabPanel)(props, state, ref);
   const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
   const { classNames: classNames2 } = useTabContext();
@@ -4398,7 +4481,7 @@ var Tabs = ({
   ...rest
 }) => {
   var _a;
-  const ref = (0, import_react64.useRef)(null);
+  const ref = (0, import_react65.useRef)(null);
   const props = {
     isDisabled: disabled,
     ...rest