@marigold/components 12.0.1 → 12.0.3

package/dist/index.mjs

@@ -206,7 +206,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;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment15;
+        exports.Fragment = Fragment14;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -884,7 +884,7 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var AccordionHeader = ({ children }) => {
   const { classNames: classNames3 } = useAccordionContext();
   const { isExpanded } = useContext2(DisclosureStateContext);
-  return /* @__PURE__ */ jsx2(Heading, { children: /* @__PURE__ */ jsxs(Button, { slot: "trigger", className: classNames3.header, children: [
+  return /* @__PURE__ */ jsx2(Heading, { className: "flex-1", children: /* @__PURE__ */ jsxs(Button, { slot: "trigger", className: classNames3.header, children: [
     children,
     /* @__PURE__ */ jsx2(
       ChevronDown,
@@ -2639,7 +2639,7 @@ var _Form = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ jsx55
 );
 
 // src/Grid/Grid.tsx
-import { cn as cn34, gapSpace as gapSpace6, height as twHeight } from "@marigold/system";
+import { alignment, cn as cn34, gapSpace as gapSpace6, height as twHeight } from "@marigold/system";
 
 // src/Grid/GridArea.tsx
 import { jsx as jsx56 } from "react/jsx-runtime";
@@ -2654,14 +2654,23 @@ var Grid = ({
   areas,
   columns,
   rows,
+  alignX,
+  alignY,
   height = "auto",
   space = 0,
   ...props
 }) => {
+  var _a, _b, _c, _d;
   return /* @__PURE__ */ jsx57(
     "div",
     {
-      className: cn34("grid", gapSpace6[space], twHeight[height]),
+      className: cn34(
+        "grid",
+        alignX && ((_b = (_a = alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
+        gapSpace6[space],
+        twHeight[height]
+      ),
       style: {
         gridTemplateAreas: parseGridAreas(areas),
         gridTemplateColumns: parseTemplateValue(columns),
@@ -2759,7 +2768,7 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import { alignment, cn as cn37, gapSpace as gapSpace7 } from "@marigold/system";
+import { alignment as alignment2, cn as cn37, gapSpace as gapSpace7 } from "@marigold/system";
 import { jsx as jsx61 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
@@ -2776,8 +2785,8 @@ var Inline = ({
       className: cn37(
         "flex flex-wrap",
         gapSpace7[space],
-        alignX && ((_b = (_a = alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
+        alignX && ((_b = (_a = alignment2) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = alignment2) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
       children
     }
@@ -2870,7 +2879,7 @@ var _DateField = forwardRef19(
 // src/Calendar/Calendar.tsx
 import { useState } from "react";
 import { Calendar } from "react-aria-components";
-import { cn as cn42, useClassNames as useClassNames40 } from "@marigold/system";
+import { cn as cn44, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import {
@@ -2928,9 +2937,14 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-import { useContext as useContext13 } from "react";
+import { useContext as useContext14 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
-import { cn as cn40, useClassNames as useClassNames38 } from "@marigold/system";
+import { cn as cn40 } from "@marigold/system";
+
+// src/Calendar/Context.tsx
+import { createContext as createContext8, useContext as useContext13 } from "react";
+var CalendarContext = createContext8({});
+var useCalendarContext = () => useContext13(CalendarContext);
 
 // src/Calendar/useFormattedMonths.tsx
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
@@ -2955,16 +2969,16 @@ function CalendarListBox({
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = useContext13(CalendarStateContext2);
+  const state = useContext14(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = useClassNames38({ component: "Select" });
+  const { classNames: classNames3 } = useCalendarContext();
   return /* @__PURE__ */ jsxs22(
     "button",
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: cn40(buttonStyles, selectClassNames),
+      className: cn40(buttonStyles, classNames3.select),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
@@ -2975,10 +2989,10 @@ function CalendarListBox({
 }
 
 // src/Calendar/MonthControls.tsx
-import { cn as cn41, useClassNames as useClassNames39 } from "@marigold/system";
+import { cn as cn41, useClassNames as useClassNames38 } from "@marigold/system";
 import { jsx as jsx68, jsxs as jsxs23 } from "react/jsx-runtime";
 function MonthControls() {
-  const classNames3 = useClassNames39({ component: "Calendar" });
+  const classNames3 = useClassNames38({ component: "Calendar" });
   return /* @__PURE__ */ jsxs23(
     "div",
     {
@@ -3012,33 +3026,40 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-import { useContext as useContext14 } from "react";
+import { useContext as useContext15 } from "react";
 import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
+import { Button as Button6 } from "react-aria-components";
+import { cn as cn42 } from "@marigold/system";
 import { jsx as jsx69 } from "react/jsx-runtime";
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = useContext14(CalendarStateContext3);
+  const state = useContext15(CalendarStateContext3);
   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__ */ jsx69(
     "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__ */ jsx69("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx69(
-          _Button,
+          Button6,
           {
             slot: "previous",
-            variant: index2 === state.focusedDate.month - 1 ? "secondary" : "text",
-            size: "small",
             onPress: () => {
               onChange2(index2);
               setSelectedDropdown(void 0);
             },
+            "aria-current": isSelected,
+            className: cn42(
+              classNames3.calendarListboxButton,
+              "inline-flex items-center justify-center gap-[0.5ch]"
+            ),
             children: month.substring(0, 3)
           },
           index2 + 1
@@ -3051,15 +3072,17 @@ var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
 import {
-  useContext as useContext15,
+  useContext as useContext16,
   useEffect,
   useRef as useRef2
 } from "react";
-import { CalendarStateContext as CalendarStateContext4 } from "react-aria-components";
+import { Button as Button7, CalendarStateContext as CalendarStateContext4 } from "react-aria-components";
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
+import { cn as cn43 } from "@marigold/system";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = useContext15(CalendarStateContext4);
+  const state = useContext16(CalendarStateContext4);
+  const { classNames: classNames3 } = useCalendarContext();
   const years = [];
   let formatter = useDateFormatter3({
     year: "numeric",
@@ -3093,24 +3116,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__ */ jsx70("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx70(
           "div",
           {
-            ref: isActive ? activeButtonRef : null,
-            style: { height: "100%", width: "100%" },
+            ref: isSelected ? activeButtonRef : null,
+            className: "flex size-full justify-center",
             children: /* @__PURE__ */ jsx70(
-              _Button,
+              Button7,
               {
                 slot: "previous",
-                disabled: state.isDisabled,
-                variant: isActive ? "secondary" : "text",
-                size: "small",
+                className: cn43(
+                  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
@@ -3124,7 +3149,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment6, jsx as jsx71, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs24 } from "react/jsx-runtime";
 var _Calendar = ({
   disabled,
   readOnly,
@@ -3139,52 +3164,64 @@ var _Calendar = ({
     isDateUnavailable: dateUnavailable,
     ...rest
   };
-  const classNames3 = useClassNames40({ component: "Calendar" });
+  const classNames3 = useClassNames39({ component: "Calendar", size: size2, variant });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
     month: /* @__PURE__ */ jsx71(MonthListBox_default, { setSelectedDropdown }),
     year: /* @__PURE__ */ jsx71(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx71(CalendarContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsxs24(
     Calendar,
     {
-      className: cn42(
-        "flex min-h-[350px] w-fit flex-col rounded-xs p-4",
+      className: cn44(
+        "relative flex min-h-[350px] w-fit flex-col rounded-xs p-4",
         classNames3.calendar
       ),
       ...props,
-      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs24(Fragment6, { children: [
-        /* @__PURE__ */ jsxs24("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs24("div", { className: "flex w-fit gap-4", children: [
-            /* @__PURE__ */ jsx71(
-              CalendarListBox,
-              {
-                type: "month",
-                isDisabled: props.isDisabled,
-                setSelectedDropdown
-              }
+      children: [
+        /* @__PURE__ */ jsx71(
+          "div",
+          {
+            className: cn44(
+              "pointer-events-none absolute top-1/2 left-0 w-full -translate-y-1/2 opacity-0",
+              selectedDropdown && "pointer-events-auto opacity-100"
             ),
-            /* @__PURE__ */ jsx71(
-              CalendarListBox,
-              {
-                type: "year",
-                isDisabled: props.isDisabled,
-                setSelectedDropdown
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx71(MonthControls_default, {})
-        ] }),
-        /* @__PURE__ */ jsx71(_CalendarGrid, {})
-      ] })
+            children: ViewMap[selectedDropdown]
+          }
+        ),
+        /* @__PURE__ */ jsxs24(
+          "div",
+          {
+            className: cn44(
+              "flex flex-col",
+              selectedDropdown && "pointer-events-none opacity-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs24("div", { className: "mb-4 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx71("div", { className: "flex w-fit gap-4", children: ["month", "year"].map((dateType) => /* @__PURE__ */ jsx71(
+                  CalendarListBox,
+                  {
+                    type: dateType,
+                    isDisabled: props.isDisabled,
+                    setSelectedDropdown
+                  },
+                  dateType
+                )) }),
+                /* @__PURE__ */ jsx71(MonthControls_default, {})
+              ] }),
+              /* @__PURE__ */ jsx71(_CalendarGrid, {})
+            ]
+          }
+        )
+      ]
     }
-  );
+  ) });
 };
 
 // src/DatePicker/DatePicker.tsx
 import React6 from "react";
 import { DatePicker, Dialog as Dialog3 } from "react-aria-components";
-import { useClassNames as useClassNames41 } from "@marigold/system";
+import { useClassNames as useClassNames40 } from "@marigold/system";
 import { jsx as jsx72, jsxs as jsxs25 } from "react/jsx-runtime";
 var _DatePicker = React6.forwardRef(
   ({
@@ -3209,7 +3246,7 @@ var _DatePicker = React6.forwardRef(
       granularity,
       ...rest
     };
-    const classNames3 = useClassNames41({
+    const classNames3 = useClassNames40({
       component: "DatePicker",
       size: size2,
       variant
@@ -3248,7 +3285,7 @@ var _DatePicker = React6.forwardRef(
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn43,
+  cn as cn45,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
@@ -3257,7 +3294,7 @@ import { jsx as jsx73 } from "react/jsx-runtime";
 var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx73(
   "div",
   {
-    className: cn43(
+    className: cn45(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -3269,11 +3306,11 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx73(
 // src/Link/Link.tsx
 import { forwardRef as forwardRef20 } from "react";
 import { Link } from "react-aria-components";
-import { useClassNames as useClassNames42 } from "@marigold/system";
+import { useClassNames as useClassNames41 } from "@marigold/system";
 import { jsx as jsx74 } from "react/jsx-runtime";
 var _Link = forwardRef20(
   ({ variant, size: size2, disabled, children, ...props }, ref) => {
-    const classNames3 = useClassNames42({
+    const classNames3 = useClassNames41({
       component: "Link",
       variant,
       size: size2
@@ -3283,12 +3320,12 @@ var _Link = forwardRef20(
 );
 
 // src/List/List.tsx
-import { useClassNames as useClassNames43 } from "@marigold/system";
+import { useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext8, useContext as useContext16 } from "react";
-var ListContext = createContext8({});
-var useListContext = () => useContext16(ListContext);
+import { createContext as createContext9, useContext as useContext17 } from "react";
+var ListContext = createContext9({});
+var useListContext = () => useContext17(ListContext);
 
 // src/List/ListItem.tsx
 import { jsx as jsx75 } from "react/jsx-runtime";
@@ -3307,30 +3344,30 @@ var List = ({
   ...props
 }) => {
   const Component2 = as;
-  const classNames3 = useClassNames43({ component: "List", variant, size: size2 });
+  const classNames3 = useClassNames42({ component: "List", variant, size: size2 });
   return /* @__PURE__ */ jsx76(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ jsx76(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import { Button as Button6, Menu, MenuTrigger } from "react-aria-components";
-import { useClassNames as useClassNames46 } from "@marigold/system";
+import { Button as Button8, Menu, MenuTrigger } from "react-aria-components";
+import { useClassNames as useClassNames45 } from "@marigold/system";
 
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
-import { useClassNames as useClassNames44 } from "@marigold/system";
+import { useClassNames as useClassNames43 } from "@marigold/system";
 import { jsx as jsx77 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
-  const classNames3 = useClassNames44({ component: "Menu" });
+  const classNames3 = useClassNames43({ component: "Menu" });
   return /* @__PURE__ */ jsx77(MenuItem, { ...props, className: classNames3.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 import { MenuSection } from "react-aria-components";
-import { useClassNames as useClassNames45 } from "@marigold/system";
+import { useClassNames as useClassNames44 } from "@marigold/system";
 import { jsx as jsx78, jsxs as jsxs26 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = useClassNames45({ component: "Menu" });
+  const className = useClassNames44({ component: "Menu" });
   return /* @__PURE__ */ jsxs26(MenuSection, { ...props, children: [
     /* @__PURE__ */ jsx78(_Header, { className: className.section, children: title }),
     children
@@ -3350,10 +3387,10 @@ var _Menu = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const classNames3 = useClassNames46({ component: "Menu", variant, size: size2 });
+  const classNames3 = useClassNames45({ component: "Menu", variant, size: size2 });
   return /* @__PURE__ */ jsxs27(MenuTrigger, { ...props, children: [
     /* @__PURE__ */ jsx79(
-      Button6,
+      Button8,
       {
         className: classNames3.button,
         "aria-label": ariaLabel,
@@ -3368,8 +3405,8 @@ _Menu.Item = _MenuItem;
 _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
-import { Button as Button7, Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
-import { SVG as SVG8, useClassNames as useClassNames47 } from "@marigold/system";
+import { Button as Button9, Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
+import { SVG as SVG8, useClassNames as useClassNames46 } from "@marigold/system";
 import { jsx as jsx80, jsxs as jsxs28 } from "react/jsx-runtime";
 var ActionMenu = ({
   variant,
@@ -3377,9 +3414,9 @@ var ActionMenu = ({
   disabled,
   ...props
 }) => {
-  const classNames3 = useClassNames47({ component: "Menu", variant, size: size2 });
+  const classNames3 = useClassNames46({ component: "Menu", variant, size: size2 });
   return /* @__PURE__ */ jsxs28(MenuTrigger2, { children: [
-    /* @__PURE__ */ jsx80(Button7, { className: classNames3.button, isDisabled: disabled, children: /* @__PURE__ */ jsx80(SVG8, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx80("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__ */ jsx80(Button9, { className: classNames3.button, isDisabled: disabled, children: /* @__PURE__ */ jsx80(SVG8, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx80("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__ */ jsx80(_Popover, { children: /* @__PURE__ */ jsx80(Menu2, { ...props, className: classNames3.container, children: props.children }) })
   ] });
 };
@@ -3387,29 +3424,29 @@ var ActionMenu = ({
 // src/SectionMessage/SectionMessage.tsx
 import { useRef as useRef3, useState as useState2 } from "react";
 import { useButton } from "@react-aria/button";
-import { cn as cn46, useClassNames as useClassNames48 } from "@marigold/system";
+import { cn as cn48, useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/SectionMessage/Context.tsx
-import { createContext as createContext9, useContext as useContext17 } from "react";
-var SectionMessageContext = createContext9({});
-var useSectionMessageContext = () => useContext17(SectionMessageContext);
+import { createContext as createContext10, useContext as useContext18 } from "react";
+var SectionMessageContext = createContext10({});
+var useSectionMessageContext = () => useContext18(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
-import { cn as cn44 } from "@marigold/system";
+import { cn as cn46 } from "@marigold/system";
 import { jsx as jsx81 } from "react/jsx-runtime";
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx81("div", { className: cn44("[grid-area:content]", classNames3.content), children });
+  return /* @__PURE__ */ jsx81("div", { className: cn46("[grid-area:content]", classNames3.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
-import { cn as cn45 } from "@marigold/system";
+import { cn as cn47 } from "@marigold/system";
 import { jsx as jsx82 } from "react/jsx-runtime";
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx82("div", { className: cn45("[grid-area:title]", classNames3.title), children });
+  return /* @__PURE__ */ jsx82("div", { className: cn47("[grid-area:title]", classNames3.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
@@ -3490,7 +3527,7 @@ var SectionMessage = ({
   ...props
 }) => {
   const buttonRef = useRef3(null);
-  const classNames3 = useClassNames48({
+  const classNames3 = useClassNames47({
     component: "SectionMessage",
     variant,
     size: size2
@@ -3511,16 +3548,16 @@ var SectionMessage = ({
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
-      className: cn46("grid auto-rows-min", classNames3.container),
+      className: cn48("grid auto-rows-min", classNames3.container),
       children: [
-        /* @__PURE__ */ jsx83("div", { className: cn46("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ jsx83(Icon4, {}) }),
+        /* @__PURE__ */ jsx83("div", { className: cn48("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ jsx83(Icon4, {}) }),
         closeButton && /* @__PURE__ */ jsx83(
           CloseButton,
           {
             ...buttonProps,
             ref: buttonRef,
             "aria-label": "close",
-            className: cn46("[grid-area:close]", classNames3.close),
+            className: cn48("[grid-area:close]", classNames3.close),
             onPress: handleClose
           }
         ),
@@ -3534,7 +3571,7 @@ SectionMessage.Content = SectionMessageContent;
 
 // src/Multiselect/Multiselect.tsx
 import {
-  Button as Button8,
+  Button as Button10,
   ButtonContext,
   FieldErrorContext as FieldErrorContext2,
   InputContext,
@@ -3679,7 +3716,7 @@ 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
+// ../../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
 import { useState as useState3, useCallback } from "react";
 var _excluded = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
 function useStateManager(_ref3) {
@@ -3737,7 +3774,7 @@ 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
 import * as React11 from "react";
 import { forwardRef as forwardRef23, useMemo as useMemo5 } from "react";
 
@@ -3845,13 +3882,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
 import * as React10 from "react";
-import { useMemo as useMemo4, Fragment as Fragment9, useRef as useRef6, useCallback as useCallback3, useEffect as useEffect3, Component } from "react";
+import { useMemo as useMemo4, Fragment as Fragment8, useRef as useRef6, useCallback as useCallback3, useEffect as useEffect3, Component } from "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
 import * as React8 from "react";
-import { useContext as useContext19, forwardRef as forwardRef22 } from "react";
+import { useContext as useContext20, forwardRef as forwardRef22 } from "react";
 
 // ../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
 var isDevelopment = false;
@@ -5023,7 +5060,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(
@@ -5040,14 +5077,14 @@ var EmotionCacheContext = /* @__PURE__ */ React8.createContext(
 var CacheProvider = EmotionCacheContext.Provider;
 var withEmotionCache = function withEmotionCache2(func) {
   return /* @__PURE__ */ forwardRef22(function(props, ref) {
-    var cache = useContext19(EmotionCacheContext);
+    var cache = useContext20(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
 if (!isBrowser4) {
   withEmotionCache = function withEmotionCache3(func) {
     return function(props) {
-      var cache = useContext19(EmotionCacheContext);
+      var cache = useContext20(EmotionCacheContext);
       if (cache === null) {
         cache = createCache({
           key: "css"
@@ -5127,7 +5164,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
 import * as React9 from "react";
 var import_extends2 = __toESM(require_extends());
 var import_hoist_non_react_statics = __toESM(require_hoist_non_react_statics_cjs());
@@ -5178,8 +5215,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
-import { useContext as useContext21, useRef as useRef5, useState as useState4, useMemo as useMemo3, useCallback as useCallback2, createContext as createContext11 } from "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
+import { useContext as useContext22, useRef as useRef5, useState as useState4, useMemo as useMemo3, useCallback as useCallback2, createContext as createContext12 } from "react";
 import { createPortal } from "react-dom";
 
 // ../../node_modules/.pnpm/@floating-ui+utils@0.2.9/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
@@ -5579,12 +5616,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
+// ../../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
 import { useLayoutEffect as useLayoutEffect2, useEffect as useEffect2 } from "react";
 var isClient = typeof document !== "undefined";
 var index = isClient ? useLayoutEffect2 : useEffect2;
 
-// ../../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() {
 };
@@ -5916,10 +5953,10 @@ var menuCSS = function menuCSS2(_ref23, unstyled) {
     marginTop: spacing2.menuGutter
   });
 };
-var PortalPlacementContext = /* @__PURE__ */ createContext11(null);
+var PortalPlacementContext = /* @__PURE__ */ createContext12(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 = useContext21(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
+  var _ref3 = useContext22(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
   var ref = useRef5(null);
   var _useState = useState4(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
   var _useState3 = useState4(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
@@ -6658,7 +6695,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).";
 }
@@ -6807,7 +6844,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx84(Fragment9, null, jsx84("span", {
+  var ScreenReaderText = jsx84(Fragment8, null, jsx84("span", {
     id: "aria-selection"
   }, ariaSelected), jsx84("span", {
     id: "aria-focused"
@@ -6816,7 +6853,7 @@ var LiveRegion = function LiveRegion2(props) {
   }, ariaResults), jsx84("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx84(Fragment9, null, jsx84(A11yText$1, {
+  return jsx84(Fragment8, null, jsx84(A11yText$1, {
     id
   }, isInitialFocus && ScreenReaderText), jsx84(A11yText$1, {
     "aria-live": ariaLive,
@@ -7373,7 +7410,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx84(Fragment9, null, lockEnabled && jsx84("div", {
+  return jsx84(Fragment8, null, lockEnabled && jsx84("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -8954,7 +8991,7 @@ var Select = /* @__PURE__ */ function(_Component) {
 }(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());
@@ -8975,7 +9012,7 @@ var StateManagedSelect = /* @__PURE__ */ forwardRef23(function(props, ref) {
 });
 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
 import { useId as $83Elw$useId, useLabels as $83Elw$useLabels } from "@react-aria/utils";
 function $d191a55c9702f145$export$8467354a121f1b9f(props) {
   let { id, label, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, labelElementType = "label" } = props;
@@ -9000,7 +9037,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
 import { useSlotId as $2kC82$useSlotId, mergeProps as $2kC82$mergeProps } from "@react-aria/utils";
 function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
   let { description, errorMessage, isInvalid, validationState } = props;
@@ -9039,7 +9076,7 @@ function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
 
 // src/Multiselect/Multiselect.tsx
 import { useId } from "@react-aria/utils";
-import { cn as cn47, useClassNames as useClassNames49 } from "@marigold/system";
+import { cn as cn49, useClassNames as useClassNames48 } from "@marigold/system";
 import { jsx as jsx86, jsxs as jsxs30 } from "react/jsx-runtime";
 var propsToBeRemoved = [
   "clearValue",
@@ -9077,20 +9114,20 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
   );
 };
 var MultiValueRemove2 = ({ innerProps }) => {
-  return /* @__PURE__ */ jsx86(Button8, { slot: "remove", ...innerProps, children: /* @__PURE__ */ jsx86("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx86("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__ */ jsx86(Button10, { slot: "remove", ...innerProps, children: /* @__PURE__ */ jsx86("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx86("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: () => cn47(
+  control: () => cn49(
     "relative flex items-center box-border flex-wrap justify-between",
     classNames3.container
   ),
   container: () => "pointer-events-auto",
   indicatorSeparator: () => "hidden",
-  menu: () => cn47("b", classNames3.listContainer),
-  menuList: () => cn47("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
-  multiValue: () => cn47(classNames3.tag, "m-0 "),
+  menu: () => cn49("b", classNames3.listContainer),
+  menuList: () => cn49("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
+  multiValue: () => cn49(classNames3.tag, "m-0 "),
   multiValueLabel: () => "p-0",
-  option: ({ isFocused }) => cn47(classNames3.option, { isFocused }),
+  option: ({ isFocused }) => cn49(classNames3.option, { isFocused }),
   placeholder: () => "hidden",
   valueContainer: () => classNames3.valueContainer
 });
@@ -9111,7 +9148,7 @@ var Multiselect = ({
   onSelectionChange,
   ...rest
 }) => {
-  const classNames3 = useClassNames49({
+  const classNames3 = useClassNames48({
     component: "MultiSelect",
     size: size2,
     variant
@@ -9155,14 +9192,14 @@ var Multiselect = ({
             // 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: cn47("flex items-center", classNames3.closeButton)
+            className: cn49("flex items-center", classNames3.closeButton)
           }
         ]
       ],
       children: /* @__PURE__ */ jsxs30(
         "div",
         {
-          className: cn47(classNames3.field, "group/field"),
+          className: cn49(classNames3.field, "group/field"),
           "data-required": props.required,
           "data-invalid": error,
           "data-readonly": readOnly,
@@ -9227,11 +9264,11 @@ var Multiselect = ({
 // src/NumberField/NumberField.tsx
 import { forwardRef as forwardRef24 } from "react";
 import { Group as Group4, Input as Input5, NumberField } from "react-aria-components";
-import { cn as cn49, useClassNames as useClassNames50 } from "@marigold/system";
+import { cn as cn51, useClassNames as useClassNames49 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import { Button as Button9 } from "react-aria-components";
-import { cn as cn48 } from "@marigold/system";
+import { Button as Button11 } from "react-aria-components";
+import { cn as cn50 } from "@marigold/system";
 import { jsx as jsx87 } from "react/jsx-runtime";
 var Plus = () => /* @__PURE__ */ jsx87("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx87(
   "path",
@@ -9252,9 +9289,9 @@ var Minus = () => /* @__PURE__ */ jsx87("svg", { width: 16, height: 16, viewBox:
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
   return /* @__PURE__ */ jsx87(
-    Button9,
+    Button11,
     {
-      className: cn48(
+      className: cn50(
         [
           "flex items-center justify-center",
           "cursor-pointer data-disabled:cursor-not-allowed"
@@ -9280,7 +9317,7 @@ var _NumberField = forwardRef24(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames50({
+    const classNames3 = useClassNames49({
       component: "NumberField",
       size: size2,
       variant
@@ -9300,7 +9337,7 @@ var _NumberField = forwardRef24(
         ...props,
         "data-readonly": readOnly ? "true" : void 0,
         "data-stepper": showStepper ? "true" : void 0,
-        children: /* @__PURE__ */ jsxs31(Group4, { className: cn49("flex items-stretch", classNames3.group), children: [
+        children: /* @__PURE__ */ jsxs31(Group4, { className: cn51("flex items-stretch", classNames3.group), children: [
           showStepper && /* @__PURE__ */ jsx88(
             _StepButton,
             {
@@ -9313,7 +9350,7 @@ var _NumberField = forwardRef24(
             Input5,
             {
               ref,
-              className: cn49("h-full flex-1 outline-none", classNames3.input)
+              className: cn51("h-full flex-1 outline-none", classNames3.input)
             }
           ),
           showStepper && /* @__PURE__ */ jsx88(
@@ -9333,7 +9370,7 @@ var _NumberField = forwardRef24(
 // src/Pagination/Pagination.tsx
 import { useEffect as useEffect4, useRef as useRef9, useState as useState5 } from "react";
 import { FocusScope as FocusScope2, useFocusManager } from "@react-aria/focus";
-import { useClassNames as useClassNames53 } from "@marigold/system";
+import { useClassNames as useClassNames52 } from "@marigold/system";
 
 // src/Pagination/Ellipsis.tsx
 import { jsx as jsx89 } from "react/jsx-runtime";
@@ -9351,11 +9388,11 @@ var Ellipsis = () => {
 // src/Pagination/NavigationButton.tsx
 import { useRef as useRef7 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
-import { cn as cn50, useClassNames as useClassNames51 } from "@marigold/system";
+import { cn as cn52, useClassNames as useClassNames50 } from "@marigold/system";
 import { jsxs as jsxs32 } from "react/jsx-runtime";
 var NavigationButton = (props) => {
   const ref = useRef7(null);
-  const classNames3 = useClassNames51({
+  const classNames3 = useClassNames50({
     component: "Pagination"
   });
   let { buttonProps } = useButton2(props, ref);
@@ -9375,7 +9412,7 @@ var NavigationButton = (props) => {
       ...buttonProps,
       ...rest,
       disabled: isDisabled,
-      className: cn50(classNames3.navigationButton, controlLabel && "w-24 px-2"),
+      className: cn52(classNames3.navigationButton, controlLabel && "w-24 px-2"),
       "data-selected": isSelected,
       children: [
         position2 === "left" && children,
@@ -9389,11 +9426,11 @@ var NavigationButton = (props) => {
 // src/Pagination/PageButton.tsx
 import { useRef as useRef8 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
-import { useClassNames as useClassNames52 } from "@marigold/system";
+import { useClassNames as useClassNames51 } from "@marigold/system";
 import { jsx as jsx90 } from "react/jsx-runtime";
 var PageButton = (props) => {
   const ref = useRef8(null);
-  const classNames3 = useClassNames52({
+  const classNames3 = useClassNames51({
     component: "Pagination"
   });
   let { buttonProps } = useButton3(props, ref);
@@ -9445,7 +9482,7 @@ var usePageRange = ({ currentPage, totalPages }) => {
 };
 
 // src/Pagination/Pagination.tsx
-import { Fragment as Fragment10, jsx as jsx91, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx91, jsxs as jsxs33 } from "react/jsx-runtime";
 var InnerPagination = ({
   currentPage,
   pageSize,
@@ -9472,7 +9509,7 @@ var InnerPagination = ({
       onChange2(newPage);
     }
   };
-  const classNames3 = useClassNames53({ component: "Pagination" });
+  const classNames3 = useClassNames52({ component: "Pagination" });
   const handleKeyDown = (onEnter) => (e) => {
     if (e.key === "ArrowRight") {
       e.preventDefault();
@@ -9485,7 +9522,7 @@ var InnerPagination = ({
       onEnter();
     }
   };
-  return /* @__PURE__ */ jsxs33(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment9, { children: [
     /* @__PURE__ */ jsx91(
       NavigationButton,
       {
@@ -9559,18 +9596,18 @@ import {
   forwardRef as forwardRef25
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn52, useClassNames as useClassNames55 } from "@marigold/system";
+import { cn as cn54, useClassNames as useClassNames54 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext12, useContext as useContext22 } from "react";
-var RadioGroupContext = createContext12(
+import { createContext as createContext13, useContext as useContext23 } from "react";
+var RadioGroupContext = createContext13(
   null
 );
-var useRadioGroupContext = () => useContext22(RadioGroupContext);
+var useRadioGroupContext = () => useContext23(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn51, useClassNames as useClassNames54 } from "@marigold/system";
+import { cn as cn53, useClassNames as useClassNames53 } from "@marigold/system";
 import { jsx as jsx92 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
@@ -9587,7 +9624,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames3 = useClassNames54({ component: "Radio", variant, size: size2 });
+  const classNames3 = useClassNames53({ component: "Radio", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -9612,7 +9649,7 @@ var _RadioGroup = ({
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn51(
+          className: cn53(
             classNames3.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
@@ -9625,12 +9662,12 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment11, jsx as jsx93, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx93, jsxs as jsxs34 } from "react/jsx-runtime";
 var Dot = () => /* @__PURE__ */ jsx93("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx93("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
 var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx93(
   "div",
   {
-    className: cn52(
+    className: cn54(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
@@ -9642,7 +9679,7 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx93(
 var _Radio = forwardRef25(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size: size2, width: groupWidth } = useRadioGroupContext();
-    const classNames3 = useClassNames55({
+    const classNames3 = useClassNames54({
       component: "Radio",
       variant: variant || props.variant,
       size: size2 || props.size
@@ -9651,7 +9688,7 @@ var _Radio = forwardRef25(
       Radio,
       {
         ref,
-        className: cn52(
+        className: cn54(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -9660,12 +9697,12 @@ var _Radio = forwardRef25(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs34(Fragment11, { children: [
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs34(Fragment10, { children: [
           /* @__PURE__ */ jsx93(
             Icon3,
             {
               checked: isSelected,
-              className: cn52(
+              className: cn54(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames3.radio
               )
@@ -9705,7 +9742,7 @@ var _SearchField = forwardRef26(
 // src/Select/Select.tsx
 import { forwardRef as forwardRef27 } from "react";
 import { Select as Select2, SelectValue } from "react-aria-components";
-import { cn as cn53, useClassNames as useClassNames56 } from "@marigold/system";
+import { cn as cn55, useClassNames as useClassNames55 } from "@marigold/system";
 import { jsx as jsx95, jsxs as jsxs35 } from "react/jsx-runtime";
 var _Select = forwardRef27(
   ({
@@ -9727,18 +9764,18 @@ var _Select = forwardRef27(
       onSelectionChange: onChange2,
       ...rest
     };
-    const classNames3 = useClassNames56({ component: "Select", variant, size: size2 });
+    const classNames3 = useClassNames55({ component: "Select", variant, size: size2 });
     return /* @__PURE__ */ jsxs35(FieldBase, { as: Select2, ref, variant, size: size2, ...props, children: [
       /* @__PURE__ */ jsxs35(
         IconButton,
         {
-          className: cn53(
+          className: cn55(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames3.select
           ),
           children: [
             /* @__PURE__ */ jsx95(SelectValue, { className: "[&>[slot=description]]:hidden" }),
-            /* @__PURE__ */ jsx95(ChevronDown, { className: cn53("size-4", classNames3.icon) })
+            /* @__PURE__ */ jsx95(ChevronDown, { className: cn55("size-4", classNames3.icon) })
           ]
         }
       ),
@@ -9754,20 +9791,20 @@ import {
   forwardRef as forwardRef29
 } from "react";
 import { GridList as SelectList } from "react-aria-components";
-import { cn as cn55, useClassNames as useClassNames57 } from "@marigold/system";
+import { cn as cn57, useClassNames as useClassNames56 } from "@marigold/system";
 
 // src/SelectList/Context.ts
-import { createContext as createContext13, useContext as useContext23 } from "react";
-var SelectListContext = createContext13(
+import { createContext as createContext14, useContext as useContext24 } from "react";
+var SelectListContext = createContext14(
   {}
 );
-var useSelectListContext = () => useContext23(SelectListContext);
+var useSelectListContext = () => useContext24(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
 import { forwardRef as forwardRef28 } from "react";
 import { GridListItem as SelectListItem } from "react-aria-components";
-import { cn as cn54 } from "@marigold/system";
-import { Fragment as Fragment12, jsx as jsx96, jsxs as jsxs36 } from "react/jsx-runtime";
+import { cn as cn56 } from "@marigold/system";
+import { Fragment as Fragment11, jsx as jsx96, jsxs as jsxs36 } from "react/jsx-runtime";
 var CheckMark3 = ({ className }) => /* @__PURE__ */ jsx96("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", className, children: /* @__PURE__ */ jsx96(
   "path",
   {
@@ -9795,9 +9832,9 @@ var _SelectListItem = forwardRef28(
       {
         textValue,
         ...props,
-        className: cn54("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.item),
+        className: cn56("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.item),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ jsxs36(Fragment12, { children: [
+        children: ({ selectionMode }) => /* @__PURE__ */ jsxs36(Fragment11, { children: [
           /* @__PURE__ */ jsx96(SelectionIndicator, { selectionMode }),
           children
         ] })
@@ -9810,7 +9847,7 @@ var _SelectListItem = forwardRef28(
 import { jsx as jsx97 } from "react/jsx-runtime";
 var _SelectList = forwardRef29(
   ({ onChange: onChange2, ...rest }, ref) => {
-    const classNames3 = useClassNames57({ component: "ListBox" });
+    const classNames3 = useClassNames56({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange2,
       ...rest
@@ -9821,7 +9858,7 @@ var _SelectList = forwardRef29(
         ...props,
         layout: "grid",
         ref,
-        className: cn55(
+        className: cn57(
           "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames3.list
         ),
@@ -9833,7 +9870,7 @@ var _SelectList = forwardRef29(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-import { cn as cn56, createVar as createVar8, width as twWidth2 } from "@marigold/system";
+import { cn as cn58, createVar as createVar8, width as twWidth2 } from "@marigold/system";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var Scrollable = ({
   children,
@@ -9844,7 +9881,7 @@ var Scrollable = ({
   "div",
   {
     ...props,
-    className: cn56(["sticky h-(--height) overflow-auto", twWidth2[width]]),
+    className: cn58(["sticky h-(--height) overflow-auto", twWidth2[width]]),
     style: createVar8({ height }),
     children
   }
@@ -9859,11 +9896,11 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn57,
+  cn as cn59,
   width as twWidth3,
-  useClassNames as useClassNames58
+  useClassNames as useClassNames57
 } from "@marigold/system";
-import { Fragment as Fragment13, jsx as jsx99, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx99, jsxs as jsxs37 } from "react/jsx-runtime";
 var _Slider = forwardRef30(
   ({
     thumbLabels,
@@ -9874,7 +9911,7 @@ var _Slider = forwardRef30(
     label,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames58({
+    const classNames3 = useClassNames57({
       component: "Slider",
       variant,
       size: size2
@@ -9887,7 +9924,7 @@ var _Slider = forwardRef30(
       FieldBase,
       {
         as: Slider,
-        className: cn57(
+        className: cn59(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames3.container,
           twWidth3[width]
@@ -9896,16 +9933,16 @@ var _Slider = forwardRef30(
         ...props,
         children: [
           label && /* @__PURE__ */ jsx99(_Label, { children: label }),
-          /* @__PURE__ */ jsx99(SliderOutput, { className: cn57("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx99(SliderOutput, { className: cn59("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
           /* @__PURE__ */ jsx99(
             SliderTrack,
             {
-              className: cn57("relative col-span-2 h-2 w-full", classNames3.track),
-              children: ({ state }) => /* @__PURE__ */ jsxs37(Fragment13, { children: [
+              className: cn59("relative col-span-2 h-2 w-full", classNames3.track),
+              children: ({ state }) => /* @__PURE__ */ jsxs37(Fragment12, { children: [
                 /* @__PURE__ */ jsx99(
                   "div",
                   {
-                    className: cn57(
+                    className: cn59(
                       "absolute top-[50%] h-2 w-full translate-y-[-50%]",
                       classNames3.track
                     )
@@ -9914,7 +9951,7 @@ var _Slider = forwardRef30(
                 /* @__PURE__ */ jsx99(
                   "div",
                   {
-                    className: cn57(
+                    className: cn59(
                       "absolute top-[50%] h-2 translate-y-[-50%]",
                       classNames3.selectedTrack
                     ),
@@ -9927,7 +9964,7 @@ var _Slider = forwardRef30(
                 state.values.map((_, i) => /* @__PURE__ */ jsx99(
                   SliderThumb,
                   {
-                    className: cn57("top-1/2 cursor-pointer", classNames3.thumb),
+                    className: cn59("top-1/2 cursor-pointer", classNames3.thumb),
                     index: i,
                     "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
                     name: thumbLabels == null ? void 0 : thumbLabels[i]
@@ -9948,7 +9985,7 @@ import { jsx as jsx100 } from "react/jsx-runtime";
 var Split = () => /* @__PURE__ */ jsx100("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-import { alignment as alignment2, cn as cn58, gapSpace as gapSpace8 } from "@marigold/system";
+import { alignment as alignment3, cn as cn60, gapSpace as gapSpace8 } from "@marigold/system";
 import { jsx as jsx101 } from "react/jsx-runtime";
 var Stack = ({
   children,
@@ -9962,11 +9999,11 @@ var Stack = ({
   return /* @__PURE__ */ jsx101(
     "div",
     {
-      className: cn58(
+      className: cn60(
         "flex flex-col",
         gapSpace8[space],
-        alignX && ((_b = (_a = alignment2) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = alignment2) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = alignment3) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -9979,9 +10016,9 @@ var Stack = ({
 import { forwardRef as forwardRef31 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn59,
+  cn as cn61,
   width as twWidth4,
-  useClassNames as useClassNames59
+  useClassNames as useClassNames58
 } from "@marigold/system";
 import { jsx as jsx102, jsxs as jsxs38 } from "react/jsx-runtime";
 var _Switch = forwardRef31(
@@ -9995,7 +10032,7 @@ var _Switch = forwardRef31(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames59({ component: "Switch", size: size2, variant });
+    const classNames3 = useClassNames58({ component: "Switch", size: size2, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10007,7 +10044,7 @@ var _Switch = forwardRef31(
       {
         ...props,
         ref,
-        className: cn59(
+        className: cn61(
           twWidth4[width],
           "group/switch",
           "flex items-center gap-[1ch]",
@@ -10033,12 +10070,12 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn66, useClassNames as useClassNames61 } from "@marigold/system";
+import { cn as cn68, useClassNames as useClassNames60 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext14, useContext as useContext24 } from "react";
-var TableContext = createContext14({});
-var useTableContext = () => useContext24(TableContext);
+import { createContext as createContext15, useContext as useContext25 } from "react";
+var TableContext = createContext15({});
+var useTableContext = () => useContext25(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
@@ -10069,7 +10106,7 @@ import { useRef as useRef10 } from "react";
 import { useFocusRing } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps2 } from "@react-aria/utils";
-import { cn as cn60, useStateProps } from "@marigold/system";
+import { cn as cn62, useStateProps } from "@marigold/system";
 import { jsx as jsx104 } from "react/jsx-runtime";
 var TableCell = ({ cell, align = "left" }) => {
   const ref = useRef10(null);
@@ -10097,7 +10134,7 @@ var TableCell = ({ cell, align = "left" }) => {
     "td",
     {
       ref,
-      className: cn60(classNames3 == null ? void 0 : classNames3.cell),
+      className: cn62(classNames3 == null ? void 0 : classNames3.cell),
       ...mergeProps2(cellProps, focusProps),
       ...stateProps,
       align,
@@ -10111,7 +10148,7 @@ import { useRef as useRef11 } from "react";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { cn as cn61, useStateProps as useStateProps2 } from "@marigold/system";
+import { cn as cn63, useStateProps as useStateProps2 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -10155,7 +10192,7 @@ var TableCheckboxCell = ({ cell }) => {
     "td",
     {
       ref,
-      className: cn61("text-center align-middle leading-none", classNames3 == null ? void 0 : classNames3.cell),
+      className: cn63("text-center align-middle leading-none", classNames3 == null ? void 0 : classNames3.cell),
       ...mergeProps3(gridCellProps, focusProps),
       ...stateProps,
       children: /* @__PURE__ */ jsx105(_Checkbox, { ...checkboxProps })
@@ -10169,7 +10206,7 @@ import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn62, width as twWidth5, useStateProps as useStateProps3 } from "@marigold/system";
+import { cn as cn64, width as twWidth5, useStateProps as useStateProps3 } from "@marigold/system";
 import { jsx as jsx106, jsxs as jsxs39 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column: column2,
@@ -10197,7 +10234,7 @@ var TableColumnHeader = ({
     {
       colSpan: column2.colspan,
       ref,
-      className: cn62("cursor-default", twWidth5[width], classNames3 == null ? void 0 : classNames3.header),
+      className: cn64("cursor-default", twWidth5[width], classNames3 == null ? void 0 : classNames3.header),
       ...mergeProps4(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -10211,7 +10248,7 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { cn as cn63 } from "@marigold/system";
+import { cn as cn65 } from "@marigold/system";
 import { jsx as jsx107 } from "react/jsx-runtime";
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = useTableRowGroup2();
@@ -10220,7 +10257,7 @@ var TableHeader = ({ stickyHeader, children }) => {
     "thead",
     {
       ...rowGroupProps,
-      className: cn63(
+      className: cn65(
         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
@@ -10252,13 +10289,13 @@ import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { cn as cn64, useClassNames as useClassNames60, useStateProps as useStateProps4 } from "@marigold/system";
+import { cn as cn66, useClassNames as useClassNames59, useStateProps as useStateProps4 } from "@marigold/system";
 import { jsx as jsx109 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef14(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size: size2 } = row.props;
-  const classNames3 = useClassNames60({
+  const classNames3 = useClassNames59({
     component: "Table",
     variant: variant || ctx.variant,
     size: size2 || ctx.size
@@ -10287,7 +10324,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: cn64(
+      className: cn66(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -10310,7 +10347,7 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
 import {
-  cn as cn65,
+  cn as cn67,
   width as twWidth6,
   useStateProps as useStateProps5
 } from "@marigold/system";
@@ -10340,7 +10377,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: cn65(twWidth6[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
+      className: cn67(twWidth6[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
       ...mergeProps6(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -10373,7 +10410,7 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames3 = useClassNames61({
+  const classNames3 = useClassNames60({
     component: "Table",
     variant,
     size: size2
@@ -10387,7 +10424,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn66(
+          className: cn68(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -10456,14 +10493,14 @@ Table.Row = Row;
 // src/Text/Text.tsx
 import { Text as Text2 } from "react-aria-components";
 import {
-  cn as cn67,
+  cn as cn69,
   cursorStyle,
   ensureCssVar as ensureCssVar2,
   fontWeight,
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames62
+  useClassNames as useClassNames61
 } from "@marigold/system";
 import { jsx as jsx112 } from "react/jsx-runtime";
 var _Text = ({
@@ -10479,7 +10516,7 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const classNames3 = useClassNames62({
+  const classNames3 = useClassNames61({
     component: "Text",
     variant,
     size: size2
@@ -10491,7 +10528,7 @@ var _Text = ({
     {
       ...props,
       ...elementType,
-      className: cn67(
+      className: cn69(
         "max-w-(--maxTextWidth)",
         // possibly set by a <Container>
         classNames3,
@@ -10510,7 +10547,7 @@ var _Text = ({
 // src/TextArea/TextArea.tsx
 import { forwardRef as forwardRef32 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames63 } from "@marigold/system";
+import { useClassNames as useClassNames62 } from "@marigold/system";
 import { jsx as jsx113 } from "react/jsx-runtime";
 var _TextArea = forwardRef32(
   ({
@@ -10523,7 +10560,7 @@ var _TextArea = forwardRef32(
     rows,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames63({ component: "TextArea", variant, size: size2 });
+    const classNames3 = useClassNames62({ component: "TextArea", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10553,7 +10590,7 @@ var _TextField = forwardRef33(
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn68, createVar as createVar9, gapSpace as gapSpace9 } from "@marigold/system";
+import { cn as cn70, createVar as createVar9, gapSpace as gapSpace9 } from "@marigold/system";
 import { jsx as jsx115 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
@@ -10571,7 +10608,7 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: cn68(
+      className: cn70(
         "grid",
         gapSpace9[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -10585,7 +10622,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn69, useClassNames as useClassNames64 } from "@marigold/system";
+import { cn as cn71, useClassNames as useClassNames63 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
@@ -10613,13 +10650,13 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
     ...rest,
     isOpen: open
   };
-  const classNames3 = useClassNames64({ component: "Tooltip", variant, size: size2 });
+  const classNames3 = useClassNames63({ component: "Tooltip", variant, size: size2 });
   const portal = usePortalContainer();
   return /* @__PURE__ */ jsxs41(
     Tooltip,
     {
       ...props,
-      className: cn69("group/tooltip", classNames3.container),
+      className: cn71("group/tooltip", classNames3.container),
       UNSTABLE_portalContainer: portal,
       children: [
         /* @__PURE__ */ jsx117(OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ jsx117("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx117("path", { d: "M0 0 L4 4 L8 0" }) }) }),
@@ -10632,19 +10669,19 @@ _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
 import { Tag } from "react-aria-components";
-import { cn as cn70, useClassNames as useClassNames66 } from "@marigold/system";
+import { cn as cn72, useClassNames as useClassNames65 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
-import { useClassNames as useClassNames65 } from "@marigold/system";
+import { useClassNames as useClassNames64 } from "@marigold/system";
 
 // src/TagGroup/TagGroupHiddenInput.tsx
-import { useContext as useContext25 } from "react";
+import { useContext as useContext26 } from "react";
 import { ListStateContext } from "react-aria-components";
 import { jsx as jsx118 } from "react/jsx-runtime";
 var TagGroupHiddenInput = ({ name }) => {
   var _a;
-  const state = useContext25(ListStateContext);
+  const state = useContext26(ListStateContext);
   const selectedKeys = Array.from((_a = state == null ? void 0 : state.selectionManager.selectedKeys) != null ? _a : []);
   if (!selectedKeys.length) return null;
   return /* @__PURE__ */ jsx118("div", { hidden: true, "aria-hidden": "true", children: selectedKeys.map((key) => /* @__PURE__ */ jsx118(
@@ -10672,7 +10709,7 @@ var _TagGroup = ({
   name,
   ...rest
 }) => {
-  const classNames3 = useClassNames65({ component: "Tag", variant, size: size2 });
+  const classNames3 = useClassNames64({ component: "Tag", variant, size: size2 });
   return /* @__PURE__ */ jsxs42(FieldBase, { as: TagGroup, ...rest, children: [
     /* @__PURE__ */ jsx119(
       TagList,
@@ -10688,10 +10725,10 @@ var _TagGroup = ({
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment14, jsx as jsx120, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx120, jsxs as jsxs43 } from "react/jsx-runtime";
 var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames3 = useClassNames66({ component: "Tag", variant, size: size2 });
+  const classNames3 = useClassNames65({ component: "Tag", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     ...rest
@@ -10701,8 +10738,8 @@ var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
     {
       textValue,
       ...props,
-      className: cn70("data-selection-mode:cursor-pointer", classNames3.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs43(Fragment14, { children: [
+      className: cn72("data-selection-mode:cursor-pointer", classNames3.tag),
+      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs43(Fragment13, { children: [
         children,
         allowsRemoving && /* @__PURE__ */ jsx120(CloseButton, { className: classNames3.closeButton, slot: "remove" })
       ] })
@@ -10717,12 +10754,12 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 // src/XLoader/XLoader.tsx
 import { Dialog as Dialog4, Modal as Modal2 } from "react-aria-components";
 import { useId as useId2 } from "@react-aria/utils";
-import { useClassNames as useClassNames68 } from "@marigold/system";
+import { useClassNames as useClassNames67 } from "@marigold/system";
 
 // src/XLoader/BaseLoader.tsx
 import { Label as Label2, ProgressBar as ProgressBar2 } from "react-aria-components";
 import { useLocalizedStringFormatter as useLocalizedStringFormatter2 } from "@react-aria/i18n";
-import { useClassNames as useClassNames67 } from "@marigold/system";
+import { useClassNames as useClassNames66 } from "@marigold/system";
 
 // src/intl/messages.ts
 var intlMessages2 = {
@@ -10744,7 +10781,7 @@ var BaseLoader = ({
   ...props
 }) => {
   const stringFormatter = useLocalizedStringFormatter2(intlMessages2, "marigold");
-  const className = useClassNames67({ component: "XLoader", variant, size: size2 });
+  const className = useClassNames66({ component: "XLoader", variant, size: size2 });
   return /* @__PURE__ */ jsxs44(
     ProgressBar2,
     {
@@ -10976,7 +11013,7 @@ var LoaderFullScreen = (props) => {
   return /* @__PURE__ */ jsx122(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx122(Modal2, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ jsx122(Dialog4, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx122(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
-  const className = useClassNames68({
+  const className = useClassNames67({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
@@ -10987,16 +11024,16 @@ var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PUR
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames69 } from "@marigold/system";
+import { useClassNames as useClassNames68 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext15, useContext as useContext26 } from "react";
-var TabContext = createContext15({});
-var useTabContext = () => useContext26(TabContext);
+import { createContext as createContext16, useContext as useContext27 } from "react";
+var TabContext = createContext16({});
+var useTabContext = () => useContext27(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn71 } from "@marigold/system";
+import { cn as cn73 } from "@marigold/system";
 import { jsx as jsx123 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames3 } = useTabContext();
@@ -11004,7 +11041,7 @@ var _Tab = (props) => {
     Tab,
     {
       ...props,
-      className: cn71(
+      className: cn73(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames3.tab
       ),
@@ -11015,7 +11052,7 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn72, gapSpace as gapSpace10 } from "@marigold/system";
+import { cn as cn74, gapSpace as gapSpace10 } from "@marigold/system";
 import { jsx as jsx124 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames3 } = useTabContext();
@@ -11023,7 +11060,7 @@ var _TabList = ({ space = 2, ...props }) => {
     TabList,
     {
       ...props,
-      className: cn72("flex", gapSpace10[space], classNames3.tabsList),
+      className: cn74("flex", gapSpace10[space], classNames3.tabsList),
       children: props.children
     }
   );
@@ -11044,7 +11081,7 @@ var _Tabs = ({ disabled, variant, size: size2 = "medium", ...rest }) => {
     isDisabled: disabled,
     ...rest
   };
-  const classNames3 = useClassNames69({
+  const classNames3 = useClassNames68({
     component: "Tabs",
     size: size2,
     variant
@@ -11057,6 +11094,45 @@ _Tabs.Item = _Tab;
 
 // src/RouterProvider/RouterProvider.tsx
 import { RouterProvider } from "react-aria-components";
+
+// src/TimeField/TimeField.tsx
+import { forwardRef as forwardRef34 } from "react";
+import { DateInput as DateInput2, DateSegment as DateSegment2, TimeField } from "react-aria-components";
+import { useClassNames as useClassNames69 } from "@marigold/system";
+import { jsx as jsx127 } from "react/jsx-runtime";
+var _TimeField = forwardRef34(
+  ({
+    required,
+    disabled,
+    readOnly,
+    error,
+    variant,
+    size: size2,
+    width = "full",
+    ...rest
+  }, ref) => {
+    const classNames3 = useClassNames69({ component: "DateField", variant, size: size2 });
+    const props = {
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isInvalid: error,
+      isRequired: required,
+      ...rest
+    };
+    return /* @__PURE__ */ jsx127(
+      FieldBase,
+      {
+        as: TimeField,
+        variant,
+        size: size2,
+        width,
+        ...props,
+        ref,
+        children: /* @__PURE__ */ jsx127(DateInput2, { className: classNames3.field, children: (segment) => /* @__PURE__ */ jsx127(DateSegment2, { className: classNames3.segment, segment }) })
+      }
+    );
+  }
+);
 export {
   Accordion,
   AccordionItem,
@@ -11128,11 +11204,11 @@ export {
   _TextField as TextField,
   ThemeProvider2 as ThemeProvider,
   Tiles,
+  _TimeField as TimeField,
   _Tooltip as Tooltip,
   Underlay,
   VisuallyHidden,
   XLoader,
-  _Calendar,
   gridColsAlign,
   gridColumn,
   useAsyncList,