@marigold/components 15.2.0 → 15.3.0

package/dist/index.js

@@ -212,7 +212,7 @@ var require_react_is_development = __commonJS({
         var ContextProvider = REACT_PROVIDER_TYPE;
         var Element2 = REACT_ELEMENT_TYPE;
         var ForwardRef = REACT_FORWARD_REF_TYPE;
-        var Fragment12 = REACT_FRAGMENT_TYPE;
+        var Fragment13 = REACT_FRAGMENT_TYPE;
         var Lazy = REACT_LAZY_TYPE;
         var Memo = REACT_MEMO_TYPE;
         var Portal = REACT_PORTAL_TYPE;
@@ -271,7 +271,7 @@ var require_react_is_development = __commonJS({
         exports2.ContextProvider = ContextProvider;
         exports2.Element = Element2;
         exports2.ForwardRef = ForwardRef;
-        exports2.Fragment = Fragment12;
+        exports2.Fragment = Fragment13;
         exports2.Lazy = Lazy;
         exports2.Memo = Memo;
         exports2.Portal = Portal;
@@ -870,6 +870,9 @@ __export(index_exports, {
   CheckboxGroup: () => _CheckboxGroup,
   Columns: () => Columns,
   ComboBox: () => _ComboBox,
+  ConfirmationContext: () => ConfirmationContext,
+  ConfirmationDialog: () => ConfirmationDialog,
+  ConfirmationProvider: () => ConfirmationProvider,
   Container: () => Container,
   ContextualHelp: () => _ContextualHelp,
   DateField: () => _DateField,
@@ -882,12 +885,13 @@ __export(index_exports, {
   Form: () => _Form,
   Grid: () => Grid,
   Headline: () => _Headline,
-  I18nProvider: () => import_i18n8.I18nProvider,
+  I18nProvider: () => import_i18n9.I18nProvider,
   Inline: () => Inline,
   Input: () => _Input,
   Inset: () => Inset,
   Label: () => _Label,
   Link: () => _Link,
+  LinkButton: () => _LinkButton,
   List: () => List,
   MarigoldProvider: () => MarigoldProvider,
   Menu: () => _Menu,
@@ -901,7 +905,7 @@ __export(index_exports, {
   Popover: () => _Popover,
   Radio: () => _Radio,
   RadioGroup: () => _RadioGroup,
-  RouterProvider: () => import_react_aria_components83.RouterProvider,
+  RouterProvider: () => import_react_aria_components84.RouterProvider,
   Scrollable: () => Scrollable,
   SearchField: () => _SearchField,
   SectionMessage: () => SectionMessage,
@@ -917,7 +921,7 @@ __export(index_exports, {
   Text: () => _Text,
   TextArea: () => _TextArea,
   TextField: () => _TextField,
-  ThemeProvider: () => import_system80.ThemeProvider,
+  ThemeProvider: () => import_system81.ThemeProvider,
   Tiles: () => Tiles,
   TimeField: () => _TimeField,
   Toast: () => Toast,
@@ -929,10 +933,12 @@ __export(index_exports, {
   _ContextualHelp: () => _ContextualHelp,
   gridColsAlign: () => gridColsAlign,
   gridColumn: () => gridColumn,
+  parseFormData: () => parseFormData,
   queue: () => queue,
   useAsyncList: () => import_data.useAsyncList,
+  useConfirmation: () => useConfirmation,
   useListData: () => import_data.useListData,
-  useTheme: () => import_system80.useTheme,
+  useTheme: () => import_system81.useTheme,
   useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
@@ -975,17 +981,20 @@ var ChevronDown = (0, import_react2.forwardRef)(
 // src/Accordion/AccordionHeader.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var AccordionHeader = ({ children }) => {
-  const { classNames: classNames3 } = useAccordionContext();
+  const { classNames: classNames3, stickyHeader, iconPosition } = useAccordionContext();
   const { isExpanded } = (0, import_react3.useContext)(import_react_aria_components.DisclosureStateContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components.Heading, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components.Button, { slot: "trigger", className: classNames3.header, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      ChevronDown,
-      {
-        className: (0, import_system3.cn)(classNames3.icon, isExpanded && "rotate-180")
-      }
-    )
-  ] }) });
+  const chevronStyles = (0, import_system3.cn)(classNames3.icon, isExpanded && "rotate-180");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      className: stickyHeader ? "bg-background/90 sticky top-0 z-1 backdrop-blur-xs" : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_aria_components.Heading, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_aria_components.Button, { slot: "trigger", className: classNames3.header, children: [
+        iconPosition === "left" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronDown, { className: chevronStyles }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "flex-1", children }),
+        iconPosition === "right" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronDown, { className: chevronStyles })
+      ] }) })
+    }
+  );
 };
 
 // src/Accordion/AccordionItem.tsx
@@ -1025,18 +1034,26 @@ var Accordion = ({
   disabled,
   variant,
   size: size2,
+  stickyHeader = false,
+  iconPosition = "right",
   ...props
 }) => {
   const classNames3 = (0, import_system4.useClassNames)({ component: "Accordion", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AccordionProvider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_react_aria_components4.DisclosureGroup,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    AccordionProvider,
     {
-      ...props,
-      isDisabled: disabled,
-      className: classNames3.container,
-      children
+      value: { classNames: classNames3, stickyHeader, iconPosition },
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_react_aria_components4.DisclosureGroup,
+        {
+          ...props,
+          isDisabled: disabled,
+          className: classNames3.container,
+          children
+        }
+      )
     }
-  ) });
+  );
 };
 Accordion.Header = AccordionHeader;
 Accordion.Content = AccordionPanel;
@@ -1613,6 +1630,7 @@ var _Popover = (0, import_react11.forwardRef)(
 // src/intl/messages.ts
 var intlMessages2 = {
   "de-DE": {
+    cancel: "Abbrechen",
     loadingMessage: "Lade...",
     noResultsFound: "Kein Ergebnis gefunden",
     removeAll: "Alle entfernen",
@@ -1622,6 +1640,7 @@ var intlMessages2 = {
     showLessCount: "{count} weniger anzeigen"
   },
   "en-US": {
+    cancel: "Cancel",
     loadingMessage: "Loading...",
     noResultsFound: "No result found",
     removeAll: "Remove all",
@@ -1865,7 +1884,6 @@ var _Button = (0, import_react18.forwardRef)(
         ...props,
         ref,
         className: (0, import_system26.cn)(
-          "inline-flex items-center justify-center gap-[0.5ch]",
           classNames3,
           fullWidth ? "w-full" : void 0,
           loading && "cursor-progress!"
@@ -2467,6 +2485,10 @@ var _ContextualHelp = (0, import_react26.forwardRef)(
 _ContextualHelp.Title = ContextualHelpTitle;
 _ContextualHelp.Content = ContextualHelpContent;
 
+// src/Dialog/ConfirmationDialog.tsx
+var import_i18n5 = require("@react-aria/i18n");
+var import_utils3 = require("@react-aria/utils");
+
 // src/Dialog/Dialog.tsx
 var import_react32 = require("react");
 var import_react_aria_components31 = require("react-aria-components");
@@ -2495,13 +2517,15 @@ var import_react_aria_components27 = require("react-aria-components");
 var import_system39 = require("@marigold/system");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var _Modal = (0, import_react28.forwardRef)(
-  ({ size: size2, open, dismissable, keyboardDismissable, onOpenChange, ...rest }, ref) => {
-    const props = {
-      isOpen: open,
-      isDismissable: dismissable,
-      isKeyboardDismissDisabled: keyboardDismissable,
-      ...rest
-    };
+  ({
+    size: size2,
+    open,
+    dismissable,
+    keyboardDismissable,
+    onOpenChange,
+    children,
+    ...props
+  }, ref) => {
     const className = (0, import_system39.useClassNames)({ component: "Modal", size: size2 });
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Underlay,
@@ -2510,7 +2534,7 @@ var _Modal = (0, import_react28.forwardRef)(
         keyboardDismissable,
         open,
         onOpenChange,
-        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components27.Modal, { ...props, className, ref, children: props.children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components27.Modal, { ...props, className, ref, children })
       }
     );
   }
@@ -2661,6 +2685,10 @@ var NonModal = (0, import_react30.forwardRef)(
   }
 );
 
+// src/Dialog/Context.tsx
+var import_react31 = require("react");
+var DialogContext = (0, import_react31.createContext)({});
+
 // src/Dialog/DialogActions.tsx
 var import_system40 = require("@marigold/system");
 var import_jsx_runtime46 = require("react/jsx-runtime");
@@ -2695,72 +2723,77 @@ var DialogTitle = ({ variant, size: size2, children }) => {
 };
 
 // src/Dialog/DialogTrigger.tsx
-var import_react31 = require("react");
 var import_react_aria_components30 = require("react-aria-components");
 var import_interactions = require("@react-aria/interactions");
 var import_jsx_runtime49 = require("react/jsx-runtime");
-var DialogContext = (0, import_react31.createContext)({});
 var _DialogTrigger = ({
   open,
   dismissable,
   keyboardDismissable,
   ...rest
 }) => {
+  const ctx = {
+    isDismissable: dismissable,
+    isKeyboardDismissDisabled: !keyboardDismissable
+  };
   const props = {
     isOpen: open,
-    isDismissable: dismissable,
-    isKeyboardDismissDisabled: !keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DialogContext.Provider, { value: props, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_aria_components30.DialogTrigger, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_interactions.PressResponder, { isPressed: false, children: props.children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DialogContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react_aria_components30.DialogTrigger, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_interactions.PressResponder, { isPressed: false, children: props.children }) }) });
 };
 
 // src/Dialog/Dialog.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var _Dialog = (0, import_react32.forwardRef)(
-  ({ variant, size: size2, ...props }, ref) => {
+var InnerDialog = (0, import_react32.forwardRef)(
+  ({ variant, size: size2, closeButton, ...props }, ref) => {
     var _a;
+    const state = (0, import_react32.useContext)(import_react_aria_components31.OverlayTriggerStateContext);
     const classNames3 = (0, import_system43.useClassNames)({
       component: "Dialog",
       variant,
       size: size2
     });
-    const { isDismissable, isKeyboardDismissDisabled, isOpen, onOpenChange } = (0, import_react32.useContext)(DialogContext);
-    const state = (0, import_react32.useContext)(import_react_aria_components31.OverlayTriggerStateContext);
     const children = typeof props.children === "function" ? props.children({
       close: (_a = state == null ? void 0 : state.close) != null ? _a : (() => {
       })
     }) : props.children;
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      import_react_aria_components31.Dialog,
+      {
+        ...props,
+        ref,
+        className: (0, import_system43.cn)(
+          "relative mx-auto outline-hidden",
+          "grid [grid-template-areas:'title'_'content'_'actions']",
+          classNames3.container
+        ),
+        children: [
+          closeButton && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            CloseButton,
+            {
+              className: classNames3.closeButton,
+              onPress: state == null ? void 0 : state.close
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+var _Dialog = (0, import_react32.forwardRef)(
+  ({ open, onOpenChange, children, ...props }, ref) => {
+    const ctx = (0, import_react32.useContext)(DialogContext);
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       _Modal,
       {
-        dismissable: isDismissable,
-        keyboardDismissable: isKeyboardDismissDisabled,
-        open: isOpen,
-        size: size2,
+        size: props.size,
+        dismissable: ctx.isDismissable,
+        keyboardDismissable: ctx.isKeyboardDismissDisabled,
+        open: typeof open === "boolean" ? open : void 0,
         onOpenChange,
-        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
-          import_react_aria_components31.Dialog,
-          {
-            ...props,
-            ref,
-            className: (0, import_system43.cn)(
-              "relative mx-auto outline-hidden [&>*:not(:last-child)]:mb-4",
-              "grid [grid-template-areas:'title'_'content'_'actions']",
-              classNames3.container
-            ),
-            children: [
-              props.closeButton && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-                CloseButton,
-                {
-                  className: classNames3.closeButton,
-                  onPress: state == null ? void 0 : state.close
-                }
-              ),
-              children
-            ]
-          }
-        )
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(InnerDialog, { ref, ...props, children })
       }
     );
   }
@@ -2770,32 +2803,128 @@ _Dialog.Title = DialogTitle;
 _Dialog.Content = DialogContent;
 _Dialog.Actions = DialogActions;
 
+// src/Dialog/ConfirmationDialog.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+var ConfirmationDialog = ({
+  title,
+  confirmationLabel,
+  cancelLabel,
+  onCancel,
+  onConfirm,
+  autoFocusButton,
+  children,
+  variant,
+  size: size2 = "xsmall",
+  ...props
+}) => {
+  const stringFormatter = (0, import_i18n5.useLocalizedStringFormatter)(intlMessages2, "marigold");
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(_Dialog, { role: "alertdialog", variant, size: size2, ...props, children: ({ close }) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(_Dialog.Title, { children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(_Dialog.Content, { children }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(_Dialog.Actions, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        _Button,
+        {
+          onPress: () => (0, import_utils3.chain)(close(), onCancel == null ? void 0 : onCancel()),
+          autoFocus: autoFocusButton === "cancel",
+          children: cancelLabel != null ? cancelLabel : stringFormatter.format("cancel")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        _Button,
+        {
+          variant: variant === "destructive" ? "destructive" : "primary",
+          onPress: () => (0, import_utils3.chain)(close(), onConfirm == null ? void 0 : onConfirm()),
+          autoFocus: autoFocusButton === "action",
+          children: confirmationLabel
+        }
+      )
+    ] })
+  ] }) });
+};
+ConfirmationDialog.Trigger = _Dialog.Trigger;
+
+// src/Dialog/useConfirmation.tsx
+var import_react33 = require("react");
+var import_react34 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var ConfirmationContext = (0, import_react34.createContext)(null);
+var ConfirmationProvider = ({ children }) => {
+  const [confirmation, setConfirmation] = (0, import_react34.useState)(
+    null
+  );
+  const [open, setOpen] = (0, import_react34.useState)(false);
+  const confirm = (config) => {
+    if (open) {
+      console.warn(
+        "A confirmation dialog is already open. Rejecting new request."
+      );
+      return Promise.resolve("cancelled");
+    }
+    return new Promise((resolve) => {
+      setConfirmation({ ...config, resolve });
+      setOpen(true);
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(ConfirmationContext.Provider, { value: confirm, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      ConfirmationDialog,
+      {
+        open,
+        onOpenChange: setOpen,
+        variant: confirmation == null ? void 0 : confirmation.variant,
+        size: "xsmall",
+        title: (confirmation == null ? void 0 : confirmation.title) || "",
+        confirmationLabel: (confirmation == null ? void 0 : confirmation.confirmationLabel) || "Confirm",
+        cancelLabel: confirmation == null ? void 0 : confirmation.cancelLabel,
+        onConfirm: () => {
+          confirmation == null ? void 0 : confirmation.resolve("confirmed");
+        },
+        onCancel: () => {
+          confirmation == null ? void 0 : confirmation.resolve("cancelled");
+        },
+        children: confirmation == null ? void 0 : confirmation.content
+      }
+    )
+  ] });
+};
+var useConfirmation = () => {
+  const confirm = (0, import_react33.useContext)(ConfirmationContext);
+  if (confirm === null) {
+    throw new Error(
+      "`useConfirmation` must be used within a `ConfirmationProvider`"
+    );
+  }
+  return confirm;
+};
+
 // src/Divider/Divider.tsx
 var import_react_aria_components32 = require("react-aria-components");
 var import_system44 = require("@marigold/system");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var _Divider = ({ variant, ...props }) => {
   const classNames3 = (0, import_system44.useClassNames)({ component: "Divider", variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react_aria_components32.Separator, { className: (0, import_system44.cn)("border-none", classNames3), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_aria_components32.Separator, { className: (0, import_system44.cn)("border-none", classNames3), ...props });
 };
 
 // src/Drawer/Drawer.tsx
-var import_react34 = require("react");
+var import_react36 = require("react");
 var import_react_aria_components36 = require("react-aria-components");
 var import_landmark = require("@react-aria/landmark");
 var import_system49 = require("@marigold/system");
 
 // src/Drawer/Context.tsx
-var import_react33 = require("react");
-var DrawerContext = (0, import_react33.createContext)({
+var import_react35 = require("react");
+var DrawerContext = (0, import_react35.createContext)({
   variant: void 0,
   size: void 0
 });
-var useDrawerContext = () => (0, import_react33.useContext)(DrawerContext);
+var useDrawerContext = () => (0, import_react35.useContext)(DrawerContext);
 
 // src/Drawer/DrawerActions.tsx
 var import_system45 = require("@marigold/system");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var DrawerActions = ({ variant, size: size2, children }) => {
   const ctx = useDrawerContext();
   const classNames3 = (0, import_system45.useClassNames)({
@@ -2803,7 +2932,7 @@ var DrawerActions = ({ variant, size: size2, children }) => {
     variant: variant != null ? variant : ctx.variant,
     size: size2 != null ? size2 : ctx.size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     "div",
     {
       className: (0, import_system45.cn)("[grid-area:actions]", classNames3.actions),
@@ -2815,7 +2944,7 @@ var DrawerActions = ({ variant, size: size2, children }) => {
 
 // src/Drawer/DrawerContent.tsx
 var import_system46 = require("@marigold/system");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var DrawerContent = ({
   variant,
   size: size2,
@@ -2827,7 +2956,7 @@ var DrawerContent = ({
     variant: variant != null ? variant : ctx.variant,
     size: size2 != null ? size2 : ctx.size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "div",
     {
       className: (0, import_system46.cn)("[grid-area:content]", classNames3.content),
@@ -2840,13 +2969,13 @@ var DrawerContent = ({
 // src/Drawer/DrawerModal.tsx
 var import_react_aria_components33 = require("react-aria-components");
 var import_system47 = require("@marigold/system");
-var import_jsx_runtime54 = require("react/jsx-runtime");
-var MobileModal = ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var MobileModal = ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
   import_react_aria_components33.ModalOverlay,
   {
     ...props,
     className: "fixed inset-0 z-40 h-(--visual-viewport-height)",
-    children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react_aria_components33.Modal, { className: "flex *:flex-1", children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_aria_components33.Modal, { className: "flex *:flex-1", children })
   }
 );
 var DrawerModal = ({
@@ -2855,13 +2984,13 @@ var DrawerModal = ({
   ...props
 }) => {
   const isSmallScreen = (0, import_system47.useSmallScreen)();
-  return isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(MobileModal, { children }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(NonModal, { ...props, className: (0, import_system47.cn)("fixed", className), children });
+  return isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(MobileModal, { children }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(NonModal, { ...props, className: (0, import_system47.cn)("fixed", className), children });
 };
 
 // src/Drawer/DrawerTitle.tsx
 var import_react_aria_components34 = require("react-aria-components");
 var import_system48 = require("@marigold/system");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var DrawerTitle = ({ variant, size: size2, children }) => {
   const classNames3 = (0, import_system48.useClassNames)({
     component: "Drawer",
@@ -2869,27 +2998,27 @@ var DrawerTitle = ({ variant, size: size2, children }) => {
     variant,
     context: DrawerContext
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     import_react_aria_components34.Header,
     {
       className: (0, import_system48.cn)("[grid-area:title]", classNames3.header),
       style: { "--i": 0 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_aria_components34.Heading, { slot: "title", level: 2, className: classNames3.title, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_react_aria_components34.Heading, { slot: "title", level: 2, className: classNames3.title, children })
     }
   );
 };
 
 // src/Drawer/DrawerTrigger.tsx
 var import_react_aria_components35 = require("react-aria-components");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var DrawerTrigger = ({
   open,
   children,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_aria_components35.DialogTrigger, { isOpen: open, ...props, children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_aria_components35.DialogTrigger, { isOpen: open, ...props, children });
 
 // src/Drawer/Drawer.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var Drawer = ({
   children,
   size: size2 = "medium",
@@ -2901,17 +3030,17 @@ var Drawer = ({
   placement = "right",
   ...props
 }) => {
-  const ref = (0, import_react34.useRef)(null);
+  const ref = (0, import_react36.useRef)(null);
   const classNames3 = (0, import_system49.useClassNames)({
     component: "Drawer",
     variant,
     size: size2
   });
-  const ctx = (0, import_react34.useContext)(import_react_aria_components36.OverlayTriggerStateContext);
+  const ctx = (0, import_react36.useContext)(import_react_aria_components36.OverlayTriggerStateContext);
   const isSmallScreen = (0, import_system49.useSmallScreen)();
   const landmarkAria = (0, import_landmark.useLandmark)({ ...props, role }, ref);
   const landmarkProps = isSmallScreen ? {} : landmarkAria.landmarkProps;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     DrawerModal,
     {
       className: classNames3.overlay,
@@ -2919,7 +3048,7 @@ var Drawer = ({
       keyboardDismissable,
       "data-testid": "drawer-modal",
       "data-placement": placement,
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DrawerContext.Provider, { value: { variant, size: size2 }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(DrawerContext.Provider, { value: { variant, size: size2 }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
         import_react_aria_components36.Dialog,
         {
           ...props,
@@ -2931,7 +3060,7 @@ var Drawer = ({
           ),
           "data-placement": placement,
           children: [
-            closeButton && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            closeButton && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
               CloseButton,
               {
                 "aria-label": "dismiss drawer",
@@ -2955,8 +3084,8 @@ Drawer.Actions = DrawerActions;
 // src/Form/Form.tsx
 var import_react_aria_components37 = require("react-aria-components");
 var import_system50 = require("@marigold/system");
-var import_jsx_runtime58 = require("react/jsx-runtime");
-var _Form = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var _Form = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
   import_react_aria_components37.Form,
   {
     ...props,
@@ -2968,11 +3097,11 @@ var _Form = ({ unstyled, maxWidth = "full", ...props }) => /* @__PURE__ */ (0, i
 var import_system51 = require("@marigold/system");
 
 // src/Grid/GridArea.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
-var GridArea = ({ name, children }) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { style: { gridArea: name }, children });
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var GridArea = ({ name, children }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { style: { gridArea: name }, children });
 
 // src/Grid/Grid.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var parseGridAreas = (areas) => areas.map((area) => `"${area}"`).join("\n");
 var parseTemplateValue = (values) => values.map((val) => typeof val === "number" ? `${val}fr` : val).join(" ");
 var Grid = ({
@@ -2987,7 +3116,7 @@ var Grid = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "div",
     {
       className: (0, import_system51.cn)(
@@ -3012,7 +3141,7 @@ Grid.Area = GridArea;
 // src/Headline/Headline.tsx
 var import_react_aria_components38 = require("react-aria-components");
 var import_system52 = require("@marigold/system");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var _Headline = ({
   variant,
   size: size2,
@@ -3027,7 +3156,7 @@ var _Headline = ({
     variant,
     size: size2 != null ? size2 : `level-${level}`
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     import_react_aria_components38.Heading,
     {
       level: Number(level),
@@ -3046,25 +3175,31 @@ var _Headline = ({
 
 // src/Inline/Inline.tsx
 var import_system53 = require("@marigold/system");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+var inlineAlignmentY = {
+  ...import_system53.alignment.horizontal.alignmentY,
+  input: "items-end [&:has([slot=description])]:items-end [&:has([slot=description])_button]:mb-6 [&:has([slot=errorMessage])]:mb-6"
+};
 var Inline = ({
   space = 0,
+  noWrap,
   alignX,
   alignY,
   children,
   ...props
 }) => {
-  var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  var _a, _b;
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "div",
     {
       ...props,
       className: (0, import_system53.cn)(
-        "flex flex-wrap",
+        "flex",
+        !noWrap && "flex-wrap",
+        // flexbox defaults to no-wrap
         import_system53.gapSpace[space],
         alignX && ((_b = (_a = import_system53.alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY === "input" && "items-end [&:has([slot=description])]:items-end [&:has([slot=description])_button]:mb-6 [&:has([slot=errorMessage])]:mb-6",
-        alignY && alignY !== "input" && ((_d = (_c = import_system53.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
+        alignY && inlineAlignmentY[alignY]
       ),
       children
     }
@@ -3072,7 +3207,7 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-var import_react35 = require("react");
+var import_react37 = require("react");
 var import_react_aria_components41 = require("react-aria-components");
 
 // src/DateField/DateInput.tsx
@@ -3082,9 +3217,9 @@ var import_system55 = require("@marigold/system");
 // src/DateField/DateSegment.tsx
 var import_react_aria_components39 = require("react-aria-components");
 var import_system54 = require("@marigold/system");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     import_react_aria_components39.DateSegment,
     {
       ...props,
@@ -3092,8 +3227,8 @@ var _DateSegment = ({ segment, ...props }) => {
       style: {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
-      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           "span",
           {
             "aria-hidden": "true",
@@ -3104,25 +3239,25 @@ var _DateSegment = ({ segment, ...props }) => {
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var _DateInput = ({ variant, size: size2, action, ...props }) => {
   const classNames3 = (0, import_system55.useClassNames)({ component: "DateField", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_react_aria_components40.Group, { className: classNames3.field, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_aria_components40.DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(_DateSegment, { className: classNames3.segment, segment }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_react_aria_components40.Group, { className: classNames3.field, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_aria_components40.DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(_DateSegment, { className: classNames3.segment, segment }) }),
     action ? action : null
   ] });
 };
 
 // src/DateField/DateField.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var _DateField = (0, import_react35.forwardRef)(
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var _DateField = (0, import_react37.forwardRef)(
   ({
     variant,
     size: size2,
@@ -3140,7 +3275,7 @@ var _DateField = (0, import_react35.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       FieldBase,
       {
         as: import_react_aria_components41.DateField,
@@ -3148,14 +3283,14 @@ var _DateField = (0, import_react35.forwardRef)(
         size: size2,
         ref,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(_DateInput, { action })
+        children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(_DateInput, { action })
       }
     );
   }
 );
 
 // src/Calendar/Calendar.tsx
-var import_react41 = require("react");
+var import_react43 = require("react");
 var import_react_aria_components48 = require("react-aria-components");
 var import_system61 = require("@marigold/system");
 
@@ -3165,21 +3300,21 @@ var import_system57 = require("@marigold/system");
 
 // src/Calendar/CalendarGridHeader.tsx
 var import_date = require("@internationalized/date");
-var import_react36 = require("react");
+var import_react38 = require("react");
 var import_react_aria_components42 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
-var import_i18n5 = require("@react-aria/i18n");
+var import_i18n6 = require("@react-aria/i18n");
 var import_system56 = require("@marigold/system");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
-  const state = (0, import_react36.useContext)(import_react_aria_components42.CalendarStateContext);
+  const state = (0, import_react38.useContext)(import_react_aria_components42.CalendarStateContext);
   const { headerProps } = (0, import_calendar.useCalendarGrid)(props, state);
-  const { locale } = (0, import_i18n5.useLocale)();
-  const dayFormatter = (0, import_i18n5.useDateFormatter)({
+  const { locale } = (0, import_i18n6.useLocale)();
+  const dayFormatter = (0, import_i18n6.useDateFormatter)({
     weekday: "short",
     timeZone: state.timeZone
   });
-  const weekDays = (0, import_react36.useMemo)(() => {
+  const weekDays = (0, import_react38.useMemo)(() => {
     const weekStart = (0, import_date.startOfWeek)((0, import_date.today)(state.timeZone), locale);
     return [...new Array(7).keys()].map((index2) => {
       const date = weekStart.add({ days: index2 });
@@ -3188,16 +3323,16 @@ function CalendarGridHeader(props) {
     });
   }, [locale, state.timeZone, dayFormatter]);
   const classNames3 = (0, import_system56.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("tr", { children: weekDays.map((day, index2) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("th", { className: classNames3.calendarHeader, children: day.substring(0, 2) }, index2)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var _CalendarGrid = () => {
   const classNames3 = (0, import_system57.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react_aria_components43.CalendarGrid, { className: classNames3.calendarGrid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(CalendarGridHeader, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_react_aria_components43.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react_aria_components43.CalendarGrid, { className: classNames3.calendarGrid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CalendarGridHeader, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react_aria_components43.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       import_react_aria_components43.CalendarCell,
       {
         date,
@@ -3211,20 +3346,20 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 var import_react_aria_components44 = require("react-aria-components");
 var import_system58 = require("@marigold/system");
 
 // src/Calendar/Context.tsx
-var import_react37 = require("react");
-var CalendarContext = (0, import_react37.createContext)({});
-var useCalendarContext = () => (0, import_react37.useContext)(CalendarContext);
+var import_react39 = require("react");
+var CalendarContext = (0, import_react39.createContext)({});
+var useCalendarContext = () => (0, import_react39.useContext)(CalendarContext);
 
 // src/Calendar/useFormattedMonths.tsx
-var import_i18n6 = require("@react-aria/i18n");
+var import_i18n7 = require("@react-aria/i18n");
 function useFormattedMonths(timeZone, focusedDate) {
   let months = [];
-  let formatter = (0, import_i18n6.useDateFormatter)({
+  let formatter = (0, import_i18n7.useDateFormatter)({
     month: "long",
     timeZone
   });
@@ -3237,17 +3372,17 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 function CalendarListBox({
   type,
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = (0, import_react38.useContext)(import_react_aria_components44.CalendarStateContext);
+  const state = (0, import_react40.useContext)(import_react_aria_components44.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
   const { classNames: classNames3 } = useCalendarContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "button",
     {
       onClick: () => !isDisabled && setSelectedDropdown(type),
@@ -3261,7 +3396,7 @@ function CalendarListBox({
       "aria-label": type === "month" ? `${months[state.focusedDate.month - 1].substring(0, 3)}${isDisabled ? " not selectable" : ""}` : `${state.focusedDate.year}${isDisabled ? " not selectable" : ""}`,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronDown, {})
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ChevronDown, {})
       ]
     }
   );
@@ -3269,10 +3404,10 @@ function CalendarListBox({
 
 // src/Calendar/MonthControls.tsx
 var import_system59 = require("@marigold/system");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 function MonthControls() {
   const classNames3 = (0, import_system59.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     "div",
     {
       className: (0, import_system59.cn)(
@@ -3280,22 +3415,22 @@ function MonthControls() {
         classNames3.calendarControllers
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           IconButton,
           {
             className: (0, import_system59.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "previous",
-            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChevronLeft, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           IconButton,
           {
             className: (0, import_system59.cn)("inline-flex items-center justify-center gap-[0.5ch]"),
             variant: "navigation",
             slot: "next",
-            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChevronRight, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronRight, {})
           }
         )
       ]
@@ -3305,13 +3440,13 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-var import_react39 = require("react");
+var import_react41 = require("react");
 var import_react_aria_components46 = require("react-aria-components");
 
 // src/Calendar/ListBox.tsx
 var import_react_aria_components45 = require("react-aria-components");
 var import_system60 = require("@marigold/system");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 function ListBox2({
   dataTestid,
   items,
@@ -3322,7 +3457,7 @@ function ListBox2({
 }) {
   const { classNames: classNames3 } = useCalendarContext();
   const selectedItemKeys = items.map((item, index2) => isSelected(item, index2) ? String(index2) : void 0).filter((key) => typeof key === "string");
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     import_react_aria_components45.ListBox,
     {
       className: (0, import_system60.cn)(
@@ -3336,7 +3471,7 @@ function ListBox2({
       children: items.map((item, index2) => {
         const disabled = isDisabled(item, index2);
         const selected = isSelected(item, index2);
-        return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           import_react_aria_components45.ListBoxItem,
           {
             id: String(index2),
@@ -3360,18 +3495,18 @@ function ListBox2({
 }
 
 // src/Calendar/MonthListBox.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var MonthListBox = ({
   setSelectedDropdown,
   minValue,
   maxValue
 }) => {
-  const state = (0, import_react39.useContext)(import_react_aria_components46.CalendarStateContext);
+  const state = (0, import_react41.useContext)(import_react_aria_components46.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const currentYear = state.focusedDate.year;
   const minMonth = minValue && minValue.year === currentYear ? minValue.month : 1;
   const maxMonth = maxValue && maxValue.year === currentYear ? maxValue.month : 12;
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     ListBox2,
     {
       dataTestid: "monthOptions",
@@ -3389,27 +3524,27 @@ var MonthListBox = ({
 var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
-var import_react40 = require("react");
+var import_react42 = require("react");
 var import_react_aria_components47 = require("react-aria-components");
-var import_i18n7 = require("@react-aria/i18n");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_i18n8 = require("@react-aria/i18n");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var YearListBox = ({
   setSelectedDropdown,
   minValue,
   maxValue
 }) => {
-  const state = (0, import_react40.useContext)(import_react_aria_components47.CalendarStateContext);
+  const state = (0, import_react42.useContext)(import_react_aria_components47.CalendarStateContext);
   const years = [];
   for (let i = -20; i <= 20; i++) {
     years.push(state.focusedDate.add({ years: i }));
   }
-  const formatter = (0, import_i18n7.useDateFormatter)({
+  const formatter = (0, import_i18n8.useDateFormatter)({
     year: "numeric",
     timeZone: state.timeZone
   });
   const minYear = minValue ? minValue.year : -Infinity;
   const maxYear = maxValue ? maxValue.year : Infinity;
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     ListBox2,
     {
       dataTestid: "yearOptions",
@@ -3441,7 +3576,7 @@ function hasOnlyOneSelectableYear(minValue, maxValue) {
 }
 
 // src/Calendar/Calendar.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var _Calendar = ({
   disabled,
   readOnly,
@@ -3464,9 +3599,9 @@ var _Calendar = ({
     ...rest
   };
   const classNames3 = (0, import_system61.useClassNames)({ component: "Calendar", size: size2, variant });
-  const [selectedDropdown, setSelectedDropdown] = (0, import_react41.useState)();
+  const [selectedDropdown, setSelectedDropdown] = (0, import_react43.useState)();
   const ViewMap = {
-    month: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    month: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       MonthListBox_default,
       {
         setSelectedDropdown,
@@ -3474,7 +3609,7 @@ var _Calendar = ({
         maxValue
       }
     ),
-    year: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    year: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       YearListBox_default,
       {
         setSelectedDropdown,
@@ -3483,7 +3618,7 @@ var _Calendar = ({
       }
     )
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(CalendarContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(CalendarContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     import_react_aria_components48.Calendar,
     {
       className: (0, import_system61.cn)(
@@ -3493,7 +3628,7 @@ var _Calendar = ({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           "div",
           {
             className: (0, import_system61.cn)(
@@ -3503,7 +3638,7 @@ var _Calendar = ({
             children: ViewMap[selectedDropdown]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
           "div",
           {
             className: (0, import_system61.cn)(
@@ -3511,9 +3646,9 @@ var _Calendar = ({
               selectedDropdown && "pointer-events-none opacity-0"
             ),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "flex w-fit gap-4", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex w-fit gap-4", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                     CalendarListBox,
                     {
                       type: "month",
@@ -3522,7 +3657,7 @@ var _Calendar = ({
                     },
                     "month"
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                     CalendarListBox,
                     {
                       type: "year",
@@ -3532,9 +3667,9 @@ var _Calendar = ({
                     "year"
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(MonthControls_default, {})
+                /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(MonthControls_default, {})
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(_CalendarGrid, {})
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(_CalendarGrid, {})
             ]
           }
         )
@@ -3544,11 +3679,11 @@ var _Calendar = ({
 };
 
 // src/DatePicker/DatePicker.tsx
-var import_react42 = __toESM(require("react"));
+var import_react44 = __toESM(require("react"));
 var import_react_aria_components49 = require("react-aria-components");
 var import_system62 = require("@marigold/system");
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var _DatePicker = import_react42.default.forwardRef(
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var _DatePicker = import_react44.default.forwardRef(
   ({
     dateUnavailable,
     disabled,
@@ -3576,7 +3711,7 @@ var _DatePicker = import_react42.default.forwardRef(
       size: size2,
       variant
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
       FieldBase,
       {
         as: import_react_aria_components49.DatePicker,
@@ -3585,10 +3720,10 @@ var _DatePicker = import_react42.default.forwardRef(
         ...props,
         ref,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
             _DateInput,
             {
-              action: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(IconButton, { className: classNames3, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+              action: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(IconButton, { className: classNames3, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                 "svg",
                 {
                   "data-testid": "action",
@@ -3596,12 +3731,12 @@ var _DatePicker = import_react42.default.forwardRef(
                   width: 24,
                   height: 24,
                   fill: "currentColor",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
                 }
               ) })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react_aria_components49.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(_Calendar, { disabled }) }) })
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_react_aria_components49.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(_Calendar, { disabled }) }) })
         ]
       }
     );
@@ -3610,8 +3745,8 @@ var _DatePicker = import_react42.default.forwardRef(
 
 // src/Inset/Inset.tsx
 var import_system63 = require("@marigold/system");
-var import_jsx_runtime75 = require("react/jsx-runtime");
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
   "div",
   {
     className: (0, import_system63.cn)(
@@ -3624,38 +3759,63 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_
 );
 
 // src/Link/Link.tsx
-var import_react43 = require("react");
+var import_react45 = require("react");
 var import_react_aria_components50 = require("react-aria-components");
 var import_system64 = require("@marigold/system");
-var import_jsx_runtime76 = require("react/jsx-runtime");
-var _Link = (0, import_react43.forwardRef)(
+var import_jsx_runtime78 = require("react/jsx-runtime");
+var _Link = (0, import_react45.forwardRef)(
   ({ variant, size: size2, disabled, children, ...props }, ref) => {
     const classNames3 = (0, import_system64.useClassNames)({
       component: "Link",
       variant,
       size: size2
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_react_aria_components50.Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react_aria_components50.Link, { ...props, ref, className: classNames3, isDisabled: disabled, children });
   }
 );
 
-// src/List/List.tsx
+// src/LinkButton/LinkButton.tsx
+var import_react46 = require("react");
+var import_react_aria_components51 = require("react-aria-components");
 var import_system65 = require("@marigold/system");
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var _LinkButton = (0, import_react46.forwardRef)(
+  ({ children, variant, size: size2, disabled, fullWidth, ...props }, ref) => {
+    const classNames3 = (0, import_system65.useClassNames)({
+      component: "Button",
+      variant,
+      size: size2
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      import_react_aria_components51.Link,
+      {
+        ...props,
+        ref,
+        className: (0, import_system65.cn)(classNames3, fullWidth ? "w-full" : void 0),
+        isDisabled: disabled,
+        children
+      }
+    );
+  }
+);
+
+// src/List/List.tsx
+var import_system66 = require("@marigold/system");
 
 // src/List/Context.ts
-var import_react44 = require("react");
-var ListContext = (0, import_react44.createContext)({});
-var useListContext = () => (0, import_react44.useContext)(ListContext);
+var import_react47 = require("react");
+var ListContext = (0, import_react47.createContext)({});
+var useListContext = () => (0, import_react47.useContext)(ListContext);
 
 // src/List/ListItem.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames3 } = useListContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("li", { ...props, className: classNames3, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("li", { ...props, className: classNames3, children });
 };
 
 // src/List/List.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var List = ({
   as = "ul",
   children,
@@ -3664,38 +3824,38 @@ var List = ({
   ...props
 }) => {
   const Component2 = as;
-  const classNames3 = (0, import_system65.useClassNames)({ component: "List", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
+  const classNames3 = (0, import_system66.useClassNames)({ component: "List", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Component2, { ...props, className: classNames3[as], children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ListContext.Provider, { value: { classNames: classNames3.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-var import_react_aria_components53 = require("react-aria-components");
-var import_system68 = require("@marigold/system");
+var import_react_aria_components54 = require("react-aria-components");
+var import_system69 = require("@marigold/system");
 
 // src/Menu/MenuItem.tsx
-var import_react_aria_components51 = require("react-aria-components");
-var import_system66 = require("@marigold/system");
-var import_jsx_runtime79 = require("react/jsx-runtime");
-var _MenuItem = ({ children, ...props }) => {
-  const classNames3 = (0, import_system66.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_react_aria_components51.MenuItem, { ...props, className: classNames3.item, children });
+var import_react_aria_components52 = require("react-aria-components");
+var import_system67 = require("@marigold/system");
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var _MenuItem = ({ children, variant, size: size2, ...props }) => {
+  const classNames3 = (0, import_system67.useClassNames)({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react_aria_components52.MenuItem, { ...props, className: classNames3.item, children });
 };
 
 // src/Menu/MenuSection.tsx
-var import_react_aria_components52 = require("react-aria-components");
-var import_system67 = require("@marigold/system");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_react_aria_components53 = require("react-aria-components");
+var import_system68 = require("@marigold/system");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = (0, import_system67.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_react_aria_components52.MenuSection, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_react_aria_components52.Header, { className: className.section, children: title }),
+  const className = (0, import_system68.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_react_aria_components53.MenuSection, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_react_aria_components53.Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var _Menu = ({
   children,
   label,
@@ -3707,10 +3867,10 @@ var _Menu = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const classNames3 = (0, import_system68.useClassNames)({ component: "Menu", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_react_aria_components53.MenuTrigger, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
-      import_react_aria_components53.Button,
+  const classNames3 = (0, import_system69.useClassNames)({ component: "Menu", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_react_aria_components54.MenuTrigger, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      import_react_aria_components54.Button,
       {
         className: classNames3.button,
         "aria-label": ariaLabel,
@@ -3718,19 +3878,19 @@ var _Menu = ({
         children: label
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react_aria_components53.Menu, { ...props, className: classNames3.container, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_aria_components54.Menu, { ...props, className: classNames3.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
 _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var ActionMenu = ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var ActionMenu = ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
   _Menu,
   {
     ...props,
-    label: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+    label: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -3741,9 +3901,9 @@ var ActionMenu = ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runt
         strokeLinecap: "round",
         strokeLinejoin: "round",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("circle", { cx: 12, cy: 12, r: 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("circle", { cx: 12, cy: 5, r: 1 }),
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("circle", { cx: 12, cy: 19, r: 1 })
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("circle", { cx: 12, cy: 12, r: 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("circle", { cx: 12, cy: 5, r: 1 }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("circle", { cx: 12, cy: 19, r: 1 })
         ]
       }
     ),
@@ -3754,43 +3914,43 @@ ActionMenu.Item = _Menu.Item;
 ActionMenu.Section = _Menu.Section;
 
 // src/SectionMessage/SectionMessage.tsx
-var import_react46 = require("react");
+var import_react49 = require("react");
 var import_button = require("@react-aria/button");
-var import_system71 = require("@marigold/system");
+var import_system72 = require("@marigold/system");
 
 // src/SectionMessage/Context.tsx
-var import_react45 = require("react");
-var SectionMessageContext = (0, import_react45.createContext)({});
-var useSectionMessageContext = () => (0, import_react45.useContext)(SectionMessageContext);
+var import_react48 = require("react");
+var SectionMessageContext = (0, import_react48.createContext)({});
+var useSectionMessageContext = () => (0, import_react48.useContext)(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
-var import_system69 = require("@marigold/system");
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_system70 = require("@marigold/system");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_system69.cn)("[grid-area:content]", classNames3.content), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_system70.cn)("[grid-area:content]", classNames3.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
-var import_system70 = require("@marigold/system");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_system71 = require("@marigold/system");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames3 } = useSectionMessageContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: (0, import_system70.cn)("[grid-area:title]", classNames3.title), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_system71.cn)("[grid-area:title]", classNames3.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var icons2 = {
-  success: () => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  success: () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3800,13 +3960,13 @@ var icons2 = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  info: () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3816,13 +3976,13 @@ var icons2 = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  warning: () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3832,13 +3992,13 @@ var icons2 = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  error: () => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -3858,14 +4018,14 @@ var SectionMessage = ({
   onCloseChange,
   ...props
 }) => {
-  const buttonRef = (0, import_react46.useRef)(null);
-  const classNames3 = (0, import_system71.useClassNames)({
+  const buttonRef = (0, import_react49.useRef)(null);
+  const classNames3 = (0, import_system72.useClassNames)({
     component: "SectionMessage",
     variant,
     size: size2
   });
   const Icon4 = icons2[variant];
-  const [internalVisible, setInternalVisible] = (0, import_react46.useState)(true);
+  const [internalVisible, setInternalVisible] = (0, import_react49.useState)(true);
   const isCurrentlyVisible = close != null ? close : internalVisible;
   const { buttonProps } = (0, import_button.useButton)(props, buttonRef);
   const handleClose = () => {
@@ -3875,21 +4035,21 @@ var SectionMessage = ({
     }
   };
   if (!isCurrentlyVisible) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(SectionMessageContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(
     "div",
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
-      className: (0, import_system71.cn)("grid auto-rows-min", classNames3.container),
+      className: (0, import_system72.cn)("grid auto-rows-min", classNames3.container),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: (0, import_system71.cn)("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Icon4, {}) }),
-        closeButton && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_system72.cn)("[grid-area:icon]", classNames3.icon), children: Icon4 && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon4, {}) }),
+        closeButton && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
           CloseButton,
           {
             ...buttonProps,
             ref: buttonRef,
             "aria-label": "close",
-            className: (0, import_system71.cn)("[grid-area:close]", classNames3.close),
+            className: (0, import_system72.cn)("[grid-area:close]", classNames3.close),
             onPress: handleClose
           }
         ),
@@ -3902,7 +4062,7 @@ SectionMessage.Title = SectionMessageTitle;
 SectionMessage.Content = SectionMessageContent;
 
 // src/Multiselect/Multiselect.tsx
-var import_react_aria_components54 = require("react-aria-components");
+var import_react_aria_components55 = require("react-aria-components");
 
 // ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
@@ -4042,33 +4202,33 @@ function _objectWithoutProperties(e, t) {
 }
 
 // ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.1.12_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-select/dist/useStateManager-7e1e8489.esm.js
-var import_react47 = require("react");
+var import_react50 = require("react");
 var _excluded = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
 function useStateManager(_ref3) {
   var _ref$defaultInputValu = _ref3.defaultInputValue, defaultInputValue = _ref$defaultInputValu === void 0 ? "" : _ref$defaultInputValu, _ref$defaultMenuIsOpe = _ref3.defaultMenuIsOpen, defaultMenuIsOpen = _ref$defaultMenuIsOpe === void 0 ? false : _ref$defaultMenuIsOpe, _ref$defaultValue = _ref3.defaultValue, defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue, propsInputValue = _ref3.inputValue, propsMenuIsOpen = _ref3.menuIsOpen, propsOnChange = _ref3.onChange, propsOnInputChange = _ref3.onInputChange, propsOnMenuClose = _ref3.onMenuClose, propsOnMenuOpen = _ref3.onMenuOpen, propsValue = _ref3.value, restSelectProps = _objectWithoutProperties(_ref3, _excluded);
-  var _useState = (0, import_react47.useState)(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
-  var _useState3 = (0, import_react47.useState)(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
-  var _useState5 = (0, import_react47.useState)(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
-  var onChange2 = (0, import_react47.useCallback)(function(value2, actionMeta) {
+  var _useState = (0, import_react50.useState)(propsInputValue !== void 0 ? propsInputValue : defaultInputValue), _useState2 = _slicedToArray(_useState, 2), stateInputValue = _useState2[0], setStateInputValue = _useState2[1];
+  var _useState3 = (0, import_react50.useState)(propsMenuIsOpen !== void 0 ? propsMenuIsOpen : defaultMenuIsOpen), _useState4 = _slicedToArray(_useState3, 2), stateMenuIsOpen = _useState4[0], setStateMenuIsOpen = _useState4[1];
+  var _useState5 = (0, import_react50.useState)(propsValue !== void 0 ? propsValue : defaultValue), _useState6 = _slicedToArray(_useState5, 2), stateValue = _useState6[0], setStateValue = _useState6[1];
+  var onChange2 = (0, import_react50.useCallback)(function(value2, actionMeta) {
     if (typeof propsOnChange === "function") {
       propsOnChange(value2, actionMeta);
     }
     setStateValue(value2);
   }, [propsOnChange]);
-  var onInputChange = (0, import_react47.useCallback)(function(value2, actionMeta) {
+  var onInputChange = (0, import_react50.useCallback)(function(value2, actionMeta) {
     var newValue;
     if (typeof propsOnInputChange === "function") {
       newValue = propsOnInputChange(value2, actionMeta);
     }
     setStateInputValue(newValue !== void 0 ? newValue : value2);
   }, [propsOnInputChange]);
-  var onMenuOpen = (0, import_react47.useCallback)(function() {
+  var onMenuOpen = (0, import_react50.useCallback)(function() {
     if (typeof propsOnMenuOpen === "function") {
       propsOnMenuOpen();
     }
     setStateMenuIsOpen(true);
   }, [propsOnMenuOpen]);
-  var onMenuClose = (0, import_react47.useCallback)(function() {
+  var onMenuClose = (0, import_react50.useCallback)(function() {
     if (typeof propsOnMenuClose === "function") {
       propsOnMenuClose();
     }
@@ -4101,7 +4261,7 @@ function _extends() {
 
 // ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.1.12_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-select/dist/react-select.esm.js
 var React11 = __toESM(require("react"));
-var import_react54 = require("react");
+var import_react57 = require("react");
 
 // ../../node_modules/.pnpm/@babel+runtime@7.28.2/node_modules/@babel/runtime/helpers/esm/classCallCheck.js
 function _classCallCheck(a, n) {
@@ -4209,11 +4369,11 @@ function _toConsumableArray(r) {
 
 // ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.1.12_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-select/dist/Select-ef7c0426.esm.js
 var React10 = __toESM(require("react"));
-var import_react52 = require("react");
+var import_react55 = require("react");
 
 // ../../node_modules/.pnpm/@emotion+react@11.14.0_@types+react@19.1.12_react@19.1.1/node_modules/@emotion/react/dist/emotion-element-d59e098f.esm.js
 var React8 = __toESM(require("react"));
-var import_react48 = require("react");
+var import_react51 = require("react");
 
 // ../../node_modules/.pnpm/@emotion+sheet@1.4.0/node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
 var isDevelopment = false;
@@ -5401,15 +5561,15 @@ var EmotionCacheContext = /* @__PURE__ */ React8.createContext(
 );
 var CacheProvider = EmotionCacheContext.Provider;
 var withEmotionCache = function withEmotionCache2(func) {
-  return /* @__PURE__ */ (0, import_react48.forwardRef)(function(props, ref) {
-    var cache = (0, import_react48.useContext)(EmotionCacheContext);
+  return /* @__PURE__ */ (0, import_react51.forwardRef)(function(props, ref) {
+    var cache = (0, import_react51.useContext)(EmotionCacheContext);
     return func(props, cache, ref);
   });
 };
 if (!isBrowser4) {
   withEmotionCache = function withEmotionCache3(func) {
     return function(props) {
-      var cache = (0, import_react48.useContext)(EmotionCacheContext);
+      var cache = (0, import_react51.useContext)(EmotionCacheContext);
       if (cache === null) {
         cache = createCache({
           key: "css"
@@ -5493,7 +5653,7 @@ var Emotion$1 = Emotion;
 var React9 = __toESM(require("react"));
 var import_extends2 = __toESM(require_extends());
 var import_hoist_non_react_statics = __toESM(require_hoist_non_react_statics_cjs());
-var jsx86 = function jsx87(type, props) {
+var jsx89 = function jsx90(type, props) {
   var args = arguments;
   if (props == null || !hasOwn.call(props, "css")) {
     return React9.createElement.apply(void 0, args);
@@ -5511,7 +5671,7 @@ var jsx86 = function jsx87(type, props) {
   var JSX2;
   /* @__PURE__ */ (function(_JSX) {
   })(JSX2 || (JSX2 = _jsx.JSX || (_jsx.JSX = {})));
-})(jsx86 || (jsx86 = {}));
+})(jsx89 || (jsx89 = {}));
 function css() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
@@ -5541,7 +5701,7 @@ function _taggedTemplateLiteral(e, t) {
 }
 
 // ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.1.12_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-select/dist/index-641ee5b8.esm.js
-var import_react51 = require("react");
+var import_react54 = require("react");
 var import_react_dom = require("react-dom");
 
 // ../../node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
@@ -5944,11 +6104,11 @@ function autoUpdate(reference, floating, update, options2) {
 }
 
 // ../../node_modules/.pnpm/use-isomorphic-layout-effect@1.2.1_@types+react@19.1.12_react@19.1.1/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js
-var import_react49 = require("react");
+var import_react52 = require("react");
 var isClient = typeof document !== "undefined";
 var noop = function noop2() {
 };
-var index = isClient ? import_react49.useLayoutEffect : noop;
+var index = isClient ? import_react52.useLayoutEffect : noop;
 
 // ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.1.12_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-select/dist/index-641ee5b8.esm.js
 var _excluded$4 = ["className", "clearValue", "cx", "getStyles", "getClassNames", "getValue", "hasValue", "isMulti", "isRtl", "options", "selectOption", "selectProps", "setValue", "theme"];
@@ -6282,13 +6442,13 @@ var menuCSS = function menuCSS2(_ref23, unstyled) {
     marginTop: spacing2.menuGutter
   });
 };
-var PortalPlacementContext = /* @__PURE__ */ (0, import_react51.createContext)(null);
+var PortalPlacementContext = /* @__PURE__ */ (0, import_react54.createContext)(null);
 var MenuPlacer = function MenuPlacer2(props) {
   var children = props.children, minMenuHeight = props.minMenuHeight, maxMenuHeight = props.maxMenuHeight, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition, menuShouldScrollIntoView = props.menuShouldScrollIntoView, theme = props.theme;
-  var _ref3 = (0, import_react51.useContext)(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
-  var ref = (0, import_react51.useRef)(null);
-  var _useState = (0, import_react51.useState)(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
-  var _useState3 = (0, import_react51.useState)(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
+  var _ref3 = (0, import_react54.useContext)(PortalPlacementContext) || {}, setPortalPlacement = _ref3.setPortalPlacement;
+  var ref = (0, import_react54.useRef)(null);
+  var _useState = (0, import_react54.useState)(maxMenuHeight), _useState2 = _slicedToArray(_useState, 2), maxHeight = _useState2[0], setMaxHeight = _useState2[1];
+  var _useState3 = (0, import_react54.useState)(null), _useState4 = _slicedToArray(_useState3, 2), placement = _useState4[0], setPlacement = _useState4[1];
   var controlHeight2 = theme.spacing.controlHeight;
   index(function() {
     var menuEl = ref.current;
@@ -6318,7 +6478,7 @@ var MenuPlacer = function MenuPlacer2(props) {
 };
 var Menu2 = function Menu3(props) {
   var children = props.children, innerRef = props.innerRef, innerProps = props.innerProps;
-  return jsx86("div", _extends({}, getStyleProps(props, "menu", {
+  return jsx89("div", _extends({}, getStyleProps(props, "menu", {
     menu: true
   }), {
     ref: innerRef
@@ -6340,7 +6500,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 jsx86("div", _extends({}, getStyleProps(props, "menuList", {
+  return jsx89("div", _extends({}, getStyleProps(props, "menuList", {
     "menu-list": true,
     "menu-list--is-multi": isMulti
   }), {
@@ -6360,7 +6520,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 jsx86("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx89("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "noOptionsMessage", {
@@ -6370,7 +6530,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 jsx86("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx89("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     children,
     innerProps
   }), "loadingMessage", {
@@ -6390,16 +6550,16 @@ var menuPortalCSS = function menuPortalCSS2(_ref8) {
 };
 var MenuPortal = function MenuPortal2(props) {
   var appendTo = props.appendTo, children = props.children, controlElement = props.controlElement, innerProps = props.innerProps, menuPlacement = props.menuPlacement, menuPosition = props.menuPosition;
-  var menuPortalRef = (0, import_react51.useRef)(null);
-  var cleanupRef = (0, import_react51.useRef)(null);
-  var _useState5 = (0, import_react51.useState)(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
-  var portalPlacementContext = (0, import_react51.useMemo)(function() {
+  var menuPortalRef = (0, import_react54.useRef)(null);
+  var cleanupRef = (0, import_react54.useRef)(null);
+  var _useState5 = (0, import_react54.useState)(coercePlacement(menuPlacement)), _useState6 = _slicedToArray(_useState5, 2), placement = _useState6[0], setPortalPlacement = _useState6[1];
+  var portalPlacementContext = (0, import_react54.useMemo)(function() {
     return {
       setPortalPlacement
     };
   }, []);
-  var _useState7 = (0, import_react51.useState)(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
-  var updateComputedPosition = (0, import_react51.useCallback)(function() {
+  var _useState7 = (0, import_react54.useState)(null), _useState8 = _slicedToArray(_useState7, 2), computedPosition = _useState8[0], setComputedPosition = _useState8[1];
+  var updateComputedPosition = (0, import_react54.useCallback)(function() {
     if (!controlElement) return;
     var rect = getBoundingClientObj(controlElement);
     var scrollDistance = menuPosition === "fixed" ? 0 : window.pageYOffset;
@@ -6414,7 +6574,7 @@ var MenuPortal = function MenuPortal2(props) {
   index(function() {
     updateComputedPosition();
   }, [updateComputedPosition]);
-  var runAutoUpdate = (0, import_react51.useCallback)(function() {
+  var runAutoUpdate = (0, import_react54.useCallback)(function() {
     if (typeof cleanupRef.current === "function") {
       cleanupRef.current();
       cleanupRef.current = null;
@@ -6428,12 +6588,12 @@ var MenuPortal = function MenuPortal2(props) {
   index(function() {
     runAutoUpdate();
   }, [runAutoUpdate]);
-  var setMenuPortalElement = (0, import_react51.useCallback)(function(menuPortalElement) {
+  var setMenuPortalElement = (0, import_react54.useCallback)(function(menuPortalElement) {
     menuPortalRef.current = menuPortalElement;
     runAutoUpdate();
   }, [runAutoUpdate]);
   if (!appendTo && menuPosition !== "fixed" || !computedPosition) return null;
-  var menuWrapper = jsx86("div", _extends({
+  var menuWrapper = jsx89("div", _extends({
     ref: setMenuPortalElement
   }, getStyleProps(_objectSpread2(_objectSpread2({}, props), {}, {
     offset: computedPosition.offset,
@@ -6442,7 +6602,7 @@ var MenuPortal = function MenuPortal2(props) {
   }), "menuPortal", {
     "menu-portal": true
   }), innerProps), children);
-  return jsx86(PortalPlacementContext.Provider, {
+  return jsx89(PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /* @__PURE__ */ (0, import_react_dom.createPortal)(menuWrapper, appendTo) : menuWrapper);
 };
@@ -6458,7 +6618,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 jsx86("div", _extends({}, getStyleProps(props, "container", {
+  return jsx89("div", _extends({}, getStyleProps(props, "container", {
     "--is-disabled": isDisabled,
     "--is-rtl": isRtl
   }), innerProps), children);
@@ -6479,7 +6639,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 jsx86("div", _extends({}, getStyleProps(props, "valueContainer", {
+  return jsx89("div", _extends({}, getStyleProps(props, "valueContainer", {
     "value-container": true,
     "value-container--is-multi": isMulti,
     "value-container--has-value": hasValue
@@ -6495,7 +6655,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS2() {
 };
 var IndicatorsContainer = function IndicatorsContainer2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx86("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
+  return jsx89("div", _extends({}, getStyleProps(props, "indicatorsContainer", {
     indicators: true
   }), innerProps), children);
 };
@@ -6516,7 +6676,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var Svg = function Svg2(_ref3) {
   var size2 = _ref3.size, props = _objectWithoutProperties(_ref3, _excluded$2);
-  return jsx86("svg", _extends({
+  return jsx89("svg", _extends({
     height: size2,
     width: size2,
     viewBox: "0 0 20 20",
@@ -6526,16 +6686,16 @@ var Svg = function Svg2(_ref3) {
   }, props));
 };
 var CrossIcon = function CrossIcon2(props) {
-  return jsx86(Svg, _extends({
+  return jsx89(Svg, _extends({
     size: 20
-  }, props), jsx86("path", {
+  }, props), jsx89("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 jsx86(Svg, _extends({
+  return jsx89(Svg, _extends({
     size: 20
-  }, props), jsx86("path", {
+  }, props), jsx89("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"
   }));
 };
@@ -6556,18 +6716,18 @@ var baseCSS = function baseCSS2(_ref3, unstyled) {
 var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx86("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
+  return jsx89("div", _extends({}, getStyleProps(props, "dropdownIndicator", {
     indicator: true,
     "dropdown-indicator": true
-  }), innerProps), children || jsx86(DownChevron, null));
+  }), innerProps), children || jsx89(DownChevron, null));
 };
 var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx86("div", _extends({}, getStyleProps(props, "clearIndicator", {
+  return jsx89("div", _extends({}, getStyleProps(props, "clearIndicator", {
     indicator: true,
     "clear-indicator": true
-  }), innerProps), children || jsx86(CrossIcon, null));
+  }), innerProps), children || jsx89(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;
@@ -6583,7 +6743,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS2(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator2(props) {
   var innerProps = props.innerProps;
-  return jsx86("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
+  return jsx89("span", _extends({}, innerProps, getStyleProps(props, "indicatorSeparator", {
     "indicator-separator": true
   })));
 };
@@ -6607,7 +6767,7 @@ var loadingIndicatorCSS = function loadingIndicatorCSS2(_ref5, unstyled) {
 };
 var LoadingDot = function LoadingDot2(_ref6) {
   var delay = _ref6.delay, offset2 = _ref6.offset;
-  return jsx86("span", {
+  return jsx89("span", {
     css: /* @__PURE__ */ css({
       animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
       backgroundColor: "currentColor",
@@ -6622,20 +6782,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 jsx86("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
+  return jsx89("div", _extends({}, getStyleProps(_objectSpread2(_objectSpread2({}, restProps), {}, {
     innerProps,
     isRtl,
     size: size2
   }), "loadingIndicator", {
     indicator: true,
     "loading-indicator": true
-  }), innerProps), jsx86(LoadingDot, {
+  }), innerProps), jsx89(LoadingDot, {
     delay: 0,
     offset: isRtl
-  }), jsx86(LoadingDot, {
+  }), jsx89(LoadingDot, {
     delay: 160,
     offset: true
-  }), jsx86(LoadingDot, {
+  }), jsx89(LoadingDot, {
     delay: 320,
     offset: !isRtl
   }));
@@ -6667,7 +6827,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 jsx86("div", _extends({
+  return jsx89("div", _extends({
     ref: innerRef
   }, getStyleProps(props, "control", {
     control: true,
@@ -6689,15 +6849,15 @@ var groupCSS = function groupCSS2(_ref3, unstyled) {
 };
 var Group2 = function Group3(props) {
   var children = props.children, cx = props.cx, getStyles = props.getStyles, getClassNames2 = props.getClassNames, Heading7 = props.Heading, headingProps = props.headingProps, innerProps = props.innerProps, label = props.label, theme = props.theme, selectProps = props.selectProps;
-  return jsx86("div", _extends({}, getStyleProps(props, "group", {
+  return jsx89("div", _extends({}, getStyleProps(props, "group", {
     group: true
-  }), innerProps), jsx86(Heading7, _extends({}, headingProps, {
+  }), innerProps), jsx89(Heading7, _extends({}, headingProps, {
     selectProps,
     theme,
     getStyles,
     getClassNames: getClassNames2,
     cx
-  }), label), jsx86("div", null, children));
+  }), label), jsx89("div", null, children));
 };
 var groupHeadingCSS = function groupHeadingCSS2(_ref23, unstyled) {
   var _ref2$theme = _ref23.theme, colors2 = _ref2$theme.colors, spacing2 = _ref2$theme.spacing;
@@ -6719,7 +6879,7 @@ var GroupHeading = function GroupHeading2(props) {
   var _cleanCommonProps = cleanCommonProps(props);
   _cleanCommonProps.data;
   var innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$1);
-  return jsx86("div", _extends({}, getStyleProps(props, "groupHeading", {
+  return jsx89("div", _extends({}, getStyleProps(props, "groupHeading", {
     "group-heading": true
   }), innerProps));
 };
@@ -6771,11 +6931,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 jsx86("div", _extends({}, getStyleProps(props, "input", {
+  return jsx89("div", _extends({}, getStyleProps(props, "input", {
     "input-container": true
   }), {
     "data-value": value || ""
-  }), jsx86("input", _extends({
+  }), jsx89("input", _extends({
     className: cx({
       input: true
     }, inputClassName),
@@ -6829,35 +6989,35 @@ var multiValueRemoveCSS = function multiValueRemoveCSS2(_ref3, unstyled) {
 };
 var MultiValueGeneric = function MultiValueGeneric2(_ref4) {
   var children = _ref4.children, innerProps = _ref4.innerProps;
-  return jsx86("div", innerProps, children);
+  return jsx89("div", innerProps, children);
 };
 var MultiValueContainer = MultiValueGeneric;
 var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children, innerProps = _ref5.innerProps;
-  return jsx86("div", _extends({
+  return jsx89("div", _extends({
     role: "button"
-  }, innerProps), children || jsx86(CrossIcon, {
+  }, innerProps), children || jsx89(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 jsx86(Container2, {
+  return jsx89(Container2, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValue", {
       "multi-value": true,
       "multi-value--is-disabled": isDisabled
     })), innerProps),
     selectProps
-  }, jsx86(Label3, {
+  }, jsx89(Label3, {
     data,
     innerProps: _objectSpread2({}, getStyleProps(props, "multiValueLabel", {
       "multi-value__label": true
     })),
     selectProps
-  }, children), jsx86(Remove, {
+  }, children), jsx89(Remove, {
     data,
     innerProps: _objectSpread2(_objectSpread2({}, getStyleProps(props, "multiValueRemove", {
       "multi-value__remove": true
@@ -6890,7 +7050,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 jsx86("div", _extends({}, getStyleProps(props, "option", {
+  return jsx89("div", _extends({}, getStyleProps(props, "option", {
     option: true,
     "option--is-disabled": isDisabled,
     "option--is-focused": isFocused,
@@ -6914,7 +7074,7 @@ var placeholderCSS = function placeholderCSS2(_ref3, unstyled) {
 };
 var Placeholder = function Placeholder2(props) {
   var children = props.children, innerProps = props.innerProps;
-  return jsx86("div", _extends({}, getStyleProps(props, "placeholder", {
+  return jsx89("div", _extends({}, getStyleProps(props, "placeholder", {
     placeholder: true
   }), innerProps), children);
 };
@@ -6936,7 +7096,7 @@ var css3 = function css4(_ref3, unstyled) {
 };
 var SingleValue = function SingleValue2(props) {
   var children = props.children, isDisabled = props.isDisabled, innerProps = props.innerProps;
-  return jsx86("div", _extends({}, getStyleProps(props, "singleValue", {
+  return jsx89("div", _extends({}, getStyleProps(props, "singleValue", {
     "single-value": true,
     "single-value--is-disabled": isDisabled
   }), innerProps), children);
@@ -7038,7 +7198,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__$2
 };
 var A11yText = function A11yText2(props) {
-  return jsx86("span", _extends({
+  return jsx89("span", _extends({
     css: _ref
   }, props));
 };
@@ -7099,10 +7259,10 @@ var LiveRegion = function LiveRegion2(props) {
   var ariaLiveMessages = selectProps.ariaLiveMessages, getOptionLabel4 = selectProps.getOptionLabel, inputValue = selectProps.inputValue, isMulti = selectProps.isMulti, isOptionDisabled3 = selectProps.isOptionDisabled, isSearchable = selectProps.isSearchable, menuIsOpen = selectProps.menuIsOpen, options2 = selectProps.options, screenReaderStatus2 = selectProps.screenReaderStatus, tabSelectsValue = selectProps.tabSelectsValue, isLoading = selectProps.isLoading;
   var ariaLabel = selectProps["aria-label"];
   var ariaLive = selectProps["aria-live"];
-  var messages = (0, import_react52.useMemo)(function() {
+  var messages = (0, import_react55.useMemo)(function() {
     return _objectSpread2(_objectSpread2({}, defaultAriaLiveMessages), ariaLiveMessages || {});
   }, [ariaLiveMessages]);
-  var ariaSelected = (0, import_react52.useMemo)(function() {
+  var ariaSelected = (0, import_react55.useMemo)(function() {
     var message = "";
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option, selectedOptions = ariaSelection.options, removedValue = ariaSelection.removedValue, removedValues = ariaSelection.removedValues, value = ariaSelection.value;
@@ -7124,7 +7284,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return message;
   }, [ariaSelection, messages, isOptionDisabled3, selectValue, getOptionLabel4]);
-  var ariaFocused = (0, import_react52.useMemo)(function() {
+  var ariaFocused = (0, import_react55.useMemo)(function() {
     var focusMsg = "";
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
@@ -7143,7 +7303,7 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return focusMsg;
   }, [focusedOption, focusedValue, getOptionLabel4, isOptionDisabled3, messages, focusableOptions, selectValue, isAppleDevice2]);
-  var ariaResults = (0, import_react52.useMemo)(function() {
+  var ariaResults = (0, import_react55.useMemo)(function() {
     var resultsMsg = "";
     if (menuIsOpen && options2.length && !isLoading && messages.onFilter) {
       var resultsMessage = screenReaderStatus2({
@@ -7157,7 +7317,7 @@ var LiveRegion = function LiveRegion2(props) {
     return resultsMsg;
   }, [focusableOptions, inputValue, menuIsOpen, messages, options2, screenReaderStatus2, isLoading]);
   var isInitialFocus = (ariaSelection === null || ariaSelection === void 0 ? void 0 : ariaSelection.action) === "initial-input-focus";
-  var ariaGuidance = (0, import_react52.useMemo)(function() {
+  var ariaGuidance = (0, import_react55.useMemo)(function() {
     var guidanceMsg = "";
     if (messages.guidance) {
       var context = focusedValue ? "value" : menuIsOpen ? "menu" : "input";
@@ -7173,18 +7333,18 @@ var LiveRegion = function LiveRegion2(props) {
     }
     return guidanceMsg;
   }, [ariaLabel, focusedOption, focusedValue, isMulti, isOptionDisabled3, isSearchable, menuIsOpen, messages, selectValue, tabSelectsValue, isInitialFocus]);
-  var ScreenReaderText = jsx86(import_react52.Fragment, null, jsx86("span", {
+  var ScreenReaderText = jsx89(import_react55.Fragment, null, jsx89("span", {
     id: "aria-selection"
-  }, ariaSelected), jsx86("span", {
+  }, ariaSelected), jsx89("span", {
     id: "aria-focused"
-  }, ariaFocused), jsx86("span", {
+  }, ariaFocused), jsx89("span", {
     id: "aria-results"
-  }, ariaResults), jsx86("span", {
+  }, ariaResults), jsx89("span", {
     id: "aria-guidance"
   }, ariaGuidance));
-  return jsx86(import_react52.Fragment, null, jsx86(A11yText$1, {
+  return jsx89(import_react55.Fragment, null, jsx89(A11yText$1, {
     id
-  }, isInitialFocus && ScreenReaderText), jsx86(A11yText$1, {
+  }, isInitialFocus && ScreenReaderText), jsx89(A11yText$1, {
     "aria-live": ariaLive,
     "aria-atomic": "false",
     "aria-relevant": "additions text",
@@ -7497,7 +7657,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 jsx86("input", _extends({
+  return jsx89("input", _extends({
     ref: innerRef
   }, filteredProps, {
     css: /* @__PURE__ */ css({
@@ -7529,11 +7689,11 @@ var cancelScroll = function cancelScroll2(event) {
 };
 function useScrollCapture(_ref3) {
   var isEnabled = _ref3.isEnabled, onBottomArrive = _ref3.onBottomArrive, onBottomLeave = _ref3.onBottomLeave, onTopArrive = _ref3.onTopArrive, onTopLeave = _ref3.onTopLeave;
-  var isBottom = (0, import_react52.useRef)(false);
-  var isTop = (0, import_react52.useRef)(false);
-  var touchStart = (0, import_react52.useRef)(0);
-  var scrollTarget = (0, import_react52.useRef)(null);
-  var handleEventDelta = (0, import_react52.useCallback)(function(event, delta) {
+  var isBottom = (0, import_react55.useRef)(false);
+  var isTop = (0, import_react55.useRef)(false);
+  var touchStart = (0, import_react55.useRef)(0);
+  var scrollTarget = (0, import_react55.useRef)(null);
+  var handleEventDelta = (0, import_react55.useCallback)(function(event, delta) {
     if (scrollTarget.current === null) return;
     var _scrollTarget$current = scrollTarget.current, scrollTop = _scrollTarget$current.scrollTop, scrollHeight = _scrollTarget$current.scrollHeight, clientHeight = _scrollTarget$current.clientHeight;
     var target = scrollTarget.current;
@@ -7567,17 +7727,17 @@ function useScrollCapture(_ref3) {
       cancelScroll(event);
     }
   }, [onBottomArrive, onBottomLeave, onTopArrive, onTopLeave]);
-  var onWheel = (0, import_react52.useCallback)(function(event) {
+  var onWheel = (0, import_react55.useCallback)(function(event) {
     handleEventDelta(event, event.deltaY);
   }, [handleEventDelta]);
-  var onTouchStart = (0, import_react52.useCallback)(function(event) {
+  var onTouchStart = (0, import_react55.useCallback)(function(event) {
     touchStart.current = event.changedTouches[0].clientY;
   }, []);
-  var onTouchMove = (0, import_react52.useCallback)(function(event) {
+  var onTouchMove = (0, import_react55.useCallback)(function(event) {
     var deltaY = touchStart.current - event.changedTouches[0].clientY;
     handleEventDelta(event, deltaY);
   }, [handleEventDelta]);
-  var startListening = (0, import_react52.useCallback)(function(el) {
+  var startListening = (0, import_react55.useCallback)(function(el) {
     if (!el) return;
     var notPassive = supportsPassiveEvents ? {
       passive: false
@@ -7586,13 +7746,13 @@ function useScrollCapture(_ref3) {
     el.addEventListener("touchstart", onTouchStart, notPassive);
     el.addEventListener("touchmove", onTouchMove, notPassive);
   }, [onTouchMove, onTouchStart, onWheel]);
-  var stopListening = (0, import_react52.useCallback)(function(el) {
+  var stopListening = (0, import_react55.useCallback)(function(el) {
     if (!el) return;
     el.removeEventListener("wheel", onWheel, false);
     el.removeEventListener("touchstart", onTouchStart, false);
     el.removeEventListener("touchmove", onTouchMove, false);
   }, [onTouchMove, onTouchStart, onWheel]);
-  (0, import_react52.useEffect)(function() {
+  (0, import_react55.useEffect)(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     startListening(element);
@@ -7639,9 +7799,9 @@ var listenerOptions = {
 };
 function useScrollLock(_ref3) {
   var isEnabled = _ref3.isEnabled, _ref$accountForScroll = _ref3.accountForScrollbars, accountForScrollbars = _ref$accountForScroll === void 0 ? true : _ref$accountForScroll;
-  var originalStyles = (0, import_react52.useRef)({});
-  var scrollTarget = (0, import_react52.useRef)(null);
-  var addScrollLock = (0, import_react52.useCallback)(function(touchScrollTarget) {
+  var originalStyles = (0, import_react55.useRef)({});
+  var scrollTarget = (0, import_react55.useRef)(null);
+  var addScrollLock = (0, import_react55.useCallback)(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -7674,7 +7834,7 @@ function useScrollLock(_ref3) {
     }
     activeScrollLocks += 1;
   }, [accountForScrollbars]);
-  var removeScrollLock = (0, import_react52.useCallback)(function(touchScrollTarget) {
+  var removeScrollLock = (0, import_react55.useCallback)(function(touchScrollTarget) {
     if (!canUseDOM) return;
     var target = document.body;
     var targetStyle = target && target.style;
@@ -7695,7 +7855,7 @@ function useScrollLock(_ref3) {
       }
     }
   }, [accountForScrollbars]);
-  (0, import_react52.useEffect)(function() {
+  (0, import_react55.useEffect)(function() {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     addScrollLock(element);
@@ -7739,7 +7899,7 @@ function ScrollManager(_ref3) {
     setScrollCaptureTarget(element);
     setScrollLockTarget(element);
   };
-  return jsx86(import_react52.Fragment, null, lockEnabled && jsx86("div", {
+  return jsx89(import_react55.Fragment, null, lockEnabled && jsx89("div", {
     onClick: blurSelectInput,
     css: _ref2$1
   }), children(targetRef));
@@ -7758,7 +7918,7 @@ var _ref22 = process.env.NODE_ENV === "production" ? {
 };
 var RequiredInput = function RequiredInput2(_ref3) {
   var name = _ref3.name, onFocus2 = _ref3.onFocus;
-  return jsx86("input", {
+  return jsx89("input", {
     required: true,
     name,
     tabIndex: -1,
@@ -9322,7 +9482,7 @@ var Select = /* @__PURE__ */ (function(_Component) {
     }
   }]);
   return Select3;
-})(import_react52.Component);
+})(import_react55.Component);
 Select.defaultProps = defaultProps;
 
 // ../../node_modules/.pnpm/react-select@5.10.2_@types+react@19.1.12_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/react-select/dist/react-select.esm.js
@@ -9338,7 +9498,7 @@ var import_typeof5 = __toESM(require_typeof());
 var import_taggedTemplateLiteral2 = __toESM(require_taggedTemplateLiteral());
 var import_defineProperty3 = __toESM(require_defineProperty());
 var import_react_dom2 = require("react-dom");
-var StateManagedSelect = /* @__PURE__ */ (0, import_react54.forwardRef)(function(props, ref) {
+var StateManagedSelect = /* @__PURE__ */ (0, import_react57.forwardRef)(function(props, ref) {
   var baseSelectProps = useStateManager(props);
   return /* @__PURE__ */ React11.createElement(Select, _extends({
     ref
@@ -9348,9 +9508,9 @@ var StateManagedSelect$1 = StateManagedSelect;
 
 // src/Multiselect/Multiselect.tsx
 var import_label = require("@react-aria/label");
-var import_utils7 = require("@react-aria/utils");
-var import_system72 = require("@marigold/system");
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_utils8 = require("@react-aria/utils");
+var import_system73 = require("@marigold/system");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var propsToBeRemoved = [
   "clearValue",
   "getStyles",
@@ -9376,8 +9536,8 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
     },
     {}
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-    import_react_aria_components54.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    import_react_aria_components55.Input,
     {
       disabled: props.isDisabled,
       ref: innerRef,
@@ -9387,20 +9547,20 @@ var Input4 = ({ innerRef, placeholder, hasValue, ...props }) => {
   );
 };
 var MultiValueRemove2 = ({ innerProps }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_aria_components54.Button, { slot: "remove", ...innerProps, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react_aria_components55.Button, { slot: "remove", ...innerProps, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var getClassNames = (classNames3) => ({
-  control: () => (0, import_system72.cn)(
+  control: () => (0, import_system73.cn)(
     "relative flex items-center box-border flex-wrap justify-between",
     classNames3.container
   ),
   container: () => "pointer-events-auto",
   indicatorSeparator: () => "hidden",
-  menu: () => (0, import_system72.cn)("b", classNames3.listContainer),
-  menuList: () => (0, import_system72.cn)("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
-  multiValue: () => (0, import_system72.cn)(classNames3.tag, "m-0 "),
+  menu: () => (0, import_system73.cn)("b", classNames3.listContainer),
+  menuList: () => (0, import_system73.cn)("overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh] p-0", classNames3.list),
+  multiValue: () => (0, import_system73.cn)(classNames3.tag, "m-0 "),
   multiValueLabel: () => "p-0",
-  option: ({ isFocused }) => (0, import_system72.cn)(classNames3.option, { isFocused }),
+  option: ({ isFocused }) => (0, import_system73.cn)(classNames3.option, { isFocused }),
   placeholder: () => "hidden",
   valueContainer: () => classNames3.valueContainer
 });
@@ -9423,7 +9583,7 @@ var Multiselect = ({
   width,
   ...rest
 }) => {
-  const classNames3 = (0, import_system72.useClassNames)({
+  const classNames3 = (0, import_system73.useClassNames)({
     component: "MultiSelect",
     size: size2,
     variant
@@ -9442,12 +9602,12 @@ var Multiselect = ({
     label: props.label,
     errorMessage
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-    import_react_aria_components54.Provider,
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    import_react_aria_components55.Provider,
     {
       values: [
         [
-          import_react_aria_components54.FieldErrorContext,
+          import_react_aria_components55.FieldErrorContext,
           {
             isInvalid: !!error,
             validationDetails: {},
@@ -9455,7 +9615,7 @@ var Multiselect = ({
           }
         ],
         [
-          import_react_aria_components54.InputContext,
+          import_react_aria_components55.InputContext,
           {
             ...fieldProps,
             placeholder,
@@ -9463,25 +9623,25 @@ var Multiselect = ({
           }
         ],
         [
-          import_react_aria_components54.ButtonContext,
+          import_react_aria_components55.ButtonContext,
           {
             // react-select doesn't handle readonly so we had to do it manually here
             // keep to the button disabled in read only to prevent menu from opening
             isDisabled: disabled || readOnly,
-            className: (0, import_system72.cn)("flex items-center", classNames3.closeButton)
+            className: (0, import_system73.cn)("flex items-center", classNames3.closeButton)
           }
         ]
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
         "div",
         {
-          className: (0, import_system72.cn)(classNames3.field, "group/field", `w-${width}`),
+          className: (0, import_system73.cn)(classNames3.field, "group/field", `w-${width}`),
           "data-required": props.required,
           "data-invalid": error,
           "data-readonly": readOnly,
           children: [
-            props.label && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(_Label, { ...labelProps, children: props.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            props.label && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(_Label, { ...labelProps, children: props.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
               StateManagedSelect$1,
               {
                 ...props,
@@ -9506,7 +9666,7 @@ var Multiselect = ({
                 inputId: fieldProps.id,
                 "aria-invalid": error,
                 isClearable: false,
-                instanceId: (0, import_utils7.useId)(),
+                instanceId: (0, import_utils8.useId)(),
                 isSearchable: !readOnly,
                 isMulti: true,
                 closeMenuOnSelect: false,
@@ -9517,19 +9677,19 @@ var Multiselect = ({
                   Input: Input4,
                   MultiValueRemove: MultiValueRemove2,
                   // eslint-disable-next-line react/prop-types
-                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+                  DropdownIndicator: ({ innerProps, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
                     "button",
                     {
                       ...innerProps,
                       disabled: isDisabled,
                       className: classNames3.icon,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ChevronDown, { className: "size-4" })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ChevronDown, { className: "size-4" })
                     }
                   )
                 }
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(HelpText, { description, errorMessage })
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(HelpText, { description, errorMessage })
           ]
         }
       )
@@ -9538,15 +9698,15 @@ var Multiselect = ({
 };
 
 // src/NumberField/NumberField.tsx
-var import_react55 = require("react");
-var import_react_aria_components56 = require("react-aria-components");
-var import_system74 = require("@marigold/system");
+var import_react58 = require("react");
+var import_react_aria_components57 = require("react-aria-components");
+var import_system75 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
-var import_react_aria_components55 = require("react-aria-components");
-var import_system73 = require("@marigold/system");
-var import_jsx_runtime87 = require("react/jsx-runtime");
-var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+var import_react_aria_components56 = require("react-aria-components");
+var import_system74 = require("@marigold/system");
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -9554,7 +9714,7 @@ var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { width: 1
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -9564,10 +9724,10 @@ var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { width:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
-    import_react_aria_components55.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+    import_react_aria_components56.Button,
     {
-      className: (0, import_system73.cn)(
+      className: (0, import_system74.cn)(
         [
           "flex items-center justify-center",
           "cursor-pointer data-disabled:cursor-not-allowed"
@@ -9575,14 +9735,14 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Icon4, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
-var _NumberField = (0, import_react55.forwardRef)(
+var import_jsx_runtime91 = require("react/jsx-runtime");
+var _NumberField = (0, import_react58.forwardRef)(
   ({
     variant,
     size: size2,
@@ -9593,7 +9753,7 @@ var _NumberField = (0, import_react55.forwardRef)(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system74.useClassNames)({
+    const classNames3 = (0, import_system75.useClassNames)({
       component: "NumberField",
       size: size2,
       variant
@@ -9606,15 +9766,15 @@ var _NumberField = (0, import_react55.forwardRef)(
       ...rest
     };
     const showStepper = !hideStepper && !readOnly;
-    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       FieldBase,
       {
-        as: import_react_aria_components56.NumberField,
+        as: import_react_aria_components57.NumberField,
         ...props,
         "data-readonly": readOnly ? "true" : void 0,
         "data-stepper": showStepper ? "true" : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_react_aria_components56.Group, { className: (0, import_system74.cn)("flex items-stretch", classNames3.group), children: [
-          showStepper && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_react_aria_components57.Group, { className: (0, import_system75.cn)("flex items-stretch", classNames3.group), children: [
+          showStepper && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -9622,14 +9782,14 @@ var _NumberField = (0, import_react55.forwardRef)(
               slot: "decrement"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-            import_react_aria_components56.Input,
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+            import_react_aria_components57.Input,
             {
               ref,
-              className: (0, import_system74.cn)("h-full flex-1 outline-none", classNames3.input)
+              className: (0, import_system75.cn)("h-full flex-1 outline-none", classNames3.input)
             }
           ),
-          showStepper && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+          showStepper && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             _StepButton,
             {
               className: classNames3.stepper,
@@ -9644,28 +9804,28 @@ var _NumberField = (0, import_react55.forwardRef)(
 );
 
 // src/Pagination/Pagination.tsx
-var import_react58 = require("react");
+var import_react61 = require("react");
 var import_focus2 = require("@react-aria/focus");
-var import_system78 = require("@marigold/system");
+var import_system79 = require("@marigold/system");
 
 // src/Pagination/Ellipsis.tsx
-var import_system75 = require("@marigold/system");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_system76 = require("@marigold/system");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var Ellipsis = () => {
-  const { ellipsis } = (0, import_system75.useClassNames)({
+  const { ellipsis } = (0, import_system76.useClassNames)({
     component: "Pagination"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: ellipsis, "aria-label": "These pages are hidden", children: "\u2026" });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: ellipsis, "aria-label": "These pages are hidden", children: "\u2026" });
 };
 
 // src/Pagination/NavigationButton.tsx
-var import_react56 = require("react");
+var import_react59 = require("react");
 var import_button2 = require("@react-aria/button");
-var import_system76 = require("@marigold/system");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_system77 = require("@marigold/system");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var NavigationButton = (props) => {
-  const ref = (0, import_react56.useRef)(null);
-  const { navigationButton } = (0, import_system76.useClassNames)({
+  const ref = (0, import_react59.useRef)(null);
+  const { navigationButton } = (0, import_system77.useClassNames)({
     component: "Pagination"
   });
   let { buttonProps } = (0, import_button2.useButton)(props, ref);
@@ -9678,14 +9838,14 @@ var NavigationButton = (props) => {
     position: position2,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
     "button",
     {
       ref,
       ...buttonProps,
       ...rest,
       disabled: isDisabled,
-      className: (0, import_system76.cn)(navigationButton, controlLabel && "w-24 px-2"),
+      className: (0, import_system77.cn)(navigationButton, controlLabel && "w-24 px-2"),
       "data-selected": isSelected,
       children: [
         position2 === "left" && children,
@@ -9697,18 +9857,18 @@ var NavigationButton = (props) => {
 };
 
 // src/Pagination/PageButton.tsx
-var import_react57 = require("react");
+var import_react60 = require("react");
 var import_button3 = require("@react-aria/button");
-var import_system77 = require("@marigold/system");
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_system78 = require("@marigold/system");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var PageButton = (props) => {
-  const ref = (0, import_react57.useRef)(null);
-  const { pageButton } = (0, import_system77.useClassNames)({
+  const ref = (0, import_react60.useRef)(null);
+  const { pageButton } = (0, import_system78.useClassNames)({
     component: "Pagination"
   });
   let { buttonProps } = (0, import_button3.useButton)(props, ref);
   let { page, selected, isDisabled } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     "button",
     {
       ref,
@@ -9755,7 +9915,7 @@ var usePageRange = ({ currentPage, totalPages }) => {
 };
 
 // src/Pagination/Pagination.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var InnerPagination = ({
   currentPage,
   pageSize,
@@ -9768,8 +9928,8 @@ var InnerPagination = ({
   const focusManager = (0, import_focus2.useFocusManager)();
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === totalPages || totalPages === 0;
-  const isFirstRender = (0, import_react58.useRef)(true);
-  (0, import_react58.useEffect)(() => {
+  const isFirstRender = (0, import_react61.useRef)(true);
+  (0, import_react61.useEffect)(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
@@ -9782,7 +9942,7 @@ var InnerPagination = ({
       onChange2(newPage);
     }
   };
-  const { icon, container } = (0, import_system78.useClassNames)({
+  const { icon, container } = (0, import_system79.useClassNames)({
     component: "Pagination"
   });
   const handleKeyDown = (onEnter) => (e) => {
@@ -9797,8 +9957,8 @@ var InnerPagination = ({
       onEnter();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       NavigationButton,
       {
         onClick: () => handlePageChange(Math.max(1, currentPage - 1)),
@@ -9807,11 +9967,11 @@ var InnerPagination = ({
         controlLabel: controlLabels == null ? void 0 : controlLabels[0],
         position: "left",
         onKeyDown: handleKeyDown(() => handlePageChange(currentPage - 1)),
-        children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ChevronLeft, { className: icon })
+        children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ChevronLeft, { className: icon })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: container, children: totalPages > 0 ? pageRange.map(
-      (pageNumber, index2) => pageNumber === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Ellipsis, {}, `ellipsis-${index2}`) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { className: container, children: totalPages > 0 ? pageRange.map(
+      (pageNumber, index2) => pageNumber === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Ellipsis, {}, `ellipsis-${index2}`) : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         PageButton,
         {
           page: pageNumber,
@@ -9821,8 +9981,8 @@ var InnerPagination = ({
         },
         pageNumber
       )
-    ) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(PageButton, { page: 1, isDisabled: true }, 1) }),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(PageButton, { page: 1, isDisabled: true }, 1) }),
+    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       NavigationButton,
       {
         onClick: () => handlePageChange(Math.min(totalPages, currentPage + 1)),
@@ -9831,7 +9991,7 @@ var InnerPagination = ({
         controlLabel: controlLabels == null ? void 0 : controlLabels[1],
         position: "right",
         onKeyDown: handleKeyDown(() => handlePageChange(currentPage + 1)),
-        children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ChevronRight, { className: icon })
+        children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ChevronRight, { className: icon })
       }
     )
   ] });
@@ -9843,16 +10003,16 @@ var _Pagination = ({
   pageSize,
   ...props
 }) => {
-  const [currentPage, setCurrentPage] = (0, import_react58.useState)(page != null ? page : defaultPage);
+  const [currentPage, setCurrentPage] = (0, import_react61.useState)(page != null ? page : defaultPage);
   const totalPages = Math.ceil(totalItems / pageSize);
   const pageRange = usePageRange({ currentPage, totalPages });
-  const { container } = (0, import_system78.useClassNames)({ component: "Pagination" });
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  const { container } = (0, import_system79.useClassNames)({ component: "Pagination" });
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     "nav",
     {
       className: container,
       "aria-label": `Page ${currentPage} of ${totalPages}`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_focus2.FocusScope, { restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_focus2.FocusScope, { restoreFocus: true, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
         InnerPagination,
         {
           pageSize,
@@ -9868,23 +10028,23 @@ var _Pagination = ({
 };
 
 // src/Provider/index.ts
-var import_system80 = require("@marigold/system");
-var import_i18n8 = require("@react-aria/i18n");
+var import_system81 = require("@marigold/system");
+var import_i18n9 = require("@react-aria/i18n");
 
 // src/Provider/MarigoldProvider.tsx
-var import_system79 = require("@marigold/system");
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_system80 = require("@marigold/system");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 function MarigoldProvider({
   children,
   className,
   theme
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_system79.ThemeProvider, { theme, className, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_system80.ThemeProvider, { theme, className, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(ConfirmationProvider, { children }) });
 }
 
 // src/Provider/OverlayContainerProvider.tsx
 var import_overlays3 = require("@react-aria/overlays");
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var getContainer = (container) => () => {
   if (container) {
     const element = document.getElementById(container);
@@ -9900,34 +10060,34 @@ var getContainer = (container) => () => {
 var OverlayContainerProvider = ({
   container,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_overlays3.UNSAFE_PortalProvider, { getContainer: getContainer(container), children });
+}) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_overlays3.UNSAFE_PortalProvider, { getContainer: getContainer(container), children });
 
 // src/Radio/Radio.tsx
-var import_react61 = require("react");
-var import_react_aria_components58 = require("react-aria-components");
-var import_system82 = require("@marigold/system");
+var import_react64 = require("react");
+var import_react_aria_components59 = require("react-aria-components");
+var import_system83 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react59 = require("react");
-var RadioGroupContext = (0, import_react59.createContext)(
+var import_react62 = require("react");
+var RadioGroupContext = (0, import_react62.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react59.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react62.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_react60 = require("react");
-var import_react_aria_components57 = require("react-aria-components");
-var import_system81 = require("@marigold/system");
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_react63 = require("react");
+var import_react_aria_components58 = require("react-aria-components");
+var import_system82 = require("@marigold/system");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var CollapsibleGroup2 = ({ children }) => {
-  const state = (0, import_react60.useContext)(import_react_aria_components57.RadioGroupStateContext);
+  const state = (0, import_react63.useContext)(import_react_aria_components58.RadioGroupStateContext);
   if (!children || children.length === 0) {
     return null;
   }
   const defaultExpanded = children.some(
-    (child) => (0, import_react60.isValidElement)(child) && state.selectedValue === child.props.value
+    (child) => (0, import_react63.isValidElement)(child) && state.selectedValue === child.props.value
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(More, { defaultExpanded, showCount: true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(More, { defaultExpanded, showCount: true, children });
 };
 var _RadioGroup = ({
   variant,
@@ -9945,7 +10105,7 @@ var _RadioGroup = ({
   collapseAt,
   ...rest
 }) => {
-  const classNames3 = (0, import_system81.useClassNames)({ component: "Radio", variant, size: size2 });
+  const classNames3 = (0, import_system82.useClassNames)({ component: "Radio", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -9957,10 +10117,10 @@ var _RadioGroup = ({
     children,
     collapseAt
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
     FieldBase,
     {
-      as: import_react_aria_components57.RadioGroup,
+      as: import_react_aria_components58.RadioGroup,
       width,
       label,
       description,
@@ -9968,20 +10128,20 @@ var _RadioGroup = ({
       variant,
       size: size2,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system81.cn)(
+          className: (0, import_system82.cn)(
             classNames3.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(RadioGroupContext.Provider, { value: { width, variant, size: size2 }, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(RadioGroupContext.Provider, { value: { width, variant, size: size2 }, children: [
             visibleChildren,
-            /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(CollapsibleGroup2, { children: collapsedChildren })
+            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(CollapsibleGroup2, { children: collapsedChildren })
           ] })
         }
       )
@@ -9990,33 +10150,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-var import_jsx_runtime96 = require("react/jsx-runtime");
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+var import_jsx_runtime99 = require("react/jsx-runtime");
+var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
   "div",
   {
-    className: (0, import_system82.cn)(
+    className: (0, import_system83.cn)(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(Dot, {}) : null
   }
 );
-var _Radio = (0, import_react61.forwardRef)(
+var _Radio = (0, import_react64.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size: size2, width: groupWidth } = useRadioGroupContext();
-    const classNames3 = (0, import_system82.useClassNames)({
+    const classNames3 = (0, import_system83.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size2 || props.size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
-      import_react_aria_components58.Radio,
+    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
+      import_react_aria_components59.Radio,
       {
         ref,
-        className: (0, import_system82.cn)(
+        className: (0, import_system83.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -10025,18 +10185,18 @@ var _Radio = (0, import_react61.forwardRef)(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(import_jsx_runtime99.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
             Icon3,
             {
               checked: isSelected,
-              className: (0, import_system82.cn)(
+              className: (0, import_system83.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames3.radio
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { className: classNames3.label, children })
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: classNames3.label, children })
         ] })
       }
     );
@@ -10045,10 +10205,10 @@ var _Radio = (0, import_react61.forwardRef)(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-var import_react62 = require("react");
-var import_react_aria_components59 = require("react-aria-components");
-var import_jsx_runtime97 = require("react/jsx-runtime");
-var _SearchField = (0, import_react62.forwardRef)(
+var import_react65 = require("react");
+var import_react_aria_components60 = require("react-aria-components");
+var import_jsx_runtime100 = require("react/jsx-runtime");
+var _SearchField = (0, import_react65.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -10057,7 +10217,7 @@ var _SearchField = (0, import_react62.forwardRef)(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(FieldBase, { as: import_react_aria_components59.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(FieldBase, { as: import_react_aria_components60.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
       SearchInput,
       {
         ref,
@@ -10068,11 +10228,11 @@ var _SearchField = (0, import_react62.forwardRef)(
 );
 
 // src/Select/Select.tsx
-var import_react63 = require("react");
-var import_react_aria_components60 = require("react-aria-components");
-var import_system83 = require("@marigold/system");
-var import_jsx_runtime98 = require("react/jsx-runtime");
-var _Select = (0, import_react63.forwardRef)(
+var import_react66 = require("react");
+var import_react_aria_components61 = require("react-aria-components");
+var import_system84 = require("@marigold/system");
+var import_jsx_runtime101 = require("react/jsx-runtime");
+var _Select = (0, import_react66.forwardRef)(
   ({
     disabled,
     required,
@@ -10092,22 +10252,22 @@ var _Select = (0, import_react63.forwardRef)(
       onSelectionChange: onChange2,
       ...rest
     };
-    const classNames3 = (0, import_system83.useClassNames)({ component: "Select", variant, size: size2 });
-    return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(FieldBase, { as: import_react_aria_components60.Select, ref, variant, size: size2, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
+    const classNames3 = (0, import_system84.useClassNames)({ component: "Select", variant, size: size2 });
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(FieldBase, { as: import_react_aria_components61.Select, ref, variant, size: size2, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
         IconButton,
         {
-          className: (0, import_system83.cn)(
+          className: (0, import_system84.cn)(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames3.select
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react_aria_components60.SelectValue, { className: "[&>[slot=description]]:hidden" }),
-            /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(ChevronDown, { className: (0, import_system83.cn)("size-4", classNames3.icon) })
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_react_aria_components61.SelectValue, { className: "[&>[slot=description]]:hidden" }),
+            /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(ChevronDown, { className: (0, import_system84.cn)("size-4", classNames3.icon) })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -10115,27 +10275,27 @@ _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
-var import_react66 = require("react");
-var import_react_aria_components62 = require("react-aria-components");
-var import_system85 = require("@marigold/system");
+var import_react69 = require("react");
+var import_react_aria_components63 = require("react-aria-components");
+var import_system86 = require("@marigold/system");
 
 // src/SelectList/Context.ts
-var import_react64 = require("react");
-var SelectListContext = (0, import_react64.createContext)(
+var import_react67 = require("react");
+var SelectListContext = (0, import_react67.createContext)(
   {}
 );
-var useSelectListContext = () => (0, import_react64.useContext)(SelectListContext);
+var useSelectListContext = () => (0, import_react67.useContext)(SelectListContext);
 
 // src/SelectList/SelectListAction.tsx
-var import_jsx_runtime99 = require("react/jsx-runtime");
-var SelectListAction = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "order-last", children });
+var import_jsx_runtime102 = require("react/jsx-runtime");
+var SelectListAction = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { className: "order-last", children });
 
 // src/SelectList/SelectListItem.tsx
-var import_react65 = require("react");
-var import_react_aria_components61 = require("react-aria-components");
-var import_system84 = require("@marigold/system");
-var import_jsx_runtime100 = require("react/jsx-runtime");
-var CheckMark3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", className, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
+var import_react68 = require("react");
+var import_react_aria_components62 = require("react-aria-components");
+var import_system85 = require("@marigold/system");
+var import_jsx_runtime103 = require("react/jsx-runtime");
+var CheckMark3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", className, children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
   "path",
   {
     fill: "currentColor",
@@ -10146,30 +10306,30 @@ var CheckMark3 = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime100.js
 var SelectionIndicator = ({ selectionMode }) => {
   switch (selectionMode) {
     case "multiple": {
-      return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(_Checkbox, { slot: "selection" });
+      return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(_Checkbox, { slot: "selection" });
     }
     case "single": {
-      return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(CheckMark3, { className: "invisible hidden" });
+      return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(CheckMark3, { className: "invisible hidden" });
     }
   }
 };
-var _SelectListItem = (0, import_react65.forwardRef)(
+var _SelectListItem = (0, import_react68.forwardRef)(
   ({ children, disabled, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames3 } = useSelectListContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
-      import_react_aria_components61.GridListItem,
+    return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+      import_react_aria_components62.GridListItem,
       {
         isDisabled: disabled,
         textValue,
         ...props,
-        className: (0, import_system84.cn)(
+        className: (0, import_system85.cn)(
           classNames3 == null ? void 0 : classNames3.item,
           "grid grid-flow-col [grid-template-columns:min-content_1fr]"
         ),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "selection-indicator contents", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(SelectionIndicator, { selectionMode }),
+        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "selection-indicator contents", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(SelectionIndicator, { selectionMode }),
           children
         ] })
       }
@@ -10178,21 +10338,21 @@ var _SelectListItem = (0, import_react65.forwardRef)(
 );
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime101 = require("react/jsx-runtime");
-var _SelectList = (0, import_react66.forwardRef)(
+var import_jsx_runtime104 = require("react/jsx-runtime");
+var _SelectList = (0, import_react69.forwardRef)(
   ({ onChange: onChange2, ...rest }, ref) => {
-    const classNames3 = (0, import_system85.useClassNames)({ component: "ListBox" });
+    const classNames3 = (0, import_system86.useClassNames)({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange2,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(SelectListContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: classNames3.container, children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
-      import_react_aria_components62.GridList,
+    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(SelectListContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { className: classNames3.container, children: /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+      import_react_aria_components63.GridList,
       {
         ...props,
         layout: "grid",
         ref,
-        className: (0, import_system85.cn)(
+        className: (0, import_system86.cn)(
           "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames3.list
         ),
@@ -10205,32 +10365,32 @@ _SelectList.Item = _SelectListItem;
 _SelectList.Action = SelectListAction;
 
 // src/Scrollable/Scrollable.tsx
-var import_system86 = require("@marigold/system");
-var import_jsx_runtime102 = require("react/jsx-runtime");
+var import_system87 = require("@marigold/system");
+var import_jsx_runtime105 = require("react/jsx-runtime");
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
   "div",
   {
     ...props,
-    className: (0, import_system86.cn)([
+    className: (0, import_system87.cn)([
       "sticky h-(--height) overflow-auto overscroll-none",
-      import_system86.width[width]
+      import_system87.width[width]
     ]),
-    style: (0, import_system86.createVar)({ height }),
+    style: (0, import_system87.createVar)({ height }),
     children
   }
 );
 
 // src/Slider/Slider.tsx
-var import_react67 = require("react");
-var import_react_aria_components63 = require("react-aria-components");
-var import_system87 = require("@marigold/system");
-var import_jsx_runtime103 = require("react/jsx-runtime");
-var _Slider = (0, import_react67.forwardRef)(
+var import_react70 = require("react");
+var import_react_aria_components64 = require("react-aria-components");
+var import_system88 = require("@marigold/system");
+var import_jsx_runtime106 = require("react/jsx-runtime");
+var _Slider = (0, import_react70.forwardRef)(
   ({
     variant,
     size: size2,
@@ -10241,7 +10401,7 @@ var _Slider = (0, import_react67.forwardRef)(
     thumbLabels,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system87.useClassNames)({
+    const classNames3 = (0, import_system88.useClassNames)({
       component: "Slider",
       variant,
       size: size2
@@ -10251,38 +10411,38 @@ var _Slider = (0, import_react67.forwardRef)(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
       FieldBase,
       {
-        as: import_react_aria_components63.Slider,
-        className: (0, import_system87.cn)(
+        as: import_react_aria_components64.Slider,
+        className: (0, import_system88.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames3.container,
-          import_system87.width[width]
+          import_system88.width[width]
         ),
         ref,
         ...props,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(_Label, { children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(import_react_aria_components63.SliderOutput, { className: (0, import_system87.cn)("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" - ") }),
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
-            import_react_aria_components63.SliderTrack,
+          label && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(_Label, { children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_react_aria_components64.SliderOutput, { className: (0, import_system88.cn)("flex justify-end", classNames3.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" - ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+            import_react_aria_components64.SliderTrack,
             {
-              className: (0, import_system87.cn)("relative col-span-2 h-2 w-full", classNames3.track),
-              children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(import_jsx_runtime103.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+              className: (0, import_system88.cn)("relative col-span-2 h-2 w-full", classNames3.track),
+              children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
                   "div",
                   {
-                    className: (0, import_system87.cn)(
+                    className: (0, import_system88.cn)(
                       "absolute top-[50%] h-2 w-full translate-y-[-50%]",
                       classNames3.track
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
                   "div",
                   {
-                    className: (0, import_system87.cn)(
+                    className: (0, import_system88.cn)(
                       "absolute top-[50%] h-2 translate-y-[-50%]",
                       classNames3.selectedTrack
                     ),
@@ -10292,10 +10452,10 @@ var _Slider = (0, import_react67.forwardRef)(
                     }
                   }
                 ),
-                state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
-                  import_react_aria_components63.SliderThumb,
+                state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+                  import_react_aria_components64.SliderThumb,
                   {
-                    className: (0, import_system87.cn)("top-1/2 cursor-pointer", classNames3.thumb),
+                    className: (0, import_system88.cn)("top-1/2 cursor-pointer", classNames3.thumb),
                     index: i,
                     "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
                     name: names == null ? void 0 : names[i]
@@ -10312,13 +10472,13 @@ var _Slider = (0, import_react67.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_jsx_runtime104 = require("react/jsx-runtime");
-var Split = () => /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { role: "separator", className: "grow" });
+var import_jsx_runtime107 = require("react/jsx-runtime");
+var Split = () => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_react68 = require("react");
-var import_system88 = require("@marigold/system");
-var import_jsx_runtime105 = require("react/jsx-runtime");
+var import_react71 = require("react");
+var import_system89 = require("@marigold/system");
+var import_jsx_runtime108 = require("react/jsx-runtime");
 var Stack = ({
   children,
   space = 0,
@@ -10330,15 +10490,15 @@ var Stack = ({
 }) => {
   var _a, _b, _c, _d;
   const Component2 = asList ? "ul" : "div";
-  const stackChildren = asList ? import_react68.Children.map(children, (child) => child != null ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("li", { children: child }) : null) : children;
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+  const stackChildren = asList ? import_react71.Children.map(children, (child) => child != null ? /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("li", { children: child }) : null) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
     Component2,
     {
-      className: (0, import_system88.cn)(
+      className: (0, import_system89.cn)(
         "flex flex-col",
-        import_system88.gapSpace[space],
-        alignX && ((_b = (_a = import_system88.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system88.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system89.gapSpace[space],
+        alignX && ((_b = (_a = import_system89.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system89.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -10348,11 +10508,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react69 = require("react");
-var import_react_aria_components64 = require("react-aria-components");
-var import_system89 = require("@marigold/system");
-var import_jsx_runtime106 = require("react/jsx-runtime");
-var _Switch = (0, import_react69.forwardRef)(
+var import_react72 = require("react");
+var import_react_aria_components65 = require("react-aria-components");
+var import_system90 = require("@marigold/system");
+var import_jsx_runtime109 = require("react/jsx-runtime");
+var _Switch = (0, import_react72.forwardRef)(
   ({
     variant,
     size: size2,
@@ -10363,27 +10523,27 @@ var _Switch = (0, import_react69.forwardRef)(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system89.useClassNames)({ component: "Switch", size: size2, variant });
+    const classNames3 = (0, import_system90.useClassNames)({ component: "Switch", size: size2, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
-      import_react_aria_components64.Switch,
+    return /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(
+      import_react_aria_components65.Switch,
       {
         ...props,
         ref,
-        className: (0, import_system89.cn)(
-          import_system89.width[width],
+        className: (0, import_system90.cn)(
+          import_system90.width[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames3.container
         ),
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(_Label, { elementType: "span", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: classNames3.track, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: classNames3.thumb }) }) })
+          label && /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(_Label, { elementType: "span", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: classNames3.track, children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)("div", { className: classNames3.thumb }) }) })
         ]
       }
     );
@@ -10391,19 +10551,19 @@ var _Switch = (0, import_react69.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react77 = require("react");
+var import_react80 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system96 = require("@marigold/system");
+var import_system97 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react70 = require("react");
-var TableContext = (0, import_react70.createContext)({});
-var useTableContext = () => (0, import_react70.useContext)(TableContext);
+var import_react73 = require("react");
+var TableContext = (0, import_react73.createContext)({});
+var useTableContext = () => (0, import_react73.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
-var import_jsx_runtime107 = require("react/jsx-runtime");
+var import_jsx_runtime110 = require("react/jsx-runtime");
 var TableBody = ({
   children,
   className,
@@ -10412,7 +10572,7 @@ var TableBody = ({
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
   const { state, classNames: classNames3 } = useTableContext();
   if (state.collection.size === 0 && emptyState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tbody", { className, "data-rac": true, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", "data-rac": true, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("tbody", { className, "data-rac": true, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("tr", { className: classNames3 == null ? void 0 : classNames3.row, role: "row", "data-rac": true, children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
       "td",
       {
         className: classNames3 == null ? void 0 : classNames3.cell,
@@ -10423,22 +10583,22 @@ var TableBody = ({
       }
     ) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("tbody", { ...rowGroupProps, className, "data-rac": true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("tbody", { ...rowGroupProps, className, "data-rac": true, children });
 };
 
 // src/Table/TableCell.tsx
-var import_react71 = require("react");
+var import_react74 = require("react");
 var import_focus3 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
-var import_utils8 = require("@react-aria/utils");
-var import_system90 = require("@marigold/system");
-var import_jsx_runtime108 = require("react/jsx-runtime");
+var import_utils9 = require("@react-aria/utils");
+var import_system91 = require("@marigold/system");
+var import_jsx_runtime111 = require("react/jsx-runtime");
 var TableCell = ({
   cell,
   align = "left",
   alignY = "middle"
 }) => {
-  const ref = (0, import_react71.useRef)(null);
+  const ref = (0, import_react74.useRef)(null);
   const { interactive, state, classNames: classNames3 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -10458,13 +10618,13 @@ var TableCell = ({
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
-  const stateProps = (0, import_system90.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+  const stateProps = (0, import_system91.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
     "td",
     {
       ref,
       className: classNames3 == null ? void 0 : classNames3.cell,
-      ...(0, import_utils8.mergeProps)(cellProps, focusProps),
+      ...(0, import_utils9.mergeProps)(cellProps, focusProps),
       ...stateProps,
       align,
       valign: alignY,
@@ -10475,11 +10635,11 @@ var TableCell = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react72 = require("react");
+var import_react75 = require("react");
 var import_focus4 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
-var import_utils9 = require("@react-aria/utils");
-var import_system91 = require("@marigold/system");
+var import_utils10 = require("@react-aria/utils");
+var import_system92 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -10502,12 +10662,12 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_jsx_runtime109 = require("react/jsx-runtime");
+var import_jsx_runtime112 = require("react/jsx-runtime");
 var TableCheckboxCell = ({
   cell,
   alignY = "middle"
 }) => {
-  const ref = (0, import_react72.useRef)(null);
+  const ref = (0, import_react75.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -10521,36 +10681,36 @@ var TableCheckboxCell = ({
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
-  const stateProps = (0, import_system91.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
+  const stateProps = (0, import_system92.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system91.cn)("leading-none", classNames3 == null ? void 0 : classNames3.cell),
-      ...(0, import_utils9.mergeProps)(gridCellProps, focusProps),
+      className: (0, import_system92.cn)("leading-none", classNames3 == null ? void 0 : classNames3.cell),
+      ...(0, import_utils10.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
       valign: alignY,
       "data-rac": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react73 = require("react");
+var import_react76 = require("react");
 var import_focus5 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
-var import_utils11 = require("@react-aria/utils");
-var import_system92 = require("@marigold/system");
-var import_jsx_runtime110 = require("react/jsx-runtime");
+var import_utils12 = require("@react-aria/utils");
+var import_system93 = require("@marigold/system");
+var import_jsx_runtime113 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column: column2,
   width = "auto",
   align = "left"
 }) => {
   var _a, _b;
-  const ref = (0, import_react73.useRef)(null);
+  const ref = (0, import_react76.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -10561,23 +10721,23 @@ var TableColumnHeader = ({
   );
   const { hoverProps, isHovered } = (0, import_interactions2.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus5.useFocusRing)();
-  const stateProps = (0, import_system92.useStateProps)({
+  const stateProps = (0, import_system93.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime113.jsxs)(
     "th",
     {
       colSpan: column2.colspan,
       ref,
-      className: (0, import_system92.cn)("cursor-default", import_system92.width[width], classNames3 == null ? void 0 : classNames3.header),
-      ...(0, import_utils11.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      className: (0, import_system93.cn)("cursor-default", import_system93.width[width], classNames3 == null ? void 0 : classNames3.header),
+      ...(0, import_utils12.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
       "data-rac": true,
       children: [
         column2.rendered,
-        column2.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column2.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(SortDown, { className: "inline-block" }) }))
+        column2.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column2.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime113.jsx)("span", { className: "hidden", children: /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(SortDown, { className: "inline-block" }) }))
       ]
     }
   );
@@ -10585,16 +10745,16 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_system93 = require("@marigold/system");
-var import_jsx_runtime111 = require("react/jsx-runtime");
+var import_system94 = require("@marigold/system");
+var import_jsx_runtime114 = require("react/jsx-runtime");
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
   const { classNames: classNames3 } = useTableContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
     "thead",
     {
       ...rowGroupProps,
-      className: (0, import_system93.cn)(
+      className: (0, import_system94.cn)(
         classNames3 == null ? void 0 : classNames3.thead,
         // for rui sticky is applied to thead
         stickyHeader ? "sticky [&_th]:sticky [&_th]:top-0" : ""
@@ -10606,33 +10766,33 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react74 = require("react");
+var import_react77 = require("react");
 var import_table6 = require("@react-aria/table");
-var import_jsx_runtime112 = require("react/jsx-runtime");
+var import_jsx_runtime115 = require("react/jsx-runtime");
 var TableHeaderRow = ({
   item,
   className,
   children
 }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react74.useRef)(null);
+  const ref = (0, import_react77.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("tr", { ...rowProps, className, ref, "data-rac": true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)("tr", { ...rowProps, className, ref, "data-rac": true, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react75 = require("react");
+var import_react78 = require("react");
 var import_focus6 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
-var import_utils12 = require("@react-aria/utils");
-var import_system94 = require("@marigold/system");
-var import_jsx_runtime113 = require("react/jsx-runtime");
+var import_utils13 = require("@react-aria/utils");
+var import_system95 = require("@marigold/system");
+var import_jsx_runtime116 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react75.useRef)(null);
+  const ref = (0, import_react78.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size: size2 } = row.props;
-  const classNames3 = (0, import_system94.useClassNames)({
+  const classNames3 = (0, import_system95.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size2 || ctx.size
@@ -10650,24 +10810,24 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions3.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system94.useStateProps)({
+  const stateProps = (0, import_system95.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
     "tr",
     {
       ref,
-      className: (0, import_system94.cn)(
+      className: (0, import_system95.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
         classNames3 == null ? void 0 : classNames3.row
       ),
-      ...(0, import_utils12.mergeProps)(rowProps, focusProps, hoverProps),
+      ...(0, import_utils13.mergeProps)(rowProps, focusProps, hoverProps),
       ...stateProps,
       "data-rac": true,
       children
@@ -10676,19 +10836,19 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react76 = require("react");
+var import_react79 = require("react");
 var import_focus7 = require("@react-aria/focus");
 var import_interactions4 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
-var import_utils13 = require("@react-aria/utils");
-var import_system95 = require("@marigold/system");
-var import_jsx_runtime114 = require("react/jsx-runtime");
+var import_utils14 = require("@react-aria/utils");
+var import_system96 = require("@marigold/system");
+var import_jsx_runtime117 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column: column2,
   width = "auto",
   align = "left"
 }) => {
-  const ref = (0, import_react76.useRef)(null);
+  const ref = (0, import_react79.useRef)(null);
   const { state, classNames: classNames3 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -10700,26 +10860,26 @@ var TableSelectAllCell = ({
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions4.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus7.useFocusRing)();
-  const stateProps = (0, import_system95.useStateProps)({
+  const stateProps = (0, import_system96.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
     "th",
     {
       ref,
-      className: (0, import_system95.cn)(import_system95.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
-      ...(0, import_utils13.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      className: (0, import_system96.cn)(import_system96.width[width], ["leading-none"], classNames3 == null ? void 0 : classNames3.header),
+      ...(0, import_utils14.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
       "data-rac": true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-var import_jsx_runtime115 = require("react/jsx-runtime");
+var import_jsx_runtime118 = require("react/jsx-runtime");
 var Table = ({
   variant,
   size: size2,
@@ -10732,7 +10892,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react77.useRef)(null);
+  const tableRef = (0, import_react80.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -10743,22 +10903,22 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames3 = (0, import_system96.useClassNames)({
+  const classNames3 = (0, import_system97.useClassNames)({
     component: "Table",
     variant,
     size: size2
   });
   const { collection } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames3, variant, size: size2 },
-      children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(
         "table",
         {
           ref: tableRef,
           "data-rac": true,
-          className: (0, import_system96.cn)(
+          className: (0, import_system97.cn)(
             "group/table border-collapse",
             /**
              * Prevents wide tables from causing overlays to become scrollable on
@@ -10770,7 +10930,7 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
               TableHeaderRow,
               {
                 item: headerRow,
@@ -10778,7 +10938,7 @@ var Table = ({
                 children: [...collection.getChildren(headerRow.key)].map(
                   (column2) => {
                     var _a, _b, _c, _d, _e;
-                    return ((_a = column2.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                    return ((_a = column2.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                       TableSelectAllCell,
                       {
                         width: (_b = column2.props) == null ? void 0 : _b.width,
@@ -10786,7 +10946,7 @@ var Table = ({
                         align: (_c = column2.props) == null ? void 0 : _c.align
                       },
                       column2.key
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                       TableColumnHeader,
                       {
                         width: (_d = column2.props) == null ? void 0 : _d.width,
@@ -10800,19 +10960,19 @@ var Table = ({
               },
               headerRow.key
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)(TableBody, { className: classNames3.body, emptyState, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(TableBody, { className: classNames3.body, emptyState, children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index2) => {
+                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index2) => {
                   var _a, _b;
                   const currentColumn = collection.columns[index2];
-                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                     TableCheckboxCell,
                     {
                       cell,
                       alignY
                     },
                     cell.key
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -10837,9 +10997,9 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_react_aria_components65 = require("react-aria-components");
-var import_system97 = require("@marigold/system");
-var import_jsx_runtime116 = require("react/jsx-runtime");
+var import_react_aria_components66 = require("react-aria-components");
+var import_system98 = require("@marigold/system");
+var import_jsx_runtime119 = require("react/jsx-runtime");
 var _Text = ({
   variant,
   size: size2,
@@ -10850,45 +11010,47 @@ var _Text = ({
   fontSize,
   fontStyle,
   wrap,
+  whiteSpace,
   children,
   as = "div",
   ...props
 }) => {
-  const classNames3 = (0, import_system97.useClassNames)({
+  const classNames3 = (0, import_system98.useClassNames)({
     component: "Text",
     variant,
     size: size2
   });
-  const Component2 = props.slot ? import_react_aria_components65.Text : as;
+  const Component2 = props.slot ? import_react_aria_components66.Text : as;
   const elementType = props.slot ? { elementType: as } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
     Component2,
     {
       ...props,
       ...elementType,
-      className: (0, import_system97.cn)(
+      className: (0, import_system98.cn)(
         "max-w-(--maxTextWidth)",
         // possibly set by a <Container>
         classNames3,
-        fontStyle && import_system97.textStyle[fontStyle],
-        align && import_system97.textAlign[align],
-        cursor2 && import_system97.cursorStyle[cursor2],
-        weight && import_system97.fontWeight[weight],
-        fontSize && import_system97.textSize[fontSize],
-        wrap && import_system97.textWrap[wrap]
+        fontStyle && import_system98.textStyle[fontStyle],
+        align && import_system98.textAlign[align],
+        cursor2 && import_system98.cursorStyle[cursor2],
+        weight && import_system98.fontWeight[weight],
+        fontSize && import_system98.textSize[fontSize],
+        wrap && import_system98.textWrap[wrap],
+        whiteSpace && import_system98.whiteSpace[whiteSpace]
       ),
-      style: { color: color && (0, import_system97.ensureCssVar)(color, "color") },
+      style: { color: color && (0, import_system98.ensureCssVar)(color, "color") },
       children
     }
   );
 };
 
 // src/TextArea/TextArea.tsx
-var import_react78 = require("react");
-var import_react_aria_components66 = require("react-aria-components");
-var import_system98 = require("@marigold/system");
-var import_jsx_runtime117 = require("react/jsx-runtime");
-var _TextArea = (0, import_react78.forwardRef)(
+var import_react81 = require("react");
+var import_react_aria_components67 = require("react-aria-components");
+var import_system99 = require("@marigold/system");
+var import_jsx_runtime120 = require("react/jsx-runtime");
+var _TextArea = (0, import_react81.forwardRef)(
   ({
     variant,
     size: size2,
@@ -10899,7 +11061,7 @@ var _TextArea = (0, import_react78.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system98.useClassNames)({ component: "TextArea", variant, size: size2 });
+    const classNames3 = (0, import_system99.useClassNames)({ component: "TextArea", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -10907,15 +11069,15 @@ var _TextArea = (0, import_react78.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(FieldBase, { as: import_react_aria_components66.TextField, ...props, variant, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_react_aria_components66.TextArea, { className: classNames3, ref, rows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(FieldBase, { as: import_react_aria_components67.TextField, ...props, variant, size: size2, children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_react_aria_components67.TextArea, { className: classNames3, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-var import_react79 = require("react");
-var import_react_aria_components67 = require("react-aria-components");
-var import_jsx_runtime118 = require("react/jsx-runtime");
-var _TextField = (0, import_react79.forwardRef)(
+var import_react82 = require("react");
+var import_react_aria_components68 = require("react-aria-components");
+var import_jsx_runtime121 = require("react/jsx-runtime");
+var _TextField = (0, import_react82.forwardRef)(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
@@ -10924,13 +11086,13 @@ var _TextField = (0, import_react79.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(FieldBase, { as: import_react_aria_components67.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(_Input, { ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(FieldBase, { as: import_react_aria_components68.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-var import_system99 = require("@marigold/system");
-var import_jsx_runtime119 = require("react/jsx-runtime");
+var import_system100 = require("@marigold/system");
+var import_jsx_runtime122 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -10943,29 +11105,29 @@ var Tiles = ({
   if (stretch) {
     column2 = `minmax(${column2}, 1fr)`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system99.cn)(
+      className: (0, import_system100.cn)(
         "grid",
-        import_system99.gapSpace[space],
+        import_system100.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system99.createVar)({ column: column2, tilesWidth }),
+      style: (0, import_system100.createVar)({ column: column2, tilesWidth }),
       children
     }
   );
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_react_aria_components69 = require("react-aria-components");
-var import_system100 = require("@marigold/system");
+var import_react_aria_components70 = require("react-aria-components");
+var import_system101 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react_aria_components68 = require("react-aria-components");
-var import_jsx_runtime120 = require("react/jsx-runtime");
+var import_react_aria_components69 = require("react-aria-components");
+var import_jsx_runtime123 = require("react/jsx-runtime");
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -10979,42 +11141,42 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(import_react_aria_components68.TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_react_aria_components69.TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_jsx_runtime121 = require("react/jsx-runtime");
+var import_jsx_runtime124 = require("react/jsx-runtime");
 var _Tooltip = ({ children, variant, size: size2, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames3 = (0, import_system100.useClassNames)({ component: "Tooltip", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_react_aria_components69.Tooltip, { ...props, className: (0, import_system100.cn)("group/tooltip", classNames3.container), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react_aria_components69.OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+  const classNames3 = (0, import_system101.useClassNames)({ component: "Tooltip", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(import_react_aria_components70.Tooltip, { ...props, className: (0, import_system101.cn)("group/tooltip", classNames3.container), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(import_react_aria_components70.OverlayArrow, { className: classNames3.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
   ] });
 };
 _Tooltip.Trigger = _TooltipTrigger;
 
 // src/Toast/ToastProvider.tsx
-var import_react_aria_components72 = require("react-aria-components");
+var import_react_aria_components73 = require("react-aria-components");
 var import_react_dom3 = require("react-dom");
-var import_system102 = require("@marigold/system");
+var import_system103 = require("@marigold/system");
 
 // src/Toast/Toast.tsx
-var import_react_aria_components70 = require("react-aria-components");
 var import_react_aria_components71 = require("react-aria-components");
-var import_system101 = require("@marigold/system");
-var import_jsx_runtime122 = require("react/jsx-runtime");
+var import_react_aria_components72 = require("react-aria-components");
+var import_system102 = require("@marigold/system");
+var import_jsx_runtime125 = require("react/jsx-runtime");
 var icons3 = {
-  success: () => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  success: () => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -11024,13 +11186,13 @@ var icons3 = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  info: () => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -11040,13 +11202,13 @@ var icons3 = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  warning: () => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -11056,13 +11218,13 @@ var icons3 = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+  error: () => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -11074,25 +11236,25 @@ var icons3 = {
   )
 };
 var Toast = ({ toast }) => {
-  const classNames3 = (0, import_system101.useClassNames)({
+  const classNames3 = (0, import_system102.useClassNames)({
     component: "Toast",
     variant: toast.content.variant
   });
   const Icon4 = toast.content.variant ? icons3[toast.content.variant] : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(
-    import_react_aria_components71.UNSTABLE_Toast,
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+    import_react_aria_components72.UNSTABLE_Toast,
     {
       toast,
       className: classNames3.toast,
       style: { viewTransitionName: toast.key },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)(import_react_aria_components70.UNSTABLE_ToastContent, { className: classNames3.content, children: [
-          Icon4 && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: classNames3.icon, slot: "icon", "data-testid": "toast-icon", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Icon4, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_react_aria_components71.Text, { slot: "title", className: classNames3.title, children: toast.content.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Stack, { space: 2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_react_aria_components71.Text, { slot: "description", className: classNames3.description, children: toast.content.description })
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(import_react_aria_components71.UNSTABLE_ToastContent, { className: classNames3.content, children: [
+          Icon4 && /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: classNames3.icon, slot: "icon", "data-testid": "toast-icon", children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Icon4, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react_aria_components72.Text, { slot: "title", className: classNames3.title, children: toast.content.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Stack, { space: 2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(import_react_aria_components72.Text, { slot: "description", className: classNames3.description, children: toast.content.description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
           CloseButton,
           {
             className: classNames3.closeButton,
@@ -11106,8 +11268,8 @@ var Toast = ({ toast }) => {
 };
 
 // src/Toast/ToastProvider.tsx
-var import_jsx_runtime123 = require("react/jsx-runtime");
-var queue = new import_react_aria_components72.UNSTABLE_ToastQueue({
+var import_jsx_runtime126 = require("react/jsx-runtime");
+var queue = new import_react_aria_components73.UNSTABLE_ToastQueue({
   // Wrap state updates in a CSS view transition.
   wrapUpdate(fn) {
     if ("startViewTransition" in document) {
@@ -11120,10 +11282,10 @@ var queue = new import_react_aria_components72.UNSTABLE_ToastQueue({
   }
 });
 var ToastProvider = ({ position: position2 = "bottom-right" }) => {
-  const classNames3 = (0, import_system102.useClassNames)({
+  const classNames3 = (0, import_system103.useClassNames)({
     component: "Toast"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_react_aria_components72.UNSTABLE_ToastRegion, { queue, className: `${classNames3[position2]} z-50 gap-2`, children: ({ toast }) => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Toast, { toast }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_react_aria_components73.UNSTABLE_ToastRegion, { queue, className: `${classNames3[position2]} z-50 gap-2`, children: ({ toast }) => /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Toast, { toast }) });
 };
 
 // src/Toast/ToastQueue.ts
@@ -11149,23 +11311,23 @@ function useToast() {
 }
 
 // src/TagGroup/Tag.tsx
-var import_react_aria_components76 = require("react-aria-components");
-var import_system104 = require("@marigold/system");
+var import_react_aria_components77 = require("react-aria-components");
+var import_system105 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
-var import_react_aria_components75 = require("react-aria-components");
-var import_system103 = require("@marigold/system");
+var import_react_aria_components76 = require("react-aria-components");
+var import_system104 = require("@marigold/system");
 
 // src/TagGroup/TagGroupHiddenInput.tsx
-var import_react80 = require("react");
-var import_react_aria_components73 = require("react-aria-components");
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_react83 = require("react");
+var import_react_aria_components74 = require("react-aria-components");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 var TagGroupHiddenInput = ({ name }) => {
   var _a;
-  const state = (0, import_react80.useContext)(import_react_aria_components73.ListStateContext);
+  const state = (0, import_react83.useContext)(import_react_aria_components74.ListStateContext);
   const selectedKeys = Array.from((_a = state == null ? void 0 : state.selectionManager.selectedKeys) != null ? _a : []);
   if (!selectedKeys.length) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { hidden: true, "aria-hidden": "true", children: selectedKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { hidden: true, "aria-hidden": "true", children: selectedKeys.map((key) => /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
     "input",
     {
       type: "checkbox",
@@ -11179,21 +11341,21 @@ var TagGroupHiddenInput = ({ name }) => {
 };
 
 // src/TagGroup/TagGroupRemoveAll.tsx
-var import_react81 = require("react");
-var import_react_aria_components74 = require("react-aria-components");
-var import_i18n9 = require("@react-aria/i18n");
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_react84 = require("react");
+var import_react_aria_components75 = require("react-aria-components");
+var import_i18n10 = require("@react-aria/i18n");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 var TagGroupRemoveAll = ({
   className,
   onRemove
 }) => {
-  const state = (0, import_react81.useContext)(import_react_aria_components74.ListStateContext);
-  const stringFormatter = (0, import_i18n9.useLocalizedStringFormatter)(intlMessages2, "marigold");
+  const state = (0, import_react84.useContext)(import_react_aria_components75.ListStateContext);
+  const stringFormatter = (0, import_i18n10.useLocalizedStringFormatter)(intlMessages2, "marigold");
   if (state && state.collection.size < 2) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
-    import_react_aria_components74.Button,
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+    import_react_aria_components75.Button,
     {
       onPress: () => onRemove == null ? void 0 : onRemove(new Set(state == null ? void 0 : state.collection.getKeys())),
       className,
@@ -11203,7 +11365,7 @@ var TagGroupRemoveAll = ({
 };
 
 // src/TagGroup/TagGroup.tsx
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 var _TagGroup = ({
   items,
   children,
@@ -11214,11 +11376,11 @@ var _TagGroup = ({
   removeAll,
   ...rest
 }) => {
-  const classNames3 = (0, import_system103.useClassNames)({ component: "Tag", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(FieldBase, { as: import_react_aria_components75.TagGroup, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)("div", { className: classNames3.container, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
-        import_react_aria_components75.TagList,
+  const classNames3 = (0, import_system104.useClassNames)({ component: "Tag", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(FieldBase, { as: import_react_aria_components76.TagGroup, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: classNames3.container, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        import_react_aria_components76.TagList,
         {
           items,
           className: classNames3.listItems,
@@ -11226,7 +11388,7 @@ var _TagGroup = ({
           children
         }
       ),
-      rest.onRemove && removeAll ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+      rest.onRemove && removeAll ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         TagGroupRemoveAll,
         {
           className: classNames3.removeAll,
@@ -11234,28 +11396,28 @@ var _TagGroup = ({
         }
       ) : null
     ] }),
-    name ? /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(TagGroupHiddenInput, { name }) : null
+    name ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(TagGroupHiddenInput, { name }) : null
   ] });
 };
 
 // src/TagGroup/Tag.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 var _Tag = ({ variant, size: size2, children, disabled, ...rest }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames3 = (0, import_system104.useClassNames)({ component: "Tag", variant, size: size2 });
+  const classNames3 = (0, import_system105.useClassNames)({ component: "Tag", variant, size: size2 });
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-    import_react_aria_components76.Tag,
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    import_react_aria_components77.Tag,
     {
       textValue,
       ...props,
-      className: (0, import_system104.cn)("data-selection-mode:cursor-pointer", classNames3.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
+      className: (0, import_system105.cn)("data-selection-mode:cursor-pointer", classNames3.tag),
+      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(CloseButton, { className: classNames3.closeButton, slot: "remove" })
+        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(CloseButton, { className: classNames3.closeButton, slot: "remove" })
       ] })
     }
   );
@@ -11266,15 +11428,15 @@ _Tag.Group = _TagGroup;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react_aria_components78 = require("react-aria-components");
-var import_utils15 = require("@react-aria/utils");
-var import_system106 = require("@marigold/system");
+var import_react_aria_components79 = require("react-aria-components");
+var import_utils16 = require("@react-aria/utils");
+var import_system107 = require("@marigold/system");
 
 // src/XLoader/BaseLoader.tsx
-var import_react_aria_components77 = require("react-aria-components");
-var import_i18n10 = require("@react-aria/i18n");
-var import_system105 = require("@marigold/system");
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_react_aria_components78 = require("react-aria-components");
+var import_i18n11 = require("@react-aria/i18n");
+var import_system106 = require("@marigold/system");
+var import_jsx_runtime131 = require("react/jsx-runtime");
 var BaseLoader = ({
   variant,
   size: size2,
@@ -11282,17 +11444,17 @@ var BaseLoader = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const stringFormatter = (0, import_i18n10.useLocalizedStringFormatter)(intlMessages2, "marigold");
-  const className = (0, import_system105.useClassNames)({ component: "XLoader", variant, size: size2 });
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
-    import_react_aria_components77.ProgressBar,
+  const stringFormatter = (0, import_i18n11.useLocalizedStringFormatter)(intlMessages2, "marigold");
+  const className = (0, import_system106.useClassNames)({ component: "XLoader", variant, size: size2 });
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+    import_react_aria_components78.ProgressBar,
     {
       className: className.container,
       isIndeterminate: true,
       "aria-label": ariaLabel || children ? ariaLabel : stringFormatter.format("loadingMessage"),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -11300,13 +11462,13 @@ var BaseLoader = ({
             fill: "currentColor",
             className: className.loader,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                 "path",
                 {
                   id: "XMLID_5_",
                   d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11319,12 +11481,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                 "path",
                 {
                   id: "XMLID_18_",
                   d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11337,12 +11499,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                 "path",
                 {
                   id: "XMLID_19_",
                   d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11355,12 +11517,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                 "path",
                 {
                   id: "XMLID_20_",
                   d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11373,12 +11535,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                 "path",
                 {
                   id: "XMLID_21_",
                   d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11391,12 +11553,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                 "path",
                 {
                   id: "XMLID_22_",
                   d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11409,12 +11571,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                 "path",
                 {
                   id: "XMLID_23_",
                   d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11427,12 +11589,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                 "path",
                 {
                   id: "XMLID_24_",
                   d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11445,12 +11607,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                 "path",
                 {
                   id: "XMLID_25_",
                   d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11463,12 +11625,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                 "path",
                 {
                   id: "XMLID_26_",
                   d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11481,12 +11643,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                 "path",
                 {
                   id: "XMLID_27_",
                   d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -11502,48 +11664,48 @@ var BaseLoader = ({
             ]
           }
         ),
-        children ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_react_aria_components77.Label, { className: className.label, children }) : null
+        children ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_react_aria_components78.Label, { className: className.label, children }) : null
       ]
     }
   );
 };
 
 // src/XLoader/XLoader.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var LoaderFullScreen = (props) => {
-  const id = (0, import_utils15.useId)();
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react_aria_components78.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_react_aria_components78.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(BaseLoader, { id, ...props }) }) }) });
+  const id = (0, import_utils16.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react_aria_components79.Modal, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react_aria_components79.Dialog, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
-  const className = (0, import_system106.useClassNames)({
+  const className = (0, import_system107.useClassNames)({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(BaseLoader, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(BaseLoader, { ...props }) });
 };
-var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(BaseLoader, { variant, ...props });
+var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
-var import_react_aria_components82 = require("react-aria-components");
-var import_system109 = require("@marigold/system");
+var import_react_aria_components83 = require("react-aria-components");
+var import_system110 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react82 = require("react");
-var TabContext = (0, import_react82.createContext)({});
-var useTabContext = () => (0, import_react82.useContext)(TabContext);
+var import_react85 = require("react");
+var TabContext = (0, import_react85.createContext)({});
+var useTabContext = () => (0, import_react85.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react_aria_components79 = require("react-aria-components");
-var import_system107 = require("@marigold/system");
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_react_aria_components80 = require("react-aria-components");
+var import_system108 = require("@marigold/system");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-    import_react_aria_components79.Tab,
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    import_react_aria_components80.Tab,
     {
       ...props,
-      className: (0, import_system107.cn)(
+      className: (0, import_system108.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames3.tab
       ),
@@ -11553,56 +11715,56 @@ var _Tab = (props) => {
 };
 
 // src/Tabs/TabList.tsx
-var import_react_aria_components80 = require("react-aria-components");
-var import_system108 = require("@marigold/system");
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_react_aria_components81 = require("react-aria-components");
+var import_system109 = require("@marigold/system");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-    import_react_aria_components80.TabList,
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+    import_react_aria_components81.TabList,
     {
       ...props,
-      className: (0, import_system108.cn)("flex", import_system108.gapSpace[space], classNames3.tabsList),
+      className: (0, import_system109.cn)("flex", import_system109.gapSpace[space], classNames3.tabsList),
       children: props.children
     }
   );
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react_aria_components81 = require("react-aria-components");
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_react_aria_components82 = require("react-aria-components");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 var _TabPanel = (props) => {
   const { classNames: classNames3 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_react_aria_components81.TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react_aria_components82.TabPanel, { ...props, className: classNames3.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 var _Tabs = ({ disabled, variant, size: size2 = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames3 = (0, import_system109.useClassNames)({
+  const classNames3 = (0, import_system110.useClassNames)({
     component: "Tabs",
     size: size2,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_react_aria_components82.Tabs, { ...props, className: classNames3.container, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(TabContext.Provider, { value: { classNames: classNames3 }, children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(import_react_aria_components83.Tabs, { ...props, className: classNames3.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
 _Tabs.Item = _Tab;
 
 // src/RouterProvider/RouterProvider.tsx
-var import_react_aria_components83 = require("react-aria-components");
+var import_react_aria_components84 = require("react-aria-components");
 
 // src/TimeField/TimeField.tsx
-var import_react83 = require("react");
-var import_react_aria_components84 = require("react-aria-components");
-var import_system110 = require("@marigold/system");
-var import_jsx_runtime134 = require("react/jsx-runtime");
-var _TimeField = (0, import_react83.forwardRef)(
+var import_react86 = require("react");
+var import_react_aria_components85 = require("react-aria-components");
+var import_system111 = require("@marigold/system");
+var import_jsx_runtime137 = require("react/jsx-runtime");
+var _TimeField = (0, import_react86.forwardRef)(
   ({
     required,
     disabled,
@@ -11613,7 +11775,7 @@ var _TimeField = (0, import_react83.forwardRef)(
     width = "full",
     ...rest
   }, ref) => {
-    const classNames3 = (0, import_system110.useClassNames)({ component: "DateField", variant, size: size2 });
+    const classNames3 = (0, import_system111.useClassNames)({ component: "DateField", variant, size: size2 });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -11621,48 +11783,48 @@ var _TimeField = (0, import_react83.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
       FieldBase,
       {
-        as: import_react_aria_components84.TimeField,
+        as: import_react_aria_components85.TimeField,
         variant,
         size: size2,
         width,
         ...props,
         ref,
-        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react_aria_components84.DateInput, { className: classNames3.field, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(import_react_aria_components84.DateSegment, { className: classNames3.segment, segment }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react_aria_components85.DateInput, { className: classNames3.field, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(import_react_aria_components85.DateSegment, { className: classNames3.segment, segment }) })
       }
     );
   }
 );
 
 // src/Breadcrumbs/Breadcrumbs.tsx
-var import_react85 = __toESM(require("react"));
-var import_react_aria_components86 = require("react-aria-components");
-var import_system112 = require("@marigold/system");
+var import_react88 = __toESM(require("react"));
+var import_react_aria_components87 = require("react-aria-components");
+var import_system113 = require("@marigold/system");
 
 // src/Breadcrumbs/BreadcrumbEllipsis.tsx
-var import_react84 = __toESM(require("react"));
-var import_react_aria_components85 = require("react-aria-components");
-var import_system111 = require("@marigold/system");
-var import_jsx_runtime135 = require("react/jsx-runtime");
+var import_react87 = __toESM(require("react"));
+var import_react_aria_components86 = require("react-aria-components");
+var import_system112 = require("@marigold/system");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 var BreadcrumbEllipsis = ({
   hiddenItems = [],
   disabled = false
 }) => {
-  const { container, item: menuItem } = (0, import_system111.useClassNames)({
+  const { container, item: menuItem } = (0, import_system112.useClassNames)({
     component: "Menu"
   });
-  const { item: breadcrumbsItem, link } = (0, import_system111.useClassNames)({
+  const { item: breadcrumbsItem, link } = (0, import_system112.useClassNames)({
     component: "Breadcrumbs"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_react_aria_components85.MenuTrigger, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react_aria_components85.Button, { type: "button", className: `${breadcrumbsItem} ${link}`, children: "..." }),
-    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(import_react_aria_components85.Menu, { className: container, children: hiddenItems.map((item, index2) => {
-      if (!import_react84.default.isValidElement(item)) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_react_aria_components86.MenuTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react_aria_components86.Button, { type: "button", className: `${breadcrumbsItem} ${link}`, children: "..." }),
+    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(import_react_aria_components86.Menu, { className: container, children: hiddenItems.map((item, index2) => {
+      if (!import_react87.default.isValidElement(item)) return null;
       const { href, children: itemChildren } = item.props;
-      return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
-        import_react_aria_components85.MenuItem,
+      return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+        import_react_aria_components86.MenuItem,
         {
           className: menuItem,
           href,
@@ -11679,52 +11841,52 @@ var BreadcrumbEllipsis = ({
 var BreadcrumbsItem = (_) => null;
 
 // src/Breadcrumbs/Breadcrumbs.tsx
-var import_jsx_runtime136 = require("react/jsx-runtime");
-var _Breadcrumbs = (0, import_react85.forwardRef)(
+var import_jsx_runtime139 = require("react/jsx-runtime");
+var _Breadcrumbs = (0, import_react88.forwardRef)(
   ({ children, variant, size: size2, disabled, maxVisibleItems, ...props }, ref) => {
     const {
       container,
       item: breadcrumbsItem,
       link,
       current
-    } = (0, import_system112.useClassNames)({
+    } = (0, import_system113.useClassNames)({
       component: "Breadcrumbs",
       variant,
       size: size2
     });
-    const items = import_react85.default.Children.toArray(children);
+    const items = import_react88.default.Children.toArray(children);
     const total = items.length;
     const shouldCollapse = typeof maxVisibleItems === "number" && maxVisibleItems >= 2 && total > maxVisibleItems;
     const hiddenItems = shouldCollapse ? items.slice(1, -1) : [];
-    const ellipsis = /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BreadcrumbsItem, { href: "", children: /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(BreadcrumbEllipsis, { hiddenItems }) }, "ellipsis");
+    const ellipsis = /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(BreadcrumbsItem, { href: "", children: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(BreadcrumbEllipsis, { hiddenItems }) }, "ellipsis");
     const displayedItems = shouldCollapse ? maxVisibleItems === 2 ? [items[0], ellipsis] : [items[0], ellipsis, items[total - 1]] : items;
-    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
-      import_react_aria_components86.Breadcrumbs,
+    return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+      import_react_aria_components87.Breadcrumbs,
       {
         ...props,
         ref,
         isDisabled: disabled,
         className: container,
         children: displayedItems.map((item, index2) => {
-          if (!import_react85.default.isValidElement(item)) return null;
+          if (!import_react88.default.isValidElement(item)) return null;
           const isLast = index2 === displayedItems.length - 1;
           const { href, children: itemChildren, ...ariaProps } = item.props;
-          return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
-            import_react_aria_components86.Breadcrumb,
+          return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
+            import_react_aria_components87.Breadcrumb,
             {
               ...ariaProps,
               className: breadcrumbsItem,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                   "a",
                   {
                     href,
-                    className: (0, import_system112.cn)(link, isLast && current),
+                    className: (0, import_system113.cn)(link, isLast && current),
                     "aria-current": isLast ? "page" : void 0,
                     children: itemChildren
                   }
                 ),
-                !isLast && /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+                !isLast && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
                   ChevronRight,
                   {
                     "aria-hidden": "true",
@@ -11742,6 +11904,20 @@ var _Breadcrumbs = (0, import_react85.forwardRef)(
   }
 );
 _Breadcrumbs.Item = BreadcrumbsItem;
+
+// src/utils/form.utils.ts
+var parseFormData = (e) => {
+  const data = new FormData(e.currentTarget);
+  const result = {};
+  for (const [key, value] of data.entries()) {
+    if (result[key]) {
+      result[key] = Array.isArray(result[key]) ? [...result[key], value] : [result[key], value];
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -11761,6 +11937,9 @@ _Breadcrumbs.Item = BreadcrumbsItem;
   CheckboxGroup,
   Columns,
   ComboBox,
+  ConfirmationContext,
+  ConfirmationDialog,
+  ConfirmationProvider,
   Container,
   ContextualHelp,
   DateField,
@@ -11779,6 +11958,7 @@ _Breadcrumbs.Item = BreadcrumbsItem;
   Inset,
   Label,
   Link,
+  LinkButton,
   List,
   MarigoldProvider,
   Menu,
@@ -11820,8 +12000,10 @@ _Breadcrumbs.Item = BreadcrumbsItem;
   _ContextualHelp,
   gridColsAlign,
   gridColumn,
+  parseFormData,
   queue,
   useAsyncList,
+  useConfirmation,
   useListData,
   useTheme,
   useToast