@marigold/components 10.0.0 → 10.1.1

package/dist/index.mjs

@@ -18,7 +18,7 @@ import { useFocusRing } from "@react-aria/focus";
 import { mergeProps as mergeProps2 } from "@react-aria/utils";
 import { cn, useClassNames, useStateProps } from "@marigold/system";
 
-// src/Chevron/ChevronUp.tsx
+// src/icons/ChevronUp.tsx
 import { forwardRef } from "react";
 import { SVG } from "@marigold/system";
 import { jsx } from "react/jsx-runtime";
@@ -26,7 +26,7 @@ var ChevronUp = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(SVG, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx("path", { d: "M5.97563 16.8506L12 10.8394L18.0244 16.8506L19.875 15L12 7.125L4.125 15L5.97563 16.8506Z" }) })
 );
 
-// src/Chevron/ChevronDown.tsx
+// src/icons/ChevronDown.tsx
 import { forwardRef as forwardRef2 } from "react";
 import { SVG as SVG2 } from "@marigold/system";
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -34,6 +34,34 @@ var ChevronDown = forwardRef2(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(SVG2, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx2("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
 );
 
+// src/icons/ChevronRight.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { SVG as SVG3 } from "@marigold/system";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChevronRight = forwardRef3(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx3(SVG3, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx3("path", { d: "M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" }) })
+);
+
+// src/icons/ChevronLeft.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { SVG as SVG4 } from "@marigold/system";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ChevronLeft = forwardRef4(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx4(SVG4, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx4("path", { d: "M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" }) })
+);
+
+// src/icons/SortDown.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { SVG as SVG5 } from "@marigold/system";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var SortDown = forwardRef5((props, ref) => /* @__PURE__ */ jsx5(SVG5, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx5("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" }) }));
+
+// src/icons/SortUp.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { SVG as SVG6 } from "@marigold/system";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var SortUp = forwardRef6((props, ref) => /* @__PURE__ */ jsx6(SVG6, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx6("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" }) }));
+
 // src/Accordion/useAccordionItem.ts
 import { useButton } from "@react-aria/button";
 import { useSelectableItem } from "@react-aria/selection";
@@ -127,7 +155,7 @@ function useAccordionItem(props, state, ref) {
 }
 
 // src/Accordion/AccordionItem.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
 var AccordionItem = ({
   item,
   state,
@@ -180,11 +208,11 @@ var AccordionItem = ({
         "aria-label": item.textValue,
         children: [
           title,
-          expanded ? /* @__PURE__ */ jsx3(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ jsx3(ChevronDown, { className: "h3 w-6" })
+          expanded ? /* @__PURE__ */ jsx7(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ jsx7(ChevronDown, { className: "h3 w-6" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx7(
       "div",
       {
         ...mergeProps2(regionProps, focusProps, stateProps),
@@ -196,7 +224,7 @@ var AccordionItem = ({
 };
 
 // src/Accordion/Accordion.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Accordion = ({ children, ...props }) => {
   const ownProps = {
     ...props,
@@ -229,7 +257,7 @@ var Accordion = ({ children, ...props }) => {
     ref
   );
   delete accordionProps.onKeyDownCapture;
-  return /* @__PURE__ */ jsx4("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx8("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsx8(
     AccordionItem,
     {
       title: item.props.title,
@@ -246,7 +274,7 @@ Accordion.Item = Item;
 // src/Aside/Aside.tsx
 import { Children as Children2 } from "react";
 import { cn as cn2, createVar, gapSpace } from "@marigold/system";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
 var classNames = {
   aside: "grow basis-[--sideWidth]",
   content: "basis-0 grow-[999] [min-inline-size:--wrap]"
@@ -264,7 +292,7 @@ var Aside = ({
     content: createVar({ wrap })
   };
   return /* @__PURE__ */ jsxs2("div", { className: cn2("flex flex-wrap", gapSpace[space]), children: [
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx9(
       "div",
       {
         className: classNames[side === "left" ? "aside" : "content"],
@@ -272,7 +300,7 @@ var Aside = ({
         children: left
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx9(
       "div",
       {
         className: classNames[side === "right" ? "aside" : "content"],
@@ -285,13 +313,13 @@ var Aside = ({
 
 // src/Aspect/Aspect.tsx
 import { aspect, cn as cn3, createVar as createVar2 } from "@marigold/system";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var Aspect = ({
   ratio = "square",
   maxWidth,
   children
 }) => {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       className: cn3(
@@ -306,29 +334,29 @@ var Aspect = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import React, {
-  forwardRef as forwardRef8
+import React3, {
+  forwardRef as forwardRef12
 } from "react";
 import { ComboBox, ComboBoxStateContext } from "react-aria-components";
 import { cn as cn13, useClassNames as useClassNames9 } from "@marigold/system";
 
 // src/FieldBase/FieldBase.tsx
-import { forwardRef as forwardRef3 } from "react";
+import { forwardRef as forwardRef7 } from "react";
 import { cn as cn6, width as twWidth, useClassNames as useClassNames4 } from "@marigold/system";
 
 // src/HelpText/HelpText.tsx
 import { useContext } from "react";
 import { FieldError, FieldErrorContext, Text } from "react-aria-components";
 import { cn as cn4, useClassNames as useClassNames2 } from "@marigold/system";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
-var Icon = ({ className }) => /* @__PURE__ */ jsx7(
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+var Icon = ({ className }) => /* @__PURE__ */ jsx11(
   "svg",
   {
     className: cn4("h-4 w-4 shrink-0", className),
     viewBox: "0 0 24 24",
     role: "presentation",
     fill: "currentColor",
-    children: /* @__PURE__ */ jsx7("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
+    children: /* @__PURE__ */ jsx11("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
   }
 );
 var HelpText = ({
@@ -348,35 +376,35 @@ var HelpText = ({
     return null;
   }
   return /* @__PURE__ */ jsxs3("div", { className: cn4(classNames2.container), children: [
-    /* @__PURE__ */ jsx7(FieldError, { ...props, className: "flex flex-col", children: (validation) => {
+    /* @__PURE__ */ jsx11(FieldError, { ...props, className: "flex flex-col", children: (validation) => {
       const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
       return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
-        /* @__PURE__ */ jsx7(Icon, { className: classNames2.icon }),
+        /* @__PURE__ */ jsx11(Icon, { className: classNames2.icon }),
         msg
       ] }, idx)) : /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
-        /* @__PURE__ */ jsx7(Icon, { className: classNames2.icon }),
+        /* @__PURE__ */ jsx11(Icon, { className: classNames2.icon }),
         messages
       ] });
     } }),
-    ctx && ctx.isInvalid ? null : /* @__PURE__ */ jsx7(Text, { slot: "description", children: description })
+    ctx && ctx.isInvalid ? null : /* @__PURE__ */ jsx11(Text, { slot: "description", children: description })
   ] });
 };
 
 // src/Label/Label.tsx
 import { Label } from "react-aria-components";
-import { SVG as SVG3, cn as cn5, createVar as createVar3, useClassNames as useClassNames3 } from "@marigold/system";
+import { SVG as SVG7, cn as cn5, createVar as createVar3, useClassNames as useClassNames3 } from "@marigold/system";
 
 // src/FieldBase/FieldGroup.tsx
 import { createContext, useContext as useContext2 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var FieldGroupContext = createContext({});
 var useFieldGroupContext = () => useContext2(FieldGroupContext);
 var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ jsx8(FieldGroupContext.Provider, { value: { labelWidth }, children });
+  return /* @__PURE__ */ jsx12(FieldGroupContext.Provider, { value: { labelWidth }, children });
 };
 
 // src/Label/Label.tsx
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 var _Label = ({ size, variant, children, ...props }) => {
   const classNames2 = useClassNames3({ component: "Label", size, variant });
   const { labelWidth } = useFieldGroupContext();
@@ -388,14 +416,14 @@ var _Label = ({ size, variant, children, ...props }) => {
       style: createVar3({ labelWidth }),
       children: [
         children,
-        /* @__PURE__ */ jsx9(
-          SVG3,
+        /* @__PURE__ */ jsx13(
+          SVG7,
           {
             viewBox: "0 0 24 24",
             role: "presentation",
             size: 16,
             className: cn5("hidden", classNames2.indicator),
-            children: /* @__PURE__ */ jsx9("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
+            children: /* @__PURE__ */ jsx13("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
           }
         )
       ]
@@ -404,8 +432,8 @@ var _Label = ({ size, variant, children, ...props }) => {
 };
 
 // src/FieldBase/FieldBase.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
-var fixedForwardRef = forwardRef3;
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+var fixedForwardRef = forwardRef7;
 var _FieldBase = (props, ref) => {
   const {
     as: Component = "div",
@@ -440,9 +468,9 @@ var _FieldBase = (props, ref) => {
       "data-error": props.isInvalid ? true : void 0,
       ...rest,
       children: [
-        label ? /* @__PURE__ */ jsx10(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx10("span", { "aria-hidden": "true" }),
+        label ? /* @__PURE__ */ jsx14(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx14("span", { "aria-hidden": "true" }),
         children,
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx14(
           HelpText,
           {
             variant,
@@ -458,17 +486,17 @@ var _FieldBase = (props, ref) => {
 var FieldBase = fixedForwardRef(_FieldBase);
 
 // src/Input/SearchInput.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 import { Button } from "react-aria-components";
 import { useLocalizedStringFormatter } from "@react-aria/i18n";
 import { cn as cn8 } from "@marigold/system";
 
 // src/Input/Input.tsx
-import { cloneElement as cloneElement2, forwardRef as forwardRef4 } from "react";
+import { cloneElement as cloneElement2, forwardRef as forwardRef8 } from "react";
 import { Input } from "react-aria-components";
 import { cn as cn7, useClassNames as useClassNames5 } from "@marigold/system";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
-var _Input = forwardRef4(
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
+var _Input = forwardRef8(
   ({ type, icon, action, variant, size, className, ...props }, ref) => {
     const classNames2 = useClassNames5({
       component: "Input",
@@ -499,7 +527,7 @@ var _Input = forwardRef4(
         "data-action": action && "",
         children: [
           inputIcon,
-          /* @__PURE__ */ jsx11(
+          /* @__PURE__ */ jsx15(
             Input,
             {
               ...props,
@@ -523,7 +551,7 @@ var _Input = forwardRef4(
 );
 
 // src/Input/SearchInput.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var intlMessages = {
   "de-DE": {
     "Clear search": "Suche zur\xFCcksetzen"
@@ -535,7 +563,7 @@ var intlMessages = {
     "Clear search": "Effacer la recherche"
   }
 };
-var SearchIcon = (props) => /* @__PURE__ */ jsx12(
+var SearchIcon = (props) => /* @__PURE__ */ jsx16(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -544,13 +572,13 @@ var SearchIcon = (props) => /* @__PURE__ */ jsx12(
     width: 24,
     height: 24,
     ...props,
-    children: /* @__PURE__ */ jsx12("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+    children: /* @__PURE__ */ jsx16("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
   }
 );
-var SearchInput = forwardRef5(
+var SearchInput = forwardRef9(
   ({ className, onClear, ...props }, ref) => {
     const stringFormatter = useLocalizedStringFormatter(intlMessages);
-    return /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsx16(
       _Input,
       {
         type: "search",
@@ -559,8 +587,8 @@ var SearchInput = forwardRef5(
           className == null ? void 0 : className.input
         ),
         ref,
-        icon: /* @__PURE__ */ jsx12(SearchIcon, {}),
-        action: /* @__PURE__ */ jsx12(
+        icon: /* @__PURE__ */ jsx16(SearchIcon, {}),
+        action: /* @__PURE__ */ jsx16(
           Button,
           {
             className: className == null ? void 0 : className.action,
@@ -568,7 +596,7 @@ var SearchInput = forwardRef5(
             "aria-label": stringFormatter.format("Clear search"),
             excludeFromTabOrder: true,
             preventFocusOnPress: true,
-            children: /* @__PURE__ */ jsx12(
+            children: /* @__PURE__ */ jsx16(
               "svg",
               {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -576,7 +604,7 @@ var SearchInput = forwardRef5(
                 fill: "currentColor",
                 width: 20,
                 height: 20,
-                children: /* @__PURE__ */ jsx12("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+                children: /* @__PURE__ */ jsx16("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
               }
             )
           }
@@ -589,7 +617,7 @@ var SearchInput = forwardRef5(
 
 // src/ListBox/ListBox.tsx
 import {
-  forwardRef as forwardRef6
+  forwardRef as forwardRef10
 } from "react";
 import { ListBox } from "react-aria-components";
 import { cn as cn10, useClassNames as useClassNames6 } from "@marigold/system";
@@ -601,31 +629,38 @@ var useListBoxContext = () => useContext3(ListBoxContext);
 
 // src/ListBox/ListBoxItem.tsx
 import { ListBoxItem } from "react-aria-components";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var _ListBoxItem = ({ ...props }) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ jsx13(ListBoxItem, { ...props, className: classNames2.option });
+  return /* @__PURE__ */ jsx17(ListBoxItem, { ...props, className: classNames2.option });
 };
 
 // src/ListBox/ListBoxSection.tsx
-import { Header, Section } from "react-aria-components";
+import { Header, ListBoxSection } from "react-aria-components";
 import { cn as cn9 } from "@marigold/system";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
 var _Section = ({ header: header2, children, ...props }) => {
   const { classNames: classNames2 } = useListBoxContext();
-  return /* @__PURE__ */ jsxs7(Section, { ...props, className: cn9(classNames2.section, classNames2.header), children: [
-    /* @__PURE__ */ jsx14(Header, { children: header2 }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxs7(
+    ListBoxSection,
+    {
+      ...props,
+      className: cn9(classNames2.section, classNames2.header),
+      children: [
+        /* @__PURE__ */ jsx18(Header, { children: header2 }),
+        children
+      ]
+    }
+  );
 };
 
 // src/ListBox/ListBox.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var _ListBox = forwardRef6(
+import { jsx as jsx19 } from "react/jsx-runtime";
+var _ListBox = forwardRef10(
   ({ variant, size, ...props }, ref) => {
     const classNames2 = useClassNames6({ component: "ListBox", variant, size });
     const listBoxProps = { shouldSelectOnPressUp: false };
-    return /* @__PURE__ */ jsx15(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx15("div", { className: classNames2.container, children: /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx19(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx19("div", { className: classNames2.container, children: /* @__PURE__ */ jsx19(
       ListBox,
       {
         ...props,
@@ -644,7 +679,7 @@ _ListBox.Item = _ListBoxItem;
 _ListBox.Section = _Section;
 
 // src/Overlay/Popover.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef11 } from "react";
 import { Popover } from "react-aria-components";
 import { cn as cn12, useClassNames as useClassNames8, useSmallScreen } from "@marigold/system";
 
@@ -670,17 +705,17 @@ import { I18nProvider } from "@react-aria/i18n";
 
 // src/Provider/MarigoldProvider.tsx
 import { ThemeProvider } from "@marigold/system";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function MarigoldProvider({
   children,
   className,
   theme
 }) {
-  return /* @__PURE__ */ jsx16(ThemeProvider, { theme, className, children });
+  return /* @__PURE__ */ jsx20(ThemeProvider, { theme, className, children });
 }
 
 // src/Overlay/Underlay.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Underlay = ({
   size,
   variant,
@@ -697,7 +732,7 @@ var Underlay = ({
     ...rest
   };
   const portal = usePortalContainer();
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx21(
     ModalOverlay,
     {
       className: ({ isEntering, isExiting }) => cn11(
@@ -715,8 +750,8 @@ var Underlay = ({
 };
 
 // src/Overlay/Popover.tsx
-import { Fragment, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
-var _Popover = forwardRef7(
+import { Fragment, jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+var _Popover = forwardRef11(
   ({ keyboardDismissDisabled, placement, open, children, container, ...rest }, ref) => {
     const props = {
       isKeyboardDismissDisabled: keyboardDismissDisabled,
@@ -732,9 +767,9 @@ var _Popover = forwardRef7(
     });
     const isSmallScreen = useSmallScreen();
     const portal = usePortalContainer();
-    return /* @__PURE__ */ jsx18(Fragment, { children: isSmallScreen ? /* @__PURE__ */ jsxs8(Fragment, { children: [
-      /* @__PURE__ */ jsx18(Underlay, { open, variant: "modal" }),
-      /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx22(Fragment, { children: isSmallScreen ? /* @__PURE__ */ jsxs8(Fragment, { children: [
+      /* @__PURE__ */ jsx22(Underlay, { open, variant: "modal" }),
+      /* @__PURE__ */ jsx22(
         Popover,
         {
           ref,
@@ -746,7 +781,7 @@ var _Popover = forwardRef7(
           children
         }
       )
-    ] }) : /* @__PURE__ */ jsx18(
+    ] }) : /* @__PURE__ */ jsx22(
       Popover,
       {
         ref,
@@ -762,15 +797,15 @@ var _Popover = forwardRef7(
 );
 
 // src/Autocomplete/Autocomplete.tsx
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 var AutocompleteInput = ({
   onSubmit,
   onClear,
   ref
 }) => {
-  const state = React.useContext(ComboBoxStateContext);
+  const state = React3.useContext(ComboBoxStateContext);
   const classNames2 = useClassNames9({ component: "ComboBox" });
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx23(
     SearchInput,
     {
       ref,
@@ -785,8 +820,8 @@ var AutocompleteInput = ({
           e.preventDefault();
         }
         if (e.key === "Enter") {
-          if (state.selectionManager.focusedKey === null) {
-            onSubmit == null ? void 0 : onSubmit(null, state.inputValue);
+          if ((state == null ? void 0 : state.selectionManager.focusedKey) === null) {
+            onSubmit == null ? void 0 : onSubmit(null, state == null ? void 0 : state.inputValue);
           }
         }
       },
@@ -798,7 +833,7 @@ var AutocompleteInput = ({
     }
   );
 };
-var _Autocomplete = forwardRef8(
+var _Autocomplete = forwardRef12(
   ({
     children,
     defaultValue,
@@ -825,8 +860,8 @@ var _Autocomplete = forwardRef8(
       ...rest
     };
     return /* @__PURE__ */ jsxs9(FieldBase, { as: ComboBox, ref, ...props, children: [
-      /* @__PURE__ */ jsx19(AutocompleteInput, { onSubmit, onClear, ref }),
-      /* @__PURE__ */ jsx19(_Popover, { children: /* @__PURE__ */ jsx19(_ListBox, { children }) })
+      /* @__PURE__ */ jsx23(AutocompleteInput, { onSubmit, onClear, ref }),
+      /* @__PURE__ */ jsx23(_Popover, { children: /* @__PURE__ */ jsx23(_ListBox, { children }) })
     ] });
   }
 );
@@ -834,24 +869,87 @@ _Autocomplete.Option = _ListBox.Item;
 _Autocomplete.Section = _ListBox.Section;
 
 // src/ComboBox/ComboBox.tsx
-import { forwardRef as forwardRef10 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 import { ComboBox as ComboBox2 } from "react-aria-components";
 import { useClassNames as useClassNames11 } from "@marigold/system";
 
 // src/Button/Button.tsx
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef13 } from "react";
 import { Button as Button2 } from "react-aria-components";
 import { cn as cn14, useClassNames as useClassNames10 } from "@marigold/system";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var _Button = forwardRef9(
-  ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
+
+// src/ProgressCycle/ProgressCycle.tsx
+import { ProgressBar } from "react-aria-components";
+import { SVG as SVG8 } from "@marigold/system";
+import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+var ProgressCycle = ({
+  size = "16",
+  ...props
+}) => {
+  let strokeWidth = 3;
+  if (size <= "24") {
+    strokeWidth = 2;
+  } else if (size >= "32") {
+    strokeWidth = 4;
+  }
+  const radius = `calc(50% - ${strokeWidth / 2}px)`;
+  return /* @__PURE__ */ jsx24(ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ jsxs10(
+    SVG8,
+    {
+      className: "animate-rotate-spinner origin-center fill-none",
+      size,
+      "aria-hidden": "true",
+      role: "img",
+      children: [
+        /* @__PURE__ */ jsx24(
+          "circle",
+          {
+            cx: "50%",
+            cy: "50%",
+            r: radius,
+            strokeWidth,
+            className: "stroke-transparent"
+          }
+        ),
+        /* @__PURE__ */ jsx24(
+          "circle",
+          {
+            cx: "50%",
+            cy: "50%",
+            r: radius,
+            strokeWidth,
+            pathLength: "100",
+            strokeDasharray: "100 200",
+            strokeDashoffset: "0",
+            strokeLinecap: "round",
+            className: "animate-progress-cycle origin-center -rotate-90 stroke-gray-800"
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/Button/Button.tsx
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+var _Button = forwardRef13(
+  ({
+    children,
+    variant,
+    size,
+    className,
+    disabled,
+    loading,
+    fullWidth,
+    ...props
+  }, ref) => {
     const classNames2 = useClassNames10({
       component: "Button",
       variant,
       size,
       className
     });
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx25(
       Button2,
       {
         ...props,
@@ -859,18 +957,23 @@ var _Button = forwardRef9(
         className: cn14(
           "inline-flex items-center justify-center gap-[0.5ch]",
           classNames2,
-          fullWidth ? "w-full" : void 0
+          fullWidth ? "w-full" : void 0,
+          loading && "!cursor-progress"
         ),
+        isPending: loading,
         isDisabled: disabled,
-        children
+        children: loading ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
+          /* @__PURE__ */ jsx25("span", { className: "absolute", children: /* @__PURE__ */ jsx25(ProgressCycle, {}) }),
+          /* @__PURE__ */ jsx25("span", { className: "invisible flex gap-[inherit]", children })
+        ] }) : children
       }
     );
   }
 );
 
 // src/ComboBox/ComboBox.tsx
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
-var _ComboBox = forwardRef10(
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+var _ComboBox = forwardRef14(
   ({
     variant,
     size,
@@ -895,14 +998,14 @@ var _ComboBox = forwardRef10(
       ...rest
     };
     const classNames2 = useClassNames11({ component: "ComboBox", variant, size });
-    return /* @__PURE__ */ jsxs10(FieldBase, { as: ComboBox2, ref, ...props, children: [
-      /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsxs12(FieldBase, { as: ComboBox2, ref, ...props, children: [
+      /* @__PURE__ */ jsx26(
         _Input,
         {
-          action: /* @__PURE__ */ jsx21(_Button, { className: classNames2, children: /* @__PURE__ */ jsx21(ChevronDown, { className: "size-4" }) })
+          action: /* @__PURE__ */ jsx26(_Button, { className: classNames2, children: /* @__PURE__ */ jsx26(ChevronDown, { className: "size-4" }) })
         }
       ),
-      /* @__PURE__ */ jsx21(_Popover, { children: /* @__PURE__ */ jsx21(_ListBox, { children }) })
+      /* @__PURE__ */ jsx26(_Popover, { children: /* @__PURE__ */ jsx26(_ListBox, { children }) })
     ] });
   }
 );
@@ -911,15 +1014,15 @@ _ComboBox.Section = _ListBox.Section;
 
 // src/Badge/Badge.tsx
 import { useClassNames as useClassNames12 } from "@marigold/system";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 var Badge = ({ variant, size, children, ...props }) => {
   const classNames2 = useClassNames12({ component: "Badge", variant, size });
-  return /* @__PURE__ */ jsx22("div", { className: classNames2, ...props, children });
+  return /* @__PURE__ */ jsx27("div", { className: classNames2, ...props, children });
 };
 
 // src/Breakout/Breakout.tsx
 import { alignment, cn as cn15, createVar as createVar4 } from "@marigold/system";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var Breakout = ({
   height,
   children,
@@ -927,7 +1030,7 @@ var Breakout = ({
   alignY = "center"
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx28(
     "div",
     {
       className: cn15(
@@ -945,10 +1048,10 @@ var Breakout = ({
 
 // src/Body/Body.tsx
 import { useClassNames as useClassNames13 } from "@marigold/system";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var Body = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames13({ component: "Body", variant, size });
-  return /* @__PURE__ */ jsx24("section", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx29("section", { ...props, className: classNames2, children });
 };
 
 // src/Card/Card.tsx
@@ -964,7 +1067,7 @@ import {
   paddingTop,
   useClassNames as useClassNames14
 } from "@marigold/system";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var Card = ({
   children,
   variant,
@@ -980,7 +1083,7 @@ var Card = ({
   ...props
 }) => {
   const classNames2 = useClassNames14({ component: "Card", variant, size });
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       ...props,
@@ -1003,14 +1106,14 @@ var Card = ({
 
 // src/Center/Center.tsx
 import { cn as cn17, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var Center = ({
   maxWidth = "100%",
   space = 0,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       ...props,
@@ -1026,17 +1129,17 @@ var Center = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import { Checkbox } from "react-aria-components";
 import { cn as cn19, useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/Checkbox/CheckBoxField.tsx
 import { createVar as createVar6, useClassNames as useClassNames15 } from "@marigold/system";
-import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
 var CheckboxField = ({ children, labelWidth }) => {
   const classNames2 = useClassNames15({ component: "Field" });
-  return /* @__PURE__ */ jsxs11("div", { className: classNames2, children: [
-    /* @__PURE__ */ jsx27("div", { className: "w-[--labelWidth]", style: createVar6({ labelWidth }) }),
+  return /* @__PURE__ */ jsxs13("div", { className: classNames2, children: [
+    /* @__PURE__ */ jsx32("div", { className: "w-[--labelWidth]", style: createVar6({ labelWidth }) }),
     children
   ] });
 };
@@ -1051,7 +1154,7 @@ var CheckboxGroupContext = createContext4(null);
 var useCheckboxGroupContext = () => useContext5(CheckboxGroupContext);
 
 // src/Checkbox/CheckboxGroup.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var _CheckboxGroup = ({
   children,
   variant,
@@ -1078,7 +1181,7 @@ var _CheckboxGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx28(FieldBase, { as: CheckboxGroup, width, ...props, children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx33(FieldBase, { as: CheckboxGroup, width, ...props, children: /* @__PURE__ */ jsx33(
     "div",
     {
       role: "presentation",
@@ -1088,14 +1191,14 @@ var _CheckboxGroup = ({
         "flex items-start",
         orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
       ),
-      children: /* @__PURE__ */ jsx28(CheckboxGroupContext.Provider, { value: { width, variant, size }, children })
+      children: /* @__PURE__ */ jsx33(CheckboxGroupContext.Provider, { value: { width, variant, size }, children })
     }
   ) });
 };
 
 // src/Checkbox/Checkbox.tsx
-import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs12 } from "react/jsx-runtime";
-var CheckMark = () => /* @__PURE__ */ jsx29("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx29(
+import { Fragment as Fragment3, jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
+var CheckMark = () => /* @__PURE__ */ jsx34("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx34(
   "path",
   {
     fill: "currentColor",
@@ -1103,7 +1206,7 @@ var CheckMark = () => /* @__PURE__ */ jsx29("svg", { viewBox: "0 0 12 10", child
     d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
   }
 ) });
-var IndeterminateMark = () => /* @__PURE__ */ jsx29("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx29(
+var IndeterminateMark = () => /* @__PURE__ */ jsx34("svg", { width: "12", height: "3", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx34(
   "path",
   {
     fill: "currentColor",
@@ -1112,7 +1215,7 @@ var IndeterminateMark = () => /* @__PURE__ */ jsx29("svg", { width: "12", height
   }
 ) });
 var Icon2 = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       "aria-hidden": "true",
@@ -1124,11 +1227,11 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
         className
       ),
       ...props,
-      children: indeterminate ? /* @__PURE__ */ jsx29(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx29(CheckMark, {}) : null
+      children: indeterminate ? /* @__PURE__ */ jsx34(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx34(CheckMark, {}) : null
     }
   );
 };
-var _Checkbox = forwardRef11(
+var _Checkbox = forwardRef15(
   ({
     error,
     disabled,
@@ -1159,7 +1262,7 @@ var _Checkbox = forwardRef11(
       variant: variant || (group == null ? void 0 : group.variant),
       size: size || (group == null ? void 0 : group.size)
     });
-    const component = /* @__PURE__ */ jsx29(
+    const component = /* @__PURE__ */ jsx34(
       Checkbox,
       {
         ref,
@@ -1169,8 +1272,8 @@ var _Checkbox = forwardRef11(
           classNames2.container
         ),
         ...props,
-        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs12(Fragment2, { children: [
-          /* @__PURE__ */ jsx29(
+        children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs14(Fragment3, { children: [
+          /* @__PURE__ */ jsx34(
             Icon2,
             {
               checked: isSelected,
@@ -1178,11 +1281,11 @@ var _Checkbox = forwardRef11(
               className: classNames2.checkbox
             }
           ),
-          children ? /* @__PURE__ */ jsx29("div", { className: classNames2.label, children }) : null
+          children ? /* @__PURE__ */ jsx34("div", { className: classNames2.label, children }) : null
         ] })
       }
     );
-    return !group && !!labelWidth ? /* @__PURE__ */ jsx29(CheckboxField, { labelWidth, children: component }) : component;
+    return !group && !!labelWidth ? /* @__PURE__ */ jsx34(CheckboxField, { labelWidth, children: component }) : component;
   }
 );
 _Checkbox.Group = _CheckboxGroup;
@@ -1190,7 +1293,7 @@ _Checkbox.Group = _CheckboxGroup;
 // src/Columns/Columns.tsx
 import { Children as Children3 } from "react";
 import { cn as cn20, createVar as createVar7, gapSpace as gapSpace4 } from "@marigold/system";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
   columns,
@@ -1206,7 +1309,7 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       className: cn20(
@@ -1215,7 +1318,7 @@ var Columns = ({
         gapSpace4[space]
       ),
       ...props,
-      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx30(
+      children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx35(
         "div",
         {
           className: cn20(
@@ -1241,7 +1344,7 @@ import {
   gridColumn,
   placeItems
 } from "@marigold/system";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var content = {
   small: "20ch",
   medium: "45ch",
@@ -1261,7 +1364,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = contentType === "content" ? content[size] : header[size];
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       ...props,
@@ -1284,22 +1387,22 @@ import { cn as cn26, useClassNames as useClassNames23 } from "@marigold/system";
 
 // src/Dialog/DialogActions.tsx
 import { cn as cn22, useClassNames as useClassNames18 } from "@marigold/system";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var DialogActions = ({ variant, size, children }) => {
   const classNames2 = useClassNames18({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ jsx32("div", { className: cn22("[grid-area:actions]", classNames2.actions), children });
+  return /* @__PURE__ */ jsx37("div", { className: cn22("[grid-area:actions]", classNames2.actions), children });
 };
 
 // src/Dialog/DialogContent.tsx
 import { cn as cn23, useClassNames as useClassNames19 } from "@marigold/system";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var DialogContent = ({
   variant,
   size,
   children
 }) => {
   const classNames2 = useClassNames19({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ jsx33("div", { className: cn23("[grid-area:content]", classNames2.content), children });
+  return /* @__PURE__ */ jsx38("div", { className: cn23("[grid-area:content]", classNames2.content), children });
 };
 
 // src/Dialog/DialogTitle.tsx
@@ -1308,14 +1411,14 @@ import { cn as cn25, useClassNames as useClassNames22 } from "@marigold/system";
 // src/Header/Header.tsx
 import { Header as Header2 } from "react-aria-components";
 import { useClassNames as useClassNames20 } from "@marigold/system";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var _Header = ({ variant, size, ...props }) => {
   const classNames2 = useClassNames20({
     component: "Header",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx34(Header2, { className: classNames2, ...props, children: props.children });
+  return /* @__PURE__ */ jsx39(Header2, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Headline/Headline.tsx
@@ -1328,7 +1431,7 @@ import {
   useClassNames as useClassNames21,
   useTheme as useTheme2
 } from "@marigold/system";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var _Headline = ({
   variant,
   size,
@@ -1344,7 +1447,7 @@ var _Headline = ({
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx40(
     Heading,
     {
       level: Number(level),
@@ -1364,7 +1467,7 @@ var _Headline = ({
 };
 
 // src/Dialog/DialogTitle.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var DialogTitle = ({
   level = "2",
   variant,
@@ -1372,7 +1475,7 @@ var DialogTitle = ({
   children
 }) => {
   const classNames2 = useClassNames22({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ jsx36(_Header, { className: cn25("[grid-area:title]", classNames2.header), children: /* @__PURE__ */ jsx36(_Headline, { slot: "title", level, children }) });
+  return /* @__PURE__ */ jsx41(_Header, { className: cn25("[grid-area:title]", classNames2.header), children: /* @__PURE__ */ jsx41(_Headline, { slot: "title", level, children }) });
 };
 
 // src/Dialog/DialogTrigger.tsx
@@ -1380,24 +1483,24 @@ import { Children as Children4 } from "react";
 import { DialogTrigger } from "react-aria-components";
 
 // src/Overlay/Modal.tsx
-import { forwardRef as forwardRef12 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 import { Modal } from "react-aria-components";
-import { jsx as jsx37 } from "react/jsx-runtime";
-var _Modal = forwardRef12(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
+import { jsx as jsx42 } from "react/jsx-runtime";
+var _Modal = forwardRef16(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
     isDismissable: dismissable,
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx42(
     Underlay,
     {
       dismissable,
       keyboardDismissable,
       open,
       variant: "modal",
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx42(
         Modal,
         {
           ref,
@@ -1411,7 +1514,7 @@ var _Modal = forwardRef12(({ open, dismissable, keyboardDismissable, ...rest },
 });
 
 // src/Dialog/DialogTrigger.tsx
-import { jsx as jsx38, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs15 } from "react/jsx-runtime";
 var _DialogTrigger = ({
   open,
   dismissable,
@@ -1428,10 +1531,10 @@ var _DialogTrigger = ({
   const hasDialogTrigger = dialogTrigger.type !== _Dialog;
   const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
   if (isNonModal)
-    return /* @__PURE__ */ jsx38(DialogTrigger, { ...props, children: props.children });
-  return /* @__PURE__ */ jsxs13(DialogTrigger, { ...props, children: [
+    return /* @__PURE__ */ jsx43(DialogTrigger, { ...props, children: props.children });
+  return /* @__PURE__ */ jsxs15(DialogTrigger, { ...props, children: [
     hasDialogTrigger && dialogTrigger,
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx43(
       _Modal,
       {
         dismissable,
@@ -1443,19 +1546,19 @@ var _DialogTrigger = ({
 };
 
 // src/Dialog/Dialog.tsx
-import { jsx as jsx39, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs16 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
-  const { close } = useContext6(OverlayTriggerStateContext);
-  return /* @__PURE__ */ jsx39("div", { className: "absolute right-4 top-4 ml-4", children: /* @__PURE__ */ jsx39(
+  const ctx = useContext6(OverlayTriggerStateContext);
+  return /* @__PURE__ */ jsx44("div", { className: "absolute right-4 top-4 ml-4", children: /* @__PURE__ */ jsx44(
     "button",
     {
       className: cn26(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
-      onClick: close,
+      onClick: ctx == null ? void 0 : ctx.close,
       slot: "dismiss-button",
-      children: /* @__PURE__ */ jsx39("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx39(
+      children: /* @__PURE__ */ jsx44("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx44(
         "path",
         {
           fillRule: "evenodd",
@@ -1473,12 +1576,14 @@ var _Dialog = ({
   isNonModal,
   ...props
 }) => {
+  var _a;
   const classNames2 = useClassNames23({ component: "Dialog", variant, size });
   const state = useContext6(OverlayTriggerStateContext);
   const children = typeof props.children === "function" ? props.children({
-    close: state == null ? void 0 : state.close
+    close: (_a = state == null ? void 0 : state.close) != null ? _a : () => {
+    }
   }) : props.children;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16(
     Dialog,
     {
       ...props,
@@ -1488,7 +1593,7 @@ var _Dialog = ({
         classNames2.container
       ),
       children: [
-        closeButton && /* @__PURE__ */ jsx39(CloseButton, { className: classNames2.closeButton }),
+        closeButton && /* @__PURE__ */ jsx44(CloseButton, { className: classNames2.closeButton }),
         children
       ]
     }
@@ -1502,18 +1607,18 @@ _Dialog.Actions = DialogActions;
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
 import { cn as cn27, useClassNames as useClassNames24 } from "@marigold/system";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
   const classNames2 = useClassNames24({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx40(Separator, { className: cn27("border-none", classNames2), ...props });
+  return /* @__PURE__ */ jsx45(Separator, { className: cn27("border-none", classNames2), ...props });
 };
 
 // src/Footer/Footer.tsx
 import { useClassNames as useClassNames25 } from "@marigold/system";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size, ...props }) => {
   const classNames2 = useClassNames25({ component: "Footer", variant, size });
-  return /* @__PURE__ */ jsx41("footer", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx46("footer", { ...props, className: classNames2, children });
 };
 
 // src/Form/Form.tsx
@@ -1523,11 +1628,11 @@ import { Form } from "react-aria-components";
 import { cn as cn28, gapSpace as gapSpace5, height as twHeight } from "@marigold/system";
 
 // src/Grid/GridArea.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
-var GridArea = ({ name, children }) => /* @__PURE__ */ jsx42("div", { style: { gridArea: name }, children });
+import { jsx as jsx47 } from "react/jsx-runtime";
+var GridArea = ({ name, children }) => /* @__PURE__ */ jsx47("div", { style: { gridArea: name }, children });
 
 // src/Grid/Grid.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var parseGridAreas = (areas) => areas.map((area) => `"${area}"`).join("\n");
 var parseTemplateValue = (values) => values.map((val) => typeof val === "number" ? `${val}fr` : val).join(" ");
 var Grid = ({
@@ -1539,7 +1644,7 @@ var Grid = ({
   space = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       className: cn28("grid", gapSpace5[space], twHeight[height]),
@@ -1562,7 +1667,7 @@ import {
   objectPosition,
   useClassNames as useClassNames26
 } from "@marigold/system";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx49 } from "react/jsx-runtime";
 var Image = ({
   variant,
   size,
@@ -1571,7 +1676,7 @@ var Image = ({
   ...props
 }) => {
   const classNames2 = useClassNames26({ component: "Image", variant, size });
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx49(
     "img",
     {
       ...props,
@@ -1588,7 +1693,7 @@ var Image = ({
 
 // src/Inline/Inline.tsx
 import { alignment as alignment2, cn as cn30, gapSpace as gapSpace6 } from "@marigold/system";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
   alignX,
@@ -1597,7 +1702,7 @@ var Inline = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
       ...props,
@@ -1613,7 +1718,7 @@ var Inline = ({
 };
 
 // src/DateField/DateField.tsx
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef17 } from "react";
 import { DateField } from "react-aria-components";
 
 // src/DateField/DateInput.tsx
@@ -1623,9 +1728,9 @@ import { useClassNames as useClassNames27 } from "@marigold/system";
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
 import { cn as cn31 } from "@marigold/system";
-import { Fragment as Fragment3, jsx as jsx46, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx51, jsxs as jsxs17 } from "react/jsx-runtime";
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx51(
     DateSegment,
     {
       ...props,
@@ -1633,8 +1738,8 @@ var _DateSegment = ({ segment, ...props }) => {
       style: {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
-      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs15(Fragment3, { children: [
-        /* @__PURE__ */ jsx46(
+      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
+        /* @__PURE__ */ jsx51(
           "span",
           {
             "aria-hidden": "true",
@@ -1645,19 +1750,19 @@ var _DateSegment = ({ segment, ...props }) => {
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ jsx46("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
+        /* @__PURE__ */ jsx51("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-import { jsx as jsx47, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs18 } from "react/jsx-runtime";
 var _DateInput = ({ variant, size, action, ...props }) => {
   const classNames2 = useClassNames27({ component: "DateField", variant, size });
-  return /* @__PURE__ */ jsxs16(Group, { className: classNames2.field, children: [
-    /* @__PURE__ */ jsx47(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx47(_DateSegment, { className: classNames2.segment, segment }) }),
-    action ? action : /* @__PURE__ */ jsx47("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsxs18(Group, { className: classNames2.field, children: [
+    /* @__PURE__ */ jsx52(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx52(_DateSegment, { className: classNames2.segment, segment }) }),
+    action ? action : /* @__PURE__ */ jsx52("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx52(
       "svg",
       {
         "data-testid": "action",
@@ -1665,15 +1770,15 @@ var _DateInput = ({ variant, size, action, ...props }) => {
         viewBox: "0 0 24 24",
         width: 24,
         height: 24,
-        children: /* @__PURE__ */ jsx47("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__ */ jsx52("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" })
       }
     ) })
   ] });
 };
 
 // src/DateField/DateField.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var _DateField = forwardRef13(
+import { jsx as jsx53 } from "react/jsx-runtime";
+var _DateField = forwardRef17(
   ({
     variant,
     size,
@@ -1691,7 +1796,7 @@ var _DateField = forwardRef13(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx48(
+    return /* @__PURE__ */ jsx53(
       FieldBase,
       {
         as: DateField,
@@ -1699,7 +1804,7 @@ var _DateField = forwardRef13(
         size,
         ref,
         ...props,
-        children: /* @__PURE__ */ jsx48(_DateInput, { action })
+        children: /* @__PURE__ */ jsx53(_DateInput, { action })
       }
     );
   }
@@ -1725,7 +1830,7 @@ import { CalendarStateContext } from "react-aria-components";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useDateFormatter, useLocale } from "@react-aria/i18n";
 import { useClassNames as useClassNames28 } from "@marigold/system";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
   const state = useContext7(CalendarStateContext);
   const { headerProps } = useCalendarGrid(props, state);
@@ -1743,16 +1848,16 @@ function CalendarGridHeader(props) {
     });
   }, [locale, state.timeZone, dayFormatter]);
   const classNames2 = useClassNames28({ component: "Calendar" });
-  return /* @__PURE__ */ jsx49("thead", { ...headerProps, children: /* @__PURE__ */ jsx49("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx49("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
+  return /* @__PURE__ */ jsx54("thead", { ...headerProps, children: /* @__PURE__ */ jsx54("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx54("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-import { jsx as jsx50, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs19 } from "react/jsx-runtime";
 var _CalendarGrid = () => {
   const classNames2 = useClassNames29({ component: "Calendar" });
-  return /* @__PURE__ */ jsxs17(CalendarGrid, { className: classNames2.calendarGrid, children: [
-    /* @__PURE__ */ jsx50(CalendarGridHeader, {}),
-    /* @__PURE__ */ jsx50(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsxs19(CalendarGrid, { className: classNames2.calendarGrid, children: [
+    /* @__PURE__ */ jsx55(CalendarGridHeader, {}),
+    /* @__PURE__ */ jsx55(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx55(
       CalendarCell,
       {
         date,
@@ -1768,7 +1873,6 @@ var _CalendarGrid = () => {
 // src/Calendar/CalendarListBox.tsx
 import { useContext as useContext8 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
-import { ChevronDown as ChevronDown2 } from "@marigold/icons";
 import { cn as cn33, useClassNames as useClassNames30 } from "@marigold/system";
 
 // src/Calendar/useFormattedMonths.tsx
@@ -1788,7 +1892,7 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-import { jsx as jsx51, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs20 } from "react/jsx-runtime";
 function CalendarListBox({
   type,
   isDisabled,
@@ -1798,7 +1902,7 @@ function CalendarListBox({
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
   const { select: selectClassNames } = useClassNames30({ component: "Select" });
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs20(
     "button",
     {
       disabled: isDisabled,
@@ -1807,7 +1911,7 @@ function CalendarListBox({
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ jsx51(ChevronDown2, {})
+        /* @__PURE__ */ jsx56(ChevronDown, {})
       ]
     }
   );
@@ -1815,13 +1919,12 @@ function CalendarListBox({
 
 // src/Calendar/MonthControls.tsx
 import { Button as Button3 } from "react-aria-components";
-import { ChevronLeft, ChevronRight } from "@marigold/icons";
 import { cn as cn34, useClassNames as useClassNames31 } from "@marigold/system";
-import { jsx as jsx52, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs21 } from "react/jsx-runtime";
 function MonthControls() {
   const classNames2 = useClassNames31({ component: "Calendar" });
   const buttonClassNames = useClassNames31({ component: "Button" });
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       className: cn34(
@@ -1829,7 +1932,7 @@ function MonthControls() {
         classNames2.calendarControllers
       ),
       children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx57(
           Button3,
           {
             className: cn34(
@@ -1837,10 +1940,10 @@ function MonthControls() {
               buttonClassNames
             ),
             slot: "previous",
-            children: /* @__PURE__ */ jsx52(ChevronLeft, {})
+            children: /* @__PURE__ */ jsx57(ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx57(
           Button3,
           {
             className: cn34(
@@ -1848,7 +1951,7 @@ function MonthControls() {
               buttonClassNames
             ),
             slot: "next",
-            children: /* @__PURE__ */ jsx52(ChevronRight, {})
+            children: /* @__PURE__ */ jsx57(ChevronRight, {})
           }
         )
       ]
@@ -1860,7 +1963,7 @@ var MonthControls_default = MonthControls;
 // src/Calendar/MonthListBox.tsx
 import { useContext as useContext9 } from "react";
 import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var MonthListBox = ({ setSelectedDropdown }) => {
   const state = useContext9(CalendarStateContext3);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
@@ -1869,13 +1972,13 @@ var MonthListBox = ({ setSelectedDropdown }) => {
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx58(
     "ul",
     {
       "data-testid": "monthOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
       children: months.map((month, index) => {
-        return /* @__PURE__ */ jsx53("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx53(
+        return /* @__PURE__ */ jsx58("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx58(
           _Button,
           {
             slot: "previous",
@@ -1903,7 +2006,7 @@ import {
 } from "react";
 import { CalendarStateContext as CalendarStateContext4 } from "react-aria-components";
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var YearListBox = ({ setSelectedDropdown }) => {
   const state = useContext10(CalendarStateContext4);
   const years = [];
@@ -1933,19 +2036,19 @@ var YearListBox = ({ setSelectedDropdown }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx59(
     "ul",
     {
       "data-testid": "yearOptions",
       className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
       children: years.map((year, index) => {
         const isActive = +year.formatted === state.focusedDate.year;
-        return /* @__PURE__ */ jsx54("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx54(
+        return /* @__PURE__ */ jsx59("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx59(
           "div",
           {
             ref: isActive ? activeButtonRef : null,
             style: { height: "100%", width: "100%" },
-            children: /* @__PURE__ */ jsx54(
+            children: /* @__PURE__ */ jsx59(
               _Button,
               {
                 slot: "previous",
@@ -1970,26 +2073,28 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment4, jsx as jsx55, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx60, jsxs as jsxs22 } from "react/jsx-runtime";
 var _Calendar = ({
   disabled,
   readOnly,
   size,
   variant,
+  dateUnavailable,
   ...rest
 }) => {
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
+    isDateUnavailable: dateUnavailable,
     ...rest
   };
   const classNames2 = useClassNames32({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
-    month: /* @__PURE__ */ jsx55(MonthListBox_default, { setSelectedDropdown }),
-    year: /* @__PURE__ */ jsx55(YearListBox_default, { setSelectedDropdown })
+    month: /* @__PURE__ */ jsx60(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ jsx60(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx60(
     Calendar,
     {
       className: cn35(
@@ -1997,10 +2102,10 @@ var _Calendar = ({
         classNames2.calendar
       ),
       ...props,
-      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs20(Fragment4, { children: [
-        /* @__PURE__ */ jsxs20("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs20("div", { className: "flex w-full gap-4", children: [
-            /* @__PURE__ */ jsx55(
+      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs22(Fragment5, { children: [
+        /* @__PURE__ */ jsxs22("div", { className: "mb-4 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs22("div", { className: "flex w-full gap-4", children: [
+            /* @__PURE__ */ jsx60(
               CalendarListBox,
               {
                 type: "month",
@@ -2008,7 +2113,7 @@ var _Calendar = ({
                 setSelectedDropdown
               }
             ),
-            /* @__PURE__ */ jsx55(
+            /* @__PURE__ */ jsx60(
               CalendarListBox,
               {
                 type: "year",
@@ -2017,20 +2122,20 @@ var _Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx55(MonthControls_default, {})
+          /* @__PURE__ */ jsx60(MonthControls_default, {})
         ] }),
-        /* @__PURE__ */ jsx55(_CalendarGrid, {})
+        /* @__PURE__ */ jsx60(_CalendarGrid, {})
       ] })
     }
   );
 };
 
 // src/DatePicker/DatePicker.tsx
-import React4 from "react";
+import React6 from "react";
 import { DatePicker } from "react-aria-components";
 import { useClassNames as useClassNames33 } from "@marigold/system";
-import { jsx as jsx56, jsxs as jsxs21 } from "react/jsx-runtime";
-var _DatePicker = React4.forwardRef(
+import { jsx as jsx61, jsxs as jsxs23 } from "react/jsx-runtime";
+var _DatePicker = React6.forwardRef(
   ({
     dateUnavailable,
     disabled,
@@ -2058,7 +2163,7 @@ var _DatePicker = React4.forwardRef(
       size,
       variant
     });
-    return /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs23(
       FieldBase,
       {
         as: DatePicker,
@@ -2067,16 +2172,16 @@ var _DatePicker = React4.forwardRef(
         ...props,
         ref,
         children: [
-          /* @__PURE__ */ jsx56(
+          /* @__PURE__ */ jsx61(
             _DateInput,
             {
-              action: /* @__PURE__ */ jsx56("div", { className: classNames2.container, children: /* @__PURE__ */ jsx56(
+              action: /* @__PURE__ */ jsx61("div", { className: classNames2.container, children: /* @__PURE__ */ jsx61(
                 _Button,
                 {
                   size: "small",
                   disabled,
                   className: classNames2.button,
-                  children: /* @__PURE__ */ jsx56(
+                  children: /* @__PURE__ */ jsx61(
                     "svg",
                     {
                       "data-testid": "action",
@@ -2084,14 +2189,14 @@ var _DatePicker = React4.forwardRef(
                       width: 24,
                       height: 24,
                       fill: "currentColor",
-                      children: /* @__PURE__ */ jsx56("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__ */ jsx61("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__ */ jsx56(_Popover, { children: /* @__PURE__ */ jsx56(_Calendar, { disabled }) })
+          /* @__PURE__ */ jsx61(_Popover, { children: /* @__PURE__ */ jsx61(_Calendar, { disabled }) })
         ]
       }
     );
@@ -2105,8 +2210,8 @@ import {
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
-import { jsx as jsx57 } from "react/jsx-runtime";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx57(
+import { jsx as jsx62 } from "react/jsx-runtime";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx62(
   "div",
   {
     className: cn36(
@@ -2119,18 +2224,18 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx57(
 );
 
 // src/Link/Link.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 import { Link } from "react-aria-components";
 import { useClassNames as useClassNames34 } from "@marigold/system";
-import { jsx as jsx58 } from "react/jsx-runtime";
-var _Link = forwardRef14(
+import { jsx as jsx63 } from "react/jsx-runtime";
+var _Link = forwardRef18(
   ({ variant, size, disabled, children, ...props }, ref) => {
     const classNames2 = useClassNames34({
       component: "Link",
       variant,
       size
     });
-    return /* @__PURE__ */ jsx58(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ jsx63(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
@@ -2143,14 +2248,14 @@ var ListContext = createContext5({});
 var useListContext = () => useContext11(ListContext);
 
 // src/List/ListItem.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ jsx59("li", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx64("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -2160,7 +2265,7 @@ var List = ({
 }) => {
   const Component = as;
   const classNames2 = useClassNames35({ component: "List", variant, size });
-  return /* @__PURE__ */ jsx60(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx60(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
+  return /* @__PURE__ */ jsx65(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx65(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
@@ -2171,26 +2276,26 @@ import { useClassNames as useClassNames38 } from "@marigold/system";
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
 import { useClassNames as useClassNames36 } from "@marigold/system";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
   const classNames2 = useClassNames36({ component: "Menu" });
-  return /* @__PURE__ */ jsx61(MenuItem, { ...props, className: classNames2.item, children });
+  return /* @__PURE__ */ jsx66(MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
-import { Section as Section2 } from "react-aria-components";
+import { MenuSection } from "react-aria-components";
 import { useClassNames as useClassNames37 } from "@marigold/system";
-import { jsx as jsx62, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs24 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
   const className = useClassNames37({ component: "Menu" });
-  return /* @__PURE__ */ jsxs22(Section2, { ...props, children: [
-    /* @__PURE__ */ jsx62(_Header, { className: className.section, children: title }),
+  return /* @__PURE__ */ jsxs24(MenuSection, { ...props, children: [
+    /* @__PURE__ */ jsx67(_Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-import { jsx as jsx63, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx68, jsxs as jsxs25 } from "react/jsx-runtime";
 var _Menu = ({
   children,
   label,
@@ -2203,9 +2308,9 @@ var _Menu = ({
   ...props
 }) => {
   const classNames2 = useClassNames38({ component: "Menu", variant, size });
-  return /* @__PURE__ */ jsxs23(MenuTrigger, { ...props, children: [
-    /* @__PURE__ */ jsx63(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
-    /* @__PURE__ */ jsx63(_Popover, { open, placement, children: /* @__PURE__ */ jsx63(Menu, { ...props, className: classNames2.container, children }) })
+  return /* @__PURE__ */ jsxs25(MenuTrigger, { ...props, children: [
+    /* @__PURE__ */ jsx68(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
+    /* @__PURE__ */ jsx68(_Popover, { open, placement, children: /* @__PURE__ */ jsx68(Menu, { ...props, className: classNames2.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
@@ -2213,8 +2318,8 @@ _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
 import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
-import { SVG as SVG4, useClassNames as useClassNames39 } from "@marigold/system";
-import { jsx as jsx64, jsxs as jsxs24 } from "react/jsx-runtime";
+import { SVG as SVG9, useClassNames as useClassNames39 } from "@marigold/system";
+import { jsx as jsx69, jsxs as jsxs26 } from "react/jsx-runtime";
 var ActionMenu = ({
   variant,
   size,
@@ -2222,14 +2327,15 @@ var ActionMenu = ({
   ...props
 }) => {
   const classNames2 = useClassNames39({ component: "Menu", variant, size });
-  return /* @__PURE__ */ jsxs24(MenuTrigger2, { children: [
-    /* @__PURE__ */ jsx64(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx64(SVG4, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx64("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
-    /* @__PURE__ */ jsx64(_Popover, { children: /* @__PURE__ */ jsx64(Menu2, { ...props, className: classNames2.container, children: props.children }) })
+  return /* @__PURE__ */ jsxs26(MenuTrigger2, { children: [
+    /* @__PURE__ */ jsx69(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx69(SVG9, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx69("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
+    /* @__PURE__ */ jsx69(_Popover, { children: /* @__PURE__ */ jsx69(Menu2, { ...props, className: classNames2.container, children: props.children }) })
   ] });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-import { useState as useState2 } from "react";
+import { useRef as useRef4, useState as useState2 } from "react";
+import { useButton as useButton2 } from "@react-aria/button";
 import { cn as cn39, useClassNames as useClassNames40 } from "@marigold/system";
 
 // src/SectionMessage/Context.tsx
@@ -2239,32 +2345,32 @@ var useSectionMessageContext = () => useContext12(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
 import { cn as cn37 } from "@marigold/system";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames2 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx65("div", { className: cn37("[grid-area:content]", classNames2.content), children });
+  return /* @__PURE__ */ jsx70("div", { className: cn37("[grid-area:content]", classNames2.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
 import { cn as cn38 } from "@marigold/system";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames2 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx66("div", { className: cn38("[grid-area:title]", classNames2.title), children });
+  return /* @__PURE__ */ jsx71("div", { className: cn38("[grid-area:title]", classNames2.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-import { jsx as jsx67, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx72, jsxs as jsxs27 } from "react/jsx-runtime";
 var icons = {
-  success: () => /* @__PURE__ */ jsx67(
+  success: () => /* @__PURE__ */ jsx72(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx67(
+      children: /* @__PURE__ */ jsx72(
         "path",
         {
           fillRule: "evenodd",
@@ -2274,13 +2380,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ jsx67(
+  info: () => /* @__PURE__ */ jsx72(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx67(
+      children: /* @__PURE__ */ jsx72(
         "path",
         {
           fillRule: "evenodd",
@@ -2290,13 +2396,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx67(
+  warning: () => /* @__PURE__ */ jsx72(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx67(
+      children: /* @__PURE__ */ jsx72(
         "path",
         {
           fillRule: "evenodd",
@@ -2306,13 +2412,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx67(
+  error: () => /* @__PURE__ */ jsx72(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx67(
+      children: /* @__PURE__ */ jsx72(
         "path",
         {
           fillRule: "evenodd",
@@ -2328,43 +2434,53 @@ var SectionMessage = ({
   size,
   children,
   closeButton,
+  close,
+  onCloseChange,
   ...props
 }) => {
+  const buttonRef = useRef4(null);
   const classNames2 = useClassNames40({
     component: "SectionMessage",
     variant,
     size
   });
   const Icon4 = icons[variant];
-  const [isVisible, setIsVisible] = useState2(true);
+  const [internalVisible, setInternalVisible] = useState2(true);
+  const isCurrentlyVisible = close != null ? close : internalVisible;
+  const { buttonProps } = useButton2(props, buttonRef);
   const handleClose = () => {
-    setIsVisible(false);
+    onCloseChange && close && onCloseChange(close);
+    if (close === void 0) {
+      setInternalVisible(false);
+    }
   };
-  if (!isVisible) return null;
-  return /* @__PURE__ */ jsx67(SectionMessageContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs25(
+  if (!isCurrentlyVisible) return null;
+  return /* @__PURE__ */ jsx72(SectionMessageContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs27(
     "div",
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
       className: cn39("grid auto-rows-min", classNames2.container),
       children: [
-        /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx72(
           "div",
           {
             className: cn39(
               "h-5 w-5 self-center [grid-area:icon]",
               classNames2.icon
             ),
-            children: Icon4 && /* @__PURE__ */ jsx67(Icon4, {})
+            children: Icon4 && /* @__PURE__ */ jsx72(Icon4, {})
           }
         ),
-        closeButton && /* @__PURE__ */ jsx67(
+        closeButton && /* @__PURE__ */ jsx72(
           "button",
           {
+            ...buttonProps,
+            ref: buttonRef,
             "aria-label": "close",
             className: "h-5 w-5 cursor-pointer border-none p-0 leading-normal outline-0 [grid-area:close]",
             onClick: handleClose,
-            children: /* @__PURE__ */ jsx67("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx67(
+            children: /* @__PURE__ */ jsx72("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx72(
               "path",
               {
                 fillRule: "evenodd",
@@ -2393,7 +2509,7 @@ import { cn as cn40, useClassNames as useClassNames42 } from "@marigold/system";
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
 import { useClassNames as useClassNames41 } from "@marigold/system";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
   items,
@@ -2404,7 +2520,7 @@ var _TagGroup = ({
   ...rest
 }) => {
   const classNames2 = useClassNames41({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx68(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx73(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx73(
     TagList,
     {
       items,
@@ -2416,22 +2532,22 @@ var _TagGroup = ({
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment5, jsx as jsx69, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx74, jsxs as jsxs28 } from "react/jsx-runtime";
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ jsx69(Button4, { slot: "remove", className, children: /* @__PURE__ */ jsx69("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx69("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__ */ jsx74(Button4, { slot: "remove", className, children: /* @__PURE__ */ jsx74("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx74("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 _Tag = ({ variant, size, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
   const classNames2 = useClassNames42({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx74(
     Tag,
     {
       textValue,
       ...props,
       className: cn40("data-[selection-mode]:cursor-pointer", classNames2.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs26(Fragment5, { children: [
+      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs28(Fragment6, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ jsx69(
+        allowsRemoving && /* @__PURE__ */ jsx74(
           CloseButton2,
           {
             className: cn40("flex items-center", classNames2.closeButton)
@@ -2444,7 +2560,7 @@ var _Tag = ({ variant, size, children, ...props }) => {
 _Tag.Group = _TagGroup;
 
 // src/Multiselect/Multiselect.tsx
-import { jsx as jsx70, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs29 } from "react/jsx-runtime";
 var Item2 = (_) => null;
 var Multiselect = ({
   label,
@@ -2482,18 +2598,18 @@ var Multiselect = ({
     }, 0);
     input.focus();
   };
-  return /* @__PURE__ */ jsxs27("div", { className: "flex flex-wrap gap-1", children: [
-    /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsxs29("div", { className: "flex flex-wrap gap-1", children: [
+    /* @__PURE__ */ jsx75(
       _Tag.Group,
       {
         items: selected,
         allowsRemoving: true,
         onRemove: setUnselected,
         renderEmptyState: () => null,
-        children: (item) => /* @__PURE__ */ jsx70(_Tag, { id: item.id, children: item.children }, item.id)
+        children: (item) => /* @__PURE__ */ jsx75(_Tag, { id: item.id, children: item.children }, item.id)
       }
     ),
-    /* @__PURE__ */ jsx70(
+    /* @__PURE__ */ jsx75(
       _ComboBox,
       {
         value,
@@ -2503,7 +2619,7 @@ var Multiselect = ({
         disabled: unselected.length === 0,
         placeholder: unselected.length === 0 ? "All items selected" : "",
         ...props,
-        children: unselected.map((item) => /* @__PURE__ */ jsx70(_ComboBox.Option, { id: item.id, children: item.children }, item.id))
+        children: unselected.map((item) => /* @__PURE__ */ jsx75(_ComboBox.Option, { id: item.id, children: item.children }, item.id))
       }
     )
   ] });
@@ -2511,15 +2627,15 @@ var Multiselect = ({
 Multiselect.Item = Item2;
 
 // src/NumberField/NumberField.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { Group as Group2, NumberField } from "react-aria-components";
 import { cn as cn42, useClassNames as useClassNames43 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { Button as Button5 } from "react-aria-components";
 import { cn as cn41 } from "@marigold/system";
-import { jsx as jsx71 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx71("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx71(
+import { jsx as jsx76 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx76("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx76(
   "path",
   {
     fillRule: "evenodd",
@@ -2527,7 +2643,7 @@ var Plus = () => /* @__PURE__ */ jsx71("svg", { width: 16, height: 16, viewBox:
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ jsx71("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx71(
+var Minus = () => /* @__PURE__ */ jsx76("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx76(
   "path",
   {
     fillRule: "evenodd",
@@ -2537,7 +2653,7 @@ var Minus = () => /* @__PURE__ */ jsx71("svg", { width: 16, height: 16, viewBox:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx76(
     Button5,
     {
       className: cn41(
@@ -2548,14 +2664,14 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx71(Icon4, {})
+      children: /* @__PURE__ */ jsx76(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx72, jsxs as jsxs28 } from "react/jsx-runtime";
-var _NumberField = forwardRef15(
+import { jsx as jsx77, jsxs as jsxs30 } from "react/jsx-runtime";
+var _NumberField = forwardRef19(
   ({
     variant,
     size,
@@ -2579,8 +2695,8 @@ var _NumberField = forwardRef15(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx72(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs28(Group2, { className: cn42("flex items-stretch", classNames2.group), children: [
-      showStepper && /* @__PURE__ */ jsx72(
+    return /* @__PURE__ */ jsx77(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs30(Group2, { className: cn42("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ jsx77(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2588,7 +2704,7 @@ var _NumberField = forwardRef15(
           slot: "decrement"
         }
       ),
-      /* @__PURE__ */ jsx72("div", { className: "flex-1", children: /* @__PURE__ */ jsx72(
+      /* @__PURE__ */ jsx77("div", { className: "flex-1", children: /* @__PURE__ */ jsx77(
         _Input,
         {
           ref,
@@ -2597,7 +2713,7 @@ var _NumberField = forwardRef15(
           className: classNames2.input
         }
       ) }),
-      showStepper && /* @__PURE__ */ jsx72(
+      showStepper && /* @__PURE__ */ jsx77(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2609,12 +2725,339 @@ var _NumberField = forwardRef15(
   }
 );
 
+// src/Pagination/Pagination.tsx
+import { useEffect as useEffect5, useState as useState5 } from "react";
+
+// src/Pagination/Ellipsis.tsx
+import { jsx as jsx78 } from "react/jsx-runtime";
+var Ellipsis = () => {
+  return /* @__PURE__ */ jsx78(
+    "span",
+    {
+      className: "text-text-base flex h-8 w-8 items-center justify-center",
+      "aria-label": "These pages are hidden",
+      children: "\u2026"
+    }
+  );
+};
+
+// src/Pagination/NavigationButton.tsx
+import React7, { useEffect as useEffect3 } from "react";
+import { useButton as useButton3 } from "@react-aria/button";
+import { cn as cn43, useClassNames as useClassNames44 } from "@marigold/system";
+import { jsxs as jsxs31 } from "react/jsx-runtime";
+var NavigationButton = (props) => {
+  const ref = React7.useRef(null);
+  const classNames2 = useClassNames44({
+    component: "Pagination"
+  });
+  let { buttonProps } = useButton3(props, ref);
+  let {
+    children,
+    isSelected,
+    isDisabled,
+    registerRef,
+    controlLabel,
+    position,
+    ...rest
+  } = props;
+  useEffect3(() => {
+    if (registerRef) {
+      registerRef(ref.current);
+      return () => registerRef(null);
+    }
+  }, [registerRef]);
+  return /* @__PURE__ */ jsxs31(
+    "button",
+    {
+      ref,
+      ...buttonProps,
+      ...rest,
+      disabled: isDisabled,
+      className: cn43(classNames2, controlLabel && "w-24 px-2"),
+      "data-selected": isSelected,
+      children: [
+        position === "left" && children,
+        controlLabel,
+        position === "right" && children
+      ]
+    }
+  );
+};
+
+// src/Pagination/PageButton.tsx
+import { useEffect as useEffect4, useRef as useRef5 } from "react";
+import { useButton as useButton4 } from "@react-aria/button";
+import { useClassNames as useClassNames45 } from "@marigold/system";
+import { jsx as jsx79 } from "react/jsx-runtime";
+var PageButton = (props) => {
+  const ref = useRef5(null);
+  const classNames2 = useClassNames45({
+    component: "Pagination"
+  });
+  let { buttonProps } = useButton4(props, ref);
+  let { page, selected, registerRef, isDisabled } = props;
+  useEffect4(() => {
+    if (registerRef) {
+      registerRef(ref.current);
+      return () => registerRef(null);
+    }
+  }, [registerRef]);
+  return /* @__PURE__ */ jsx79(
+    "button",
+    {
+      ref,
+      ...buttonProps,
+      "aria-label": `Page ${page}`,
+      "aria-current": selected ? "page" : void 0,
+      className: classNames2,
+      "data-selected": selected,
+      disabled: isDisabled,
+      tabIndex: selected === true ? 0 : -1,
+      children: page
+    }
+  );
+};
+
+// src/Pagination/useKeyboardNavigation.tsx
+import { useCallback, useRef as useRef6, useState as useState4 } from "react";
+import { useKeyboard } from "@react-aria/interactions";
+var NavigationTypes = {
+  Prev: "prev",
+  Next: "next",
+  Page: "page",
+  Ellipsis: "ellipsis"
+};
+var useKeyboardNavigation = ({
+  page,
+  totalPages,
+  onChange = () => {
+  }
+}) => {
+  const containerRef = useRef6(null);
+  const [focusedItem, setFocusedItem] = useState4({
+    type: "page",
+    value: page
+  });
+  const navigationItems = useRef6([]);
+  const buttonRefs = useRef6(/* @__PURE__ */ new Map());
+  const isItemDisabled = useCallback(
+    (item) => {
+      if (item.type === NavigationTypes.Prev) return page <= 1;
+      if (item.type === NavigationTypes.Next) return page >= totalPages;
+      return item.type === NavigationTypes.Ellipsis;
+    },
+    [page, totalPages]
+  );
+  const findNextFocusableItem = useCallback(
+    (current, direction) => {
+      const items = navigationItems.current.filter(
+        (item) => !isItemDisabled(item)
+      );
+      const currentIndex = items.findIndex(
+        (item) => item.type === current.type && item.value === current.value
+      );
+      if (currentIndex === -1) {
+        return items[0] || { type: NavigationTypes.Page, value: page };
+      }
+      const nextIndex = direction === "next" ? (currentIndex + 1) % items.length : (currentIndex - 1 + items.length) % items.length;
+      return items[nextIndex];
+    },
+    [isItemDisabled, page]
+  );
+  const focusItem = useCallback(
+    (item) => {
+      if (isItemDisabled(item)) return;
+      const key = `${item.type}-${item.value}`;
+      const element = buttonRefs.current.get(key);
+      if (element && typeof element.focus === "function") {
+        element.focus();
+        setFocusedItem(item);
+      }
+    },
+    [isItemDisabled]
+  );
+  const { keyboardProps } = useKeyboard({
+    onKeyDown: (e) => {
+      let newFocusedItem = focusedItem;
+      switch (e.key) {
+        case "ArrowLeft":
+          newFocusedItem = findNextFocusableItem(focusedItem, "prev");
+          break;
+        case "ArrowRight":
+          newFocusedItem = findNextFocusableItem(focusedItem, "next");
+          break;
+        case "Home":
+          newFocusedItem = navigationItems.current.find((item) => !isItemDisabled(item)) || focusedItem;
+          break;
+        case "End":
+          newFocusedItem = [...navigationItems.current].reverse().find((item) => !isItemDisabled(item)) || focusedItem;
+          break;
+        case "Enter":
+        case " ":
+          if (isItemDisabled(focusedItem)) return;
+          if (focusedItem.type === NavigationTypes.Page && typeof focusedItem.value === "number") {
+            onChange(focusedItem.value);
+          } else if (focusedItem.type === NavigationTypes.Prev && page > 1) {
+            onChange(page - 1);
+          } else if (focusedItem.type === NavigationTypes.Next && page < totalPages) {
+            onChange(page + 1);
+          }
+          break;
+        default:
+          return;
+      }
+      if (newFocusedItem !== focusedItem) {
+        focusItem(newFocusedItem);
+      }
+    }
+  });
+  const registerRef = useCallback(
+    (type, value, ref) => {
+      const key = `${type}-${value}`;
+      if (ref) {
+        buttonRefs.current.set(key, ref);
+      } else {
+        buttonRefs.current.delete(key);
+      }
+    },
+    []
+  );
+  const setNavigationItems = useCallback((items) => {
+    navigationItems.current = items;
+  }, []);
+  return {
+    containerRef,
+    keyboardProps,
+    registerRef,
+    setNavigationItems,
+    setFocusedItem
+  };
+};
+
+// src/Pagination/usePageRange.tsx
+var usePageRange = ({ currentPage, totalPages }) => {
+  const getPageRange = () => {
+    if (totalPages <= 7) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const pages = [1];
+    if (currentPage <= 4) {
+      for (let i = 2; i <= 5; i++) {
+        pages.push(i);
+      }
+      pages.push("ellipsis");
+    } else if (currentPage >= totalPages - 3) {
+      pages.push("ellipsis");
+      for (let i = totalPages - 4; i < totalPages; i++) {
+        pages.push(i);
+      }
+    } else {
+      pages.push("ellipsis");
+      for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+        pages.push(i);
+      }
+      pages.push("ellipsis");
+    }
+    pages.push(totalPages);
+    return pages;
+  };
+  return getPageRange();
+};
+
+// src/Pagination/Pagination.tsx
+import { jsx as jsx80, jsxs as jsxs32 } from "react/jsx-runtime";
+var _Pagination = ({
+  defaultPage = 1,
+  page,
+  totalItems,
+  pageSize,
+  onChange = () => {
+  },
+  controlLabels
+}) => {
+  const [currentPage, setCurrentPage] = useState5(page != null ? page : defaultPage);
+  const totalPages = Math.ceil(totalItems / pageSize);
+  const handlePageChange = (newPage) => {
+    setCurrentPage(newPage);
+    onChange(newPage);
+  };
+  const { registerRef, keyboardProps, setNavigationItems, setFocusedItem } = useKeyboardNavigation({
+    page: currentPage,
+    totalPages,
+    onChange: handlePageChange
+  });
+  const pageRange = usePageRange({ currentPage, totalPages });
+  useEffect5(() => {
+    const items = [
+      { type: NavigationTypes.Prev, value: currentPage - 1 },
+      ...pageRange.map((value) => ({
+        type: typeof value === "number" ? NavigationTypes.Page : NavigationTypes.Ellipsis,
+        value
+      })),
+      { type: NavigationTypes.Next, value: currentPage + 1 }
+    ];
+    setNavigationItems(items);
+  }, [pageRange, currentPage, setNavigationItems]);
+  useEffect5(() => {
+    setFocusedItem({ type: NavigationTypes.Page, value: currentPage });
+  }, [currentPage, setFocusedItem]);
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages || totalPages === 0;
+  return /* @__PURE__ */ jsxs32(
+    "nav",
+    {
+      className: "flex items-center justify-center space-x-2",
+      "aria-label": `Page ${currentPage} of ${totalPages}`,
+      ...keyboardProps,
+      children: [
+        /* @__PURE__ */ jsx80(
+          NavigationButton,
+          {
+            onPress: () => handlePageChange(Math.max(1, currentPage - 1)),
+            "aria-label": "Page previous",
+            isDisabled: isFirstPage,
+            registerRef: (ref) => registerRef(NavigationTypes.Prev, currentPage - 1, ref),
+            controlLabel: controlLabels == null ? void 0 : controlLabels[0],
+            position: "left",
+            children: /* @__PURE__ */ jsx80(ChevronLeft, { className: "h-5 w-5" })
+          }
+        ),
+        /* @__PURE__ */ jsx80("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
+          (pageNumber, index) => pageNumber === "ellipsis" ? /* @__PURE__ */ jsx80(Ellipsis, {}, `ellipsis-${index}`) : /* @__PURE__ */ jsx80(
+            PageButton,
+            {
+              page: pageNumber,
+              selected: pageNumber === currentPage,
+              onPress: () => handlePageChange(pageNumber),
+              registerRef: (ref) => registerRef(NavigationTypes.Page, pageNumber, ref)
+            },
+            pageNumber
+          )
+        ) : /* @__PURE__ */ jsx80(PageButton, { page: 1, isDisabled: true }, 1) }),
+        /* @__PURE__ */ jsx80(
+          NavigationButton,
+          {
+            onPress: () => handlePageChange(Math.min(totalPages, currentPage + 1)),
+            "aria-label": "Page next",
+            isDisabled: isLastPage,
+            registerRef: (ref) => registerRef(NavigationTypes.Next, currentPage + 1, ref),
+            controlLabel: controlLabels == null ? void 0 : controlLabels[1],
+            position: "right",
+            children: /* @__PURE__ */ jsx80(ChevronRight, { className: "h-5 w-5" })
+          }
+        )
+      ]
+    }
+  );
+};
+
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef16
+  forwardRef as forwardRef20
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn44, useClassNames as useClassNames45 } from "@marigold/system";
+import { cn as cn45, useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext7, useContext as useContext13 } from "react";
@@ -2625,8 +3068,8 @@ var useRadioGroupContext = () => useContext13(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn43, useClassNames as useClassNames44 } from "@marigold/system";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { cn as cn44, useClassNames as useClassNames46 } from "@marigold/system";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
   size,
@@ -2642,7 +3085,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = useClassNames44({ component: "Radio", variant, size });
+  const classNames2 = useClassNames46({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2650,7 +3093,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx81(
     FieldBase,
     {
       as: RadioGroup,
@@ -2661,18 +3104,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ jsx73(
+      children: /* @__PURE__ */ jsx81(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn43(
+          className: cn44(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx73(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ jsx81(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -2680,33 +3123,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment6, jsx as jsx74, jsxs as jsxs29 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx74("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx74("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx74(
+import { Fragment as Fragment7, jsx as jsx82, jsxs as jsxs33 } from "react/jsx-runtime";
+var Dot = () => /* @__PURE__ */ jsx82("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx82("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx82(
   "div",
   {
-    className: cn44(
+    className: cn45(
       "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__ */ jsx74(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx82(Dot, {}) : null
   }
 );
-var _Radio = forwardRef16(
+var _Radio = forwardRef20(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = useClassNames45({
+    const classNames2 = useClassNames47({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ jsx74(
+    return /* @__PURE__ */ jsx82(
       Radio,
       {
         ref,
-        className: cn44(
+        className: cn45(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -2715,18 +3158,18 @@ var _Radio = forwardRef16(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs29(Fragment6, { children: [
-          /* @__PURE__ */ jsx74(
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs33(Fragment7, { children: [
+          /* @__PURE__ */ jsx82(
             Icon3,
             {
               checked: isSelected,
-              className: cn44(
+              className: cn45(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ jsx74("div", { className: classNames2.label, children })
+          /* @__PURE__ */ jsx82("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -2735,10 +3178,10 @@ var _Radio = forwardRef16(
 _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
-import { forwardRef as forwardRef17 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import { SearchField } from "react-aria-components";
-import { jsx as jsx75 } from "react/jsx-runtime";
-var _SearchField = forwardRef17(
+import { jsx as jsx83 } from "react/jsx-runtime";
+var _SearchField = forwardRef21(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
       ...rest,
@@ -2747,7 +3190,7 @@ var _SearchField = forwardRef17(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ jsx75(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx75(
+    return /* @__PURE__ */ jsx83(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx83(
       SearchInput,
       {
         ref,
@@ -2758,15 +3201,15 @@ var _SearchField = forwardRef17(
 );
 
 // src/Select/Select.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 import {
   Button as Button6,
   Select,
   SelectValue
 } from "react-aria-components";
-import { cn as cn45, useClassNames as useClassNames46 } from "@marigold/system";
-import { jsx as jsx76, jsxs as jsxs30 } from "react/jsx-runtime";
-var _Select = forwardRef18(
+import { cn as cn46, useClassNames as useClassNames48 } from "@marigold/system";
+import { jsx as jsx84, jsxs as jsxs34 } from "react/jsx-runtime";
+var _Select = forwardRef22(
   ({
     disabled,
     required,
@@ -2786,34 +3229,23 @@ var _Select = forwardRef18(
       onSelectionChange: onChange,
       ...rest
     };
-    const classNames2 = useClassNames46({ component: "Select", variant, size });
-    return /* @__PURE__ */ jsxs30(
-      FieldBase,
-      {
-        isOpen: true,
-        as: Select,
-        ref,
-        variant,
-        size,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxs30(
-            Button6,
-            {
-              className: cn45(
-                "flex w-full items-center justify-between gap-1 overflow-hidden",
-                classNames2.select
-              ),
-              children: [
-                /* @__PURE__ */ jsx76(SelectValue, { className: "[&>[slot=description]]:hidden" }),
-                /* @__PURE__ */ jsx76(ChevronDown, { className: cn45("size-4", classNames2.icon) })
-              ]
-            }
+    const classNames2 = useClassNames48({ component: "Select", variant, size });
+    return /* @__PURE__ */ jsxs34(FieldBase, { as: Select, ref, variant, size, ...props, children: [
+      /* @__PURE__ */ jsxs34(
+        Button6,
+        {
+          className: cn46(
+            "flex w-full items-center justify-between gap-1 overflow-hidden",
+            classNames2.select
           ),
-          /* @__PURE__ */ jsx76(_Popover, { children: /* @__PURE__ */ jsx76(_ListBox, { items, children: props.children }) })
-        ]
-      }
-    );
+          children: [
+            /* @__PURE__ */ jsx84(SelectValue, { className: "[&>[slot=description]]:hidden" }),
+            /* @__PURE__ */ jsx84(ChevronDown, { className: cn46("size-4", classNames2.icon) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx84(_Popover, { children: /* @__PURE__ */ jsx84(_ListBox, { items, children: props.children }) })
+    ] });
   }
 );
 _Select.Option = _ListBox.Item;
@@ -2821,10 +3253,10 @@ _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
 import {
-  forwardRef as forwardRef20
+  forwardRef as forwardRef24
 } from "react";
 import { GridList as SelectList } from "react-aria-components";
-import { cn as cn47, useClassNames as useClassNames47 } from "@marigold/system";
+import { cn as cn48, useClassNames as useClassNames49 } from "@marigold/system";
 
 // src/SelectList/Context.ts
 import { createContext as createContext8, useContext as useContext14 } from "react";
@@ -2834,26 +3266,26 @@ var SelectListContext = createContext8(
 var useSelectListContext = () => useContext14(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 import { GridListItem as SelectListItem } from "react-aria-components";
-import { cn as cn46 } from "@marigold/system";
-import { Fragment as Fragment7, jsx as jsx77, jsxs as jsxs31 } from "react/jsx-runtime";
-var _SelectListItem = forwardRef19(
+import { cn as cn47 } from "@marigold/system";
+import { Fragment as Fragment8, jsx as jsx85, jsxs as jsxs35 } from "react/jsx-runtime";
+var _SelectListItem = forwardRef23(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames2 } = useSelectListContext();
-    return /* @__PURE__ */ jsx77(
+    return /* @__PURE__ */ jsx85(
       SelectListItem,
       {
         textValue,
         ...props,
-        className: cn46(
+        className: cn47(
           "items-center group-data-[layout=grid]/list:flex-row",
           classNames2 == null ? void 0 : classNames2.option
         ),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ jsxs31(Fragment7, { children: [
-          selectionMode === "multiple" && /* @__PURE__ */ jsx77(_Checkbox, { slot: "selection" }),
+        children: ({ selectionMode }) => /* @__PURE__ */ jsxs35(Fragment8, { children: [
+          selectionMode === "multiple" && /* @__PURE__ */ jsx85(_Checkbox, { slot: "selection" }),
           children
         ] })
       }
@@ -2862,21 +3294,21 @@ var _SelectListItem = forwardRef19(
 );
 
 // src/SelectList/SelectList.tsx
-import { jsx as jsx78 } from "react/jsx-runtime";
-var _SelectList = forwardRef20(
+import { jsx as jsx86 } from "react/jsx-runtime";
+var _SelectList = forwardRef24(
   ({ onChange, ...rest }, ref) => {
-    const classNames2 = useClassNames47({ component: "ListBox" });
+    const classNames2 = useClassNames49({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange,
       ...rest
     };
-    return /* @__PURE__ */ jsx78(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx78("div", { className: classNames2.container, children: /* @__PURE__ */ jsx78(
+    return /* @__PURE__ */ jsx86(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx86("div", { className: classNames2.container, children: /* @__PURE__ */ jsx86(
       SelectList,
       {
         ...props,
         layout: "grid",
         ref,
-        className: cn47(
+        className: cn48(
           "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -2888,25 +3320,25 @@ var _SelectList = forwardRef20(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-import { cn as cn48, createVar as createVar10, width as twWidth2 } from "@marigold/system";
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { cn as cn49, createVar as createVar10, width as twWidth2 } from "@marigold/system";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ jsx79(
+}) => /* @__PURE__ */ jsx87(
   "div",
   {
     ...props,
-    className: cn48(["sticky h-[--height] overflow-auto", twWidth2[width]]),
+    className: cn49(["sticky h-[--height] overflow-auto", twWidth2[width]]),
     style: createVar10({ height }),
     children
   }
 );
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef25 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -2914,21 +3346,22 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn49,
+  cn as cn50,
   width as twWidth3,
-  useClassNames as useClassNames48
+  useClassNames as useClassNames50
 } from "@marigold/system";
-import { jsx as jsx80, jsxs as jsxs32 } from "react/jsx-runtime";
-var _Slider = forwardRef21(
+import { Fragment as Fragment9, jsx as jsx88, jsxs as jsxs36 } from "react/jsx-runtime";
+var _Slider = forwardRef25(
   ({
     thumbLabels,
     variant,
     size,
     width = "full",
     disabled,
+    label,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames48({
+    const classNames2 = useClassNames50({
       component: "Slider",
       variant,
       size
@@ -2937,10 +3370,11 @@ var _Slider = forwardRef21(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ jsxs32(
-      Slider,
+    return /* @__PURE__ */ jsxs36(
+      FieldBase,
       {
-        className: cn49(
+        as: Slider,
+        className: cn50(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -2948,21 +3382,46 @@ var _Slider = forwardRef21(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx80(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx80(SliderOutput, { className: cn49("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx80(
+          /* @__PURE__ */ jsx88(_Label, { children: props.children && props.children || label && label }),
+          /* @__PURE__ */ jsx88(SliderOutput, { className: cn50("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx88(
             SliderTrack,
             {
-              className: cn49("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx80(
-                SliderThumb,
-                {
-                  className: cn49("top-1/2 cursor-pointer", classNames2.thumb),
-                  index: i,
-                  "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
-                },
-                i
-              ))
+              className: cn50("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => /* @__PURE__ */ jsxs36(Fragment9, { children: [
+                /* @__PURE__ */ jsx88(
+                  "div",
+                  {
+                    className: cn50(
+                      "absolute top-[50%] h-2 w-full translate-y-[-50%]",
+                      classNames2.track
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx88(
+                  "div",
+                  {
+                    className: cn50(
+                      "absolute top-[50%] h-2 translate-y-[-50%]",
+                      classNames2.selectedTrack
+                    ),
+                    style: state.values.length === 1 ? { width: state.getThumbPercent(0) * 100 + "%" } : {
+                      width: state.getThumbPercent(1) * 100 - state.getThumbPercent(0) * 100 + "%",
+                      left: state.getThumbPercent(0) * 100 + "%"
+                    }
+                  }
+                ),
+                state.values.map((_, i) => /* @__PURE__ */ jsx88(
+                  SliderThumb,
+                  {
+                    className: cn50("top-1/2 cursor-pointer", classNames2.thumb),
+                    index: i,
+                    "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
+                    name: thumbLabels == null ? void 0 : thumbLabels[i]
+                  },
+                  i
+                ))
+              ] })
             }
           )
         ]
@@ -2972,12 +3431,12 @@ var _Slider = forwardRef21(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
-var Split = () => /* @__PURE__ */ jsx81("div", { role: "separator", className: "grow" });
+import { jsx as jsx89 } from "react/jsx-runtime";
+var Split = () => /* @__PURE__ */ jsx89("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-import { alignment as alignment3, cn as cn50, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { alignment as alignment3, cn as cn51, gapSpace as gapSpace7 } from "@marigold/system";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -2987,10 +3446,10 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx90(
     "div",
     {
-      className: cn50(
+      className: cn51(
         "flex flex-col",
         gapSpace7[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -3004,15 +3463,15 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef26 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn51,
+  cn as cn52,
   width as twWidth4,
-  useClassNames as useClassNames49
+  useClassNames as useClassNames51
 } from "@marigold/system";
-import { jsx as jsx83, jsxs as jsxs33 } from "react/jsx-runtime";
-var _Switch = forwardRef22(
+import { jsx as jsx91, jsxs as jsxs37 } from "react/jsx-runtime";
+var _Switch = forwardRef26(
   ({
     variant,
     size,
@@ -3023,37 +3482,37 @@ var _Switch = forwardRef22(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames49({ component: "Switch", size, variant });
+    const classNames2 = useClassNames51({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ jsxs33(
+    return /* @__PURE__ */ jsxs37(
       Switch,
       {
         ...props,
         ref,
-        className: cn51(
+        className: cn52(
           twWidth4[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ jsx83(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ jsx83("div", { className: "relative", children: /* @__PURE__ */ jsx83(
+          /* @__PURE__ */ jsx91(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ jsx91("div", { className: "relative", children: /* @__PURE__ */ jsx91(
             "div",
             {
-              className: cn51(
+              className: cn52(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ jsx83(
+              children: /* @__PURE__ */ jsx91(
                 "div",
                 {
-                  className: cn51(
+                  className: cn52(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -3072,7 +3531,7 @@ var _Switch = forwardRef22(
 );
 
 // src/Table/Table.tsx
-import { useRef as useRef10 } from "react";
+import { useRef as useRef13 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   TableBody as Body2,
@@ -3082,7 +3541,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn57, useClassNames as useClassNames51 } from "@marigold/system";
+import { cn as cn58, useClassNames as useClassNames53 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext9, useContext as useContext15 } from "react";
@@ -3091,12 +3550,12 @@ var useTableContext = () => useContext15(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var TableBody = ({ children, emptyState }) => {
   const { rowGroupProps } = useTableRowGroup();
   const { state, classNames: classNames2 } = useTableContext();
   if (state.collection.size === 0 && emptyState) {
-    return /* @__PURE__ */ jsx84("tbody", { children: /* @__PURE__ */ jsx84("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ jsx84(
+    return /* @__PURE__ */ jsx92("tbody", { children: /* @__PURE__ */ jsx92("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ jsx92(
       "td",
       {
         className: classNames2 == null ? void 0 : classNames2.cell,
@@ -3106,18 +3565,18 @@ var TableBody = ({ children, emptyState }) => {
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx84("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx92("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef7 } from "react";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { cn as cn52, useStateProps as useStateProps2 } from "@marigold/system";
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { cn as cn53, useStateProps as useStateProps2 } from "@marigold/system";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var TableCell = ({ cell, align = "left" }) => {
-  const ref = useRef4(null);
+  const ref = useRef7(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -3138,11 +3597,11 @@ var TableCell = ({ cell, align = "left" }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing2();
   const stateProps = useStateProps2({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx93(
     "td",
     {
       ref,
-      className: cn52(classNames2 == null ? void 0 : classNames2.cell),
+      className: cn53(classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps3(cellProps, focusProps),
       ...stateProps,
       align,
@@ -3152,11 +3611,11 @@ var TableCell = ({ cell, align = "left" }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { useRef as useRef5 } from "react";
+import { useRef as useRef8 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn53, useStateProps as useStateProps3 } from "@marigold/system";
+import { cn as cn54, useStateProps as useStateProps3 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3179,9 +3638,9 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef5(null);
+  const ref = useRef8(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -3196,34 +3655,33 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing3();
   const stateProps = useStateProps3({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx94(
     "td",
     {
       ref,
-      className: cn53("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: cn54("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps4(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx86(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx94(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-import { useRef as useRef6 } from "react";
+import { useRef as useRef9 } from "react";
 import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn54, width as twWidth5, useStateProps as useStateProps4 } from "@marigold/system";
-import { jsx as jsx87, jsxs as jsxs34 } from "react/jsx-runtime";
+import { cn as cn55, width as twWidth5, useStateProps as useStateProps4 } from "@marigold/system";
+import { jsx as jsx95, jsxs as jsxs38 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto",
   align = "left"
 }) => {
   var _a, _b;
-  const ref = useRef6(null);
+  const ref = useRef9(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -3238,18 +3696,18 @@ var TableColumnHeader = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs38(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: cn54("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn55("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps5(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
       children: [
         column.rendered,
-        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx87(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx87(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx87("span", { className: "invisible", children: /* @__PURE__ */ jsx87(SortDown, { className: "inline-block" }) }))
+        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx95(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx95(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx95("span", { className: "invisible", children: /* @__PURE__ */ jsx95(SortDown, { className: "inline-block" }) }))
       ]
     }
   );
@@ -3257,10 +3715,10 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx96(
     "thead",
     {
       ...rowGroupProps,
@@ -3271,29 +3729,29 @@ var TableHeader = ({ stickyHeader, children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-import { useRef as useRef7 } from "react";
+import { useRef as useRef10 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef7(null);
+  const ref = useRef10(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx89("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ jsx97("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-import { useRef as useRef8 } from "react";
+import { useRef as useRef11 } from "react";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn55, useClassNames as useClassNames50, useStateProps as useStateProps5 } from "@marigold/system";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { cn as cn56, useClassNames as useClassNames52, useStateProps as useStateProps5 } from "@marigold/system";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
-  const ref = useRef8(null);
+  const ref = useRef11(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames50({
+  const classNames2 = useClassNames52({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3318,11 +3776,11 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx98(
     "tr",
     {
       ref,
-      className: cn55(
+      className: cn56(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3336,7 +3794,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import { useRef as useRef9 } from "react";
+import { useRef as useRef12 } from "react";
 import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import {
@@ -3345,17 +3803,17 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import {
-  cn as cn56,
+  cn as cn57,
   width as twWidth6,
   useStateProps as useStateProps6
 } from "@marigold/system";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto",
   align = "left"
 }) => {
-  const ref = useRef9(null);
+  const ref = useRef12(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -3371,21 +3829,21 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx99(
     "th",
     {
       ref,
-      className: cn56(twWidth6[width], ["leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: cn57(twWidth6[width], ["leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps7(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ jsx91(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx99(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx92, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx100, jsxs as jsxs39 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
@@ -3397,7 +3855,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = useRef10(null);
+  const tableRef = useRef13(null);
   const state = useTableState({
     ...props,
     selectionMode,
@@ -3408,21 +3866,21 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames51({
+  const classNames2 = useClassNames53({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx100(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ jsxs35(
+      children: /* @__PURE__ */ jsxs39(
         "table",
         {
           ref: tableRef,
-          className: cn57(
+          className: cn58(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -3430,10 +3888,10 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx92(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx92(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ jsx100(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx100(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c, _d, _e;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx92(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx100(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
@@ -3441,7 +3899,7 @@ var Table = ({
                     align: (_c = column.props) == null ? void 0 : _c.align
                   },
                   column.key
-                ) : /* @__PURE__ */ jsx92(
+                ) : /* @__PURE__ */ jsx100(
                   TableColumnHeader,
                   {
                     width: (_d = column.props) == null ? void 0 : _d.width,
@@ -3452,12 +3910,12 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ jsxs35(TableBody, { emptyState, children: [
+            /* @__PURE__ */ jsxs39(TableBody, { emptyState, children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx92(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                (row) => row.type === "item" && /* @__PURE__ */ jsx100(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
                   var _a, _b;
                   const currentColumn = collection.columns[index];
-                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx92(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx92(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx100(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx100(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -3483,7 +3941,7 @@ Table.Row = Row;
 // src/Text/Text.tsx
 import { Text as Text2 } from "react-aria-components";
 import {
-  cn as cn58,
+  cn as cn59,
   createVar as createVar11,
   cursorStyle,
   fontWeight,
@@ -3491,10 +3949,10 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames52,
+  useClassNames as useClassNames54,
   useTheme as useTheme3
 } from "@marigold/system";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
 var _Text = ({
   variant,
   size,
@@ -3509,18 +3967,19 @@ var _Text = ({
   ...props
 }) => {
   const theme = useTheme3();
-  const classNames2 = useClassNames52({
+  const classNames2 = useClassNames54({
     component: "Text",
     variant,
     size
   });
   const Component = props.slot ? Text2 : as;
-  return /* @__PURE__ */ jsx93(
+  const elementType = props.slot ? { elementType: as } : {};
+  return /* @__PURE__ */ jsx101(
     Component,
     {
       ...props,
-      elementType: as,
-      className: cn58(
+      ...elementType,
+      className: cn59(
         "text-[--color] outline-[--outline]",
         classNames2,
         fontStyle && textStyle[fontStyle],
@@ -3543,11 +4002,11 @@ var _Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef27 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames53 } from "@marigold/system";
-import { jsx as jsx94 } from "react/jsx-runtime";
-var _TextArea = forwardRef23(
+import { useClassNames as useClassNames55 } from "@marigold/system";
+import { jsx as jsx102 } from "react/jsx-runtime";
+var _TextArea = forwardRef27(
   ({
     variant,
     size,
@@ -3558,7 +4017,7 @@ var _TextArea = forwardRef23(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames53({ component: "TextArea", variant, size });
+    const classNames2 = useClassNames55({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3566,15 +4025,15 @@ var _TextArea = forwardRef23(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx94(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx94(TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ jsx102(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx102(TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef24 } from "react";
+import { forwardRef as forwardRef28 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
-import { jsx as jsx95 } from "react/jsx-runtime";
-var _TextField = forwardRef24(
+import { jsx as jsx103 } from "react/jsx-runtime";
+var _TextField = forwardRef28(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
@@ -3583,13 +4042,13 @@ var _TextField = forwardRef24(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx95(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx95(_Input, { ref }) });
+    return /* @__PURE__ */ jsx103(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx103(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn59, createVar as createVar12, gapSpace as gapSpace8 } from "@marigold/system";
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { cn as cn60, createVar as createVar12, gapSpace as gapSpace8 } from "@marigold/system";
+import { jsx as jsx104 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3602,11 +4061,11 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx104(
     "div",
     {
       ...props,
-      className: cn59(
+      className: cn60(
         "grid",
         gapSpace8[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3620,11 +4079,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn60, useClassNames as useClassNames54 } from "@marigold/system";
+import { cn as cn61, useClassNames as useClassNames56 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3638,26 +4097,26 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ jsx97(TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ jsx105(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx98, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx106, jsxs as jsxs40 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames2 = useClassNames54({ component: "Tooltip", variant, size });
+  const classNames2 = useClassNames56({ component: "Tooltip", variant, size });
   const portal = usePortalContainer();
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs40(
     Tooltip,
     {
       ...props,
-      className: cn60("group/tooltip", classNames2.container),
+      className: cn61("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ jsx98(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx98("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx98("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ jsx106(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx106("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx106("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -3669,256 +4128,268 @@ _Tooltip.Trigger = _TooltipTrigger;
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { forwardRef as forwardRef25 } from "react";
 import { Dialog as Dialog2, Modal as Modal2, ModalOverlay as ModalOverlay2 } from "react-aria-components";
-import { SVG as SVG5, useClassNames as useClassNames55 } from "@marigold/system";
-import { Fragment as Fragment8, jsx as jsx99, jsxs as jsxs37 } from "react/jsx-runtime";
-var LoadingModes = {
-  FullSize: "fullsize",
-  Inline: "inline"
-};
-var Loader = forwardRef25((props, ref) => /* @__PURE__ */ jsxs37(
-  SVG5,
-  {
-    id: "XLoader",
-    xmlns: "http://www.w3.org/2000/svg",
-    size: 150,
-    viewBox: "0 0 150 150",
-    ...props,
-    ...ref,
-    children: [
-      /* @__PURE__ */ jsx99("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ jsx99(
-        "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__ */ jsx99(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "1.0s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx99(
-        "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__ */ jsx99(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.9s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx99(
-        "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__ */ jsx99(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.8s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx99(
-        "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__ */ jsx99(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.7s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx99(
-        "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__ */ jsx99(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.6s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx99(
-        "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__ */ jsx99(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.5s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx99(
-        "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__ */ jsx99(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.4s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx99(
-        "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__ */ jsx99(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.3s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx99(
-        "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__ */ jsx99(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.2s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx99(
-        "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__ */ jsx99(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.1s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx99(
-        "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__ */ jsx99(
-            "animate",
-            {
-              attributeName: "opacity",
-              attributeType: "XML",
-              values: "1; .01; 1; 1; 1;",
-              begin: "0.0s",
-              dur: "2.5s",
-              repeatCount: "indefinite"
-            }
-          )
-        }
-      )
-    ]
-  }
-));
-var LoaderFullSize = forwardRef25(
-  ({ children, ...rest }, ref) => {
-    const className = useClassNames55({
-      component: "Underlay",
-      variant: "modal",
-      className: "fixed left-0 top-0 z-10 flex h-[--visual-viewport-height] w-screen items-center justify-center bg-gray-950/30 cursor-progress"
-    });
-    return /* @__PURE__ */ jsx99(ModalOverlay2, { defaultOpen: true, className, isKeyboardDismissDisabled: true, children: /* @__PURE__ */ jsx99(Modal2, { children: /* @__PURE__ */ jsx99(Dialog2, { className: "text-text-inverted outline-0", children: /* @__PURE__ */ jsxs37(Stack, { space: 2, alignX: "center", children: [
-      /* @__PURE__ */ jsx99(Loader, { ...rest, ...ref, color: "text-inverted", size: 80 }),
-      children
-    ] }) }) }) });
-  }
-);
-var LoaderInline = forwardRef25(
-  ({ children, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx99("div", { className: "text-text-inverted flex h-full w-full items-center justify-center bg-gray-950/30", children: /* @__PURE__ */ jsxs37(Stack, { space: 2, alignX: "center", children: [
-      /* @__PURE__ */ jsx99(Loader, { ...rest, ...ref, color: "text-inverted", size: 80 }),
-      children
-    ] }) });
-  }
-);
-var XLoader = forwardRef25(
-  ({ mode, ...rest }, ref) => {
-    return /* @__PURE__ */ jsx99(Fragment8, { children: mode === LoadingModes.FullSize ? /* @__PURE__ */ jsx99(LoaderFullSize, { ...rest, ...ref }) : mode === LoadingModes.Inline ? /* @__PURE__ */ jsx99(LoaderInline, { ...rest, ...ref }) : /* @__PURE__ */ jsx99(Loader, { ...rest, ...ref }) });
-  }
-);
+import { useClassNames as useClassNames58 } from "@marigold/system";
+
+// src/XLoader/BaseLoader.tsx
+import { Label as Label2, ProgressBar as ProgressBar2 } from "react-aria-components";
+import { useClassNames as useClassNames57 } from "@marigold/system";
+import { jsx as jsx107, jsxs as jsxs41 } from "react/jsx-runtime";
+var BaseLoader = ({
+  variant,
+  size,
+  children,
+  "aria-label": ariaLabel,
+  ...props
+}) => {
+  const className = useClassNames57({ component: "XLoader", variant, size });
+  return /* @__PURE__ */ jsxs41(
+    ProgressBar2,
+    {
+      className: className.container,
+      isIndeterminate: true,
+      "aria-label": ariaLabel || children ? ariaLabel : "Loading...",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs41(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 150 150",
+            fill: "currentColor",
+            className: className.loader,
+            children: [
+              /* @__PURE__ */ jsx107("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+              /* @__PURE__ */ jsx107(
+                "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__ */ jsx107(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "1.0s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx107(
+                "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__ */ jsx107(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.9s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx107(
+                "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__ */ jsx107(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.8s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx107(
+                "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__ */ jsx107(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.7s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx107(
+                "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__ */ jsx107(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.6s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx107(
+                "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__ */ jsx107(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.5s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx107(
+                "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__ */ jsx107(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.4s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx107(
+                "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__ */ jsx107(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.3s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx107(
+                "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__ */ jsx107(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.2s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx107(
+                "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__ */ jsx107(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.1s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx107(
+                "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__ */ jsx107(
+                    "animate",
+                    {
+                      attributeName: "opacity",
+                      attributeType: "XML",
+                      values: "1; .01; 1; 1; 1;",
+                      begin: "0.0s",
+                      dur: "2.5s",
+                      repeatCount: "indefinite"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        children ? /* @__PURE__ */ jsx107(Label2, { className: className.label, children }) : null
+      ]
+    }
+  );
+};
+
+// src/XLoader/XLoader.tsx
+import { jsx as jsx108 } from "react/jsx-runtime";
+var LoaderFullSize = (props) => {
+  const className = useClassNames58({
+    component: "Underlay",
+    variant: "modal",
+    className: "fixed left-0 top-0 z-10 h-[--visual-viewport-height] w-screen"
+  });
+  return /* @__PURE__ */ jsx108(ModalOverlay2, { defaultOpen: true, className, isKeyboardDismissDisabled: true, children: /* @__PURE__ */ jsx108(Modal2, { className: "grid h-[--visual-viewport-height] cursor-progress place-items-center", children: /* @__PURE__ */ jsx108(Dialog2, { className: "outline-0", "aria-label": "Fullscreen Loader", children: /* @__PURE__ */ jsx108(BaseLoader, { ...props }) }) }) });
+};
+var LoaderInline = (props) => {
+  const className = useClassNames58({
+    component: "Underlay",
+    variant: "modal",
+    className: "flex size-full items-center justify-center"
+  });
+  return /* @__PURE__ */ jsx108("div", { className, children: /* @__PURE__ */ jsx108(BaseLoader, { ...props }) });
+};
+var XLoader = ({ mode, variant, ...props }) => mode === "fullsize" ? /* @__PURE__ */ jsx108(LoaderFullSize, { variant: variant != null ? variant : "inverted", ...props }) : mode === "inline" ? /* @__PURE__ */ jsx108(LoaderInline, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ jsx108(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames56 } from "@marigold/system";
+import { useClassNames as useClassNames59 } from "@marigold/system";
 
 // src/Tabs/Context.ts
 import { createContext as createContext10, useContext as useContext16 } from "react";
@@ -3927,15 +4398,15 @@ var useTabContext = () => useContext16(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn61 } from "@marigold/system";
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { cn as cn62 } from "@marigold/system";
+import { jsx as jsx109 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsx109(
     Tab,
     {
       ...props,
-      className: cn61(
+      className: cn62(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3946,15 +4417,15 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn62, gapSpace as gapSpace9 } from "@marigold/system";
-import { jsx as jsx101 } from "react/jsx-runtime";
+import { cn as cn63, gapSpace as gapSpace9 } from "@marigold/system";
+import { jsx as jsx110 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx110(
     TabList,
     {
       ...props,
-      className: cn62("flex", gapSpace9[space], classNames2.tabsList),
+      className: cn63("flex", gapSpace9[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -3962,25 +4433,25 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 import { TabPanel } from "react-aria-components";
-import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx111 } from "react/jsx-runtime";
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx102(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ jsx111(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { jsx as jsx112 } from "react/jsx-runtime";
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = useClassNames56({
+  const classNames2 = useClassNames59({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ jsx103(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx103(Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ jsx112(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx112(Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -4034,6 +4505,7 @@ export {
   Multiselect,
   _NumberField as NumberField,
   OverlayContainerProvider,
+  _Pagination as Pagination,
   _Popover as Popover,
   _Radio as Radio,
   _RadioGroup as RadioGroup,