@marigold/components 11.4.1 → 11.5.0

package/dist/index.mjs

@@ -206,7 +206,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment12 = REACT_FRAGMENT_TYPE;
+        var Fragment13 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -265,7 +265,7 @@ var require_react_is_development = __commonJS({
         exports.ContextProvider = ContextProvider;
         exports.Element = Element2;
         exports.ForwardRef = ForwardRef;
-        exports.Fragment = Fragment12;
+        exports.Fragment = Fragment13;
         exports.Lazy = Lazy;
         exports.Memo = Memo;
         exports.Portal = Portal;
@@ -1058,7 +1058,7 @@ var HelpText = ({
       return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
         /* @__PURE__ */ jsx8(Icon, { className: classNames3.icon }),
         msg
-      ] }, idx)) : /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
+      ] }, idx)) : /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-start gap-1", children: [
         /* @__PURE__ */ jsx8(Icon, { className: classNames3.icon }),
         messages
       ] });
@@ -1089,7 +1089,7 @@ var _Label = ({ size: size2, variant, children, ...props }) => {
     Label,
     {
       ...props,
-      className: cn5(classNames3.container, "flex w-[var(--labelWidth)]"),
+      className: cn5(classNames3.container, "inline-flex w-[var(--labelWidth)]"),
       style: createVar3({ labelWidth }),
       children: [
         children,
@@ -1957,9 +1957,9 @@ var _Checkbox = forwardRef14(
     checked,
     defaultChecked,
     indeterminate,
-    children,
     variant,
     size: size2,
+    label,
     ...rest
   }, ref) => {
     const props = {
@@ -1998,7 +1998,7 @@ var _Checkbox = forwardRef14(
               className: classNames3.checkbox
             }
           ),
-          children ? /* @__PURE__ */ jsx36("div", { className: classNames3.label, children }) : null
+          (props.children || label) && /* @__PURE__ */ jsx36("div", { className: classNames3.label, children: props.children || label })
         ] })
       }
     );
@@ -2104,31 +2104,48 @@ var Container = ({
 
 // src/Dialog/Dialog.tsx
 import {
-  forwardRef as forwardRef17,
+  forwardRef as forwardRef18,
   useContext as useContext9
 } from "react";
 import { Dialog, OverlayTriggerStateContext as OverlayTriggerStateContext2 } from "react-aria-components";
-import { cn as cn26, useClassNames as useClassNames23 } from "@marigold/system";
+import { cn as cn26, useClassNames as useClassNames24 } from "@marigold/system";
 
-// src/Overlay/Modal.tsx
+// src/CloseButton/CloseButton.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { Modal } from "react-aria-components";
+import { Button as Button5 } from "react-aria-components";
+import { useClassNames as useClassNames20 } from "@marigold/system";
 import { jsx as jsx39 } from "react/jsx-runtime";
-var _Modal = forwardRef15(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
+var CloseButton = forwardRef15(
+  ({ className, size: size2, variant, ...props }, ref) => {
+    const classNames3 = useClassNames20({
+      component: "CloseButton",
+      className,
+      size: size2,
+      variant
+    });
+    return /* @__PURE__ */ jsx39(Button5, { ref, className: classNames3, ...props, children: /* @__PURE__ */ jsx39("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx39("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
+import { forwardRef as forwardRef16 } from "react";
+import { Modal } from "react-aria-components";
+import { jsx as jsx40 } from "react/jsx-runtime";
+var _Modal = forwardRef16(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
     isDismissable: dismissable,
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     Underlay,
     {
       dismissable,
       keyboardDismissable,
       open,
       variant: "modal",
-      children: /* @__PURE__ */ jsx39(
+      children: /* @__PURE__ */ jsx40(
         Modal,
         {
           ref,
@@ -2142,7 +2159,7 @@ var _Modal = forwardRef15(({ open, dismissable, keyboardDismissable, ...rest },
 });
 
 // src/Overlay/NonModal.tsx
-import { forwardRef as forwardRef16, useContext as useContext8 } from "react";
+import { forwardRef as forwardRef17, useContext as useContext8 } from "react";
 import {
   OverlayTriggerStateContext,
   Provider
@@ -2231,7 +2248,7 @@ var useNonModal = ({ nonModalRef, keyboardDismissable = true }, state) => {
 };
 
 // src/Overlay/NonModal.tsx
-import { jsx as jsx40, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs15 } from "react/jsx-runtime";
 var NonModalInner = ({ state, isExiting, ...props }) => {
   const { nonModalProps } = useNonModal(props, state);
   const ref = props.nonModalRef;
@@ -2266,21 +2283,21 @@ var NonModalInner = ({ state, isExiting, ...props }) => {
       "data-exiting": isExiting || void 0,
       children: [
         renderProps.children,
-        /* @__PURE__ */ jsx40(DismissButton, { onDismiss: state.close })
+        /* @__PURE__ */ jsx41(DismissButton, { onDismiss: state.close })
       ]
     }
   );
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     Overlay,
     {
       isExiting,
       portalContainer,
       disableFocusManagement: true,
-      children: /* @__PURE__ */ jsx40(FocusScope, { restoreFocus: true, children: /* @__PURE__ */ jsx40(Provider, { values: [[OverlayTriggerStateContext, state]], children: overlay }) })
+      children: /* @__PURE__ */ jsx41(FocusScope, { restoreFocus: true, children: /* @__PURE__ */ jsx41(Provider, { values: [[OverlayTriggerStateContext, state]], children: overlay }) })
     }
   );
 };
-var NonModal = forwardRef16(
+var NonModal = forwardRef17(
   ({ open, ...rest }, ref) => {
     const props = {
       isOpen: open,
@@ -2295,7 +2312,7 @@ var NonModal = forwardRef16(
     if (state && !state.isOpen && !isExiting || isSSR) {
       return null;
     }
-    return /* @__PURE__ */ jsx40(
+    return /* @__PURE__ */ jsx41(
       NonModalInner,
       {
         ...props,
@@ -2308,43 +2325,43 @@ var NonModal = forwardRef16(
 );
 
 // src/Dialog/DialogActions.tsx
-import { cn as cn23, useClassNames as useClassNames20 } from "@marigold/system";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { cn as cn23, useClassNames as useClassNames21 } from "@marigold/system";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var DialogActions = ({ variant, size: size2, children }) => {
-  const classNames3 = useClassNames20({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ jsx41("div", { className: cn23("[grid-area:actions]", classNames3.actions), children });
+  const classNames3 = useClassNames21({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ jsx42("div", { className: cn23("[grid-area:actions]", classNames3.actions), children });
 };
 
 // src/Dialog/DialogContent.tsx
-import { cn as cn24, useClassNames as useClassNames21 } from "@marigold/system";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { cn as cn24, useClassNames as useClassNames22 } from "@marigold/system";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var DialogContent = ({
   variant,
   size: size2,
   children
 }) => {
-  const classNames3 = useClassNames21({ component: "Dialog", variant, size: size2 });
-  return /* @__PURE__ */ jsx42("div", { className: cn24("[grid-area:content]", classNames3.content), children });
+  const classNames3 = useClassNames22({ component: "Dialog", variant, size: size2 });
+  return /* @__PURE__ */ jsx43("div", { className: cn24("[grid-area:content]", classNames3.content), children });
 };
 
 // src/Dialog/DialogTitle.tsx
 import { Header as Header2, Heading as Heading2 } from "react-aria-components";
-import { cn as cn25, useClassNames as useClassNames22 } from "@marigold/system";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { cn as cn25, useClassNames as useClassNames23 } from "@marigold/system";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var DialogTitle = ({ variant, size: size2, children }) => {
-  const classNames3 = useClassNames22({
+  const classNames3 = useClassNames23({
     component: "Dialog",
     variant,
     size: size2
   });
-  return /* @__PURE__ */ jsx43(Header2, { className: cn25("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ jsx43(Heading2, { slot: "title", className: classNames3.title, children }) });
+  return /* @__PURE__ */ jsx44(Header2, { className: cn25("[grid-area:title]", classNames3.header), children: /* @__PURE__ */ jsx44(Heading2, { slot: "title", className: classNames3.title, children }) });
 };
 
 // src/Dialog/DialogTrigger.tsx
 import { createContext as createContext6 } from "react";
 import { DialogTrigger } from "react-aria-components";
 import { PressResponder } from "@react-aria/interactions";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var DialogContext = createContext6({});
 var _DialogTrigger = ({
   open,
@@ -2359,37 +2376,15 @@ var _DialogTrigger = ({
     isKeyboardDismissDisabled: !keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ jsx44(DialogContext.Provider, { value: props, children: /* @__PURE__ */ jsx44(DialogTrigger, { ...props, children: /* @__PURE__ */ jsx44(PressResponder, { isPressed: false, children: props.children }) }) });
+  return /* @__PURE__ */ jsx45(DialogContext.Provider, { value: props, children: /* @__PURE__ */ jsx45(DialogTrigger, { ...props, children: /* @__PURE__ */ jsx45(PressResponder, { isPressed: false, children: props.children }) }) });
 };
 
 // src/Dialog/Dialog.tsx
-import { jsx as jsx45, jsxs as jsxs16 } from "react/jsx-runtime";
-var CloseButton = ({ className }) => {
-  const ctx = useContext9(OverlayTriggerStateContext2);
-  return /* @__PURE__ */ jsx45(
-    "button",
-    {
-      className: cn26(
-        "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__ */ jsx45("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx45(
-        "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 = forwardRef17(
+import { jsx as jsx46, jsxs as jsxs16 } from "react/jsx-runtime";
+var _Dialog = forwardRef18(
   (props, ref) => {
     var _a;
-    const classNames3 = useClassNames23({
+    const classNames3 = useClassNames24({
       component: "Dialog",
       variant: props.variant,
       size: props.size
@@ -2400,7 +2395,7 @@ var _Dialog = forwardRef17(
       close: (_a = state == null ? void 0 : state.close) != null ? _a : () => {
       }
     }) : props.children;
-    return /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx46(
       _Modal,
       {
         dismissable: isDismissable,
@@ -2417,7 +2412,13 @@ var _Dialog = forwardRef17(
               classNames3.container
             ),
             children: [
-              props.closeButton && /* @__PURE__ */ jsx45(CloseButton, { className: classNames3.closeButton }),
+              props.closeButton && /* @__PURE__ */ jsx46(
+                CloseButton,
+                {
+                  className: classNames3.closeButton,
+                  onPress: state == null ? void 0 : state.close
+                }
+              ),
               children
             ]
           }
@@ -2433,33 +2434,205 @@ _Dialog.Actions = DialogActions;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { cn as cn27, useClassNames as useClassNames24 } from "@marigold/system";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { cn as cn27, useClassNames as useClassNames25 } from "@marigold/system";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
-  const classNames3 = useClassNames24({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx46(Separator, { className: cn27("border-none", classNames3), ...props });
+  const classNames3 = useClassNames25({ component: "Divider", variant });
+  return /* @__PURE__ */ jsx47(Separator, { className: cn27("border-none", classNames3), ...props });
 };
 
+// src/Drawer/Drawer.tsx
+import { useContext as useContext11, useRef } from "react";
+import { Dialog as Dialog2, OverlayTriggerStateContext as OverlayTriggerStateContext3 } from "react-aria-components";
+import { useLandmark } from "@react-aria/landmark";
+import { cn as cn32, useClassNames as useClassNames29, useSmallScreen as useSmallScreen3 } from "@marigold/system";
+
+// src/Drawer/Context.tsx
+import { createContext as createContext7, useContext as useContext10 } from "react";
+var DrawerContext = createContext7({
+  variant: void 0,
+  size: void 0
+});
+var useDrawerContext = () => useContext10(DrawerContext);
+
+// src/Drawer/DrawerActions.tsx
+import { cn as cn28, useClassNames as useClassNames26 } from "@marigold/system";
+import { jsx as jsx48 } from "react/jsx-runtime";
+var DrawerActions = ({ variant, size: size2, children }) => {
+  const ctx = useDrawerContext();
+  const classNames3 = useClassNames26({
+    component: "Drawer",
+    variant: variant != null ? variant : ctx.variant,
+    size: size2 != null ? size2 : ctx.size
+  });
+  return /* @__PURE__ */ jsx48(
+    "div",
+    {
+      className: cn28("[grid-area:actions]", classNames3.actions),
+      style: { "--i": 2 },
+      children
+    }
+  );
+};
+
+// src/Drawer/DrawerContent.tsx
+import { cn as cn29, useClassNames as useClassNames27 } from "@marigold/system";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var DrawerContent = ({
+  variant,
+  size: size2,
+  children
+}) => {
+  const ctx = useDrawerContext();
+  const classNames3 = useClassNames27({
+    component: "Drawer",
+    variant: variant != null ? variant : ctx.variant,
+    size: size2 != null ? size2 : ctx.size
+  });
+  return /* @__PURE__ */ jsx49(
+    "div",
+    {
+      className: cn29("[grid-area:content]", classNames3.content),
+      style: { "--i": 1 },
+      children
+    }
+  );
+};
+
+// src/Drawer/DrawerModal.tsx
+import { cn as cn30, useSmallScreen as useSmallScreen2 } from "@marigold/system";
+import { jsx as jsx50 } from "react/jsx-runtime";
+var DrawerModal = ({
+  children,
+  className,
+  ...props
+}) => {
+  const isSmallScreen = useSmallScreen2();
+  return isSmallScreen ? /* @__PURE__ */ jsx50(_Modal, { children }) : /* @__PURE__ */ jsx50(
+    NonModal,
+    {
+      ...props,
+      className: cn30("fixed top-0 right-0 bottom-0", className),
+      children
+    }
+  );
+};
+
+// src/Drawer/DrawerTitle.tsx
+import { Header as Header3, Heading as Heading3 } from "react-aria-components";
+import { cn as cn31, useClassNames as useClassNames28 } from "@marigold/system";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var DrawerTitle = ({ variant, size: size2, children }) => {
+  const ctx = useDrawerContext();
+  const classNames3 = useClassNames28({
+    component: "Drawer",
+    variant: variant != null ? variant : ctx.variant,
+    size: size2 != null ? size2 : ctx.size
+  });
+  return /* @__PURE__ */ jsx51(
+    Header3,
+    {
+      className: cn31("[grid-area:title]", classNames3.header),
+      style: { "--i": 0 },
+      children: /* @__PURE__ */ jsx51(Heading3, { slot: "title", level: 2, className: classNames3.title, children })
+    }
+  );
+};
+
+// src/Drawer/DrawerTrigger.tsx
+import { DialogTrigger as DialogTrigger2 } from "react-aria-components";
+import { jsx as jsx52 } from "react/jsx-runtime";
+var DrawerTrigger = ({
+  open,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx52(DialogTrigger2, { isOpen: open, ...props, children });
+
+// src/Drawer/Drawer.tsx
+import { jsx as jsx53, jsxs as jsxs17 } from "react/jsx-runtime";
+var Drawer = ({
+  children,
+  variant,
+  size: size2,
+  open,
+  keyboardDismissable,
+  closeButton,
+  role = "complementary",
+  ...props
+}) => {
+  const ref = useRef(null);
+  const classNames3 = useClassNames29({ component: "Drawer", variant, size: size2 });
+  const ctx = useContext11(OverlayTriggerStateContext3);
+  const isSmallScreen = useSmallScreen3();
+  const landmarkAria = useLandmark({ ...props, role }, ref);
+  const landmarkProps = isSmallScreen ? {} : landmarkAria.landmarkProps;
+  return /* @__PURE__ */ jsx53(
+    DrawerModal,
+    {
+      className: classNames3.overlay,
+      open,
+      keyboardDismissable,
+      children: /* @__PURE__ */ jsx53(DrawerContext.Provider, { value: { variant, size: size2 }, children: /* @__PURE__ */ jsxs17(
+        Dialog2,
+        {
+          ...props,
+          ...landmarkProps,
+          className: cn32(
+            "h-(--visual-viewport-height) outline-none",
+            'grid [grid-template-areas:"title"_"content"_"actions"]',
+            classNames3.container
+          ),
+          children: [
+            closeButton && /* @__PURE__ */ jsx53(
+              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
-import { useClassNames as useClassNames25 } from "@marigold/system";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { useClassNames as useClassNames30 } from "@marigold/system";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size: size2, ...props }) => {
-  const classNames3 = useClassNames25({ component: "Footer", variant, size: size2 });
-  return /* @__PURE__ */ jsx47("footer", { ...props, className: classNames3, children });
+  const classNames3 = useClassNames30({ component: "Footer", variant, size: size2 });
+  return /* @__PURE__ */ jsx54("footer", { ...props, className: classNames3, children });
 };
 
 // src/Form/Form.tsx
 import { Form } from "react-aria-components";
+import { cn as cn33, maxWidth as twMaxWidth } from "@marigold/system";
+import { jsx as jsx55 } from "react/jsx-runtime";
+var _Form = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ jsx55(
+  Form,
+  {
+    ...props,
+    className: cn33(twMaxWidth[maxWidth], unstyled && "contents")
+  }
+);
 
 // src/Grid/Grid.tsx
-import { cn as cn28, gapSpace as gapSpace6, height as twHeight } from "@marigold/system";
+import { cn as cn34, gapSpace as gapSpace6, height as twHeight } from "@marigold/system";
 
 // src/Grid/GridArea.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var GridArea = ({ name, children }) => /* @__PURE__ */ jsx48("div", { style: { gridArea: name }, children });
+import { jsx as jsx56 } from "react/jsx-runtime";
+var GridArea = ({ name, children }) => /* @__PURE__ */ jsx56("div", { style: { gridArea: name }, children });
 
 // src/Grid/Grid.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "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 = ({
@@ -2471,10 +2644,10 @@ var Grid = ({
   space = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
-      className: cn28("grid", gapSpace6[space], twHeight[height]),
+      className: cn34("grid", gapSpace6[space], twHeight[height]),
       style: {
         gridTemplateAreas: parseGridAreas(areas),
         gridTemplateColumns: parseTemplateValue(columns),
@@ -2488,27 +2661,27 @@ var Grid = ({
 Grid.Area = GridArea;
 
 // src/Header/Header.tsx
-import { Header as Header3 } from "react-aria-components";
-import { useClassNames as useClassNames26 } from "@marigold/system";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { Header as Header4 } from "react-aria-components";
+import { useClassNames as useClassNames31 } from "@marigold/system";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var _Header = ({ variant, size: size2, ...props }) => {
-  const classNames3 = useClassNames26({
+  const classNames3 = useClassNames31({
     component: "Header",
     variant,
     size: size2
   });
-  return /* @__PURE__ */ jsx50(Header3, { className: classNames3, ...props, children: props.children });
+  return /* @__PURE__ */ jsx58(Header4, { className: classNames3, ...props, children: props.children });
 };
 
 // src/Headline/Headline.tsx
-import { Heading as Heading3 } from "react-aria-components";
+import { Heading as Heading4 } from "react-aria-components";
 import {
-  cn as cn29,
+  cn as cn35,
   ensureCssVar,
   textAlign,
-  useClassNames as useClassNames27
+  useClassNames as useClassNames32
 } from "@marigold/system";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var _Headline = ({
   variant,
   size: size2,
@@ -2518,17 +2691,17 @@ var _Headline = ({
   level = "1",
   ...props
 }) => {
-  const classNames3 = useClassNames27({
+  const classNames3 = useClassNames32({
     component: "Headline",
     variant,
     size: size2 != null ? size2 : `level-${level}`
   });
-  return /* @__PURE__ */ jsx51(
-    Heading3,
+  return /* @__PURE__ */ jsx59(
+    Heading4,
     {
       level: Number(level),
       ...props,
-      className: cn29(
+      className: cn35(
         classNames3,
         "max-w-(--maxHeadlineWidth)",
         // possibly set by a <Container>
@@ -2542,12 +2715,12 @@ var _Headline = ({
 
 // src/Image/Image.tsx
 import {
-  cn as cn30,
+  cn as cn36,
   objectFit,
   objectPosition,
-  useClassNames as useClassNames28
+  useClassNames as useClassNames33
 } from "@marigold/system";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var Image = ({
   variant,
   size: size2,
@@ -2555,13 +2728,13 @@ var Image = ({
   position: position2 = "none",
   ...props
 }) => {
-  const classNames3 = useClassNames28({ component: "Image", variant, size: size2 });
-  return /* @__PURE__ */ jsx52(
+  const classNames3 = useClassNames33({ component: "Image", variant, size: size2 });
+  return /* @__PURE__ */ jsx60(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: cn30(
+      className: cn36(
         fit !== "none" && "h-full w-full",
         classNames3,
         objectFit[fit],
@@ -2572,8 +2745,8 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import { alignment, cn as cn31, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { alignment, cn as cn37, gapSpace as gapSpace7 } from "@marigold/system";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
   alignX,
@@ -2582,11 +2755,11 @@ var Inline = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx61(
     "div",
     {
       ...props,
-      className: cn31(
+      className: cn37(
         "flex flex-wrap",
         gapSpace7[space],
         alignX && ((_b = (_a = alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
@@ -2598,19 +2771,19 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { DateField } from "react-aria-components";
 
 // src/DateField/DateInput.tsx
 import { DateInput, Group } from "react-aria-components";
-import { useClassNames as useClassNames29 } from "@marigold/system";
+import { useClassNames as useClassNames34 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
-import { cn as cn32 } from "@marigold/system";
-import { Fragment as Fragment4, jsx as jsx54, jsxs as jsxs17 } from "react/jsx-runtime";
+import { cn as cn38 } from "@marigold/system";
+import { Fragment as Fragment4, jsx as jsx62, jsxs as jsxs18 } from "react/jsx-runtime";
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx62(
     DateSegment,
     {
       ...props,
@@ -2618,37 +2791,37 @@ var _DateSegment = ({ segment, ...props }) => {
       style: {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
-      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
-        /* @__PURE__ */ jsx54(
+      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs18(Fragment4, { children: [
+        /* @__PURE__ */ jsx62(
           "span",
           {
             "aria-hidden": "true",
-            className: cn32(
+            className: cn38(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ jsx54("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
+        /* @__PURE__ */ jsx62("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-import { jsx as jsx55, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs19 } from "react/jsx-runtime";
 var _DateInput = ({ variant, size: size2, action, ...props }) => {
-  const classNames3 = useClassNames29({ component: "DateField", variant, size: size2 });
-  return /* @__PURE__ */ jsxs18(Group, { className: classNames3.field, children: [
-    /* @__PURE__ */ jsx55(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx55(_DateSegment, { className: classNames3.segment, segment }) }),
+  const classNames3 = useClassNames34({ component: "DateField", variant, size: size2 });
+  return /* @__PURE__ */ jsxs19(Group, { className: classNames3.field, children: [
+    /* @__PURE__ */ jsx63(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx63(_DateSegment, { className: classNames3.segment, segment }) }),
     action ? action : null
   ] });
 };
 
 // src/DateField/DateField.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
-var _DateField = forwardRef18(
+import { jsx as jsx64 } from "react/jsx-runtime";
+var _DateField = forwardRef19(
   ({
     variant,
     size: size2,
@@ -2666,7 +2839,7 @@ var _DateField = forwardRef18(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx56(
+    return /* @__PURE__ */ jsx64(
       FieldBase,
       {
         as: DateField,
@@ -2674,7 +2847,7 @@ var _DateField = forwardRef18(
         size: size2,
         ref,
         ...props,
-        children: /* @__PURE__ */ jsx56(_DateInput, { action })
+        children: /* @__PURE__ */ jsx64(_DateInput, { action })
       }
     );
   }
@@ -2683,7 +2856,7 @@ var _DateField = forwardRef18(
 // src/Calendar/Calendar.tsx
 import { useState } from "react";
 import { Calendar } from "react-aria-components";
-import { cn as cn36, useClassNames as useClassNames34 } from "@marigold/system";
+import { cn as cn42, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import {
@@ -2691,18 +2864,18 @@ import {
   CalendarGrid,
   CalendarGridBody
 } from "react-aria-components";
-import { cn as cn33, useClassNames as useClassNames31 } from "@marigold/system";
+import { cn as cn39, useClassNames as useClassNames36 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
-import { useContext as useContext10, useMemo as useMemo2 } from "react";
+import { useContext as useContext12, useMemo as useMemo2 } from "react";
 import { CalendarStateContext } from "react-aria-components";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useDateFormatter, useLocale } from "@react-aria/i18n";
-import { useClassNames as useClassNames30 } from "@marigold/system";
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { useClassNames as useClassNames35 } from "@marigold/system";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
-  const state = useContext10(CalendarStateContext);
+  const state = useContext12(CalendarStateContext);
   const { headerProps } = useCalendarGrid(props, state);
   const { locale } = useLocale();
   const dayFormatter = useDateFormatter({
@@ -2717,21 +2890,21 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames3 = useClassNames30({ component: "Calendar" });
-  return /* @__PURE__ */ jsx57("thead", { ...headerProps, children: /* @__PURE__ */ jsx57("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ jsx57("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
+  const classNames3 = useClassNames35({ component: "Calendar" });
+  return /* @__PURE__ */ jsx65("thead", { ...headerProps, children: /* @__PURE__ */ jsx65("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ jsx65("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-import { jsx as jsx58, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs20 } from "react/jsx-runtime";
 var _CalendarGrid = () => {
-  const classNames3 = useClassNames31({ component: "Calendar" });
-  return /* @__PURE__ */ jsxs19(CalendarGrid, { className: classNames3.calendarGrid, children: [
-    /* @__PURE__ */ jsx58(CalendarGridHeader, {}),
-    /* @__PURE__ */ jsx58(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx58(
+  const classNames3 = useClassNames36({ component: "Calendar" });
+  return /* @__PURE__ */ jsxs20(CalendarGrid, { className: classNames3.calendarGrid, children: [
+    /* @__PURE__ */ jsx66(CalendarGridHeader, {}),
+    /* @__PURE__ */ jsx66(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx66(
       CalendarCell,
       {
         date,
-        className: cn33(
+        className: cn39(
           "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
         )
@@ -2741,9 +2914,9 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-import { useContext as useContext11 } from "react";
+import { useContext as useContext13 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
-import { cn as cn34, useClassNames as useClassNames32 } from "@marigold/system";
+import { cn as cn40, useClassNames as useClassNames37 } from "@marigold/system";
 
 // src/Calendar/useFormattedMonths.tsx
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
@@ -2762,60 +2935,60 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-import { jsx as jsx59, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs21 } from "react/jsx-runtime";
 function CalendarListBox({
   type,
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = useContext11(CalendarStateContext2);
+  const state = useContext13(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = useClassNames32({ component: "Select" });
-  return /* @__PURE__ */ jsxs20(
+  const { select: selectClassNames } = useClassNames37({ component: "Select" });
+  return /* @__PURE__ */ jsxs21(
     "button",
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: cn34(buttonStyles, selectClassNames),
+      className: cn40(buttonStyles, selectClassNames),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ jsx59(ChevronDown, {})
+        /* @__PURE__ */ jsx67(ChevronDown, {})
       ]
     }
   );
 }
 
 // src/Calendar/MonthControls.tsx
-import { cn as cn35, useClassNames as useClassNames33 } from "@marigold/system";
-import { jsx as jsx60, jsxs as jsxs21 } from "react/jsx-runtime";
+import { cn as cn41, useClassNames as useClassNames38 } from "@marigold/system";
+import { jsx as jsx68, jsxs as jsxs22 } from "react/jsx-runtime";
 function MonthControls() {
-  const classNames3 = useClassNames33({ component: "Calendar" });
-  return /* @__PURE__ */ jsxs21(
+  const classNames3 = useClassNames38({ component: "Calendar" });
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
-      className: cn35(
+      className: cn41(
         "flex w-full flex-nowrap justify-end gap-[10px] [&_button]:px-2 [&_button]:py-1 [&_button:disabled]:cursor-not-allowed",
         classNames3.calendarControllers
       ),
       children: [
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx68(
           IconButton,
           {
-            className: cn35("inline-flex items-center justify-center gap-[0.5ch]"),
+            className: cn41("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "previous",
-            children: /* @__PURE__ */ jsx60(ChevronLeft, {})
+            children: /* @__PURE__ */ jsx68(ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx68(
           IconButton,
           {
-            className: cn35("inline-flex items-center justify-center gap-[0.5ch]"),
+            className: cn41("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "next",
-            children: /* @__PURE__ */ jsx60(ChevronRight, {})
+            children: /* @__PURE__ */ jsx68(ChevronRight, {})
           }
         )
       ]
@@ -2825,24 +2998,24 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-import { useContext as useContext12 } from "react";
+import { useContext as useContext14 } from "react";
 import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = useContext12(CalendarStateContext3);
+  const state = useContext14(CalendarStateContext3);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange2 = (index2) => {
     let value = Number(index2) + 1;
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx69(
     "ul",
     {
       "data-testid": "monthOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
       children: months.map((month, index2) => {
-        return /* @__PURE__ */ jsx61("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx61(
+        return /* @__PURE__ */ jsx69("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx69(
           _Button,
           {
             slot: "previous",
@@ -2864,15 +3037,15 @@ var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
 import {
-  useContext as useContext13,
+  useContext as useContext15,
   useEffect,
-  useRef
+  useRef as useRef2
 } from "react";
 import { CalendarStateContext as CalendarStateContext4 } from "react-aria-components";
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = useContext13(CalendarStateContext4);
+  const state = useContext15(CalendarStateContext4);
   const years = [];
   let formatter = useDateFormatter3({
     year: "numeric",
@@ -2885,7 +3058,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
       formatted: formatter.format(date.toDate(state.timeZone))
     });
   }
-  const activeButtonRef = useRef(null);
+  const activeButtonRef = useRef2(null);
   useEffect(() => {
     if (activeButtonRef.current) {
       const activeButton = activeButtonRef.current;
@@ -2900,19 +3073,19 @@ var YearListBox = ({ setSelectedDropdown }) => {
     let date = years[index2].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx70(
     "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__ */ jsx62("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx62(
+        return /* @__PURE__ */ jsx70("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx70(
           "div",
           {
             ref: isActive ? activeButtonRef : null,
             style: { height: "100%", width: "100%" },
-            children: /* @__PURE__ */ jsx62(
+            children: /* @__PURE__ */ jsx70(
               _Button,
               {
                 slot: "previous",
@@ -2937,7 +3110,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment5, jsx as jsx63, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx71, jsxs as jsxs23 } from "react/jsx-runtime";
 var _Calendar = ({
   disabled,
   readOnly,
@@ -2952,24 +3125,24 @@ var _Calendar = ({
     isDateUnavailable: dateUnavailable,
     ...rest
   };
-  const classNames3 = useClassNames34({ component: "Calendar" });
+  const classNames3 = useClassNames39({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
-    month: /* @__PURE__ */ jsx63(MonthListBox_default, { setSelectedDropdown }),
-    year: /* @__PURE__ */ jsx63(YearListBox_default, { setSelectedDropdown })
+    month: /* @__PURE__ */ jsx71(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ jsx71(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx71(
     Calendar,
     {
-      className: cn36(
+      className: cn42(
         "flex min-h-[350px] w-fit flex-col rounded-xs p-4",
         classNames3.calendar
       ),
       ...props,
-      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs22(Fragment5, { children: [
-        /* @__PURE__ */ jsxs22("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex w-fit gap-4", children: [
-            /* @__PURE__ */ jsx63(
+      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs23(Fragment5, { children: [
+        /* @__PURE__ */ jsxs23("div", { className: "mb-4 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs23("div", { className: "flex w-fit gap-4", children: [
+            /* @__PURE__ */ jsx71(
               CalendarListBox,
               {
                 type: "month",
@@ -2977,7 +3150,7 @@ var _Calendar = ({
                 setSelectedDropdown
               }
             ),
-            /* @__PURE__ */ jsx63(
+            /* @__PURE__ */ jsx71(
               CalendarListBox,
               {
                 type: "year",
@@ -2986,9 +3159,9 @@ var _Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx63(MonthControls_default, {})
+          /* @__PURE__ */ jsx71(MonthControls_default, {})
         ] }),
-        /* @__PURE__ */ jsx63(_CalendarGrid, {})
+        /* @__PURE__ */ jsx71(_CalendarGrid, {})
       ] })
     }
   );
@@ -2996,9 +3169,9 @@ var _Calendar = ({
 
 // src/DatePicker/DatePicker.tsx
 import React6 from "react";
-import { DatePicker, Dialog as Dialog2 } from "react-aria-components";
-import { useClassNames as useClassNames35 } from "@marigold/system";
-import { jsx as jsx64, jsxs as jsxs23 } from "react/jsx-runtime";
+import { DatePicker, Dialog as Dialog3 } from "react-aria-components";
+import { useClassNames as useClassNames40 } from "@marigold/system";
+import { jsx as jsx72, jsxs as jsxs24 } from "react/jsx-runtime";
 var _DatePicker = React6.forwardRef(
   ({
     dateUnavailable,
@@ -3022,12 +3195,12 @@ var _DatePicker = React6.forwardRef(
       granularity,
       ...rest
     };
-    const classNames3 = useClassNames35({
+    const classNames3 = useClassNames40({
       component: "DatePicker",
       size: size2,
       variant
     });
-    return /* @__PURE__ */ jsxs23(
+    return /* @__PURE__ */ jsxs24(
       FieldBase,
       {
         as: DatePicker,
@@ -3036,10 +3209,10 @@ var _DatePicker = React6.forwardRef(
         ...props,
         ref,
         children: [
-          /* @__PURE__ */ jsx64(
+          /* @__PURE__ */ jsx72(
             _DateInput,
             {
-              action: /* @__PURE__ */ jsx64(IconButton, { className: classNames3, children: /* @__PURE__ */ jsx64(
+              action: /* @__PURE__ */ jsx72(IconButton, { className: classNames3, children: /* @__PURE__ */ jsx72(
                 "svg",
                 {
                   "data-testid": "action",
@@ -3047,12 +3220,12 @@ var _DatePicker = React6.forwardRef(
                   width: 24,
                   height: 24,
                   fill: "currentColor",
-                  children: /* @__PURE__ */ jsx64("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__ */ jsx72("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__ */ jsx64(_Popover, { children: /* @__PURE__ */ jsx64(Dialog2, { children: /* @__PURE__ */ jsx64(_Calendar, { disabled }) }) })
+          /* @__PURE__ */ jsx72(_Popover, { children: /* @__PURE__ */ jsx72(Dialog3, { children: /* @__PURE__ */ jsx72(_Calendar, { disabled }) }) })
         ]
       }
     );
@@ -3061,16 +3234,16 @@ var _DatePicker = React6.forwardRef(
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn37,
+  cn as cn43,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
-import { jsx as jsx65 } from "react/jsx-runtime";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx65(
+import { jsx as jsx73 } from "react/jsx-runtime";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx73(
   "div",
   {
-    className: cn37(
+    className: cn43(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -3080,38 +3253,38 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx65(
 );
 
 // src/Link/Link.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import { Link } from "react-aria-components";
-import { useClassNames as useClassNames36 } from "@marigold/system";
-import { jsx as jsx66 } from "react/jsx-runtime";
-var _Link = forwardRef19(
+import { useClassNames as useClassNames41 } from "@marigold/system";
+import { jsx as jsx74 } from "react/jsx-runtime";
+var _Link = forwardRef20(
   ({ variant, size: size2, disabled, children, ...props }, ref) => {
-    const classNames3 = useClassNames36({
+    const classNames3 = useClassNames41({
       component: "Link",
       variant,
       size: size2
     });
-    return /* @__PURE__ */ jsx66(Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
+    return /* @__PURE__ */ jsx74(Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-import { useClassNames as useClassNames37 } from "@marigold/system";
+import { useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext7, useContext as useContext14 } from "react";
-var ListContext = createContext7({});
-var useListContext = () => useContext14(ListContext);
+import { createContext as createContext8, useContext as useContext16 } from "react";
+var ListContext = createContext8({});
+var useListContext = () => useContext16(ListContext);
 
 // src/List/ListItem.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames3 } = useListContext();
-  return /* @__PURE__ */ jsx67("li", { ...props, className: classNames3, children });
+  return /* @__PURE__ */ jsx75("li", { ...props, className: classNames3, children });
 };
 
 // src/List/List.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -3120,38 +3293,38 @@ var List = ({
   ...props
 }) => {
   const Component2 = as;
-  const classNames3 = useClassNames37({ component: "List", variant, size: size2 });
-  return /* @__PURE__ */ jsx68(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ jsx68(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
+  const classNames3 = useClassNames42({ component: "List", variant, size: size2 });
+  return /* @__PURE__ */ jsx76(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ jsx76(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 import { Menu, MenuTrigger } from "react-aria-components";
-import { useClassNames as useClassNames40 } from "@marigold/system";
+import { useClassNames as useClassNames45 } from "@marigold/system";
 
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
-import { useClassNames as useClassNames38 } from "@marigold/system";
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { useClassNames as useClassNames43 } from "@marigold/system";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
-  const classNames3 = useClassNames38({ component: "Menu" });
-  return /* @__PURE__ */ jsx69(MenuItem, { ...props, className: classNames3.item, children });
+  const classNames3 = useClassNames43({ component: "Menu" });
+  return /* @__PURE__ */ jsx77(MenuItem, { ...props, className: classNames3.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 import { MenuSection } from "react-aria-components";
-import { useClassNames as useClassNames39 } from "@marigold/system";
-import { jsx as jsx70, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useClassNames as useClassNames44 } from "@marigold/system";
+import { jsx as jsx78, jsxs as jsxs25 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = useClassNames39({ component: "Menu" });
-  return /* @__PURE__ */ jsxs24(MenuSection, { ...props, children: [
-    /* @__PURE__ */ jsx70(_Header, { className: className.section, children: title }),
+  const className = useClassNames44({ component: "Menu" });
+  return /* @__PURE__ */ jsxs25(MenuSection, { ...props, children: [
+    /* @__PURE__ */ jsx78(_Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-import { jsx as jsx71, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs26 } from "react/jsx-runtime";
 var _Menu = ({
   children,
   label,
@@ -3163,10 +3336,10 @@ var _Menu = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const classNames3 = useClassNames40({ component: "Menu", variant, size: size2 });
-  return /* @__PURE__ */ jsxs25(MenuTrigger, { ...props, children: [
-    /* @__PURE__ */ jsx71(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
-    /* @__PURE__ */ jsx71(_Popover, { open, placement, children: /* @__PURE__ */ jsx71(Menu, { ...props, className: classNames3.container, children }) })
+  const classNames3 = useClassNames45({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ jsxs26(MenuTrigger, { ...props, children: [
+    /* @__PURE__ */ jsx79(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
+    /* @__PURE__ */ jsx79(_Popover, { open, placement, children: /* @__PURE__ */ jsx79(Menu, { ...props, className: classNames3.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
@@ -3174,59 +3347,59 @@ _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
 import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
-import { SVG as SVG8, useClassNames as useClassNames41 } from "@marigold/system";
-import { jsx as jsx72, jsxs as jsxs26 } from "react/jsx-runtime";
+import { SVG as SVG8, useClassNames as useClassNames46 } from "@marigold/system";
+import { jsx as jsx80, jsxs as jsxs27 } from "react/jsx-runtime";
 var ActionMenu = ({
   variant,
   size: size2,
   disabled,
   ...props
 }) => {
-  const classNames3 = useClassNames41({ component: "Menu", variant, size: size2 });
-  return /* @__PURE__ */ jsxs26(MenuTrigger2, { children: [
-    /* @__PURE__ */ jsx72(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx72(SVG8, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx72("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__ */ jsx72(_Popover, { children: /* @__PURE__ */ jsx72(Menu2, { ...props, className: classNames3.container, children: props.children }) })
+  const classNames3 = useClassNames46({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ jsxs27(MenuTrigger2, { children: [
+    /* @__PURE__ */ jsx80(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx80(SVG8, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx80("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
+    /* @__PURE__ */ jsx80(_Popover, { children: /* @__PURE__ */ jsx80(Menu2, { ...props, className: classNames3.container, children: props.children }) })
   ] });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-import { useRef as useRef2, useState as useState2 } from "react";
+import { useRef as useRef3, useState as useState2 } from "react";
 import { useButton } from "@react-aria/button";
-import { cn as cn40, useClassNames as useClassNames42 } from "@marigold/system";
+import { cn as cn46, useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/SectionMessage/Context.tsx
-import { createContext as createContext8, useContext as useContext15 } from "react";
-var SectionMessageContext = createContext8({});
-var useSectionMessageContext = () => useContext15(SectionMessageContext);
+import { createContext as createContext9, useContext as useContext17 } from "react";
+var SectionMessageContext = createContext9({});
+var useSectionMessageContext = () => useContext17(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
-import { cn as cn38 } from "@marigold/system";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { cn as cn44 } from "@marigold/system";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx73("div", { className: cn38("[grid-area:content]", classNames3.content), children });
+  return /* @__PURE__ */ jsx81("div", { className: cn44("[grid-area:content]", classNames3.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
-import { cn as cn39 } from "@marigold/system";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { cn as cn45 } from "@marigold/system";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx74("div", { className: cn39("[grid-area:title]", classNames3.title), children });
+  return /* @__PURE__ */ jsx82("div", { className: cn45("[grid-area:title]", classNames3.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-import { jsx as jsx75, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs28 } from "react/jsx-runtime";
 var icons = {
-  success: () => /* @__PURE__ */ jsx75(
+  success: () => /* @__PURE__ */ jsx83(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsx83(
         "path",
         {
           fillRule: "evenodd",
@@ -3236,13 +3409,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ jsx75(
+  info: () => /* @__PURE__ */ jsx83(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsx83(
         "path",
         {
           fillRule: "evenodd",
@@ -3252,13 +3425,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx75(
+  warning: () => /* @__PURE__ */ jsx83(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsx83(
         "path",
         {
           fillRule: "evenodd",
@@ -3268,13 +3441,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx75(
+  error: () => /* @__PURE__ */ jsx83(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx75(
+      children: /* @__PURE__ */ jsx83(
         "path",
         {
           fillRule: "evenodd",
@@ -3294,8 +3467,8 @@ var SectionMessage = ({
   onCloseChange,
   ...props
 }) => {
-  const buttonRef = useRef2(null);
-  const classNames3 = useClassNames42({
+  const buttonRef = useRef3(null);
+  const classNames3 = useClassNames47({
     component: "SectionMessage",
     variant,
     size: size2
@@ -3311,30 +3484,22 @@ var SectionMessage = ({
     }
   };
   if (!isCurrentlyVisible) return null;
-  return /* @__PURE__ */ jsx75(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsx83(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsxs28(
     "div",
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
-      className: cn40("grid auto-rows-min", classNames3.container),
+      className: cn46("grid auto-rows-min", classNames3.container),
       children: [
-        /* @__PURE__ */ jsx75("div", { className: cn40("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ jsx75(Icon4, {}) }),
-        closeButton && /* @__PURE__ */ jsx75(
-          "button",
+        /* @__PURE__ */ jsx83("div", { className: cn46("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ jsx83(Icon4, {}) }),
+        closeButton && /* @__PURE__ */ jsx83(
+          CloseButton,
           {
             ...buttonProps,
             ref: buttonRef,
             "aria-label": "close",
-            className: cn40("[grid-area:close]", classNames3.close),
-            onClick: handleClose,
-            children: /* @__PURE__ */ jsx75("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx75(
-              "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: cn46("[grid-area:close]", classNames3.close),
+            onPress: handleClose
           }
         ),
         children
@@ -3347,7 +3512,7 @@ SectionMessage.Content = SectionMessageContent;
 
 // src/Multiselect/Multiselect.tsx
 import {
-  Button as Button5,
+  Button as Button6,
   ButtonContext,
   FieldErrorContext as FieldErrorContext2,
   InputContext,
@@ -3552,7 +3717,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
 import * as React11 from "react";
-import { forwardRef as forwardRef22, useMemo as useMemo5 } from "react";
+import { forwardRef as forwardRef23, useMemo as useMemo5 } from "react";
 
 // ../../node_modules/.pnpm/@babel+runtime@7.27.0/node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(a, n) {
@@ -3660,11 +3825,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
 import * as React10 from "react";
-import { useMemo as useMemo4, Fragment as Fragment8, useRef as useRef5, useCallback as useCallback3, useEffect as useEffect3, Component } from "react";
+import { useMemo as useMemo4, Fragment as Fragment8, useRef as useRef6, useCallback as useCallback3, useEffect as useEffect3, Component } from "react";
 
 // ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.0_react@19.1.0/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 import * as React8 from "react";
-import { useContext as useContext17, forwardRef as forwardRef21 } from "react";
+import { useContext as useContext19, forwardRef as forwardRef22 } from "react";
 
 // ../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
 var isDevelopment = false;
@@ -4852,15 +5017,15 @@ var EmotionCacheContext = /* @__PURE__ */ React8.createContext(
 );
 var CacheProvider = EmotionCacheContext.Provider;
 var withEmotionCache = function withEmotionCache2(func) {
-  return /* @__PURE__ */ forwardRef21(function(props, ref) {
-    var cache = useContext17(EmotionCacheContext);
+  return /* @__PURE__ */ forwardRef22(function(props, ref) {
+    var cache = useContext19(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
 if (!isBrowser4) {
   withEmotionCache = function withEmotionCache3(func) {
     return function(props) {
-      var cache = useContext17(EmotionCacheContext);
+      var cache = useContext19(EmotionCacheContext);
       if (cache === null) {
         cache = createCache({
           key: "css"
@@ -4944,7 +5109,7 @@ var Emotion$1 = Emotion;
 import * as React9 from "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);
@@ -4962,7 +5127,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];
@@ -4992,7 +5157,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
-import { useContext as useContext19, useRef as useRef4, useState as useState4, useMemo as useMemo3, useCallback as useCallback2, createContext as createContext10 } from "react";
+import { useContext as useContext21, useRef as useRef5, useState as useState4, useMemo as useMemo3, useCallback as useCallback2, createContext as createContext11 } from "react";
 import { createPortal } from "react-dom";
 
 // ../../node_modules/.pnpm/@floating-ui+utils@0.2.9/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
@@ -5729,11 +5894,11 @@ var menuCSS = function menuCSS2(_ref23, unstyled) {
     marginTop: spacing2.menuGutter
   });
 };
-var PortalPlacementContext = /* @__PURE__ */ createContext10(null);
+var PortalPlacementContext = /* @__PURE__ */ createContext11(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 = useContext19(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
-  var ref = useRef4(null);
+  var _ref3 = useContext21(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
+  var ref = useRef5(null);
   var _useState = useState4(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
   var _useState3 = useState4(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
   var controlHeight2 = theme.spacing.controlHeight;
@@ -5765,7 +5930,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
@@ -5787,7 +5952,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
   }), {
@@ -5807,7 +5972,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", {
@@ -5817,7 +5982,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", {
@@ -5837,8 +6002,8 @@ 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 = useRef4(null);
-  var cleanupRef = useRef4(null);
+  var menuPortalRef = useRef5(null);
+  var cleanupRef = useRef5(null);
   var _useState5 = useState4(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
   var portalPlacementContext = useMemo3(function() {
     return {
@@ -5880,7 +6045,7 @@ var MenuPortal = function MenuPortal2(props) {
     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,
@@ -5889,7 +6054,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), "menuPortal", {
     "menu-portal": true
   }), innerProps), children);
-  return jsx76(PortalPlacementContext.Provider, {
+  return jsx84(PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /* @__PURE__ */ createPortal(menuWrapper, appendTo) : menuWrapper);
 };
@@ -5905,7 +6070,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);
@@ -5926,7 +6091,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
@@ -5942,7 +6107,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);
 };
@@ -5963,7 +6128,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",
@@ -5973,16 +6138,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"
   }));
 };
@@ -6003,18 +6168,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;
@@ -6030,7 +6195,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
   })));
 };
@@ -6054,7 +6219,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",
@@ -6069,20 +6234,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
   }));
@@ -6114,7 +6279,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,
@@ -6135,16 +6300,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;
@@ -6166,7 +6331,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));
 };
@@ -6218,11 +6383,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),
@@ -6276,35 +6441,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
@@ -6337,7 +6502,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,
@@ -6361,7 +6526,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);
 };
@@ -6383,7 +6548,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);
@@ -6485,7 +6650,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));
 };
@@ -6620,18 +6785,18 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx76(Fragment8, null, jsx76("span", {
+  var ScreenReaderText = jsx84(Fragment8, 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(Fragment8, null, jsx76(A11yText$1, {
+  return jsx84(Fragment8, 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",
@@ -6944,7 +7109,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({
@@ -6976,10 +7141,10 @@ 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 = useRef5(false);
-  var isTop = useRef5(false);
-  var touchStart = useRef5(0);
-  var scrollTarget = useRef5(null);
+  var isBottom = useRef6(false);
+  var isTop = useRef6(false);
+  var touchStart = useRef6(0);
+  var scrollTarget = useRef6(null);
   var handleEventDelta = useCallback3(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;
@@ -7086,8 +7251,8 @@ var listenerOptions = {
 };
 function useScrollLock(_ref3) {
   var isEnabled = _ref3.isEnabled, _ref$accountForScroll = _ref3.accountForScrollbars, accountForScrollbars = _ref$accountForScroll === void 0 ? true : _ref$accountForScroll;
-  var originalStyles = useRef5({});
-  var scrollTarget = useRef5(null);
+  var originalStyles = useRef6({});
+  var scrollTarget = useRef6(null);
   var addScrollLock = useCallback3(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
@@ -7186,7 +7351,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx76(Fragment8, null, lockEnabled && jsx76("div", {
+  return jsx84(Fragment8, null, lockEnabled && jsx84("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -7205,7 +7370,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,
@@ -8780,7 +8945,7 @@ var import_typeof5 = __toESM(require_typeof());
 var import_taggedTemplateLiteral2 = __toESM(require_taggedTemplateLiteral());
 var import_defineProperty3 = __toESM(require_defineProperty());
 import "react-dom";
-var StateManagedSelect = /* @__PURE__ */ forwardRef22(function(props, ref) {
+var StateManagedSelect = /* @__PURE__ */ forwardRef23(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React11.createElement(Select, _extends({
     ref
@@ -8788,7 +8953,7 @@ var StateManagedSelect = /* @__PURE__ */ forwardRef22(function(props, ref) {
 });
 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
 import { useId as $83Elw$useId, useLabels as $83Elw$useLabels } from "@react-aria/utils";
 function $d191a55c9702f145$export$8467354a121f1b9f(props) {
   let { id, label, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, labelElementType = "label" } = props;
@@ -8801,7 +8966,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, $83Elw$useLabels)({
     id,
     "aria-label": ariaLabel,
@@ -8813,7 +8978,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
 import { useSlotId as $2kC82$useSlotId, mergeProps as $2kC82$mergeProps } from "@react-aria/utils";
 function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
   let { description, errorMessage, isInvalid, validationState } = props;
@@ -8852,8 +9017,8 @@ function $2baaea4c71418dea$export$294aa081a6c6f55d(props) {
 
 // src/Multiselect/Multiselect.tsx
 import { useId } from "@react-aria/utils";
-import { cn as cn41, useClassNames as useClassNames43 } from "@marigold/system";
-import { jsx as jsx78, jsxs as jsxs28 } from "react/jsx-runtime";
+import { cn as cn47, useClassNames as useClassNames48 } from "@marigold/system";
+import { jsx as jsx86, jsxs as jsxs29 } from "react/jsx-runtime";
 var propsToBeRemoved = [
   "clearValue",
   "getStyles",
@@ -8879,7 +9044,7 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
     },
     {}
   );
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx86(
     _Input2,
     {
       disabled: props.isDisabled,
@@ -8890,20 +9055,20 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
   );
 };
 var MultiValueRemove2 = ({ innerProps }) => {
-  return /* @__PURE__ */ jsx78(Button5, { slot: "remove", ...innerProps, children: /* @__PURE__ */ jsx78("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx78("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+  return /* @__PURE__ */ jsx86(Button6, { slot: "remove", ...innerProps, children: /* @__PURE__ */ jsx86("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx86("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var getClassNames = (classNames3) => ({
-  control: () => cn41(
+  control: () => cn47(
     "relative flex items-center box-border flex-wrap justify-between",
     classNames3.container
   ),
   container: () => "pointer-events-auto",
   indicatorSeparator: () => "hidden",
-  menu: () => cn41("b", classNames3.listContainer),
-  menuList: () => cn41("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
-  multiValue: () => cn41(classNames3.tag, "m-0 "),
+  menu: () => cn47("b", classNames3.listContainer),
+  menuList: () => cn47("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
+  multiValue: () => cn47(classNames3.tag, "m-0 "),
   multiValueLabel: () => "p-0",
-  option: ({ isFocused }) => cn41(classNames3.option, { isFocused }),
+  option: ({ isFocused }) => cn47(classNames3.option, { isFocused }),
   placeholder: () => "hidden",
   valueContainer: () => classNames3.valueContainer
 });
@@ -8924,7 +9089,7 @@ var Multiselect = ({
   onSelectionChange,
   ...rest
 }) => {
-  const classNames3 = useClassNames43({
+  const classNames3 = useClassNames48({
     component: "MultiSelect",
     size: size2,
     variant
@@ -8942,7 +9107,7 @@ var Multiselect = ({
     label: props.label,
     errorMessage
   });
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx86(
     Provider2,
     {
       values: [
@@ -8968,20 +9133,20 @@ var Multiselect = ({
             // react-select doesn't handle readonly so we had to do it manually here
             // keep to the button disabled in read only to prevent menu from opening
             isDisabled: disabled || readOnly,
-            className: cn41("flex items-center", classNames3.closeButton)
+            className: cn47("flex items-center", classNames3.closeButton)
           }
         ]
       ],
-      children: /* @__PURE__ */ jsxs28(
+      children: /* @__PURE__ */ jsxs29(
         "div",
         {
-          className: cn41(classNames3.field, "group/field"),
+          className: cn47(classNames3.field, "group/field"),
           "data-required": props.required,
           "data-invalid": error,
           "data-readonly": readOnly,
           children: [
-            props.label && /* @__PURE__ */ jsx78(_Label, { ...labelProps, children: props.label }),
-            /* @__PURE__ */ jsx78(
+            props.label && /* @__PURE__ */ jsx86(_Label, { ...labelProps, children: props.label }),
+            /* @__PURE__ */ jsx86(
               StateManagedSelect$1,
               {
                 ...props,
@@ -9015,19 +9180,19 @@ var Multiselect = ({
                 components: {
                   Input: Input4,
                   MultiValueRemove: MultiValueRemove2,
-                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ jsx78(
+                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ jsx86(
                     "button",
                     {
                       ...innerProps,
                       disabled: isDisabled,
                       className: classNames3.icon,
-                      children: /* @__PURE__ */ jsx78(ChevronDown, { className: "size-4" })
+                      children: /* @__PURE__ */ jsx86(ChevronDown, { className: "size-4" })
                     }
                   )
                 }
               }
             ),
-            /* @__PURE__ */ jsx78(HelpText, { description, errorMessage })
+            /* @__PURE__ */ jsx86(HelpText, { description, errorMessage })
           ]
         }
       )
@@ -9036,15 +9201,15 @@ var Multiselect = ({
 };
 
 // src/NumberField/NumberField.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 import { Group as Group4, Input as Input5, NumberField } from "react-aria-components";
-import { cn as cn43, useClassNames as useClassNames44 } from "@marigold/system";
+import { cn as cn49, useClassNames as useClassNames49 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import { Button as Button6 } from "react-aria-components";
-import { cn as cn42 } from "@marigold/system";
-import { jsx as jsx79 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx79("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx79(
+import { Button as Button7 } from "react-aria-components";
+import { cn as cn48 } from "@marigold/system";
+import { jsx as jsx87 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx87("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx87(
   "path",
   {
     fillRule: "evenodd",
@@ -9052,7 +9217,7 @@ var Plus = () => /* @__PURE__ */ jsx79("svg", { width: 16, height: 16, viewBox:
     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__ */ jsx79("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx79(
+var Minus = () => /* @__PURE__ */ jsx87("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx87(
   "path",
   {
     fillRule: "evenodd",
@@ -9062,10 +9227,10 @@ var Minus = () => /* @__PURE__ */ jsx79("svg", { width: 16, height: 16, viewBox:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx79(
-    Button6,
+  return /* @__PURE__ */ jsx87(
+    Button7,
     {
-      className: cn42(
+      className: cn48(
         [
           "flex items-center justify-center",
           "cursor-pointer data-disabled:cursor-not-allowed"
@@ -9073,14 +9238,14 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx79(Icon4, {})
+      children: /* @__PURE__ */ jsx87(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx80, jsxs as jsxs29 } from "react/jsx-runtime";
-var _NumberField = forwardRef23(
+import { jsx as jsx88, jsxs as jsxs30 } from "react/jsx-runtime";
+var _NumberField = forwardRef24(
   ({
     variant,
     size: size2,
@@ -9091,7 +9256,7 @@ var _NumberField = forwardRef23(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames44({
+    const classNames3 = useClassNames49({
       component: "NumberField",
       size: size2,
       variant
@@ -9104,15 +9269,15 @@ var _NumberField = forwardRef23(
       ...rest
     };
     const showStepper = !hideStepper && !readOnly;
-    return /* @__PURE__ */ jsx80(
+    return /* @__PURE__ */ jsx88(
       FieldBase,
       {
         as: NumberField,
         ...props,
         "data-readonly": readOnly ? "true" : void 0,
         "data-stepper": showStepper ? "true" : void 0,
-        children: /* @__PURE__ */ jsxs29(Group4, { className: cn43("flex items-stretch", classNames3.group), children: [
-          showStepper && /* @__PURE__ */ jsx80(
+        children: /* @__PURE__ */ jsxs30(Group4, { className: cn49("flex items-stretch", classNames3.group), children: [
+          showStepper && /* @__PURE__ */ jsx88(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -9120,14 +9285,14 @@ var _NumberField = forwardRef23(
               slot: "decrement"
             }
           ),
-          /* @__PURE__ */ jsx80(
+          /* @__PURE__ */ jsx88(
             Input5,
             {
               ref,
-              className: cn43("h-full flex-1 outline-none", classNames3.input)
+              className: cn49("h-full flex-1 outline-none", classNames3.input)
             }
           ),
-          showStepper && /* @__PURE__ */ jsx80(
+          showStepper && /* @__PURE__ */ jsx88(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -9142,13 +9307,14 @@ var _NumberField = forwardRef23(
 );
 
 // src/Pagination/Pagination.tsx
-import { useEffect as useEffect6, useRef as useRef8, useState as useState6 } from "react";
-import { cn as cn45, useClassNames as useClassNames47 } from "@marigold/system";
+import { useEffect as useEffect4, useRef as useRef9, useState as useState5 } from "react";
+import { FocusScope as FocusScope2, useFocusManager } from "@react-aria/focus";
+import { useClassNames as useClassNames52 } from "@marigold/system";
 
 // src/Pagination/Ellipsis.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var Ellipsis = () => {
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx89(
     "span",
     {
       className: "text-text-base flex h-8 w-8 items-center justify-center",
@@ -9159,13 +9325,13 @@ var Ellipsis = () => {
 };
 
 // src/Pagination/NavigationButton.tsx
-import React12, { useEffect as useEffect4 } from "react";
+import { useRef as useRef7 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
-import { cn as cn44, useClassNames as useClassNames45 } from "@marigold/system";
-import { jsxs as jsxs30 } from "react/jsx-runtime";
+import { cn as cn50, useClassNames as useClassNames50 } from "@marigold/system";
+import { jsxs as jsxs31 } from "react/jsx-runtime";
 var NavigationButton = (props) => {
-  const ref = React12.useRef(null);
-  const classNames3 = useClassNames45({
+  const ref = useRef7(null);
+  const classNames3 = useClassNames50({
     component: "Pagination"
   });
   let { buttonProps } = useButton2(props, ref);
@@ -9178,20 +9344,14 @@ var NavigationButton = (props) => {
     position: position2,
     ...rest
   } = props;
-  useEffect4(() => {
-    if (registerRef) {
-      registerRef(ref.current);
-      return () => registerRef(null);
-    }
-  }, [registerRef]);
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "button",
     {
       ref,
       ...buttonProps,
       ...rest,
       disabled: isDisabled,
-      className: cn44(classNames3.navigationButton, controlLabel && "w-24 px-2"),
+      className: cn50(classNames3.navigationButton, controlLabel && "w-24 px-2"),
       "data-selected": isSelected,
       children: [
         position2 === "left" && children,
@@ -9203,24 +9363,18 @@ var NavigationButton = (props) => {
 };
 
 // src/Pagination/PageButton.tsx
-import { useEffect as useEffect5, useRef as useRef6 } from "react";
+import { useRef as useRef8 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
-import { useClassNames as useClassNames46 } from "@marigold/system";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { useClassNames as useClassNames51 } from "@marigold/system";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var PageButton = (props) => {
-  const ref = useRef6(null);
-  const classNames3 = useClassNames46({
+  const ref = useRef8(null);
+  const classNames3 = useClassNames51({
     component: "Pagination"
   });
   let { buttonProps } = useButton3(props, ref);
-  let { page, selected, registerRef, isDisabled } = props;
-  useEffect5(() => {
-    if (registerRef) {
-      registerRef(ref.current);
-      return () => registerRef(null);
-    }
-  }, [registerRef]);
-  return /* @__PURE__ */ jsx82(
+  let { page, selected, isDisabled } = props;
+  return /* @__PURE__ */ jsx90(
     "button",
     {
       ref,
@@ -9236,122 +9390,6 @@ var PageButton = (props) => {
   );
 };
 
-// src/Pagination/useKeyboardNavigation.tsx
-import { useCallback as useCallback4, useRef as useRef7, useState as useState5 } from "react";
-import { useKeyboard } from "@react-aria/interactions";
-var NavigationTypes = {
-  Prev: "prev",
-  Next: "next",
-  Page: "page",
-  Ellipsis: "ellipsis"
-};
-var useKeyboardNavigation = ({
-  page,
-  totalPages,
-  onChange: onChange2 = () => {
-  }
-}) => {
-  const containerRef = useRef7(null);
-  const [focusedItem, setFocusedItem] = useState5({
-    type: "page",
-    value: page
-  });
-  const navigationItems = useRef7([]);
-  const buttonRefs = useRef7(/* @__PURE__ */ new Map());
-  const isItemDisabled = useCallback4(
-    (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 = useCallback4(
-    (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 = useCallback4(
-    (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 } = 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 = useCallback4(
-    (type, value, ref) => {
-      const key = `${type}-${value}`;
-      if (ref) {
-        buttonRefs.current.set(key, ref);
-      } else {
-        buttonRefs.current.delete(key);
-      }
-    },
-    []
-  );
-  const setNavigationItems = useCallback4((items) => {
-    navigationItems.current = items;
-  }, []);
-  return {
-    containerRef,
-    keyboardProps,
-    registerRef,
-    setNavigationItems,
-    setFocusedItem
-  };
-};
-
 // src/Pagination/usePageRange.tsx
 var usePageRange = ({ currentPage, totalPages }) => {
   const getPageRange = () => {
@@ -9383,23 +9421,21 @@ var usePageRange = ({ currentPage, totalPages }) => {
 };
 
 // src/Pagination/Pagination.tsx
-import { jsx as jsx83, jsxs as jsxs31 } from "react/jsx-runtime";
-var _Pagination = ({
-  defaultPage = 1,
-  page,
-  totalItems,
+import { Fragment as Fragment9, jsx as jsx91, jsxs as jsxs32 } from "react/jsx-runtime";
+var InnerPagination = ({
+  currentPage,
   pageSize,
-  onChange: onChange2 = () => {
-  },
+  totalPages,
+  pageRange,
+  setCurrentPage,
+  onChange: onChange2,
   controlLabels
 }) => {
-  const [currentPage, setCurrentPage] = useState6(page != null ? page : defaultPage);
-  const totalPages = Math.ceil(totalItems / pageSize);
-  const isFirstRender = useRef8(true);
-  const classNames3 = useClassNames47({
-    component: "Pagination"
-  });
-  useEffect6(() => {
+  const focusManager = useFocusManager();
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages || totalPages === 0;
+  const isFirstRender = useRef9(true);
+  useEffect4(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
@@ -9408,96 +9444,110 @@ 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 = useClassNames52({ 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__ */ jsxs32(Fragment9, { children: [
+    /* @__PURE__ */ jsx91(
+      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__ */ jsx91(ChevronLeft, { className: classNames3.icon })
+      }
+    ),
+    /* @__PURE__ */ jsx91("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
+      (pageNumber, index2) => pageNumber === "ellipsis" ? /* @__PURE__ */ jsx91(Ellipsis, {}, `ellipsis-${index2}`) : /* @__PURE__ */ jsx91(
+        PageButton,
+        {
+          page: pageNumber,
+          selected: pageNumber === currentPage,
+          onClick: () => handlePageChange(pageNumber),
+          onKeyDown: handleKeyDown(() => handlePageChange(pageNumber))
+        },
+        pageNumber
+      )
+    ) : /* @__PURE__ */ jsx91(PageButton, { page: 1, isDisabled: true }, 1) }),
+    /* @__PURE__ */ jsx91(
+      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__ */ jsx91(ChevronRight, { className: classNames3.icon })
+      }
+    )
+  ] });
+};
+var _Pagination = ({
+  defaultPage = 1,
+  page,
+  totalItems,
+  pageSize,
+  ...props
+}) => {
+  const [currentPage, setCurrentPage] = useState5(page != null ? page : defaultPage);
+  const totalPages = Math.ceil(totalItems / pageSize);
   const pageRange = usePageRange({ currentPage, totalPages });
-  useEffect6(() => {
-    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]);
-  useEffect6(() => {
-    setFocusedItem({ type: NavigationTypes.Page, value: currentPage });
-  }, [currentPage, setFocusedItem]);
-  const isFirstPage = currentPage === 1;
-  const isLastPage = currentPage === totalPages || totalPages === 0;
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsx91(
     "nav",
     {
       className: "flex items-center justify-center space-x-2",
       "aria-label": `Page ${currentPage} of ${totalPages}`,
-      ...keyboardProps,
-      children: [
-        /* @__PURE__ */ jsx83(
-          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__ */ jsx83(ChevronLeft, { className: cn45(classNames3.icon) })
-          }
-        ),
-        /* @__PURE__ */ jsx83("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
-          (pageNumber, index2) => pageNumber === "ellipsis" ? /* @__PURE__ */ jsx83(Ellipsis, {}, `ellipsis-${index2}`) : /* @__PURE__ */ jsx83(
-            PageButton,
-            {
-              page: pageNumber,
-              selected: pageNumber === currentPage,
-              onClick: () => handlePageChange(pageNumber),
-              registerRef: (ref) => registerRef(NavigationTypes.Page, pageNumber, ref)
-            },
-            pageNumber
-          )
-        ) : /* @__PURE__ */ jsx83(PageButton, { page: 1, isDisabled: true }, 1) }),
-        /* @__PURE__ */ jsx83(
-          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__ */ jsx83(ChevronRight, { className: cn45(classNames3.icon) })
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsx91(FocusScope2, { restoreFocus: true, children: /* @__PURE__ */ jsx91(
+        InnerPagination,
+        {
+          pageSize,
+          currentPage,
+          totalPages,
+          pageRange,
+          setCurrentPage,
+          ...props
+        }
+      ) })
     }
   );
 };
 
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef24
+  forwardRef as forwardRef25
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn47, useClassNames as useClassNames49 } from "@marigold/system";
+import { cn as cn52, useClassNames as useClassNames54 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext11, useContext as useContext20 } from "react";
-var RadioGroupContext = createContext11(
+import { createContext as createContext12, useContext as useContext22 } from "react";
+var RadioGroupContext = createContext12(
   null
 );
-var useRadioGroupContext = () => useContext20(RadioGroupContext);
+var useRadioGroupContext = () => useContext22(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn46, useClassNames as useClassNames48 } from "@marigold/system";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { cn as cn51, useClassNames as useClassNames53 } from "@marigold/system";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
   size: size2,
@@ -9513,7 +9563,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames3 = useClassNames48({ component: "Radio", variant, size: size2 });
+  const classNames3 = useClassNames53({ component: "Radio", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -9521,7 +9571,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx92(
     FieldBase,
     {
       as: RadioGroup,
@@ -9532,18 +9582,18 @@ var _RadioGroup = ({
       variant,
       size: size2,
       ...props,
-      children: /* @__PURE__ */ jsx84(
+      children: /* @__PURE__ */ jsx92(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn46(
+          className: cn51(
             classNames3.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx84(RadioGroupContext.Provider, { value: { width, variant, size: size2 }, children })
+          children: /* @__PURE__ */ jsx92(RadioGroupContext.Provider, { value: { width, variant, size: size2 }, children })
         }
       )
     }
@@ -9551,33 +9601,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment9, jsx as jsx85, jsxs as jsxs32 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx85("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx85("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx85(
+import { Fragment as Fragment10, jsx as jsx93, jsxs as jsxs33 } from "react/jsx-runtime";
+var Dot = () => /* @__PURE__ */ jsx93("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx93("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx93(
   "div",
   {
-    className: cn47(
+    className: cn52(
       "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__ */ jsx85(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx93(Dot, {}) : null
   }
 );
-var _Radio = forwardRef24(
+var _Radio = forwardRef25(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size: size2, width: groupWidth } = useRadioGroupContext();
-    const classNames3 = useClassNames49({
+    const classNames3 = useClassNames54({
       component: "Radio",
       variant: variant || props.variant,
       size: size2 || props.size
     });
-    return /* @__PURE__ */ jsx85(
+    return /* @__PURE__ */ jsx93(
       Radio,
       {
         ref,
-        className: cn47(
+        className: cn52(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -9586,18 +9636,18 @@ var _Radio = forwardRef24(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs32(Fragment9, { children: [
-          /* @__PURE__ */ jsx85(
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs33(Fragment10, { children: [
+          /* @__PURE__ */ jsx93(
             Icon3,
             {
               checked: isSelected,
-              className: cn47(
+              className: cn52(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames3.radio
               )
             }
           ),
-          /* @__PURE__ */ jsx85("div", { className: classNames3.label, children })
+          /* @__PURE__ */ jsx93("div", { className: classNames3.label, children })
         ] })
       }
     );
@@ -9606,10 +9656,10 @@ var _Radio = forwardRef24(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-import { forwardRef as forwardRef25 } from "react";
+import { forwardRef as forwardRef26 } from "react";
 import { SearchField } from "react-aria-components";
-import { jsx as jsx86 } from "react/jsx-runtime";
-var _SearchField = forwardRef25(
+import { jsx as jsx94 } from "react/jsx-runtime";
+var _SearchField = forwardRef26(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -9618,7 +9668,7 @@ var _SearchField = forwardRef25(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ jsx86(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx86(
+    return /* @__PURE__ */ jsx94(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx94(
       SearchInput,
       {
         ref,
@@ -9629,11 +9679,11 @@ var _SearchField = forwardRef25(
 );
 
 // src/Select/Select.tsx
-import { forwardRef as forwardRef26 } from "react";
+import { forwardRef as forwardRef27 } from "react";
 import { Select as Select2, SelectValue } from "react-aria-components";
-import { cn as cn48, useClassNames as useClassNames50 } from "@marigold/system";
-import { jsx as jsx87, jsxs as jsxs33 } from "react/jsx-runtime";
-var _Select = forwardRef26(
+import { cn as cn53, useClassNames as useClassNames55 } from "@marigold/system";
+import { jsx as jsx95, jsxs as jsxs34 } from "react/jsx-runtime";
+var _Select = forwardRef27(
   ({
     disabled,
     required,
@@ -9653,22 +9703,22 @@ var _Select = forwardRef26(
       onSelectionChange: onChange2,
       ...rest
     };
-    const classNames3 = useClassNames50({ component: "Select", variant, size: size2 });
-    return /* @__PURE__ */ jsxs33(FieldBase, { as: Select2, ref, variant, size: size2, ...props, children: [
-      /* @__PURE__ */ jsxs33(
+    const classNames3 = useClassNames55({ component: "Select", variant, size: size2 });
+    return /* @__PURE__ */ jsxs34(FieldBase, { as: Select2, ref, variant, size: size2, ...props, children: [
+      /* @__PURE__ */ jsxs34(
         IconButton,
         {
-          className: cn48(
+          className: cn53(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames3.select
           ),
           children: [
-            /* @__PURE__ */ jsx87(SelectValue, { className: "[&>[slot=description]]:hidden" }),
-            /* @__PURE__ */ jsx87(ChevronDown, { className: cn48("size-4", classNames3.icon) })
+            /* @__PURE__ */ jsx95(SelectValue, { className: "[&>[slot=description]]:hidden" }),
+            /* @__PURE__ */ jsx95(ChevronDown, { className: cn53("size-4", classNames3.icon) })
           ]
         }
       ),
-      /* @__PURE__ */ jsx87(_Popover, { children: /* @__PURE__ */ jsx87(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ jsx95(_Popover, { children: /* @__PURE__ */ jsx95(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -9677,36 +9727,36 @@ _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
 import {
-  forwardRef as forwardRef28
+  forwardRef as forwardRef29
 } from "react";
 import { GridList as SelectList } from "react-aria-components";
-import { cn as cn50, useClassNames as useClassNames51 } from "@marigold/system";
+import { cn as cn55, useClassNames as useClassNames56 } from "@marigold/system";
 
 // src/SelectList/Context.ts
-import { createContext as createContext12, useContext as useContext21 } from "react";
-var SelectListContext = createContext12(
+import { createContext as createContext13, useContext as useContext23 } from "react";
+var SelectListContext = createContext13(
   {}
 );
-var useSelectListContext = () => useContext21(SelectListContext);
+var useSelectListContext = () => useContext23(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
-import { forwardRef as forwardRef27 } from "react";
+import { forwardRef as forwardRef28 } from "react";
 import { GridListItem as SelectListItem } from "react-aria-components";
-import { cn as cn49 } from "@marigold/system";
-import { jsx as jsx88, jsxs as jsxs34 } from "react/jsx-runtime";
-var _SelectListItem = forwardRef27(
+import { cn as cn54 } from "@marigold/system";
+import { jsx as jsx96, jsxs as jsxs35 } from "react/jsx-runtime";
+var _SelectListItem = forwardRef28(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames3 } = useSelectListContext();
-    return /* @__PURE__ */ jsx88(
+    return /* @__PURE__ */ jsx96(
       SelectListItem,
       {
         textValue,
         ...props,
-        className: cn49("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.option),
+        className: cn54("group-[layout=grid]/list:flex-row", classNames3 == null ? void 0 : classNames3.option),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ jsxs34("div", { className: "flex gap-2", children: [
-          selectionMode === "multiple" && /* @__PURE__ */ jsx88(_Checkbox, { slot: "selection" }),
+        children: ({ selectionMode }) => /* @__PURE__ */ jsxs35("div", { className: "flex gap-2", children: [
+          selectionMode === "multiple" && /* @__PURE__ */ jsx96(_Checkbox, { slot: "selection" }),
           children
         ] })
       }
@@ -9715,21 +9765,21 @@ var _SelectListItem = forwardRef27(
 );
 
 // src/SelectList/SelectList.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
-var _SelectList = forwardRef28(
+import { jsx as jsx97 } from "react/jsx-runtime";
+var _SelectList = forwardRef29(
   ({ onChange: onChange2, ...rest }, ref) => {
-    const classNames3 = useClassNames51({ component: "ListBox" });
+    const classNames3 = useClassNames56({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange2,
       ...rest
     };
-    return /* @__PURE__ */ jsx89(SelectListContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx89("div", { className: classNames3.container, children: /* @__PURE__ */ jsx89(
+    return /* @__PURE__ */ jsx97(SelectListContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx97("div", { className: classNames3.container, children: /* @__PURE__ */ jsx97(
       SelectList,
       {
         ...props,
         layout: "grid",
         ref,
-        className: cn50(
+        className: cn55(
           "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames3.list
         ),
@@ -9741,25 +9791,25 @@ var _SelectList = forwardRef28(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-import { cn as cn51, createVar as createVar8, width as twWidth2 } from "@marigold/system";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { cn as cn56, createVar as createVar8, width as twWidth2 } from "@marigold/system";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ jsx90(
+}) => /* @__PURE__ */ jsx98(
   "div",
   {
     ...props,
-    className: cn51(["sticky h-(--height) overflow-auto", twWidth2[width]]),
+    className: cn56(["sticky h-(--height) overflow-auto", twWidth2[width]]),
     style: createVar8({ height }),
     children
   }
 );
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef29 } from "react";
+import { forwardRef as forwardRef30 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -9767,12 +9817,12 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn52,
+  cn as cn57,
   width as twWidth3,
-  useClassNames as useClassNames52
+  useClassNames as useClassNames57
 } from "@marigold/system";
-import { Fragment as Fragment10, jsx as jsx91, jsxs as jsxs35 } from "react/jsx-runtime";
-var _Slider = forwardRef29(
+import { Fragment as Fragment11, jsx as jsx99, jsxs as jsxs36 } from "react/jsx-runtime";
+var _Slider = forwardRef30(
   ({
     thumbLabels,
     variant,
@@ -9782,7 +9832,7 @@ var _Slider = forwardRef29(
     label,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames52({
+    const classNames3 = useClassNames57({
       component: "Slider",
       variant,
       size: size2
@@ -9791,11 +9841,11 @@ var _Slider = forwardRef29(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ jsxs35(
+    return /* @__PURE__ */ jsxs36(
       FieldBase,
       {
         as: Slider,
-        className: cn52(
+        className: cn57(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames3.container,
           twWidth3[width]
@@ -9803,26 +9853,26 @@ var _Slider = forwardRef29(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx91(_Label, { children: props.children && props.children || label && label }),
-          /* @__PURE__ */ jsx91(SliderOutput, { className: cn52("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx91(
+          /* @__PURE__ */ jsx99(_Label, { children: props.children && props.children || label && label }),
+          /* @__PURE__ */ jsx99(SliderOutput, { className: cn57("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx99(
             SliderTrack,
             {
-              className: cn52("relative col-span-2 h-2 w-full", classNames3.track),
-              children: ({ state }) => /* @__PURE__ */ jsxs35(Fragment10, { children: [
-                /* @__PURE__ */ jsx91(
+              className: cn57("relative col-span-2 h-2 w-full", classNames3.track),
+              children: ({ state }) => /* @__PURE__ */ jsxs36(Fragment11, { children: [
+                /* @__PURE__ */ jsx99(
                   "div",
                   {
-                    className: cn52(
+                    className: cn57(
                       "absolute top-[50%] h-2 w-full translate-y-[-50%]",
                       classNames3.track
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx91(
+                /* @__PURE__ */ jsx99(
                   "div",
                   {
-                    className: cn52(
+                    className: cn57(
                       "absolute top-[50%] h-2 translate-y-[-50%]",
                       classNames3.selectedTrack
                     ),
@@ -9832,10 +9882,10 @@ var _Slider = forwardRef29(
                     }
                   }
                 ),
-                state.values.map((_, i) => /* @__PURE__ */ jsx91(
+                state.values.map((_, i) => /* @__PURE__ */ jsx99(
                   SliderThumb,
                   {
-                    className: cn52("top-1/2 cursor-pointer", classNames3.thumb),
+                    className: cn57("top-1/2 cursor-pointer", classNames3.thumb),
                     index: i,
                     "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
                     name: thumbLabels == null ? void 0 : thumbLabels[i]
@@ -9852,12 +9902,12 @@ var _Slider = forwardRef29(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
-var Split = () => /* @__PURE__ */ jsx92("div", { role: "separator", className: "grow" });
+import { jsx as jsx100 } from "react/jsx-runtime";
+var Split = () => /* @__PURE__ */ jsx100("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-import { alignment as alignment2, cn as cn53, gapSpace as gapSpace8 } from "@marigold/system";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { alignment as alignment2, cn as cn58, gapSpace as gapSpace8 } from "@marigold/system";
+import { jsx as jsx101 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -9867,10 +9917,10 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx101(
     "div",
     {
-      className: cn53(
+      className: cn58(
         "flex flex-col",
         gapSpace8[space],
         alignX && ((_b = (_a = alignment2) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -9884,46 +9934,46 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef30 } from "react";
+import { forwardRef as forwardRef31 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn54,
+  cn as cn59,
   width as twWidth4,
-  useClassNames as useClassNames53
+  useClassNames as useClassNames58
 } from "@marigold/system";
-import { jsx as jsx94, jsxs as jsxs36 } from "react/jsx-runtime";
-var _Switch = forwardRef30(
+import { jsx as jsx102, jsxs as jsxs37 } from "react/jsx-runtime";
+var _Switch = forwardRef31(
   ({
     variant,
     size: size2,
     width = "full",
-    children,
+    label,
     selected,
     disabled,
     readOnly,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames53({ component: "Switch", size: size2, variant });
+    const classNames3 = useClassNames58({ component: "Switch", size: size2, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs37(
       Switch,
       {
         ...props,
         ref,
-        className: cn54(
+        className: cn59(
           twWidth4[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames3.container
         ),
         children: [
-          /* @__PURE__ */ jsx94(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ jsx94("div", { className: "relative", children: /* @__PURE__ */ jsx94("div", { className: classNames3.track, children: /* @__PURE__ */ jsx94("div", { className: classNames3.thumb }) }) })
+          (props.children || label) && /* @__PURE__ */ jsx102(_Label, { elementType: "span", children: props.children || label }),
+          /* @__PURE__ */ jsx102("div", { className: "relative", children: /* @__PURE__ */ jsx102("div", { className: classNames3.track, children: /* @__PURE__ */ jsx102("div", { className: classNames3.thumb }) }) })
         ]
       }
     );
@@ -9931,26 +9981,26 @@ var _Switch = forwardRef30(
 );
 
 // src/Table/Table.tsx
-import { useRef as useRef15 } from "react";
+import { useRef as useRef16 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   TableBody as Body2,
   Cell,
   Column,
-  TableHeader as Header4,
+  TableHeader as Header5,
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn61, useClassNames as useClassNames55 } from "@marigold/system";
+import { cn as cn66, useClassNames as useClassNames60 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext13, useContext as useContext22 } from "react";
-var TableContext = createContext13({});
-var useTableContext = () => useContext22(TableContext);
+import { createContext as createContext14, useContext as useContext24 } from "react";
+var TableContext = createContext14({});
+var useTableContext = () => useContext24(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
 var TableBody = ({
   children,
   className,
@@ -9959,7 +10009,7 @@ var TableBody = ({
   const { rowGroupProps } = useTableRowGroup();
   const { state, classNames: classNames3 } = useTableContext();
   if (state.collection.size === 0 && emptyState) {
-    return /* @__PURE__ */ jsx95("tbody", { className, children: /* @__PURE__ */ jsx95("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", children: /* @__PURE__ */ jsx95(
+    return /* @__PURE__ */ jsx103("tbody", { className, children: /* @__PURE__ */ jsx103("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", children: /* @__PURE__ */ jsx103(
       "td",
       {
         className: classNames3 == null ? void 0 : classNames3.cell,
@@ -9969,18 +10019,18 @@ var TableBody = ({
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx95("tbody", { ...rowGroupProps, className, children });
+  return /* @__PURE__ */ jsx103("tbody", { ...rowGroupProps, className, children });
 };
 
 // src/Table/TableCell.tsx
-import { useRef as useRef9 } from "react";
+import { useRef as useRef10 } from "react";
 import { useFocusRing } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps2 } from "@react-aria/utils";
-import { cn as cn55, useStateProps } from "@marigold/system";
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { cn as cn60, useStateProps } from "@marigold/system";
+import { jsx as jsx104 } from "react/jsx-runtime";
 var TableCell = ({ cell, align = "left" }) => {
-  const ref = useRef9(null);
+  const ref = useRef10(null);
   const { interactive, state, classNames: classNames3 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -10001,11 +10051,11 @@ var TableCell = ({ cell, align = "left" }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing();
   const stateProps = useStateProps({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx104(
     "td",
     {
       ref,
-      className: cn55(classNames3 == null ? void 0 : classNames3.cell),
+      className: cn60(classNames3 == null ? void 0 : classNames3.cell),
       ...mergeProps2(cellProps, focusProps),
       ...stateProps,
       align,
@@ -10015,11 +10065,11 @@ var TableCell = ({ cell, align = "left" }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { useRef as useRef10 } from "react";
+import { useRef as useRef11 } from "react";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { cn as cn56, useStateProps as useStateProps2 } from "@marigold/system";
+import { cn as cn61, useStateProps as useStateProps2 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -10042,9 +10092,9 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef10(null);
+  const ref = useRef11(null);
   const { state, classNames: classNames3 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -10059,33 +10109,33 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing2();
   const stateProps = useStateProps2({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx105(
     "td",
     {
       ref,
-      className: cn56("text-center align-middle leading-none", classNames3 == null ? void 0 : classNames3.cell),
+      className: cn61("text-center align-middle leading-none", classNames3 == null ? void 0 : classNames3.cell),
       ...mergeProps3(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx97(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx105(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn57, width as twWidth5, useStateProps as useStateProps3 } from "@marigold/system";
-import { jsx as jsx98, jsxs as jsxs37 } from "react/jsx-runtime";
+import { cn as cn62, width as twWidth5, useStateProps as useStateProps3 } from "@marigold/system";
+import { jsx as jsx106, jsxs as jsxs38 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column: column2,
   width = "auto",
   align = "left"
 }) => {
   var _a, _b;
-  const ref = useRef11(null);
+  const ref = useRef12(null);
   const { state, classNames: classNames3 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -10100,18 +10150,18 @@ var TableColumnHeader = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     "th",
     {
       colSpan: column2.colspan,
       ref,
-      className: cn57("cursor-default", twWidth5[width], classNames3 == null ? void 0 : classNames3.header),
+      className: cn62("cursor-default", twWidth5[width], classNames3 == null ? void 0 : classNames3.header),
       ...mergeProps4(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__ */ jsx98(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx98(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx98("span", { className: "hidden", children: /* @__PURE__ */ jsx98(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__ */ jsx106(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx106(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx106("span", { className: "hidden", children: /* @__PURE__ */ jsx106(SortDown, { className: "inline-block" }) }))
       ]
     }
   );
@@ -10119,16 +10169,16 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { cn as cn58 } from "@marigold/system";
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { cn as cn63 } from "@marigold/system";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = useTableRowGroup2();
   const { classNames: classNames3 } = useTableContext();
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx107(
     "thead",
     {
       ...rowGroupProps,
-      className: cn58(
+      className: cn63(
         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
@@ -10140,33 +10190,33 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { jsx as jsx108 } from "react/jsx-runtime";
 var TableHeaderRow = ({
   item,
   className,
   children
 }) => {
   const { state } = useTableContext();
-  const ref = useRef12(null);
+  const ref = useRef13(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx100("tr", { ...rowProps, className, ref, children });
+  return /* @__PURE__ */ jsx108("tr", { ...rowProps, className, ref, children });
 };
 
 // src/Table/TableRow.tsx
-import { useRef as useRef13 } from "react";
+import { useRef as useRef14 } from "react";
 import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { cn as cn59, useClassNames as useClassNames54, useStateProps as useStateProps4 } from "@marigold/system";
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { cn as cn64, useClassNames as useClassNames59, useStateProps as useStateProps4 } from "@marigold/system";
+import { jsx as jsx109 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
-  const ref = useRef13(null);
+  const ref = useRef14(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size: size2 } = row.props;
-  const classNames3 = useClassNames54({
+  const classNames3 = useClassNames59({
     component: "Table",
     variant: variant || ctx.variant,
     size: size2 || ctx.size
@@ -10191,11 +10241,11 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx109(
     "tr",
     {
       ref,
-      className: cn59(
+      className: cn64(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -10209,7 +10259,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import { useRef as useRef14 } from "react";
+import { useRef as useRef15 } from "react";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import {
@@ -10218,17 +10268,17 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
 import {
-  cn as cn60,
+  cn as cn65,
   width as twWidth6,
   useStateProps as useStateProps5
 } from "@marigold/system";
-import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx110 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column: column2,
   width = "auto",
   align = "left"
 }) => {
-  const ref = useRef14(null);
+  const ref = useRef15(null);
   const { state, classNames: classNames3 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -10244,21 +10294,21 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx110(
     "th",
     {
       ref,
-      className: cn60(twWidth6[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
+      className: cn65(twWidth6[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
       ...mergeProps6(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ jsx102(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx110(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx103, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx111, jsxs as jsxs39 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size: size2,
@@ -10270,7 +10320,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = useRef15(null);
+  const tableRef = useRef16(null);
   const state = useTableState({
     ...props,
     selectionMode,
@@ -10281,21 +10331,21 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames3 = useClassNames55({
+  const classNames3 = useClassNames60({
     component: "Table",
     variant,
     size: size2
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx103(
+  return /* @__PURE__ */ jsx111(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames3, variant, size: size2 },
-      children: /* @__PURE__ */ jsxs38(
+      children: /* @__PURE__ */ jsxs39(
         "table",
         {
           ref: tableRef,
-          className: cn61(
+          className: cn66(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -10303,7 +10353,7 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx103(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx103(
+            /* @__PURE__ */ jsx111(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx111(
               TableHeaderRow,
               {
                 item: headerRow,
@@ -10311,7 +10361,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__ */ jsx103(
+                    return ((_a = column2.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx111(
                       TableSelectAllCell,
                       {
                         width: (_b = column2.props) == null ? void 0 : _b.width,
@@ -10319,7 +10369,7 @@ var Table = ({
                         align: (_c = column2.props) == null ? void 0 : _c.align
                       },
                       column2.key
-                    ) : /* @__PURE__ */ jsx103(
+                    ) : /* @__PURE__ */ jsx111(
                       TableColumnHeader,
                       {
                         width: (_d = column2.props) == null ? void 0 : _d.width,
@@ -10333,12 +10383,12 @@ var Table = ({
               },
               headerRow.key
             )) }),
-            /* @__PURE__ */ jsxs38(TableBody, { className: classNames3.body, emptyState, children: [
+            /* @__PURE__ */ jsxs39(TableBody, { className: classNames3.body, emptyState, children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx103(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index2) => {
+                (row) => row.type === "item" && /* @__PURE__ */ jsx111(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__ */ jsx103(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx103(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx111(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx111(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -10358,22 +10408,22 @@ var Table = ({
 Table.Body = Body2;
 Table.Cell = Cell;
 Table.Column = Column;
-Table.Header = Header4;
+Table.Header = Header5;
 Table.Row = Row;
 
 // src/Text/Text.tsx
 import { Text as Text2 } from "react-aria-components";
 import {
-  cn as cn62,
+  cn as cn67,
   cursorStyle,
   ensureCssVar as ensureCssVar2,
   fontWeight,
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames56
+  useClassNames as useClassNames61
 } from "@marigold/system";
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 var _Text = ({
   variant,
   size: size2,
@@ -10387,19 +10437,19 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const classNames3 = useClassNames56({
+  const classNames3 = useClassNames61({
     component: "Text",
     variant,
     size: size2
   });
   const Component2 = props.slot ? Text2 : as;
   const elementType = props.slot ? { elementType: as } : {};
-  return /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsx112(
     Component2,
     {
       ...props,
       ...elementType,
-      className: cn62(
+      className: cn67(
         "max-w-(--maxTextWidth)",
         // possibly set by a <Container>
         classNames3,
@@ -10416,11 +10466,11 @@ var _Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef31 } from "react";
+import { forwardRef as forwardRef32 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames57 } from "@marigold/system";
-import { jsx as jsx105 } from "react/jsx-runtime";
-var _TextArea = forwardRef31(
+import { useClassNames as useClassNames62 } from "@marigold/system";
+import { jsx as jsx113 } from "react/jsx-runtime";
+var _TextArea = forwardRef32(
   ({
     variant,
     size: size2,
@@ -10431,7 +10481,7 @@ var _TextArea = forwardRef31(
     rows,
     ...rest
   }, ref) => {
-    const classNames3 = useClassNames57({ component: "TextArea", variant, size: size2 });
+    const classNames3 = useClassNames62({ component: "TextArea", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10439,15 +10489,15 @@ var _TextArea = forwardRef31(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx105(FieldBase, { as: TextField, ...props, variant, size: size2, children: /* @__PURE__ */ jsx105(TextArea, { className: classNames3, ref, rows }) });
+    return /* @__PURE__ */ jsx113(FieldBase, { as: TextField, ...props, variant, size: size2, children: /* @__PURE__ */ jsx113(TextArea, { className: classNames3, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef32 } from "react";
+import { forwardRef as forwardRef33 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
-import { jsx as jsx106 } from "react/jsx-runtime";
-var _TextField = forwardRef32(
+import { jsx as jsx114 } from "react/jsx-runtime";
+var _TextField = forwardRef33(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
@@ -10456,13 +10506,13 @@ var _TextField = forwardRef32(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx106(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx106(_Input, { ref }) });
+    return /* @__PURE__ */ jsx114(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx114(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn63, createVar as createVar9, gapSpace as gapSpace9 } from "@marigold/system";
-import { jsx as jsx107 } from "react/jsx-runtime";
+import { cn as cn68, createVar as createVar9, gapSpace as gapSpace9 } from "@marigold/system";
+import { jsx as jsx115 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -10475,11 +10525,11 @@ var Tiles = ({
   if (stretch) {
     column2 = `minmax(${column2}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx107(
+  return /* @__PURE__ */ jsx115(
     "div",
     {
       ...props,
-      className: cn63(
+      className: cn68(
         "grid",
         gapSpace9[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -10493,11 +10543,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn64, useClassNames as useClassNames58 } from "@marigold/system";
+import { cn as cn69, useClassNames as useClassNames63 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
-import { jsx as jsx108 } from "react/jsx-runtime";
+import { jsx as jsx116 } from "react/jsx-runtime";
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -10511,26 +10561,26 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ jsx108(TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ jsx116(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx109, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx117, jsxs as jsxs40 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames3 = useClassNames58({ component: "Tooltip", variant, size: size2 });
+  const classNames3 = useClassNames63({ component: "Tooltip", variant, size: size2 });
   const portal = usePortalContainer();
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     Tooltip,
     {
       ...props,
-      className: cn64("group/tooltip", classNames3.container),
+      className: cn69("group/tooltip", classNames3.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ jsx109(OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ jsx109("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx109("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ jsx117(OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ jsx117("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx117("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -10539,13 +10589,13 @@ var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
 _Tooltip.Trigger = _TooltipTrigger;
 
 // src/TagGroup/Tag.tsx
-import { Button as Button7, Tag } from "react-aria-components";
-import { cn as cn65, useClassNames as useClassNames60 } from "@marigold/system";
+import { Tag } from "react-aria-components";
+import { cn as cn70, useClassNames as useClassNames65 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
-import { useClassNames as useClassNames59 } from "@marigold/system";
-import { jsx as jsx110 } from "react/jsx-runtime";
+import { useClassNames as useClassNames64 } from "@marigold/system";
+import { jsx as jsx118 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
   items,
@@ -10555,8 +10605,8 @@ var _TagGroup = ({
   size: size2,
   ...rest
 }) => {
-  const classNames3 = useClassNames59({ component: "Tag", variant, size: size2 });
-  return /* @__PURE__ */ jsx110(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx110(
+  const classNames3 = useClassNames64({ component: "Tag", variant, size: size2 });
+  return /* @__PURE__ */ jsx118(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx118(
     TagList,
     {
       items,
@@ -10568,31 +10618,23 @@ var _TagGroup = ({
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment11, jsx as jsx111, jsxs as jsxs40 } from "react/jsx-runtime";
-var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ jsx111(Button7, { slot: "remove", className, children: /* @__PURE__ */ jsx111("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx111("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" }) }) });
-};
+import { Fragment as Fragment12, jsx as jsx119, jsxs as jsxs41 } from "react/jsx-runtime";
 var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames3 = useClassNames60({ component: "Tag", variant, size: size2 });
+  const classNames3 = useClassNames65({ component: "Tag", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  return /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx119(
     Tag,
     {
       textValue,
       ...props,
-      className: cn65("data-selection-mode:cursor-pointer", classNames3.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs40(Fragment11, { children: [
+      className: cn70("data-selection-mode:cursor-pointer", classNames3.tag),
+      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs41(Fragment12, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ jsx111(
-          CloseButton2,
-          {
-            className: cn65("flex items-center", classNames3.closeButton)
-          }
-        )
+        allowsRemoving && /* @__PURE__ */ jsx119(CloseButton, { className: classNames3.closeButton, slot: "remove" })
       ] })
     }
   );
@@ -10603,14 +10645,14 @@ _Tag.Group = _TagGroup;
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { Dialog as Dialog3, Modal as Modal2 } from "react-aria-components";
+import { Dialog as Dialog4, Modal as Modal2 } from "react-aria-components";
 import { useId as useId2 } from "@react-aria/utils";
-import { useClassNames as useClassNames62 } from "@marigold/system";
+import { useClassNames as useClassNames67 } from "@marigold/system";
 
 // src/XLoader/BaseLoader.tsx
 import { Label as Label2, ProgressBar as ProgressBar2 } from "react-aria-components";
 import { useLocalizedStringFormatter as useLocalizedStringFormatter2 } from "@react-aria/i18n";
-import { useClassNames as useClassNames61 } from "@marigold/system";
+import { useClassNames as useClassNames66 } from "@marigold/system";
 
 // src/intl/messages.ts
 var intlMessages2 = {
@@ -10623,7 +10665,7 @@ var intlMessages2 = {
 };
 
 // src/XLoader/BaseLoader.tsx
-import { jsx as jsx112, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs42 } from "react/jsx-runtime";
 var BaseLoader = ({
   variant,
   size: size2,
@@ -10632,8 +10674,8 @@ var BaseLoader = ({
   ...props
 }) => {
   const stringFormatter = useLocalizedStringFormatter2(intlMessages2, "marigold");
-  const className = useClassNames61({ component: "XLoader", variant, size: size2 });
-  return /* @__PURE__ */ jsxs41(
+  const className = useClassNames66({ component: "XLoader", variant, size: size2 });
+  return /* @__PURE__ */ jsxs42(
     ProgressBar2,
     {
       className: className.container,
@@ -10641,7 +10683,7 @@ var BaseLoader = ({
       "aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs41(
+        /* @__PURE__ */ jsxs42(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -10649,13 +10691,13 @@ var BaseLoader = ({
             fill: "currentColor",
             className: className.loader,
             children: [
-              /* @__PURE__ */ jsx112("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-              /* @__PURE__ */ jsx112(
+              /* @__PURE__ */ jsx120("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+              /* @__PURE__ */ jsx120(
                 "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__ */ jsx112(
+                  children: /* @__PURE__ */ jsx120(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10668,12 +10710,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx112(
+              /* @__PURE__ */ jsx120(
                 "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__ */ jsx112(
+                  children: /* @__PURE__ */ jsx120(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10686,12 +10728,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx112(
+              /* @__PURE__ */ jsx120(
                 "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__ */ jsx112(
+                  children: /* @__PURE__ */ jsx120(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10704,12 +10746,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx112(
+              /* @__PURE__ */ jsx120(
                 "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__ */ jsx112(
+                  children: /* @__PURE__ */ jsx120(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10722,12 +10764,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx112(
+              /* @__PURE__ */ jsx120(
                 "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__ */ jsx112(
+                  children: /* @__PURE__ */ jsx120(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10740,12 +10782,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx112(
+              /* @__PURE__ */ jsx120(
                 "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__ */ jsx112(
+                  children: /* @__PURE__ */ jsx120(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10758,12 +10800,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx112(
+              /* @__PURE__ */ jsx120(
                 "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__ */ jsx112(
+                  children: /* @__PURE__ */ jsx120(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10776,12 +10818,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx112(
+              /* @__PURE__ */ jsx120(
                 "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__ */ jsx112(
+                  children: /* @__PURE__ */ jsx120(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10794,12 +10836,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx112(
+              /* @__PURE__ */ jsx120(
                 "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__ */ jsx112(
+                  children: /* @__PURE__ */ jsx120(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10812,12 +10854,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx112(
+              /* @__PURE__ */ jsx120(
                 "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__ */ jsx112(
+                  children: /* @__PURE__ */ jsx120(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10830,12 +10872,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx112(
+              /* @__PURE__ */ jsx120(
                 "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__ */ jsx112(
+                  children: /* @__PURE__ */ jsx120(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -10851,48 +10893,48 @@ var BaseLoader = ({
             ]
           }
         ),
-        children ? /* @__PURE__ */ jsx112(Label2, { className: className.label, children }) : null
+        children ? /* @__PURE__ */ jsx120(Label2, { className: className.label, children }) : null
       ]
     }
   );
 };
 
 // src/XLoader/XLoader.tsx
-import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx121 } from "react/jsx-runtime";
 var LoaderFullScreen = (props) => {
   const id = useId2();
-  return /* @__PURE__ */ jsx113(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx113(Modal2, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ jsx113(Dialog3, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx113(BaseLoader, { id, ...props }) }) }) });
+  return /* @__PURE__ */ jsx121(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx121(Modal2, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ jsx121(Dialog4, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx121(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
-  const className = useClassNames62({
+  const className = useClassNames67({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
   });
-  return /* @__PURE__ */ jsx113("div", { className, children: /* @__PURE__ */ jsx113(BaseLoader, { ...props }) });
+  return /* @__PURE__ */ jsx121("div", { className, children: /* @__PURE__ */ jsx121(BaseLoader, { ...props }) });
 };
-var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ jsx113(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ jsx113(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ jsx113(BaseLoader, { variant, ...props });
+var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ jsx121(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ jsx121(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ jsx121(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames63 } from "@marigold/system";
+import { useClassNames as useClassNames68 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext14, useContext as useContext23 } from "react";
-var TabContext = createContext14({});
-var useTabContext = () => useContext23(TabContext);
+import { createContext as createContext15, useContext as useContext25 } from "react";
+var TabContext = createContext15({});
+var useTabContext = () => useContext25(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn66 } from "@marigold/system";
-import { jsx as jsx114 } from "react/jsx-runtime";
+import { cn as cn71 } from "@marigold/system";
+import { jsx as jsx122 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ jsx114(
+  return /* @__PURE__ */ jsx122(
     Tab,
     {
       ...props,
-      className: cn66(
+      className: cn71(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames3.tab
       ),
@@ -10903,15 +10945,15 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn67, gapSpace as gapSpace10 } from "@marigold/system";
-import { jsx as jsx115 } from "react/jsx-runtime";
+import { cn as cn72, gapSpace as gapSpace10 } from "@marigold/system";
+import { jsx as jsx123 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx123(
     TabList,
     {
       ...props,
-      className: cn67("flex", gapSpace10[space], classNames3.tabsList),
+      className: cn72("flex", gapSpace10[space], classNames3.tabsList),
       children: props.children
     }
   );
@@ -10919,25 +10961,25 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 import { TabPanel } from "react-aria-components";
-import { jsx as jsx116 } from "react/jsx-runtime";
+import { jsx as jsx124 } from "react/jsx-runtime";
 var _TabPanel = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ jsx116(TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
+  return /* @__PURE__ */ jsx124(TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx117 } from "react/jsx-runtime";
+import { jsx as jsx125 } from "react/jsx-runtime";
 var _Tabs = ({ disabled, variant, size: size2 = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames3 = useClassNames63({
+  const classNames3 = useClassNames68({
     component: "Tabs",
     size: size2,
     variant
   });
-  return /* @__PURE__ */ jsx117(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx117(Tabs, { ...props, className: classNames3.container, children: props.children }) });
+  return /* @__PURE__ */ jsx125(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ jsx125(Tabs, { ...props, className: classNames3.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -10961,7 +11003,6 @@ export {
   Center,
   _Checkbox as Checkbox,
   _CheckboxGroup as CheckboxGroup,
-  CloseButton2 as CloseButton,
   Columns,
   _ComboBox as ComboBox,
   Container,
@@ -10969,11 +11010,12 @@ export {
   _DatePicker as DatePicker,
   _Dialog as Dialog,
   _Divider as Divider,
+  Drawer,
   FieldBase,
   FieldGroup,
   FieldGroupContext,
   Footer,
-  Form,
+  _Form as Form,
   Grid,
   _Header as Header,
   _Headline as Headline,