@marigold/components 11.4.1 → 11.5.0

package/dist/index.js

@@ -212,7 +212,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment12 = REACT_FRAGMENT_TYPE;
+        var Fragment13 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -271,7 +271,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element2;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment12;
+        exports2.Fragment = Fragment13;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal;
@@ -868,7 +868,6 @@ __export(index_exports, {
   Center: () => Center,
   Checkbox: () => _Checkbox,
   CheckboxGroup: () => _CheckboxGroup,
-  CloseButton: () => CloseButton2,
   Columns: () => Columns,
   ComboBox: () => _ComboBox,
   Container: () => Container,
@@ -876,11 +875,12 @@ __export(index_exports, {
   DatePicker: () => _DatePicker,
   Dialog: () => _Dialog,
   Divider: () => _Divider,
+  Drawer: () => Drawer,
   FieldBase: () => FieldBase,
   FieldGroup: () => FieldGroup,
   FieldGroupContext: () => FieldGroupContext,
   Footer: () => Footer,
-  Form: () => import_react_aria_components27.Form,
+  Form: () => _Form,
   Grid: () => Grid,
   Header: () => _Header,
   Headline: () => _Headline,
@@ -903,7 +903,7 @@ __export(index_exports, {
   Popover: () => _Popover,
   Radio: () => _Radio,
   RadioGroup: () => _RadioGroup,
-  RouterProvider: () => import_react_aria_components69.RouterProvider,
+  RouterProvider: () => import_react_aria_components73.RouterProvider,
   Scrollable: () => Scrollable,
   SearchField: () => _SearchField,
   SectionMessage: () => SectionMessage,
@@ -1148,7 +1148,7 @@ var HelpText = ({
       return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-start gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: classNames3.icon }),
         msg
-      ] }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-start gap-1", children: [
+      ] }, idx)) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-start justify-start gap-1", children: [
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { className: classNames3.icon }),
         messages
       ] });
@@ -1179,7 +1179,7 @@ var _Label = ({ size: size2, variant, children, ...props }) => {
     import_react_aria_components6.Label,
     {
       ...props,
-      className: (0, import_system7.cn)(classNames3.container, "flex w-[var(--labelWidth)]"),
+      className: (0, import_system7.cn)(classNames3.container, "inline-flex w-[var(--labelWidth)]"),
       style: (0, import_system7.createVar)({ labelWidth }),
       children: [
         children,
@@ -2034,9 +2034,9 @@ var _Checkbox = (0, import_react22.forwardRef)(
     checked,
     defaultChecked,
     indeterminate,
-    children,
     variant,
     size: size2,
+    label,
     ...rest
   }, ref) => {
     const props = {
@@ -2075,7 +2075,7 @@ var _Checkbox = (0, import_react22.forwardRef)(
               className: classNames3.checkbox
             }
           ),
-          children ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: classNames3.label, children }) : null
+          (props.children || label) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: classNames3.label, children: props.children || label })
         ] })
       }
     );
@@ -2180,30 +2180,47 @@ var Container = ({
 );
 
 // src/Dialog/Dialog.tsx
-var import_react28 = require("react");
-var import_react_aria_components25 = require("react-aria-components");
-var import_system38 = require("@marigold/system");
+var import_react29 = require("react");
+var import_react_aria_components26 = require("react-aria-components");
+var import_system39 = require("@marigold/system");
 
-// src/Overlay/Modal.tsx
+// src/CloseButton/CloseButton.tsx
 var import_react24 = require("react");
 var import_react_aria_components21 = require("react-aria-components");
+var import_system35 = require("@marigold/system");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var _Modal = (0, import_react24.forwardRef)(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
+var CloseButton = (0, import_react24.forwardRef)(
+  ({ className, size: size2, variant, ...props }, ref) => {
+    const classNames3 = (0, import_system35.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" }) }) });
+  }
+);
+
+// src/Overlay/Modal.tsx
+var import_react25 = require("react");
+var import_react_aria_components22 = require("react-aria-components");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var _Modal = (0, import_react25.forwardRef)(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
     isDismissable: dismissable,
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     Underlay,
     {
       dismissable,
       keyboardDismissable,
       open,
       variant: "modal",
-      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
-        import_react_aria_components21.Modal,
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        import_react_aria_components22.Modal,
         {
           ref,
           className: "relative flex w-full justify-center",
@@ -2216,8 +2233,8 @@ var _Modal = (0, import_react24.forwardRef)(({ open, dismissable, keyboardDismis
 });
 
 // src/Overlay/NonModal.tsx
-var import_react26 = require("react");
-var import_react_aria_components22 = require("react-aria-components");
+var import_react27 = require("react");
+var import_react_aria_components23 = 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");
@@ -2225,7 +2242,7 @@ var import_ssr2 = require("@react-aria/ssr");
 var import_utils = require("@react-aria/utils");
 
 // src/utils/useRenderProps.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 function useRenderProps(props) {
   let {
     className,
@@ -2236,7 +2253,7 @@ function useRenderProps(props) {
     defaultStyle,
     values
   } = props;
-  return (0, import_react25.useMemo)(() => {
+  return (0, import_react26.useMemo)(() => {
     let computedClassName;
     let computedStyle;
     let computedChildren;
@@ -2293,7 +2310,7 @@ var useNonModal = ({ nonModalRef, keyboardDismissable = true }, state) => {
 };
 
 // src/Overlay/NonModal.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var NonModalInner = ({ state, isExiting, ...props }) => {
   const { nonModalProps } = useNonModal(props, state);
   const ref = props.nonModalRef;
@@ -2313,7 +2330,7 @@ var NonModalInner = ({ state, isExiting, ...props }) => {
     ...renderProps.style,
     "--visual-viewport-height": viewport.height + "px"
   };
-  const overlay = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  const overlay = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
       ...(0, import_utils.mergeProps)((0, import_utils.filterDOMProps)(props), nonModalProps),
@@ -2328,28 +2345,28 @@ var NonModalInner = ({ state, isExiting, ...props }) => {
       "data-exiting": isExiting || void 0,
       children: [
         renderProps.children,
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_overlays2.DismissButton, { onDismiss: state.close })
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_overlays2.DismissButton, { onDismiss: state.close })
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     import_overlays2.Overlay,
     {
       isExiting,
       portalContainer,
       disableFocusManagement: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_focus.FocusScope, { restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_aria_components22.Provider, { values: [[import_react_aria_components22.OverlayTriggerStateContext, state]], children: overlay }) })
+      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 }) })
     }
   );
 };
-var NonModal = (0, import_react26.forwardRef)(
+var NonModal = (0, import_react27.forwardRef)(
   ({ open, ...rest }, ref) => {
     const props = {
       isOpen: open,
       ...rest
     };
     ref = (0, import_utils.useObjectRef)(ref);
-    const contextState = (0, import_react26.useContext)(import_react_aria_components22.OverlayTriggerStateContext);
+    const contextState = (0, import_react27.useContext)(import_react_aria_components23.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;
@@ -2357,7 +2374,7 @@ var NonModal = (0, import_react26.forwardRef)(
     if (state && !state.isOpen && !isExiting || isSSR) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       NonModalInner,
       {
         ...props,
@@ -2370,44 +2387,44 @@ var NonModal = (0, import_react26.forwardRef)(
 );
 
 // src/Dialog/DialogActions.tsx
-var import_system35 = require("@marigold/system");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_system36 = require("@marigold/system");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var DialogActions = ({ variant, size: size2, children }) => {
-  const classNames3 = (0, import_system35.useClassNames)({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: (0, import_system35.cn)("[grid-area:actions]", classNames3.actions), children });
+  const classNames3 = (0, import_system36.useClassNames)({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_system36.cn)("[grid-area:actions]", classNames3.actions), children });
 };
 
 // src/Dialog/DialogContent.tsx
-var import_system36 = require("@marigold/system");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_system37 = require("@marigold/system");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var DialogContent = ({
   variant,
   size: size2,
   children
 }) => {
-  const classNames3 = (0, import_system36.useClassNames)({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: (0, import_system36.cn)("[grid-area:content]", classNames3.content), children });
+  const classNames3 = (0, import_system37.useClassNames)({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: (0, import_system37.cn)("[grid-area:content]", classNames3.content), children });
 };
 
 // src/Dialog/DialogTitle.tsx
-var import_react_aria_components23 = require("react-aria-components");
-var import_system37 = require("@marigold/system");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react_aria_components24 = require("react-aria-components");
+var import_system38 = require("@marigold/system");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var DialogTitle = ({ variant, size: size2, children }) => {
-  const classNames3 = (0, import_system37.useClassNames)({
+  const classNames3 = (0, import_system38.useClassNames)({
     component: "Dialog",
     variant,
     size: size2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_aria_components23.Header, { className: (0, import_system37.cn)("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_aria_components23.Heading, { slot: "title", className: classNames3.title, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components24.Header, { className: (0, import_system38.cn)("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components24.Heading, { slot: "title", className: classNames3.title, children }) });
 };
 
 // src/Dialog/DialogTrigger.tsx
-var import_react27 = require("react");
-var import_react_aria_components24 = require("react-aria-components");
+var import_react28 = require("react");
+var import_react_aria_components25 = require("react-aria-components");
 var import_interactions = require("@react-aria/interactions");
-var import_jsx_runtime44 = require("react/jsx-runtime");
-var DialogContext = (0, import_react27.createContext)({});
+var import_jsx_runtime45 = require("react/jsx-runtime");
+var DialogContext = (0, import_react28.createContext)({});
 var _DialogTrigger = ({
   open,
   dismissable,
@@ -2421,65 +2438,49 @@ var _DialogTrigger = ({
     isKeyboardDismissDisabled: !keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DialogContext.Provider, { value: props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components24.DialogTrigger, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_interactions.PressResponder, { isPressed: false, children: props.children }) }) });
+  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 }) }) });
 };
 
 // src/Dialog/Dialog.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
-var CloseButton = ({ className }) => {
-  const ctx = (0, import_react28.useContext)(import_react_aria_components25.OverlayTriggerStateContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-    "button",
-    {
-      className: (0, import_system38.cn)(
-        "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
-        className
-      ),
-      onClick: ctx == null ? void 0 : ctx.close,
-      slot: "dismiss-button",
-      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          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 _Dialog = (0, import_react28.forwardRef)(
+var import_jsx_runtime46 = require("react/jsx-runtime");
+var _Dialog = (0, import_react29.forwardRef)(
   (props, ref) => {
     var _a;
-    const classNames3 = (0, import_system38.useClassNames)({
+    const classNames3 = (0, import_system39.useClassNames)({
       component: "Dialog",
       variant: props.variant,
       size: props.size
     });
-    const { isDismissable, isKeyboardDismissDisabled, isOpen } = (0, import_react28.useContext)(DialogContext);
-    const state = (0, import_react28.useContext)(import_react_aria_components25.OverlayTriggerStateContext);
+    const { isDismissable, isKeyboardDismissDisabled, isOpen } = (0, import_react29.useContext)(DialogContext);
+    const state = (0, import_react29.useContext)(import_react_aria_components26.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_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       _Modal,
       {
         dismissable: isDismissable,
         keyboardDismissable: isKeyboardDismissDisabled,
         open: isOpen,
-        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
-          import_react_aria_components25.Dialog,
+        children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+          import_react_aria_components26.Dialog,
           {
             ...props,
             ref,
-            className: (0, import_system38.cn)(
+            className: (0, import_system39.cn)(
               "relative outline-hidden [&>*:not(:last-child)]:mb-4",
               "grid [grid-template-areas:'title'_'content'_'actions']",
               classNames3.container
             ),
             children: [
-              props.closeButton && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CloseButton, { className: classNames3.closeButton }),
+              props.closeButton && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+                CloseButton,
+                {
+                  className: classNames3.closeButton,
+                  onPress: state == null ? void 0 : state.close
+                }
+              ),
               children
             ]
           }
@@ -2494,34 +2495,206 @@ _Dialog.Content = DialogContent;
 _Dialog.Actions = DialogActions;
 
 // src/Divider/Divider.tsx
-var import_react_aria_components26 = require("react-aria-components");
-var import_system39 = require("@marigold/system");
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_react_aria_components27 = require("react-aria-components");
+var import_system40 = require("@marigold/system");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var _Divider = ({ variant, ...props }) => {
-  const classNames3 = (0, import_system39.useClassNames)({ component: "Divider", variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_aria_components26.Separator, { className: (0, import_system39.cn)("border-none", classNames3), ...props });
+  const classNames3 = (0, import_system40.useClassNames)({ component: "Divider", variant });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_aria_components27.Separator, { className: (0, import_system40.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_landmark = require("@react-aria/landmark");
+var import_system45 = require("@marigold/system");
+
+// src/Drawer/Context.tsx
+var import_react30 = require("react");
+var DrawerContext = (0, import_react30.createContext)({
+  variant: void 0,
+  size: void 0
+});
+var useDrawerContext = () => (0, import_react30.useContext)(DrawerContext);
+
+// src/Drawer/DrawerActions.tsx
+var import_system41 = require("@marigold/system");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+var DrawerActions = ({ variant, size: size2, children }) => {
+  const ctx = useDrawerContext();
+  const classNames3 = (0, import_system41.useClassNames)({
+    component: "Drawer",
+    variant: variant != null ? variant : ctx.variant,
+    size: size2 != null ? size2 : ctx.size
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
+    {
+      className: (0, import_system41.cn)("[grid-area:actions]", classNames3.actions),
+      style: { "--i": 2 },
+      children
+    }
+  );
+};
+
+// src/Drawer/DrawerContent.tsx
+var import_system42 = require("@marigold/system");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var DrawerContent = ({
+  variant,
+  size: size2,
+  children
+}) => {
+  const ctx = useDrawerContext();
+  const classNames3 = (0, import_system42.useClassNames)({
+    component: "Drawer",
+    variant: variant != null ? variant : ctx.variant,
+    size: size2 != null ? size2 : ctx.size
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "div",
+    {
+      className: (0, import_system42.cn)("[grid-area:content]", classNames3.content),
+      style: { "--i": 1 },
+      children
+    }
+  );
 };
 
+// src/Drawer/DrawerModal.tsx
+var import_system43 = require("@marigold/system");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var DrawerModal = ({
+  children,
+  className,
+  ...props
+}) => {
+  const isSmallScreen = (0, import_system43.useSmallScreen)();
+  return isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(_Modal, { children }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+    NonModal,
+    {
+      ...props,
+      className: (0, import_system43.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_system44 = require("@marigold/system");
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var DrawerTitle = ({ variant, size: size2, children }) => {
+  const ctx = useDrawerContext();
+  const classNames3 = (0, import_system44.useClassNames)({
+    component: "Drawer",
+    variant: variant != null ? variant : ctx.variant,
+    size: size2 != null ? size2 : ctx.size
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    import_react_aria_components28.Header,
+    {
+      className: (0, import_system44.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 })
+    }
+  );
+};
+
+// src/Drawer/DrawerTrigger.tsx
+var import_react_aria_components29 = require("react-aria-components");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var DrawerTrigger = ({
+  open,
+  children,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_aria_components29.DialogTrigger, { isOpen: open, ...props, children });
+
+// src/Drawer/Drawer.tsx
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var Drawer = ({
+  children,
+  variant,
+  size: size2,
+  open,
+  keyboardDismissable,
+  closeButton,
+  role = "complementary",
+  ...props
+}) => {
+  const ref = (0, import_react31.useRef)(null);
+  const classNames3 = (0, import_system45.useClassNames)({ component: "Drawer", variant, size: size2 });
+  const ctx = (0, import_react31.useContext)(import_react_aria_components30.OverlayTriggerStateContext);
+  const isSmallScreen = (0, import_system45.useSmallScreen)();
+  const landmarkAria = (0, import_landmark.useLandmark)({ ...props, role }, ref);
+  const landmarkProps = isSmallScreen ? {} : landmarkAria.landmarkProps;
+  return /* @__PURE__ */ (0, import_jsx_runtime53.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,
+        {
+          ...props,
+          ...landmarkProps,
+          className: (0, import_system45.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,
+              {
+                "aria-label": "dismiss drawer",
+                style: { "--i": 0 },
+                className: classNames3.closeButton,
+                onPress: ctx == null ? void 0 : ctx.close
+              }
+            ),
+            children
+          ]
+        }
+      ) })
+    }
+  );
+};
+Drawer.Trigger = DrawerTrigger;
+Drawer.Title = DrawerTitle;
+Drawer.Content = DrawerContent;
+Drawer.Actions = DrawerActions;
+
 // src/Footer/Footer.tsx
-var import_system40 = require("@marigold/system");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_system46 = require("@marigold/system");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var Footer = ({ children, variant, size: size2, ...props }) => {
-  const classNames3 = (0, import_system40.useClassNames)({ component: "Footer", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("footer", { ...props, className: classNames3, children });
+  const classNames3 = (0, import_system46.useClassNames)({ component: "Footer", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("footer", { ...props, className: classNames3, children });
 };
 
 // src/Form/Form.tsx
-var import_react_aria_components27 = require("react-aria-components");
+var import_react_aria_components31 = require("react-aria-components");
+var import_system47 = 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,
+  {
+    ...props,
+    className: (0, import_system47.cn)(import_system47.maxWidth[maxWidth], unstyled && "contents")
+  }
+);
 
 // src/Grid/Grid.tsx
-var import_system41 = require("@marigold/system");
+var import_system48 = require("@marigold/system");
 
 // src/Grid/GridArea.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var GridArea = ({ name, children }) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { style: { gridArea: name }, children });
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var GridArea = ({ name, children }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: { gridArea: name }, children });
 
 // src/Grid/Grid.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime57 = 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 = ({
@@ -2533,10 +2706,10 @@ var Grid = ({
   space = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
-      className: (0, import_system41.cn)("grid", import_system41.gapSpace[space], import_system41.height[height]),
+      className: (0, import_system48.cn)("grid", import_system48.gapSpace[space], import_system48.height[height]),
       style: {
         gridTemplateAreas: parseGridAreas(areas),
         gridTemplateColumns: parseTemplateValue(columns),
@@ -2550,22 +2723,22 @@ var Grid = ({
 Grid.Area = GridArea;
 
 // src/Header/Header.tsx
-var import_react_aria_components28 = require("react-aria-components");
-var import_system42 = require("@marigold/system");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_react_aria_components32 = require("react-aria-components");
+var import_system49 = require("@marigold/system");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var _Header = ({ variant, size: size2, ...props }) => {
-  const classNames3 = (0, import_system42.useClassNames)({
+  const classNames3 = (0, import_system49.useClassNames)({
     component: "Header",
     variant,
     size: size2
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react_aria_components28.Header, { className: classNames3, ...props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_aria_components32.Header, { className: classNames3, ...props, children: props.children });
 };
 
 // src/Headline/Headline.tsx
-var import_react_aria_components29 = require("react-aria-components");
-var import_system43 = require("@marigold/system");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_react_aria_components33 = require("react-aria-components");
+var import_system50 = require("@marigold/system");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var _Headline = ({
   variant,
   size: size2,
@@ -2575,31 +2748,31 @@ var _Headline = ({
   level = "1",
   ...props
 }) => {
-  const classNames3 = (0, import_system43.useClassNames)({
+  const classNames3 = (0, import_system50.useClassNames)({
     component: "Headline",
     variant,
     size: size2 != null ? size2 : `level-${level}`
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-    import_react_aria_components29.Heading,
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    import_react_aria_components33.Heading,
     {
       level: Number(level),
       ...props,
-      className: (0, import_system43.cn)(
+      className: (0, import_system50.cn)(
         classNames3,
         "max-w-(--maxHeadlineWidth)",
         // possibly set by a <Container>
-        import_system43.textAlign[align]
+        import_system50.textAlign[align]
       ),
-      style: { color: color && (0, import_system43.ensureCssVar)(color, "color") },
+      style: { color: color && (0, import_system50.ensureCssVar)(color, "color") },
       children
     }
   );
 };
 
 // src/Image/Image.tsx
-var import_system44 = require("@marigold/system");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_system51 = require("@marigold/system");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var Image = ({
   variant,
   size: size2,
@@ -2607,25 +2780,25 @@ var Image = ({
   position: position2 = "none",
   ...props
 }) => {
-  const classNames3 = (0, import_system44.useClassNames)({ component: "Image", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  const classNames3 = (0, import_system51.useClassNames)({ component: "Image", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: (0, import_system44.cn)(
+      className: (0, import_system51.cn)(
         fit !== "none" && "h-full w-full",
         classNames3,
-        import_system44.objectFit[fit],
-        import_system44.objectPosition[position2]
+        import_system51.objectFit[fit],
+        import_system51.objectPosition[position2]
       )
     }
   );
 };
 
 // src/Inline/Inline.tsx
-var import_system45 = require("@marigold/system");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_system52 = require("@marigold/system");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var Inline = ({
   space = 0,
   alignX,
@@ -2634,15 +2807,15 @@ var Inline = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system45.cn)(
+      className: (0, import_system52.cn)(
         "flex flex-wrap",
-        import_system45.gapSpace[space],
-        alignX && ((_b = (_a = import_system45.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system45.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
+        import_system52.gapSpace[space],
+        alignX && ((_b = (_a = import_system52.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system52.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
       children
     }
@@ -2650,57 +2823,57 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-var import_react29 = require("react");
-var import_react_aria_components32 = require("react-aria-components");
+var import_react32 = require("react");
+var import_react_aria_components36 = require("react-aria-components");
 
 // src/DateField/DateInput.tsx
-var import_react_aria_components31 = require("react-aria-components");
-var import_system47 = require("@marigold/system");
+var import_react_aria_components35 = require("react-aria-components");
+var import_system54 = require("@marigold/system");
 
 // src/DateField/DateSegment.tsx
-var import_react_aria_components30 = require("react-aria-components");
-var import_system46 = require("@marigold/system");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_react_aria_components34 = require("react-aria-components");
+var import_system53 = require("@marigold/system");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
-    import_react_aria_components30.DateSegment,
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    import_react_aria_components34.DateSegment,
     {
       ...props,
       segment,
       style: {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
-      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           "span",
           {
             "aria-hidden": "true",
-            className: (0, import_system46.cn)(
+            className: (0, import_system53.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_runtime54.jsx)("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var _DateInput = ({ variant, size: size2, action, ...props }) => {
-  const classNames3 = (0, import_system47.useClassNames)({ component: "DateField", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_react_aria_components31.Group, { className: classNames3.field, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_aria_components31.DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(_DateSegment, { className: classNames3.segment, segment }) }),
+  const classNames3 = (0, import_system54.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 }) }),
     action ? action : null
   ] });
 };
 
 // src/DateField/DateField.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var _DateField = (0, import_react29.forwardRef)(
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var _DateField = (0, import_react32.forwardRef)(
   ({
     variant,
     size: size2,
@@ -2718,46 +2891,46 @@ var _DateField = (0, import_react29.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       FieldBase,
       {
-        as: import_react_aria_components32.DateField,
+        as: import_react_aria_components36.DateField,
         variant,
         size: size2,
         ref,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(_DateInput, { action })
+        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(_DateInput, { action })
       }
     );
   }
 );
 
 // src/Calendar/Calendar.tsx
-var import_react34 = require("react");
-var import_react_aria_components38 = require("react-aria-components");
-var import_system52 = require("@marigold/system");
+var import_react37 = require("react");
+var import_react_aria_components42 = require("react-aria-components");
+var import_system59 = require("@marigold/system");
 
 // src/Calendar/CalendarGrid.tsx
-var import_react_aria_components34 = require("react-aria-components");
-var import_system49 = require("@marigold/system");
+var import_react_aria_components38 = require("react-aria-components");
+var import_system56 = require("@marigold/system");
 
 // src/Calendar/CalendarGridHeader.tsx
 var import_date = require("@internationalized/date");
-var import_react30 = require("react");
-var import_react_aria_components33 = require("react-aria-components");
+var import_react33 = require("react");
+var import_react_aria_components37 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
 var import_i18n3 = require("@react-aria/i18n");
-var import_system48 = require("@marigold/system");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_system55 = require("@marigold/system");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
-  const state = (0, import_react30.useContext)(import_react_aria_components33.CalendarStateContext);
+  const state = (0, import_react33.useContext)(import_react_aria_components37.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_react30.useMemo)(() => {
+  const weekDays = (0, import_react33.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 });
@@ -2765,21 +2938,21 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames3 = (0, import_system48.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
+  const classNames3 = (0, import_system55.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)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var _CalendarGrid = () => {
-  const classNames3 = (0, import_system49.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_aria_components34.CalendarGrid, { className: classNames3.calendarGrid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CalendarGridHeader, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_aria_components34.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
-      import_react_aria_components34.CalendarCell,
+  const classNames3 = (0, import_system56.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,
       {
         date,
-        className: (0, import_system49.cn)(
+        className: (0, import_system56.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
         )
@@ -2789,9 +2962,9 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-var import_react31 = require("react");
-var import_react_aria_components35 = require("react-aria-components");
-var import_system50 = require("@marigold/system");
+var import_react34 = require("react");
+var import_react_aria_components39 = require("react-aria-components");
+var import_system57 = require("@marigold/system");
 
 // src/Calendar/useFormattedMonths.tsx
 var import_i18n4 = require("@react-aria/i18n");
@@ -2810,60 +2983,60 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 function CalendarListBox({
   type,
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = (0, import_react31.useContext)(import_react_aria_components35.CalendarStateContext);
+  const state = (0, import_react34.useContext)(import_react_aria_components39.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = (0, import_system50.useClassNames)({ component: "Select" });
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  const { select: selectClassNames } = (0, import_system57.useClassNames)({ component: "Select" });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     "button",
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: (0, import_system50.cn)(buttonStyles, selectClassNames),
+      className: (0, import_system57.cn)(buttonStyles, selectClassNames),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ChevronDown, {})
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ChevronDown, {})
       ]
     }
   );
 }
 
 // src/Calendar/MonthControls.tsx
-var import_system51 = require("@marigold/system");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_system58 = require("@marigold/system");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function MonthControls() {
-  const classNames3 = (0, import_system51.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  const classNames3 = (0, import_system58.useClassNames)({ component: "Calendar" });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "div",
     {
-      className: (0, import_system51.cn)(
+      className: (0, import_system58.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_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           IconButton,
           {
-            className: (0, import_system51.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
+            className: (0, import_system58.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "previous",
-            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ChevronLeft, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           IconButton,
           {
-            className: (0, import_system51.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
+            className: (0, import_system58.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "next",
-            children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ChevronRight, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronRight, {})
           }
         )
       ]
@@ -2873,24 +3046,24 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-var import_react32 = require("react");
-var import_react_aria_components36 = require("react-aria-components");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_react35 = require("react");
+var import_react_aria_components40 = require("react-aria-components");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react32.useContext)(import_react_aria_components36.CalendarStateContext);
+  const state = (0, import_react35.useContext)(import_react_aria_components40.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange2 = (index2) => {
     let value = Number(index2) + 1;
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     "ul",
     {
       "data-testid": "monthOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
       children: months.map((month, index2) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           _Button,
           {
             slot: "previous",
@@ -2911,12 +3084,12 @@ var MonthListBox = ({ setSelectedDropdown }) => {
 var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
-var import_react33 = require("react");
-var import_react_aria_components37 = require("react-aria-components");
+var import_react36 = require("react");
+var import_react_aria_components41 = require("react-aria-components");
 var import_i18n5 = require("@react-aria/i18n");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react33.useContext)(import_react_aria_components37.CalendarStateContext);
+  const state = (0, import_react36.useContext)(import_react_aria_components41.CalendarStateContext);
   const years = [];
   let formatter = (0, import_i18n5.useDateFormatter)({
     year: "numeric",
@@ -2929,8 +3102,8 @@ var YearListBox = ({ setSelectedDropdown }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
-  const activeButtonRef = (0, import_react33.useRef)(null);
-  (0, import_react33.useEffect)(() => {
+  const activeButtonRef = (0, import_react36.useRef)(null);
+  (0, import_react36.useEffect)(() => {
     if (activeButtonRef.current) {
       const activeButton = activeButtonRef.current;
       activeButton == null ? void 0 : activeButton.scrollIntoView({
@@ -2944,19 +3117,19 @@ var YearListBox = ({ setSelectedDropdown }) => {
     let date = years[index2].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.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 isActive = +year.formatted === state.focusedDate.year;
-        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
           "div",
           {
             ref: isActive ? activeButtonRef : null,
             style: { height: "100%", width: "100%" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
               _Button,
               {
                 slot: "previous",
@@ -2981,7 +3154,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var _Calendar = ({
   disabled,
   readOnly,
@@ -2996,24 +3169,24 @@ var _Calendar = ({
     isDateUnavailable: dateUnavailable,
     ...rest
   };
-  const classNames3 = (0, import_system52.useClassNames)({ component: "Calendar" });
-  const [selectedDropdown, setSelectedDropdown] = (0, import_react34.useState)();
+  const classNames3 = (0, import_system59.useClassNames)({ component: "Calendar" });
+  const [selectedDropdown, setSelectedDropdown] = (0, import_react37.useState)();
   const ViewMap = {
-    month: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MonthListBox_default, { setSelectedDropdown }),
-    year: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(YearListBox_default, { setSelectedDropdown })
+    month: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
-    import_react_aria_components38.Calendar,
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    import_react_aria_components42.Calendar,
     {
-      className: (0, import_system52.cn)(
+      className: (0, import_system59.cn)(
         "flex min-h-[350px] w-fit flex-col rounded-xs p-4",
         classNames3.calendar
       ),
       ...props,
-      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex w-fit gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "flex w-fit gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               CalendarListBox,
               {
                 type: "month",
@@ -3021,7 +3194,7 @@ var _Calendar = ({
                 setSelectedDropdown
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               CalendarListBox,
               {
                 type: "year",
@@ -3030,20 +3203,20 @@ var _Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(MonthControls_default, {})
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(MonthControls_default, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(_CalendarGrid, {})
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(_CalendarGrid, {})
       ] })
     }
   );
 };
 
 // src/DatePicker/DatePicker.tsx
-var import_react35 = __toESM(require("react"));
-var import_react_aria_components39 = require("react-aria-components");
-var import_system53 = require("@marigold/system");
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var _DatePicker = import_react35.default.forwardRef(
+var import_react38 = __toESM(require("react"));
+var import_react_aria_components43 = require("react-aria-components");
+var import_system60 = require("@marigold/system");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var _DatePicker = import_react38.default.forwardRef(
   ({
     dateUnavailable,
     disabled,
@@ -3066,24 +3239,24 @@ var _DatePicker = import_react35.default.forwardRef(
       granularity,
       ...rest
     };
-    const classNames3 = (0, import_system53.useClassNames)({
+    const classNames3 = (0, import_system60.useClassNames)({
       component: "DatePicker",
       size: size2,
       variant
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
       FieldBase,
       {
-        as: import_react_aria_components39.DatePicker,
+        as: import_react_aria_components43.DatePicker,
         variant,
         size: size2,
         ...props,
         ref,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             _DateInput,
             {
-              action: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(IconButton, { className: classNames3, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+              action: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(IconButton, { className: classNames3, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                 "svg",
                 {
                   "data-testid": "action",
@@ -3091,12 +3264,12 @@ var _DatePicker = import_react35.default.forwardRef(
                   width: 24,
                   height: 24,
                   fill: "currentColor",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime64.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_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" })
                 }
               ) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_aria_components39.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(_Calendar, { disabled }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_react_aria_components43.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Calendar, { disabled }) }) })
         ]
       }
     );
@@ -3104,53 +3277,53 @@ var _DatePicker = import_react35.default.forwardRef(
 );
 
 // src/Inset/Inset.tsx
-var import_system54 = require("@marigold/system");
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+var import_system61 = require("@marigold/system");
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
   "div",
   {
-    className: (0, import_system54.cn)(
-      space && import_system54.paddingSpace[space],
-      !space && spaceX && import_system54.paddingSpaceX[spaceX],
-      !space && spaceY && import_system54.paddingSpaceY[spaceY]
+    className: (0, import_system61.cn)(
+      space && import_system61.paddingSpace[space],
+      !space && spaceX && import_system61.paddingSpaceX[spaceX],
+      !space && spaceY && import_system61.paddingSpaceY[spaceY]
     ),
     children
   }
 );
 
 // src/Link/Link.tsx
-var import_react36 = require("react");
-var import_react_aria_components40 = require("react-aria-components");
-var import_system55 = require("@marigold/system");
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var _Link = (0, import_react36.forwardRef)(
+var import_react39 = require("react");
+var import_react_aria_components44 = require("react-aria-components");
+var import_system62 = require("@marigold/system");
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var _Link = (0, import_react39.forwardRef)(
   ({ variant, size: size2, disabled, children, ...props }, ref) => {
-    const classNames3 = (0, import_system55.useClassNames)({
+    const classNames3 = (0, import_system62.useClassNames)({
       component: "Link",
       variant,
       size: size2
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_aria_components40.Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react_aria_components44.Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-var import_system56 = require("@marigold/system");
+var import_system63 = require("@marigold/system");
 
 // src/List/Context.ts
-var import_react37 = require("react");
-var ListContext = (0, import_react37.createContext)({});
-var useListContext = () => (0, import_react37.useContext)(ListContext);
+var import_react40 = require("react");
+var ListContext = (0, import_react40.createContext)({});
+var useListContext = () => (0, import_react40.useContext)(ListContext);
 
 // src/List/ListItem.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames3 } = useListContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("li", { ...props, className: classNames3, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("li", { ...props, className: classNames3, children });
 };
 
 // src/List/List.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var List = ({
   as = "ul",
   children,
@@ -3159,38 +3332,38 @@ var List = ({
   ...props
 }) => {
   const Component2 = as;
-  const classNames3 = (0, import_system56.useClassNames)({ component: "List", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
+  const classNames3 = (0, import_system63.useClassNames)({ component: "List", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-var import_react_aria_components43 = require("react-aria-components");
-var import_system59 = require("@marigold/system");
+var import_react_aria_components47 = require("react-aria-components");
+var import_system66 = require("@marigold/system");
 
 // src/Menu/MenuItem.tsx
-var import_react_aria_components41 = require("react-aria-components");
-var import_system57 = require("@marigold/system");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_react_aria_components45 = require("react-aria-components");
+var import_system64 = require("@marigold/system");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var _MenuItem = ({ children, ...props }) => {
-  const classNames3 = (0, import_system57.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react_aria_components41.MenuItem, { ...props, className: classNames3.item, children });
+  const classNames3 = (0, import_system64.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react_aria_components45.MenuItem, { ...props, className: classNames3.item, children });
 };
 
 // src/Menu/MenuSection.tsx
-var import_react_aria_components42 = require("react-aria-components");
-var import_system58 = require("@marigold/system");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_react_aria_components46 = require("react-aria-components");
+var import_system65 = require("@marigold/system");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = (0, import_system58.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_react_aria_components42.MenuSection, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(_Header, { className: className.section, children: title }),
+  const className = (0, import_system65.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_react_aria_components46.MenuSection, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(_Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var _Menu = ({
   children,
   label,
@@ -3202,70 +3375,70 @@ var _Menu = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const classNames3 = (0, import_system59.useClassNames)({ component: "Menu", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_react_aria_components43.MenuTrigger, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react_aria_components43.Menu, { ...props, className: classNames3.container, children }) })
+  const classNames3 = (0, import_system66.useClassNames)({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_react_aria_components47.MenuTrigger, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react_aria_components47.Menu, { ...props, className: classNames3.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
 _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
-var import_react_aria_components44 = require("react-aria-components");
-var import_system60 = require("@marigold/system");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_react_aria_components48 = require("react-aria-components");
+var import_system67 = require("@marigold/system");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var ActionMenu = ({
   variant,
   size: size2,
   disabled,
   ...props
 }) => {
-  const classNames3 = (0, import_system60.useClassNames)({ component: "Menu", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_react_aria_components44.MenuTrigger, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_system60.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime72.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_runtime72.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_react_aria_components44.Menu, { ...props, className: classNames3.container, children: props.children }) })
+  const classNames3 = (0, import_system67.useClassNames)({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_react_aria_components48.MenuTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_system67.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react_aria_components48.Menu, { ...props, className: classNames3.container, children: props.children }) })
   ] });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-var import_react39 = require("react");
+var import_react42 = require("react");
 var import_button = require("@react-aria/button");
-var import_system63 = require("@marigold/system");
+var import_system70 = require("@marigold/system");
 
 // src/SectionMessage/Context.tsx
-var import_react38 = require("react");
-var SectionMessageContext = (0, import_react38.createContext)({});
-var useSectionMessageContext = () => (0, import_react38.useContext)(SectionMessageContext);
+var import_react41 = require("react");
+var SectionMessageContext = (0, import_react41.createContext)({});
+var useSectionMessageContext = () => (0, import_react41.useContext)(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
-var import_system61 = require("@marigold/system");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_system68 = require("@marigold/system");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: (0, import_system61.cn)("[grid-area:content]", classNames3.content), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_system68.cn)("[grid-area:content]", classNames3.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
-var import_system62 = require("@marigold/system");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_system69 = require("@marigold/system");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: (0, import_system62.cn)("[grid-area:title]", classNames3.title), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_system69.cn)("[grid-area:title]", classNames3.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var icons = {
-  success: () => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  success: () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3275,13 +3448,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  info: () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3291,13 +3464,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  warning: () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3307,13 +3480,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  error: () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3333,14 +3506,14 @@ var SectionMessage = ({
   onCloseChange,
   ...props
 }) => {
-  const buttonRef = (0, import_react39.useRef)(null);
-  const classNames3 = (0, import_system63.useClassNames)({
+  const buttonRef = (0, import_react42.useRef)(null);
+  const classNames3 = (0, import_system70.useClassNames)({
     component: "SectionMessage",
     variant,
     size: size2
   });
   const Icon4 = icons[variant];
-  const [internalVisible, setInternalVisible] = (0, import_react39.useState)(true);
+  const [internalVisible, setInternalVisible] = (0, import_react42.useState)(true);
   const isCurrentlyVisible = close != null ? close : internalVisible;
   const { buttonProps } = (0, import_button.useButton)(props, buttonRef);
   const handleClose = () => {
@@ -3350,30 +3523,22 @@ var SectionMessage = ({
     }
   };
   if (!isCurrentlyVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
     "div",
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
-      className: (0, import_system63.cn)("grid auto-rows-min", classNames3.container),
+      className: (0, import_system70.cn)("grid auto-rows-min", classNames3.container),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: (0, import_system63.cn)("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Icon4, {}) }),
-        closeButton && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-          "button",
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_system70.cn)("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon4, {}) }),
+        closeButton && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+          CloseButton,
           {
             ...buttonProps,
             ref: buttonRef,
             "aria-label": "close",
-            className: (0, import_system63.cn)("[grid-area:close]", classNames3.close),
-            onClick: handleClose,
-            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-              "path",
-              {
-                fillRule: "evenodd",
-                clipRule: "evenodd",
-                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"
-              }
-            ) })
+            className: (0, import_system70.cn)("[grid-area:close]", classNames3.close),
+            onPress: handleClose
           }
         ),
         children
@@ -3385,7 +3550,7 @@ SectionMessage.Title = SectionMessageTitle;
 SectionMessage.Content = SectionMessageContent;
 
 // src/Multiselect/Multiselect.tsx
-var import_react_aria_components45 = require("react-aria-components");
+var import_react_aria_components49 = require("react-aria-components");
 
 // ../../node_modules/.pnpm/@babel+runtime@7.27.0/node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -3525,33 +3690,33 @@ function _objectWithoutProperties(e, t) {
 }
 
 // ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/useStateManager-7e1e8489.esm.js
-var import_react40 = require("react");
+var import_react43 = 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_react40.useState)(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
-  var _useState3 = (0, import_react40.useState)(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
-  var _useState5 = (0, import_react40.useState)(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
-  var onChange2 = (0, import_react40.useCallback)(function(value2, actionMeta) {
+  var _useState = (0, import_react43.useState)(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
+  var _useState3 = (0, import_react43.useState)(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
+  var _useState5 = (0, import_react43.useState)(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
+  var onChange2 = (0, import_react43.useCallback)(function(value2, actionMeta) {
     if (typeof propsOnChange === "function") {
       propsOnChange(value2, actionMeta);
     }
     setStateValue(value2);
   }, [propsOnChange]);
-  var onInputChange = (0, import_react40.useCallback)(function(value2, actionMeta) {
+  var onInputChange = (0, import_react43.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_react40.useCallback)(function() {
+  var onMenuOpen = (0, import_react43.useCallback)(function() {
     if (typeof propsOnMenuOpen === "function") {
       propsOnMenuOpen();
     }
     setStateMenuIsOpen(true);
   }, [propsOnMenuOpen]);
-  var onMenuClose = (0, import_react40.useCallback)(function() {
+  var onMenuClose = (0, import_react43.useCallback)(function() {
     if (typeof propsOnMenuClose === "function") {
       propsOnMenuClose();
     }
@@ -3584,7 +3749,7 @@ function _extends() {
 
 // ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.0_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_react47 = require("react");
+var import_react50 = require("react");
 
 // ../../node_modules/.pnpm/@babel+runtime@7.27.0/node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(a, n) {
@@ -3692,11 +3857,11 @@ function _toConsumableArray(r) {
 
 // ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.0_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_react45 = require("react");
+var import_react48 = require("react");
 
 // ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.0_react@19.1.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 var React8 = __toESM(require("react"));
-var import_react41 = require("react");
+var import_react44 = require("react");
 
 // ../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
 var isDevelopment = false;
@@ -4884,15 +5049,15 @@ var EmotionCacheContext = /* @__PURE__ */ React8.createContext(
 );
 var CacheProvider = EmotionCacheContext.Provider;
 var withEmotionCache = function withEmotionCache2(func) {
-  return /* @__PURE__ */ (0, import_react41.forwardRef)(function(props, ref) {
-    var cache = (0, import_react41.useContext)(EmotionCacheContext);
+  return /* @__PURE__ */ (0, import_react44.forwardRef)(function(props, ref) {
+    var cache = (0, import_react44.useContext)(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
 if (!isBrowser4) {
   withEmotionCache = function withEmotionCache3(func) {
     return function(props) {
-      var cache = (0, import_react41.useContext)(EmotionCacheContext);
+      var cache = (0, import_react44.useContext)(EmotionCacheContext);
       if (cache === null) {
         cache = createCache({
           key: "css"
@@ -4976,7 +5141,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 jsx76 = function jsx77(type, props) {
+var jsx84 = function jsx85(type, props) {
   var args = arguments;
   if (props == null || !hasOwn.call(props, "css")) {
     return React9.createElement.apply(void 0, args);
@@ -4994,7 +5159,7 @@ var jsx76 = function jsx77(type, props) {
   var JSX;
   /* @__PURE__ */ (function(_JSX) {
   })(JSX || (JSX = _jsx.JSX || (_jsx.JSX = {})));
-})(jsx76 || (jsx76 = {}));
+})(jsx84 || (jsx84 = {}));
 function css() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -5024,7 +5189,7 @@ function _taggedTemplateLiteral(e, t) {
 }
 
 // ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/index-641ee5b8.esm.js
-var import_react44 = require("react");
+var import_react47 = 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
@@ -5425,9 +5590,9 @@ function autoUpdate(reference, floating, update, options2) {
 }
 
 // ../../node_modules/.pnpm/use-isomorphic-layout-effect@1.2.0_@types+react@19.1.0_react@19.1.0/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
-var import_react42 = require("react");
+var import_react45 = require("react");
 var isClient = typeof document !== "undefined";
-var index = isClient ? import_react42.useLayoutEffect : import_react42.useEffect;
+var index = isClient ? import_react45.useLayoutEffect : import_react45.useEffect;
 
 // ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.0_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"];
@@ -5761,13 +5926,13 @@ var menuCSS = function menuCSS2(_ref23, unstyled) {
     marginTop: spacing2.menuGutter
   });
 };
-var PortalPlacementContext = /* @__PURE__ */ (0, import_react44.createContext)(null);
+var PortalPlacementContext = /* @__PURE__ */ (0, import_react47.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_react44.useContext)(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
-  var ref = (0, import_react44.useRef)(null);
-  var _useState = (0, import_react44.useState)(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
-  var _useState3 = (0, import_react44.useState)(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
+  var _ref3 = (0, import_react47.useContext)(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
+  var ref = (0, import_react47.useRef)(null);
+  var _useState = (0, import_react47.useState)(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
+  var _useState3 = (0, import_react47.useState)(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
   var controlHeight2 = theme.spacing.controlHeight;
   index(function() {
     var menuEl = ref.current;
@@ -5797,7 +5962,7 @@ var MenuPlacer = function MenuPlacer2(props) {
 };
 var Menu3 = function Menu4(props) {
   var children = props.children, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx76("div", _extends({}, getStyleProps(props, "menu", {
+  return jsx84("div", _extends({}, getStyleProps(props, "menu", {
     menu: true
   }), {
     ref: innerRef
@@ -5819,7 +5984,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 jsx76("div", _extends({}, getStyleProps(props, "menuList", {
+  return jsx84("div", _extends({}, getStyleProps(props, "menuList", {
     "menu-list": true,
     "menu-list--is-multi": isMulti
   }), {
@@ -5839,7 +6004,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 jsx76("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx84("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "noOptionsMessage", {
@@ -5849,7 +6014,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 jsx76("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx84("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "loadingMessage", {
@@ -5869,16 +6034,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_react44.useRef)(null);
-  var cleanupRef = (0, import_react44.useRef)(null);
-  var _useState5 = (0, import_react44.useState)(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
-  var portalPlacementContext = (0, import_react44.useMemo)(function() {
+  var menuPortalRef = (0, import_react47.useRef)(null);
+  var cleanupRef = (0, import_react47.useRef)(null);
+  var _useState5 = (0, import_react47.useState)(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
+  var portalPlacementContext = (0, import_react47.useMemo)(function() {
     return {
       setPortalPlacement
     };
   }, []);
-  var _useState7 = (0, import_react44.useState)(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
-  var updateComputedPosition = (0, import_react44.useCallback)(function() {
+  var _useState7 = (0, import_react47.useState)(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
+  var updateComputedPosition = (0, import_react47.useCallback)(function() {
     if (!controlElement) return;
     var rect = getBoundingClientObj(controlElement);
     var scrollDistance = menuPosition === "fixed" ? 0 : window.pageYOffset;
@@ -5893,7 +6058,7 @@ var MenuPortal = function MenuPortal2(props) {
   index(function() {
     updateComputedPosition();
   }, [updateComputedPosition]);
-  var runAutoUpdate = (0, import_react44.useCallback)(function() {
+  var runAutoUpdate = (0, import_react47.useCallback)(function() {
     if (typeof cleanupRef.current === "function") {
       cleanupRef.current();
       cleanupRef.current = null;
@@ -5907,12 +6072,12 @@ var MenuPortal = function MenuPortal2(props) {
   index(function() {
     runAutoUpdate();
   }, [runAutoUpdate]);
-  var setMenuPortalElement = (0, import_react44.useCallback)(function(menuPortalElement) {
+  var setMenuPortalElement = (0, import_react47.useCallback)(function(menuPortalElement) {
     menuPortalRef.current = menuPortalElement;
     runAutoUpdate();
   }, [runAutoUpdate]);
   if (!appendTo && menuPosition !== "fixed" || !computedPosition) return null;
-  var menuWrapper = jsx76("div", _extends({
+  var menuWrapper = jsx84("div", _extends({
     ref: setMenuPortalElement
   }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
     offset: computedPosition.offset,
@@ -5921,7 +6086,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), "menuPortal", {
     "menu-portal": true
   }), innerProps), children);
-  return jsx76(PortalPlacementContext.Provider, {
+  return jsx84(PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /* @__PURE__ */ (0, import_react_dom.createPortal)(menuWrapper, appendTo) : menuWrapper);
 };
@@ -5937,7 +6102,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 jsx76("div", _extends({}, getStyleProps(props, "container", {
+  return jsx84("div", _extends({}, getStyleProps(props, "container", {
     "--is-disabled": isDisabled,
     "--is-rtl": isRtl
   }), innerProps), children);
@@ -5958,7 +6123,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 jsx76("div", _extends({}, getStyleProps(props, "valueContainer", {
+  return jsx84("div", _extends({}, getStyleProps(props, "valueContainer", {
     "value-container": true,
     "value-container--is-multi": isMulti,
     "value-container--has-value": hasValue
@@ -5974,7 +6139,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS2() {
 };
 var IndicatorsContainer = function IndicatorsContainer2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx76("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
+  return jsx84("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
     indicators: true
   }), innerProps), children);
 };
@@ -5995,7 +6160,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var Svg = function Svg2(_ref3) {
   var size2 = _ref3.size, props = _objectWithoutProperties(_ref3, _excluded$2);
-  return jsx76("svg", _extends({
+  return jsx84("svg", _extends({
     height: size2,
     width: size2,
     viewBox: "0 0 20 20",
@@ -6005,16 +6170,16 @@ var Svg = function Svg2(_ref3) {
   }, props));
 };
 var CrossIcon = function CrossIcon2(props) {
-  return jsx76(Svg, _extends({
+  return jsx84(Svg, _extends({
     size: 20
-  }, props), jsx76("path", {
+  }, props), jsx84("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 jsx76(Svg, _extends({
+  return jsx84(Svg, _extends({
     size: 20
-  }, props), jsx76("path", {
+  }, props), jsx84("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"
   }));
 };
@@ -6035,18 +6200,18 @@ var baseCSS = function baseCSS2(_ref3, unstyled) {
 var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx76("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
+  return jsx84("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
     indicator: true,
     "dropdown-indicator": true
-  }), innerProps), children || jsx76(DownChevron, null));
+  }), innerProps), children || jsx84(DownChevron, null));
 };
 var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx76("div", _extends({}, getStyleProps(props, "clearIndicator", {
+  return jsx84("div", _extends({}, getStyleProps(props, "clearIndicator", {
     indicator: true,
     "clear-indicator": true
-  }), innerProps), children || jsx76(CrossIcon, null));
+  }), innerProps), children || jsx84(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;
@@ -6062,7 +6227,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator2(props) {
   var innerProps = props.innerProps;
-  return jsx76("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
+  return jsx84("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
     "indicator-separator": true
   })));
 };
@@ -6086,7 +6251,7 @@ var loadingIndicatorCSS = function loadingIndicatorCSS2(_ref5, unstyled) {
 };
 var LoadingDot = function LoadingDot2(_ref6) {
   var delay = _ref6.delay, offset2 = _ref6.offset;
-  return jsx76("span", {
+  return jsx84("span", {
     css: /* @__PURE__ */ css({
       animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
       backgroundColor: "currentColor",
@@ -6101,20 +6266,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 jsx76("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx84("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     innerProps,
     isRtl,
     size: size2
   }), "loadingIndicator", {
     indicator: true,
     "loading-indicator": true
-  }), innerProps), jsx76(LoadingDot, {
+  }), innerProps), jsx84(LoadingDot, {
     delay: 0,
     offset: isRtl
-  }), jsx76(LoadingDot, {
+  }), jsx84(LoadingDot, {
     delay: 160,
     offset: true
-  }), jsx76(LoadingDot, {
+  }), jsx84(LoadingDot, {
     delay: 320,
     offset: !isRtl
   }));
@@ -6146,7 +6311,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 jsx76("div", _extends({
+  return jsx84("div", _extends({
     ref: innerRef
   }, getStyleProps(props, "control", {
     control: true,
@@ -6167,16 +6332,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, Heading4 = props.Heading, headingProps = props.headingProps, innerProps = props.innerProps, label = props.label, theme = props.theme, selectProps = props.selectProps;
-  return jsx76("div", _extends({}, getStyleProps(props, "group", {
+  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", {
     group: true
-  }), innerProps), jsx76(Heading4, _extends({}, headingProps, {
+  }), innerProps), jsx84(Heading5, _extends({}, headingProps, {
     selectProps,
     theme,
     getStyles,
     getClassNames: getClassNames2,
     cx
-  }), label), jsx76("div", null, children));
+  }), label), jsx84("div", null, children));
 };
 var groupHeadingCSS = function groupHeadingCSS2(_ref23, unstyled) {
   var _ref2$theme = _ref23.theme, colors2 = _ref2$theme.colors, spacing2 = _ref2$theme.spacing;
@@ -6198,7 +6363,7 @@ var GroupHeading = function GroupHeading2(props) {
   var _cleanCommonProps = cleanCommonProps(props);
   _cleanCommonProps.data;
   var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
-  return jsx76("div", _extends({}, getStyleProps(props, "groupHeading", {
+  return jsx84("div", _extends({}, getStyleProps(props, "groupHeading", {
     "group-heading": true
   }), innerProps));
 };
@@ -6250,11 +6415,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 jsx76("div", _extends({}, getStyleProps(props, "input", {
+  return jsx84("div", _extends({}, getStyleProps(props, "input", {
     "input-container": true
   }), {
     "data-value": value || ""
-  }), jsx76("input", _extends({
+  }), jsx84("input", _extends({
     className: cx({
       input: true
     }, inputClassName),
@@ -6308,35 +6473,35 @@ var multiValueRemoveCSS = function multiValueRemoveCSS2(_ref3, unstyled) {
 };
 var MultiValueGeneric = function MultiValueGeneric2(_ref4) {
   var children = _ref4.children, innerProps = _ref4.innerProps;
-  return jsx76("div", innerProps, children);
+  return jsx84("div", innerProps, children);
 };
 var MultiValueContainer = MultiValueGeneric;
 var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children, innerProps = _ref5.innerProps;
-  return jsx76("div", _extends({
+  return jsx84("div", _extends({
     role: "button"
-  }, innerProps), children || jsx76(CrossIcon, {
+  }, innerProps), children || jsx84(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 jsx76(Container2, {
+  return jsx84(Container2, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValue", {
       "multi-value": true,
       "multi-value--is-disabled": isDisabled
     })), innerProps),
     selectProps
-  }, jsx76(Label3, {
+  }, jsx84(Label3, {
     data,
     innerProps: _objectSpread2({}, getStyleProps(props, "multiValueLabel", {
       "multi-value__label": true
     })),
     selectProps
-  }, children), jsx76(Remove, {
+  }, children), jsx84(Remove, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValueRemove", {
       "multi-value__remove": true
@@ -6369,7 +6534,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 jsx76("div", _extends({}, getStyleProps(props, "option", {
+  return jsx84("div", _extends({}, getStyleProps(props, "option", {
     option: true,
     "option--is-disabled": isDisabled,
     "option--is-focused": isFocused,
@@ -6393,7 +6558,7 @@ var placeholderCSS = function placeholderCSS2(_ref3, unstyled) {
 };
 var Placeholder = function Placeholder2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx76("div", _extends({}, getStyleProps(props, "placeholder", {
+  return jsx84("div", _extends({}, getStyleProps(props, "placeholder", {
     placeholder: true
   }), innerProps), children);
 };
@@ -6415,7 +6580,7 @@ var css3 = function css4(_ref3, unstyled) {
 };
 var SingleValue = function SingleValue2(props) {
   var children = props.children, isDisabled = props.isDisabled, innerProps = props.innerProps;
-  return jsx76("div", _extends({}, getStyleProps(props, "singleValue", {
+  return jsx84("div", _extends({}, getStyleProps(props, "singleValue", {
     "single-value": true,
     "single-value--is-disabled": isDisabled
   }), innerProps), children);
@@ -6517,7 +6682,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 var A11yText = function A11yText2(props) {
-  return jsx76("span", _extends({
+  return jsx84("span", _extends({
     css: _ref
   }, props));
 };
@@ -6578,10 +6743,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_react45.useMemo)(function() {
+  var messages = (0, import_react48.useMemo)(function() {
     return _objectSpread2(_objectSpread2({}, defaultAriaLiveMessages), ariaLiveMessages || {});
   }, [ariaLiveMessages]);
-  var ariaSelected = (0, import_react45.useMemo)(function() {
+  var ariaSelected = (0, import_react48.useMemo)(function() {
     var message = "";
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option, selectedOptions = ariaSelection.options, removedValue = ariaSelection.removedValue, removedValues = ariaSelection.removedValues, value = ariaSelection.value;
@@ -6603,7 +6768,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return message;
   }, [ariaSelection, messages, isOptionDisabled3, selectValue, getOptionLabel4]);
-  var ariaFocused = (0, import_react45.useMemo)(function() {
+  var ariaFocused = (0, import_react48.useMemo)(function() {
     var focusMsg = "";
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
@@ -6622,7 +6787,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return focusMsg;
   }, [focusedOption, focusedValue, getOptionLabel4, isOptionDisabled3, messages, focusableOptions, selectValue, isAppleDevice2]);
-  var ariaResults = (0, import_react45.useMemo)(function() {
+  var ariaResults = (0, import_react48.useMemo)(function() {
     var resultsMsg = "";
     if (menuIsOpen && options2.length && !isLoading && messages.onFilter) {
       var resultsMessage = screenReaderStatus2({
@@ -6636,7 +6801,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_react45.useMemo)(function() {
+  var ariaGuidance = (0, import_react48.useMemo)(function() {
     var guidanceMsg = "";
     if (messages.guidance) {
       var context = focusedValue ? "value" : menuIsOpen ? "menu" : "input";
@@ -6652,18 +6817,18 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx76(import_react45.Fragment, null, jsx76("span", {
+  var ScreenReaderText = jsx84(import_react48.Fragment, null, jsx84("span", {
     id: "aria-selection"
-  }, ariaSelected), jsx76("span", {
+  }, ariaSelected), jsx84("span", {
     id: "aria-focused"
-  }, ariaFocused), jsx76("span", {
+  }, ariaFocused), jsx84("span", {
     id: "aria-results"
-  }, ariaResults), jsx76("span", {
+  }, ariaResults), jsx84("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx76(import_react45.Fragment, null, jsx76(A11yText$1, {
+  return jsx84(import_react48.Fragment, null, jsx84(A11yText$1, {
     id
-  }, isInitialFocus && ScreenReaderText), jsx76(A11yText$1, {
+  }, isInitialFocus && ScreenReaderText), jsx84(A11yText$1, {
     "aria-live": ariaLive,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
@@ -6976,7 +7141,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 jsx76("input", _extends({
+  return jsx84("input", _extends({
     ref: innerRef
   }, filteredProps, {
     css: /* @__PURE__ */ css({
@@ -7008,11 +7173,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_react45.useRef)(false);
-  var isTop = (0, import_react45.useRef)(false);
-  var touchStart = (0, import_react45.useRef)(0);
-  var scrollTarget = (0, import_react45.useRef)(null);
-  var handleEventDelta = (0, import_react45.useCallback)(function(event, delta) {
+  var isBottom = (0, import_react48.useRef)(false);
+  var isTop = (0, import_react48.useRef)(false);
+  var touchStart = (0, import_react48.useRef)(0);
+  var scrollTarget = (0, import_react48.useRef)(null);
+  var handleEventDelta = (0, import_react48.useCallback)(function(event, delta) {
     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;
@@ -7046,17 +7211,17 @@ function useScrollCapture(_ref3) {
       cancelScroll(event);
     }
   }, [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]);
-  var onWheel = (0, import_react45.useCallback)(function(event) {
+  var onWheel = (0, import_react48.useCallback)(function(event) {
     handleEventDelta(event, event.deltaY);
   }, [handleEventDelta]);
-  var onTouchStart = (0, import_react45.useCallback)(function(event) {
+  var onTouchStart = (0, import_react48.useCallback)(function(event) {
     touchStart.current = event.changedTouches[0].clientY;
   }, []);
-  var onTouchMove = (0, import_react45.useCallback)(function(event) {
+  var onTouchMove = (0, import_react48.useCallback)(function(event) {
     var deltaY = touchStart.current - event.changedTouches[0].clientY;
     handleEventDelta(event, deltaY);
   }, [handleEventDelta]);
-  var startListening = (0, import_react45.useCallback)(function(el) {
+  var startListening = (0, import_react48.useCallback)(function(el) {
     if (!el) return;
     var notPassive = supportsPassiveEvents ? {
       passive: false
@@ -7065,13 +7230,13 @@ function useScrollCapture(_ref3) {
     el.addEventListener("touchstart", onTouchStart, notPassive);
     el.addEventListener("touchmove", onTouchMove, notPassive);
   }, [onTouchMove, onTouchStart, onWheel]);
-  var stopListening = (0, import_react45.useCallback)(function(el) {
+  var stopListening = (0, import_react48.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_react45.useEffect)(function() {
+  (0, import_react48.useEffect)(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     startListening(element);
@@ -7118,9 +7283,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_react45.useRef)({});
-  var scrollTarget = (0, import_react45.useRef)(null);
-  var addScrollLock = (0, import_react45.useCallback)(function(touchScrollTarget) {
+  var originalStyles = (0, import_react48.useRef)({});
+  var scrollTarget = (0, import_react48.useRef)(null);
+  var addScrollLock = (0, import_react48.useCallback)(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -7153,7 +7318,7 @@ function useScrollLock(_ref3) {
     }
     activeScrollLocks += 1;
   }, [accountForScrollbars]);
-  var removeScrollLock = (0, import_react45.useCallback)(function(touchScrollTarget) {
+  var removeScrollLock = (0, import_react48.useCallback)(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -7174,7 +7339,7 @@ function useScrollLock(_ref3) {
       }
     }
   }, [accountForScrollbars]);
-  (0, import_react45.useEffect)(function() {
+  (0, import_react48.useEffect)(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     addScrollLock(element);
@@ -7218,7 +7383,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx76(import_react45.Fragment, null, lockEnabled && jsx76("div", {
+  return jsx84(import_react48.Fragment, null, lockEnabled && jsx84("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -7237,7 +7402,7 @@ var _ref22 = process.env.NODE_ENV === "production" ? {
 };
 var RequiredInput = function RequiredInput2(_ref3) {
   var name = _ref3.name, onFocus2 = _ref3.onFocus;
-  return jsx76("input", {
+  return jsx84("input", {
     required: true,
     name,
     tabIndex: -1,
@@ -8796,7 +8961,7 @@ var Select = /* @__PURE__ */ function(_Component) {
     }
   }]);
   return Select3;
-}(import_react45.Component);
+}(import_react48.Component);
 Select.defaultProps = defaultProps;
 
 // ../../node_modules/.pnpm/react-select@5.10.1_@types+react@19.1.0_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/react-select/dist/react-select.esm.js
@@ -8812,7 +8977,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_react47.forwardRef)(function(props, ref) {
+var StateManagedSelect = /* @__PURE__ */ (0, import_react50.forwardRef)(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React11.createElement(Select, _extends({
     ref
@@ -8820,7 +8985,7 @@ var StateManagedSelect = /* @__PURE__ */ (0, import_react47.forwardRef)(function
 });
 var StateManagedSelect$1 = StateManagedSelect;
 
-// ../../node_modules/.pnpm/@react-aria+label@3.7.16_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useLabel.mjs
+// ../../node_modules/.pnpm/@react-aria+label@3.7.17_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useLabel.mjs
 var import_utils6 = require("@react-aria/utils");
 function $d191a55c9702f145$export$8467354a121f1b9f(props) {
   let { id, label, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, labelElementType = "label" } = props;
@@ -8833,7 +8998,7 @@ function $d191a55c9702f145$export$8467354a121f1b9f(props) {
       id: labelId,
       htmlFor: labelElementType === "label" ? id : void 0
     };
-  } else if (!ariaLabelledby && !ariaLabel) console.warn("If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility");
+  } else if (!ariaLabelledby && !ariaLabel && process.env.NODE_ENV !== "production") console.warn("If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility");
   let fieldProps = (0, import_utils6.useLabels)({
     id,
     "aria-label": ariaLabel,
@@ -8845,7 +9010,7 @@ function $d191a55c9702f145$export$8467354a121f1b9f(props) {
   };
 }
 
-// ../../node_modules/.pnpm/@react-aria+label@3.7.16_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useField.mjs
+// ../../node_modules/.pnpm/@react-aria+label@3.7.17_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/@react-aria/label/dist/useField.mjs
 var import_utils7 = require("@react-aria/utils");
 function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
   let { description, errorMessage, isInvalid, validationState } = props;
@@ -8884,8 +9049,8 @@ function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
 
 // src/Multiselect/Multiselect.tsx
 var import_utils8 = require("@react-aria/utils");
-var import_system64 = require("@marigold/system");
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_system71 = require("@marigold/system");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var propsToBeRemoved = [
   "clearValue",
   "getStyles",
@@ -8911,8 +9076,8 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
     },
     {}
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-    import_react_aria_components45.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    import_react_aria_components49.Input,
     {
       disabled: props.isDisabled,
       ref: innerRef,
@@ -8922,20 +9087,20 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
   );
 };
 var MultiValueRemove2 = ({ innerProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_react_aria_components45.Button, { slot: "remove", ...innerProps, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_aria_components49.Button, { slot: "remove", ...innerProps, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var getClassNames = (classNames3) => ({
-  control: () => (0, import_system64.cn)(
+  control: () => (0, import_system71.cn)(
     "relative flex items-center box-border flex-wrap justify-between",
     classNames3.container
   ),
   container: () => "pointer-events-auto",
   indicatorSeparator: () => "hidden",
-  menu: () => (0, import_system64.cn)("b", classNames3.listContainer),
-  menuList: () => (0, import_system64.cn)("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
-  multiValue: () => (0, import_system64.cn)(classNames3.tag, "m-0 "),
+  menu: () => (0, import_system71.cn)("b", classNames3.listContainer),
+  menuList: () => (0, import_system71.cn)("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
+  multiValue: () => (0, import_system71.cn)(classNames3.tag, "m-0 "),
   multiValueLabel: () => "p-0",
-  option: ({ isFocused }) => (0, import_system64.cn)(classNames3.option, { isFocused }),
+  option: ({ isFocused }) => (0, import_system71.cn)(classNames3.option, { isFocused }),
   placeholder: () => "hidden",
   valueContainer: () => classNames3.valueContainer
 });
@@ -8956,7 +9121,7 @@ var Multiselect = ({
   onSelectionChange,
   ...rest
 }) => {
-  const classNames3 = (0, import_system64.useClassNames)({
+  const classNames3 = (0, import_system71.useClassNames)({
     component: "MultiSelect",
     size: size2,
     variant
@@ -8974,12 +9139,12 @@ var Multiselect = ({
     label: props.label,
     errorMessage
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-    import_react_aria_components45.Provider,
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    import_react_aria_components49.Provider,
     {
       values: [
         [
-          import_react_aria_components45.FieldErrorContext,
+          import_react_aria_components49.FieldErrorContext,
           {
             isInvalid: !!error,
             validationDetails: {},
@@ -8987,7 +9152,7 @@ var Multiselect = ({
           }
         ],
         [
-          import_react_aria_components45.InputContext,
+          import_react_aria_components49.InputContext,
           {
             ...fieldProps,
             placeholder,
@@ -8995,25 +9160,25 @@ var Multiselect = ({
           }
         ],
         [
-          import_react_aria_components45.ButtonContext,
+          import_react_aria_components49.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_system64.cn)("flex items-center", classNames3.closeButton)
+            className: (0, import_system71.cn)("flex items-center", classNames3.closeButton)
           }
         ]
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
         "div",
         {
-          className: (0, import_system64.cn)(classNames3.field, "group/field"),
+          className: (0, import_system71.cn)(classNames3.field, "group/field"),
           "data-required": props.required,
           "data-invalid": error,
           "data-readonly": readOnly,
           children: [
-            props.label && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(_Label, { ...labelProps, children: props.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+            props.label && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(_Label, { ...labelProps, children: props.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
               StateManagedSelect$1,
               {
                 ...props,
@@ -9047,19 +9212,19 @@ var Multiselect = ({
                 components: {
                   Input: Input4,
                   MultiValueRemove: MultiValueRemove2,
-                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
                     "button",
                     {
                       ...innerProps,
                       disabled: isDisabled,
                       className: classNames3.icon,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ChevronDown, { className: "size-4" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ChevronDown, { className: "size-4" })
                     }
                   )
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(HelpText, { description, errorMessage })
+            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(HelpText, { description, errorMessage })
           ]
         }
       )
@@ -9068,15 +9233,15 @@ var Multiselect = ({
 };
 
 // src/NumberField/NumberField.tsx
-var import_react48 = require("react");
-var import_react_aria_components47 = require("react-aria-components");
-var import_system66 = require("@marigold/system");
+var import_react51 = require("react");
+var import_react_aria_components51 = require("react-aria-components");
+var import_system73 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
-var import_react_aria_components46 = require("react-aria-components");
-var import_system65 = require("@marigold/system");
-var import_jsx_runtime77 = require("react/jsx-runtime");
-var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+var import_react_aria_components50 = require("react-aria-components");
+var import_system72 = require("@marigold/system");
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -9084,7 +9249,7 @@ var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime77.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_runtime77.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+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)(
   "path",
   {
     fillRule: "evenodd",
@@ -9094,10 +9259,10 @@ var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("svg", { width:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-    import_react_aria_components46.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    import_react_aria_components50.Button,
     {
-      className: (0, import_system65.cn)(
+      className: (0, import_system72.cn)(
         [
           "flex items-center justify-center",
           "cursor-pointer data-disabled:cursor-not-allowed"
@@ -9105,14 +9270,14 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon4, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
-var _NumberField = (0, import_react48.forwardRef)(
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var _NumberField = (0, import_react51.forwardRef)(
   ({
     variant,
     size: size2,
@@ -9123,7 +9288,7 @@ var _NumberField = (0, import_react48.forwardRef)(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system66.useClassNames)({
+    const classNames3 = (0, import_system73.useClassNames)({
       component: "NumberField",
       size: size2,
       variant
@@ -9136,15 +9301,15 @@ var _NumberField = (0, import_react48.forwardRef)(
       ...rest
     };
     const showStepper = !hideStepper && !readOnly;
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       FieldBase,
       {
-        as: import_react_aria_components47.NumberField,
+        as: import_react_aria_components51.NumberField,
         ...props,
         "data-readonly": readOnly ? "true" : void 0,
         "data-stepper": showStepper ? "true" : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_react_aria_components47.Group, { className: (0, import_system66.cn)("flex items-stretch", classNames3.group), children: [
-          showStepper && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_react_aria_components51.Group, { className: (0, import_system73.cn)("flex items-stretch", classNames3.group), children: [
+          showStepper && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -9152,14 +9317,14 @@ var _NumberField = (0, import_react48.forwardRef)(
               slot: "decrement"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
-            import_react_aria_components47.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            import_react_aria_components51.Input,
             {
               ref,
-              className: (0, import_system66.cn)("h-full flex-1 outline-none", classNames3.input)
+              className: (0, import_system73.cn)("h-full flex-1 outline-none", classNames3.input)
             }
           ),
-          showStepper && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          showStepper && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -9174,13 +9339,14 @@ var _NumberField = (0, import_react48.forwardRef)(
 );
 
 // src/Pagination/Pagination.tsx
-var import_react52 = require("react");
-var import_system69 = require("@marigold/system");
+var import_react54 = require("react");
+var import_focus2 = require("@react-aria/focus");
+var import_system76 = require("@marigold/system");
 
 // src/Pagination/Ellipsis.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var Ellipsis = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     "span",
     {
       className: "text-text-base flex h-8 w-8 items-center justify-center",
@@ -9191,13 +9357,13 @@ var Ellipsis = () => {
 };
 
 // src/Pagination/NavigationButton.tsx
-var import_react49 = __toESM(require("react"));
+var import_react52 = require("react");
 var import_button2 = require("@react-aria/button");
-var import_system67 = require("@marigold/system");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_system74 = require("@marigold/system");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var NavigationButton = (props) => {
-  const ref = import_react49.default.useRef(null);
-  const classNames3 = (0, import_system67.useClassNames)({
+  const ref = (0, import_react52.useRef)(null);
+  const classNames3 = (0, import_system74.useClassNames)({
     component: "Pagination"
   });
   let { buttonProps } = (0, import_button2.useButton)(props, ref);
@@ -9210,20 +9376,14 @@ var NavigationButton = (props) => {
     position: position2,
     ...rest
   } = props;
-  (0, import_react49.useEffect)(() => {
-    if (registerRef) {
-      registerRef(ref.current);
-      return () => registerRef(null);
-    }
-  }, [registerRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
     "button",
     {
       ref,
       ...buttonProps,
       ...rest,
       disabled: isDisabled,
-      className: (0, import_system67.cn)(classNames3.navigationButton, controlLabel && "w-24 px-2"),
+      className: (0, import_system74.cn)(classNames3.navigationButton, controlLabel && "w-24 px-2"),
       "data-selected": isSelected,
       children: [
         position2 === "left" && children,
@@ -9235,24 +9395,18 @@ var NavigationButton = (props) => {
 };
 
 // src/Pagination/PageButton.tsx
-var import_react50 = require("react");
+var import_react53 = require("react");
 var import_button3 = require("@react-aria/button");
-var import_system68 = require("@marigold/system");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_system75 = require("@marigold/system");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var PageButton = (props) => {
-  const ref = (0, import_react50.useRef)(null);
-  const classNames3 = (0, import_system68.useClassNames)({
+  const ref = (0, import_react53.useRef)(null);
+  const classNames3 = (0, import_system75.useClassNames)({
     component: "Pagination"
   });
   let { buttonProps } = (0, import_button3.useButton)(props, ref);
-  let { page, selected, registerRef, isDisabled } = props;
-  (0, import_react50.useEffect)(() => {
-    if (registerRef) {
-      registerRef(ref.current);
-      return () => registerRef(null);
-    }
-  }, [registerRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  let { page, selected, isDisabled } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     "button",
     {
       ref,
@@ -9268,122 +9422,6 @@ var PageButton = (props) => {
   );
 };
 
-// src/Pagination/useKeyboardNavigation.tsx
-var import_react51 = require("react");
-var import_interactions2 = require("@react-aria/interactions");
-var NavigationTypes = {
-  Prev: "prev",
-  Next: "next",
-  Page: "page",
-  Ellipsis: "ellipsis"
-};
-var useKeyboardNavigation = ({
-  page,
-  totalPages,
-  onChange: onChange2 = () => {
-  }
-}) => {
-  const containerRef = (0, import_react51.useRef)(null);
-  const [focusedItem, setFocusedItem] = (0, import_react51.useState)({
-    type: "page",
-    value: page
-  });
-  const navigationItems = (0, import_react51.useRef)([]);
-  const buttonRefs = (0, import_react51.useRef)(/* @__PURE__ */ new Map());
-  const isItemDisabled = (0, import_react51.useCallback)(
-    (item) => {
-      if (item.type === NavigationTypes.Prev) return page <= 1;
-      if (item.type === NavigationTypes.Next) return page >= totalPages;
-      return item.type === NavigationTypes.Ellipsis;
-    },
-    [page, totalPages]
-  );
-  const findNextFocusableItem = (0, import_react51.useCallback)(
-    (current, direction) => {
-      const items = navigationItems.current.filter(
-        (item) => !isItemDisabled(item)
-      );
-      const currentIndex = items.findIndex(
-        (item) => item.type === current.type && item.value === current.value
-      );
-      if (currentIndex === -1) {
-        return items[0] || { type: NavigationTypes.Page, value: page };
-      }
-      const nextIndex = direction === "next" ? (currentIndex + 1) % items.length : (currentIndex - 1 + items.length) % items.length;
-      return items[nextIndex];
-    },
-    [isItemDisabled, page]
-  );
-  const focusItem = (0, import_react51.useCallback)(
-    (item) => {
-      if (isItemDisabled(item)) return;
-      const key = `${item.type}-${item.value}`;
-      const element = buttonRefs.current.get(key);
-      if (element && typeof element.focus === "function") {
-        element.focus();
-        setFocusedItem(item);
-      }
-    },
-    [isItemDisabled]
-  );
-  const { keyboardProps } = (0, import_interactions2.useKeyboard)({
-    onKeyDown: (e) => {
-      let newFocusedItem = focusedItem;
-      switch (e.key) {
-        case "ArrowLeft":
-          newFocusedItem = findNextFocusableItem(focusedItem, "prev");
-          break;
-        case "ArrowRight":
-          newFocusedItem = findNextFocusableItem(focusedItem, "next");
-          break;
-        case "Home":
-          newFocusedItem = navigationItems.current.find((item) => !isItemDisabled(item)) || focusedItem;
-          break;
-        case "End":
-          newFocusedItem = [...navigationItems.current].reverse().find((item) => !isItemDisabled(item)) || focusedItem;
-          break;
-        case "Enter":
-        case " ":
-          if (isItemDisabled(focusedItem)) return;
-          if (focusedItem.type === NavigationTypes.Page && typeof focusedItem.value === "number") {
-            onChange2(focusedItem.value);
-          } else if (focusedItem.type === NavigationTypes.Prev && page > 1) {
-            onChange2(page - 1);
-          } else if (focusedItem.type === NavigationTypes.Next && page < totalPages) {
-            onChange2(page + 1);
-          }
-          break;
-        default:
-          return;
-      }
-      if (newFocusedItem !== focusedItem) {
-        focusItem(newFocusedItem);
-      }
-    }
-  });
-  const registerRef = (0, import_react51.useCallback)(
-    (type, value, ref) => {
-      const key = `${type}-${value}`;
-      if (ref) {
-        buttonRefs.current.set(key, ref);
-      } else {
-        buttonRefs.current.delete(key);
-      }
-    },
-    []
-  );
-  const setNavigationItems = (0, import_react51.useCallback)((items) => {
-    navigationItems.current = items;
-  }, []);
-  return {
-    containerRef,
-    keyboardProps,
-    registerRef,
-    setNavigationItems,
-    setFocusedItem
-  };
-};
-
 // src/Pagination/usePageRange.tsx
 var usePageRange = ({ currentPage, totalPages }) => {
   const getPageRange = () => {
@@ -9415,23 +9453,21 @@ var usePageRange = ({ currentPage, totalPages }) => {
 };
 
 // src/Pagination/Pagination.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var _Pagination = ({
-  defaultPage = 1,
-  page,
-  totalItems,
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var InnerPagination = ({
+  currentPage,
   pageSize,
-  onChange: onChange2 = () => {
-  },
+  totalPages,
+  pageRange,
+  setCurrentPage,
+  onChange: onChange2,
   controlLabels
 }) => {
-  const [currentPage, setCurrentPage] = (0, import_react52.useState)(page != null ? page : defaultPage);
-  const totalPages = Math.ceil(totalItems / pageSize);
-  const isFirstRender = (0, import_react52.useRef)(true);
-  const classNames3 = (0, import_system69.useClassNames)({
-    component: "Pagination"
-  });
-  (0, import_react52.useEffect)(() => {
+  const focusManager = (0, import_focus2.useFocusManager)();
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages || totalPages === 0;
+  const isFirstRender = (0, import_react54.useRef)(true);
+  (0, import_react54.useEffect)(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
@@ -9440,94 +9476,108 @@ var _Pagination = ({
   }, [pageSize]);
   const handlePageChange = (newPage) => {
     setCurrentPage(newPage);
-    onChange2(newPage);
+    if (onChange2) {
+      onChange2(newPage);
+    }
   };
-  const { registerRef, keyboardProps, setNavigationItems, setFocusedItem } = useKeyboardNavigation({
-    page: currentPage,
-    totalPages,
-    onChange: handlePageChange
-  });
+  const classNames3 = (0, import_system76.useClassNames)({ component: "Pagination" });
+  const handleKeyDown = (onEnter) => (e) => {
+    if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focusManager == null ? void 0 : focusManager.focusNext({ wrap: true });
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focusManager == null ? void 0 : focusManager.focusPrevious({ wrap: true });
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onEnter();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      NavigationButton,
+      {
+        onClick: () => handlePageChange(Math.max(1, currentPage - 1)),
+        "aria-label": "Page previous",
+        isDisabled: isFirstPage,
+        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 })
+      }
+    ),
+    /* @__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)(
+        PageButton,
+        {
+          page: pageNumber,
+          selected: pageNumber === currentPage,
+          onClick: () => handlePageChange(pageNumber),
+          onKeyDown: handleKeyDown(() => handlePageChange(pageNumber))
+        },
+        pageNumber
+      )
+    ) : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PageButton, { page: 1, isDisabled: true }, 1) }),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      NavigationButton,
+      {
+        onClick: () => handlePageChange(Math.min(totalPages, currentPage + 1)),
+        "aria-label": "Page next",
+        isDisabled: isLastPage,
+        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 })
+      }
+    )
+  ] });
+};
+var _Pagination = ({
+  defaultPage = 1,
+  page,
+  totalItems,
+  pageSize,
+  ...props
+}) => {
+  const [currentPage, setCurrentPage] = (0, import_react54.useState)(page != null ? page : defaultPage);
+  const totalPages = Math.ceil(totalItems / pageSize);
   const pageRange = usePageRange({ currentPage, totalPages });
-  (0, import_react52.useEffect)(() => {
-    const items = [
-      { type: NavigationTypes.Prev, value: currentPage - 1 },
-      ...pageRange.map((value) => ({
-        type: typeof value === "number" ? NavigationTypes.Page : NavigationTypes.Ellipsis,
-        value
-      })),
-      { type: NavigationTypes.Next, value: currentPage + 1 }
-    ];
-    setNavigationItems(items);
-  }, [pageRange, currentPage, setNavigationItems]);
-  (0, import_react52.useEffect)(() => {
-    setFocusedItem({ type: NavigationTypes.Page, value: currentPage });
-  }, [currentPage, setFocusedItem]);
-  const isFirstPage = currentPage === 1;
-  const isLastPage = currentPage === totalPages || totalPages === 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
     "nav",
     {
       className: "flex items-center justify-center space-x-2",
       "aria-label": `Page ${currentPage} of ${totalPages}`,
-      ...keyboardProps,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-          NavigationButton,
-          {
-            onClick: () => handlePageChange(Math.max(1, currentPage - 1)),
-            "aria-label": "Page previous",
-            isDisabled: isFirstPage,
-            registerRef: (ref) => registerRef(NavigationTypes.Prev, currentPage - 1, ref),
-            controlLabel: controlLabels == null ? void 0 : controlLabels[0],
-            position: "left",
-            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ChevronLeft, { className: (0, import_system69.cn)(classNames3.icon) })
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
-          (pageNumber, index2) => pageNumber === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Ellipsis, {}, `ellipsis-${index2}`) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-            PageButton,
-            {
-              page: pageNumber,
-              selected: pageNumber === currentPage,
-              onClick: () => handlePageChange(pageNumber),
-              registerRef: (ref) => registerRef(NavigationTypes.Page, pageNumber, ref)
-            },
-            pageNumber
-          )
-        ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(PageButton, { page: 1, isDisabled: true }, 1) }),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
-          NavigationButton,
-          {
-            onClick: () => handlePageChange(Math.min(totalPages, currentPage + 1)),
-            "aria-label": "Page next",
-            isDisabled: isLastPage,
-            registerRef: (ref) => registerRef(NavigationTypes.Next, currentPage + 1, ref),
-            controlLabel: controlLabels == null ? void 0 : controlLabels[1],
-            position: "right",
-            children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ChevronRight, { className: (0, import_system69.cn)(classNames3.icon) })
-          }
-        )
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_focus2.FocusScope, { restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        InnerPagination,
+        {
+          pageSize,
+          currentPage,
+          totalPages,
+          pageRange,
+          setCurrentPage,
+          ...props
+        }
+      ) })
     }
   );
 };
 
 // src/Radio/Radio.tsx
-var import_react54 = require("react");
-var import_react_aria_components49 = require("react-aria-components");
-var import_system71 = require("@marigold/system");
+var import_react56 = require("react");
+var import_react_aria_components53 = require("react-aria-components");
+var import_system78 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react53 = require("react");
-var RadioGroupContext = (0, import_react53.createContext)(
+var import_react55 = require("react");
+var RadioGroupContext = (0, import_react55.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react53.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react55.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_react_aria_components48 = require("react-aria-components");
-var import_system70 = require("@marigold/system");
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_react_aria_components52 = require("react-aria-components");
+var import_system77 = require("@marigold/system");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var _RadioGroup = ({
   variant,
   size: size2,
@@ -9543,7 +9593,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames3 = (0, import_system70.useClassNames)({ component: "Radio", variant, size: size2 });
+  const classNames3 = (0, import_system77.useClassNames)({ component: "Radio", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -9551,10 +9601,10 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     FieldBase,
     {
-      as: import_react_aria_components48.RadioGroup,
+      as: import_react_aria_components52.RadioGroup,
       width,
       label,
       description,
@@ -9562,18 +9612,18 @@ var _RadioGroup = ({
       variant,
       size: size2,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system70.cn)(
+          className: (0, import_system77.cn)(
             classNames3.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(RadioGroupContext.Provider, { value: { width, variant, size: size2 }, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(RadioGroupContext.Provider, { value: { width, variant, size: size2 }, children })
         }
       )
     }
@@ -9581,33 +9631,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+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)(
   "div",
   {
-    className: (0, import_system71.cn)(
+    className: (0, import_system78.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_runtime84.jsx)(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dot, {}) : null
   }
 );
-var _Radio = (0, import_react54.forwardRef)(
+var _Radio = (0, import_react56.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size: size2, width: groupWidth } = useRadioGroupContext();
-    const classNames3 = (0, import_system71.useClassNames)({
+    const classNames3 = (0, import_system78.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size2 || props.size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
-      import_react_aria_components49.Radio,
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      import_react_aria_components53.Radio,
       {
         ref,
-        className: (0, import_system71.cn)(
+        className: (0, import_system78.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -9616,18 +9666,18 @@ var _Radio = (0, import_react54.forwardRef)(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
             Icon3,
             {
               checked: isSelected,
-              className: (0, import_system71.cn)(
+              className: (0, import_system78.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames3.radio
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: classNames3.label, children })
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: classNames3.label, children })
         ] })
       }
     );
@@ -9636,10 +9686,10 @@ var _Radio = (0, import_react54.forwardRef)(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-var import_react55 = require("react");
-var import_react_aria_components50 = require("react-aria-components");
-var import_jsx_runtime85 = require("react/jsx-runtime");
-var _SearchField = (0, import_react55.forwardRef)(
+var import_react57 = require("react");
+var import_react_aria_components54 = require("react-aria-components");
+var import_jsx_runtime93 = require("react/jsx-runtime");
+var _SearchField = (0, import_react57.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -9648,7 +9698,7 @@ var _SearchField = (0, import_react55.forwardRef)(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(FieldBase, { as: import_react_aria_components50.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(FieldBase, { as: import_react_aria_components54.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       SearchInput,
       {
         ref,
@@ -9659,11 +9709,11 @@ var _SearchField = (0, import_react55.forwardRef)(
 );
 
 // src/Select/Select.tsx
-var import_react56 = require("react");
-var import_react_aria_components51 = require("react-aria-components");
-var import_system72 = require("@marigold/system");
-var import_jsx_runtime86 = require("react/jsx-runtime");
-var _Select = (0, import_react56.forwardRef)(
+var import_react58 = require("react");
+var import_react_aria_components55 = require("react-aria-components");
+var import_system79 = require("@marigold/system");
+var import_jsx_runtime94 = require("react/jsx-runtime");
+var _Select = (0, import_react58.forwardRef)(
   ({
     disabled,
     required,
@@ -9683,22 +9733,22 @@ var _Select = (0, import_react56.forwardRef)(
       onSelectionChange: onChange2,
       ...rest
     };
-    const classNames3 = (0, import_system72.useClassNames)({ component: "Select", variant, size: size2 });
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(FieldBase, { as: import_react_aria_components51.Select, ref, variant, size: size2, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+    const classNames3 = (0, import_system79.useClassNames)({ component: "Select", variant, size: size2 });
+    return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(FieldBase, { as: import_react_aria_components55.Select, ref, variant, size: size2, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
         IconButton,
         {
-          className: (0, import_system72.cn)(
+          className: (0, import_system79.cn)(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames3.select
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_aria_components51.SelectValue, { className: "[&>[slot=description]]:hidden" }),
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ChevronDown, { className: (0, import_system72.cn)("size-4", classNames3.icon) })
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria_components55.SelectValue, { className: "[&>[slot=description]]:hidden" }),
+            /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ChevronDown, { className: (0, import_system79.cn)("size-4", classNames3.icon) })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -9706,35 +9756,35 @@ _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
-var import_react59 = require("react");
-var import_react_aria_components53 = require("react-aria-components");
-var import_system74 = require("@marigold/system");
+var import_react61 = require("react");
+var import_react_aria_components57 = require("react-aria-components");
+var import_system81 = require("@marigold/system");
 
 // src/SelectList/Context.ts
-var import_react57 = require("react");
-var SelectListContext = (0, import_react57.createContext)(
+var import_react59 = require("react");
+var SelectListContext = (0, import_react59.createContext)(
   {}
 );
-var useSelectListContext = () => (0, import_react57.useContext)(SelectListContext);
+var useSelectListContext = () => (0, import_react59.useContext)(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
-var import_react58 = require("react");
-var import_react_aria_components52 = require("react-aria-components");
-var import_system73 = require("@marigold/system");
-var import_jsx_runtime87 = require("react/jsx-runtime");
-var _SelectListItem = (0, import_react58.forwardRef)(
+var import_react60 = require("react");
+var import_react_aria_components56 = require("react-aria-components");
+var import_system80 = require("@marigold/system");
+var import_jsx_runtime95 = require("react/jsx-runtime");
+var _SelectListItem = (0, import_react60.forwardRef)(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames3 } = useSelectListContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-      import_react_aria_components52.GridListItem,
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+      import_react_aria_components56.GridListItem,
       {
         textValue,
         ...props,
-        className: (0, import_system73.cn)("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.option),
+        className: (0, import_system80.cn)("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.option),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex gap-2", children: [
-          selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(_Checkbox, { slot: "selection" }),
+        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { className: "flex gap-2", children: [
+          selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(_Checkbox, { slot: "selection" }),
           children
         ] })
       }
@@ -9743,21 +9793,21 @@ var _SelectListItem = (0, import_react58.forwardRef)(
 );
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
-var _SelectList = (0, import_react59.forwardRef)(
+var import_jsx_runtime96 = require("react/jsx-runtime");
+var _SelectList = (0, import_react61.forwardRef)(
   ({ onChange: onChange2, ...rest }, ref) => {
-    const classNames3 = (0, import_system74.useClassNames)({ component: "ListBox" });
+    const classNames3 = (0, import_system81.useClassNames)({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange2,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(SelectListContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: classNames3.container, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-      import_react_aria_components53.GridList,
+    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(SelectListContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: classNames3.container, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+      import_react_aria_components57.GridList,
       {
         ...props,
         layout: "grid",
         ref,
-        className: (0, import_system74.cn)(
+        className: (0, import_system81.cn)(
           "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames3.list
         ),
@@ -9769,29 +9819,29 @@ var _SelectList = (0, import_react59.forwardRef)(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-var import_system75 = require("@marigold/system");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_system82 = require("@marigold/system");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
   "div",
   {
     ...props,
-    className: (0, import_system75.cn)(["sticky h-(--height) overflow-auto", import_system75.width[width]]),
-    style: (0, import_system75.createVar)({ height }),
+    className: (0, import_system82.cn)(["sticky h-(--height) overflow-auto", import_system82.width[width]]),
+    style: (0, import_system82.createVar)({ height }),
     children
   }
 );
 
 // src/Slider/Slider.tsx
-var import_react60 = require("react");
-var import_react_aria_components54 = require("react-aria-components");
-var import_system76 = require("@marigold/system");
-var import_jsx_runtime90 = require("react/jsx-runtime");
-var _Slider = (0, import_react60.forwardRef)(
+var import_react62 = require("react");
+var import_react_aria_components58 = require("react-aria-components");
+var import_system83 = require("@marigold/system");
+var import_jsx_runtime98 = require("react/jsx-runtime");
+var _Slider = (0, import_react62.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -9801,7 +9851,7 @@ var _Slider = (0, import_react60.forwardRef)(
     label,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system76.useClassNames)({
+    const classNames3 = (0, import_system83.useClassNames)({
       component: "Slider",
       variant,
       size: size2
@@ -9810,38 +9860,38 @@ var _Slider = (0, import_react60.forwardRef)(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
       FieldBase,
       {
-        as: import_react_aria_components54.Slider,
-        className: (0, import_system76.cn)(
+        as: import_react_aria_components58.Slider,
+        className: (0, import_system83.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames3.container,
-          import_system76.width[width]
+          import_system83.width[width]
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(_Label, { children: props.children && props.children || label && label }),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react_aria_components54.SliderOutput, { className: (0, import_system76.cn)("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-            import_react_aria_components54.SliderTrack,
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(_Label, { children: props.children && props.children || label && label }),
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react_aria_components58.SliderOutput, { className: (0, import_system83.cn)("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+            import_react_aria_components58.SliderTrack,
             {
-              className: (0, import_system76.cn)("relative col-span-2 h-2 w-full", classNames3.track),
-              children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+              className: (0, import_system83.cn)("relative col-span-2 h-2 w-full", classNames3.track),
+              children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_jsx_runtime98.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
                   "div",
                   {
-                    className: (0, import_system76.cn)(
+                    className: (0, import_system83.cn)(
                       "absolute top-[50%] h-2 w-full translate-y-[-50%]",
                       classNames3.track
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
                   "div",
                   {
-                    className: (0, import_system76.cn)(
+                    className: (0, import_system83.cn)(
                       "absolute top-[50%] h-2 translate-y-[-50%]",
                       classNames3.selectedTrack
                     ),
@@ -9851,10 +9901,10 @@ var _Slider = (0, import_react60.forwardRef)(
                     }
                   }
                 ),
-                state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-                  import_react_aria_components54.SliderThumb,
+                state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+                  import_react_aria_components58.SliderThumb,
                   {
-                    className: (0, import_system76.cn)("top-1/2 cursor-pointer", classNames3.thumb),
+                    className: (0, import_system83.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]
@@ -9871,12 +9921,12 @@ var _Slider = (0, import_react60.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
-var Split = () => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { role: "separator", className: "grow" });
+var import_jsx_runtime99 = require("react/jsx-runtime");
+var Split = () => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_system77 = require("@marigold/system");
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_system84 = require("@marigold/system");
+var import_jsx_runtime100 = require("react/jsx-runtime");
 var Stack = ({
   children,
   space = 0,
@@ -9886,14 +9936,14 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
     "div",
     {
-      className: (0, import_system77.cn)(
+      className: (0, import_system84.cn)(
         "flex flex-col",
-        import_system77.gapSpace[space],
-        alignX && ((_b = (_a = import_system77.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system77.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system84.gapSpace[space],
+        alignX && ((_b = (_a = import_system84.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system84.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -9903,42 +9953,42 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react61 = require("react");
-var import_react_aria_components55 = require("react-aria-components");
-var import_system78 = require("@marigold/system");
-var import_jsx_runtime93 = require("react/jsx-runtime");
-var _Switch = (0, import_react61.forwardRef)(
+var import_react63 = require("react");
+var import_react_aria_components59 = require("react-aria-components");
+var import_system85 = require("@marigold/system");
+var import_jsx_runtime101 = require("react/jsx-runtime");
+var _Switch = (0, import_react63.forwardRef)(
   ({
     variant,
     size: size2,
     width = "full",
-    children,
+    label,
     selected,
     disabled,
     readOnly,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system78.useClassNames)({ component: "Switch", size: size2, variant });
+    const classNames3 = (0, import_system85.useClassNames)({ component: "Switch", size: size2, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
-      import_react_aria_components55.Switch,
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
+      import_react_aria_components59.Switch,
       {
         ...props,
         ref,
-        className: (0, import_system78.cn)(
-          import_system78.width[width],
+        className: (0, import_system85.cn)(
+          import_system85.width[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames3.container
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: classNames3.track, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: classNames3.thumb }) }) })
+          (props.children || label) && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(_Label, { elementType: "span", children: props.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 }) }) })
         ]
       }
     );
@@ -9946,19 +9996,19 @@ var _Switch = (0, import_react61.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react69 = require("react");
+var import_react71 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system85 = require("@marigold/system");
+var import_system92 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react62 = require("react");
-var TableContext = (0, import_react62.createContext)({});
-var useTableContext = () => (0, import_react62.useContext)(TableContext);
+var import_react64 = require("react");
+var TableContext = (0, import_react64.createContext)({});
+var useTableContext = () => (0, import_react64.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime102 = require("react/jsx-runtime");
 var TableBody = ({
   children,
   className,
@@ -9967,7 +10017,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_runtime94.jsx)("tbody", { className, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+    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)(
       "td",
       {
         className: classNames3 == null ? void 0 : classNames3.cell,
@@ -9977,18 +10027,18 @@ var TableBody = ({
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("tbody", { ...rowGroupProps, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("tbody", { ...rowGroupProps, className, children });
 };
 
 // src/Table/TableCell.tsx
-var import_react63 = require("react");
-var import_focus2 = require("@react-aria/focus");
+var import_react65 = 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_system79 = require("@marigold/system");
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_system86 = require("@marigold/system");
+var import_jsx_runtime103 = require("react/jsx-runtime");
 var TableCell = ({ cell, align = "left" }) => {
-  const ref = (0, import_react63.useRef)(null);
+  const ref = (0, import_react65.useRef)(null);
   const { interactive, state, classNames: classNames3 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -10007,13 +10057,13 @@ var TableCell = ({ cell, align = "left" }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = (0, import_focus2.useFocusRing)();
-  const stateProps = (0, import_system79.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
+  const stateProps = (0, import_system86.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system79.cn)(classNames3 == null ? void 0 : classNames3.cell),
+      className: (0, import_system86.cn)(classNames3 == null ? void 0 : classNames3.cell),
       ...(0, import_utils9.mergeProps)(cellProps, focusProps),
       ...stateProps,
       align,
@@ -10023,11 +10073,11 @@ var TableCell = ({ cell, align = "left" }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react64 = require("react");
-var import_focus3 = require("@react-aria/focus");
+var import_react66 = 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_system80 = require("@marigold/system");
+var import_system87 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -10050,9 +10100,9 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_jsx_runtime104 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react64.useRef)(null);
+  const ref = (0, import_react66.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -10065,35 +10115,35 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
-  const stateProps = (0, import_system80.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
+  const stateProps = (0, import_system87.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system80.cn)("text-center align-middle leading-none", classNames3 == null ? void 0 : classNames3.cell),
+      className: (0, import_system87.cn)("text-center align-middle leading-none", classNames3 == null ? void 0 : classNames3.cell),
       ...(0, import_utils10.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react65 = require("react");
-var import_focus4 = require("@react-aria/focus");
-var import_interactions3 = require("@react-aria/interactions");
+var import_react67 = 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_system81 = require("@marigold/system");
-var import_jsx_runtime97 = require("react/jsx-runtime");
+var import_system88 = require("@marigold/system");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column: column2,
   width = "auto",
   align = "left"
 }) => {
   var _a, _b;
-  const ref = (0, import_react65.useRef)(null);
+  const ref = (0, import_react67.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -10102,24 +10152,24 @@ var TableColumnHeader = ({
     state,
     ref
   );
-  const { hoverProps, isHovered } = (0, import_interactions3.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
-  const stateProps = (0, import_system81.useStateProps)({
+  const { hoverProps, isHovered } = (0, import_interactions2.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus5.useFocusRing)();
+  const stateProps = (0, import_system88.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
     "th",
     {
       colSpan: column2.colspan,
       ref,
-      className: (0, import_system81.cn)("cursor-default", import_system81.width[width], classNames3 == null ? void 0 : classNames3.header),
+      className: (0, import_system88.cn)("cursor-default", import_system88.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_runtime97.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime97.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_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" }) }))
       ]
     }
   );
@@ -10127,16 +10177,16 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_system82 = require("@marigold/system");
-var import_jsx_runtime98 = require("react/jsx-runtime");
+var import_system89 = require("@marigold/system");
+var import_jsx_runtime106 = require("react/jsx-runtime");
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
   const { classNames: classNames3 } = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
     "thead",
     {
       ...rowGroupProps,
-      className: (0, import_system82.cn)(
+      className: (0, import_system89.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
@@ -10148,33 +10198,33 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react66 = require("react");
+var import_react68 = require("react");
 var import_table6 = require("@react-aria/table");
-var import_jsx_runtime99 = require("react/jsx-runtime");
+var import_jsx_runtime107 = require("react/jsx-runtime");
 var TableHeaderRow = ({
   item,
   className,
   children
 }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react66.useRef)(null);
+  const ref = (0, import_react68.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("tr", { ...rowProps, className, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tr", { ...rowProps, className, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react67 = require("react");
-var import_focus5 = require("@react-aria/focus");
-var import_interactions4 = require("@react-aria/interactions");
+var import_react69 = 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_system83 = require("@marigold/system");
-var import_jsx_runtime100 = require("react/jsx-runtime");
+var import_system90 = require("@marigold/system");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react67.useRef)(null);
+  const ref = (0, import_react69.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size: size2 } = row.props;
-  const classNames3 = (0, import_system83.useClassNames)({
+  const classNames3 = (0, import_system90.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size2 || ctx.size
@@ -10188,22 +10238,22 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = (0, import_focus5.useFocusRing)();
-  const { hoverProps, isHovered } = (0, import_interactions4.useHover)({
+  const { focusProps, isFocusVisible } = (0, import_focus6.useFocusRing)();
+  const { hoverProps, isHovered } = (0, import_interactions3.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system83.useStateProps)({
+  const stateProps = (0, import_system90.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
     "tr",
     {
       ref,
-      className: (0, import_system83.cn)(
+      className: (0, import_system90.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -10217,19 +10267,19 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react68 = require("react");
-var import_focus6 = require("@react-aria/focus");
-var import_interactions5 = require("@react-aria/interactions");
+var import_react70 = 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_system84 = require("@marigold/system");
-var import_jsx_runtime101 = require("react/jsx-runtime");
+var import_system91 = require("@marigold/system");
+var import_jsx_runtime109 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column: column2,
   width = "auto",
   align = "left"
 }) => {
-  const ref = (0, import_react68.useRef)(null);
+  const ref = (0, import_react70.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -10239,27 +10289,27 @@ var TableSelectAllCell = ({
     ref
   );
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
-  const { hoverProps, isHovered } = (0, import_interactions5.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus6.useFocusRing)();
-  const stateProps = (0, import_system84.useStateProps)({
+  const { hoverProps, isHovered } = (0, import_interactions4.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus7.useFocusRing)();
+  const stateProps = (0, import_system91.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
     "th",
     {
       ref,
-      className: (0, import_system84.cn)(import_system84.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
+      className: (0, import_system91.cn)(import_system91.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
       ...(0, import_utils14.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_jsx_runtime110 = require("react/jsx-runtime");
 var Table = ({
   variant,
   size: size2,
@@ -10271,7 +10321,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react69.useRef)(null);
+  const tableRef = (0, import_react71.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -10282,21 +10332,21 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames3 = (0, import_system85.useClassNames)({
+  const classNames3 = (0, import_system92.useClassNames)({
     component: "Table",
     variant,
     size: size2
   });
   const { collection } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames3, variant, size: size2 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
         "table",
         {
           ref: tableRef,
-          className: (0, import_system85.cn)(
+          className: (0, import_system92.cn)(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -10304,7 +10354,7 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
               TableHeaderRow,
               {
                 item: headerRow,
@@ -10312,7 +10362,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_runtime102.jsx)(
+                    return ((_a = column2.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
                       TableSelectAllCell,
                       {
                         width: (_b = column2.props) == null ? void 0 : _b.width,
@@ -10320,7 +10370,7 @@ var Table = ({
                         align: (_c = column2.props) == null ? void 0 : _c.align
                       },
                       column2.key
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
                       TableColumnHeader,
                       {
                         width: (_d = column2.props) == null ? void 0 : _d.width,
@@ -10334,12 +10384,12 @@ var Table = ({
               },
               headerRow.key
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(TableBody, { className: classNames3.body, emptyState, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(TableBody, { className: classNames3.body, emptyState, children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index2) => {
+                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime110.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_runtime102.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+                  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)(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -10363,9 +10413,9 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_react_aria_components56 = require("react-aria-components");
-var import_system86 = require("@marigold/system");
-var import_jsx_runtime103 = require("react/jsx-runtime");
+var import_react_aria_components60 = require("react-aria-components");
+var import_system93 = require("@marigold/system");
+var import_jsx_runtime111 = require("react/jsx-runtime");
 var _Text = ({
   variant,
   size: size2,
@@ -10379,40 +10429,40 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const classNames3 = (0, import_system86.useClassNames)({
+  const classNames3 = (0, import_system93.useClassNames)({
     component: "Text",
     variant,
     size: size2
   });
-  const Component2 = props.slot ? import_react_aria_components56.Text : as;
+  const Component2 = props.slot ? import_react_aria_components60.Text : as;
   const elementType = props.slot ? { elementType: as } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
     Component2,
     {
       ...props,
       ...elementType,
-      className: (0, import_system86.cn)(
+      className: (0, import_system93.cn)(
         "max-w-(--maxTextWidth)",
         // possibly set by a <Container>
         classNames3,
-        fontStyle && import_system86.textStyle[fontStyle],
-        align && import_system86.textAlign[align],
-        cursor2 && import_system86.cursorStyle[cursor2],
-        weight && import_system86.fontWeight[weight],
-        fontSize && import_system86.textSize[fontSize]
+        fontStyle && import_system93.textStyle[fontStyle],
+        align && import_system93.textAlign[align],
+        cursor2 && import_system93.cursorStyle[cursor2],
+        weight && import_system93.fontWeight[weight],
+        fontSize && import_system93.textSize[fontSize]
       ),
-      style: { color: color && (0, import_system86.ensureCssVar)(color, "color") },
+      style: { color: color && (0, import_system93.ensureCssVar)(color, "color") },
       children
     }
   );
 };
 
 // src/TextArea/TextArea.tsx
-var import_react70 = require("react");
-var import_react_aria_components57 = require("react-aria-components");
-var import_system87 = require("@marigold/system");
-var import_jsx_runtime104 = require("react/jsx-runtime");
-var _TextArea = (0, import_react70.forwardRef)(
+var import_react72 = require("react");
+var import_react_aria_components61 = require("react-aria-components");
+var import_system94 = require("@marigold/system");
+var import_jsx_runtime112 = require("react/jsx-runtime");
+var _TextArea = (0, import_react72.forwardRef)(
   ({
     variant,
     size: size2,
@@ -10423,7 +10473,7 @@ var _TextArea = (0, import_react70.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system87.useClassNames)({ component: "TextArea", variant, size: size2 });
+    const classNames3 = (0, import_system94.useClassNames)({ component: "TextArea", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10431,15 +10481,15 @@ var _TextArea = (0, import_react70.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(FieldBase, { as: import_react_aria_components57.TextField, ...props, variant, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(import_react_aria_components57.TextArea, { className: classNames3, ref, rows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(FieldBase, { as: import_react_aria_components61.TextField, ...props, variant, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_react_aria_components61.TextArea, { className: classNames3, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-var import_react71 = require("react");
-var import_react_aria_components58 = require("react-aria-components");
-var import_jsx_runtime105 = require("react/jsx-runtime");
-var _TextField = (0, import_react71.forwardRef)(
+var import_react73 = require("react");
+var import_react_aria_components62 = require("react-aria-components");
+var import_jsx_runtime113 = require("react/jsx-runtime");
+var _TextField = (0, import_react73.forwardRef)(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
@@ -10448,13 +10498,13 @@ var _TextField = (0, import_react71.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(FieldBase, { as: import_react_aria_components58.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(_Input, { ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(FieldBase, { as: import_react_aria_components62.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-var import_system88 = require("@marigold/system");
-var import_jsx_runtime106 = require("react/jsx-runtime");
+var import_system95 = require("@marigold/system");
+var import_jsx_runtime114 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -10467,29 +10517,29 @@ var Tiles = ({
   if (stretch) {
     column2 = `minmax(${column2}, 1fr)`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system88.cn)(
+      className: (0, import_system95.cn)(
         "grid",
-        import_system88.gapSpace[space],
+        import_system95.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system88.createVar)({ column: column2, tilesWidth }),
+      style: (0, import_system95.createVar)({ column: column2, tilesWidth }),
       children
     }
   );
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_react_aria_components60 = require("react-aria-components");
-var import_system89 = require("@marigold/system");
+var import_react_aria_components64 = require("react-aria-components");
+var import_system96 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react_aria_components59 = require("react-aria-components");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_react_aria_components63 = require("react-aria-components");
+var import_jsx_runtime115 = require("react/jsx-runtime");
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -10503,26 +10553,26 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react_aria_components59.TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria_components63.TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_jsx_runtime116 = require("react/jsx-runtime");
 var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames3 = (0, import_system89.useClassNames)({ component: "Tooltip", variant, size: size2 });
+  const classNames3 = (0, import_system96.useClassNames)({ component: "Tooltip", variant, size: size2 });
   const portal = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)(
-    import_react_aria_components60.Tooltip,
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+    import_react_aria_components64.Tooltip,
     {
       ...props,
-      className: (0, import_system89.cn)("group/tooltip", classNames3.container),
+      className: (0, import_system96.cn)("group/tooltip", classNames3.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_react_aria_components60.OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react_aria_components64.OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -10531,13 +10581,13 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
 _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
-var import_react_aria_components62 = require("react-aria-components");
-var import_system91 = require("@marigold/system");
+var import_react_aria_components66 = require("react-aria-components");
+var import_system98 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
-var import_react_aria_components61 = require("react-aria-components");
-var import_system90 = require("@marigold/system");
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_react_aria_components65 = require("react-aria-components");
+var import_system97 = require("@marigold/system");
+var import_jsx_runtime117 = require("react/jsx-runtime");
 var _TagGroup = ({
   width,
   items,
@@ -10547,9 +10597,9 @@ var _TagGroup = ({
   size: size2,
   ...rest
 }) => {
-  const classNames3 = (0, import_system90.useClassNames)({ component: "Tag", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(FieldBase, { as: import_react_aria_components61.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
-    import_react_aria_components61.TagList,
+  const classNames3 = (0, import_system97.useClassNames)({ component: "Tag", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(FieldBase, { as: import_react_aria_components65.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+    import_react_aria_components65.TagList,
     {
       items,
       className: classNames3.listItems,
@@ -10560,31 +10610,23 @@ var _TagGroup = ({
 };
 
 // src/TagGroup/Tag.tsx
-var import_jsx_runtime110 = require("react/jsx-runtime");
-var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(import_react_aria_components62.Button, { slot: "remove", className, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime110.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 import_jsx_runtime118 = require("react/jsx-runtime");
 var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames3 = (0, import_system91.useClassNames)({ component: "Tag", variant, size: size2 });
+  const classNames3 = (0, import_system98.useClassNames)({ component: "Tag", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-    import_react_aria_components62.Tag,
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+    import_react_aria_components66.Tag,
     {
       textValue,
       ...props,
-      className: (0, import_system91.cn)("data-selection-mode:cursor-pointer", classNames3.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(import_jsx_runtime110.Fragment, { children: [
+      className: (0, import_system98.cn)("data-selection-mode:cursor-pointer", classNames3.tag),
+      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(import_jsx_runtime118.Fragment, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
-          CloseButton2,
-          {
-            className: (0, import_system91.cn)("flex items-center", classNames3.closeButton)
-          }
-        )
+        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(CloseButton, { className: classNames3.closeButton, slot: "remove" })
       ] })
     }
   );
@@ -10595,14 +10637,14 @@ _Tag.Group = _TagGroup;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react_aria_components64 = require("react-aria-components");
+var import_react_aria_components68 = require("react-aria-components");
 var import_utils16 = require("@react-aria/utils");
-var import_system93 = require("@marigold/system");
+var import_system100 = require("@marigold/system");
 
 // src/XLoader/BaseLoader.tsx
-var import_react_aria_components63 = require("react-aria-components");
+var import_react_aria_components67 = require("react-aria-components");
 var import_i18n6 = require("@react-aria/i18n");
-var import_system92 = require("@marigold/system");
+var import_system99 = require("@marigold/system");
 
 // src/intl/messages.ts
 var intlMessages2 = {
@@ -10615,7 +10657,7 @@ var intlMessages2 = {
 };
 
 // src/XLoader/BaseLoader.tsx
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 var BaseLoader = ({
   variant,
   size: size2,
@@ -10624,16 +10666,16 @@ var BaseLoader = ({
   ...props
 }) => {
   const stringFormatter = (0, import_i18n6.useLocalizedStringFormatter)(intlMessages2, "marigold");
-  const className = (0, import_system92.useClassNames)({ component: "XLoader", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
-    import_react_aria_components63.ProgressBar,
+  const className = (0, import_system99.useClassNames)({ component: "XLoader", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
+    import_react_aria_components67.ProgressBar,
     {
       className: className.container,
       isIndeterminate: true,
       "aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -10641,13 +10683,13 @@ var BaseLoader = ({
             fill: "currentColor",
             className: className.loader,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime119.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_runtime111.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10660,12 +10702,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime119.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_runtime111.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10678,12 +10720,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime119.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_runtime111.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10696,12 +10738,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime119.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_runtime111.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10714,12 +10756,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime119.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_runtime111.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10732,12 +10774,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime119.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_runtime111.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10750,12 +10792,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime119.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_runtime111.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10768,12 +10810,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime119.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_runtime111.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10786,12 +10828,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime119.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_runtime111.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10804,12 +10846,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime119.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_runtime111.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10822,12 +10864,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime119.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_runtime111.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10843,48 +10885,48 @@ var BaseLoader = ({
             ]
           }
         ),
-        children ? /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_react_aria_components63.Label, { className: className.label, children }) : null
+        children ? /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(import_react_aria_components67.Label, { className: className.label, children }) : null
       ]
     }
   );
 };
 
 // src/XLoader/XLoader.tsx
-var import_jsx_runtime112 = require("react/jsx-runtime");
+var import_jsx_runtime120 = require("react/jsx-runtime");
 var LoaderFullScreen = (props) => {
   const id = (0, import_utils16.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_react_aria_components64.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(import_react_aria_components64.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(BaseLoader, { id, ...props }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_react_aria_components68.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_react_aria_components68.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
-  const className = (0, import_system93.useClassNames)({
+  const className = (0, import_system100.useClassNames)({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(BaseLoader, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BaseLoader, { ...props }) });
 };
-var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(BaseLoader, { variant, ...props });
+var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
-var import_react_aria_components68 = require("react-aria-components");
-var import_system96 = require("@marigold/system");
+var import_react_aria_components72 = require("react-aria-components");
+var import_system103 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react72 = require("react");
-var TabContext = (0, import_react72.createContext)({});
-var useTabContext = () => (0, import_react72.useContext)(TabContext);
+var import_react74 = require("react");
+var TabContext = (0, import_react74.createContext)({});
+var useTabContext = () => (0, import_react74.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react_aria_components65 = require("react-aria-components");
-var import_system94 = require("@marigold/system");
-var import_jsx_runtime113 = require("react/jsx-runtime");
+var import_react_aria_components69 = require("react-aria-components");
+var import_system101 = require("@marigold/system");
+var import_jsx_runtime121 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
-    import_react_aria_components65.Tab,
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+    import_react_aria_components69.Tab,
     {
       ...props,
-      className: (0, import_system94.cn)(
+      className: (0, import_system101.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames3.tab
       ),
@@ -10894,49 +10936,49 @@ var _Tab = (props) => {
 };
 
 // src/Tabs/TabList.tsx
-var import_react_aria_components66 = require("react-aria-components");
-var import_system95 = require("@marigold/system");
-var import_jsx_runtime114 = require("react/jsx-runtime");
+var import_react_aria_components70 = require("react-aria-components");
+var import_system102 = require("@marigold/system");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
-    import_react_aria_components66.TabList,
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+    import_react_aria_components70.TabList,
     {
       ...props,
-      className: (0, import_system95.cn)("flex", import_system95.gapSpace[space], classNames3.tabsList),
+      className: (0, import_system102.cn)("flex", import_system102.gapSpace[space], classNames3.tabsList),
       children: props.children
     }
   );
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react_aria_components67 = require("react-aria-components");
-var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_react_aria_components71 = require("react-aria-components");
+var import_jsx_runtime123 = require("react/jsx-runtime");
 var _TabPanel = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_react_aria_components67.TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_react_aria_components71.TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_jsx_runtime124 = require("react/jsx-runtime");
 var _Tabs = ({ disabled, variant, size: size2 = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames3 = (0, import_system96.useClassNames)({
+  const classNames3 = (0, import_system103.useClassNames)({
     component: "Tabs",
     size: size2,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react_aria_components68.Tabs, { ...props, className: classNames3.container, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_aria_components72.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_components69 = require("react-aria-components");
+var import_react_aria_components73 = require("react-aria-components");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -10954,7 +10996,6 @@ var import_react_aria_components69 = require("react-aria-components");
   Center,
   Checkbox,
   CheckboxGroup,
-  CloseButton,
   Columns,
   ComboBox,
   Container,
@@ -10962,6 +11003,7 @@ var import_react_aria_components69 = require("react-aria-components");
   DatePicker,
   Dialog,
   Divider,
+  Drawer,
   FieldBase,
   FieldGroup,
   FieldGroupContext,