@marigold/components 12.0.1 → 12.0.3

package/dist/index.js

@@ -212,7 +212,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment15 = REACT_FRAGMENT_TYPE;
+        var Fragment14 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -271,7 +271,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element2;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment15;
+        exports2.Fragment = Fragment14;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal;
@@ -905,7 +905,7 @@ __export(index_exports, {
   Popover: () => _Popover,
   Radio: () => _Radio,
   RadioGroup: () => _RadioGroup,
-  RouterProvider: () => import_react_aria_components74.RouterProvider,
+  RouterProvider: () => import_react_aria_components75.RouterProvider,
   Scrollable: () => Scrollable,
   SearchField: () => _SearchField,
   SectionMessage: () => SectionMessage,
@@ -923,11 +923,11 @@ __export(index_exports, {
   TextField: () => _TextField,
   ThemeProvider: () => import_system15.ThemeProvider,
   Tiles: () => Tiles,
+  TimeField: () => _TimeField,
   Tooltip: () => _Tooltip,
   Underlay: () => Underlay,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   XLoader: () => XLoader,
-  _Calendar: () => _Calendar,
   gridColsAlign: () => gridColsAlign,
   gridColumn: () => gridColumn,
   useAsyncList: () => import_data.useAsyncList,
@@ -978,7 +978,7 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 var AccordionHeader = ({ children }) => {
   const { classNames: classNames3 } = useAccordionContext();
   const { isExpanded } = (0, import_react3.useContext)(import_react_aria_components.DisclosureStateContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components.Heading, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components.Button, { slot: "trigger", className: classNames3.header, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components.Heading, { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components.Button, { slot: "trigger", className: classNames3.header, children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       ChevronDown,
@@ -2718,14 +2718,23 @@ var Grid = ({
   areas,
   columns,
   rows,
+  alignX,
+  alignY,
   height = "auto",
   space = 0,
   ...props
 }) => {
+  var _a, _b, _c, _d;
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
-      className: (0, import_system50.cn)("grid", import_system50.gapSpace[space], import_system50.height[height]),
+      className: (0, import_system50.cn)(
+        "grid",
+        alignX && ((_b = (_a = import_system50.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system50.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system50.gapSpace[space],
+        import_system50.height[height]
+      ),
       style: {
         gridTemplateAreas: parseGridAreas(areas),
         gridTemplateColumns: parseTemplateValue(columns),
@@ -2922,9 +2931,9 @@ var _DateField = (0, import_react32.forwardRef)(
 );
 
 // src/Calendar/Calendar.tsx
-var import_react37 = require("react");
-var import_react_aria_components42 = require("react-aria-components");
-var import_system61 = require("@marigold/system");
+var import_react38 = require("react");
+var import_react_aria_components43 = require("react-aria-components");
+var import_system63 = require("@marigold/system");
 
 // src/Calendar/CalendarGrid.tsx
 var import_react_aria_components38 = require("react-aria-components");
@@ -2978,10 +2987,15 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_react_aria_components39 = require("react-aria-components");
 var import_system59 = require("@marigold/system");
 
+// src/Calendar/Context.tsx
+var import_react34 = require("react");
+var CalendarContext = (0, import_react34.createContext)({});
+var useCalendarContext = () => (0, import_react34.useContext)(CalendarContext);
+
 // src/Calendar/useFormattedMonths.tsx
 var import_i18n4 = require("@react-aria/i18n");
 function useFormattedMonths(timeZone, focusedDate) {
@@ -3005,16 +3019,16 @@ function CalendarListBox({
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = (0, import_react34.useContext)(import_react_aria_components39.CalendarStateContext);
+  const state = (0, import_react35.useContext)(import_react_aria_components39.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = (0, import_system59.useClassNames)({ component: "Select" });
+  const { classNames: classNames3 } = useCalendarContext();
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "button",
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: (0, import_system59.cn)(buttonStyles, selectClassNames),
+      className: (0, import_system59.cn)(buttonStyles, classNames3.select),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
@@ -3062,33 +3076,40 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-var import_react35 = require("react");
+var import_react36 = require("react");
 var import_react_aria_components40 = require("react-aria-components");
+var import_react_aria_components41 = require("react-aria-components");
+var import_system61 = require("@marigold/system");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react35.useContext)(import_react_aria_components40.CalendarStateContext);
+  const state = (0, import_react36.useContext)(import_react_aria_components40.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange2 = (index2) => {
     let value = Number(index2) + 1;
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
+  const { classNames: classNames3 } = useCalendarContext();
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     "ul",
     {
       "data-testid": "monthOptions",
-      className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
+      className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 p-2",
       children: months.map((month, index2) => {
+        const isSelected = index2 === state.focusedDate.month - 1;
         return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-          _Button,
+          import_react_aria_components41.Button,
           {
             slot: "previous",
-            variant: index2 === state.focusedDate.month - 1 ? "secondary" : "text",
-            size: "small",
             onPress: () => {
               onChange2(index2);
               setSelectedDropdown(void 0);
             },
+            "aria-current": isSelected,
+            className: (0, import_system61.cn)(
+              classNames3.calendarListboxButton,
+              "inline-flex items-center justify-center gap-[0.5ch]"
+            ),
             children: month.substring(0, 3)
           },
           index2 + 1
@@ -3100,12 +3121,14 @@ var MonthListBox = ({ setSelectedDropdown }) => {
 var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
-var import_react36 = require("react");
-var import_react_aria_components41 = require("react-aria-components");
+var import_react37 = require("react");
+var import_react_aria_components42 = require("react-aria-components");
 var import_i18n5 = require("@react-aria/i18n");
+var import_system62 = require("@marigold/system");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react36.useContext)(import_react_aria_components41.CalendarStateContext);
+  const state = (0, import_react37.useContext)(import_react_aria_components42.CalendarStateContext);
+  const { classNames: classNames3 } = useCalendarContext();
   const years = [];
   let formatter = (0, import_i18n5.useDateFormatter)({
     year: "numeric",
@@ -3118,8 +3141,8 @@ var YearListBox = ({ setSelectedDropdown }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
-  const activeButtonRef = (0, import_react36.useRef)(null);
-  (0, import_react36.useEffect)(() => {
+  const activeButtonRef = (0, import_react37.useRef)(null);
+  (0, import_react37.useEffect)(() => {
     if (activeButtonRef.current) {
       const activeButton = activeButtonRef.current;
       activeButton == null ? void 0 : activeButton.scrollIntoView({
@@ -3139,24 +3162,26 @@ var YearListBox = ({ setSelectedDropdown }) => {
       "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, index2) => {
-        const isActive = +year.formatted === state.focusedDate.year;
+        const isSelected = +year.formatted === state.focusedDate.year;
         return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           "div",
           {
-            ref: isActive ? activeButtonRef : null,
-            style: { height: "100%", width: "100%" },
+            ref: isSelected ? activeButtonRef : null,
+            className: "flex size-full justify-center",
             children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-              _Button,
+              import_react_aria_components42.Button,
               {
                 slot: "previous",
-                disabled: state.isDisabled,
-                variant: isActive ? "secondary" : "text",
-                size: "small",
+                className: (0, import_system62.cn)(
+                  classNames3.calendarListboxButton,
+                  "inline-flex items-center justify-center gap-[0.5ch]"
+                ),
                 onPress: () => {
                   onChange2(index2);
                   setSelectedDropdown(void 0);
                 },
                 "data-value": year.formatted,
+                "aria-current": isSelected,
                 children: year.formatted
               },
               index2
@@ -3185,54 +3210,66 @@ var _Calendar = ({
     isDateUnavailable: dateUnavailable,
     ...rest
   };
-  const classNames3 = (0, import_system61.useClassNames)({ component: "Calendar" });
-  const [selectedDropdown, setSelectedDropdown] = (0, import_react37.useState)();
+  const classNames3 = (0, import_system63.useClassNames)({ component: "Calendar", size: size2, variant });
+  const [selectedDropdown, setSelectedDropdown] = (0, import_react38.useState)();
   const ViewMap = {
     month: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MonthListBox_default, { setSelectedDropdown }),
     year: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-    import_react_aria_components42.Calendar,
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CalendarContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+    import_react_aria_components43.Calendar,
     {
-      className: (0, import_system61.cn)(
-        "flex min-h-[350px] w-fit flex-col rounded-xs p-4",
+      className: (0, import_system63.cn)(
+        "relative flex min-h-[350px] w-fit flex-col rounded-xs p-4",
         classNames3.calendar
       ),
       ...props,
-      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex w-fit gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-              CalendarListBox,
-              {
-                type: "month",
-                isDisabled: props.isDisabled,
-                setSelectedDropdown
-              }
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          "div",
+          {
+            className: (0, import_system63.cn)(
+              "pointer-events-none absolute top-1/2 left-0 w-full -translate-y-1/2 opacity-0",
+              selectedDropdown && "pointer-events-auto opacity-100"
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-              CalendarListBox,
-              {
-                type: "year",
-                isDisabled: props.isDisabled,
-                setSelectedDropdown
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MonthControls_default, {})
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(_CalendarGrid, {})
-      ] })
+            children: ViewMap[selectedDropdown]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+          "div",
+          {
+            className: (0, import_system63.cn)(
+              "flex flex-col",
+              selectedDropdown && "pointer-events-none opacity-0"
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "flex w-fit gap-4", children: ["month", "year"].map((dateType) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                  CalendarListBox,
+                  {
+                    type: dateType,
+                    isDisabled: props.isDisabled,
+                    setSelectedDropdown
+                  },
+                  dateType
+                )) }),
+                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MonthControls_default, {})
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(_CalendarGrid, {})
+            ]
+          }
+        )
+      ]
     }
-  );
+  ) });
 };
 
 // src/DatePicker/DatePicker.tsx
-var import_react38 = __toESM(require("react"));
-var import_react_aria_components43 = require("react-aria-components");
-var import_system62 = require("@marigold/system");
+var import_react39 = __toESM(require("react"));
+var import_react_aria_components44 = require("react-aria-components");
+var import_system64 = require("@marigold/system");
 var import_jsx_runtime72 = require("react/jsx-runtime");
-var _DatePicker = import_react38.default.forwardRef(
+var _DatePicker = import_react39.default.forwardRef(
   ({
     dateUnavailable,
     disabled,
@@ -3255,7 +3292,7 @@ var _DatePicker = import_react38.default.forwardRef(
       granularity,
       ...rest
     };
-    const classNames3 = (0, import_system62.useClassNames)({
+    const classNames3 = (0, import_system64.useClassNames)({
       component: "DatePicker",
       size: size2,
       variant
@@ -3263,7 +3300,7 @@ var _DatePicker = import_react38.default.forwardRef(
     return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
       FieldBase,
       {
-        as: import_react_aria_components43.DatePicker,
+        as: import_react_aria_components44.DatePicker,
         variant,
         size: size2,
         ...props,
@@ -3285,7 +3322,7 @@ var _DatePicker = import_react38.default.forwardRef(
               ) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_react_aria_components43.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Calendar, { disabled }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_react_aria_components44.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Calendar, { disabled }) }) })
         ]
       }
     );
@@ -3293,43 +3330,43 @@ var _DatePicker = import_react38.default.forwardRef(
 );
 
 // src/Inset/Inset.tsx
-var import_system63 = require("@marigold/system");
+var import_system65 = require("@marigold/system");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
   "div",
   {
-    className: (0, import_system63.cn)(
-      space && import_system63.paddingSpace[space],
-      !space && spaceX && import_system63.paddingSpaceX[spaceX],
-      !space && spaceY && import_system63.paddingSpaceY[spaceY]
+    className: (0, import_system65.cn)(
+      space && import_system65.paddingSpace[space],
+      !space && spaceX && import_system65.paddingSpaceX[spaceX],
+      !space && spaceY && import_system65.paddingSpaceY[spaceY]
     ),
     children
   }
 );
 
 // src/Link/Link.tsx
-var import_react39 = require("react");
-var import_react_aria_components44 = require("react-aria-components");
-var import_system64 = require("@marigold/system");
+var import_react40 = require("react");
+var import_react_aria_components45 = require("react-aria-components");
+var import_system66 = require("@marigold/system");
 var import_jsx_runtime74 = require("react/jsx-runtime");
-var _Link = (0, import_react39.forwardRef)(
+var _Link = (0, import_react40.forwardRef)(
   ({ variant, size: size2, disabled, children, ...props }, ref) => {
-    const classNames3 = (0, import_system64.useClassNames)({
+    const classNames3 = (0, import_system66.useClassNames)({
       component: "Link",
       variant,
       size: size2
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react_aria_components44.Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react_aria_components45.Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-var import_system65 = require("@marigold/system");
+var import_system67 = require("@marigold/system");
 
 // src/List/Context.ts
-var import_react40 = require("react");
-var ListContext = (0, import_react40.createContext)({});
-var useListContext = () => (0, import_react40.useContext)(ListContext);
+var import_react41 = require("react");
+var ListContext = (0, import_react41.createContext)({});
+var useListContext = () => (0, import_react41.useContext)(ListContext);
 
 // src/List/ListItem.tsx
 var import_jsx_runtime75 = require("react/jsx-runtime");
@@ -3348,31 +3385,31 @@ var List = ({
   ...props
 }) => {
   const Component2 = as;
-  const classNames3 = (0, import_system65.useClassNames)({ component: "List", variant, size: size2 });
+  const classNames3 = (0, import_system67.useClassNames)({ component: "List", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-var import_react_aria_components47 = require("react-aria-components");
-var import_system68 = require("@marigold/system");
+var import_react_aria_components48 = require("react-aria-components");
+var import_system70 = require("@marigold/system");
 
 // src/Menu/MenuItem.tsx
-var import_react_aria_components45 = require("react-aria-components");
-var import_system66 = require("@marigold/system");
+var import_react_aria_components46 = require("react-aria-components");
+var import_system68 = require("@marigold/system");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var _MenuItem = ({ children, ...props }) => {
-  const classNames3 = (0, import_system66.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react_aria_components45.MenuItem, { ...props, className: classNames3.item, children });
+  const classNames3 = (0, import_system68.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react_aria_components46.MenuItem, { ...props, className: classNames3.item, children });
 };
 
 // src/Menu/MenuSection.tsx
-var import_react_aria_components46 = require("react-aria-components");
-var import_system67 = require("@marigold/system");
+var import_react_aria_components47 = require("react-aria-components");
+var import_system69 = require("@marigold/system");
 var import_jsx_runtime78 = require("react/jsx-runtime");
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = (0, import_system67.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_react_aria_components46.MenuSection, { ...props, children: [
+  const className = (0, import_system69.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_react_aria_components47.MenuSection, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(_Header, { className: className.section, children: title }),
     children
   ] });
@@ -3391,10 +3428,10 @@ var _Menu = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const classNames3 = (0, import_system68.useClassNames)({ component: "Menu", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react_aria_components47.MenuTrigger, { ...props, children: [
+  const classNames3 = (0, import_system70.useClassNames)({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react_aria_components48.MenuTrigger, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
-      import_react_aria_components47.Button,
+      import_react_aria_components48.Button,
       {
         className: classNames3.button,
         "aria-label": ariaLabel,
@@ -3402,15 +3439,15 @@ var _Menu = ({
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react_aria_components47.Menu, { ...props, className: classNames3.container, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react_aria_components48.Menu, { ...props, className: classNames3.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
 _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
-var import_react_aria_components48 = require("react-aria-components");
-var import_system69 = require("@marigold/system");
+var import_react_aria_components49 = require("react-aria-components");
+var import_system71 = require("@marigold/system");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var ActionMenu = ({
   variant,
@@ -3418,39 +3455,39 @@ var ActionMenu = ({
   disabled,
   ...props
 }) => {
-  const classNames3 = (0, import_system69.useClassNames)({ component: "Menu", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_react_aria_components48.MenuTrigger, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react_aria_components48.Button, { className: classNames3.button, isDisabled: disabled, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_system69.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime80.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react_aria_components48.Menu, { ...props, className: classNames3.container, children: props.children }) })
+  const classNames3 = (0, import_system71.useClassNames)({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_react_aria_components49.MenuTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react_aria_components49.Button, { className: classNames3.button, isDisabled: disabled, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_system71.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime80.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_runtime80.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react_aria_components49.Menu, { ...props, className: classNames3.container, children: props.children }) })
   ] });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-var import_react42 = require("react");
+var import_react43 = require("react");
 var import_button = require("@react-aria/button");
-var import_system72 = require("@marigold/system");
+var import_system74 = require("@marigold/system");
 
 // src/SectionMessage/Context.tsx
-var import_react41 = require("react");
-var SectionMessageContext = (0, import_react41.createContext)({});
-var useSectionMessageContext = () => (0, import_react41.useContext)(SectionMessageContext);
+var import_react42 = require("react");
+var SectionMessageContext = (0, import_react42.createContext)({});
+var useSectionMessageContext = () => (0, import_react42.useContext)(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
-var import_system70 = require("@marigold/system");
+var import_system72 = require("@marigold/system");
 var import_jsx_runtime81 = require("react/jsx-runtime");
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_system70.cn)("[grid-area:content]", classNames3.content), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_system72.cn)("[grid-area:content]", classNames3.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
-var import_system71 = require("@marigold/system");
+var import_system73 = require("@marigold/system");
 var import_jsx_runtime82 = require("react/jsx-runtime");
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_system71.cn)("[grid-area:title]", classNames3.title), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_system73.cn)("[grid-area:title]", classNames3.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
@@ -3530,14 +3567,14 @@ var SectionMessage = ({
   onCloseChange,
   ...props
 }) => {
-  const buttonRef = (0, import_react42.useRef)(null);
-  const classNames3 = (0, import_system72.useClassNames)({
+  const buttonRef = (0, import_react43.useRef)(null);
+  const classNames3 = (0, import_system74.useClassNames)({
     component: "SectionMessage",
     variant,
     size: size2
   });
   const Icon4 = icons[variant];
-  const [internalVisible, setInternalVisible] = (0, import_react42.useState)(true);
+  const [internalVisible, setInternalVisible] = (0, import_react43.useState)(true);
   const isCurrentlyVisible = close != null ? close : internalVisible;
   const { buttonProps } = (0, import_button.useButton)(props, buttonRef);
   const handleClose = () => {
@@ -3552,16 +3589,16 @@ var SectionMessage = ({
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
-      className: (0, import_system72.cn)("grid auto-rows-min", classNames3.container),
+      className: (0, import_system74.cn)("grid auto-rows-min", classNames3.container),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_system72.cn)("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon4, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_system74.cn)("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon4, {}) }),
         closeButton && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           CloseButton,
           {
             ...buttonProps,
             ref: buttonRef,
             "aria-label": "close",
-            className: (0, import_system72.cn)("[grid-area:close]", classNames3.close),
+            className: (0, import_system74.cn)("[grid-area:close]", classNames3.close),
             onPress: handleClose
           }
         ),
@@ -3574,7 +3611,7 @@ SectionMessage.Title = SectionMessageTitle;
 SectionMessage.Content = SectionMessageContent;
 
 // src/Multiselect/Multiselect.tsx
-var import_react_aria_components49 = require("react-aria-components");
+var import_react_aria_components50 = require("react-aria-components");
 
 // ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -3713,34 +3750,34 @@ function _objectWithoutProperties(e, t) {
   return i;
 }
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/useStateManager-7e1e8489.esm.js
-var import_react43 = require("react");
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/useStateManager-7e1e8489.esm.js
+var import_react44 = require("react");
 var _excluded = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
 function useStateManager(_ref3) {
   var _ref$defaultInputValu = _ref3.defaultInputValue, defaultInputValue = _ref$defaultInputValu === void 0 ? "" : _ref$defaultInputValu, _ref$defaultMenuIsOpe = _ref3.defaultMenuIsOpen, defaultMenuIsOpen = _ref$defaultMenuIsOpe === void 0 ? false : _ref$defaultMenuIsOpe, _ref$defaultValue = _ref3.defaultValue, defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue, propsInputValue = _ref3.inputValue, propsMenuIsOpen = _ref3.menuIsOpen, propsOnChange = _ref3.onChange, propsOnInputChange = _ref3.onInputChange, propsOnMenuClose = _ref3.onMenuClose, propsOnMenuOpen = _ref3.onMenuOpen, propsValue = _ref3.value, restSelectProps = _objectWithoutProperties(_ref3, _excluded);
-  var _useState = (0, import_react43.useState)(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
-  var _useState3 = (0, import_react43.useState)(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
-  var _useState5 = (0, import_react43.useState)(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
-  var onChange2 = (0, import_react43.useCallback)(function(value2, actionMeta) {
+  var _useState = (0, import_react44.useState)(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
+  var _useState3 = (0, import_react44.useState)(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
+  var _useState5 = (0, import_react44.useState)(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
+  var onChange2 = (0, import_react44.useCallback)(function(value2, actionMeta) {
     if (typeof propsOnChange === "function") {
       propsOnChange(value2, actionMeta);
     }
     setStateValue(value2);
   }, [propsOnChange]);
-  var onInputChange = (0, import_react43.useCallback)(function(value2, actionMeta) {
+  var onInputChange = (0, import_react44.useCallback)(function(value2, actionMeta) {
     var newValue;
     if (typeof propsOnInputChange === "function") {
       newValue = propsOnInputChange(value2, actionMeta);
     }
     setStateInputValue(newValue !== void 0 ? newValue : value2);
   }, [propsOnInputChange]);
-  var onMenuOpen = (0, import_react43.useCallback)(function() {
+  var onMenuOpen = (0, import_react44.useCallback)(function() {
     if (typeof propsOnMenuOpen === "function") {
       propsOnMenuOpen();
     }
     setStateMenuIsOpen(true);
   }, [propsOnMenuOpen]);
-  var onMenuClose = (0, import_react43.useCallback)(function() {
+  var onMenuClose = (0, import_react44.useCallback)(function() {
     if (typeof propsOnMenuClose === "function") {
       propsOnMenuClose();
     }
@@ -3771,9 +3808,9 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/react-select.esm.js
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/react-select.esm.js
 var React11 = __toESM(require("react"));
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(a, n) {
@@ -3879,13 +3916,13 @@ function _toConsumableArray(r) {
   return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 }
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/Select-aab027f3.esm.js
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/Select-aab027f3.esm.js
 var React10 = __toESM(require("react"));
-var import_react48 = require("react");
+var import_react49 = require("react");
 
-// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.3_react@19.1.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
+// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.5_react@19.1.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 var React8 = __toESM(require("react"));
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // ../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
 var isDevelopment = false;
@@ -5057,7 +5094,7 @@ var syncFallback = function syncFallback2(create) {
 var useInsertionEffect2 = React7["useInsertionEffect"] ? React7["useInsertionEffect"] : false;
 var useInsertionEffectAlwaysWithSyncFallback = !isBrowser3 ? syncFallback : useInsertionEffect2 || syncFallback;
 
-// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.3_react@19.1.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
+// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.5_react@19.1.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 var isDevelopment3 = false;
 var isBrowser4 = typeof document !== "undefined";
 var EmotionCacheContext = /* @__PURE__ */ React8.createContext(
@@ -5073,15 +5110,15 @@ var EmotionCacheContext = /* @__PURE__ */ React8.createContext(
 );
 var CacheProvider = EmotionCacheContext.Provider;
 var withEmotionCache = function withEmotionCache2(func) {
-  return /* @__PURE__ */ (0, import_react44.forwardRef)(function(props, ref) {
-    var cache = (0, import_react44.useContext)(EmotionCacheContext);
+  return /* @__PURE__ */ (0, import_react45.forwardRef)(function(props, ref) {
+    var cache = (0, import_react45.useContext)(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
 if (!isBrowser4) {
   withEmotionCache = function withEmotionCache3(func) {
     return function(props) {
-      var cache = (0, import_react44.useContext)(EmotionCacheContext);
+      var cache = (0, import_react45.useContext)(EmotionCacheContext);
       if (cache === null) {
         cache = createCache({
           key: "css"
@@ -5161,7 +5198,7 @@ var Emotion = /* @__PURE__ */ withEmotionCache(function(props, cache, ref) {
 });
 var Emotion$1 = Emotion;
 
-// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.3_react@19.1.0/node_modules/@emotion/react/dist/emotion-react.esm.js
+// ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.5_react@19.1.0/node_modules/@emotion/react/dist/emotion-react.esm.js
 var React9 = __toESM(require("react"));
 var import_extends2 = __toESM(require_extends());
 var import_hoist_non_react_statics = __toESM(require_hoist_non_react_statics_cjs());
@@ -5212,8 +5249,8 @@ function _taggedTemplateLiteral(e, t) {
   }));
 }
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/index-641ee5b8.esm.js
-var import_react47 = require("react");
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/index-641ee5b8.esm.js
+var import_react48 = require("react");
 var import_react_dom = require("react-dom");
 
 // ../../node_modules/.pnpm/@floating-ui+utils@0.2.9/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
@@ -5613,12 +5650,12 @@ function autoUpdate(reference, floating, update, options2) {
   };
 }
 
-// ../../node_modules/.pnpm/use-isomorphic-layout-effect@1.2.0_@types+react@19.1.3_react@19.1.0/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
-var import_react45 = require("react");
+// ../../node_modules/.pnpm/use-isomorphic-layout-effect@1.2.0_@types+react@19.1.5_react@19.1.0/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
+var import_react46 = require("react");
 var isClient = typeof document !== "undefined";
-var index = isClient ? import_react45.useLayoutEffect : import_react45.useEffect;
+var index = isClient ? import_react46.useLayoutEffect : import_react46.useEffect;
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/index-641ee5b8.esm.js
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/index-641ee5b8.esm.js
 var _excluded$4 = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
 var noop = function noop2() {
 };
@@ -5950,13 +5987,13 @@ var menuCSS = function menuCSS2(_ref23, unstyled) {
     marginTop: spacing2.menuGutter
   });
 };
-var PortalPlacementContext = /* @__PURE__ */ (0, import_react47.createContext)(null);
+var PortalPlacementContext = /* @__PURE__ */ (0, import_react48.createContext)(null);
 var MenuPlacer = function MenuPlacer2(props) {
   var children = props.children, minMenuHeight = props.minMenuHeight, maxMenuHeight = props.maxMenuHeight, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition, menuShouldScrollIntoView = props.menuShouldScrollIntoView, theme = props.theme;
-  var _ref3 = (0, import_react47.useContext)(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
-  var ref = (0, import_react47.useRef)(null);
-  var _useState = (0, import_react47.useState)(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
-  var _useState3 = (0, import_react47.useState)(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
+  var _ref3 = (0, import_react48.useContext)(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
+  var ref = (0, import_react48.useRef)(null);
+  var _useState = (0, import_react48.useState)(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
+  var _useState3 = (0, import_react48.useState)(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
   var controlHeight2 = theme.spacing.controlHeight;
   index(function() {
     var menuEl = ref.current;
@@ -6058,16 +6095,16 @@ var menuPortalCSS = function menuPortalCSS2(_ref8) {
 };
 var MenuPortal = function MenuPortal2(props) {
   var appendTo = props.appendTo, children = props.children, controlElement = props.controlElement, innerProps = props.innerProps, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition;
-  var menuPortalRef = (0, import_react47.useRef)(null);
-  var cleanupRef = (0, import_react47.useRef)(null);
-  var _useState5 = (0, import_react47.useState)(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
-  var portalPlacementContext = (0, import_react47.useMemo)(function() {
+  var menuPortalRef = (0, import_react48.useRef)(null);
+  var cleanupRef = (0, import_react48.useRef)(null);
+  var _useState5 = (0, import_react48.useState)(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
+  var portalPlacementContext = (0, import_react48.useMemo)(function() {
     return {
       setPortalPlacement
     };
   }, []);
-  var _useState7 = (0, import_react47.useState)(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
-  var updateComputedPosition = (0, import_react47.useCallback)(function() {
+  var _useState7 = (0, import_react48.useState)(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
+  var updateComputedPosition = (0, import_react48.useCallback)(function() {
     if (!controlElement) return;
     var rect = getBoundingClientObj(controlElement);
     var scrollDistance = menuPosition === "fixed" ? 0 : window.pageYOffset;
@@ -6082,7 +6119,7 @@ var MenuPortal = function MenuPortal2(props) {
   index(function() {
     updateComputedPosition();
   }, [updateComputedPosition]);
-  var runAutoUpdate = (0, import_react47.useCallback)(function() {
+  var runAutoUpdate = (0, import_react48.useCallback)(function() {
     if (typeof cleanupRef.current === "function") {
       cleanupRef.current();
       cleanupRef.current = null;
@@ -6096,7 +6133,7 @@ var MenuPortal = function MenuPortal2(props) {
   index(function() {
     runAutoUpdate();
   }, [runAutoUpdate]);
-  var setMenuPortalElement = (0, import_react47.useCallback)(function(menuPortalElement) {
+  var setMenuPortalElement = (0, import_react48.useCallback)(function(menuPortalElement) {
     menuPortalRef.current = menuPortalElement;
     runAutoUpdate();
   }, [runAutoUpdate]);
@@ -6692,7 +6729,7 @@ function memoizeOne(resultFn, isEqual2) {
   return memoized;
 }
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/Select-aab027f3.esm.js
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/Select-aab027f3.esm.js
 function _EMOTION_STRINGIFIED_CSS_ERROR__$2() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
@@ -6767,10 +6804,10 @@ var LiveRegion = function LiveRegion2(props) {
   var ariaLiveMessages = selectProps.ariaLiveMessages, getOptionLabel4 = selectProps.getOptionLabel, inputValue = selectProps.inputValue, isMulti = selectProps.isMulti, isOptionDisabled3 = selectProps.isOptionDisabled, isSearchable = selectProps.isSearchable, menuIsOpen = selectProps.menuIsOpen, options2 = selectProps.options, screenReaderStatus2 = selectProps.screenReaderStatus, tabSelectsValue = selectProps.tabSelectsValue, isLoading = selectProps.isLoading;
   var ariaLabel = selectProps["aria-label"];
   var ariaLive = selectProps["aria-live"];
-  var messages = (0, import_react48.useMemo)(function() {
+  var messages = (0, import_react49.useMemo)(function() {
     return _objectSpread2(_objectSpread2({}, defaultAriaLiveMessages), ariaLiveMessages || {});
   }, [ariaLiveMessages]);
-  var ariaSelected = (0, import_react48.useMemo)(function() {
+  var ariaSelected = (0, import_react49.useMemo)(function() {
     var message = "";
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option, selectedOptions = ariaSelection.options, removedValue = ariaSelection.removedValue, removedValues = ariaSelection.removedValues, value = ariaSelection.value;
@@ -6792,7 +6829,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return message;
   }, [ariaSelection, messages, isOptionDisabled3, selectValue, getOptionLabel4]);
-  var ariaFocused = (0, import_react48.useMemo)(function() {
+  var ariaFocused = (0, import_react49.useMemo)(function() {
     var focusMsg = "";
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
@@ -6811,7 +6848,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return focusMsg;
   }, [focusedOption, focusedValue, getOptionLabel4, isOptionDisabled3, messages, focusableOptions, selectValue, isAppleDevice2]);
-  var ariaResults = (0, import_react48.useMemo)(function() {
+  var ariaResults = (0, import_react49.useMemo)(function() {
     var resultsMsg = "";
     if (menuIsOpen && options2.length && !isLoading && messages.onFilter) {
       var resultsMessage = screenReaderStatus2({
@@ -6825,7 +6862,7 @@ var LiveRegion = function LiveRegion2(props) {
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options2, screenReaderStatus2, isLoading]);
   var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === "initial-input-focus";
-  var ariaGuidance = (0, import_react48.useMemo)(function() {
+  var ariaGuidance = (0, import_react49.useMemo)(function() {
     var guidanceMsg = "";
     if (messages.guidance) {
       var context = focusedValue ? "value" : menuIsOpen ? "menu" : "input";
@@ -6841,7 +6878,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx84(import_react48.Fragment, null, jsx84("span", {
+  var ScreenReaderText = jsx84(import_react49.Fragment, null, jsx84("span", {
     id: "aria-selection"
   }, ariaSelected), jsx84("span", {
     id: "aria-focused"
@@ -6850,7 +6887,7 @@ var LiveRegion = function LiveRegion2(props) {
   }, ariaResults), jsx84("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx84(import_react48.Fragment, null, jsx84(A11yText$1, {
+  return jsx84(import_react49.Fragment, null, jsx84(A11yText$1, {
     id
   }, isInitialFocus && ScreenReaderText), jsx84(A11yText$1, {
     "aria-live": ariaLive,
@@ -7197,11 +7234,11 @@ var cancelScroll = function cancelScroll2(event) {
 };
 function useScrollCapture(_ref3) {
   var isEnabled = _ref3.isEnabled, onBottomArrive = _ref3.onBottomArrive, onBottomLeave = _ref3.onBottomLeave, onTopArrive = _ref3.onTopArrive, onTopLeave = _ref3.onTopLeave;
-  var isBottom = (0, import_react48.useRef)(false);
-  var isTop = (0, import_react48.useRef)(false);
-  var touchStart = (0, import_react48.useRef)(0);
-  var scrollTarget = (0, import_react48.useRef)(null);
-  var handleEventDelta = (0, import_react48.useCallback)(function(event, delta) {
+  var isBottom = (0, import_react49.useRef)(false);
+  var isTop = (0, import_react49.useRef)(false);
+  var touchStart = (0, import_react49.useRef)(0);
+  var scrollTarget = (0, import_react49.useRef)(null);
+  var handleEventDelta = (0, import_react49.useCallback)(function(event, delta) {
     if (scrollTarget.current === null) return;
     var _scrollTarget$current = scrollTarget.current, scrollTop = _scrollTarget$current.scrollTop, scrollHeight = _scrollTarget$current.scrollHeight, clientHeight = _scrollTarget$current.clientHeight;
     var target = scrollTarget.current;
@@ -7235,17 +7272,17 @@ function useScrollCapture(_ref3) {
       cancelScroll(event);
     }
   }, [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]);
-  var onWheel = (0, import_react48.useCallback)(function(event) {
+  var onWheel = (0, import_react49.useCallback)(function(event) {
     handleEventDelta(event, event.deltaY);
   }, [handleEventDelta]);
-  var onTouchStart = (0, import_react48.useCallback)(function(event) {
+  var onTouchStart = (0, import_react49.useCallback)(function(event) {
     touchStart.current = event.changedTouches[0].clientY;
   }, []);
-  var onTouchMove = (0, import_react48.useCallback)(function(event) {
+  var onTouchMove = (0, import_react49.useCallback)(function(event) {
     var deltaY = touchStart.current - event.changedTouches[0].clientY;
     handleEventDelta(event, deltaY);
   }, [handleEventDelta]);
-  var startListening = (0, import_react48.useCallback)(function(el) {
+  var startListening = (0, import_react49.useCallback)(function(el) {
     if (!el) return;
     var notPassive = supportsPassiveEvents ? {
       passive: false
@@ -7254,13 +7291,13 @@ function useScrollCapture(_ref3) {
     el.addEventListener("touchstart", onTouchStart, notPassive);
     el.addEventListener("touchmove", onTouchMove, notPassive);
   }, [onTouchMove, onTouchStart, onWheel]);
-  var stopListening = (0, import_react48.useCallback)(function(el) {
+  var stopListening = (0, import_react49.useCallback)(function(el) {
     if (!el) return;
     el.removeEventListener("wheel", onWheel, false);
     el.removeEventListener("touchstart", onTouchStart, false);
     el.removeEventListener("touchmove", onTouchMove, false);
   }, [onTouchMove, onTouchStart, onWheel]);
-  (0, import_react48.useEffect)(function() {
+  (0, import_react49.useEffect)(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     startListening(element);
@@ -7307,9 +7344,9 @@ var listenerOptions = {
 };
 function useScrollLock(_ref3) {
   var isEnabled = _ref3.isEnabled, _ref$accountForScroll = _ref3.accountForScrollbars, accountForScrollbars = _ref$accountForScroll === void 0 ? true : _ref$accountForScroll;
-  var originalStyles = (0, import_react48.useRef)({});
-  var scrollTarget = (0, import_react48.useRef)(null);
-  var addScrollLock = (0, import_react48.useCallback)(function(touchScrollTarget) {
+  var originalStyles = (0, import_react49.useRef)({});
+  var scrollTarget = (0, import_react49.useRef)(null);
+  var addScrollLock = (0, import_react49.useCallback)(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -7342,7 +7379,7 @@ function useScrollLock(_ref3) {
     }
     activeScrollLocks += 1;
   }, [accountForScrollbars]);
-  var removeScrollLock = (0, import_react48.useCallback)(function(touchScrollTarget) {
+  var removeScrollLock = (0, import_react49.useCallback)(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -7363,7 +7400,7 @@ function useScrollLock(_ref3) {
       }
     }
   }, [accountForScrollbars]);
-  (0, import_react48.useEffect)(function() {
+  (0, import_react49.useEffect)(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     addScrollLock(element);
@@ -7407,7 +7444,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx84(import_react48.Fragment, null, lockEnabled && jsx84("div", {
+  return jsx84(import_react49.Fragment, null, lockEnabled && jsx84("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -8985,10 +9022,10 @@ var Select = /* @__PURE__ */ function(_Component) {
     }
   }]);
   return Select3;
-}(import_react48.Component);
+}(import_react49.Component);
 Select.defaultProps = defaultProps;
 
-// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/react-select.esm.js
+// ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.5_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/react-select.esm.js
 var import_objectSpread24 = __toESM(require_objectSpread2());
 var import_slicedToArray3 = __toESM(require_slicedToArray());
 var import_objectWithoutProperties4 = __toESM(require_objectWithoutProperties());
@@ -9001,7 +9038,7 @@ var import_typeof5 = __toESM(require_typeof());
 var import_taggedTemplateLiteral2 = __toESM(require_taggedTemplateLiteral());
 var import_defineProperty3 = __toESM(require_defineProperty());
 var import_react_dom2 = require("react-dom");
-var StateManagedSelect = /* @__PURE__ */ (0, import_react50.forwardRef)(function(props, ref) {
+var StateManagedSelect = /* @__PURE__ */ (0, import_react51.forwardRef)(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React11.createElement(Select, _extends({
     ref
@@ -9009,7 +9046,7 @@ var StateManagedSelect = /* @__PURE__ */ (0, import_react50.forwardRef)(function
 });
 var StateManagedSelect$1 = StateManagedSelect;
 
-// ../../node_modules/.pnpm/@react-aria+label@3.7.17_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useLabel.mjs
+// ../../node_modules/.pnpm/@react-aria+label@3.7.18_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useLabel.mjs
 var import_utils6 = require("@react-aria/utils");
 function $d191a55c9702f145$export$8467354a121f1b9f(props) {
   let { id, label, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, labelElementType = "label" } = props;
@@ -9034,7 +9071,7 @@ function $d191a55c9702f145$export$8467354a121f1b9f(props) {
   };
 }
 
-// ../../node_modules/.pnpm/@react-aria+label@3.7.17_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useField.mjs
+// ../../node_modules/.pnpm/@react-aria+label@3.7.18_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useField.mjs
 var import_utils7 = require("@react-aria/utils");
 function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
   let { description, errorMessage, isInvalid, validationState } = props;
@@ -9073,7 +9110,7 @@ function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
 
 // src/Multiselect/Multiselect.tsx
 var import_utils8 = require("@react-aria/utils");
-var import_system73 = require("@marigold/system");
+var import_system75 = require("@marigold/system");
 var import_jsx_runtime84 = require("react/jsx-runtime");
 var propsToBeRemoved = [
   "clearValue",
@@ -9101,7 +9138,7 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
     {}
   );
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-    import_react_aria_components49.Input,
+    import_react_aria_components50.Input,
     {
       disabled: props.isDisabled,
       ref: innerRef,
@@ -9111,20 +9148,20 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
   );
 };
 var MultiValueRemove2 = ({ innerProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_aria_components49.Button, { slot: "remove", ...innerProps, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime84.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" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_aria_components50.Button, { slot: "remove", ...innerProps, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime84.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" }) }) });
 };
 var getClassNames = (classNames3) => ({
-  control: () => (0, import_system73.cn)(
+  control: () => (0, import_system75.cn)(
     "relative flex items-center box-border flex-wrap justify-between",
     classNames3.container
   ),
   container: () => "pointer-events-auto",
   indicatorSeparator: () => "hidden",
-  menu: () => (0, import_system73.cn)("b", classNames3.listContainer),
-  menuList: () => (0, import_system73.cn)("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
-  multiValue: () => (0, import_system73.cn)(classNames3.tag, "m-0 "),
+  menu: () => (0, import_system75.cn)("b", classNames3.listContainer),
+  menuList: () => (0, import_system75.cn)("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
+  multiValue: () => (0, import_system75.cn)(classNames3.tag, "m-0 "),
   multiValueLabel: () => "p-0",
-  option: ({ isFocused }) => (0, import_system73.cn)(classNames3.option, { isFocused }),
+  option: ({ isFocused }) => (0, import_system75.cn)(classNames3.option, { isFocused }),
   placeholder: () => "hidden",
   valueContainer: () => classNames3.valueContainer
 });
@@ -9145,7 +9182,7 @@ var Multiselect = ({
   onSelectionChange,
   ...rest
 }) => {
-  const classNames3 = (0, import_system73.useClassNames)({
+  const classNames3 = (0, import_system75.useClassNames)({
     component: "MultiSelect",
     size: size2,
     variant
@@ -9164,11 +9201,11 @@ var Multiselect = ({
     errorMessage
   });
   return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-    import_react_aria_components49.Provider,
+    import_react_aria_components50.Provider,
     {
       values: [
         [
-          import_react_aria_components49.FieldErrorContext,
+          import_react_aria_components50.FieldErrorContext,
           {
             isInvalid: !!error,
             validationDetails: {},
@@ -9176,7 +9213,7 @@ var Multiselect = ({
           }
         ],
         [
-          import_react_aria_components49.InputContext,
+          import_react_aria_components50.InputContext,
           {
             ...fieldProps,
             placeholder,
@@ -9184,19 +9221,19 @@ var Multiselect = ({
           }
         ],
         [
-          import_react_aria_components49.ButtonContext,
+          import_react_aria_components50.ButtonContext,
           {
             // react-select doesn't handle readonly so we had to do it manually here
             // keep to the button disabled in read only to prevent menu from opening
             isDisabled: disabled || readOnly,
-            className: (0, import_system73.cn)("flex items-center", classNames3.closeButton)
+            className: (0, import_system75.cn)("flex items-center", classNames3.closeButton)
           }
         ]
       ],
       children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
         "div",
         {
-          className: (0, import_system73.cn)(classNames3.field, "group/field"),
+          className: (0, import_system75.cn)(classNames3.field, "group/field"),
           "data-required": props.required,
           "data-invalid": error,
           "data-readonly": readOnly,
@@ -9259,13 +9296,13 @@ var Multiselect = ({
 };
 
 // src/NumberField/NumberField.tsx
-var import_react51 = require("react");
-var import_react_aria_components51 = require("react-aria-components");
-var import_system75 = require("@marigold/system");
+var import_react52 = require("react");
+var import_react_aria_components52 = require("react-aria-components");
+var import_system77 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
-var import_react_aria_components50 = require("react-aria-components");
-var import_system74 = require("@marigold/system");
+var import_react_aria_components51 = require("react-aria-components");
+var import_system76 = require("@marigold/system");
 var import_jsx_runtime85 = require("react/jsx-runtime");
 var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
   "path",
@@ -9286,9 +9323,9 @@ var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { width:
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
-    import_react_aria_components50.Button,
+    import_react_aria_components51.Button,
     {
-      className: (0, import_system74.cn)(
+      className: (0, import_system76.cn)(
         [
           "flex items-center justify-center",
           "cursor-pointer data-disabled:cursor-not-allowed"
@@ -9303,7 +9340,7 @@ var _StepButton = ({ direction, className, ...props }) => {
 
 // src/NumberField/NumberField.tsx
 var import_jsx_runtime86 = require("react/jsx-runtime");
-var _NumberField = (0, import_react51.forwardRef)(
+var _NumberField = (0, import_react52.forwardRef)(
   ({
     variant,
     size: size2,
@@ -9314,7 +9351,7 @@ var _NumberField = (0, import_react51.forwardRef)(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system75.useClassNames)({
+    const classNames3 = (0, import_system77.useClassNames)({
       component: "NumberField",
       size: size2,
       variant
@@ -9330,11 +9367,11 @@ var _NumberField = (0, import_react51.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       FieldBase,
       {
-        as: import_react_aria_components51.NumberField,
+        as: import_react_aria_components52.NumberField,
         ...props,
         "data-readonly": readOnly ? "true" : void 0,
         "data-stepper": showStepper ? "true" : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_react_aria_components51.Group, { className: (0, import_system75.cn)("flex items-stretch", classNames3.group), children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_react_aria_components52.Group, { className: (0, import_system77.cn)("flex items-stretch", classNames3.group), children: [
           showStepper && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             _StepButton,
             {
@@ -9344,10 +9381,10 @@ var _NumberField = (0, import_react51.forwardRef)(
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-            import_react_aria_components51.Input,
+            import_react_aria_components52.Input,
             {
               ref,
-              className: (0, import_system75.cn)("h-full flex-1 outline-none", classNames3.input)
+              className: (0, import_system77.cn)("h-full flex-1 outline-none", classNames3.input)
             }
           ),
           showStepper && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
@@ -9365,9 +9402,9 @@ var _NumberField = (0, import_react51.forwardRef)(
 );
 
 // src/Pagination/Pagination.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_focus2 = require("@react-aria/focus");
-var import_system78 = require("@marigold/system");
+var import_system80 = require("@marigold/system");
 
 // src/Pagination/Ellipsis.tsx
 var import_jsx_runtime87 = require("react/jsx-runtime");
@@ -9383,13 +9420,13 @@ var Ellipsis = () => {
 };
 
 // src/Pagination/NavigationButton.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_button2 = require("@react-aria/button");
-var import_system76 = require("@marigold/system");
+var import_system78 = require("@marigold/system");
 var import_jsx_runtime88 = require("react/jsx-runtime");
 var NavigationButton = (props) => {
-  const ref = (0, import_react52.useRef)(null);
-  const classNames3 = (0, import_system76.useClassNames)({
+  const ref = (0, import_react53.useRef)(null);
+  const classNames3 = (0, import_system78.useClassNames)({
     component: "Pagination"
   });
   let { buttonProps } = (0, import_button2.useButton)(props, ref);
@@ -9409,7 +9446,7 @@ var NavigationButton = (props) => {
       ...buttonProps,
       ...rest,
       disabled: isDisabled,
-      className: (0, import_system76.cn)(classNames3.navigationButton, controlLabel && "w-24 px-2"),
+      className: (0, import_system78.cn)(classNames3.navigationButton, controlLabel && "w-24 px-2"),
       "data-selected": isSelected,
       children: [
         position2 === "left" && children,
@@ -9421,13 +9458,13 @@ var NavigationButton = (props) => {
 };
 
 // src/Pagination/PageButton.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_button3 = require("@react-aria/button");
-var import_system77 = require("@marigold/system");
+var import_system79 = require("@marigold/system");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var PageButton = (props) => {
-  const ref = (0, import_react53.useRef)(null);
-  const classNames3 = (0, import_system77.useClassNames)({
+  const ref = (0, import_react54.useRef)(null);
+  const classNames3 = (0, import_system79.useClassNames)({
     component: "Pagination"
   });
   let { buttonProps } = (0, import_button3.useButton)(props, ref);
@@ -9492,8 +9529,8 @@ var InnerPagination = ({
   const focusManager = (0, import_focus2.useFocusManager)();
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === totalPages || totalPages === 0;
-  const isFirstRender = (0, import_react54.useRef)(true);
-  (0, import_react54.useEffect)(() => {
+  const isFirstRender = (0, import_react55.useRef)(true);
+  (0, import_react55.useEffect)(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
@@ -9506,7 +9543,7 @@ var InnerPagination = ({
       onChange2(newPage);
     }
   };
-  const classNames3 = (0, import_system78.useClassNames)({ component: "Pagination" });
+  const classNames3 = (0, import_system80.useClassNames)({ component: "Pagination" });
   const handleKeyDown = (onEnter) => (e) => {
     if (e.key === "ArrowRight") {
       e.preventDefault();
@@ -9565,7 +9602,7 @@ var _Pagination = ({
   pageSize,
   ...props
 }) => {
-  const [currentPage, setCurrentPage] = (0, import_react54.useState)(page != null ? page : defaultPage);
+  const [currentPage, setCurrentPage] = (0, import_react55.useState)(page != null ? page : defaultPage);
   const totalPages = Math.ceil(totalItems / pageSize);
   const pageRange = usePageRange({ currentPage, totalPages });
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
@@ -9589,20 +9626,20 @@ var _Pagination = ({
 };
 
 // src/Radio/Radio.tsx
-var import_react56 = require("react");
-var import_react_aria_components53 = require("react-aria-components");
-var import_system80 = require("@marigold/system");
+var import_react57 = require("react");
+var import_react_aria_components54 = require("react-aria-components");
+var import_system82 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react55 = require("react");
-var RadioGroupContext = (0, import_react55.createContext)(
+var import_react56 = require("react");
+var RadioGroupContext = (0, import_react56.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react55.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react56.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_react_aria_components52 = require("react-aria-components");
-var import_system79 = require("@marigold/system");
+var import_react_aria_components53 = require("react-aria-components");
+var import_system81 = require("@marigold/system");
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var _RadioGroup = ({
   variant,
@@ -9619,7 +9656,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames3 = (0, import_system79.useClassNames)({ component: "Radio", variant, size: size2 });
+  const classNames3 = (0, import_system81.useClassNames)({ component: "Radio", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -9630,7 +9667,7 @@ var _RadioGroup = ({
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     FieldBase,
     {
-      as: import_react_aria_components52.RadioGroup,
+      as: import_react_aria_components53.RadioGroup,
       width,
       label,
       description,
@@ -9644,7 +9681,7 @@ var _RadioGroup = ({
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system79.cn)(
+          className: (0, import_system81.cn)(
             classNames3.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
@@ -9662,7 +9699,7 @@ var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { viewBox:
 var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
   "div",
   {
-    className: (0, import_system80.cn)(
+    className: (0, import_system82.cn)(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
@@ -9671,19 +9708,19 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx
     children: checked ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dot, {}) : null
   }
 );
-var _Radio = (0, import_react56.forwardRef)(
+var _Radio = (0, import_react57.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size: size2, width: groupWidth } = useRadioGroupContext();
-    const classNames3 = (0, import_system80.useClassNames)({
+    const classNames3 = (0, import_system82.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size2 || props.size
     });
     return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-      import_react_aria_components53.Radio,
+      import_react_aria_components54.Radio,
       {
         ref,
-        className: (0, import_system80.cn)(
+        className: (0, import_system82.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -9697,7 +9734,7 @@ var _Radio = (0, import_react56.forwardRef)(
             Icon3,
             {
               checked: isSelected,
-              className: (0, import_system80.cn)(
+              className: (0, import_system82.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames3.radio
               )
@@ -9712,10 +9749,10 @@ var _Radio = (0, import_react56.forwardRef)(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-var import_react57 = require("react");
-var import_react_aria_components54 = require("react-aria-components");
+var import_react58 = require("react");
+var import_react_aria_components55 = require("react-aria-components");
 var import_jsx_runtime93 = require("react/jsx-runtime");
-var _SearchField = (0, import_react57.forwardRef)(
+var _SearchField = (0, import_react58.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -9724,7 +9761,7 @@ var _SearchField = (0, import_react57.forwardRef)(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FieldBase, { as: import_react_aria_components54.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FieldBase, { as: import_react_aria_components55.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       SearchInput,
       {
         ref,
@@ -9735,11 +9772,11 @@ var _SearchField = (0, import_react57.forwardRef)(
 );
 
 // src/Select/Select.tsx
-var import_react58 = require("react");
-var import_react_aria_components55 = require("react-aria-components");
-var import_system81 = require("@marigold/system");
+var import_react59 = require("react");
+var import_react_aria_components56 = require("react-aria-components");
+var import_system83 = require("@marigold/system");
 var import_jsx_runtime94 = require("react/jsx-runtime");
-var _Select = (0, import_react58.forwardRef)(
+var _Select = (0, import_react59.forwardRef)(
   ({
     disabled,
     required,
@@ -9759,18 +9796,18 @@ var _Select = (0, import_react58.forwardRef)(
       onSelectionChange: onChange2,
       ...rest
     };
-    const classNames3 = (0, import_system81.useClassNames)({ component: "Select", variant, size: size2 });
-    return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(FieldBase, { as: import_react_aria_components55.Select, ref, variant, size: size2, ...props, children: [
+    const classNames3 = (0, import_system83.useClassNames)({ component: "Select", variant, size: size2 });
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(FieldBase, { as: import_react_aria_components56.Select, ref, variant, size: size2, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
         IconButton,
         {
-          className: (0, import_system81.cn)(
+          className: (0, import_system83.cn)(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames3.select
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria_components55.SelectValue, { className: "[&>[slot=description]]:hidden" }),
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ChevronDown, { className: (0, import_system81.cn)("size-4", classNames3.icon) })
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria_components56.SelectValue, { className: "[&>[slot=description]]:hidden" }),
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ChevronDown, { className: (0, import_system83.cn)("size-4", classNames3.icon) })
           ]
         }
       ),
@@ -9782,21 +9819,21 @@ _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
-var import_react61 = require("react");
-var import_react_aria_components57 = require("react-aria-components");
-var import_system83 = require("@marigold/system");
+var import_react62 = require("react");
+var import_react_aria_components58 = require("react-aria-components");
+var import_system85 = require("@marigold/system");
 
 // src/SelectList/Context.ts
-var import_react59 = require("react");
-var SelectListContext = (0, import_react59.createContext)(
+var import_react60 = require("react");
+var SelectListContext = (0, import_react60.createContext)(
   {}
 );
-var useSelectListContext = () => (0, import_react59.useContext)(SelectListContext);
+var useSelectListContext = () => (0, import_react60.useContext)(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
-var import_react60 = require("react");
-var import_react_aria_components56 = require("react-aria-components");
-var import_system82 = require("@marigold/system");
+var import_react61 = require("react");
+var import_react_aria_components57 = require("react-aria-components");
+var import_system84 = require("@marigold/system");
 var import_jsx_runtime95 = require("react/jsx-runtime");
 var CheckMark3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", className, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
   "path",
@@ -9816,16 +9853,16 @@ var SelectionIndicator = ({ selectionMode }) => {
     }
   }
 };
-var _SelectListItem = (0, import_react60.forwardRef)(
+var _SelectListItem = (0, import_react61.forwardRef)(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames3 } = useSelectListContext();
     return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
-      import_react_aria_components56.GridListItem,
+      import_react_aria_components57.GridListItem,
       {
         textValue,
         ...props,
-        className: (0, import_system82.cn)("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.item),
+        className: (0, import_system84.cn)("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.item),
         ref,
         children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(SelectionIndicator, { selectionMode }),
@@ -9838,20 +9875,20 @@ var _SelectListItem = (0, import_react60.forwardRef)(
 
 // src/SelectList/SelectList.tsx
 var import_jsx_runtime96 = require("react/jsx-runtime");
-var _SelectList = (0, import_react61.forwardRef)(
+var _SelectList = (0, import_react62.forwardRef)(
   ({ onChange: onChange2, ...rest }, ref) => {
-    const classNames3 = (0, import_system83.useClassNames)({ component: "ListBox" });
+    const classNames3 = (0, import_system85.useClassNames)({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange2,
       ...rest
     };
     return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(SelectListContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: classNames3.container, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-      import_react_aria_components57.GridList,
+      import_react_aria_components58.GridList,
       {
         ...props,
         layout: "grid",
         ref,
-        className: (0, import_system83.cn)(
+        className: (0, import_system85.cn)(
           "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames3.list
         ),
@@ -9863,7 +9900,7 @@ var _SelectList = (0, import_react61.forwardRef)(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-var import_system84 = require("@marigold/system");
+var import_system86 = require("@marigold/system");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var Scrollable = ({
   children,
@@ -9874,18 +9911,18 @@ var Scrollable = ({
   "div",
   {
     ...props,
-    className: (0, import_system84.cn)(["sticky h-(--height) overflow-auto", import_system84.width[width]]),
-    style: (0, import_system84.createVar)({ height }),
+    className: (0, import_system86.cn)(["sticky h-(--height) overflow-auto", import_system86.width[width]]),
+    style: (0, import_system86.createVar)({ height }),
     children
   }
 );
 
 // src/Slider/Slider.tsx
-var import_react62 = require("react");
-var import_react_aria_components58 = require("react-aria-components");
-var import_system85 = require("@marigold/system");
+var import_react63 = require("react");
+var import_react_aria_components59 = require("react-aria-components");
+var import_system87 = require("@marigold/system");
 var import_jsx_runtime98 = require("react/jsx-runtime");
-var _Slider = (0, import_react62.forwardRef)(
+var _Slider = (0, import_react63.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -9895,7 +9932,7 @@ var _Slider = (0, import_react62.forwardRef)(
     label,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system85.useClassNames)({
+    const classNames3 = (0, import_system87.useClassNames)({
       component: "Slider",
       variant,
       size: size2
@@ -9907,26 +9944,26 @@ var _Slider = (0, import_react62.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
       FieldBase,
       {
-        as: import_react_aria_components58.Slider,
-        className: (0, import_system85.cn)(
+        as: import_react_aria_components59.Slider,
+        className: (0, import_system87.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames3.container,
-          import_system85.width[width]
+          import_system87.width[width]
         ),
         ref,
         ...props,
         children: [
           label && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(_Label, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react_aria_components58.SliderOutput, { className: (0, import_system85.cn)("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react_aria_components59.SliderOutput, { className: (0, import_system87.cn)("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
           /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-            import_react_aria_components58.SliderTrack,
+            import_react_aria_components59.SliderTrack,
             {
-              className: (0, import_system85.cn)("relative col-span-2 h-2 w-full", classNames3.track),
+              className: (0, import_system87.cn)("relative col-span-2 h-2 w-full", classNames3.track),
               children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_jsx_runtime98.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
                   "div",
                   {
-                    className: (0, import_system85.cn)(
+                    className: (0, import_system87.cn)(
                       "absolute top-[50%] h-2 w-full translate-y-[-50%]",
                       classNames3.track
                     )
@@ -9935,7 +9972,7 @@ var _Slider = (0, import_react62.forwardRef)(
                 /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
                   "div",
                   {
-                    className: (0, import_system85.cn)(
+                    className: (0, import_system87.cn)(
                       "absolute top-[50%] h-2 translate-y-[-50%]",
                       classNames3.selectedTrack
                     ),
@@ -9946,9 +9983,9 @@ var _Slider = (0, import_react62.forwardRef)(
                   }
                 ),
                 state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                  import_react_aria_components58.SliderThumb,
+                  import_react_aria_components59.SliderThumb,
                   {
-                    className: (0, import_system85.cn)("top-1/2 cursor-pointer", classNames3.thumb),
+                    className: (0, import_system87.cn)("top-1/2 cursor-pointer", classNames3.thumb),
                     index: i,
                     "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
                     name: thumbLabels == null ? void 0 : thumbLabels[i]
@@ -9969,7 +10006,7 @@ var import_jsx_runtime99 = require("react/jsx-runtime");
 var Split = () => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_system86 = require("@marigold/system");
+var import_system88 = require("@marigold/system");
 var import_jsx_runtime100 = require("react/jsx-runtime");
 var Stack = ({
   children,
@@ -9983,11 +10020,11 @@ var Stack = ({
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "div",
     {
-      className: (0, import_system86.cn)(
+      className: (0, import_system88.cn)(
         "flex flex-col",
-        import_system86.gapSpace[space],
-        alignX && ((_b = (_a = import_system86.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system86.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system88.gapSpace[space],
+        alignX && ((_b = (_a = import_system88.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system88.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -9997,11 +10034,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react63 = require("react");
-var import_react_aria_components59 = require("react-aria-components");
-var import_system87 = require("@marigold/system");
+var import_react64 = require("react");
+var import_react_aria_components60 = require("react-aria-components");
+var import_system89 = require("@marigold/system");
 var import_jsx_runtime101 = require("react/jsx-runtime");
-var _Switch = (0, import_react63.forwardRef)(
+var _Switch = (0, import_react64.forwardRef)(
   ({
     variant,
     size: size2,
@@ -10012,7 +10049,7 @@ var _Switch = (0, import_react63.forwardRef)(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system87.useClassNames)({ component: "Switch", size: size2, variant });
+    const classNames3 = (0, import_system89.useClassNames)({ component: "Switch", size: size2, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10020,12 +10057,12 @@ var _Switch = (0, import_react63.forwardRef)(
       ...rest
     };
     return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
-      import_react_aria_components59.Switch,
+      import_react_aria_components60.Switch,
       {
         ...props,
         ref,
-        className: (0, import_system87.cn)(
-          import_system87.width[width],
+        className: (0, import_system89.cn)(
+          import_system89.width[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames3.container
@@ -10040,15 +10077,15 @@ var _Switch = (0, import_react63.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react71 = require("react");
+var import_react72 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system94 = require("@marigold/system");
+var import_system96 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react64 = require("react");
-var TableContext = (0, import_react64.createContext)({});
-var useTableContext = () => (0, import_react64.useContext)(TableContext);
+var import_react65 = require("react");
+var TableContext = (0, import_react65.createContext)({});
+var useTableContext = () => (0, import_react65.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
@@ -10075,14 +10112,14 @@ var TableBody = ({
 };
 
 // src/Table/TableCell.tsx
-var import_react65 = require("react");
+var import_react66 = require("react");
 var import_focus3 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
 var import_utils9 = require("@react-aria/utils");
-var import_system88 = require("@marigold/system");
+var import_system90 = require("@marigold/system");
 var import_jsx_runtime103 = require("react/jsx-runtime");
 var TableCell = ({ cell, align = "left" }) => {
-  const ref = (0, import_react65.useRef)(null);
+  const ref = (0, import_react66.useRef)(null);
   const { interactive, state, classNames: classNames3 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -10102,12 +10139,12 @@ var TableCell = ({ cell, align = "left" }) => {
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
-  const stateProps = (0, import_system88.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  const stateProps = (0, import_system90.useStateProps)({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system88.cn)(classNames3 == null ? void 0 : classNames3.cell),
+      className: (0, import_system90.cn)(classNames3 == null ? void 0 : classNames3.cell),
       ...(0, import_utils9.mergeProps)(cellProps, focusProps),
       ...stateProps,
       align,
@@ -10117,11 +10154,11 @@ var TableCell = ({ cell, align = "left" }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react66 = require("react");
+var import_react67 = require("react");
 var import_focus4 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
 var import_utils10 = require("@react-aria/utils");
-var import_system89 = require("@marigold/system");
+var import_system91 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -10146,7 +10183,7 @@ var mapCheckboxProps = ({
 // src/Table/TableCheckboxCell.tsx
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react66.useRef)(null);
+  const ref = (0, import_react67.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -10160,12 +10197,12 @@ var TableCheckboxCell = ({ cell }) => {
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
-  const stateProps = (0, import_system89.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  const stateProps = (0, import_system91.useStateProps)({ disabled, focusVisible: isFocusVisible });
   return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system89.cn)("text-center align-middle leading-none", classNames3 == null ? void 0 : classNames3.cell),
+      className: (0, import_system91.cn)("text-center align-middle leading-none", classNames3 == null ? void 0 : classNames3.cell),
       ...(0, import_utils10.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(_Checkbox, { ...checkboxProps })
@@ -10174,12 +10211,12 @@ var TableCheckboxCell = ({ cell }) => {
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react67 = require("react");
+var import_react68 = require("react");
 var import_focus5 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils12 = require("@react-aria/utils");
-var import_system90 = require("@marigold/system");
+var import_system92 = require("@marigold/system");
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column: column2,
@@ -10187,7 +10224,7 @@ var TableColumnHeader = ({
   align = "left"
 }) => {
   var _a, _b;
-  const ref = (0, import_react67.useRef)(null);
+  const ref = (0, import_react68.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -10198,7 +10235,7 @@ var TableColumnHeader = ({
   );
   const { hoverProps, isHovered } = (0, import_interactions2.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus5.useFocusRing)();
-  const stateProps = (0, import_system90.useStateProps)({
+  const stateProps = (0, import_system92.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -10207,7 +10244,7 @@ var TableColumnHeader = ({
     {
       colSpan: column2.colspan,
       ref,
-      className: (0, import_system90.cn)("cursor-default", import_system90.width[width], classNames3 == null ? void 0 : classNames3.header),
+      className: (0, import_system92.cn)("cursor-default", import_system92.width[width], classNames3 == null ? void 0 : classNames3.header),
       ...(0, import_utils12.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -10221,7 +10258,7 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_system91 = require("@marigold/system");
+var import_system93 = require("@marigold/system");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
@@ -10230,7 +10267,7 @@ var TableHeader = ({ stickyHeader, children }) => {
     "thead",
     {
       ...rowGroupProps,
-      className: (0, import_system91.cn)(
+      className: (0, import_system93.cn)(
         classNames3 == null ? void 0 : classNames3.thead,
         // for sticky header &th needs to be sticky for b2b and core theme
         // for rui sticky is applied to thead
@@ -10242,7 +10279,7 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react68 = require("react");
+var import_react69 = require("react");
 var import_table6 = require("@react-aria/table");
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var TableHeaderRow = ({
@@ -10251,24 +10288,24 @@ var TableHeaderRow = ({
   children
 }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react68.useRef)(null);
+  const ref = (0, import_react69.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
   return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tr", { ...rowProps, className, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_focus6 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils13 = require("@react-aria/utils");
-var import_system92 = require("@marigold/system");
+var import_system94 = require("@marigold/system");
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react69.useRef)(null);
+  const ref = (0, import_react70.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size: size2 } = row.props;
-  const classNames3 = (0, import_system92.useClassNames)({
+  const classNames3 = (0, import_system94.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size2 || ctx.size
@@ -10286,7 +10323,7 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions3.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system92.useStateProps)({
+  const stateProps = (0, import_system94.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
@@ -10297,7 +10334,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: (0, import_system92.cn)(
+      className: (0, import_system94.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -10311,19 +10348,19 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react70 = require("react");
+var import_react71 = require("react");
 var import_focus7 = require("@react-aria/focus");
 var import_interactions4 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils14 = require("@react-aria/utils");
-var import_system93 = require("@marigold/system");
+var import_system95 = require("@marigold/system");
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column: column2,
   width = "auto",
   align = "left"
 }) => {
-  const ref = (0, import_react70.useRef)(null);
+  const ref = (0, import_react71.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -10335,7 +10372,7 @@ var TableSelectAllCell = ({
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions4.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus7.useFocusRing)();
-  const stateProps = (0, import_system93.useStateProps)({
+  const stateProps = (0, import_system95.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
@@ -10343,7 +10380,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: (0, import_system93.cn)(import_system93.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
+      className: (0, import_system95.cn)(import_system95.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
       ...(0, import_utils14.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -10365,7 +10402,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react71.useRef)(null);
+  const tableRef = (0, import_react72.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -10376,7 +10413,7 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames3 = (0, import_system94.useClassNames)({
+  const classNames3 = (0, import_system96.useClassNames)({
     component: "Table",
     variant,
     size: size2
@@ -10390,7 +10427,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: (0, import_system94.cn)(
+          className: (0, import_system96.cn)(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -10457,8 +10494,8 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_react_aria_components60 = require("react-aria-components");
-var import_system95 = require("@marigold/system");
+var import_react_aria_components61 = require("react-aria-components");
+var import_system97 = require("@marigold/system");
 var import_jsx_runtime111 = require("react/jsx-runtime");
 var _Text = ({
   variant,
@@ -10473,40 +10510,40 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const classNames3 = (0, import_system95.useClassNames)({
+  const classNames3 = (0, import_system97.useClassNames)({
     component: "Text",
     variant,
     size: size2
   });
-  const Component2 = props.slot ? import_react_aria_components60.Text : as;
+  const Component2 = props.slot ? import_react_aria_components61.Text : as;
   const elementType = props.slot ? { elementType: as } : {};
   return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
     Component2,
     {
       ...props,
       ...elementType,
-      className: (0, import_system95.cn)(
+      className: (0, import_system97.cn)(
         "max-w-(--maxTextWidth)",
         // possibly set by a <Container>
         classNames3,
-        fontStyle && import_system95.textStyle[fontStyle],
-        align && import_system95.textAlign[align],
-        cursor2 && import_system95.cursorStyle[cursor2],
-        weight && import_system95.fontWeight[weight],
-        fontSize && import_system95.textSize[fontSize]
+        fontStyle && import_system97.textStyle[fontStyle],
+        align && import_system97.textAlign[align],
+        cursor2 && import_system97.cursorStyle[cursor2],
+        weight && import_system97.fontWeight[weight],
+        fontSize && import_system97.textSize[fontSize]
       ),
-      style: { color: color && (0, import_system95.ensureCssVar)(color, "color") },
+      style: { color: color && (0, import_system97.ensureCssVar)(color, "color") },
       children
     }
   );
 };
 
 // src/TextArea/TextArea.tsx
-var import_react72 = require("react");
-var import_react_aria_components61 = require("react-aria-components");
-var import_system96 = require("@marigold/system");
+var import_react73 = require("react");
+var import_react_aria_components62 = require("react-aria-components");
+var import_system98 = require("@marigold/system");
 var import_jsx_runtime112 = require("react/jsx-runtime");
-var _TextArea = (0, import_react72.forwardRef)(
+var _TextArea = (0, import_react73.forwardRef)(
   ({
     variant,
     size: size2,
@@ -10517,7 +10554,7 @@ var _TextArea = (0, import_react72.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system96.useClassNames)({ component: "TextArea", variant, size: size2 });
+    const classNames3 = (0, import_system98.useClassNames)({ component: "TextArea", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10525,15 +10562,15 @@ var _TextArea = (0, import_react72.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(FieldBase, { as: import_react_aria_components61.TextField, ...props, variant, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_react_aria_components61.TextArea, { className: classNames3, ref, rows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(FieldBase, { as: import_react_aria_components62.TextField, ...props, variant, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_react_aria_components62.TextArea, { className: classNames3, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-var import_react73 = require("react");
-var import_react_aria_components62 = require("react-aria-components");
+var import_react74 = require("react");
+var import_react_aria_components63 = require("react-aria-components");
 var import_jsx_runtime113 = require("react/jsx-runtime");
-var _TextField = (0, import_react73.forwardRef)(
+var _TextField = (0, import_react74.forwardRef)(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
@@ -10542,12 +10579,12 @@ var _TextField = (0, import_react73.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(FieldBase, { as: import_react_aria_components62.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(_Input, { ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(FieldBase, { as: import_react_aria_components63.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-var import_system97 = require("@marigold/system");
+var import_system99 = require("@marigold/system");
 var import_jsx_runtime114 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
@@ -10565,24 +10602,24 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: (0, import_system97.cn)(
+      className: (0, import_system99.cn)(
         "grid",
-        import_system97.gapSpace[space],
+        import_system99.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system97.createVar)({ column: column2, tilesWidth }),
+      style: (0, import_system99.createVar)({ column: column2, tilesWidth }),
       children
     }
   );
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_react_aria_components64 = require("react-aria-components");
-var import_system98 = require("@marigold/system");
+var import_react_aria_components65 = require("react-aria-components");
+var import_system100 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react_aria_components63 = require("react-aria-components");
+var import_react_aria_components64 = require("react-aria-components");
 var import_jsx_runtime115 = require("react/jsx-runtime");
 var _TooltipTrigger = ({
   delay = 1e3,
@@ -10597,7 +10634,7 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria_components63.TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria_components64.TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
@@ -10607,16 +10644,16 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
     ...rest,
     isOpen: open
   };
-  const classNames3 = (0, import_system98.useClassNames)({ component: "Tooltip", variant, size: size2 });
+  const classNames3 = (0, import_system100.useClassNames)({ component: "Tooltip", variant, size: size2 });
   const portal = usePortalContainer();
   return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
-    import_react_aria_components64.Tooltip,
+    import_react_aria_components65.Tooltip,
     {
       ...props,
-      className: (0, import_system98.cn)("group/tooltip", classNames3.container),
+      className: (0, import_system100.cn)("group/tooltip", classNames3.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react_aria_components64.OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react_aria_components65.OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -10625,20 +10662,20 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
 _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
-var import_react_aria_components67 = require("react-aria-components");
-var import_system100 = require("@marigold/system");
+var import_react_aria_components68 = require("react-aria-components");
+var import_system102 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
-var import_react_aria_components66 = require("react-aria-components");
-var import_system99 = require("@marigold/system");
+var import_react_aria_components67 = require("react-aria-components");
+var import_system101 = require("@marigold/system");
 
 // src/TagGroup/TagGroupHiddenInput.tsx
-var import_react74 = require("react");
-var import_react_aria_components65 = require("react-aria-components");
+var import_react75 = require("react");
+var import_react_aria_components66 = require("react-aria-components");
 var import_jsx_runtime117 = require("react/jsx-runtime");
 var TagGroupHiddenInput = ({ name }) => {
   var _a;
-  const state = (0, import_react74.useContext)(import_react_aria_components65.ListStateContext);
+  const state = (0, import_react75.useContext)(import_react_aria_components66.ListStateContext);
   const selectedKeys = Array.from((_a = state == null ? void 0 : state.selectionManager.selectedKeys) != null ? _a : []);
   if (!selectedKeys.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { hidden: true, "aria-hidden": "true", children: selectedKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
@@ -10666,10 +10703,10 @@ var _TagGroup = ({
   name,
   ...rest
 }) => {
-  const classNames3 = (0, import_system99.useClassNames)({ component: "Tag", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(FieldBase, { as: import_react_aria_components66.TagGroup, ...rest, children: [
+  const classNames3 = (0, import_system101.useClassNames)({ component: "Tag", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(FieldBase, { as: import_react_aria_components67.TagGroup, ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-      import_react_aria_components66.TagList,
+      import_react_aria_components67.TagList,
       {
         items,
         className: classNames3.listItems,
@@ -10685,17 +10722,17 @@ var _TagGroup = ({
 var import_jsx_runtime119 = require("react/jsx-runtime");
 var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames3 = (0, import_system100.useClassNames)({ component: "Tag", variant, size: size2 });
+  const classNames3 = (0, import_system102.useClassNames)({ component: "Tag", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     ...rest
   };
   return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-    import_react_aria_components67.Tag,
+    import_react_aria_components68.Tag,
     {
       textValue,
       ...props,
-      className: (0, import_system100.cn)("data-selection-mode:cursor-pointer", classNames3.tag),
+      className: (0, import_system102.cn)("data-selection-mode:cursor-pointer", classNames3.tag),
       children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(import_jsx_runtime119.Fragment, { children: [
         children,
         allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(CloseButton, { className: classNames3.closeButton, slot: "remove" })
@@ -10709,14 +10746,14 @@ _Tag.Group = _TagGroup;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react_aria_components69 = require("react-aria-components");
+var import_react_aria_components70 = require("react-aria-components");
 var import_utils16 = require("@react-aria/utils");
-var import_system102 = require("@marigold/system");
+var import_system104 = require("@marigold/system");
 
 // src/XLoader/BaseLoader.tsx
-var import_react_aria_components68 = require("react-aria-components");
+var import_react_aria_components69 = require("react-aria-components");
 var import_i18n6 = require("@react-aria/i18n");
-var import_system101 = require("@marigold/system");
+var import_system103 = require("@marigold/system");
 
 // src/intl/messages.ts
 var intlMessages2 = {
@@ -10738,9 +10775,9 @@ var BaseLoader = ({
   ...props
 }) => {
   const stringFormatter = (0, import_i18n6.useLocalizedStringFormatter)(intlMessages2, "marigold");
-  const className = (0, import_system101.useClassNames)({ component: "XLoader", variant, size: size2 });
+  const className = (0, import_system103.useClassNames)({ component: "XLoader", variant, size: size2 });
   return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
-    import_react_aria_components68.ProgressBar,
+    import_react_aria_components69.ProgressBar,
     {
       className: className.container,
       isIndeterminate: true,
@@ -10957,7 +10994,7 @@ var BaseLoader = ({
             ]
           }
         ),
-        children ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_react_aria_components68.Label, { className: className.label, children }) : null
+        children ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_react_aria_components69.Label, { className: className.label, children }) : null
       ]
     }
   );
@@ -10967,10 +11004,10 @@ var BaseLoader = ({
 var import_jsx_runtime121 = require("react/jsx-runtime");
 var LoaderFullScreen = (props) => {
   const id = (0, import_utils16.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react_aria_components69.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react_aria_components69.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(BaseLoader, { id, ...props }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react_aria_components70.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react_aria_components70.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
-  const className = (0, import_system102.useClassNames)({
+  const className = (0, import_system104.useClassNames)({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
@@ -10980,25 +11017,25 @@ var LoaderSection = (props) => {
 var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
-var import_react_aria_components73 = require("react-aria-components");
-var import_system105 = require("@marigold/system");
+var import_react_aria_components74 = require("react-aria-components");
+var import_system107 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react75 = require("react");
-var TabContext = (0, import_react75.createContext)({});
-var useTabContext = () => (0, import_react75.useContext)(TabContext);
+var import_react76 = require("react");
+var TabContext = (0, import_react76.createContext)({});
+var useTabContext = () => (0, import_react76.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react_aria_components70 = require("react-aria-components");
-var import_system103 = require("@marigold/system");
+var import_react_aria_components71 = require("react-aria-components");
+var import_system105 = require("@marigold/system");
 var import_jsx_runtime122 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames3 } = useTabContext();
   return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
-    import_react_aria_components70.Tab,
+    import_react_aria_components71.Tab,
     {
       ...props,
-      className: (0, import_system103.cn)(
+      className: (0, import_system105.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames3.tab
       ),
@@ -11008,27 +11045,27 @@ var _Tab = (props) => {
 };
 
 // src/Tabs/TabList.tsx
-var import_react_aria_components71 = require("react-aria-components");
-var import_system104 = require("@marigold/system");
+var import_react_aria_components72 = require("react-aria-components");
+var import_system106 = require("@marigold/system");
 var import_jsx_runtime123 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames3 } = useTabContext();
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-    import_react_aria_components71.TabList,
+    import_react_aria_components72.TabList,
     {
       ...props,
-      className: (0, import_system104.cn)("flex", import_system104.gapSpace[space], classNames3.tabsList),
+      className: (0, import_system106.cn)("flex", import_system106.gapSpace[space], classNames3.tabsList),
       children: props.children
     }
   );
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react_aria_components72 = require("react-aria-components");
+var import_react_aria_components73 = require("react-aria-components");
 var import_jsx_runtime124 = require("react/jsx-runtime");
 var _TabPanel = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_aria_components72.TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_aria_components73.TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
@@ -11038,19 +11075,58 @@ var _Tabs = ({ disabled, variant, size: size2 = "medium", ...rest }) => {
     isDisabled: disabled,
     ...rest
   };
-  const classNames3 = (0, import_system105.useClassNames)({
+  const classNames3 = (0, import_system107.useClassNames)({
     component: "Tabs",
     size: size2,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react_aria_components73.Tabs, { ...props, className: classNames3.container, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react_aria_components74.Tabs, { ...props, className: classNames3.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
 _Tabs.Item = _Tab;
 
 // src/RouterProvider/RouterProvider.tsx
-var import_react_aria_components74 = require("react-aria-components");
+var import_react_aria_components75 = require("react-aria-components");
+
+// src/TimeField/TimeField.tsx
+var import_react77 = require("react");
+var import_react_aria_components76 = require("react-aria-components");
+var import_system108 = require("@marigold/system");
+var import_jsx_runtime126 = require("react/jsx-runtime");
+var _TimeField = (0, import_react77.forwardRef)(
+  ({
+    required,
+    disabled,
+    readOnly,
+    error,
+    variant,
+    size: size2,
+    width = "full",
+    ...rest
+  }, ref) => {
+    const classNames3 = (0, import_system108.useClassNames)({ component: "DateField", variant, size: size2 });
+    const props = {
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isInvalid: error,
+      isRequired: required,
+      ...rest
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+      FieldBase,
+      {
+        as: import_react_aria_components76.TimeField,
+        variant,
+        size: size2,
+        width,
+        ...props,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_react_aria_components76.DateInput, { className: classNames3.field, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_react_aria_components76.DateSegment, { className: classNames3.segment, segment }) })
+      }
+    );
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -11123,11 +11199,11 @@ var import_react_aria_components74 = require("react-aria-components");
   TextField,
   ThemeProvider,
   Tiles,
+  TimeField,
   Tooltip,
   Underlay,
   VisuallyHidden,
   XLoader,
-  _Calendar,
   gridColsAlign,
   gridColumn,
   useAsyncList,