@marigold/components 12.0.2 → 12.0.4

package/dist/index.js

@@ -871,6 +871,7 @@ __export(index_exports, {
   Columns: () => Columns,
   ComboBox: () => _ComboBox,
   Container: () => Container,
+  ContextualHelp: () => _ContextualHelp,
   DateField: () => _DateField,
   DateFormat: () => import_system.DateFormat,
   DatePicker: () => _DatePicker,
@@ -905,7 +906,7 @@ __export(index_exports, {
   Popover: () => _Popover,
   Radio: () => _Radio,
   RadioGroup: () => _RadioGroup,
-  RouterProvider: () => import_react_aria_components75.RouterProvider,
+  RouterProvider: () => import_react_aria_components77.RouterProvider,
   Scrollable: () => Scrollable,
   SearchField: () => _SearchField,
   SectionMessage: () => SectionMessage,
@@ -923,10 +924,12 @@ __export(index_exports, {
   TextField: () => _TextField,
   ThemeProvider: () => import_system15.ThemeProvider,
   Tiles: () => Tiles,
+  TimeField: () => _TimeField,
   Tooltip: () => _Tooltip,
   Underlay: () => Underlay,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   XLoader: () => XLoader,
+  _ContextualHelp: () => _ContextualHelp,
   gridColsAlign: () => gridColsAlign,
   gridColumn: () => gridColumn,
   useAsyncList: () => import_data.useAsyncList,
@@ -977,7 +980,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,
@@ -2201,55 +2204,195 @@ var Container = ({
   }
 );
 
-// src/Dialog/Dialog.tsx
-var import_react29 = require("react");
-var import_react_aria_components26 = require("react-aria-components");
-var import_system41 = require("@marigold/system");
-
-// src/CloseButton/CloseButton.tsx
+// src/ContextualHelp/ContextualHelp.tsx
 var import_react24 = require("react");
-var import_react_aria_components21 = require("react-aria-components");
+var import_react_aria_components22 = require("react-aria-components");
+var import_system38 = require("@marigold/system");
+
+// src/ContextualHelp/ContextualHelpContent.tsx
 var import_system36 = require("@marigold/system");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var CloseButton = (0, import_react24.forwardRef)(
+var ContextualHelpContent = ({
+  children,
+  variant,
+  size: size2
+}) => {
+  const classNames3 = (0, import_system36.useClassNames)({
+    component: "ContextualHelp",
+    variant,
+    size: size2
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: classNames3.content, children });
+};
+
+// src/ContextualHelp/ContextualHelpTitle.tsx
+var import_react_aria_components21 = require("react-aria-components");
+var import_system37 = require("@marigold/system");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var ContextualHelpTitle = ({
+  children,
+  variant,
+  size: size2
+}) => {
+  const classNames3 = (0, import_system37.useClassNames)({
+    component: "ContextualHelp",
+    variant,
+    size: size2
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_aria_components21.Heading, { className: classNames3.title, children });
+};
+
+// src/ContextualHelp/ContextualHelp.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var icons = {
+  help: () => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "lucide lucide-circle-help-icon lucide-circle-help h-5",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M12 17h.01" })
+      ]
+    }
+  ),
+  info: () => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "lucide lucide-info-icon lucide-info h-5",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M12 16v-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("path", { d: "M12 8h.01" })
+      ]
+    }
+  )
+};
+var DialogTrigger = (0, import_react24.forwardRef)(
+  ({ open, ...rest }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_aria_components22.DialogTrigger, { isOpen: open, ...rest })
+);
+var _ContextualHelp = (0, import_react24.forwardRef)(
+  ({
+    children,
+    variant = "help",
+    size: size2,
+    width,
+    placement = "bottom start",
+    offset: offset2 = 8,
+    defaultOpen,
+    open,
+    onOpenChange
+  }, ref) => {
+    var _a;
+    const icon = (_a = icons[variant]) == null ? void 0 : _a.call(icons);
+    const classNames3 = (0, import_system38.useClassNames)({
+      component: "ContextualHelp",
+      variant,
+      size: size2
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      DialogTrigger,
+      {
+        defaultOpen,
+        open,
+        onOpenChange,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_react_aria_components22.Button,
+            {
+              ref,
+              className: classNames3.trigger,
+              "aria-label": variant === "info" ? "Information" : "Hilfe",
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            import_react_aria_components22.Popover,
+            {
+              placement,
+              offset: offset2,
+              className: classNames3.popover,
+              ...{
+                [`data-${width != null ? width : "medium"}`]: true
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_aria_components22.Dialog, { className: (classNames3.dialog, "prose"), children })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+_ContextualHelp.Title = ContextualHelpTitle;
+_ContextualHelp.Content = ContextualHelpContent;
+
+// src/Dialog/Dialog.tsx
+var import_react30 = require("react");
+var import_react_aria_components28 = require("react-aria-components");
+var import_system44 = require("@marigold/system");
+
+// src/CloseButton/CloseButton.tsx
+var import_react25 = require("react");
+var import_react_aria_components23 = require("react-aria-components");
+var import_system39 = require("@marigold/system");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+var CloseButton = (0, import_react25.forwardRef)(
   ({ className, size: size2, variant, ...props }, ref) => {
-    const classNames3 = (0, import_system36.useClassNames)({
+    const classNames3 = (0, import_system39.useClassNames)({
       component: "CloseButton",
       className,
       size: size2,
       variant
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_aria_components21.Button, { ref, className: classNames3, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime42.jsx)(import_react_aria_components23.Button, { ref, className: classNames3, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime42.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" }) }) });
   }
 );
 
 // src/Overlay/Modal.tsx
-var import_react25 = require("react");
-var import_react_aria_components22 = require("react-aria-components");
-var import_system37 = require("@marigold/system");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var _Modal = (0, import_react25.forwardRef)(({ size: size2, open, dismissable, keyboardDismissable, ...rest }, ref) => {
+var import_react26 = require("react");
+var import_react_aria_components24 = require("react-aria-components");
+var import_system40 = require("@marigold/system");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var _Modal = (0, import_react26.forwardRef)(({ size: size2, open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
     isDismissable: dismissable,
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
-  const className = (0, import_system37.useClassNames)({ component: "Modal", size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  const className = (0, import_system40.useClassNames)({ component: "Modal", size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Underlay,
     {
       dismissable,
       keyboardDismissable,
       open,
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_aria_components22.Modal, { ...props, className, ref, children: props.children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_aria_components24.Modal, { ...props, className, ref, children: props.children })
     }
   );
 });
 
 // src/Overlay/NonModal.tsx
-var import_react27 = require("react");
-var import_react_aria_components23 = require("react-aria-components");
+var import_react28 = require("react");
+var import_react_aria_components25 = require("react-aria-components");
 var import_react_stately = require("react-stately");
 var import_focus = require("@react-aria/focus");
 var import_overlays2 = require("@react-aria/overlays");
@@ -2257,7 +2400,7 @@ var import_ssr2 = require("@react-aria/ssr");
 var import_utils = require("@react-aria/utils");
 
 // src/utils/useRenderProps.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 function useRenderProps(props) {
   let {
     className,
@@ -2268,7 +2411,7 @@ function useRenderProps(props) {
     defaultStyle,
     values
   } = props;
-  return (0, import_react26.useMemo)(() => {
+  return (0, import_react27.useMemo)(() => {
     let computedClassName;
     let computedStyle;
     let computedChildren;
@@ -2325,7 +2468,7 @@ var useNonModal = ({ nonModalRef, keyboardDismissable = true }, state) => {
 };
 
 // src/Overlay/NonModal.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var NonModalInner = ({ state, isExiting, ...props }) => {
   const { nonModalProps } = useNonModal(props, state);
   const ref = props.nonModalRef;
@@ -2345,7 +2488,7 @@ var NonModalInner = ({ state, isExiting, ...props }) => {
     ...renderProps.style,
     "--visual-viewport-height": viewport.height + "px"
   };
-  const overlay = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  const overlay = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     "div",
     {
       ...(0, import_utils.mergeProps)((0, import_utils.filterDOMProps)(props), nonModalProps),
@@ -2360,28 +2503,28 @@ var NonModalInner = ({ state, isExiting, ...props }) => {
       "data-exiting": isExiting || void 0,
       children: [
         renderProps.children,
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_overlays2.DismissButton, { onDismiss: state.close })
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_overlays2.DismissButton, { onDismiss: state.close })
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     import_overlays2.Overlay,
     {
       isExiting,
       portalContainer,
       disableFocusManagement: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_focus.FocusScope, { restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_aria_components23.Provider, { values: [[import_react_aria_components23.OverlayTriggerStateContext, state]], children: overlay }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_focus.FocusScope, { restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components25.Provider, { values: [[import_react_aria_components25.OverlayTriggerStateContext, state]], children: overlay }) })
     }
   );
 };
-var NonModal = (0, import_react27.forwardRef)(
+var NonModal = (0, import_react28.forwardRef)(
   ({ open, ...rest }, ref) => {
     const props = {
       isOpen: open,
       ...rest
     };
     ref = (0, import_utils.useObjectRef)(ref);
-    const contextState = (0, import_react27.useContext)(import_react_aria_components23.OverlayTriggerStateContext);
+    const contextState = (0, import_react28.useContext)(import_react_aria_components25.OverlayTriggerStateContext);
     const localState = (0, import_react_stately.useOverlayTriggerState)(props);
     const state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
     const isExiting = (0, import_utils.useExitAnimation)(ref, state.isOpen) || props.isExiting || false;
@@ -2389,7 +2532,7 @@ var NonModal = (0, import_react27.forwardRef)(
     if (state && !state.isOpen && !isExiting || isSSR) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       NonModalInner,
       {
         ...props,
@@ -2402,44 +2545,44 @@ var NonModal = (0, import_react27.forwardRef)(
 );
 
 // src/Dialog/DialogActions.tsx
-var import_system38 = require("@marigold/system");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_system41 = require("@marigold/system");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var DialogActions = ({ variant, size: size2, children }) => {
-  const classNames3 = (0, import_system38.useClassNames)({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_system38.cn)("[grid-area:actions]", classNames3.actions), children });
+  const classNames3 = (0, import_system41.useClassNames)({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: (0, import_system41.cn)("[grid-area:actions]", classNames3.actions), children });
 };
 
 // src/Dialog/DialogContent.tsx
-var import_system39 = require("@marigold/system");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_system42 = require("@marigold/system");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var DialogContent = ({
   variant,
   size: size2,
   children
 }) => {
-  const classNames3 = (0, import_system39.useClassNames)({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_system39.cn)("[grid-area:content]", classNames3.content), children });
+  const classNames3 = (0, import_system42.useClassNames)({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: (0, import_system42.cn)("[grid-area:content]", classNames3.content), children });
 };
 
 // src/Dialog/DialogTitle.tsx
-var import_react_aria_components24 = require("react-aria-components");
-var import_system40 = require("@marigold/system");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_react_aria_components26 = require("react-aria-components");
+var import_system43 = require("@marigold/system");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var DialogTitle = ({ variant, size: size2, children }) => {
-  const classNames3 = (0, import_system40.useClassNames)({
+  const classNames3 = (0, import_system43.useClassNames)({
     component: "Dialog",
     variant,
     size: size2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components24.Header, { className: (0, import_system40.cn)("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components24.Heading, { slot: "title", className: classNames3.title, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_aria_components26.Header, { className: (0, import_system43.cn)("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_aria_components26.Heading, { slot: "title", className: classNames3.title, children }) });
 };
 
 // src/Dialog/DialogTrigger.tsx
-var import_react28 = require("react");
-var import_react_aria_components25 = require("react-aria-components");
+var import_react29 = require("react");
+var import_react_aria_components27 = require("react-aria-components");
 var import_interactions = require("@react-aria/interactions");
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var DialogContext = (0, import_react28.createContext)({});
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var DialogContext = (0, import_react29.createContext)({});
 var _DialogTrigger = ({
   open,
   dismissable,
@@ -2452,44 +2595,44 @@ var _DialogTrigger = ({
     isKeyboardDismissDisabled: !keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DialogContext.Provider, { value: props, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_aria_components25.DialogTrigger, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_interactions.PressResponder, { isPressed: false, children: props.children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DialogContext.Provider, { value: props, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react_aria_components27.DialogTrigger, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_interactions.PressResponder, { isPressed: false, children: props.children }) }) });
 };
 
 // src/Dialog/Dialog.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
-var _Dialog = (0, import_react29.forwardRef)(
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var _Dialog = (0, import_react30.forwardRef)(
   ({ variant, size: size2, ...props }, ref) => {
     var _a;
-    const classNames3 = (0, import_system41.useClassNames)({
+    const classNames3 = (0, import_system44.useClassNames)({
       component: "Dialog",
       variant,
       size: size2
     });
-    const { isDismissable, isKeyboardDismissDisabled, isOpen } = (0, import_react29.useContext)(DialogContext);
-    const state = (0, import_react29.useContext)(import_react_aria_components26.OverlayTriggerStateContext);
+    const { isDismissable, isKeyboardDismissDisabled, isOpen } = (0, import_react30.useContext)(DialogContext);
+    const state = (0, import_react30.useContext)(import_react_aria_components28.OverlayTriggerStateContext);
     const children = typeof props.children === "function" ? props.children({
       close: (_a = state == null ? void 0 : state.close) != null ? _a : () => {
       }
     }) : props.children;
-    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
       _Modal,
       {
         dismissable: isDismissable,
         keyboardDismissable: isKeyboardDismissDisabled,
         open: isOpen,
         size: size2,
-        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
-          import_react_aria_components26.Dialog,
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+          import_react_aria_components28.Dialog,
           {
             ...props,
             ref,
-            className: (0, import_system41.cn)(
+            className: (0, import_system44.cn)(
               "relative mx-auto outline-hidden [&>*:not(:last-child)]:mb-4",
               "grid [grid-template-areas:'title'_'content'_'actions']",
               classNames3.container
             ),
             children: [
-              props.closeButton && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              props.closeButton && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
                 CloseButton,
                 {
                   className: classNames3.closeButton,
@@ -2510,42 +2653,42 @@ _Dialog.Content = DialogContent;
 _Dialog.Actions = DialogActions;
 
 // src/Divider/Divider.tsx
-var import_react_aria_components27 = require("react-aria-components");
-var import_system42 = require("@marigold/system");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react_aria_components29 = require("react-aria-components");
+var import_system45 = require("@marigold/system");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var _Divider = ({ variant, ...props }) => {
-  const classNames3 = (0, import_system42.useClassNames)({ component: "Divider", variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_aria_components27.Separator, { className: (0, import_system42.cn)("border-none", classNames3), ...props });
+  const classNames3 = (0, import_system45.useClassNames)({ component: "Divider", variant });
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_aria_components29.Separator, { className: (0, import_system45.cn)("border-none", classNames3), ...props });
 };
 
 // src/Drawer/Drawer.tsx
-var import_react31 = require("react");
-var import_react_aria_components30 = require("react-aria-components");
+var import_react32 = require("react");
+var import_react_aria_components32 = require("react-aria-components");
 var import_landmark = require("@react-aria/landmark");
-var import_system47 = require("@marigold/system");
+var import_system50 = require("@marigold/system");
 
 // src/Drawer/Context.tsx
-var import_react30 = require("react");
-var DrawerContext = (0, import_react30.createContext)({
+var import_react31 = require("react");
+var DrawerContext = (0, import_react31.createContext)({
   variant: void 0,
   size: void 0
 });
-var useDrawerContext = () => (0, import_react30.useContext)(DrawerContext);
+var useDrawerContext = () => (0, import_react31.useContext)(DrawerContext);
 
 // src/Drawer/DrawerActions.tsx
-var import_system43 = require("@marigold/system");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_system46 = require("@marigold/system");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var DrawerActions = ({ variant, size: size2, children }) => {
   const ctx = useDrawerContext();
-  const classNames3 = (0, import_system43.useClassNames)({
+  const classNames3 = (0, import_system46.useClassNames)({
     component: "Drawer",
     variant: variant != null ? variant : ctx.variant,
     size: size2 != null ? size2 : ctx.size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
-      className: (0, import_system43.cn)("[grid-area:actions]", classNames3.actions),
+      className: (0, import_system46.cn)("[grid-area:actions]", classNames3.actions),
       style: { "--i": 2 },
       children
     }
@@ -2553,23 +2696,23 @@ var DrawerActions = ({ variant, size: size2, children }) => {
 };
 
 // src/Drawer/DrawerContent.tsx
-var import_system44 = require("@marigold/system");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_system47 = require("@marigold/system");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var DrawerContent = ({
   variant,
   size: size2,
   children
 }) => {
   const ctx = useDrawerContext();
-  const classNames3 = (0, import_system44.useClassNames)({
+  const classNames3 = (0, import_system47.useClassNames)({
     component: "Drawer",
     variant: variant != null ? variant : ctx.variant,
     size: size2 != null ? size2 : ctx.size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "div",
     {
-      className: (0, import_system44.cn)("[grid-area:content]", classNames3.content),
+      className: (0, import_system47.cn)("[grid-area:content]", classNames3.content),
       style: { "--i": 1 },
       children
     }
@@ -2577,56 +2720,56 @@ var DrawerContent = ({
 };
 
 // src/Drawer/DrawerModal.tsx
-var import_system45 = require("@marigold/system");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_system48 = require("@marigold/system");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var DrawerModal = ({
   children,
   className,
   ...props
 }) => {
-  const isSmallScreen = (0, import_system45.useSmallScreen)();
-  return isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(_Modal, { children }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  const isSmallScreen = (0, import_system48.useSmallScreen)();
+  return isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(_Modal, { children }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     NonModal,
     {
       ...props,
-      className: (0, import_system45.cn)("fixed top-0 right-0 bottom-0", className),
+      className: (0, import_system48.cn)("fixed top-0 right-0 bottom-0", className),
       children
     }
   );
 };
 
 // src/Drawer/DrawerTitle.tsx
-var import_react_aria_components28 = require("react-aria-components");
-var import_system46 = require("@marigold/system");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react_aria_components30 = require("react-aria-components");
+var import_system49 = require("@marigold/system");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var DrawerTitle = ({ variant, size: size2, children }) => {
-  const classNames3 = (0, import_system46.useClassNames)({
+  const classNames3 = (0, import_system49.useClassNames)({
     component: "Drawer",
     size: size2,
     variant,
     context: DrawerContext
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    import_react_aria_components28.Header,
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    import_react_aria_components30.Header,
     {
-      className: (0, import_system46.cn)("[grid-area:title]", classNames3.header),
+      className: (0, import_system49.cn)("[grid-area:title]", classNames3.header),
       style: { "--i": 0 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_aria_components28.Heading, { slot: "title", level: 2, className: classNames3.title, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_aria_components30.Heading, { slot: "title", level: 2, className: classNames3.title, children })
     }
   );
 };
 
 // src/Drawer/DrawerTrigger.tsx
-var import_react_aria_components29 = require("react-aria-components");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react_aria_components31 = require("react-aria-components");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var DrawerTrigger = ({
   open,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_aria_components29.DialogTrigger, { isOpen: open, ...props, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_aria_components31.DialogTrigger, { isOpen: open, ...props, children });
 
 // src/Drawer/Drawer.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var Drawer = ({
   children,
   variant,
@@ -2637,30 +2780,30 @@ var Drawer = ({
   role = "complementary",
   ...props
 }) => {
-  const ref = (0, import_react31.useRef)(null);
-  const classNames3 = (0, import_system47.useClassNames)({ component: "Drawer", variant, size: size2 });
-  const ctx = (0, import_react31.useContext)(import_react_aria_components30.OverlayTriggerStateContext);
-  const isSmallScreen = (0, import_system47.useSmallScreen)();
+  const ref = (0, import_react32.useRef)(null);
+  const classNames3 = (0, import_system50.useClassNames)({ component: "Drawer", variant, size: size2 });
+  const ctx = (0, import_react32.useContext)(import_react_aria_components32.OverlayTriggerStateContext);
+  const isSmallScreen = (0, import_system50.useSmallScreen)();
   const landmarkAria = (0, import_landmark.useLandmark)({ ...props, role }, ref);
   const landmarkProps = isSmallScreen ? {} : landmarkAria.landmarkProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     DrawerModal,
     {
       className: classNames3.overlay,
       open,
       keyboardDismissable,
-      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DrawerContext.Provider, { value: { variant, size: size2 }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
-        import_react_aria_components30.Dialog,
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DrawerContext.Provider, { value: { variant, size: size2 }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+        import_react_aria_components32.Dialog,
         {
           ...props,
           ...landmarkProps,
-          className: (0, import_system47.cn)(
+          className: (0, import_system50.cn)(
             "h-(--visual-viewport-height) outline-none",
             'grid [grid-template-areas:"title"_"content"_"actions"]',
             classNames3.container
           ),
           children: [
-            closeButton && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            closeButton && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
               CloseButton,
               {
                 "aria-label": "dismiss drawer",
@@ -2682,34 +2825,34 @@ Drawer.Content = DrawerContent;
 Drawer.Actions = DrawerActions;
 
 // src/Footer/Footer.tsx
-var import_system48 = require("@marigold/system");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_system51 = require("@marigold/system");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var Footer = ({ children, variant, size: size2, ...props }) => {
-  const classNames3 = (0, import_system48.useClassNames)({ component: "Footer", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("footer", { ...props, className: classNames3, children });
+  const classNames3 = (0, import_system51.useClassNames)({ component: "Footer", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("footer", { ...props, className: classNames3, children });
 };
 
 // src/Form/Form.tsx
-var import_react_aria_components31 = require("react-aria-components");
-var import_system49 = require("@marigold/system");
-var import_jsx_runtime55 = require("react/jsx-runtime");
-var _Form = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-  import_react_aria_components31.Form,
+var import_react_aria_components33 = require("react-aria-components");
+var import_system52 = require("@marigold/system");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var _Form = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  import_react_aria_components33.Form,
   {
     ...props,
-    className: (0, import_system49.cn)(import_system49.maxWidth[maxWidth], unstyled && "contents")
+    className: (0, import_system52.cn)(import_system52.maxWidth[maxWidth], unstyled && "contents")
   }
 );
 
 // src/Grid/Grid.tsx
-var import_system50 = require("@marigold/system");
+var import_system53 = require("@marigold/system");
 
 // src/Grid/GridArea.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var GridArea = ({ name, children }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: { gridArea: name }, children });
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var GridArea = ({ name, children }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: { gridArea: name }, children });
 
 // src/Grid/Grid.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var parseGridAreas = (areas) => areas.map((area) => `"${area}"`).join("\n");
 var parseTemplateValue = (values) => values.map((val) => typeof val === "number" ? `${val}fr` : val).join(" ");
 var Grid = ({
@@ -2717,14 +2860,23 @@ var Grid = ({
   areas,
   columns,
   rows,
+  alignX,
+  alignY,
   height = "auto",
   space = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  var _a, _b, _c, _d;
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "div",
     {
-      className: (0, import_system50.cn)("grid", import_system50.gapSpace[space], import_system50.height[height]),
+      className: (0, import_system53.cn)(
+        "grid",
+        alignX && ((_b = (_a = import_system53.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system53.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system53.gapSpace[space],
+        import_system53.height[height]
+      ),
       style: {
         gridTemplateAreas: parseGridAreas(areas),
         gridTemplateColumns: parseTemplateValue(columns),
@@ -2738,22 +2890,22 @@ var Grid = ({
 Grid.Area = GridArea;
 
 // src/Header/Header.tsx
-var import_react_aria_components32 = require("react-aria-components");
-var import_system51 = require("@marigold/system");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_react_aria_components34 = require("react-aria-components");
+var import_system54 = require("@marigold/system");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var _Header = ({ variant, size: size2, ...props }) => {
-  const classNames3 = (0, import_system51.useClassNames)({
+  const classNames3 = (0, import_system54.useClassNames)({
     component: "Header",
     variant,
     size: size2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_aria_components32.Header, { className: classNames3, ...props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_aria_components34.Header, { className: classNames3, ...props, children: props.children });
 };
 
 // src/Headline/Headline.tsx
-var import_react_aria_components33 = require("react-aria-components");
-var import_system52 = require("@marigold/system");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_react_aria_components35 = require("react-aria-components");
+var import_system55 = require("@marigold/system");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var _Headline = ({
   variant,
   size: size2,
@@ -2763,31 +2915,31 @@ var _Headline = ({
   level = "1",
   ...props
 }) => {
-  const classNames3 = (0, import_system52.useClassNames)({
+  const classNames3 = (0, import_system55.useClassNames)({
     component: "Headline",
     variant,
     size: size2 != null ? size2 : `level-${level}`
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-    import_react_aria_components33.Heading,
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    import_react_aria_components35.Heading,
     {
       level: Number(level),
       ...props,
-      className: (0, import_system52.cn)(
+      className: (0, import_system55.cn)(
         classNames3,
         "max-w-(--maxHeadlineWidth)",
         // possibly set by a <Container>
-        import_system52.textAlign[align]
+        import_system55.textAlign[align]
       ),
-      style: { color: color && (0, import_system52.ensureCssVar)(color, "color") },
+      style: { color: color && (0, import_system55.ensureCssVar)(color, "color") },
       children
     }
   );
 };
 
 // src/Image/Image.tsx
-var import_system53 = require("@marigold/system");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_system56 = require("@marigold/system");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var Image = ({
   variant,
   size: size2,
@@ -2795,25 +2947,25 @@ var Image = ({
   position: position2 = "none",
   ...props
 }) => {
-  const classNames3 = (0, import_system53.useClassNames)({ component: "Image", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  const classNames3 = (0, import_system56.useClassNames)({ component: "Image", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: (0, import_system53.cn)(
+      className: (0, import_system56.cn)(
         fit !== "none" && "h-full w-full",
         classNames3,
-        import_system53.objectFit[fit],
-        import_system53.objectPosition[position2]
+        import_system56.objectFit[fit],
+        import_system56.objectPosition[position2]
       )
     }
   );
 };
 
 // src/Inline/Inline.tsx
-var import_system54 = require("@marigold/system");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_system57 = require("@marigold/system");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var Inline = ({
   space = 0,
   alignX,
@@ -2822,15 +2974,15 @@ var Inline = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system54.cn)(
+      className: (0, import_system57.cn)(
         "flex flex-wrap",
-        import_system54.gapSpace[space],
-        alignX && ((_b = (_a = import_system54.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system54.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
+        import_system57.gapSpace[space],
+        alignX && ((_b = (_a = import_system57.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system57.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
       children
     }
@@ -2838,57 +2990,57 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-var import_react32 = require("react");
-var import_react_aria_components36 = require("react-aria-components");
+var import_react33 = require("react");
+var import_react_aria_components38 = require("react-aria-components");
 
 // src/DateField/DateInput.tsx
-var import_react_aria_components35 = require("react-aria-components");
-var import_system56 = require("@marigold/system");
+var import_react_aria_components37 = require("react-aria-components");
+var import_system59 = require("@marigold/system");
 
 // src/DateField/DateSegment.tsx
-var import_react_aria_components34 = require("react-aria-components");
-var import_system55 = require("@marigold/system");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_react_aria_components36 = require("react-aria-components");
+var import_system58 = require("@marigold/system");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
-    import_react_aria_components34.DateSegment,
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    import_react_aria_components36.DateSegment,
     {
       ...props,
       segment,
       style: {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
-      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           "span",
           {
             "aria-hidden": "true",
-            className: (0, import_system55.cn)(
+            className: (0, import_system58.cn)(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var _DateInput = ({ variant, size: size2, action, ...props }) => {
-  const classNames3 = (0, import_system56.useClassNames)({ component: "DateField", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_react_aria_components35.Group, { className: classNames3.field, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_react_aria_components35.DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(_DateSegment, { className: classNames3.segment, segment }) }),
+  const classNames3 = (0, import_system59.useClassNames)({ component: "DateField", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_react_aria_components37.Group, { className: classNames3.field, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_aria_components37.DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(_DateSegment, { className: classNames3.segment, segment }) }),
     action ? action : null
   ] });
 };
 
 // src/DateField/DateField.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var _DateField = (0, import_react32.forwardRef)(
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var _DateField = (0, import_react33.forwardRef)(
   ({
     variant,
     size: size2,
@@ -2906,46 +3058,46 @@ var _DateField = (0, import_react32.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       FieldBase,
       {
-        as: import_react_aria_components36.DateField,
+        as: import_react_aria_components38.DateField,
         variant,
         size: size2,
         ref,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(_DateInput, { action })
+        children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(_DateInput, { action })
       }
     );
   }
 );
 
 // src/Calendar/Calendar.tsx
-var import_react38 = require("react");
-var import_react_aria_components43 = require("react-aria-components");
-var import_system63 = require("@marigold/system");
+var import_react39 = require("react");
+var import_react_aria_components45 = require("react-aria-components");
+var import_system66 = require("@marigold/system");
 
 // src/Calendar/CalendarGrid.tsx
-var import_react_aria_components38 = require("react-aria-components");
-var import_system58 = require("@marigold/system");
+var import_react_aria_components40 = require("react-aria-components");
+var import_system61 = require("@marigold/system");
 
 // src/Calendar/CalendarGridHeader.tsx
 var import_date = require("@internationalized/date");
-var import_react33 = require("react");
-var import_react_aria_components37 = require("react-aria-components");
+var import_react34 = require("react");
+var import_react_aria_components39 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
 var import_i18n3 = require("@react-aria/i18n");
-var import_system57 = require("@marigold/system");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_system60 = require("@marigold/system");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
-  const state = (0, import_react33.useContext)(import_react_aria_components37.CalendarStateContext);
+  const state = (0, import_react34.useContext)(import_react_aria_components39.CalendarStateContext);
   const { headerProps } = (0, import_calendar.useCalendarGrid)(props, state);
   const { locale } = (0, import_i18n3.useLocale)();
   const dayFormatter = (0, import_i18n3.useDateFormatter)({
     weekday: "short",
     timeZone: state.timeZone
   });
-  const weekDays = (0, import_react33.useMemo)(() => {
+  const weekDays = (0, import_react34.useMemo)(() => {
     const weekStart = (0, import_date.startOfWeek)((0, import_date.today)(state.timeZone), locale);
     return [...new Array(7).keys()].map((index2) => {
       const date = weekStart.add({ days: index2 });
@@ -2953,21 +3105,21 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames3 = (0, import_system57.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
+  const classNames3 = (0, import_system60.useClassNames)({ component: "Calendar" });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var _CalendarGrid = () => {
-  const classNames3 = (0, import_system58.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_react_aria_components38.CalendarGrid, { className: classNames3.calendarGrid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CalendarGridHeader, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_aria_components38.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-      import_react_aria_components38.CalendarCell,
+  const classNames3 = (0, import_system61.useClassNames)({ component: "Calendar" });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react_aria_components40.CalendarGrid, { className: classNames3.calendarGrid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CalendarGridHeader, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react_aria_components40.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+      import_react_aria_components40.CalendarCell,
       {
         date,
-        className: (0, import_system58.cn)(
+        className: (0, import_system61.cn)(
           "flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
           classNames3.calendarCell
         )
@@ -2977,14 +3129,14 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-var import_react35 = require("react");
-var import_react_aria_components39 = require("react-aria-components");
-var import_system59 = require("@marigold/system");
+var import_react36 = require("react");
+var import_react_aria_components41 = require("react-aria-components");
+var import_system62 = 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);
+var import_react35 = require("react");
+var CalendarContext = (0, import_react35.createContext)({});
+var useCalendarContext = () => (0, import_react35.useContext)(CalendarContext);
 
 // src/Calendar/useFormattedMonths.tsx
 var import_i18n4 = require("@react-aria/i18n");
@@ -3003,60 +3155,60 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 function CalendarListBox({
   type,
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = (0, import_react35.useContext)(import_react_aria_components39.CalendarStateContext);
+  const state = (0, import_react36.useContext)(import_react_aria_components41.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
   const { classNames: classNames3 } = useCalendarContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "button",
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: (0, import_system59.cn)(buttonStyles, classNames3.select),
+      className: (0, import_system62.cn)(buttonStyles, classNames3.select),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ChevronDown, {})
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ChevronDown, {})
       ]
     }
   );
 }
 
 // src/Calendar/MonthControls.tsx
-var import_system60 = require("@marigold/system");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_system63 = require("@marigold/system");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 function MonthControls() {
-  const classNames3 = (0, import_system60.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  const classNames3 = (0, import_system63.useClassNames)({ component: "Calendar" });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "div",
     {
-      className: (0, import_system60.cn)(
+      className: (0, import_system63.cn)(
         "flex w-full flex-nowrap justify-end gap-[10px] [&_button]:px-2 [&_button]:py-1 [&_button:disabled]:cursor-not-allowed",
         classNames3.calendarControllers
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           IconButton,
           {
-            className: (0, import_system60.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
+            className: (0, import_system63.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "previous",
-            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronLeft, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           IconButton,
           {
-            className: (0, import_system60.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
+            className: (0, import_system63.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "next",
-            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronRight, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronRight, {})
           }
         )
       ]
@@ -3066,13 +3218,13 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-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 import_react37 = require("react");
+var import_react_aria_components42 = require("react-aria-components");
+var import_react_aria_components43 = require("react-aria-components");
+var import_system64 = require("@marigold/system");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react36.useContext)(import_react_aria_components40.CalendarStateContext);
+  const state = (0, import_react37.useContext)(import_react_aria_components42.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange2 = (index2) => {
     let value = Number(index2) + 1;
@@ -3080,15 +3232,15 @@ var MonthListBox = ({ setSelectedDropdown }) => {
     state.setFocusedDate(date);
   };
   const { classNames: classNames3 } = useCalendarContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "ul",
     {
       "data-testid": "monthOptions",
       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)(
-          import_react_aria_components41.Button,
+        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          import_react_aria_components43.Button,
           {
             slot: "previous",
             onPress: () => {
@@ -3096,7 +3248,7 @@ var MonthListBox = ({ setSelectedDropdown }) => {
               setSelectedDropdown(void 0);
             },
             "aria-current": isSelected,
-            className: (0, import_system61.cn)(
+            className: (0, import_system64.cn)(
               classNames3.calendarListboxButton,
               "inline-flex items-center justify-center gap-[0.5ch]"
             ),
@@ -3111,13 +3263,13 @@ var MonthListBox = ({ setSelectedDropdown }) => {
 var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
-var import_react37 = require("react");
-var import_react_aria_components42 = require("react-aria-components");
+var import_react38 = require("react");
+var import_react_aria_components44 = 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 import_system65 = require("@marigold/system");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react37.useContext)(import_react_aria_components42.CalendarStateContext);
+  const state = (0, import_react38.useContext)(import_react_aria_components44.CalendarStateContext);
   const { classNames: classNames3 } = useCalendarContext();
   const years = [];
   let formatter = (0, import_i18n5.useDateFormatter)({
@@ -3131,8 +3283,8 @@ var YearListBox = ({ setSelectedDropdown }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
-  const activeButtonRef = (0, import_react37.useRef)(null);
-  (0, import_react37.useEffect)(() => {
+  const activeButtonRef = (0, import_react38.useRef)(null);
+  (0, import_react38.useEffect)(() => {
     if (activeButtonRef.current) {
       const activeButton = activeButtonRef.current;
       activeButton == null ? void 0 : activeButton.scrollIntoView({
@@ -3146,23 +3298,23 @@ var YearListBox = ({ setSelectedDropdown }) => {
     let date = years[index2].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "ul",
     {
       "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 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)(
+        return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           "div",
           {
             ref: isSelected ? activeButtonRef : null,
             className: "flex size-full justify-center",
-            children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
-              import_react_aria_components42.Button,
+            children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              import_react_aria_components44.Button,
               {
                 slot: "previous",
-                className: (0, import_system62.cn)(
+                className: (0, import_system65.cn)(
                   classNames3.calendarListboxButton,
                   "inline-flex items-center justify-center gap-[0.5ch]"
                 ),
@@ -3185,7 +3337,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var _Calendar = ({
   disabled,
   readOnly,
@@ -3200,41 +3352,41 @@ var _Calendar = ({
     isDateUnavailable: dateUnavailable,
     ...rest
   };
-  const classNames3 = (0, import_system63.useClassNames)({ component: "Calendar", size: size2, variant });
-  const [selectedDropdown, setSelectedDropdown] = (0, import_react38.useState)();
+  const classNames3 = (0, import_system66.useClassNames)({ component: "Calendar", size: size2, variant });
+  const [selectedDropdown, setSelectedDropdown] = (0, import_react39.useState)();
   const ViewMap = {
-    month: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MonthListBox_default, { setSelectedDropdown }),
-    year: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(YearListBox_default, { setSelectedDropdown })
+    month: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CalendarContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
-    import_react_aria_components43.Calendar,
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(CalendarContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+    import_react_aria_components45.Calendar,
     {
-      className: (0, import_system63.cn)(
+      className: (0, import_system66.cn)(
         "relative flex min-h-[350px] w-fit flex-col rounded-xs p-4",
         classNames3.calendar
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
           "div",
           {
-            className: (0, import_system63.cn)(
+            className: (0, import_system66.cn)(
               "pointer-events-none absolute top-1/2 left-0 w-full -translate-y-1/2 opacity-0",
               selectedDropdown && "pointer-events-auto opacity-100"
             ),
             children: ViewMap[selectedDropdown]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
           "div",
           {
-            className: (0, import_system63.cn)(
+            className: (0, import_system66.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)(
+              /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex w-fit gap-4", children: ["month", "year"].map((dateType) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                   CalendarListBox,
                   {
                     type: dateType,
@@ -3243,9 +3395,9 @@ var _Calendar = ({
                   },
                   dateType
                 )) }),
-                /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MonthControls_default, {})
+                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(MonthControls_default, {})
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(_CalendarGrid, {})
+              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(_CalendarGrid, {})
             ]
           }
         )
@@ -3255,11 +3407,11 @@ var _Calendar = ({
 };
 
 // src/DatePicker/DatePicker.tsx
-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_react39.default.forwardRef(
+var import_react40 = __toESM(require("react"));
+var import_react_aria_components46 = require("react-aria-components");
+var import_system67 = require("@marigold/system");
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var _DatePicker = import_react40.default.forwardRef(
   ({
     dateUnavailable,
     disabled,
@@ -3282,24 +3434,24 @@ var _DatePicker = import_react39.default.forwardRef(
       granularity,
       ...rest
     };
-    const classNames3 = (0, import_system64.useClassNames)({
+    const classNames3 = (0, import_system67.useClassNames)({
       component: "DatePicker",
       size: size2,
       variant
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
       FieldBase,
       {
-        as: import_react_aria_components44.DatePicker,
+        as: import_react_aria_components46.DatePicker,
         variant,
         size: size2,
         ...props,
         ref,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             _DateInput,
             {
-              action: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(IconButton, { className: classNames3, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+              action: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(IconButton, { className: classNames3, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                 "svg",
                 {
                   "data-testid": "action",
@@ -3307,12 +3459,12 @@ var _DatePicker = import_react39.default.forwardRef(
                   width: 24,
                   height: 24,
                   fill: "currentColor",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
                 }
               ) })
             }
           ),
-          /* @__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 }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_react_aria_components46.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(_Calendar, { disabled }) }) })
         ]
       }
     );
@@ -3320,53 +3472,53 @@ var _DatePicker = import_react39.default.forwardRef(
 );
 
 // src/Inset/Inset.tsx
-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)(
+var import_system68 = require("@marigold/system");
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
   "div",
   {
-    className: (0, import_system65.cn)(
-      space && import_system65.paddingSpace[space],
-      !space && spaceX && import_system65.paddingSpaceX[spaceX],
-      !space && spaceY && import_system65.paddingSpaceY[spaceY]
+    className: (0, import_system68.cn)(
+      space && import_system68.paddingSpace[space],
+      !space && spaceX && import_system68.paddingSpaceX[spaceX],
+      !space && spaceY && import_system68.paddingSpaceY[spaceY]
     ),
     children
   }
 );
 
 // src/Link/Link.tsx
-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_react40.forwardRef)(
+var import_react41 = require("react");
+var import_react_aria_components47 = require("react-aria-components");
+var import_system69 = require("@marigold/system");
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var _Link = (0, import_react41.forwardRef)(
   ({ variant, size: size2, disabled, children, ...props }, ref) => {
-    const classNames3 = (0, import_system66.useClassNames)({
+    const classNames3 = (0, import_system69.useClassNames)({
       component: "Link",
       variant,
       size: size2
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react_aria_components45.Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react_aria_components47.Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-var import_system67 = require("@marigold/system");
+var import_system70 = require("@marigold/system");
 
 // src/List/Context.ts
-var import_react41 = require("react");
-var ListContext = (0, import_react41.createContext)({});
-var useListContext = () => (0, import_react41.useContext)(ListContext);
+var import_react42 = require("react");
+var ListContext = (0, import_react42.createContext)({});
+var useListContext = () => (0, import_react42.useContext)(ListContext);
 
 // src/List/ListItem.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames3 } = useListContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("li", { ...props, className: classNames3, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("li", { ...props, className: classNames3, children });
 };
 
 // src/List/List.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var List = ({
   as = "ul",
   children,
@@ -3375,38 +3527,38 @@ var List = ({
   ...props
 }) => {
   const Component2 = as;
-  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 }) });
+  const classNames3 = (0, import_system70.useClassNames)({ component: "List", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-var import_react_aria_components48 = require("react-aria-components");
-var import_system70 = require("@marigold/system");
+var import_react_aria_components50 = require("react-aria-components");
+var import_system73 = require("@marigold/system");
 
 // src/Menu/MenuItem.tsx
-var import_react_aria_components46 = require("react-aria-components");
-var import_system68 = require("@marigold/system");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_react_aria_components48 = require("react-aria-components");
+var import_system71 = require("@marigold/system");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var _MenuItem = ({ children, ...props }) => {
-  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 });
+  const classNames3 = (0, import_system71.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react_aria_components48.MenuItem, { ...props, className: classNames3.item, children });
 };
 
 // src/Menu/MenuSection.tsx
-var import_react_aria_components47 = require("react-aria-components");
-var import_system69 = require("@marigold/system");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_react_aria_components49 = require("react-aria-components");
+var import_system72 = require("@marigold/system");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var _MenuSection = ({ children, title, ...props }) => {
-  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 }),
+  const className = (0, import_system72.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_react_aria_components49.MenuSection, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(_Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var _Menu = ({
   children,
   label,
@@ -3418,10 +3570,10 @@ var _Menu = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  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_components48.Button,
+  const classNames3 = (0, import_system73.useClassNames)({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_react_aria_components50.MenuTrigger, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+      import_react_aria_components50.Button,
       {
         className: classNames3.button,
         "aria-label": ariaLabel,
@@ -3429,67 +3581,83 @@ var _Menu = ({
         children: label
       }
     ),
-    /* @__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 }) })
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react_aria_components50.Menu, { ...props, className: classNames3.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
 _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
-var import_react_aria_components49 = require("react-aria-components");
-var import_system71 = require("@marigold/system");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_react_aria_components51 = require("react-aria-components");
+var import_system74 = require("@marigold/system");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var ActionMenu = ({
   variant,
   size: size2,
   disabled,
   ...props
 }) => {
-  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 }) })
+  const classNames3 = (0, import_system74.useClassNames)({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_react_aria_components51.MenuTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_react_aria_components51.Button, { className: classNames3.button, isDisabled: disabled, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("circle", { cx: 12, cy: 12, r: 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("circle", { cx: 12, cy: 5, r: 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("circle", { cx: 12, cy: 19, r: 1 })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_react_aria_components51.Menu, { ...props, className: classNames3.container, children: props.children }) })
   ] });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-var import_react43 = require("react");
+var import_react44 = require("react");
 var import_button = require("@react-aria/button");
-var import_system74 = require("@marigold/system");
+var import_system77 = require("@marigold/system");
 
 // src/SectionMessage/Context.tsx
-var import_react42 = require("react");
-var SectionMessageContext = (0, import_react42.createContext)({});
-var useSectionMessageContext = () => (0, import_react42.useContext)(SectionMessageContext);
+var import_react43 = require("react");
+var SectionMessageContext = (0, import_react43.createContext)({});
+var useSectionMessageContext = () => (0, import_react43.useContext)(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
-var import_system72 = require("@marigold/system");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_system75 = require("@marigold/system");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_system72.cn)("[grid-area:content]", classNames3.content), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: (0, import_system75.cn)("[grid-area:content]", classNames3.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
-var import_system73 = require("@marigold/system");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_system76 = require("@marigold/system");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_system73.cn)("[grid-area:title]", classNames3.title), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: (0, import_system76.cn)("[grid-area:title]", classNames3.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var icons = {
-  success: () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var icons2 = {
+  success: () => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3499,13 +3667,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  info: () => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3515,13 +3683,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  warning: () => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3531,13 +3699,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  error: () => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3557,14 +3725,14 @@ var SectionMessage = ({
   onCloseChange,
   ...props
 }) => {
-  const buttonRef = (0, import_react43.useRef)(null);
-  const classNames3 = (0, import_system74.useClassNames)({
+  const buttonRef = (0, import_react44.useRef)(null);
+  const classNames3 = (0, import_system77.useClassNames)({
     component: "SectionMessage",
     variant,
     size: size2
   });
-  const Icon4 = icons[variant];
-  const [internalVisible, setInternalVisible] = (0, import_react43.useState)(true);
+  const Icon4 = icons2[variant];
+  const [internalVisible, setInternalVisible] = (0, import_react44.useState)(true);
   const isCurrentlyVisible = close != null ? close : internalVisible;
   const { buttonProps } = (0, import_button.useButton)(props, buttonRef);
   const handleClose = () => {
@@ -3574,21 +3742,21 @@ var SectionMessage = ({
     }
   };
   if (!isCurrentlyVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
     "div",
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
-      className: (0, import_system74.cn)("grid auto-rows-min", classNames3.container),
+      className: (0, import_system77.cn)("grid auto-rows-min", classNames3.container),
       children: [
-        /* @__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)(
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_system77.cn)("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Icon4, {}) }),
+        closeButton && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           CloseButton,
           {
             ...buttonProps,
             ref: buttonRef,
             "aria-label": "close",
-            className: (0, import_system74.cn)("[grid-area:close]", classNames3.close),
+            className: (0, import_system77.cn)("[grid-area:close]", classNames3.close),
             onPress: handleClose
           }
         ),
@@ -3601,7 +3769,7 @@ SectionMessage.Title = SectionMessageTitle;
 SectionMessage.Content = SectionMessageContent;
 
 // src/Multiselect/Multiselect.tsx
-var import_react_aria_components50 = require("react-aria-components");
+var import_react_aria_components52 = require("react-aria-components");
 
 // ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -3741,33 +3909,33 @@ function _objectWithoutProperties(e, t) {
 }
 
 // ../../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 import_react45 = 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_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) {
+  var _useState = (0, import_react45.useState)(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
+  var _useState3 = (0, import_react45.useState)(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
+  var _useState5 = (0, import_react45.useState)(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
+  var onChange2 = (0, import_react45.useCallback)(function(value2, actionMeta) {
     if (typeof propsOnChange === "function") {
       propsOnChange(value2, actionMeta);
     }
     setStateValue(value2);
   }, [propsOnChange]);
-  var onInputChange = (0, import_react44.useCallback)(function(value2, actionMeta) {
+  var onInputChange = (0, import_react45.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_react44.useCallback)(function() {
+  var onMenuOpen = (0, import_react45.useCallback)(function() {
     if (typeof propsOnMenuOpen === "function") {
       propsOnMenuOpen();
     }
     setStateMenuIsOpen(true);
   }, [propsOnMenuOpen]);
-  var onMenuClose = (0, import_react44.useCallback)(function() {
+  var onMenuClose = (0, import_react45.useCallback)(function() {
     if (typeof propsOnMenuClose === "function") {
       propsOnMenuClose();
     }
@@ -3800,7 +3968,7 @@ function _extends() {
 
 // ../../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_react51 = require("react");
+var import_react52 = require("react");
 
 // ../../node_modules/.pnpm/@babel+runtime@7.27.1/node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(a, n) {
@@ -3908,11 +4076,11 @@ function _toConsumableArray(r) {
 
 // ../../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_react49 = require("react");
+var import_react50 = require("react");
 
 // ../../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_react45 = require("react");
+var import_react46 = require("react");
 
 // ../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
 var isDevelopment = false;
@@ -5100,15 +5268,15 @@ var EmotionCacheContext = /* @__PURE__ */ React8.createContext(
 );
 var CacheProvider = EmotionCacheContext.Provider;
 var withEmotionCache = function withEmotionCache2(func) {
-  return /* @__PURE__ */ (0, import_react45.forwardRef)(function(props, ref) {
-    var cache = (0, import_react45.useContext)(EmotionCacheContext);
+  return /* @__PURE__ */ (0, import_react46.forwardRef)(function(props, ref) {
+    var cache = (0, import_react46.useContext)(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
 if (!isBrowser4) {
   withEmotionCache = function withEmotionCache3(func) {
     return function(props) {
-      var cache = (0, import_react45.useContext)(EmotionCacheContext);
+      var cache = (0, import_react46.useContext)(EmotionCacheContext);
       if (cache === null) {
         cache = createCache({
           key: "css"
@@ -5192,7 +5360,7 @@ var Emotion$1 = Emotion;
 var React9 = __toESM(require("react"));
 var import_extends2 = __toESM(require_extends());
 var import_hoist_non_react_statics = __toESM(require_hoist_non_react_statics_cjs());
-var jsx84 = function jsx85(type, props) {
+var jsx87 = function jsx88(type, props) {
   var args = arguments;
   if (props == null || !hasOwn.call(props, "css")) {
     return React9.createElement.apply(void 0, args);
@@ -5207,10 +5375,10 @@ var jsx84 = function jsx85(type, props) {
   return React9.createElement.apply(null, createElementArgArray);
 };
 (function(_jsx) {
-  var JSX;
+  var JSX2;
   /* @__PURE__ */ (function(_JSX) {
-  })(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));
-})(jsx84 || (jsx84 = {}));
+  })(JSX2 || (JSX2 = _jsx.JSX || (_jsx.JSX = {})));
+})(jsx87 || (jsx87 = {}));
 function css() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -5240,7 +5408,7 @@ function _taggedTemplateLiteral(e, t) {
 }
 
 // ../../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_react49 = 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
@@ -5641,9 +5809,9 @@ function autoUpdate(reference, floating, update, options2) {
 }
 
 // ../../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 import_react47 = require("react");
 var isClient = typeof document !== "undefined";
-var index = isClient ? import_react46.useLayoutEffect : import_react46.useEffect;
+var index = isClient ? import_react47.useLayoutEffect : import_react47.useEffect;
 
 // ../../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"];
@@ -5977,13 +6145,13 @@ var menuCSS = function menuCSS2(_ref23, unstyled) {
     marginTop: spacing2.menuGutter
   });
 };
-var PortalPlacementContext = /* @__PURE__ */ (0, import_react48.createContext)(null);
+var PortalPlacementContext = /* @__PURE__ */ (0, import_react49.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_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 _ref3 = (0, import_react49.useContext)(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
+  var ref = (0, import_react49.useRef)(null);
+  var _useState = (0, import_react49.useState)(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
+  var _useState3 = (0, import_react49.useState)(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
   var controlHeight2 = theme.spacing.controlHeight;
   index(function() {
     var menuEl = ref.current;
@@ -6013,7 +6181,7 @@ var MenuPlacer = function MenuPlacer2(props) {
 };
 var Menu3 = function Menu4(props) {
   var children = props.children, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "menu", {
+  return jsx87("div", _extends({}, getStyleProps(props, "menu", {
     menu: true
   }), {
     ref: innerRef
@@ -6035,7 +6203,7 @@ var menuListCSS = function menuListCSS2(_ref4, unstyled) {
 };
 var MenuList = function MenuList2(props) {
   var children = props.children, innerProps = props.innerProps, innerRef = props.innerRef, isMulti = props.isMulti;
-  return jsx84("div", _extends({}, getStyleProps(props, "menuList", {
+  return jsx87("div", _extends({}, getStyleProps(props, "menuList", {
     "menu-list": true,
     "menu-list--is-multi": isMulti
   }), {
@@ -6055,7 +6223,7 @@ var noOptionsMessageCSS = noticeCSS;
 var loadingMessageCSS = noticeCSS;
 var NoOptionsMessage = function NoOptionsMessage2(_ref6) {
   var _ref6$children = _ref6.children, children = _ref6$children === void 0 ? "No options" : _ref6$children, innerProps = _ref6.innerProps, restProps = _objectWithoutProperties(_ref6, _excluded$3);
-  return jsx84("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx87("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "noOptionsMessage", {
@@ -6065,7 +6233,7 @@ var NoOptionsMessage = function NoOptionsMessage2(_ref6) {
 };
 var LoadingMessage = function LoadingMessage2(_ref7) {
   var _ref7$children = _ref7.children, children = _ref7$children === void 0 ? "Loading..." : _ref7$children, innerProps = _ref7.innerProps, restProps = _objectWithoutProperties(_ref7, _excluded2$1);
-  return jsx84("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx87("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "loadingMessage", {
@@ -6085,16 +6253,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_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() {
+  var menuPortalRef = (0, import_react49.useRef)(null);
+  var cleanupRef = (0, import_react49.useRef)(null);
+  var _useState5 = (0, import_react49.useState)(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
+  var portalPlacementContext = (0, import_react49.useMemo)(function() {
     return {
       setPortalPlacement
     };
   }, []);
-  var _useState7 = (0, import_react48.useState)(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
-  var updateComputedPosition = (0, import_react48.useCallback)(function() {
+  var _useState7 = (0, import_react49.useState)(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
+  var updateComputedPosition = (0, import_react49.useCallback)(function() {
     if (!controlElement) return;
     var rect = getBoundingClientObj(controlElement);
     var scrollDistance = menuPosition === "fixed" ? 0 : window.pageYOffset;
@@ -6109,7 +6277,7 @@ var MenuPortal = function MenuPortal2(props) {
   index(function() {
     updateComputedPosition();
   }, [updateComputedPosition]);
-  var runAutoUpdate = (0, import_react48.useCallback)(function() {
+  var runAutoUpdate = (0, import_react49.useCallback)(function() {
     if (typeof cleanupRef.current === "function") {
       cleanupRef.current();
       cleanupRef.current = null;
@@ -6123,12 +6291,12 @@ var MenuPortal = function MenuPortal2(props) {
   index(function() {
     runAutoUpdate();
   }, [runAutoUpdate]);
-  var setMenuPortalElement = (0, import_react48.useCallback)(function(menuPortalElement) {
+  var setMenuPortalElement = (0, import_react49.useCallback)(function(menuPortalElement) {
     menuPortalRef.current = menuPortalElement;
     runAutoUpdate();
   }, [runAutoUpdate]);
   if (!appendTo && menuPosition !== "fixed" || !computedPosition) return null;
-  var menuWrapper = jsx84("div", _extends({
+  var menuWrapper = jsx87("div", _extends({
     ref: setMenuPortalElement
   }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
     offset: computedPosition.offset,
@@ -6137,7 +6305,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), "menuPortal", {
     "menu-portal": true
   }), innerProps), children);
-  return jsx84(PortalPlacementContext.Provider, {
+  return jsx87(PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /* @__PURE__ */ (0, import_react_dom.createPortal)(menuWrapper, appendTo) : menuWrapper);
 };
@@ -6153,7 +6321,7 @@ var containerCSS = function containerCSS2(_ref3) {
 };
 var SelectContainer = function SelectContainer2(props) {
   var children = props.children, innerProps = props.innerProps, isDisabled = props.isDisabled, isRtl = props.isRtl;
-  return jsx84("div", _extends({}, getStyleProps(props, "container", {
+  return jsx87("div", _extends({}, getStyleProps(props, "container", {
     "--is-disabled": isDisabled,
     "--is-rtl": isRtl
   }), innerProps), children);
@@ -6174,7 +6342,7 @@ var valueContainerCSS = function valueContainerCSS2(_ref23, unstyled) {
 };
 var ValueContainer = function ValueContainer2(props) {
   var children = props.children, innerProps = props.innerProps, isMulti = props.isMulti, hasValue = props.hasValue;
-  return jsx84("div", _extends({}, getStyleProps(props, "valueContainer", {
+  return jsx87("div", _extends({}, getStyleProps(props, "valueContainer", {
     "value-container": true,
     "value-container--is-multi": isMulti,
     "value-container--has-value": hasValue
@@ -6190,7 +6358,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS2() {
 };
 var IndicatorsContainer = function IndicatorsContainer2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
+  return jsx87("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
     indicators: true
   }), innerProps), children);
 };
@@ -6211,7 +6379,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var Svg = function Svg2(_ref3) {
   var size2 = _ref3.size, props = _objectWithoutProperties(_ref3, _excluded$2);
-  return jsx84("svg", _extends({
+  return jsx87("svg", _extends({
     height: size2,
     width: size2,
     viewBox: "0 0 20 20",
@@ -6221,16 +6389,16 @@ var Svg = function Svg2(_ref3) {
   }, props));
 };
 var CrossIcon = function CrossIcon2(props) {
-  return jsx84(Svg, _extends({
+  return jsx87(Svg, _extends({
     size: 20
-  }, props), jsx84("path", {
+  }, props), jsx87("path", {
     d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
   }));
 };
 var DownChevron = function DownChevron2(props) {
-  return jsx84(Svg, _extends({
+  return jsx87(Svg, _extends({
     size: 20
-  }, props), jsx84("path", {
+  }, props), jsx87("path", {
     d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
   }));
 };
@@ -6251,18 +6419,18 @@ var baseCSS = function baseCSS2(_ref3, unstyled) {
 var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
+  return jsx87("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
     indicator: true,
     "dropdown-indicator": true
-  }), innerProps), children || jsx84(DownChevron, null));
+  }), innerProps), children || jsx87(DownChevron, null));
 };
 var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "clearIndicator", {
+  return jsx87("div", _extends({}, getStyleProps(props, "clearIndicator", {
     indicator: true,
     "clear-indicator": true
-  }), innerProps), children || jsx84(CrossIcon, null));
+  }), innerProps), children || jsx87(CrossIcon, null));
 };
 var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
   var isDisabled = _ref4.isDisabled, _ref4$theme = _ref4.theme, baseUnit2 = _ref4$theme.spacing.baseUnit, colors2 = _ref4$theme.colors;
@@ -6278,7 +6446,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator2(props) {
   var innerProps = props.innerProps;
-  return jsx84("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
+  return jsx87("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
     "indicator-separator": true
   })));
 };
@@ -6302,7 +6470,7 @@ var loadingIndicatorCSS = function loadingIndicatorCSS2(_ref5, unstyled) {
 };
 var LoadingDot = function LoadingDot2(_ref6) {
   var delay = _ref6.delay, offset2 = _ref6.offset;
-  return jsx84("span", {
+  return jsx87("span", {
     css: /* @__PURE__ */ css({
       animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
       backgroundColor: "currentColor",
@@ -6317,20 +6485,20 @@ var LoadingDot = function LoadingDot2(_ref6) {
 };
 var LoadingIndicator = function LoadingIndicator2(_ref7) {
   var innerProps = _ref7.innerProps, isRtl = _ref7.isRtl, _ref7$size = _ref7.size, size2 = _ref7$size === void 0 ? 4 : _ref7$size, restProps = _objectWithoutProperties(_ref7, _excluded2);
-  return jsx84("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx87("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     innerProps,
     isRtl,
     size: size2
   }), "loadingIndicator", {
     indicator: true,
     "loading-indicator": true
-  }), innerProps), jsx84(LoadingDot, {
+  }), innerProps), jsx87(LoadingDot, {
     delay: 0,
     offset: isRtl
-  }), jsx84(LoadingDot, {
+  }), jsx87(LoadingDot, {
     delay: 160,
     offset: true
-  }), jsx84(LoadingDot, {
+  }), jsx87(LoadingDot, {
     delay: 320,
     offset: !isRtl
   }));
@@ -6362,7 +6530,7 @@ var css$1 = function css2(_ref3, unstyled) {
 };
 var Control = function Control2(props) {
   var children = props.children, isDisabled = props.isDisabled, isFocused = props.isFocused, innerRef = props.innerRef, innerProps = props.innerProps, menuIsOpen = props.menuIsOpen;
-  return jsx84("div", _extends({
+  return jsx87("div", _extends({
     ref: innerRef
   }, getStyleProps(props, "control", {
     control: true,
@@ -6383,16 +6551,16 @@ var groupCSS = function groupCSS2(_ref3, unstyled) {
   };
 };
 var Group2 = function Group3(props) {
-  var children = props.children, cx = props.cx, getStyles = props.getStyles, getClassNames2 = props.getClassNames, Heading5 = props.Heading, headingProps = props.headingProps, innerProps = props.innerProps, label = props.label, theme = props.theme, selectProps = props.selectProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "group", {
+  var children = props.children, cx = props.cx, getStyles = props.getStyles, getClassNames2 = props.getClassNames, Heading6 = props.Heading, headingProps = props.headingProps, innerProps = props.innerProps, label = props.label, theme = props.theme, selectProps = props.selectProps;
+  return jsx87("div", _extends({}, getStyleProps(props, "group", {
     group: true
-  }), innerProps), jsx84(Heading5, _extends({}, headingProps, {
+  }), innerProps), jsx87(Heading6, _extends({}, headingProps, {
     selectProps,
     theme,
     getStyles,
     getClassNames: getClassNames2,
     cx
-  }), label), jsx84("div", null, children));
+  }), label), jsx87("div", null, children));
 };
 var groupHeadingCSS = function groupHeadingCSS2(_ref23, unstyled) {
   var _ref2$theme = _ref23.theme, colors2 = _ref2$theme.colors, spacing2 = _ref2$theme.spacing;
@@ -6414,7 +6582,7 @@ var GroupHeading = function GroupHeading2(props) {
   var _cleanCommonProps = cleanCommonProps(props);
   _cleanCommonProps.data;
   var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
-  return jsx84("div", _extends({}, getStyleProps(props, "groupHeading", {
+  return jsx87("div", _extends({}, getStyleProps(props, "groupHeading", {
     "group-heading": true
   }), innerProps));
 };
@@ -6466,11 +6634,11 @@ var inputStyle = function inputStyle2(isHidden) {
 var Input2 = function Input3(props) {
   var cx = props.cx, value = props.value;
   var _cleanCommonProps = cleanCommonProps(props), innerRef = _cleanCommonProps.innerRef, isDisabled = _cleanCommonProps.isDisabled, isHidden = _cleanCommonProps.isHidden, inputClassName = _cleanCommonProps.inputClassName, innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded3);
-  return jsx84("div", _extends({}, getStyleProps(props, "input", {
+  return jsx87("div", _extends({}, getStyleProps(props, "input", {
     "input-container": true
   }), {
     "data-value": value || ""
-  }), jsx84("input", _extends({
+  }), jsx87("input", _extends({
     className: cx({
       input: true
     }, inputClassName),
@@ -6524,35 +6692,35 @@ var multiValueRemoveCSS = function multiValueRemoveCSS2(_ref3, unstyled) {
 };
 var MultiValueGeneric = function MultiValueGeneric2(_ref4) {
   var children = _ref4.children, innerProps = _ref4.innerProps;
-  return jsx84("div", innerProps, children);
+  return jsx87("div", innerProps, children);
 };
 var MultiValueContainer = MultiValueGeneric;
 var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children, innerProps = _ref5.innerProps;
-  return jsx84("div", _extends({
+  return jsx87("div", _extends({
     role: "button"
-  }, innerProps), children || jsx84(CrossIcon, {
+  }, innerProps), children || jsx87(CrossIcon, {
     size: 14
   }));
 }
 var MultiValue = function MultiValue2(props) {
   var children = props.children, components2 = props.components, data = props.data, innerProps = props.innerProps, isDisabled = props.isDisabled, removeProps3 = props.removeProps, selectProps = props.selectProps;
   var Container2 = components2.Container, Label3 = components2.Label, Remove = components2.Remove;
-  return jsx84(Container2, {
+  return jsx87(Container2, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValue", {
       "multi-value": true,
       "multi-value--is-disabled": isDisabled
     })), innerProps),
     selectProps
-  }, jsx84(Label3, {
+  }, jsx87(Label3, {
     data,
     innerProps: _objectSpread2({}, getStyleProps(props, "multiValueLabel", {
       "multi-value__label": true
     })),
     selectProps
-  }, children), jsx84(Remove, {
+  }, children), jsx87(Remove, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValueRemove", {
       "multi-value__remove": true
@@ -6585,7 +6753,7 @@ var optionCSS = function optionCSS2(_ref3, unstyled) {
 };
 var Option = function Option2(props) {
   var children = props.children, isDisabled = props.isDisabled, isFocused = props.isFocused, isSelected = props.isSelected, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "option", {
+  return jsx87("div", _extends({}, getStyleProps(props, "option", {
     option: true,
     "option--is-disabled": isDisabled,
     "option--is-focused": isFocused,
@@ -6609,7 +6777,7 @@ var placeholderCSS = function placeholderCSS2(_ref3, unstyled) {
 };
 var Placeholder = function Placeholder2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "placeholder", {
+  return jsx87("div", _extends({}, getStyleProps(props, "placeholder", {
     placeholder: true
   }), innerProps), children);
 };
@@ -6631,7 +6799,7 @@ var css3 = function css4(_ref3, unstyled) {
 };
 var SingleValue = function SingleValue2(props) {
   var children = props.children, isDisabled = props.isDisabled, innerProps = props.innerProps;
-  return jsx84("div", _extends({}, getStyleProps(props, "singleValue", {
+  return jsx87("div", _extends({}, getStyleProps(props, "singleValue", {
     "single-value": true,
     "single-value--is-disabled": isDisabled
   }), innerProps), children);
@@ -6733,7 +6901,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 var A11yText = function A11yText2(props) {
-  return jsx84("span", _extends({
+  return jsx87("span", _extends({
     css: _ref
   }, props));
 };
@@ -6794,10 +6962,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_react49.useMemo)(function() {
+  var messages = (0, import_react50.useMemo)(function() {
     return _objectSpread2(_objectSpread2({}, defaultAriaLiveMessages), ariaLiveMessages || {});
   }, [ariaLiveMessages]);
-  var ariaSelected = (0, import_react49.useMemo)(function() {
+  var ariaSelected = (0, import_react50.useMemo)(function() {
     var message = "";
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option, selectedOptions = ariaSelection.options, removedValue = ariaSelection.removedValue, removedValues = ariaSelection.removedValues, value = ariaSelection.value;
@@ -6819,7 +6987,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return message;
   }, [ariaSelection, messages, isOptionDisabled3, selectValue, getOptionLabel4]);
-  var ariaFocused = (0, import_react49.useMemo)(function() {
+  var ariaFocused = (0, import_react50.useMemo)(function() {
     var focusMsg = "";
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
@@ -6838,7 +7006,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return focusMsg;
   }, [focusedOption, focusedValue, getOptionLabel4, isOptionDisabled3, messages, focusableOptions, selectValue, isAppleDevice2]);
-  var ariaResults = (0, import_react49.useMemo)(function() {
+  var ariaResults = (0, import_react50.useMemo)(function() {
     var resultsMsg = "";
     if (menuIsOpen && options2.length && !isLoading && messages.onFilter) {
       var resultsMessage = screenReaderStatus2({
@@ -6852,7 +7020,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_react49.useMemo)(function() {
+  var ariaGuidance = (0, import_react50.useMemo)(function() {
     var guidanceMsg = "";
     if (messages.guidance) {
       var context = focusedValue ? "value" : menuIsOpen ? "menu" : "input";
@@ -6868,18 +7036,18 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx84(import_react49.Fragment, null, jsx84("span", {
+  var ScreenReaderText = jsx87(import_react50.Fragment, null, jsx87("span", {
     id: "aria-selection"
-  }, ariaSelected), jsx84("span", {
+  }, ariaSelected), jsx87("span", {
     id: "aria-focused"
-  }, ariaFocused), jsx84("span", {
+  }, ariaFocused), jsx87("span", {
     id: "aria-results"
-  }, ariaResults), jsx84("span", {
+  }, ariaResults), jsx87("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx84(import_react49.Fragment, null, jsx84(A11yText$1, {
+  return jsx87(import_react50.Fragment, null, jsx87(A11yText$1, {
     id
-  }, isInitialFocus && ScreenReaderText), jsx84(A11yText$1, {
+  }, isInitialFocus && ScreenReaderText), jsx87(A11yText$1, {
     "aria-live": ariaLive,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
@@ -7192,7 +7360,7 @@ var _excluded4 = ["innerRef"];
 function DummyInput(_ref3) {
   var innerRef = _ref3.innerRef, props = _objectWithoutProperties(_ref3, _excluded4);
   var filteredProps = removeProps(props, "onExited", "in", "enter", "exit", "appear");
-  return jsx84("input", _extends({
+  return jsx87("input", _extends({
     ref: innerRef
   }, filteredProps, {
     css: /* @__PURE__ */ css({
@@ -7224,11 +7392,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_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) {
+  var isBottom = (0, import_react50.useRef)(false);
+  var isTop = (0, import_react50.useRef)(false);
+  var touchStart = (0, import_react50.useRef)(0);
+  var scrollTarget = (0, import_react50.useRef)(null);
+  var handleEventDelta = (0, import_react50.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;
@@ -7262,17 +7430,17 @@ function useScrollCapture(_ref3) {
       cancelScroll(event);
     }
   }, [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]);
-  var onWheel = (0, import_react49.useCallback)(function(event) {
+  var onWheel = (0, import_react50.useCallback)(function(event) {
     handleEventDelta(event, event.deltaY);
   }, [handleEventDelta]);
-  var onTouchStart = (0, import_react49.useCallback)(function(event) {
+  var onTouchStart = (0, import_react50.useCallback)(function(event) {
     touchStart.current = event.changedTouches[0].clientY;
   }, []);
-  var onTouchMove = (0, import_react49.useCallback)(function(event) {
+  var onTouchMove = (0, import_react50.useCallback)(function(event) {
     var deltaY = touchStart.current - event.changedTouches[0].clientY;
     handleEventDelta(event, deltaY);
   }, [handleEventDelta]);
-  var startListening = (0, import_react49.useCallback)(function(el) {
+  var startListening = (0, import_react50.useCallback)(function(el) {
     if (!el) return;
     var notPassive = supportsPassiveEvents ? {
       passive: false
@@ -7281,13 +7449,13 @@ function useScrollCapture(_ref3) {
     el.addEventListener("touchstart", onTouchStart, notPassive);
     el.addEventListener("touchmove", onTouchMove, notPassive);
   }, [onTouchMove, onTouchStart, onWheel]);
-  var stopListening = (0, import_react49.useCallback)(function(el) {
+  var stopListening = (0, import_react50.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_react49.useEffect)(function() {
+  (0, import_react50.useEffect)(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     startListening(element);
@@ -7334,9 +7502,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_react49.useRef)({});
-  var scrollTarget = (0, import_react49.useRef)(null);
-  var addScrollLock = (0, import_react49.useCallback)(function(touchScrollTarget) {
+  var originalStyles = (0, import_react50.useRef)({});
+  var scrollTarget = (0, import_react50.useRef)(null);
+  var addScrollLock = (0, import_react50.useCallback)(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -7369,7 +7537,7 @@ function useScrollLock(_ref3) {
     }
     activeScrollLocks += 1;
   }, [accountForScrollbars]);
-  var removeScrollLock = (0, import_react49.useCallback)(function(touchScrollTarget) {
+  var removeScrollLock = (0, import_react50.useCallback)(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -7390,7 +7558,7 @@ function useScrollLock(_ref3) {
       }
     }
   }, [accountForScrollbars]);
-  (0, import_react49.useEffect)(function() {
+  (0, import_react50.useEffect)(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     addScrollLock(element);
@@ -7434,7 +7602,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx84(import_react49.Fragment, null, lockEnabled && jsx84("div", {
+  return jsx87(import_react50.Fragment, null, lockEnabled && jsx87("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -7453,7 +7621,7 @@ var _ref22 = process.env.NODE_ENV === "production" ? {
 };
 var RequiredInput = function RequiredInput2(_ref3) {
   var name = _ref3.name, onFocus2 = _ref3.onFocus;
-  return jsx84("input", {
+  return jsx87("input", {
     required: true,
     name,
     tabIndex: -1,
@@ -9012,7 +9180,7 @@ var Select = /* @__PURE__ */ function(_Component) {
     }
   }]);
   return Select3;
-}(import_react49.Component);
+}(import_react50.Component);
 Select.defaultProps = defaultProps;
 
 // ../../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
@@ -9028,7 +9196,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_react51.forwardRef)(function(props, ref) {
+var StateManagedSelect = /* @__PURE__ */ (0, import_react52.forwardRef)(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React11.createElement(Select, _extends({
     ref
@@ -9100,8 +9268,8 @@ function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
 
 // src/Multiselect/Multiselect.tsx
 var import_utils8 = require("@react-aria/utils");
-var import_system75 = require("@marigold/system");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_system78 = require("@marigold/system");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var propsToBeRemoved = [
   "clearValue",
   "getStyles",
@@ -9127,8 +9295,8 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
     },
     {}
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-    import_react_aria_components50.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    import_react_aria_components52.Input,
     {
       disabled: props.isDisabled,
       ref: innerRef,
@@ -9138,20 +9306,20 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
   );
 };
 var MultiValueRemove2 = ({ innerProps }) => {
-  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" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react_aria_components52.Button, { slot: "remove", ...innerProps, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var getClassNames = (classNames3) => ({
-  control: () => (0, import_system75.cn)(
+  control: () => (0, import_system78.cn)(
     "relative flex items-center box-border flex-wrap justify-between",
     classNames3.container
   ),
   container: () => "pointer-events-auto",
   indicatorSeparator: () => "hidden",
-  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 "),
+  menu: () => (0, import_system78.cn)("b", classNames3.listContainer),
+  menuList: () => (0, import_system78.cn)("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
+  multiValue: () => (0, import_system78.cn)(classNames3.tag, "m-0 "),
   multiValueLabel: () => "p-0",
-  option: ({ isFocused }) => (0, import_system75.cn)(classNames3.option, { isFocused }),
+  option: ({ isFocused }) => (0, import_system78.cn)(classNames3.option, { isFocused }),
   placeholder: () => "hidden",
   valueContainer: () => classNames3.valueContainer
 });
@@ -9172,7 +9340,7 @@ var Multiselect = ({
   onSelectionChange,
   ...rest
 }) => {
-  const classNames3 = (0, import_system75.useClassNames)({
+  const classNames3 = (0, import_system78.useClassNames)({
     component: "MultiSelect",
     size: size2,
     variant
@@ -9190,12 +9358,12 @@ var Multiselect = ({
     label: props.label,
     errorMessage
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-    import_react_aria_components50.Provider,
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    import_react_aria_components52.Provider,
     {
       values: [
         [
-          import_react_aria_components50.FieldErrorContext,
+          import_react_aria_components52.FieldErrorContext,
           {
             isInvalid: !!error,
             validationDetails: {},
@@ -9203,7 +9371,7 @@ var Multiselect = ({
           }
         ],
         [
-          import_react_aria_components50.InputContext,
+          import_react_aria_components52.InputContext,
           {
             ...fieldProps,
             placeholder,
@@ -9211,25 +9379,25 @@ var Multiselect = ({
           }
         ],
         [
-          import_react_aria_components50.ButtonContext,
+          import_react_aria_components52.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_system75.cn)("flex items-center", classNames3.closeButton)
+            className: (0, import_system78.cn)("flex items-center", classNames3.closeButton)
           }
         ]
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
         "div",
         {
-          className: (0, import_system75.cn)(classNames3.field, "group/field"),
+          className: (0, import_system78.cn)(classNames3.field, "group/field"),
           "data-required": props.required,
           "data-invalid": error,
           "data-readonly": readOnly,
           children: [
-            props.label && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(_Label, { ...labelProps, children: props.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+            props.label && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(_Label, { ...labelProps, children: props.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
               StateManagedSelect$1,
               {
                 ...props,
@@ -9265,19 +9433,19 @@ var Multiselect = ({
                   Input: Input4,
                   MultiValueRemove: MultiValueRemove2,
                   // eslint-disable-next-line react/prop-types
-                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                     "button",
                     {
                       ...innerProps,
                       disabled: isDisabled,
                       className: classNames3.icon,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ChevronDown, { className: "size-4" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ChevronDown, { className: "size-4" })
                     }
                   )
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(HelpText, { description, errorMessage })
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(HelpText, { description, errorMessage })
           ]
         }
       )
@@ -9286,15 +9454,15 @@ var Multiselect = ({
 };
 
 // src/NumberField/NumberField.tsx
-var import_react52 = require("react");
-var import_react_aria_components52 = require("react-aria-components");
-var import_system77 = require("@marigold/system");
+var import_react53 = require("react");
+var import_react_aria_components54 = require("react-aria-components");
+var import_system80 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
-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)(
+var import_react_aria_components53 = require("react-aria-components");
+var import_system79 = require("@marigold/system");
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -9302,7 +9470,7 @@ var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { width: 1
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -9312,10 +9480,10 @@ 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_components51.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    import_react_aria_components53.Button,
     {
-      className: (0, import_system76.cn)(
+      className: (0, import_system79.cn)(
         [
           "flex items-center justify-center",
           "cursor-pointer data-disabled:cursor-not-allowed"
@@ -9323,14 +9491,14 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Icon4, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
-var _NumberField = (0, import_react52.forwardRef)(
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var _NumberField = (0, import_react53.forwardRef)(
   ({
     variant,
     size: size2,
@@ -9341,7 +9509,7 @@ var _NumberField = (0, import_react52.forwardRef)(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system77.useClassNames)({
+    const classNames3 = (0, import_system80.useClassNames)({
       component: "NumberField",
       size: size2,
       variant
@@ -9354,15 +9522,15 @@ var _NumberField = (0, import_react52.forwardRef)(
       ...rest
     };
     const showStepper = !hideStepper && !readOnly;
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       FieldBase,
       {
-        as: import_react_aria_components52.NumberField,
+        as: import_react_aria_components54.NumberField,
         ...props,
         "data-readonly": readOnly ? "true" : void 0,
         "data-stepper": showStepper ? "true" : void 0,
-        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)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_react_aria_components54.Group, { className: (0, import_system80.cn)("flex items-stretch", classNames3.group), children: [
+          showStepper && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -9370,14 +9538,14 @@ var _NumberField = (0, import_react52.forwardRef)(
               slot: "decrement"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-            import_react_aria_components52.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            import_react_aria_components54.Input,
             {
               ref,
-              className: (0, import_system77.cn)("h-full flex-1 outline-none", classNames3.input)
+              className: (0, import_system80.cn)("h-full flex-1 outline-none", classNames3.input)
             }
           ),
-          showStepper && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          showStepper && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -9392,14 +9560,14 @@ var _NumberField = (0, import_react52.forwardRef)(
 );
 
 // src/Pagination/Pagination.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_focus2 = require("@react-aria/focus");
-var import_system80 = require("@marigold/system");
+var import_system83 = require("@marigold/system");
 
 // src/Pagination/Ellipsis.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var Ellipsis = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
     "span",
     {
       className: "text-text-base flex h-8 w-8 items-center justify-center",
@@ -9410,13 +9578,13 @@ var Ellipsis = () => {
 };
 
 // src/Pagination/NavigationButton.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_button2 = require("@react-aria/button");
-var import_system78 = require("@marigold/system");
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_system81 = require("@marigold/system");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var NavigationButton = (props) => {
-  const ref = (0, import_react53.useRef)(null);
-  const classNames3 = (0, import_system78.useClassNames)({
+  const ref = (0, import_react54.useRef)(null);
+  const classNames3 = (0, import_system81.useClassNames)({
     component: "Pagination"
   });
   let { buttonProps } = (0, import_button2.useButton)(props, ref);
@@ -9429,14 +9597,14 @@ var NavigationButton = (props) => {
     position: position2,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
     "button",
     {
       ref,
       ...buttonProps,
       ...rest,
       disabled: isDisabled,
-      className: (0, import_system78.cn)(classNames3.navigationButton, controlLabel && "w-24 px-2"),
+      className: (0, import_system81.cn)(classNames3.navigationButton, controlLabel && "w-24 px-2"),
       "data-selected": isSelected,
       children: [
         position2 === "left" && children,
@@ -9448,18 +9616,18 @@ var NavigationButton = (props) => {
 };
 
 // src/Pagination/PageButton.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 var import_button3 = require("@react-aria/button");
-var import_system79 = require("@marigold/system");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_system82 = require("@marigold/system");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var PageButton = (props) => {
-  const ref = (0, import_react54.useRef)(null);
-  const classNames3 = (0, import_system79.useClassNames)({
+  const ref = (0, import_react55.useRef)(null);
+  const classNames3 = (0, import_system82.useClassNames)({
     component: "Pagination"
   });
   let { buttonProps } = (0, import_button3.useButton)(props, ref);
   let { page, selected, isDisabled } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     "button",
     {
       ref,
@@ -9506,7 +9674,7 @@ var usePageRange = ({ currentPage, totalPages }) => {
 };
 
 // src/Pagination/Pagination.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var InnerPagination = ({
   currentPage,
   pageSize,
@@ -9519,8 +9687,8 @@ var InnerPagination = ({
   const focusManager = (0, import_focus2.useFocusManager)();
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === totalPages || totalPages === 0;
-  const isFirstRender = (0, import_react55.useRef)(true);
-  (0, import_react55.useEffect)(() => {
+  const isFirstRender = (0, import_react56.useRef)(true);
+  (0, import_react56.useEffect)(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
@@ -9533,7 +9701,7 @@ var InnerPagination = ({
       onChange2(newPage);
     }
   };
-  const classNames3 = (0, import_system80.useClassNames)({ component: "Pagination" });
+  const classNames3 = (0, import_system83.useClassNames)({ component: "Pagination" });
   const handleKeyDown = (onEnter) => (e) => {
     if (e.key === "ArrowRight") {
       e.preventDefault();
@@ -9546,8 +9714,8 @@ var InnerPagination = ({
       onEnter();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(import_jsx_runtime93.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       NavigationButton,
       {
         onClick: () => handlePageChange(Math.max(1, currentPage - 1)),
@@ -9556,11 +9724,11 @@ var InnerPagination = ({
         controlLabel: controlLabels == null ? void 0 : controlLabels[0],
         position: "left",
         onKeyDown: handleKeyDown(() => handlePageChange(currentPage - 1)),
-        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ChevronLeft, { className: classNames3.icon })
+        children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ChevronLeft, { className: classNames3.icon })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
-      (pageNumber, index2) => pageNumber === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Ellipsis, {}, `ellipsis-${index2}`) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
+      (pageNumber, index2) => pageNumber === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Ellipsis, {}, `ellipsis-${index2}`) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
         PageButton,
         {
           page: pageNumber,
@@ -9570,8 +9738,8 @@ var InnerPagination = ({
         },
         pageNumber
       )
-    ) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PageButton, { page: 1, isDisabled: true }, 1) }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(PageButton, { page: 1, isDisabled: true }, 1) }),
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       NavigationButton,
       {
         onClick: () => handlePageChange(Math.min(totalPages, currentPage + 1)),
@@ -9580,7 +9748,7 @@ var InnerPagination = ({
         controlLabel: controlLabels == null ? void 0 : controlLabels[1],
         position: "right",
         onKeyDown: handleKeyDown(() => handlePageChange(currentPage + 1)),
-        children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ChevronRight, { className: classNames3.icon })
+        children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ChevronRight, { className: classNames3.icon })
       }
     )
   ] });
@@ -9592,15 +9760,15 @@ var _Pagination = ({
   pageSize,
   ...props
 }) => {
-  const [currentPage, setCurrentPage] = (0, import_react55.useState)(page != null ? page : defaultPage);
+  const [currentPage, setCurrentPage] = (0, import_react56.useState)(page != null ? page : defaultPage);
   const totalPages = Math.ceil(totalItems / pageSize);
   const pageRange = usePageRange({ currentPage, totalPages });
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
     "nav",
     {
       className: "flex items-center justify-center space-x-2",
       "aria-label": `Page ${currentPage} of ${totalPages}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_focus2.FocusScope, { restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_focus2.FocusScope, { restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
         InnerPagination,
         {
           pageSize,
@@ -9616,21 +9784,21 @@ var _Pagination = ({
 };
 
 // src/Radio/Radio.tsx
-var import_react57 = require("react");
-var import_react_aria_components54 = require("react-aria-components");
-var import_system82 = require("@marigold/system");
+var import_react58 = require("react");
+var import_react_aria_components56 = require("react-aria-components");
+var import_system85 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react56 = require("react");
-var RadioGroupContext = (0, import_react56.createContext)(
+var import_react57 = require("react");
+var RadioGroupContext = (0, import_react57.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react56.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react57.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_react_aria_components53 = require("react-aria-components");
-var import_system81 = require("@marigold/system");
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_react_aria_components55 = require("react-aria-components");
+var import_system84 = require("@marigold/system");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var _RadioGroup = ({
   variant,
   size: size2,
@@ -9646,7 +9814,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames3 = (0, import_system81.useClassNames)({ component: "Radio", variant, size: size2 });
+  const classNames3 = (0, import_system84.useClassNames)({ component: "Radio", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -9654,10 +9822,10 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     FieldBase,
     {
-      as: import_react_aria_components53.RadioGroup,
+      as: import_react_aria_components55.RadioGroup,
       width,
       label,
       description,
@@ -9665,18 +9833,18 @@ var _RadioGroup = ({
       variant,
       size: size2,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system81.cn)(
+          className: (0, import_system84.cn)(
             classNames3.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(RadioGroupContext.Provider, { value: { width, variant, size: size2 }, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(RadioGroupContext.Provider, { value: { width, variant, size: size2 }, children })
         }
       )
     }
@@ -9684,33 +9852,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+var import_jsx_runtime95 = require("react/jsx-runtime");
+var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
   "div",
   {
-    className: (0, import_system82.cn)(
+    className: (0, import_system85.cn)(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Dot, {}) : null
   }
 );
-var _Radio = (0, import_react57.forwardRef)(
+var _Radio = (0, import_react58.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size: size2, width: groupWidth } = useRadioGroupContext();
-    const classNames3 = (0, import_system82.useClassNames)({
+    const classNames3 = (0, import_system85.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size2 || props.size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
-      import_react_aria_components54.Radio,
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+      import_react_aria_components56.Radio,
       {
         ref,
-        className: (0, import_system82.cn)(
+        className: (0, import_system85.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -9719,18 +9887,18 @@ var _Radio = (0, import_react57.forwardRef)(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
             Icon3,
             {
               checked: isSelected,
-              className: (0, import_system82.cn)(
+              className: (0, import_system85.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames3.radio
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: classNames3.label, children })
+          /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: classNames3.label, children })
         ] })
       }
     );
@@ -9739,10 +9907,10 @@ var _Radio = (0, import_react57.forwardRef)(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-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_react58.forwardRef)(
+var import_react59 = require("react");
+var import_react_aria_components57 = require("react-aria-components");
+var import_jsx_runtime96 = require("react/jsx-runtime");
+var _SearchField = (0, import_react59.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -9751,7 +9919,7 @@ var _SearchField = (0, import_react58.forwardRef)(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FieldBase, { as: import_react_aria_components55.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(FieldBase, { as: import_react_aria_components57.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       SearchInput,
       {
         ref,
@@ -9762,11 +9930,11 @@ var _SearchField = (0, import_react58.forwardRef)(
 );
 
 // src/Select/Select.tsx
-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_react59.forwardRef)(
+var import_react60 = require("react");
+var import_react_aria_components58 = require("react-aria-components");
+var import_system86 = require("@marigold/system");
+var import_jsx_runtime97 = require("react/jsx-runtime");
+var _Select = (0, import_react60.forwardRef)(
   ({
     disabled,
     required,
@@ -9786,22 +9954,22 @@ var _Select = (0, import_react59.forwardRef)(
       onSelectionChange: onChange2,
       ...rest
     };
-    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)(
+    const classNames3 = (0, import_system86.useClassNames)({ component: "Select", variant, size: size2 });
+    return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(FieldBase, { as: import_react_aria_components58.Select, ref, variant, size: size2, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
         IconButton,
         {
-          className: (0, import_system83.cn)(
+          className: (0, import_system86.cn)(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames3.select
           ),
           children: [
-            /* @__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) })
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_react_aria_components58.SelectValue, { className: "[&>[slot=description]]:hidden" }),
+            /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(ChevronDown, { className: (0, import_system86.cn)("size-4", classNames3.icon) })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -9809,23 +9977,23 @@ _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.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_components60 = require("react-aria-components");
+var import_system88 = require("@marigold/system");
 
 // src/SelectList/Context.ts
-var import_react60 = require("react");
-var SelectListContext = (0, import_react60.createContext)(
+var import_react61 = require("react");
+var SelectListContext = (0, import_react61.createContext)(
   {}
 );
-var useSelectListContext = () => (0, import_react60.useContext)(SelectListContext);
+var useSelectListContext = () => (0, import_react61.useContext)(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
-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)(
+var import_react62 = 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 CheckMark3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", className, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
   "path",
   {
     fill: "currentColor",
@@ -9836,26 +10004,26 @@ var CheckMark3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime95.jsx
 var SelectionIndicator = ({ selectionMode }) => {
   switch (selectionMode) {
     case "multiple": {
-      return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(_Checkbox, { slot: "selection" });
+      return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(_Checkbox, { slot: "selection" });
     }
     case "single": {
-      return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(CheckMark3, { className: "invisible hidden" });
+      return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(CheckMark3, { className: "invisible hidden" });
     }
   }
 };
-var _SelectListItem = (0, import_react61.forwardRef)(
+var _SelectListItem = (0, import_react62.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_components57.GridListItem,
+    return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+      import_react_aria_components59.GridListItem,
       {
         textValue,
         ...props,
-        className: (0, import_system84.cn)("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.item),
+        className: (0, import_system87.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 }),
+        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_jsx_runtime98.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(SelectionIndicator, { selectionMode }),
           children
         ] })
       }
@@ -9864,21 +10032,21 @@ var _SelectListItem = (0, import_react61.forwardRef)(
 );
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime96 = require("react/jsx-runtime");
-var _SelectList = (0, import_react62.forwardRef)(
+var import_jsx_runtime99 = require("react/jsx-runtime");
+var _SelectList = (0, import_react63.forwardRef)(
   ({ onChange: onChange2, ...rest }, ref) => {
-    const classNames3 = (0, import_system85.useClassNames)({ component: "ListBox" });
+    const classNames3 = (0, import_system88.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_components58.GridList,
+    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SelectListContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: classNames3.container, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+      import_react_aria_components60.GridList,
       {
         ...props,
         layout: "grid",
         ref,
-        className: (0, import_system85.cn)(
+        className: (0, import_system88.cn)(
           "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames3.list
         ),
@@ -9890,29 +10058,29 @@ var _SelectList = (0, import_react62.forwardRef)(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-var import_system86 = require("@marigold/system");
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_system89 = require("@marigold/system");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
   "div",
   {
     ...props,
-    className: (0, import_system86.cn)(["sticky h-(--height) overflow-auto", import_system86.width[width]]),
-    style: (0, import_system86.createVar)({ height }),
+    className: (0, import_system89.cn)(["sticky h-(--height) overflow-auto", import_system89.width[width]]),
+    style: (0, import_system89.createVar)({ height }),
     children
   }
 );
 
 // src/Slider/Slider.tsx
-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_react63.forwardRef)(
+var import_react64 = require("react");
+var import_react_aria_components61 = require("react-aria-components");
+var import_system90 = require("@marigold/system");
+var import_jsx_runtime101 = require("react/jsx-runtime");
+var _Slider = (0, import_react64.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -9922,7 +10090,7 @@ var _Slider = (0, import_react63.forwardRef)(
     label,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system87.useClassNames)({
+    const classNames3 = (0, import_system90.useClassNames)({
       component: "Slider",
       variant,
       size: size2
@@ -9931,38 +10099,38 @@ var _Slider = (0, import_react63.forwardRef)(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
       FieldBase,
       {
-        as: import_react_aria_components59.Slider,
-        className: (0, import_system87.cn)(
+        as: import_react_aria_components61.Slider,
+        className: (0, import_system90.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames3.container,
-          import_system87.width[width]
+          import_system90.width[width]
         ),
         ref,
         ...props,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(_Label, { children: label }),
-          /* @__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_components59.SliderTrack,
+          label && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(_Label, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_react_aria_components61.SliderOutput, { className: (0, import_system90.cn)("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+            import_react_aria_components61.SliderTrack,
             {
-              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)(
+              className: (0, import_system90.cn)("relative col-span-2 h-2 w-full", classNames3.track),
+              children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(import_jsx_runtime101.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
                   "div",
                   {
-                    className: (0, import_system87.cn)(
+                    className: (0, import_system90.cn)(
                       "absolute top-[50%] h-2 w-full translate-y-[-50%]",
                       classNames3.track
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
                   "div",
                   {
-                    className: (0, import_system87.cn)(
+                    className: (0, import_system90.cn)(
                       "absolute top-[50%] h-2 translate-y-[-50%]",
                       classNames3.selectedTrack
                     ),
@@ -9972,10 +10140,10 @@ var _Slider = (0, import_react63.forwardRef)(
                     }
                   }
                 ),
-                state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-                  import_react_aria_components59.SliderThumb,
+                state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+                  import_react_aria_components61.SliderThumb,
                   {
-                    className: (0, import_system87.cn)("top-1/2 cursor-pointer", classNames3.thumb),
+                    className: (0, import_system90.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]
@@ -9992,12 +10160,12 @@ var _Slider = (0, import_react63.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_jsx_runtime99 = require("react/jsx-runtime");
-var Split = () => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { role: "separator", className: "grow" });
+var import_jsx_runtime102 = require("react/jsx-runtime");
+var Split = () => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_system88 = require("@marigold/system");
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_system91 = require("@marigold/system");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 var Stack = ({
   children,
   space = 0,
@@ -10007,14 +10175,14 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
     "div",
     {
-      className: (0, import_system88.cn)(
+      className: (0, import_system91.cn)(
         "flex flex-col",
-        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]),
+        import_system91.gapSpace[space],
+        alignX && ((_b = (_a = import_system91.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system91.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -10024,11 +10192,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-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_react64.forwardRef)(
+var import_react65 = require("react");
+var import_react_aria_components62 = require("react-aria-components");
+var import_system92 = require("@marigold/system");
+var import_jsx_runtime104 = require("react/jsx-runtime");
+var _Switch = (0, import_react65.forwardRef)(
   ({
     variant,
     size: size2,
@@ -10039,27 +10207,27 @@ var _Switch = (0, import_react64.forwardRef)(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system89.useClassNames)({ component: "Switch", size: size2, variant });
+    const classNames3 = (0, import_system92.useClassNames)({ component: "Switch", size: size2, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
-      import_react_aria_components60.Switch,
+    return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
+      import_react_aria_components62.Switch,
       {
         ...props,
         ref,
-        className: (0, import_system89.cn)(
-          import_system89.width[width],
+        className: (0, import_system92.cn)(
+          import_system92.width[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames3.container
         ),
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(_Label, { elementType: "span", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: classNames3.track, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: classNames3.thumb }) }) })
+          label && /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(_Label, { elementType: "span", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: classNames3.track, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: classNames3.thumb }) }) })
         ]
       }
     );
@@ -10067,19 +10235,19 @@ var _Switch = (0, import_react64.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react72 = require("react");
+var import_react73 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system96 = require("@marigold/system");
+var import_system99 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react65 = require("react");
-var TableContext = (0, import_react65.createContext)({});
-var useTableContext = () => (0, import_react65.useContext)(TableContext);
+var import_react66 = require("react");
+var TableContext = (0, import_react66.createContext)({});
+var useTableContext = () => (0, import_react66.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var TableBody = ({
   children,
   className,
@@ -10088,7 +10256,7 @@ var TableBody = ({
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
   const { state, classNames: classNames3 } = useTableContext();
   if (state.collection.size === 0 && emptyState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("tbody", { className, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("tbody", { className, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
       "td",
       {
         className: classNames3 == null ? void 0 : classNames3.cell,
@@ -10098,18 +10266,22 @@ var TableBody = ({
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("tbody", { ...rowGroupProps, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("tbody", { ...rowGroupProps, className, children });
 };
 
 // src/Table/TableCell.tsx
-var import_react66 = require("react");
+var import_react67 = 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_system90 = require("@marigold/system");
-var import_jsx_runtime103 = require("react/jsx-runtime");
-var TableCell = ({ cell, align = "left" }) => {
-  const ref = (0, import_react66.useRef)(null);
+var import_system93 = require("@marigold/system");
+var import_jsx_runtime106 = require("react/jsx-runtime");
+var TableCell = ({
+  cell,
+  align = "left",
+  alignY = "middle"
+}) => {
+  const ref = (0, import_react67.useRef)(null);
   const { interactive, state, classNames: classNames3 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -10129,26 +10301,27 @@ var TableCell = ({ cell, align = "left" }) => {
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
-  const stateProps = (0, import_system90.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+  const stateProps = (0, import_system93.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system90.cn)(classNames3 == null ? void 0 : classNames3.cell),
+      className: classNames3 == null ? void 0 : classNames3.cell,
       ...(0, import_utils9.mergeProps)(cellProps, focusProps),
       ...stateProps,
       align,
+      valign: alignY,
       children: cell.rendered
     }
   );
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react67 = require("react");
+var import_react68 = 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_system91 = require("@marigold/system");
+var import_system94 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -10171,9 +10344,12 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_jsx_runtime104 = require("react/jsx-runtime");
-var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react67.useRef)(null);
+var import_jsx_runtime107 = require("react/jsx-runtime");
+var TableCheckboxCell = ({
+  cell,
+  alignY = "middle"
+}) => {
+  const ref = (0, import_react68.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -10187,34 +10363,35 @@ var TableCheckboxCell = ({ cell }) => {
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
-  const stateProps = (0, import_system91.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+  const stateProps = (0, import_system94.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system91.cn)("text-center align-middle leading-none", classNames3 == null ? void 0 : classNames3.cell),
+      className: (0, import_system94.cn)("leading-none", classNames3 == null ? void 0 : classNames3.cell),
       ...(0, import_utils10.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(_Checkbox, { ...checkboxProps })
+      valign: alignY,
+      children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react68 = require("react");
+var import_react69 = 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_system92 = require("@marigold/system");
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_system95 = require("@marigold/system");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column: column2,
   width = "auto",
   align = "left"
 }) => {
   var _a, _b;
-  const ref = (0, import_react68.useRef)(null);
+  const ref = (0, import_react69.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -10225,22 +10402,22 @@ var TableColumnHeader = ({
   );
   const { hoverProps, isHovered } = (0, import_interactions2.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus5.useFocusRing)();
-  const stateProps = (0, import_system92.useStateProps)({
+  const stateProps = (0, import_system95.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
     "th",
     {
       colSpan: column2.colspan,
       ref,
-      className: (0, import_system92.cn)("cursor-default", import_system92.width[width], classNames3 == null ? void 0 : classNames3.header),
+      className: (0, import_system95.cn)("cursor-default", import_system95.width[width], classNames3 == null ? void 0 : classNames3.header),
       ...(0, import_utils12.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
       children: [
         column2.rendered,
-        column2.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column2.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("span", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(SortDown, { className: "inline-block" }) }))
+        column2.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column2.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(SortDown, { className: "inline-block" }) }))
       ]
     }
   );
@@ -10248,16 +10425,16 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_system93 = require("@marigold/system");
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_system96 = require("@marigold/system");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
   const { classNames: classNames3 } = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
     "thead",
     {
       ...rowGroupProps,
-      className: (0, import_system93.cn)(
+      className: (0, import_system96.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
@@ -10269,33 +10446,33 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 var import_table6 = require("@react-aria/table");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime110 = require("react/jsx-runtime");
 var TableHeaderRow = ({
   item,
   className,
   children
 }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react69.useRef)(null);
+  const ref = (0, import_react70.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tr", { ...rowProps, className, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("tr", { ...rowProps, className, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react70 = require("react");
+var import_react71 = 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_system94 = require("@marigold/system");
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_system97 = require("@marigold/system");
+var import_jsx_runtime111 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react70.useRef)(null);
+  const ref = (0, import_react71.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size: size2 } = row.props;
-  const classNames3 = (0, import_system94.useClassNames)({
+  const classNames3 = (0, import_system97.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size2 || ctx.size
@@ -10313,18 +10490,18 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions3.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system94.useStateProps)({
+  const stateProps = (0, import_system97.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
     "tr",
     {
       ref,
-      className: (0, import_system94.cn)(
+      className: (0, import_system97.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -10338,19 +10515,19 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react71 = require("react");
+var import_react72 = 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_system95 = require("@marigold/system");
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_system98 = require("@marigold/system");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column: column2,
   width = "auto",
   align = "left"
 }) => {
-  const ref = (0, import_react71.useRef)(null);
+  const ref = (0, import_react72.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -10362,25 +10539,25 @@ 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_system95.useStateProps)({
+  const stateProps = (0, import_system98.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
     "th",
     {
       ref,
-      className: (0, import_system95.cn)(import_system95.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
+      className: (0, import_system98.cn)(import_system98.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
       ...(0, import_utils14.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var Table = ({
   variant,
   size: size2,
@@ -10389,10 +10566,11 @@ var Table = ({
   disableKeyboardNavigation = false,
   stickyHeader,
   emptyState,
+  alignY = "middle",
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react72.useRef)(null);
+  const tableRef = (0, import_react73.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -10403,21 +10581,21 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames3 = (0, import_system96.useClassNames)({
+  const classNames3 = (0, import_system99.useClassNames)({
     component: "Table",
     variant,
     size: size2
   });
   const { collection } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames3, variant, size: size2 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
         "table",
         {
           ref: tableRef,
-          className: (0, import_system96.cn)(
+          className: (0, import_system99.cn)(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -10425,7 +10603,7 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
               TableHeaderRow,
               {
                 item: headerRow,
@@ -10433,7 +10611,7 @@ var Table = ({
                 children: [...collection.getChildren(headerRow.key)].map(
                   (column2) => {
                     var _a, _b, _c, _d, _e;
-                    return ((_a = column2.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+                    return ((_a = column2.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
                       TableSelectAllCell,
                       {
                         width: (_b = column2.props) == null ? void 0 : _b.width,
@@ -10441,7 +10619,7 @@ var Table = ({
                         align: (_c = column2.props) == null ? void 0 : _c.align
                       },
                       column2.key
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
                       TableColumnHeader,
                       {
                         width: (_d = column2.props) == null ? void 0 : _d.width,
@@ -10455,15 +10633,23 @@ var Table = ({
               },
               headerRow.key
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(TableBody, { className: classNames3.body, emptyState, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(TableBody, { className: classNames3.body, emptyState, children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index2) => {
+                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index2) => {
                   var _a, _b;
                   const currentColumn = collection.columns[index2];
-                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+                    TableCheckboxCell,
+                    {
+                      cell,
+                      alignY
+                    },
+                    cell.key
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
+                      alignY,
                       cell
                     },
                     cell.key
@@ -10484,9 +10670,9 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_react_aria_components61 = require("react-aria-components");
-var import_system97 = require("@marigold/system");
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_react_aria_components63 = require("react-aria-components");
+var import_system100 = require("@marigold/system");
+var import_jsx_runtime114 = require("react/jsx-runtime");
 var _Text = ({
   variant,
   size: size2,
@@ -10500,40 +10686,40 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const classNames3 = (0, import_system97.useClassNames)({
+  const classNames3 = (0, import_system100.useClassNames)({
     component: "Text",
     variant,
     size: size2
   });
-  const Component2 = props.slot ? import_react_aria_components61.Text : as;
+  const Component2 = props.slot ? import_react_aria_components63.Text : as;
   const elementType = props.slot ? { elementType: as } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
     Component2,
     {
       ...props,
       ...elementType,
-      className: (0, import_system97.cn)(
+      className: (0, import_system100.cn)(
         "max-w-(--maxTextWidth)",
         // possibly set by a <Container>
         classNames3,
-        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]
+        fontStyle && import_system100.textStyle[fontStyle],
+        align && import_system100.textAlign[align],
+        cursor2 && import_system100.cursorStyle[cursor2],
+        weight && import_system100.fontWeight[weight],
+        fontSize && import_system100.textSize[fontSize]
       ),
-      style: { color: color && (0, import_system97.ensureCssVar)(color, "color") },
+      style: { color: color && (0, import_system100.ensureCssVar)(color, "color") },
       children
     }
   );
 };
 
 // src/TextArea/TextArea.tsx
-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_react73.forwardRef)(
+var import_react74 = require("react");
+var import_react_aria_components64 = require("react-aria-components");
+var import_system101 = require("@marigold/system");
+var import_jsx_runtime115 = require("react/jsx-runtime");
+var _TextArea = (0, import_react74.forwardRef)(
   ({
     variant,
     size: size2,
@@ -10544,7 +10730,7 @@ var _TextArea = (0, import_react73.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system98.useClassNames)({ component: "TextArea", variant, size: size2 });
+    const classNames3 = (0, import_system101.useClassNames)({ component: "TextArea", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10552,15 +10738,15 @@ var _TextArea = (0, import_react73.forwardRef)(
       isRequired: required,
       ...rest
     };
-    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 }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(FieldBase, { as: import_react_aria_components64.TextField, ...props, variant, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria_components64.TextArea, { className: classNames3, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-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_react74.forwardRef)(
+var import_react75 = require("react");
+var import_react_aria_components65 = require("react-aria-components");
+var import_jsx_runtime116 = require("react/jsx-runtime");
+var _TextField = (0, import_react75.forwardRef)(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
@@ -10569,13 +10755,13 @@ var _TextField = (0, import_react74.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(FieldBase, { as: import_react_aria_components63.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(_Input, { ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(FieldBase, { as: import_react_aria_components65.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-var import_system99 = require("@marigold/system");
-var import_jsx_runtime114 = require("react/jsx-runtime");
+var import_system102 = require("@marigold/system");
+var import_jsx_runtime117 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -10588,29 +10774,29 @@ var Tiles = ({
   if (stretch) {
     column2 = `minmax(${column2}, 1fr)`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system99.cn)(
+      className: (0, import_system102.cn)(
         "grid",
-        import_system99.gapSpace[space],
+        import_system102.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system99.createVar)({ column: column2, tilesWidth }),
+      style: (0, import_system102.createVar)({ column: column2, tilesWidth }),
       children
     }
   );
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_react_aria_components65 = require("react-aria-components");
-var import_system100 = require("@marigold/system");
+var import_react_aria_components67 = require("react-aria-components");
+var import_system103 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react_aria_components64 = require("react-aria-components");
-var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_react_aria_components66 = require("react-aria-components");
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -10624,26 +10810,26 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria_components64.TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_react_aria_components66.TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames3 = (0, import_system100.useClassNames)({ component: "Tooltip", variant, size: size2 });
+  const classNames3 = (0, import_system103.useClassNames)({ component: "Tooltip", variant, size: size2 });
   const portal = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
-    import_react_aria_components65.Tooltip,
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+    import_react_aria_components67.Tooltip,
     {
       ...props,
-      className: (0, import_system100.cn)("group/tooltip", classNames3.container),
+      className: (0, import_system103.cn)("group/tooltip", classNames3.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__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" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_react_aria_components67.OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -10652,23 +10838,23 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
 _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
-var import_react_aria_components68 = require("react-aria-components");
-var import_system102 = require("@marigold/system");
+var import_react_aria_components70 = require("react-aria-components");
+var import_system105 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
-var import_react_aria_components67 = require("react-aria-components");
-var import_system101 = require("@marigold/system");
+var import_react_aria_components69 = require("react-aria-components");
+var import_system104 = require("@marigold/system");
 
 // src/TagGroup/TagGroupHiddenInput.tsx
-var import_react75 = require("react");
-var import_react_aria_components66 = require("react-aria-components");
-var import_jsx_runtime117 = require("react/jsx-runtime");
+var import_react76 = require("react");
+var import_react_aria_components68 = require("react-aria-components");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 var TagGroupHiddenInput = ({ name }) => {
   var _a;
-  const state = (0, import_react75.useContext)(import_react_aria_components66.ListStateContext);
+  const state = (0, import_react76.useContext)(import_react_aria_components68.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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { hidden: true, "aria-hidden": "true", children: selectedKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
     "input",
     {
       type: "checkbox",
@@ -10682,7 +10868,7 @@ var TagGroupHiddenInput = ({ name }) => {
 };
 
 // src/TagGroup/TagGroup.tsx
-var import_jsx_runtime118 = require("react/jsx-runtime");
+var import_jsx_runtime121 = require("react/jsx-runtime");
 var _TagGroup = ({
   width,
   items,
@@ -10693,10 +10879,10 @@ var _TagGroup = ({
   name,
   ...rest
 }) => {
-  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_components67.TagList,
+  const classNames3 = (0, import_system104.useClassNames)({ component: "Tag", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(FieldBase, { as: import_react_aria_components69.TagGroup, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+      import_react_aria_components69.TagList,
       {
         items,
         className: classNames3.listItems,
@@ -10704,28 +10890,28 @@ var _TagGroup = ({
         children
       }
     ),
-    name ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(TagGroupHiddenInput, { name }) : null
+    name ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(TagGroupHiddenInput, { name }) : null
   ] });
 };
 
 // src/TagGroup/Tag.tsx
-var import_jsx_runtime119 = require("react/jsx-runtime");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames3 = (0, import_system102.useClassNames)({ component: "Tag", variant, size: size2 });
+  const classNames3 = (0, import_system105.useClassNames)({ component: "Tag", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-    import_react_aria_components68.Tag,
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    import_react_aria_components70.Tag,
     {
       textValue,
       ...props,
-      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: [
+      className: (0, import_system105.cn)("data-selection-mode:cursor-pointer", classNames3.tag),
+      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_jsx_runtime122.Fragment, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(CloseButton, { className: classNames3.closeButton, slot: "remove" })
+        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(CloseButton, { className: classNames3.closeButton, slot: "remove" })
       ] })
     }
   );
@@ -10736,14 +10922,14 @@ _Tag.Group = _TagGroup;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react_aria_components70 = require("react-aria-components");
+var import_react_aria_components72 = require("react-aria-components");
 var import_utils16 = require("@react-aria/utils");
-var import_system104 = require("@marigold/system");
+var import_system107 = require("@marigold/system");
 
 // src/XLoader/BaseLoader.tsx
-var import_react_aria_components69 = require("react-aria-components");
+var import_react_aria_components71 = require("react-aria-components");
 var import_i18n6 = require("@react-aria/i18n");
-var import_system103 = require("@marigold/system");
+var import_system106 = require("@marigold/system");
 
 // src/intl/messages.ts
 var intlMessages2 = {
@@ -10756,7 +10942,7 @@ var intlMessages2 = {
 };
 
 // src/XLoader/BaseLoader.tsx
-var import_jsx_runtime120 = require("react/jsx-runtime");
+var import_jsx_runtime123 = require("react/jsx-runtime");
 var BaseLoader = ({
   variant,
   size: size2,
@@ -10765,16 +10951,16 @@ var BaseLoader = ({
   ...props
 }) => {
   const stringFormatter = (0, import_i18n6.useLocalizedStringFormatter)(intlMessages2, "marigold");
-  const className = (0, import_system103.useClassNames)({ component: "XLoader", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
-    import_react_aria_components69.ProgressBar,
+  const className = (0, import_system106.useClassNames)({ component: "XLoader", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+    import_react_aria_components71.ProgressBar,
     {
       className: className.container,
       isIndeterminate: true,
       "aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -10782,13 +10968,13 @@ var BaseLoader = ({
             fill: "currentColor",
             className: className.loader,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                 "path",
                 {
                   id: "XMLID_5_",
                   d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10801,12 +10987,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                 "path",
                 {
                   id: "XMLID_18_",
                   d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10819,12 +11005,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                 "path",
                 {
                   id: "XMLID_19_",
                   d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10837,12 +11023,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                 "path",
                 {
                   id: "XMLID_20_",
                   d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10855,12 +11041,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                 "path",
                 {
                   id: "XMLID_21_",
                   d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10873,12 +11059,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                 "path",
                 {
                   id: "XMLID_22_",
                   d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10891,12 +11077,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                 "path",
                 {
                   id: "XMLID_23_",
                   d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10909,12 +11095,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                 "path",
                 {
                   id: "XMLID_24_",
                   d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10927,12 +11113,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                 "path",
                 {
                   id: "XMLID_25_",
                   d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10945,12 +11131,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                 "path",
                 {
                   id: "XMLID_26_",
                   d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10963,12 +11149,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                 "path",
                 {
                   id: "XMLID_27_",
                   d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10984,48 +11170,48 @@ var BaseLoader = ({
             ]
           }
         ),
-        children ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_react_aria_components69.Label, { className: className.label, children }) : null
+        children ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_react_aria_components71.Label, { className: className.label, children }) : null
       ]
     }
   );
 };
 
 // src/XLoader/XLoader.tsx
-var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_jsx_runtime124 = 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_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 }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_aria_components72.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_aria_components72.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
-  const className = (0, import_system104.useClassNames)({
+  const className = (0, import_system107.useClassNames)({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(BaseLoader, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(BaseLoader, { ...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 });
+var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
-var import_react_aria_components74 = require("react-aria-components");
-var import_system107 = require("@marigold/system");
+var import_react_aria_components76 = require("react-aria-components");
+var import_system110 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react76 = require("react");
-var TabContext = (0, import_react76.createContext)({});
-var useTabContext = () => (0, import_react76.useContext)(TabContext);
+var import_react77 = require("react");
+var TabContext = (0, import_react77.createContext)({});
+var useTabContext = () => (0, import_react77.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react_aria_components71 = require("react-aria-components");
-var import_system105 = require("@marigold/system");
-var import_jsx_runtime122 = require("react/jsx-runtime");
+var import_react_aria_components73 = require("react-aria-components");
+var import_system108 = require("@marigold/system");
+var import_jsx_runtime125 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
-    import_react_aria_components71.Tab,
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
+    import_react_aria_components73.Tab,
     {
       ...props,
-      className: (0, import_system105.cn)(
+      className: (0, import_system108.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames3.tab
       ),
@@ -11035,49 +11221,88 @@ var _Tab = (props) => {
 };
 
 // src/Tabs/TabList.tsx
-var import_react_aria_components72 = require("react-aria-components");
-var import_system106 = require("@marigold/system");
-var import_jsx_runtime123 = require("react/jsx-runtime");
+var import_react_aria_components74 = require("react-aria-components");
+var import_system109 = require("@marigold/system");
+var import_jsx_runtime126 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-    import_react_aria_components72.TabList,
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+    import_react_aria_components74.TabList,
     {
       ...props,
-      className: (0, import_system106.cn)("flex", import_system106.gapSpace[space], classNames3.tabsList),
+      className: (0, import_system109.cn)("flex", import_system109.gapSpace[space], classNames3.tabsList),
       children: props.children
     }
   );
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react_aria_components73 = require("react-aria-components");
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_react_aria_components75 = require("react-aria-components");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var _TabPanel = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_aria_components73.TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_react_aria_components75.TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 var _Tabs = ({ disabled, variant, size: size2 = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames3 = (0, import_system107.useClassNames)({
+  const classNames3 = (0, import_system110.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_components74.Tabs, { ...props, className: classNames3.container, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_react_aria_components76.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_components75 = require("react-aria-components");
+var import_react_aria_components77 = require("react-aria-components");
+
+// src/TimeField/TimeField.tsx
+var import_react78 = require("react");
+var import_react_aria_components78 = require("react-aria-components");
+var import_system111 = require("@marigold/system");
+var import_jsx_runtime129 = require("react/jsx-runtime");
+var _TimeField = (0, import_react78.forwardRef)(
+  ({
+    required,
+    disabled,
+    readOnly,
+    error,
+    variant,
+    size: size2,
+    width = "full",
+    ...rest
+  }, ref) => {
+    const classNames3 = (0, import_system111.useClassNames)({ component: "DateField", variant, size: size2 });
+    const props = {
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isInvalid: error,
+      isRequired: required,
+      ...rest
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+      FieldBase,
+      {
+        as: import_react_aria_components78.TimeField,
+        variant,
+        size: size2,
+        width,
+        ...props,
+        ref,
+        children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react_aria_components78.DateInput, { className: classNames3.field, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react_aria_components78.DateSegment, { className: classNames3.segment, segment }) })
+      }
+    );
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -11098,6 +11323,7 @@ var import_react_aria_components75 = require("react-aria-components");
   Columns,
   ComboBox,
   Container,
+  ContextualHelp,
   DateField,
   DateFormat,
   DatePicker,
@@ -11150,10 +11376,12 @@ var import_react_aria_components75 = require("react-aria-components");
   TextField,
   ThemeProvider,
   Tiles,
+  TimeField,
   Tooltip,
   Underlay,
   VisuallyHidden,
   XLoader,
+  _ContextualHelp,
   gridColsAlign,
   gridColumn,
   useAsyncList,