@marigold/components 11.2.0 → 11.2.1

package/dist/index.mjs

@@ -701,19 +701,136 @@ _Autocomplete.Option = _ListBox.Item;
 _Autocomplete.Section = _ListBox.Section;
 
 // src/ComboBox/ComboBox.tsx
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef12 } from "react";
 import { ComboBox as ComboBox2 } from "react-aria-components";
 import { useClassNames as useClassNames11 } from "@marigold/system";
 
-// src/Button/Button.tsx
-import { forwardRef as forwardRef8 } from "react";
+// src/IconButton/IconButton.tsx
 import { Button as Button3 } from "react-aria-components";
 import { cn as cn14, useClassNames as useClassNames10 } from "@marigold/system";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var IconButton = ({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}) => {
+  const classNames2 = useClassNames10({
+    component: "IconButton",
+    variant,
+    size
+  });
+  return /* @__PURE__ */ jsx21(
+    Button3,
+    {
+      className: cn14("shrink-0 cursor-pointer outline-0", classNames2, className),
+      ...props,
+      children
+    }
+  );
+};
+
+// src/icons/ChevronRight.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { SVG as SVG3 } from "@marigold/system";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var ChevronRight = forwardRef8(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx22(SVG3, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx22("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 forwardRef9 } from "react";
+import { SVG as SVG4 } from "@marigold/system";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var ChevronLeft = forwardRef9(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SVG4, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx23("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 forwardRef10 } from "react";
+import { SVG as SVG5 } from "@marigold/system";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var SortDown = forwardRef10((props, ref) => /* @__PURE__ */ jsx24(SVG5, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx24("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 forwardRef11 } from "react";
+import { SVG as SVG6 } from "@marigold/system";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var SortUp = forwardRef11((props, ref) => /* @__PURE__ */ jsx25(SVG6, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx25("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/ComboBox/ComboBox.tsx
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+var _ComboBox = forwardRef12(
+  ({
+    variant,
+    size,
+    required,
+    disabled,
+    readOnly,
+    error,
+    defaultValue,
+    value,
+    onChange,
+    children,
+    ...rest
+  }, ref) => {
+    const props = {
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isRequired: required,
+      isInvalid: error,
+      defaultInputValue: defaultValue,
+      inputValue: value,
+      onInputChange: onChange,
+      ...rest
+    };
+    const classNames2 = useClassNames11({ component: "ComboBox", variant, size });
+    return /* @__PURE__ */ jsxs10(FieldBase, { as: ComboBox2, ref, ...props, children: [
+      /* @__PURE__ */ jsx26(
+        _Input,
+        {
+          action: /* @__PURE__ */ jsx26(IconButton, { className: classNames2, children: /* @__PURE__ */ jsx26(ChevronDown, { className: "size-4" }) })
+        }
+      ),
+      /* @__PURE__ */ jsx26(_Popover, { children: /* @__PURE__ */ jsx26(_ListBox, { children }) })
+    ] });
+  }
+);
+_ComboBox.Option = _ListBox.Item;
+_ComboBox.Section = _ListBox.Section;
+
+// src/Badge/Badge.tsx
+import { useClassNames as useClassNames12 } from "@marigold/system";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var Badge = ({ variant, size, children, ...props }) => {
+  const classNames2 = useClassNames12({ component: "Badge", variant, size });
+  return /* @__PURE__ */ jsx27("div", { className: classNames2, ...props, children });
+};
+
+// src/Breakout/Breakout.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+var Breakout = ({ children }) => {
+  return /* @__PURE__ */ jsx28("div", { className: "![grid-column:1/-1]", children });
+};
+
+// src/Body/Body.tsx
+import { useClassNames as useClassNames13 } from "@marigold/system";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var Body = ({ children, variant, size, ...props }) => {
+  const classNames2 = useClassNames13({ component: "Body", variant, size });
+  return /* @__PURE__ */ jsx29("section", { ...props, className: classNames2, children });
+};
+
+// src/Button/Button.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { Button as Button4 } from "react-aria-components";
+import { cn as cn16, useClassNames as useClassNames15 } from "@marigold/system";
 
 // src/ProgressCycle/ProgressCycle.tsx
 import { ProgressBar } from "react-aria-components";
-import { SVG as SVG3 } from "@marigold/system";
-import { jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
+import { SVG as SVG7, cn as cn15, useClassNames as useClassNames14 } from "@marigold/system";
+import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
 var ProgressCycle = ({
   size = "16",
   ...props
@@ -725,15 +842,16 @@ var ProgressCycle = ({
     strokeWidth = 4;
   }
   const radius = `calc(50% - ${strokeWidth / 2}px)`;
-  return /* @__PURE__ */ jsx21(ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ jsxs10(
-    SVG3,
+  const classNames2 = useClassNames14({ component: "ProgressCycle" });
+  return /* @__PURE__ */ jsx30(ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ jsxs11(
+    SVG7,
     {
       className: "animate-rotate-spinner origin-center fill-none",
       size,
       "aria-hidden": "true",
       role: "img",
       children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx30(
           "circle",
           {
             cx: "50%",
@@ -743,7 +861,7 @@ var ProgressCycle = ({
             className: "stroke-transparent"
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx30(
           "circle",
           {
             cx: "50%",
@@ -754,7 +872,10 @@ var ProgressCycle = ({
             strokeDasharray: "100 200",
             strokeDashoffset: "0",
             strokeLinecap: "round",
-            className: "animate-progress-cycle origin-center -rotate-90 stroke-gray-800"
+            className: cn15(
+              "animate-progress-cycle origin-center -rotate-90",
+              classNames2
+            )
           }
         )
       ]
@@ -763,8 +884,8 @@ var ProgressCycle = ({
 };
 
 // src/Button/Button.tsx
-import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
-var _Button = forwardRef8(
+import { Fragment as Fragment2, jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+var _Button = forwardRef13(
   ({
     children,
     variant,
@@ -775,18 +896,18 @@ var _Button = forwardRef8(
     fullWidth,
     ...props
   }, ref) => {
-    const classNames2 = useClassNames10({
+    const classNames2 = useClassNames15({
       component: "Button",
       variant,
       size,
       className
     });
-    return /* @__PURE__ */ jsx22(
-      Button3,
+    return /* @__PURE__ */ jsx31(
+      Button4,
       {
         ...props,
         ref,
-        className: cn14(
+        className: cn16(
           "inline-flex items-center justify-center gap-[0.5ch]",
           classNames2,
           fullWidth ? "w-full" : void 0,
@@ -794,109 +915,18 @@ var _Button = forwardRef8(
         ),
         isPending: loading,
         isDisabled: disabled,
-        children: loading ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
-          /* @__PURE__ */ jsx22("span", { className: "absolute", children: /* @__PURE__ */ jsx22(ProgressCycle, {}) }),
-          /* @__PURE__ */ jsx22("span", { className: "invisible flex gap-[inherit]", children })
+        children: loading ? /* @__PURE__ */ jsxs12(Fragment2, { children: [
+          /* @__PURE__ */ jsx31("span", { className: "absolute", children: /* @__PURE__ */ jsx31(ProgressCycle, {}) }),
+          /* @__PURE__ */ jsx31("span", { className: "invisible flex gap-[inherit]", children })
         ] }) : children
       }
     );
   }
 );
 
-// src/icons/ChevronRight.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { SVG as SVG4 } from "@marigold/system";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var ChevronRight = forwardRef9(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SVG4, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx23("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 forwardRef10 } from "react";
-import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var ChevronLeft = forwardRef10(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx24(SVG5, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx24("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 forwardRef11 } from "react";
-import { SVG as SVG6 } from "@marigold/system";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var SortDown = forwardRef11((props, ref) => /* @__PURE__ */ jsx25(SVG6, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx25("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 forwardRef12 } from "react";
-import { SVG as SVG7 } from "@marigold/system";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var SortUp = forwardRef12((props, ref) => /* @__PURE__ */ jsx26(SVG7, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx26("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/ComboBox/ComboBox.tsx
-import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
-var _ComboBox = forwardRef13(
-  ({
-    variant,
-    size,
-    required,
-    disabled,
-    readOnly,
-    error,
-    defaultValue,
-    value,
-    onChange,
-    children,
-    ...rest
-  }, ref) => {
-    const props = {
-      isDisabled: disabled,
-      isReadOnly: readOnly,
-      isRequired: required,
-      isInvalid: error,
-      defaultInputValue: defaultValue,
-      inputValue: value,
-      onInputChange: onChange,
-      ...rest
-    };
-    const classNames2 = useClassNames11({ component: "ComboBox", variant, size });
-    return /* @__PURE__ */ jsxs12(FieldBase, { as: ComboBox2, ref, ...props, children: [
-      /* @__PURE__ */ jsx27(
-        _Input,
-        {
-          action: /* @__PURE__ */ jsx27(_Button, { className: classNames2, children: /* @__PURE__ */ jsx27(ChevronDown, { className: "size-4" }) })
-        }
-      ),
-      /* @__PURE__ */ jsx27(_Popover, { children: /* @__PURE__ */ jsx27(_ListBox, { children }) })
-    ] });
-  }
-);
-_ComboBox.Option = _ListBox.Item;
-_ComboBox.Section = _ListBox.Section;
-
-// src/Badge/Badge.tsx
-import { useClassNames as useClassNames12 } from "@marigold/system";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var Badge = ({ variant, size, children, ...props }) => {
-  const classNames2 = useClassNames12({ component: "Badge", variant, size });
-  return /* @__PURE__ */ jsx28("div", { className: classNames2, ...props, children });
-};
-
-// src/Breakout/Breakout.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
-var Breakout = ({ children }) => {
-  return /* @__PURE__ */ jsx29("div", { className: "![grid-column:1/-1]", children });
-};
-
-// src/Body/Body.tsx
-import { useClassNames as useClassNames13 } from "@marigold/system";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var Body = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames13({ component: "Body", variant, size });
-  return /* @__PURE__ */ jsx30("section", { ...props, className: classNames2, children });
-};
-
 // src/Card/Card.tsx
 import {
-  cn as cn15,
+  cn as cn17,
   gapSpace as gapSpace2,
   paddingBottom,
   paddingLeft,
@@ -905,9 +935,9 @@ import {
   paddingSpaceX,
   paddingSpaceY,
   paddingTop,
-  useClassNames as useClassNames14
+  useClassNames as useClassNames16
 } from "@marigold/system";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var Card = ({
   children,
   variant,
@@ -922,12 +952,12 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames2 = useClassNames14({ component: "Card", variant, size });
-  return /* @__PURE__ */ jsx31(
+  const classNames2 = useClassNames16({ component: "Card", variant, size });
+  return /* @__PURE__ */ jsx32(
     "div",
     {
       ...props,
-      className: cn15(
+      className: cn17(
         "flex flex-col",
         classNames2,
         gapSpace2[space],
@@ -945,19 +975,19 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-import { cn as cn16, createVar as createVar4, gapSpace as gapSpace3 } from "@marigold/system";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { cn as cn18, createVar as createVar4, gapSpace as gapSpace3 } from "@marigold/system";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var Center = ({
   maxWidth = "100%",
   space = 0,
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       ...props,
-      className: cn16(
+      className: cn18(
         "ms-[auto] me-[auto] box-content flex flex-col items-center justify-center",
         gapSpace3[space],
         "max-w-(--maxWidth)"
@@ -971,22 +1001,22 @@ var Center = ({
 // src/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef14 } from "react";
 import { Checkbox } from "react-aria-components";
-import { cn as cn18, useClassNames as useClassNames17 } from "@marigold/system";
+import { cn as cn20, useClassNames as useClassNames19 } from "@marigold/system";
 
 // src/Checkbox/CheckBoxField.tsx
-import { createVar as createVar5, useClassNames as useClassNames15 } from "@marigold/system";
-import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
+import { createVar as createVar5, useClassNames as useClassNames17 } from "@marigold/system";
+import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
 var CheckboxField = ({ children, labelWidth }) => {
-  const classNames2 = useClassNames15({ component: "Field" });
+  const classNames2 = useClassNames17({ component: "Field" });
   return /* @__PURE__ */ jsxs13("div", { className: classNames2, children: [
-    /* @__PURE__ */ jsx33("div", { className: "w-(--labelWidth)", style: createVar5({ labelWidth }) }),
+    /* @__PURE__ */ jsx34("div", { className: "w-(--labelWidth)", style: createVar5({ labelWidth }) }),
     children
   ] });
 };
 
 // src/Checkbox/CheckboxGroup.tsx
 import { CheckboxGroup } from "react-aria-components";
-import { cn as cn17, useClassNames as useClassNames16 } from "@marigold/system";
+import { cn as cn19, useClassNames as useClassNames18 } from "@marigold/system";
 
 // src/Checkbox/Context.tsx
 import { createContext as createContext5, useContext as useContext7 } from "react";
@@ -994,7 +1024,7 @@ var CheckboxGroupContext = createContext5(null);
 var useCheckboxGroupContext = () => useContext7(CheckboxGroupContext);
 
 // src/Checkbox/CheckboxGroup.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var _CheckboxGroup = ({
   children,
   variant,
@@ -1007,7 +1037,7 @@ var _CheckboxGroup = ({
   orientation = "vertical",
   ...rest
 }) => {
-  const classNames2 = useClassNames16({
+  const classNames2 = useClassNames18({
     component: "Checkbox",
     variant,
     size,
@@ -1021,24 +1051,25 @@ var _CheckboxGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx34(FieldBase, { as: CheckboxGroup, width, ...props, children: /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(FieldBase, { as: CheckboxGroup, width, ...props, children: /* @__PURE__ */ jsx35(
     "div",
     {
       role: "presentation",
       "data-orientation": orientation,
-      className: cn17(
+      "data-group": "checkbox",
+      className: cn19(
         classNames2.group,
-        "flex items-start",
+        "group/checkboxgroup flex items-start",
         orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
       ),
-      children: /* @__PURE__ */ jsx34(CheckboxGroupContext.Provider, { value: { width, variant, size }, children })
+      children: /* @__PURE__ */ jsx35(CheckboxGroupContext.Provider, { value: { width, variant, size }, children })
     }
   ) });
 };
 
 // src/Checkbox/Checkbox.tsx
-import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
-var CheckMark = () => /* @__PURE__ */ jsx35("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx35(
+import { Fragment as Fragment3, jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
+var CheckMark = () => /* @__PURE__ */ jsx36("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx36(
   "path",
   {
     fill: "currentColor",
@@ -1046,7 +1077,7 @@ var CheckMark = () => /* @__PURE__ */ jsx35("svg", { width: "12px", height: "10p
     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__ */ jsx35("svg", { width: "12px", height: "3px", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx35(
+var IndeterminateMark = () => /* @__PURE__ */ jsx36("svg", { width: "12px", height: "3px", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx36(
   "path",
   {
     fill: "currentColor",
@@ -1055,11 +1086,11 @@ var IndeterminateMark = () => /* @__PURE__ */ jsx35("svg", { width: "12px", heig
   }
 ) });
 var Icon2 = ({ className, checked, indeterminate, ...props }) => {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       "aria-hidden": "true",
-      className: cn18(
+      className: cn20(
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
@@ -1067,7 +1098,7 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
         className
       ),
       ...props,
-      children: indeterminate ? /* @__PURE__ */ jsx35(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx35(CheckMark, {}) : null
+      children: indeterminate ? /* @__PURE__ */ jsx36(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx36(CheckMark, {}) : null
     }
   );
 };
@@ -1097,23 +1128,23 @@ var _Checkbox = forwardRef14(
     };
     const { labelWidth } = useFieldGroupContext();
     const group = useCheckboxGroupContext();
-    const classNames2 = useClassNames17({
+    const classNames2 = useClassNames19({
       component: "Checkbox",
       variant: variant || (group == null ? void 0 : group.variant),
       size: size || (group == null ? void 0 : group.size)
     });
-    const component = /* @__PURE__ */ jsx35(
+    const component = /* @__PURE__ */ jsx36(
       Checkbox,
       {
         ref,
-        className: cn18(
+        className: cn20(
           "group/checkbox flex items-center gap-[0.5rem]",
           "cursor-pointer data-disabled:cursor-not-allowed",
           classNames2.container
         ),
         ...props,
         children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs14(Fragment3, { children: [
-          /* @__PURE__ */ jsx35(
+          /* @__PURE__ */ jsx36(
             Icon2,
             {
               checked: isSelected,
@@ -1121,19 +1152,19 @@ var _Checkbox = forwardRef14(
               className: classNames2.checkbox
             }
           ),
-          children ? /* @__PURE__ */ jsx35("div", { className: classNames2.label, children }) : null
+          children ? /* @__PURE__ */ jsx36("div", { className: classNames2.label, children }) : null
         ] })
       }
     );
-    return !group && !!labelWidth ? /* @__PURE__ */ jsx35(CheckboxField, { labelWidth, children: component }) : component;
+    return !group && !!labelWidth ? /* @__PURE__ */ jsx36(CheckboxField, { labelWidth, children: component }) : component;
   }
 );
 _Checkbox.Group = _CheckboxGroup;
 
 // src/Columns/Columns.tsx
 import { Children as Children2 } from "react";
-import { cn as cn19, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { cn as cn21, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
   columns,
@@ -1149,19 +1180,19 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "div",
     {
-      className: cn19(
+      className: cn21(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
         gapSpace4[space]
       ),
       ...props,
-      children: Children2.map(children, (child, idx) => /* @__PURE__ */ jsx36(
+      children: Children2.map(children, (child, idx) => /* @__PURE__ */ jsx37(
         "div",
         {
-          className: cn19(
+          className: cn21(
             columns[idx] === "fit" ? "flex h-fit w-fit" : "flex-(--columnSize)",
             "basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
@@ -1177,8 +1208,8 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-import { cn as cn20, createVar as createVar7, gapSpace as gapSpace5, placeItems } from "@marigold/system";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { cn as cn22, createVar as createVar7, gapSpace as gapSpace5, placeItems } from "@marigold/system";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var containerTextLength = {
   short: "40ch",
   default: "60ch",
@@ -1206,11 +1237,11 @@ var Container = ({
   space = 0,
   children,
   ...props
-}) => /* @__PURE__ */ jsx37(
+}) => /* @__PURE__ */ jsx38(
   "div",
   {
     ...props,
-    className: cn20(
+    className: cn22(
       "grid",
       placeItems[alignItems],
       gridColsAlign[align],
@@ -1228,53 +1259,53 @@ var Container = ({
 // src/Dialog/Dialog.tsx
 import { useContext as useContext8 } from "react";
 import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
-import { cn as cn25, useClassNames as useClassNames23 } from "@marigold/system";
+import { cn as cn27, useClassNames as useClassNames25 } from "@marigold/system";
 
 // src/Dialog/DialogActions.tsx
-import { cn as cn21, useClassNames as useClassNames18 } from "@marigold/system";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { cn as cn23, useClassNames as useClassNames20 } from "@marigold/system";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var DialogActions = ({ variant, size, children }) => {
-  const classNames2 = useClassNames18({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ jsx38("div", { className: cn21("[grid-area:actions]", classNames2.actions), children });
+  const classNames2 = useClassNames20({ component: "Dialog", variant, size });
+  return /* @__PURE__ */ jsx39("div", { className: cn23("[grid-area:actions]", classNames2.actions), children });
 };
 
 // src/Dialog/DialogContent.tsx
-import { cn as cn22, useClassNames as useClassNames19 } from "@marigold/system";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { cn as cn24, useClassNames as useClassNames21 } from "@marigold/system";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var DialogContent = ({
   variant,
   size,
   children
 }) => {
-  const classNames2 = useClassNames19({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ jsx39("div", { className: cn22("[grid-area:content]", classNames2.content), children });
+  const classNames2 = useClassNames21({ component: "Dialog", variant, size });
+  return /* @__PURE__ */ jsx40("div", { className: cn24("[grid-area:content]", classNames2.content), children });
 };
 
 // src/Dialog/DialogTitle.tsx
-import { cn as cn24, useClassNames as useClassNames22 } from "@marigold/system";
+import { cn as cn26, useClassNames as useClassNames24 } 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 jsx40 } from "react/jsx-runtime";
+import { useClassNames as useClassNames22 } from "@marigold/system";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var _Header = ({ variant, size, ...props }) => {
-  const classNames2 = useClassNames20({
+  const classNames2 = useClassNames22({
     component: "Header",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx40(Header2, { className: classNames2, ...props, children: props.children });
+  return /* @__PURE__ */ jsx41(Header2, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Headline/Headline.tsx
 import { Heading as Heading2 } from "react-aria-components";
 import {
-  cn as cn23,
+  cn as cn25,
   ensureCssVar,
   textAlign,
-  useClassNames as useClassNames21
+  useClassNames as useClassNames23
 } from "@marigold/system";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var _Headline = ({
   variant,
   size,
@@ -1284,17 +1315,17 @@ var _Headline = ({
   level = "1",
   ...props
 }) => {
-  const classNames2 = useClassNames21({
+  const classNames2 = useClassNames23({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     Heading2,
     {
       level: Number(level),
       ...props,
-      className: cn23(
+      className: cn25(
         classNames2,
         "max-w-(--maxHeadlineWidth)",
         // possibly set by a <Container>
@@ -1307,15 +1338,15 @@ var _Headline = ({
 };
 
 // src/Dialog/DialogTitle.tsx
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 var DialogTitle = ({
   level = "2",
   variant,
   size,
   children
 }) => {
-  const classNames2 = useClassNames22({ component: "Dialog", variant, size });
-  return /* @__PURE__ */ jsx42(_Header, { className: cn24("[grid-area:title]", classNames2.header), children: /* @__PURE__ */ jsx42(_Headline, { slot: "title", level, children }) });
+  const classNames2 = useClassNames24({ component: "Dialog", variant, size });
+  return /* @__PURE__ */ jsx43(_Header, { className: cn26("[grid-area:title]", classNames2.header), children: /* @__PURE__ */ jsx43(_Headline, { slot: "title", level, children }) });
 };
 
 // src/Dialog/DialogTrigger.tsx
@@ -1325,7 +1356,7 @@ import { DialogTrigger } from "react-aria-components";
 // src/Overlay/Modal.tsx
 import { forwardRef as forwardRef15 } from "react";
 import { Modal } from "react-aria-components";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var _Modal = forwardRef15(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
     isOpen: open,
@@ -1333,14 +1364,14 @@ var _Modal = forwardRef15(({ open, dismissable, keyboardDismissable, ...rest },
     isKeyboardDismissDisabled: keyboardDismissable,
     ...rest
   };
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     Underlay,
     {
       dismissable,
       keyboardDismissable,
       open,
       variant: "modal",
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx44(
         Modal,
         {
           ref,
@@ -1354,7 +1385,7 @@ var _Modal = forwardRef15(({ open, dismissable, keyboardDismissable, ...rest },
 });
 
 // src/Dialog/DialogTrigger.tsx
-import { jsx as jsx44, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs15 } from "react/jsx-runtime";
 var _DialogTrigger = ({
   open,
   dismissable,
@@ -1371,10 +1402,10 @@ var _DialogTrigger = ({
   const hasDialogTrigger = dialogTrigger.type !== _Dialog;
   const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
   if (isNonModal)
-    return /* @__PURE__ */ jsx44(DialogTrigger, { ...props, children: props.children });
+    return /* @__PURE__ */ jsx45(DialogTrigger, { ...props, children: props.children });
   return /* @__PURE__ */ jsxs15(DialogTrigger, { ...props, children: [
     hasDialogTrigger && dialogTrigger,
-    /* @__PURE__ */ jsx44(
+    /* @__PURE__ */ jsx45(
       _Modal,
       {
         dismissable,
@@ -1386,19 +1417,19 @@ var _DialogTrigger = ({
 };
 
 // src/Dialog/Dialog.tsx
-import { jsx as jsx45, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs16 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
   const ctx = useContext8(OverlayTriggerStateContext);
-  return /* @__PURE__ */ jsx45("div", { className: "absolute top-4 right-4 ml-4", children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46("div", { className: "absolute top-4 right-4 ml-4", children: /* @__PURE__ */ jsx46(
     "button",
     {
-      className: cn25(
+      className: cn27(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
       onClick: ctx == null ? void 0 : ctx.close,
       slot: "dismiss-button",
-      children: /* @__PURE__ */ jsx45("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx45(
+      children: /* @__PURE__ */ jsx46("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx46(
         "path",
         {
           fillRule: "evenodd",
@@ -1417,7 +1448,7 @@ var _Dialog = ({
   ...props
 }) => {
   var _a;
-  const classNames2 = useClassNames23({ component: "Dialog", variant, size });
+  const classNames2 = useClassNames25({ component: "Dialog", variant, size });
   const state = useContext8(OverlayTriggerStateContext);
   const children = typeof props.children === "function" ? props.children({
     close: (_a = state == null ? void 0 : state.close) != null ? _a : () => {
@@ -1427,13 +1458,13 @@ var _Dialog = ({
     Dialog,
     {
       ...props,
-      className: cn25(
+      className: cn27(
         "relative outline-hidden [&>*:not(:last-child)]:mb-4",
         "grid [grid-template-areas:'title'_'content'_'actions']",
         classNames2.container
       ),
       children: [
-        closeButton && /* @__PURE__ */ jsx45(CloseButton, { className: classNames2.closeButton }),
+        closeButton && /* @__PURE__ */ jsx46(CloseButton, { className: classNames2.closeButton }),
         children
       ]
     }
@@ -1446,33 +1477,33 @@ _Dialog.Actions = DialogActions;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { cn as cn26, useClassNames as useClassNames24 } from "@marigold/system";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { cn as cn28, useClassNames as useClassNames26 } from "@marigold/system";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
-  const classNames2 = useClassNames24({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx46(Separator, { className: cn26("border-none", classNames2), ...props });
+  const classNames2 = useClassNames26({ component: "Divider", variant });
+  return /* @__PURE__ */ jsx47(Separator, { className: cn28("border-none", classNames2), ...props });
 };
 
 // src/Footer/Footer.tsx
-import { useClassNames as useClassNames25 } from "@marigold/system";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { useClassNames as useClassNames27 } from "@marigold/system";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames25({ component: "Footer", variant, size });
-  return /* @__PURE__ */ jsx47("footer", { ...props, className: classNames2, children });
+  const classNames2 = useClassNames27({ component: "Footer", variant, size });
+  return /* @__PURE__ */ jsx48("footer", { ...props, className: classNames2, children });
 };
 
 // src/Form/Form.tsx
 import { Form } from "react-aria-components";
 
 // src/Grid/Grid.tsx
-import { cn as cn27, gapSpace as gapSpace6, height as twHeight } from "@marigold/system";
+import { cn as cn29, gapSpace as gapSpace6, height as twHeight } from "@marigold/system";
 
 // src/Grid/GridArea.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
-var GridArea = ({ name, children }) => /* @__PURE__ */ jsx48("div", { style: { gridArea: name }, children });
+import { jsx as jsx49 } from "react/jsx-runtime";
+var GridArea = ({ name, children }) => /* @__PURE__ */ jsx49("div", { style: { gridArea: name }, children });
 
 // src/Grid/Grid.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } 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 = ({
@@ -1484,10 +1515,10 @@ var Grid = ({
   space = 0,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx50(
     "div",
     {
-      className: cn27("grid", gapSpace6[space], twHeight[height]),
+      className: cn29("grid", gapSpace6[space], twHeight[height]),
       style: {
         gridTemplateAreas: parseGridAreas(areas),
         gridTemplateColumns: parseTemplateValue(columns),
@@ -1502,12 +1533,12 @@ Grid.Area = GridArea;
 
 // src/Image/Image.tsx
 import {
-  cn as cn28,
+  cn as cn30,
   objectFit,
   objectPosition,
-  useClassNames as useClassNames26
+  useClassNames as useClassNames28
 } from "@marigold/system";
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var Image = ({
   variant,
   size,
@@ -1515,13 +1546,13 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = useClassNames26({ component: "Image", variant, size });
-  return /* @__PURE__ */ jsx50(
+  const classNames2 = useClassNames28({ component: "Image", variant, size });
+  return /* @__PURE__ */ jsx51(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: cn28(
+      className: cn30(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1532,8 +1563,8 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import { alignment, cn as cn29, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { alignment, cn as cn31, gapSpace as gapSpace7 } from "@marigold/system";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
   alignX,
@@ -1542,11 +1573,11 @@ var Inline = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "div",
     {
       ...props,
-      className: cn29(
+      className: cn31(
         "flex flex-wrap",
         gapSpace7[space],
         alignX && ((_b = (_a = alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
@@ -1563,14 +1594,14 @@ import { DateField } from "react-aria-components";
 
 // src/DateField/DateInput.tsx
 import { DateInput, Group } from "react-aria-components";
-import { useClassNames as useClassNames27 } from "@marigold/system";
+import { useClassNames as useClassNames29 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
-import { cn as cn30 } from "@marigold/system";
-import { Fragment as Fragment4, jsx as jsx52, jsxs as jsxs17 } from "react/jsx-runtime";
+import { cn as cn32 } from "@marigold/system";
+import { Fragment as Fragment4, jsx as jsx53, jsxs as jsxs17 } from "react/jsx-runtime";
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(
     DateSegment,
     {
       ...props,
@@ -1579,30 +1610,30 @@ var _DateSegment = ({ segment, ...props }) => {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
       children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           "span",
           {
             "aria-hidden": "true",
-            className: cn30(
+            className: cn32(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ jsx52("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
+        /* @__PURE__ */ jsx53("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-import { jsx as jsx53, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs18 } from "react/jsx-runtime";
 var _DateInput = ({ variant, size, action, ...props }) => {
-  const classNames2 = useClassNames27({ component: "DateField", variant, size });
+  const classNames2 = useClassNames29({ component: "DateField", variant, size });
   return /* @__PURE__ */ jsxs18(Group, { className: classNames2.field, children: [
-    /* @__PURE__ */ jsx53(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx53(_DateSegment, { className: classNames2.segment, segment }) }),
-    action ? action : /* @__PURE__ */ jsx53("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx54(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx54(_DateSegment, { className: classNames2.segment, segment }) }),
+    action ? action : /* @__PURE__ */ jsx54("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx54(
       "svg",
       {
         "data-testid": "action",
@@ -1610,14 +1641,14 @@ var _DateInput = ({ variant, size, action, ...props }) => {
         viewBox: "0 0 24 24",
         width: 24,
         height: 24,
-        children: /* @__PURE__ */ jsx53("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__ */ jsx54("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 jsx54 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var _DateField = forwardRef16(
   ({
     variant,
@@ -1636,7 +1667,7 @@ var _DateField = forwardRef16(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx54(
+    return /* @__PURE__ */ jsx55(
       FieldBase,
       {
         as: DateField,
@@ -1644,7 +1675,7 @@ var _DateField = forwardRef16(
         size,
         ref,
         ...props,
-        children: /* @__PURE__ */ jsx54(_DateInput, { action })
+        children: /* @__PURE__ */ jsx55(_DateInput, { action })
       }
     );
   }
@@ -1653,7 +1684,7 @@ var _DateField = forwardRef16(
 // src/Calendar/Calendar.tsx
 import { useState } from "react";
 import { Calendar } from "react-aria-components";
-import { cn as cn34, useClassNames as useClassNames32 } from "@marigold/system";
+import { cn as cn36, useClassNames as useClassNames34 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import {
@@ -1661,7 +1692,7 @@ import {
   CalendarGrid,
   CalendarGridBody
 } from "react-aria-components";
-import { cn as cn31, useClassNames as useClassNames29 } from "@marigold/system";
+import { cn as cn33, useClassNames as useClassNames31 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
@@ -1669,8 +1700,8 @@ import { useContext as useContext9, useMemo } from "react";
 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 jsx55 } from "react/jsx-runtime";
+import { useClassNames as useClassNames30 } from "@marigold/system";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
   const state = useContext9(CalendarStateContext);
   const { headerProps } = useCalendarGrid(props, state);
@@ -1687,21 +1718,21 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames2 = useClassNames28({ component: "Calendar" });
-  return /* @__PURE__ */ jsx55("thead", { ...headerProps, children: /* @__PURE__ */ jsx55("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx55("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
+  const classNames2 = useClassNames30({ component: "Calendar" });
+  return /* @__PURE__ */ jsx56("thead", { ...headerProps, children: /* @__PURE__ */ jsx56("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx56("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-import { jsx as jsx56, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs19 } from "react/jsx-runtime";
 var _CalendarGrid = () => {
-  const classNames2 = useClassNames29({ component: "Calendar" });
+  const classNames2 = useClassNames31({ component: "Calendar" });
   return /* @__PURE__ */ jsxs19(CalendarGrid, { className: classNames2.calendarGrid, children: [
-    /* @__PURE__ */ jsx56(CalendarGridHeader, {}),
-    /* @__PURE__ */ jsx56(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx56(
+    /* @__PURE__ */ jsx57(CalendarGridHeader, {}),
+    /* @__PURE__ */ jsx57(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx57(
       CalendarCell,
       {
         date,
-        className: cn31(
+        className: cn33(
           "flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
           classNames2.calendarCell
         )
@@ -1713,7 +1744,7 @@ var _CalendarGrid = () => {
 // src/Calendar/CalendarListBox.tsx
 import { useContext as useContext10 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
-import { cn as cn32, useClassNames as useClassNames30 } from "@marigold/system";
+import { cn as cn34, useClassNames as useClassNames32 } from "@marigold/system";
 
 // src/Calendar/useFormattedMonths.tsx
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
@@ -1732,7 +1763,7 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-import { jsx as jsx57, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs20 } from "react/jsx-runtime";
 function CalendarListBox({
   type,
   isDisabled,
@@ -1741,57 +1772,51 @@ function CalendarListBox({
   const state = useContext10(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = useClassNames30({ component: "Select" });
+  const { select: selectClassNames } = useClassNames32({ component: "Select" });
   return /* @__PURE__ */ jsxs20(
     "button",
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: cn32(buttonStyles, selectClassNames),
+      className: cn34(buttonStyles, selectClassNames),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ jsx57(ChevronDown, {})
+        /* @__PURE__ */ jsx58(ChevronDown, {})
       ]
     }
   );
 }
 
 // src/Calendar/MonthControls.tsx
-import { Button as Button4 } from "react-aria-components";
-import { cn as cn33, useClassNames as useClassNames31 } from "@marigold/system";
-import { jsx as jsx58, jsxs as jsxs21 } from "react/jsx-runtime";
+import { cn as cn35, useClassNames as useClassNames33 } from "@marigold/system";
+import { jsx as jsx59, jsxs as jsxs21 } from "react/jsx-runtime";
 function MonthControls() {
-  const classNames2 = useClassNames31({ component: "Calendar" });
-  const buttonClassNames = useClassNames31({ component: "Button" });
+  const classNames2 = useClassNames33({ component: "Calendar" });
   return /* @__PURE__ */ jsxs21(
     "div",
     {
-      className: cn33(
-        "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
+      className: cn35(
+        "flex w-full flex-nowrap justify-end gap-[10px] [&_button]:px-2 [&_button]:py-1 [&_button:disabled]:cursor-not-allowed",
         classNames2.calendarControllers
       ),
       children: [
-        /* @__PURE__ */ jsx58(
-          Button4,
+        /* @__PURE__ */ jsx59(
+          IconButton,
           {
-            className: cn33(
-              "inline-flex items-center justify-center gap-[0.5ch]",
-              buttonClassNames
-            ),
+            className: cn35("inline-flex items-center justify-center gap-[0.5ch]"),
+            variant: "navigation",
             slot: "previous",
-            children: /* @__PURE__ */ jsx58(ChevronLeft, {})
+            children: /* @__PURE__ */ jsx59(ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ jsx58(
-          Button4,
+        /* @__PURE__ */ jsx59(
+          IconButton,
           {
-            className: cn33(
-              "inline-flex items-center justify-center gap-[0.5ch]",
-              buttonClassNames
-            ),
+            className: cn35("inline-flex items-center justify-center gap-[0.5ch]"),
+            variant: "navigation",
             slot: "next",
-            children: /* @__PURE__ */ jsx58(ChevronRight, {})
+            children: /* @__PURE__ */ jsx59(ChevronRight, {})
           }
         )
       ]
@@ -1803,7 +1828,7 @@ var MonthControls_default = MonthControls;
 // src/Calendar/MonthListBox.tsx
 import { useContext as useContext11 } from "react";
 import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var MonthListBox = ({ setSelectedDropdown }) => {
   const state = useContext11(CalendarStateContext3);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
@@ -1812,13 +1837,13 @@ var MonthListBox = ({ setSelectedDropdown }) => {
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     "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__ */ jsx59("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx59(
+        return /* @__PURE__ */ jsx60("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx60(
           _Button,
           {
             slot: "previous",
@@ -1846,7 +1871,7 @@ import {
 } from "react";
 import { CalendarStateContext as CalendarStateContext4 } from "react-aria-components";
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var YearListBox = ({ setSelectedDropdown }) => {
   const state = useContext12(CalendarStateContext4);
   const years = [];
@@ -1876,19 +1901,19 @@ var YearListBox = ({ setSelectedDropdown }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     "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__ */ jsx60("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx60(
+        return /* @__PURE__ */ jsx61("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx61(
           "div",
           {
             ref: isActive ? activeButtonRef : null,
             style: { height: "100%", width: "100%" },
-            children: /* @__PURE__ */ jsx60(
+            children: /* @__PURE__ */ jsx61(
               _Button,
               {
                 slot: "previous",
@@ -1913,7 +1938,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment5, jsx as jsx61, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx62, jsxs as jsxs22 } from "react/jsx-runtime";
 var _Calendar = ({
   disabled,
   readOnly,
@@ -1928,24 +1953,24 @@ var _Calendar = ({
     isDateUnavailable: dateUnavailable,
     ...rest
   };
-  const classNames2 = useClassNames32({ component: "Calendar" });
+  const classNames2 = useClassNames34({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
-    month: /* @__PURE__ */ jsx61(MonthListBox_default, { setSelectedDropdown }),
-    year: /* @__PURE__ */ jsx61(YearListBox_default, { setSelectedDropdown })
+    month: /* @__PURE__ */ jsx62(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ jsx62(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     Calendar,
     {
-      className: cn34(
-        "flex min-h-[350px] w-[360px] flex-col rounded-xs p-4",
+      className: cn36(
+        "flex min-h-[350px] w-fit flex-col rounded-xs p-4",
         classNames2.calendar
       ),
       ...props,
       children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs22(Fragment5, { children: [
         /* @__PURE__ */ jsxs22("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex w-full gap-4", children: [
-            /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsxs22("div", { className: "flex w-fit gap-4", children: [
+            /* @__PURE__ */ jsx62(
               CalendarListBox,
               {
                 type: "month",
@@ -1953,7 +1978,7 @@ var _Calendar = ({
                 setSelectedDropdown
               }
             ),
-            /* @__PURE__ */ jsx61(
+            /* @__PURE__ */ jsx62(
               CalendarListBox,
               {
                 type: "year",
@@ -1962,9 +1987,9 @@ var _Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx61(MonthControls_default, {})
+          /* @__PURE__ */ jsx62(MonthControls_default, {})
         ] }),
-        /* @__PURE__ */ jsx61(_CalendarGrid, {})
+        /* @__PURE__ */ jsx62(_CalendarGrid, {})
       ] })
     }
   );
@@ -1973,8 +1998,8 @@ var _Calendar = ({
 // src/DatePicker/DatePicker.tsx
 import React6 from "react";
 import { DatePicker } from "react-aria-components";
-import { useClassNames as useClassNames33 } from "@marigold/system";
-import { jsx as jsx62, jsxs as jsxs23 } from "react/jsx-runtime";
+import { useClassNames as useClassNames35 } from "@marigold/system";
+import { jsx as jsx63, jsxs as jsxs23 } from "react/jsx-runtime";
 var _DatePicker = React6.forwardRef(
   ({
     dateUnavailable,
@@ -1998,7 +2023,7 @@ var _DatePicker = React6.forwardRef(
       granularity,
       ...rest
     };
-    const classNames2 = useClassNames33({
+    const classNames2 = useClassNames35({
       component: "DatePicker",
       size,
       variant
@@ -2012,31 +2037,23 @@ var _DatePicker = React6.forwardRef(
         ...props,
         ref,
         children: [
-          /* @__PURE__ */ jsx62(
+          /* @__PURE__ */ jsx63(
             _DateInput,
             {
-              action: /* @__PURE__ */ jsx62("div", { className: classNames2.container, children: /* @__PURE__ */ jsx62(
-                _Button,
+              action: /* @__PURE__ */ jsx63(IconButton, { className: classNames2, children: /* @__PURE__ */ jsx63(
+                "svg",
                 {
-                  size: "small",
-                  disabled,
-                  className: classNames2.button,
-                  children: /* @__PURE__ */ jsx62(
-                    "svg",
-                    {
-                      "data-testid": "action",
-                      viewBox: "0 0 24 24",
-                      width: 24,
-                      height: 24,
-                      fill: "currentColor",
-                      children: /* @__PURE__ */ jsx62("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" })
-                    }
-                  )
+                  "data-testid": "action",
+                  viewBox: "0 0 24 24",
+                  width: 24,
+                  height: 24,
+                  fill: "currentColor",
+                  children: /* @__PURE__ */ jsx63("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__ */ jsx62(_Popover, { children: /* @__PURE__ */ jsx62(_Calendar, { disabled }) })
+          /* @__PURE__ */ jsx63(_Popover, { children: /* @__PURE__ */ jsx63(_Calendar, { disabled }) })
         ]
       }
     );
@@ -2045,16 +2062,16 @@ var _DatePicker = React6.forwardRef(
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn35,
+  cn as cn37,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
-import { jsx as jsx63 } from "react/jsx-runtime";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx63(
+import { jsx as jsx64 } from "react/jsx-runtime";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx64(
   "div",
   {
-    className: cn35(
+    className: cn37(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -2066,21 +2083,21 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx63(
 // src/Link/Link.tsx
 import { forwardRef as forwardRef17 } from "react";
 import { Link } from "react-aria-components";
-import { useClassNames as useClassNames34 } from "@marigold/system";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { useClassNames as useClassNames36 } from "@marigold/system";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var _Link = forwardRef17(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = useClassNames34({
+    const classNames2 = useClassNames36({
       component: "Link",
       variant,
       size
     });
-    return /* @__PURE__ */ jsx64(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ jsx65(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-import { useClassNames as useClassNames35 } from "@marigold/system";
+import { useClassNames as useClassNames37 } from "@marigold/system";
 
 // src/List/Context.ts
 import { createContext as createContext6, useContext as useContext13 } from "react";
@@ -2088,14 +2105,14 @@ var ListContext = createContext6({});
 var useListContext = () => useContext13(ListContext);
 
 // src/List/ListItem.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ jsx65("li", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx66("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -2104,38 +2121,38 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = useClassNames35({ component: "List", variant, size });
-  return /* @__PURE__ */ jsx66(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx66(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
+  const classNames2 = useClassNames37({ component: "List", variant, size });
+  return /* @__PURE__ */ jsx67(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx67(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 import { Menu, MenuTrigger } from "react-aria-components";
-import { useClassNames as useClassNames38 } from "@marigold/system";
+import { useClassNames as useClassNames40 } from "@marigold/system";
 
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
-import { useClassNames as useClassNames36 } from "@marigold/system";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { useClassNames as useClassNames38 } from "@marigold/system";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
-  const classNames2 = useClassNames36({ component: "Menu" });
-  return /* @__PURE__ */ jsx67(MenuItem, { ...props, className: classNames2.item, children });
+  const classNames2 = useClassNames38({ component: "Menu" });
+  return /* @__PURE__ */ jsx68(MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 import { MenuSection } from "react-aria-components";
-import { useClassNames as useClassNames37 } from "@marigold/system";
-import { jsx as jsx68, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useClassNames as useClassNames39 } from "@marigold/system";
+import { jsx as jsx69, jsxs as jsxs24 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = useClassNames37({ component: "Menu" });
+  const className = useClassNames39({ component: "Menu" });
   return /* @__PURE__ */ jsxs24(MenuSection, { ...props, children: [
-    /* @__PURE__ */ jsx68(_Header, { className: className.section, children: title }),
+    /* @__PURE__ */ jsx69(_Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-import { jsx as jsx69, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs25 } from "react/jsx-runtime";
 var _Menu = ({
   children,
   label,
@@ -2147,10 +2164,10 @@ var _Menu = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const classNames2 = useClassNames38({ component: "Menu", variant, size });
+  const classNames2 = useClassNames40({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs25(MenuTrigger, { ...props, children: [
-    /* @__PURE__ */ jsx69(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
-    /* @__PURE__ */ jsx69(_Popover, { open, placement, children: /* @__PURE__ */ jsx69(Menu, { ...props, className: classNames2.container, children }) })
+    /* @__PURE__ */ jsx70(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
+    /* @__PURE__ */ jsx70(_Popover, { open, placement, children: /* @__PURE__ */ jsx70(Menu, { ...props, className: classNames2.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
@@ -2158,25 +2175,25 @@ _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
 import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
-import { SVG as SVG8, useClassNames as useClassNames39 } from "@marigold/system";
-import { jsx as jsx70, jsxs as jsxs26 } from "react/jsx-runtime";
+import { SVG as SVG8, useClassNames as useClassNames41 } from "@marigold/system";
+import { jsx as jsx71, jsxs as jsxs26 } from "react/jsx-runtime";
 var ActionMenu = ({
   variant,
   size,
   disabled,
   ...props
 }) => {
-  const classNames2 = useClassNames39({ component: "Menu", variant, size });
+  const classNames2 = useClassNames41({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs26(MenuTrigger2, { children: [
-    /* @__PURE__ */ jsx70(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx70(SVG8, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx70("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__ */ jsx70(_Popover, { children: /* @__PURE__ */ jsx70(Menu2, { ...props, className: classNames2.container, children: props.children }) })
+    /* @__PURE__ */ jsx71(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx71(SVG8, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx71("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__ */ jsx71(_Popover, { children: /* @__PURE__ */ jsx71(Menu2, { ...props, className: classNames2.container, children: props.children }) })
   ] });
 };
 
 // src/SectionMessage/SectionMessage.tsx
 import { useRef as useRef2, useState as useState2 } from "react";
 import { useButton } from "@react-aria/button";
-import { cn as cn38, useClassNames as useClassNames40 } from "@marigold/system";
+import { cn as cn40, useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/SectionMessage/Context.tsx
 import { createContext as createContext7, useContext as useContext14 } from "react";
@@ -2184,33 +2201,33 @@ var SectionMessageContext = createContext7({});
 var useSectionMessageContext = () => useContext14(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
-import { cn as cn36 } from "@marigold/system";
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { cn as cn38 } from "@marigold/system";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames2 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx71("div", { className: cn36("[grid-area:content]", classNames2.content), children });
+  return /* @__PURE__ */ jsx72("div", { className: cn38("[grid-area:content]", classNames2.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
-import { cn as cn37 } from "@marigold/system";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { cn as cn39 } from "@marigold/system";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames2 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx72("div", { className: cn37("[grid-area:title]", classNames2.title), children });
+  return /* @__PURE__ */ jsx73("div", { className: cn39("[grid-area:title]", classNames2.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
-import { jsx as jsx73, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs27 } from "react/jsx-runtime";
 var icons = {
-  success: () => /* @__PURE__ */ jsx73(
+  success: () => /* @__PURE__ */ jsx74(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx73(
+      children: /* @__PURE__ */ jsx74(
         "path",
         {
           fillRule: "evenodd",
@@ -2220,13 +2237,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ jsx73(
+  info: () => /* @__PURE__ */ jsx74(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx73(
+      children: /* @__PURE__ */ jsx74(
         "path",
         {
           fillRule: "evenodd",
@@ -2236,13 +2253,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx73(
+  warning: () => /* @__PURE__ */ jsx74(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx73(
+      children: /* @__PURE__ */ jsx74(
         "path",
         {
           fillRule: "evenodd",
@@ -2252,13 +2269,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx73(
+  error: () => /* @__PURE__ */ jsx74(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx73(
+      children: /* @__PURE__ */ jsx74(
         "path",
         {
           fillRule: "evenodd",
@@ -2279,7 +2296,7 @@ var SectionMessage = ({
   ...props
 }) => {
   const buttonRef = useRef2(null);
-  const classNames2 = useClassNames40({
+  const classNames2 = useClassNames42({
     component: "SectionMessage",
     variant,
     size
@@ -2295,32 +2312,23 @@ var SectionMessage = ({
     }
   };
   if (!isCurrentlyVisible) return null;
-  return /* @__PURE__ */ jsx73(SectionMessageContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsx74(SectionMessageContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs27(
     "div",
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
-      className: cn38("grid auto-rows-min", classNames2.container),
+      className: cn40("grid auto-rows-min", classNames2.container),
       children: [
-        /* @__PURE__ */ jsx73(
-          "div",
-          {
-            className: cn38(
-              "h-5 w-5 self-center [grid-area:icon]",
-              classNames2.icon
-            ),
-            children: Icon4 && /* @__PURE__ */ jsx73(Icon4, {})
-          }
-        ),
-        closeButton && /* @__PURE__ */ jsx73(
+        /* @__PURE__ */ jsx74("div", { className: cn40("[grid-area:icon]", classNames2.icon), children: Icon4 && /* @__PURE__ */ jsx74(Icon4, {}) }),
+        closeButton && /* @__PURE__ */ jsx74("div", { className: "h-6 w-6 text-center", children: /* @__PURE__ */ jsx74(
           "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]",
+            className: cn40("[grid-area:close]", classNames2.close),
             onClick: handleClose,
-            children: /* @__PURE__ */ jsx73("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx73(
+            children: /* @__PURE__ */ jsx74("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx74(
               "path",
               {
                 fillRule: "evenodd",
@@ -2329,7 +2337,7 @@ var SectionMessage = ({
               }
             ) })
           }
-        ),
+        ) }),
         children
       ]
     }
@@ -2344,12 +2352,12 @@ import { useListData as useListData2 } from "@react-stately/data";
 
 // src/TagGroup/Tag.tsx
 import { Button as Button5, Tag } from "react-aria-components";
-import { cn as cn39, useClassNames as useClassNames42 } from "@marigold/system";
+import { cn as cn41, useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
-import { useClassNames as useClassNames41 } from "@marigold/system";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { useClassNames as useClassNames43 } from "@marigold/system";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
   items,
@@ -2359,8 +2367,8 @@ var _TagGroup = ({
   size,
   ...rest
 }) => {
-  const classNames2 = useClassNames41({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx74(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx74(
+  const classNames2 = useClassNames43({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx75(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx75(
     TagList,
     {
       items,
@@ -2372,25 +2380,25 @@ var _TagGroup = ({
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment6, jsx as jsx75, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx76, jsxs as jsxs28 } from "react/jsx-runtime";
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ jsx75(Button5, { slot: "remove", className, children: /* @__PURE__ */ jsx75("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx75("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__ */ jsx76(Button5, { slot: "remove", className, children: /* @__PURE__ */ jsx76("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx76("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__ */ jsx75(
+  const classNames2 = useClassNames44({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx76(
     Tag,
     {
       textValue,
       ...props,
-      className: cn39("data-selection-mode:cursor-pointer", classNames2.tag),
+      className: cn41("data-selection-mode:cursor-pointer", classNames2.tag),
       children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs28(Fragment6, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ jsx75(
+        allowsRemoving && /* @__PURE__ */ jsx76(
           CloseButton2,
           {
-            className: cn39("flex items-center", classNames2.closeButton)
+            className: cn41("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -2400,7 +2408,7 @@ var _Tag = ({ variant, size, children, ...props }) => {
 _Tag.Group = _TagGroup;
 
 // src/Multiselect/Multiselect.tsx
-import { jsx as jsx76, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs29 } from "react/jsx-runtime";
 var Item = (_) => null;
 var Multiselect = ({
   label,
@@ -2439,17 +2447,17 @@ var Multiselect = ({
     input.focus();
   };
   return /* @__PURE__ */ jsxs29("div", { className: "flex flex-wrap gap-1", children: [
-    /* @__PURE__ */ jsx76(
+    /* @__PURE__ */ jsx77(
       _Tag.Group,
       {
         items: selected,
         allowsRemoving: true,
         onRemove: setUnselected,
         renderEmptyState: () => null,
-        children: (item) => /* @__PURE__ */ jsx76(_Tag, { id: item.id, children: item.children }, item.id)
+        children: (item) => /* @__PURE__ */ jsx77(_Tag, { id: item.id, children: item.children }, item.id)
       }
     ),
-    /* @__PURE__ */ jsx76(
+    /* @__PURE__ */ jsx77(
       _ComboBox,
       {
         value,
@@ -2459,7 +2467,7 @@ var Multiselect = ({
         disabled: unselected.length === 0,
         placeholder: unselected.length === 0 ? "All items selected" : "",
         ...props,
-        children: unselected.map((item) => /* @__PURE__ */ jsx76(_ComboBox.Option, { id: item.id, children: item.children }, item.id))
+        children: unselected.map((item) => /* @__PURE__ */ jsx77(_ComboBox.Option, { id: item.id, children: item.children }, item.id))
       }
     )
   ] });
@@ -2469,13 +2477,13 @@ Multiselect.Item = Item;
 // src/NumberField/NumberField.tsx
 import { forwardRef as forwardRef18 } from "react";
 import { Group as Group2, NumberField } from "react-aria-components";
-import { cn as cn41, useClassNames as useClassNames43 } from "@marigold/system";
+import { cn as cn43, useClassNames as useClassNames45 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { Button as Button6 } from "react-aria-components";
-import { cn as cn40 } from "@marigold/system";
-import { jsx as jsx77 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx77("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx77(
+import { cn as cn42 } from "@marigold/system";
+import { jsx as jsx78 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx78("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx78(
   "path",
   {
     fillRule: "evenodd",
@@ -2483,7 +2491,7 @@ var Plus = () => /* @__PURE__ */ jsx77("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__ */ jsx77("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx77(
+var Minus = () => /* @__PURE__ */ jsx78("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx78(
   "path",
   {
     fillRule: "evenodd",
@@ -2493,10 +2501,10 @@ var Minus = () => /* @__PURE__ */ jsx77("svg", { width: 16, height: 16, viewBox:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     Button6,
     {
-      className: cn40(
+      className: cn42(
         [
           "flex items-center justify-center",
           "cursor-pointer data-disabled:cursor-not-allowed"
@@ -2504,13 +2512,13 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx77(Icon4, {})
+      children: /* @__PURE__ */ jsx78(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx78, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs30 } from "react/jsx-runtime";
 var _NumberField = forwardRef18(
   ({
     variant,
@@ -2522,7 +2530,7 @@ var _NumberField = forwardRef18(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames43({
+    const classNames2 = useClassNames45({
       component: "NumberField",
       size,
       variant
@@ -2535,8 +2543,8 @@ var _NumberField = forwardRef18(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx78(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs30(Group2, { className: cn41("flex items-stretch", classNames2.group), children: [
-      showStepper && /* @__PURE__ */ jsx78(
+    return /* @__PURE__ */ jsx79(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs30(Group2, { className: cn43("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ jsx79(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2544,7 +2552,7 @@ var _NumberField = forwardRef18(
           slot: "decrement"
         }
       ),
-      /* @__PURE__ */ jsx78("div", { className: "flex-1", children: /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx79("div", { className: "flex-1", children: /* @__PURE__ */ jsx79(
         _Input,
         {
           ref,
@@ -2553,7 +2561,7 @@ var _NumberField = forwardRef18(
           className: classNames2.input
         }
       ) }),
-      showStepper && /* @__PURE__ */ jsx78(
+      showStepper && /* @__PURE__ */ jsx79(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2567,11 +2575,12 @@ var _NumberField = forwardRef18(
 
 // src/Pagination/Pagination.tsx
 import { useEffect as useEffect4, useRef as useRef5, useState as useState5 } from "react";
+import { cn as cn45, useClassNames as useClassNames48 } from "@marigold/system";
 
 // src/Pagination/Ellipsis.tsx
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var Ellipsis = () => {
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx80(
     "span",
     {
       className: "text-text-base flex h-8 w-8 items-center justify-center",
@@ -2584,11 +2593,11 @@ var Ellipsis = () => {
 // src/Pagination/NavigationButton.tsx
 import React7, { useEffect as useEffect2 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
-import { cn as cn42, useClassNames as useClassNames44 } from "@marigold/system";
+import { cn as cn44, useClassNames as useClassNames46 } from "@marigold/system";
 import { jsxs as jsxs31 } from "react/jsx-runtime";
 var NavigationButton = (props) => {
   const ref = React7.useRef(null);
-  const classNames2 = useClassNames44({
+  const classNames2 = useClassNames46({
     component: "Pagination"
   });
   let { buttonProps } = useButton2(props, ref);
@@ -2614,7 +2623,7 @@ var NavigationButton = (props) => {
       ...buttonProps,
       ...rest,
       disabled: isDisabled,
-      className: cn42(classNames2, controlLabel && "w-24 px-2"),
+      className: cn44(classNames2.navigationButton, controlLabel && "w-24 px-2"),
       "data-selected": isSelected,
       children: [
         position === "left" && children,
@@ -2628,11 +2637,11 @@ var NavigationButton = (props) => {
 // src/Pagination/PageButton.tsx
 import { useEffect as useEffect3, useRef as useRef3 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
-import { useClassNames as useClassNames45 } from "@marigold/system";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { useClassNames as useClassNames47 } from "@marigold/system";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var PageButton = (props) => {
   const ref = useRef3(null);
-  const classNames2 = useClassNames45({
+  const classNames2 = useClassNames47({
     component: "Pagination"
   });
   let { buttonProps } = useButton3(props, ref);
@@ -2643,14 +2652,14 @@ var PageButton = (props) => {
       return () => registerRef(null);
     }
   }, [registerRef]);
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx81(
     "button",
     {
       ref,
       ...buttonProps,
       "aria-label": `Page ${page}`,
       "aria-current": selected ? "page" : void 0,
-      className: classNames2,
+      className: classNames2.pageButton,
       "data-selected": selected,
       disabled: isDisabled,
       tabIndex: selected === true ? 0 : -1,
@@ -2806,7 +2815,7 @@ var usePageRange = ({ currentPage, totalPages }) => {
 };
 
 // src/Pagination/Pagination.tsx
-import { jsx as jsx81, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs32 } from "react/jsx-runtime";
 var _Pagination = ({
   defaultPage = 1,
   page,
@@ -2819,6 +2828,9 @@ var _Pagination = ({
   const [currentPage, setCurrentPage] = useState5(page != null ? page : defaultPage);
   const totalPages = Math.ceil(totalItems / pageSize);
   const isFirstRender = useRef5(true);
+  const classNames2 = useClassNames48({
+    component: "Pagination"
+  });
   useEffect4(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
@@ -2859,7 +2871,7 @@ var _Pagination = ({
       "aria-label": `Page ${currentPage} of ${totalPages}`,
       ...keyboardProps,
       children: [
-        /* @__PURE__ */ jsx81(
+        /* @__PURE__ */ jsx82(
           NavigationButton,
           {
             onClick: () => handlePageChange(Math.max(1, currentPage - 1)),
@@ -2868,11 +2880,11 @@ var _Pagination = ({
             registerRef: (ref) => registerRef(NavigationTypes.Prev, currentPage - 1, ref),
             controlLabel: controlLabels == null ? void 0 : controlLabels[0],
             position: "left",
-            children: /* @__PURE__ */ jsx81(ChevronLeft, { className: "h-5 w-5" })
+            children: /* @__PURE__ */ jsx82(ChevronLeft, { className: cn45(classNames2.icon) })
           }
         ),
-        /* @__PURE__ */ jsx81("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
-          (pageNumber, index) => pageNumber === "ellipsis" ? /* @__PURE__ */ jsx81(Ellipsis, {}, `ellipsis-${index}`) : /* @__PURE__ */ jsx81(
+        /* @__PURE__ */ jsx82("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
+          (pageNumber, index) => pageNumber === "ellipsis" ? /* @__PURE__ */ jsx82(Ellipsis, {}, `ellipsis-${index}`) : /* @__PURE__ */ jsx82(
             PageButton,
             {
               page: pageNumber,
@@ -2882,8 +2894,8 @@ var _Pagination = ({
             },
             pageNumber
           )
-        ) : /* @__PURE__ */ jsx81(PageButton, { page: 1, isDisabled: true }, 1) }),
-        /* @__PURE__ */ jsx81(
+        ) : /* @__PURE__ */ jsx82(PageButton, { page: 1, isDisabled: true }, 1) }),
+        /* @__PURE__ */ jsx82(
           NavigationButton,
           {
             onClick: () => handlePageChange(Math.min(totalPages, currentPage + 1)),
@@ -2892,7 +2904,7 @@ var _Pagination = ({
             registerRef: (ref) => registerRef(NavigationTypes.Next, currentPage + 1, ref),
             controlLabel: controlLabels == null ? void 0 : controlLabels[1],
             position: "right",
-            children: /* @__PURE__ */ jsx81(ChevronRight, { className: "h-5 w-5" })
+            children: /* @__PURE__ */ jsx82(ChevronRight, { className: cn45(classNames2.icon) })
           }
         )
       ]
@@ -2905,7 +2917,7 @@ import {
   forwardRef as forwardRef19
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn44, useClassNames as useClassNames47 } from "@marigold/system";
+import { cn as cn47, useClassNames as useClassNames50 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext8, useContext as useContext15 } from "react";
@@ -2916,8 +2928,8 @@ var useRadioGroupContext = () => useContext15(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn43, useClassNames as useClassNames46 } from "@marigold/system";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { cn as cn46, useClassNames as useClassNames49 } from "@marigold/system";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
   size,
@@ -2933,7 +2945,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = useClassNames46({ component: "Radio", variant, size });
+  const classNames2 = useClassNames49({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2941,7 +2953,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx83(
     FieldBase,
     {
       as: RadioGroup,
@@ -2952,18 +2964,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ jsx82(
+      children: /* @__PURE__ */ jsx83(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn43(
+          className: cn46(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx82(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ jsx83(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -2971,33 +2983,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment7, jsx as jsx83, jsxs as jsxs33 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx83("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx83("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx83(
+import { Fragment as Fragment7, jsx as jsx84, jsxs as jsxs33 } from "react/jsx-runtime";
+var Dot = () => /* @__PURE__ */ jsx84("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx84("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx84(
   "div",
   {
-    className: cn44(
+    className: cn47(
       "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__ */ jsx83(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx84(Dot, {}) : null
   }
 );
 var _Radio = forwardRef19(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = useClassNames47({
+    const classNames2 = useClassNames50({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ jsx83(
+    return /* @__PURE__ */ jsx84(
       Radio,
       {
         ref,
-        className: cn44(
+        className: cn47(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -3007,17 +3019,17 @@ var _Radio = forwardRef19(
         isDisabled: disabled,
         ...props,
         children: ({ isSelected }) => /* @__PURE__ */ jsxs33(Fragment7, { children: [
-          /* @__PURE__ */ jsx83(
+          /* @__PURE__ */ jsx84(
             Icon3,
             {
               checked: isSelected,
-              className: cn44(
+              className: cn47(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ jsx83("div", { className: classNames2.label, children })
+          /* @__PURE__ */ jsx84("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -3028,7 +3040,7 @@ _Radio.Group = _RadioGroup;
 // src/SearchField/SearchField.tsx
 import { forwardRef as forwardRef20 } from "react";
 import { SearchField } from "react-aria-components";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var _SearchField = forwardRef20(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
@@ -3038,7 +3050,7 @@ var _SearchField = forwardRef20(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ jsx84(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx84(
+    return /* @__PURE__ */ jsx85(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx85(
       SearchInput,
       {
         ref,
@@ -3050,13 +3062,9 @@ var _SearchField = forwardRef20(
 
 // src/Select/Select.tsx
 import { forwardRef as forwardRef21 } from "react";
-import {
-  Button as Button7,
-  Select,
-  SelectValue
-} from "react-aria-components";
-import { cn as cn45, useClassNames as useClassNames48 } from "@marigold/system";
-import { jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Select, SelectValue } from "react-aria-components";
+import { cn as cn48, useClassNames as useClassNames51 } from "@marigold/system";
+import { jsx as jsx86, jsxs as jsxs34 } from "react/jsx-runtime";
 var _Select = forwardRef21(
   ({
     disabled,
@@ -3077,22 +3085,22 @@ var _Select = forwardRef21(
       onSelectionChange: onChange,
       ...rest
     };
-    const classNames2 = useClassNames48({ component: "Select", variant, size });
+    const classNames2 = useClassNames51({ component: "Select", variant, size });
     return /* @__PURE__ */ jsxs34(FieldBase, { as: Select, ref, variant, size, ...props, children: [
       /* @__PURE__ */ jsxs34(
-        Button7,
+        IconButton,
         {
-          className: cn45(
+          className: cn48(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames2.select
           ),
           children: [
-            /* @__PURE__ */ jsx85(SelectValue, { className: "[&>[slot=description]]:hidden" }),
-            /* @__PURE__ */ jsx85(ChevronDown, { className: cn45("size-4", classNames2.icon) })
+            /* @__PURE__ */ jsx86(SelectValue, { className: "[&>[slot=description]]:hidden" }),
+            /* @__PURE__ */ jsx86(ChevronDown, { className: cn48("size-4", classNames2.icon) })
           ]
         }
       ),
-      /* @__PURE__ */ jsx85(_Popover, { children: /* @__PURE__ */ jsx85(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ jsx86(_Popover, { children: /* @__PURE__ */ jsx86(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -3104,7 +3112,7 @@ import {
   forwardRef as forwardRef23
 } from "react";
 import { GridList as SelectList } from "react-aria-components";
-import { cn as cn47, useClassNames as useClassNames49 } from "@marigold/system";
+import { cn as cn50, useClassNames as useClassNames52 } from "@marigold/system";
 
 // src/SelectList/Context.ts
 import { createContext as createContext9, useContext as useContext16 } from "react";
@@ -3116,24 +3124,24 @@ var useSelectListContext = () => useContext16(SelectListContext);
 // src/SelectList/SelectListItem.tsx
 import { forwardRef as forwardRef22 } from "react";
 import { GridListItem as SelectListItem } from "react-aria-components";
-import { cn as cn46 } from "@marigold/system";
-import { Fragment as Fragment8, jsx as jsx86, jsxs as jsxs35 } from "react/jsx-runtime";
+import { cn as cn49 } from "@marigold/system";
+import { jsx as jsx87, jsxs as jsxs35 } from "react/jsx-runtime";
 var _SelectListItem = forwardRef22(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames2 } = useSelectListContext();
-    return /* @__PURE__ */ jsx86(
+    return /* @__PURE__ */ jsx87(
       SelectListItem,
       {
         textValue,
         ...props,
-        className: cn46(
+        className: cn49(
           "items-center group-[layout=grid]/list:flex-row",
           classNames2 == null ? void 0 : classNames2.option
         ),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ jsxs35(Fragment8, { children: [
-          selectionMode === "multiple" && /* @__PURE__ */ jsx86(_Checkbox, { slot: "selection" }),
+        children: ({ selectionMode }) => /* @__PURE__ */ jsxs35("div", { className: "flex gap-2", children: [
+          selectionMode === "multiple" && /* @__PURE__ */ jsx87(_Checkbox, { slot: "selection" }),
           children
         ] })
       }
@@ -3142,21 +3150,21 @@ var _SelectListItem = forwardRef22(
 );
 
 // src/SelectList/SelectList.tsx
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 var _SelectList = forwardRef23(
   ({ onChange, ...rest }, ref) => {
-    const classNames2 = useClassNames49({ component: "ListBox" });
+    const classNames2 = useClassNames52({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange,
       ...rest
     };
-    return /* @__PURE__ */ jsx87(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx87("div", { className: classNames2.container, children: /* @__PURE__ */ jsx87(
+    return /* @__PURE__ */ jsx88(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx88("div", { className: classNames2.container, children: /* @__PURE__ */ jsx88(
       SelectList,
       {
         ...props,
         layout: "grid",
         ref,
-        className: cn47(
+        className: cn50(
           "group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -3168,18 +3176,18 @@ var _SelectList = forwardRef23(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-import { cn as cn48, createVar as createVar8, width as twWidth2 } from "@marigold/system";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { cn as cn51, createVar as createVar8, width as twWidth2 } from "@marigold/system";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ jsx88(
+}) => /* @__PURE__ */ jsx89(
   "div",
   {
     ...props,
-    className: cn48(["sticky h-(--height) overflow-auto", twWidth2[width]]),
+    className: cn51(["sticky h-(--height) overflow-auto", twWidth2[width]]),
     style: createVar8({ height }),
     children
   }
@@ -3194,11 +3202,11 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn49,
+  cn as cn52,
   width as twWidth3,
-  useClassNames as useClassNames50
+  useClassNames as useClassNames53
 } from "@marigold/system";
-import { Fragment as Fragment9, jsx as jsx89, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx90, jsxs as jsxs36 } from "react/jsx-runtime";
 var _Slider = forwardRef24(
   ({
     thumbLabels,
@@ -3209,7 +3217,7 @@ var _Slider = forwardRef24(
     label,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames50({
+    const classNames2 = useClassNames53({
       component: "Slider",
       variant,
       size
@@ -3222,7 +3230,7 @@ var _Slider = forwardRef24(
       FieldBase,
       {
         as: Slider,
-        className: cn49(
+        className: cn52(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -3230,26 +3238,26 @@ var _Slider = forwardRef24(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx89(_Label, { children: props.children && props.children || label && label }),
-          /* @__PURE__ */ jsx89(SliderOutput, { className: cn49("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx89(
+          /* @__PURE__ */ jsx90(_Label, { children: props.children && props.children || label && label }),
+          /* @__PURE__ */ jsx90(SliderOutput, { className: cn52("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx90(
             SliderTrack,
             {
-              className: cn49("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => /* @__PURE__ */ jsxs36(Fragment9, { children: [
-                /* @__PURE__ */ jsx89(
+              className: cn52("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => /* @__PURE__ */ jsxs36(Fragment8, { children: [
+                /* @__PURE__ */ jsx90(
                   "div",
                   {
-                    className: cn49(
+                    className: cn52(
                       "absolute top-[50%] h-2 w-full translate-y-[-50%]",
                       classNames2.track
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx89(
+                /* @__PURE__ */ jsx90(
                   "div",
                   {
-                    className: cn49(
+                    className: cn52(
                       "absolute top-[50%] h-2 translate-y-[-50%]",
                       classNames2.selectedTrack
                     ),
@@ -3259,10 +3267,10 @@ var _Slider = forwardRef24(
                     }
                   }
                 ),
-                state.values.map((_, i) => /* @__PURE__ */ jsx89(
+                state.values.map((_, i) => /* @__PURE__ */ jsx90(
                   SliderThumb,
                   {
-                    className: cn49("top-1/2 cursor-pointer", classNames2.thumb),
+                    className: cn52("top-1/2 cursor-pointer", classNames2.thumb),
                     index: i,
                     "aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
                     name: thumbLabels == null ? void 0 : thumbLabels[i]
@@ -3279,12 +3287,12 @@ var _Slider = forwardRef24(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
-var Split = () => /* @__PURE__ */ jsx90("div", { role: "separator", className: "grow" });
+import { jsx as jsx91 } from "react/jsx-runtime";
+var Split = () => /* @__PURE__ */ jsx91("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-import { alignment as alignment2, cn as cn50, gapSpace as gapSpace8 } from "@marigold/system";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { alignment as alignment2, cn as cn53, gapSpace as gapSpace8 } from "@marigold/system";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -3294,10 +3302,10 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx92(
     "div",
     {
-      className: cn50(
+      className: cn53(
         "flex flex-col",
         gapSpace8[space],
         alignX && ((_b = (_a = alignment2) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -3314,11 +3322,11 @@ var Stack = ({
 import { forwardRef as forwardRef25 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn51,
+  cn as cn54,
   width as twWidth4,
-  useClassNames as useClassNames51
+  useClassNames as useClassNames54
 } from "@marigold/system";
-import { jsx as jsx92, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs37 } from "react/jsx-runtime";
 var _Switch = forwardRef25(
   ({
     variant,
@@ -3330,7 +3338,7 @@ var _Switch = forwardRef25(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames51({ component: "Switch", size, variant });
+    const classNames2 = useClassNames54({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3342,36 +3350,15 @@ var _Switch = forwardRef25(
       {
         ...props,
         ref,
-        className: cn51(
+        className: cn54(
           twWidth4[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ jsx92(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ jsx92("div", { className: "relative", children: /* @__PURE__ */ jsx92(
-            "div",
-            {
-              className: cn51(
-                "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed",
-                classNames2.track
-              ),
-              children: /* @__PURE__ */ jsx92(
-                "div",
-                {
-                  className: cn51(
-                    "h-[22px] w-[22px]",
-                    "cubic-bezier(.7,0,.3,1)",
-                    "absolute top-px left-0",
-                    "block translate-x-[1px] rounded-full transition-all duration-100 ease-in-out will-change-transform",
-                    "group-selected/switch:translate-x-[calc(47px_-_100%)]",
-                    classNames2.thumb
-                  )
-                }
-              )
-            }
-          ) })
+          /* @__PURE__ */ jsx93(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ jsx93("div", { className: "relative", children: /* @__PURE__ */ jsx93("div", { className: classNames2.track, children: /* @__PURE__ */ jsx93("div", { className: classNames2.thumb }) }) })
         ]
       }
     );
@@ -3389,7 +3376,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn57, useClassNames as useClassNames53 } from "@marigold/system";
+import { cn as cn60, useClassNames as useClassNames56 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext10, useContext as useContext17 } from "react";
@@ -3398,7 +3385,7 @@ var useTableContext = () => useContext17(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var TableBody = ({
   children,
   className,
@@ -3407,7 +3394,7 @@ var TableBody = ({
   const { rowGroupProps } = useTableRowGroup();
   const { state, classNames: classNames2 } = useTableContext();
   if (state.collection.size === 0 && emptyState) {
-    return /* @__PURE__ */ jsx93("tbody", { className, children: /* @__PURE__ */ jsx93("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ jsx93(
+    return /* @__PURE__ */ jsx94("tbody", { className, children: /* @__PURE__ */ jsx94("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ jsx94(
       "td",
       {
         className: classNames2 == null ? void 0 : classNames2.cell,
@@ -3417,7 +3404,7 @@ var TableBody = ({
       }
     ) }) });
   }
-  return /* @__PURE__ */ jsx93("tbody", { ...rowGroupProps, className, children });
+  return /* @__PURE__ */ jsx94("tbody", { ...rowGroupProps, className, children });
 };
 
 // src/Table/TableCell.tsx
@@ -3425,8 +3412,8 @@ import { useRef as useRef6 } from "react";
 import { useFocusRing } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps } from "@react-aria/utils";
-import { cn as cn52, useStateProps } from "@marigold/system";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { cn as cn55, useStateProps } from "@marigold/system";
+import { jsx as jsx95 } from "react/jsx-runtime";
 var TableCell = ({ cell, align = "left" }) => {
   const ref = useRef6(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
@@ -3449,11 +3436,11 @@ var TableCell = ({ cell, align = "left" }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing();
   const stateProps = useStateProps({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx95(
     "td",
     {
       ref,
-      className: cn52(classNames2 == null ? void 0 : classNames2.cell),
+      className: cn55(classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps(cellProps, focusProps),
       ...stateProps,
       align,
@@ -3467,7 +3454,7 @@ import { useRef as useRef7 } from "react";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps2 } from "@react-aria/utils";
-import { cn as cn53, useStateProps as useStateProps2 } from "@marigold/system";
+import { cn as cn56, useStateProps as useStateProps2 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3490,7 +3477,7 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
   const ref = useRef7(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -3507,14 +3494,14 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing2();
   const stateProps = useStateProps2({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx95(
+  return /* @__PURE__ */ jsx96(
     "td",
     {
       ref,
-      className: cn53("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: cn56("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps2(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx95(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx96(_Checkbox, { ...checkboxProps })
     }
   );
 };
@@ -3525,8 +3512,8 @@ import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { cn as cn54, width as twWidth5, useStateProps as useStateProps3 } from "@marigold/system";
-import { jsx as jsx96, jsxs as jsxs38 } from "react/jsx-runtime";
+import { cn as cn57, width as twWidth5, useStateProps as useStateProps3 } from "@marigold/system";
+import { jsx as jsx97, jsxs as jsxs38 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto",
@@ -3553,13 +3540,13 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: cn54("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn57("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps3(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__ */ jsx96(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx96(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx96("span", { className: "invisible", children: /* @__PURE__ */ jsx96(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__ */ jsx97(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx97(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx97("span", { className: "invisible", children: /* @__PURE__ */ jsx97(SortDown, { className: "inline-block" }) }))
       ]
     }
   );
@@ -3567,10 +3554,10 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { jsx as jsx97 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx98(
     "thead",
     {
       ...rowGroupProps,
@@ -3583,7 +3570,7 @@ var TableHeader = ({ stickyHeader, children }) => {
 // src/Table/TableHeaderRow.tsx
 import { useRef as useRef9 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx98 } from "react/jsx-runtime";
+import { jsx as jsx99 } from "react/jsx-runtime";
 var TableHeaderRow = ({
   item,
   className,
@@ -3592,7 +3579,7 @@ var TableHeaderRow = ({
   const { state } = useTableContext();
   const ref = useRef9(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx98("tr", { ...rowProps, className, ref, children });
+  return /* @__PURE__ */ jsx99("tr", { ...rowProps, className, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -3601,13 +3588,13 @@ import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn55, useClassNames as useClassNames52, useStateProps as useStateProps4 } from "@marigold/system";
-import { jsx as jsx99 } from "react/jsx-runtime";
+import { cn as cn58, useClassNames as useClassNames55, useStateProps as useStateProps4 } from "@marigold/system";
+import { jsx as jsx100 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef10(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames52({
+  const classNames2 = useClassNames55({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3632,11 +3619,11 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx99(
+  return /* @__PURE__ */ jsx100(
     "tr",
     {
       ref,
-      className: cn55(
+      className: cn58(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3659,11 +3646,11 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
 import {
-  cn as cn56,
+  cn as cn59,
   width as twWidth6,
   useStateProps as useStateProps5
 } from "@marigold/system";
-import { jsx as jsx100 } from "react/jsx-runtime";
+import { jsx as jsx101 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto",
@@ -3685,21 +3672,21 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx100(
+  return /* @__PURE__ */ jsx101(
     "th",
     {
       ref,
-      className: cn56(twWidth6[width], ["leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: cn59(twWidth6[width], ["leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps5(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ jsx100(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx101(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx101, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx102, jsxs as jsxs39 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
@@ -3722,13 +3709,13 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames53({
+  const classNames2 = useClassNames56({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx101(
+  return /* @__PURE__ */ jsx102(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
@@ -3736,7 +3723,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn57(
+          className: cn60(
             "group/table",
             "border-collapse",
             stretch ? "table w-full" : "block",
@@ -3744,7 +3731,7 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx101(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx101(
+            /* @__PURE__ */ jsx102(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx102(
               TableHeaderRow,
               {
                 item: headerRow,
@@ -3752,7 +3739,7 @@ var Table = ({
                 children: [...collection.getChildren(headerRow.key)].map(
                   (column) => {
                     var _a, _b, _c, _d, _e;
-                    return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx101(
+                    return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx102(
                       TableSelectAllCell,
                       {
                         width: (_b = column.props) == null ? void 0 : _b.width,
@@ -3760,7 +3747,7 @@ var Table = ({
                         align: (_c = column.props) == null ? void 0 : _c.align
                       },
                       column.key
-                    ) : /* @__PURE__ */ jsx101(
+                    ) : /* @__PURE__ */ jsx102(
                       TableColumnHeader,
                       {
                         width: (_d = column.props) == null ? void 0 : _d.width,
@@ -3776,10 +3763,10 @@ var Table = ({
             )) }),
             /* @__PURE__ */ jsxs39(TableBody, { className: classNames2.body, emptyState, children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx101(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                (row) => row.type === "item" && /* @__PURE__ */ jsx102(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__ */ jsx101(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx101(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx102(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx102(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -3805,16 +3792,16 @@ Table.Row = Row;
 // src/Text/Text.tsx
 import { Text as Text2 } from "react-aria-components";
 import {
-  cn as cn58,
+  cn as cn61,
   cursorStyle,
   ensureCssVar as ensureCssVar2,
   fontWeight,
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames54
+  useClassNames as useClassNames57
 } from "@marigold/system";
-import { jsx as jsx102 } from "react/jsx-runtime";
+import { jsx as jsx103 } from "react/jsx-runtime";
 var _Text = ({
   variant,
   size,
@@ -3828,19 +3815,19 @@ var _Text = ({
   as = "div",
   ...props
 }) => {
-  const classNames2 = useClassNames54({
+  const classNames2 = useClassNames57({
     component: "Text",
     variant,
     size
   });
   const Component = props.slot ? Text2 : as;
   const elementType = props.slot ? { elementType: as } : {};
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx103(
     Component,
     {
       ...props,
       ...elementType,
-      className: cn58(
+      className: cn61(
         "max-w-(--maxTextWidth)",
         // possibly set by a <Container>
         classNames2,
@@ -3859,8 +3846,8 @@ var _Text = ({
 // src/TextArea/TextArea.tsx
 import { forwardRef as forwardRef26 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames55 } from "@marigold/system";
-import { jsx as jsx103 } from "react/jsx-runtime";
+import { useClassNames as useClassNames58 } from "@marigold/system";
+import { jsx as jsx104 } from "react/jsx-runtime";
 var _TextArea = forwardRef26(
   ({
     variant,
@@ -3872,7 +3859,7 @@ var _TextArea = forwardRef26(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames55({ component: "TextArea", variant, size });
+    const classNames2 = useClassNames58({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3880,14 +3867,14 @@ var _TextArea = forwardRef26(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx103(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx103(TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ jsx104(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx104(TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
 import { forwardRef as forwardRef27 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
-import { jsx as jsx104 } from "react/jsx-runtime";
+import { jsx as jsx105 } from "react/jsx-runtime";
 var _TextField = forwardRef27(
   ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
@@ -3897,13 +3884,13 @@ var _TextField = forwardRef27(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx104(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx104(_Input, { ref }) });
+    return /* @__PURE__ */ jsx105(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx105(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn59, createVar as createVar9, gapSpace as gapSpace9 } from "@marigold/system";
-import { jsx as jsx105 } from "react/jsx-runtime";
+import { cn as cn62, createVar as createVar9, gapSpace as gapSpace9 } from "@marigold/system";
+import { jsx as jsx106 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3916,11 +3903,11 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx105(
+  return /* @__PURE__ */ jsx106(
     "div",
     {
       ...props,
-      className: cn59(
+      className: cn62(
         "grid",
         gapSpace9[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3934,11 +3921,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn60, useClassNames as useClassNames56 } from "@marigold/system";
+import { cn as cn63, useClassNames as useClassNames59 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
-import { jsx as jsx106 } from "react/jsx-runtime";
+import { jsx as jsx107 } from "react/jsx-runtime";
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3952,26 +3939,26 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ jsx106(TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ jsx107(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx107, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx108, jsxs as jsxs40 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames2 = useClassNames56({ component: "Tooltip", variant, size });
+  const classNames2 = useClassNames59({ component: "Tooltip", variant, size });
   const portal = usePortalContainer();
   return /* @__PURE__ */ jsxs40(
     Tooltip,
     {
       ...props,
-      className: cn60("group/tooltip", classNames2.container),
+      className: cn63("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ jsx107(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx107("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx107("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ jsx108(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx108("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx108("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -3985,12 +3972,12 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 // src/XLoader/XLoader.tsx
 import { Dialog as Dialog2, Modal as Modal2 } from "react-aria-components";
 import { useId } from "@react-aria/utils";
-import { useClassNames as useClassNames58 } from "@marigold/system";
+import { useClassNames as useClassNames61 } from "@marigold/system";
 
 // src/XLoader/BaseLoader.tsx
 import { Label as Label2, ProgressBar as ProgressBar2 } from "react-aria-components";
 import { useLocalizedStringFormatter as useLocalizedStringFormatter2 } from "@react-aria/i18n";
-import { useClassNames as useClassNames57 } from "@marigold/system";
+import { useClassNames as useClassNames60 } from "@marigold/system";
 
 // src/intl/messages.ts
 var intlMessages2 = {
@@ -4003,7 +3990,7 @@ var intlMessages2 = {
 };
 
 // src/XLoader/BaseLoader.tsx
-import { jsx as jsx108, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx109, jsxs as jsxs41 } from "react/jsx-runtime";
 var BaseLoader = ({
   variant,
   size,
@@ -4012,7 +3999,7 @@ var BaseLoader = ({
   ...props
 }) => {
   const stringFormatter = useLocalizedStringFormatter2(intlMessages2, "marigold");
-  const className = useClassNames57({ component: "XLoader", variant, size });
+  const className = useClassNames60({ component: "XLoader", variant, size });
   return /* @__PURE__ */ jsxs41(
     ProgressBar2,
     {
@@ -4029,13 +4016,13 @@ var BaseLoader = ({
             fill: "currentColor",
             className: className.loader,
             children: [
-              /* @__PURE__ */ jsx108("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx109("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+              /* @__PURE__ */ jsx109(
                 "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__ */ jsx108(
+                  children: /* @__PURE__ */ jsx109(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4048,12 +4035,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx109(
                 "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__ */ jsx108(
+                  children: /* @__PURE__ */ jsx109(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4066,12 +4053,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx109(
                 "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__ */ jsx108(
+                  children: /* @__PURE__ */ jsx109(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4084,12 +4071,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx109(
                 "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__ */ jsx108(
+                  children: /* @__PURE__ */ jsx109(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4102,12 +4089,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx109(
                 "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__ */ jsx108(
+                  children: /* @__PURE__ */ jsx109(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4120,12 +4107,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx109(
                 "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__ */ jsx108(
+                  children: /* @__PURE__ */ jsx109(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4138,12 +4125,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx109(
                 "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__ */ jsx108(
+                  children: /* @__PURE__ */ jsx109(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4156,12 +4143,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx109(
                 "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__ */ jsx108(
+                  children: /* @__PURE__ */ jsx109(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4174,12 +4161,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx109(
                 "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__ */ jsx108(
+                  children: /* @__PURE__ */ jsx109(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4192,12 +4179,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx109(
                 "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__ */ jsx108(
+                  children: /* @__PURE__ */ jsx109(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4210,12 +4197,12 @@ var BaseLoader = ({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx108(
+              /* @__PURE__ */ jsx109(
                 "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__ */ jsx108(
+                  children: /* @__PURE__ */ jsx109(
                     "animate",
                     {
                       attributeName: "opacity",
@@ -4231,31 +4218,31 @@ var BaseLoader = ({
             ]
           }
         ),
-        children ? /* @__PURE__ */ jsx108(Label2, { className: className.label, children }) : null
+        children ? /* @__PURE__ */ jsx109(Label2, { className: className.label, children }) : null
       ]
     }
   );
 };
 
 // src/XLoader/XLoader.tsx
-import { jsx as jsx109 } from "react/jsx-runtime";
+import { jsx as jsx110 } from "react/jsx-runtime";
 var LoaderFullScreen = (props) => {
   const id = useId();
-  return /* @__PURE__ */ jsx109(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx109(Modal2, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ jsx109(Dialog2, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx109(BaseLoader, { id, ...props }) }) }) });
+  return /* @__PURE__ */ jsx110(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx110(Modal2, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ jsx110(Dialog2, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx110(BaseLoader, { id, ...props }) }) }) });
 };
 var LoaderSection = (props) => {
-  const className = useClassNames58({
+  const className = useClassNames61({
     component: "Underlay",
     variant: "modal",
     className: "flex size-full items-center justify-center"
   });
-  return /* @__PURE__ */ jsx109("div", { className, children: /* @__PURE__ */ jsx109(BaseLoader, { ...props }) });
+  return /* @__PURE__ */ jsx110("div", { className, children: /* @__PURE__ */ jsx110(BaseLoader, { ...props }) });
 };
-var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ jsx109(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ jsx109(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ jsx109(BaseLoader, { variant, ...props });
+var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ jsx110(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ jsx110(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ jsx110(BaseLoader, { variant, ...props });
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames59 } from "@marigold/system";
+import { useClassNames as useClassNames62 } from "@marigold/system";
 
 // src/Tabs/Context.ts
 import { createContext as createContext11, useContext as useContext18 } from "react";
@@ -4264,15 +4251,15 @@ var useTabContext = () => useContext18(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn61 } from "@marigold/system";
-import { jsx as jsx110 } from "react/jsx-runtime";
+import { cn as cn64 } from "@marigold/system";
+import { jsx as jsx111 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx110(
+  return /* @__PURE__ */ jsx111(
     Tab,
     {
       ...props,
-      className: cn61(
+      className: cn64(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -4283,15 +4270,15 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn62, gapSpace as gapSpace10 } from "@marigold/system";
-import { jsx as jsx111 } from "react/jsx-runtime";
+import { cn as cn65, gapSpace as gapSpace10 } from "@marigold/system";
+import { jsx as jsx112 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx111(
+  return /* @__PURE__ */ jsx112(
     TabList,
     {
       ...props,
-      className: cn62("flex", gapSpace10[space], classNames2.tabsList),
+      className: cn65("flex", gapSpace10[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -4299,25 +4286,25 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 import { TabPanel } from "react-aria-components";
-import { jsx as jsx112 } from "react/jsx-runtime";
+import { jsx as jsx113 } from "react/jsx-runtime";
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx112(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ jsx113(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx113 } from "react/jsx-runtime";
+import { jsx as jsx114 } from "react/jsx-runtime";
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = useClassNames59({
+  const classNames2 = useClassNames62({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ jsx113(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx113(Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ jsx114(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx114(Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;