@marigold/components 7.7.2 → 7.8.0

package/dist/index.mjs

@@ -1453,27 +1453,63 @@ var Footer = ({ children, variant, size, ...props }) => {
 // src/Form/Form.tsx
 import { Form } from "react-aria-components";
 
+// src/Grid/Grid.tsx
+import { cn as cn24, gapSpace as gapSpace5, height as twHeight } from "@marigold/system";
+
+// src/Grid/GridArea.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+var GridArea = ({ name, children }) => /* @__PURE__ */ jsx38("div", { style: { gridArea: name }, children });
+
+// src/Grid/Grid.tsx
+import { jsx as jsx39 } 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 = ({
+  children,
+  areas,
+  columns,
+  rows,
+  height = "auto",
+  space = 0,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx39(
+    "div",
+    {
+      className: cn24("grid", gapSpace5[space], twHeight[height]),
+      style: {
+        gridTemplateAreas: parseGridAreas(areas),
+        gridTemplateColumns: parseTemplateValue(columns),
+        gridTemplateRows: parseTemplateValue(rows)
+      },
+      ...props,
+      children
+    }
+  );
+};
+Grid.Area = GridArea;
+
 // src/Header/Header.tsx
 import { Header } from "react-aria-components";
 import { useClassNames as useClassNames21 } from "@marigold/system";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var _Header = ({ variant, size, ...props }) => {
   const classNames2 = useClassNames21({
     component: "Header",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx38(Header, { className: classNames2, ...props, children: props.children });
+  return /* @__PURE__ */ jsx40(Header, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Image/Image.tsx
 import {
-  cn as cn24,
+  cn as cn25,
   objectFit,
   objectPosition,
   useClassNames as useClassNames22
 } from "@marigold/system";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var Image = ({
   variant,
   size,
@@ -1482,12 +1518,12 @@ var Image = ({
   ...props
 }) => {
   const classNames2 = useClassNames22({ component: "Image", variant, size });
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx41(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: cn24(
+      className: cn25(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1500,10 +1536,10 @@ var Image = ({
 // src/Inline/Inline.tsx
 import {
   alignment as alignment2,
-  cn as cn25,
-  gapSpace as gapSpace5
+  cn as cn26,
+  gapSpace as gapSpace6
 } from "@marigold/system";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var Inline = ({
   space = 0,
   orientation,
@@ -1513,13 +1549,13 @@ var Inline = ({
   ...props
 }) => {
   var _a2, _b2, _c, _d;
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     "div",
     {
       ...props,
-      className: cn25(
+      className: cn26(
         "flex flex-wrap",
-        gapSpace5[space],
+        gapSpace6[space],
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
         alignY && ((_d = (_c = alignment2) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
@@ -1538,10 +1574,10 @@ import { useClassNames as useClassNames23 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
-import { cn as cn26 } from "@marigold/system";
-import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
+import { cn as cn27 } from "@marigold/system";
+import { Fragment as Fragment4, jsx as jsx43, jsxs as jsxs14 } from "react/jsx-runtime";
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx43(
     DateSegment,
     {
       ...props,
@@ -1550,30 +1586,30 @@ var _DateSegment = ({ segment, ...props }) => {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
       children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs14(Fragment4, { children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx43(
           "span",
           {
             "aria-hidden": "true",
-            className: cn26(
+            className: cn27(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ jsx41("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
+        /* @__PURE__ */ jsx43("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-import { jsx as jsx42, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs15 } from "react/jsx-runtime";
 var _DateInput = ({ variant, size, action, ...props }) => {
   const classNames2 = useClassNames23({ component: "DateField", variant, size });
   return /* @__PURE__ */ jsxs15(Group, { className: classNames2.field, children: [
-    /* @__PURE__ */ jsx42(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx42(_DateSegment, { className: classNames2.segment, segment }) }),
-    action ? action : /* @__PURE__ */ jsx42("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx44(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx44(_DateSegment, { className: classNames2.segment, segment }) }),
+    action ? action : /* @__PURE__ */ jsx44("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx44(
       "svg",
       {
         "data-testid": "action",
@@ -1581,14 +1617,14 @@ var _DateInput = ({ variant, size, action, ...props }) => {
         viewBox: "0 0 24 24",
         width: 24,
         height: 24,
-        children: /* @__PURE__ */ jsx42("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__ */ jsx44("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 jsx43 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var _DateField = forwardRef13(
   ({
     variant,
@@ -1607,7 +1643,7 @@ var _DateField = forwardRef13(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx43(
+    return /* @__PURE__ */ jsx45(
       FieldBase,
       {
         as: DateField,
@@ -1615,7 +1651,7 @@ var _DateField = forwardRef13(
         size,
         ref,
         ...props,
-        children: /* @__PURE__ */ jsx43(_DateInput, { action })
+        children: /* @__PURE__ */ jsx45(_DateInput, { action })
       }
     );
   }
@@ -1624,7 +1660,7 @@ var _DateField = forwardRef13(
 // src/Calendar/Calendar.tsx
 import { useState } from "react";
 import { Calendar } from "react-aria-components";
-import { cn as cn30, useClassNames as useClassNames28 } from "@marigold/system";
+import { cn as cn31, useClassNames as useClassNames28 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import {
@@ -1632,7 +1668,7 @@ import {
   CalendarGrid,
   CalendarGridBody
 } from "react-aria-components";
-import { cn as cn27, useClassNames as useClassNames25 } from "@marigold/system";
+import { cn as cn28, useClassNames as useClassNames25 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
@@ -1641,7 +1677,7 @@ import { CalendarStateContext } from "react-aria-components";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useDateFormatter, useLocale } from "@react-aria/i18n";
 import { useClassNames as useClassNames24 } from "@marigold/system";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
   const state = useContext7(CalendarStateContext);
   const { headerProps } = useCalendarGrid(props, state);
@@ -1659,20 +1695,20 @@ function CalendarGridHeader(props) {
     });
   }, [locale, state.timeZone, dayFormatter]);
   const classNames2 = useClassNames24({ component: "Calendar" });
-  return /* @__PURE__ */ jsx44("thead", { ...headerProps, children: /* @__PURE__ */ jsx44("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx44("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
+  return /* @__PURE__ */ jsx46("thead", { ...headerProps, children: /* @__PURE__ */ jsx46("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx46("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-import { jsx as jsx45, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs16 } from "react/jsx-runtime";
 var _CalendarGrid = () => {
   const classNames2 = useClassNames25({ component: "Calendar" });
   return /* @__PURE__ */ jsxs16(CalendarGrid, { className: classNames2.calendarGrid, children: [
-    /* @__PURE__ */ jsx45(CalendarGridHeader, {}),
-    /* @__PURE__ */ jsx45(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx47(CalendarGridHeader, {}),
+    /* @__PURE__ */ jsx47(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx47(
       CalendarCell,
       {
         date,
-        className: cn27(
+        className: cn28(
           "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
         )
@@ -1685,7 +1721,7 @@ var _CalendarGrid = () => {
 import { useContext as useContext8 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
 import { ChevronDown as ChevronDown2 } from "@marigold/icons";
-import { cn as cn28, useClassNames as useClassNames26 } from "@marigold/system";
+import { cn as cn29, useClassNames as useClassNames26 } from "@marigold/system";
 
 // src/Calendar/useFormattedMonths.tsx
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
@@ -1704,7 +1740,7 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-import { jsx as jsx46, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs17 } from "react/jsx-runtime";
 function CalendarListBox({
   type,
   isDisabled,
@@ -1719,11 +1755,11 @@ function CalendarListBox({
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: cn28(buttonStyles, selectClassNames),
+      className: cn29(buttonStyles, selectClassNames),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ jsx46(ChevronDown2, {})
+        /* @__PURE__ */ jsx48(ChevronDown2, {})
       ]
     }
   );
@@ -1732,39 +1768,39 @@ function CalendarListBox({
 // src/Calendar/MonthControls.tsx
 import { Button as Button3 } from "react-aria-components";
 import { ChevronLeft, ChevronRight } from "@marigold/icons";
-import { cn as cn29, useClassNames as useClassNames27 } from "@marigold/system";
-import { jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
+import { cn as cn30, useClassNames as useClassNames27 } from "@marigold/system";
+import { jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
 function MonthControls() {
   const classNames2 = useClassNames27({ component: "Calendar" });
   const buttonClassNames = useClassNames27({ component: "Button" });
   return /* @__PURE__ */ jsxs18(
     "div",
     {
-      className: cn29(
+      className: cn30(
         "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
         classNames2.calendarControllers
       ),
       children: [
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx49(
           Button3,
           {
-            className: cn29(
+            className: cn30(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
             slot: "previous",
-            children: /* @__PURE__ */ jsx47(ChevronLeft, {})
+            children: /* @__PURE__ */ jsx49(ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx49(
           Button3,
           {
-            className: cn29(
+            className: cn30(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
             slot: "next",
-            children: /* @__PURE__ */ jsx47(ChevronRight, {})
+            children: /* @__PURE__ */ jsx49(ChevronRight, {})
           }
         )
       ]
@@ -1776,7 +1812,7 @@ var MonthControls_default = MonthControls;
 // src/Calendar/MonthListBox.tsx
 import { useContext as useContext9 } from "react";
 import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var MonthListBox = ({ setSelectedDropdown }) => {
   const state = useContext9(CalendarStateContext3);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
@@ -1785,13 +1821,13 @@ var MonthListBox = ({ setSelectedDropdown }) => {
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx50(
     "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__ */ jsx48("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx48(
+        return /* @__PURE__ */ jsx50("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx50(
           _Button,
           {
             slot: "previous",
@@ -1819,7 +1855,7 @@ import {
 } from "react";
 import { CalendarStateContext as CalendarStateContext4 } from "react-aria-components";
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
 var YearListBox = ({ setSelectedDropdown }) => {
   const state = useContext10(CalendarStateContext4);
   const years = [];
@@ -1849,19 +1885,19 @@ var YearListBox = ({ setSelectedDropdown }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx51(
     "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__ */ jsx49("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx49(
+        return /* @__PURE__ */ jsx51("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx51(
           "div",
           {
             ref: isActive ? activeButtonRef : null,
             style: { height: "100%", width: "100%" },
-            children: /* @__PURE__ */ jsx49(
+            children: /* @__PURE__ */ jsx51(
               _Button,
               {
                 slot: "previous",
@@ -1886,7 +1922,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-import { Fragment as Fragment5, jsx as jsx50, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx52, jsxs as jsxs19 } from "react/jsx-runtime";
 var _Calendar = ({
   disabled,
   readOnly,
@@ -1902,13 +1938,13 @@ var _Calendar = ({
   const classNames2 = useClassNames28({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
-    month: /* @__PURE__ */ jsx50(MonthListBox_default, { setSelectedDropdown }),
-    year: /* @__PURE__ */ jsx50(YearListBox_default, { setSelectedDropdown })
+    month: /* @__PURE__ */ jsx52(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ jsx52(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx52(
     Calendar,
     {
-      className: cn30(
+      className: cn31(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4",
         classNames2.calendar
       ),
@@ -1916,7 +1952,7 @@ var _Calendar = ({
       children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs19(Fragment5, { children: [
         /* @__PURE__ */ jsxs19("div", { className: "mb-4 flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs19("div", { className: "flex w-full gap-4", children: [
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx52(
               CalendarListBox,
               {
                 type: "month",
@@ -1924,7 +1960,7 @@ var _Calendar = ({
                 setSelectedDropdown
               }
             ),
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx52(
               CalendarListBox,
               {
                 type: "year",
@@ -1933,9 +1969,9 @@ var _Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx50(MonthControls_default, {})
+          /* @__PURE__ */ jsx52(MonthControls_default, {})
         ] }),
-        /* @__PURE__ */ jsx50(_CalendarGrid, {})
+        /* @__PURE__ */ jsx52(_CalendarGrid, {})
       ] })
     }
   );
@@ -1944,7 +1980,7 @@ var _Calendar = ({
 // src/DatePicker/DatePicker.tsx
 import { DatePicker } from "react-aria-components";
 import { useClassNames as useClassNames29 } from "@marigold/system";
-import { jsx as jsx51, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs20 } from "react/jsx-runtime";
 var _DatePicker = ({
   disabled,
   required,
@@ -1971,16 +2007,16 @@ var _DatePicker = ({
     variant
   });
   return /* @__PURE__ */ jsxs20(FieldBase, { as: DatePicker, variant, size, ...props, children: [
-    /* @__PURE__ */ jsx51(
+    /* @__PURE__ */ jsx53(
       _DateInput,
       {
-        action: /* @__PURE__ */ jsx51("div", { className: classNames2.container, children: /* @__PURE__ */ jsx51(
+        action: /* @__PURE__ */ jsx53("div", { className: classNames2.container, children: /* @__PURE__ */ jsx53(
           _Button,
           {
             size: "small",
             disabled,
             className: classNames2.button,
-            children: /* @__PURE__ */ jsx51(
+            children: /* @__PURE__ */ jsx53(
               "svg",
               {
                 "data-testid": "action",
@@ -1988,29 +2024,29 @@ var _DatePicker = ({
                 width: 24,
                 height: 24,
                 fill: "currentColor",
-                children: /* @__PURE__ */ jsx51("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__ */ 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" })
               }
             )
           }
         ) })
       }
     ),
-    /* @__PURE__ */ jsx51(_Popover, { children: /* @__PURE__ */ jsx51(_Calendar, { disabled }) })
+    /* @__PURE__ */ jsx53(_Popover, { children: /* @__PURE__ */ jsx53(_Calendar, { disabled }) })
   ] });
 };
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn31,
+  cn as cn32,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
 } from "@marigold/system";
-import { jsx as jsx52 } from "react/jsx-runtime";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
+import { jsx as jsx54 } from "react/jsx-runtime";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx54(
   "div",
   {
-    className: cn31(
+    className: cn32(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -2023,7 +2059,7 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
 import { forwardRef as forwardRef14 } from "react";
 import { Link } from "react-aria-components";
 import { useClassNames as useClassNames30 } from "@marigold/system";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var _Link = forwardRef14(
   ({ variant, size, disabled, children, ...props }, ref) => {
     const classNames2 = useClassNames30({
@@ -2031,7 +2067,7 @@ var _Link = forwardRef14(
       variant,
       size
     });
-    return /* @__PURE__ */ jsx53(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ jsx55(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
@@ -2044,14 +2080,14 @@ var ListContext = createContext5({});
 var useListContext = () => useContext11(ListContext);
 
 // src/List/ListItem.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ jsx54("li", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ jsx56("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var List = ({
   as = "ul",
   children,
@@ -2061,7 +2097,7 @@ var List = ({
 }) => {
   const Component = as;
   const classNames2 = useClassNames31({ component: "List", variant, size });
-  return /* @__PURE__ */ jsx55(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx55(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
+  return /* @__PURE__ */ jsx57(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx57(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
@@ -2072,26 +2108,26 @@ import { useClassNames as useClassNames34 } from "@marigold/system";
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
 import { useClassNames as useClassNames32 } from "@marigold/system";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
   const classNames2 = useClassNames32({ component: "Menu" });
-  return /* @__PURE__ */ jsx56(MenuItem, { ...props, className: classNames2.item, children });
+  return /* @__PURE__ */ jsx58(MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 import { Section as Section2 } from "react-aria-components";
 import { useClassNames as useClassNames33 } from "@marigold/system";
-import { jsx as jsx57, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs21 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
   const className = useClassNames33({ component: "Menu" });
   return /* @__PURE__ */ jsxs21(Section2, { ...props, children: [
-    /* @__PURE__ */ jsx57(_Header, { className: className.section, children: title }),
+    /* @__PURE__ */ jsx59(_Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-import { jsx as jsx58, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs22 } from "react/jsx-runtime";
 var _Menu = ({
   children,
   label,
@@ -2104,8 +2140,8 @@ var _Menu = ({
 }) => {
   const classNames2 = useClassNames34({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs22(MenuTrigger, { ...props, children: [
-    /* @__PURE__ */ jsx58(_Button, { variant: "menu", disabled, children: label }),
-    /* @__PURE__ */ jsx58(_Popover, { open, placement, children: /* @__PURE__ */ jsx58(Menu, { ...props, className: classNames2.container, children }) })
+    /* @__PURE__ */ jsx60(_Button, { variant: "menu", disabled, children: label }),
+    /* @__PURE__ */ jsx60(_Popover, { open, placement, children: /* @__PURE__ */ jsx60(Menu, { ...props, className: classNames2.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
@@ -2114,7 +2150,7 @@ _Menu.Section = _MenuSection;
 // src/Menu/ActionMenu.tsx
 import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
 import { SVG as SVG4, useClassNames as useClassNames35 } from "@marigold/system";
-import { jsx as jsx59, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs23 } from "react/jsx-runtime";
 var ActionMenu = ({
   variant,
   size,
@@ -2123,23 +2159,23 @@ var ActionMenu = ({
 }) => {
   const classNames2 = useClassNames35({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs23(MenuTrigger2, { children: [
-    /* @__PURE__ */ jsx59(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx59(SVG4, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx59("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__ */ jsx59(_Popover, { children: /* @__PURE__ */ jsx59(Menu2, { ...props, className: classNames2.container, children: props.children }) })
+    /* @__PURE__ */ jsx61(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx61(SVG4, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx61("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__ */ jsx61(_Popover, { children: /* @__PURE__ */ jsx61(Menu2, { ...props, className: classNames2.container, children: props.children }) })
   ] });
 };
 
 // src/Message/Message.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { cn as cn32, useClassNames as useClassNames36 } from "@marigold/system";
-import { jsx as jsx60, jsxs as jsxs24 } from "react/jsx-runtime";
+import { cn as cn33, useClassNames as useClassNames36 } from "@marigold/system";
+import { jsx as jsx62, jsxs as jsxs24 } from "react/jsx-runtime";
 var icons = {
-  success: () => /* @__PURE__ */ jsx60(
+  success: () => /* @__PURE__ */ jsx62(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx60(
+      children: /* @__PURE__ */ jsx62(
         "path",
         {
           fillRule: "evenodd",
@@ -2149,13 +2185,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ jsx60(
+  info: () => /* @__PURE__ */ jsx62(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx60(
+      children: /* @__PURE__ */ jsx62(
         "path",
         {
           fillRule: "evenodd",
@@ -2165,13 +2201,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ jsx60(
+  warning: () => /* @__PURE__ */ jsx62(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx60(
+      children: /* @__PURE__ */ jsx62(
         "path",
         {
           fillRule: "evenodd",
@@ -2181,13 +2217,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ jsx60(
+  error: () => /* @__PURE__ */ jsx62(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ jsx60(
+      children: /* @__PURE__ */ jsx62(
         "path",
         {
           fillRule: "evenodd",
@@ -2205,25 +2241,25 @@ var Message = forwardRef15(
     return /* @__PURE__ */ jsxs24(
       "div",
       {
-        className: cn32(
+        className: cn33(
           "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
           classNames2.container
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx60("div", { className: cn32("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx60(Icon4, {}) }),
-          /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx62("div", { className: cn33("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx62(Icon4, {}) }),
+          /* @__PURE__ */ jsx62(
             "div",
             {
-              className: cn32(
+              className: cn33(
                 "col-start-2 row-start-1 self-center",
                 classNames2.title
               ),
               children: messageTitle
             }
           ),
-          /* @__PURE__ */ jsx60("div", { className: cn32("col-start-2", classNames2.content), children })
+          /* @__PURE__ */ jsx62("div", { className: cn33("col-start-2", classNames2.content), children })
         ]
       }
     );
@@ -2236,12 +2272,12 @@ import { useListData as useListData2 } from "@react-stately/data";
 
 // src/TagGroup/Tag.tsx
 import { Button as Button4, Tag } from "react-aria-components";
-import { cn as cn33, useClassNames as useClassNames38 } from "@marigold/system";
+import { cn as cn34, useClassNames as useClassNames38 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
 import { useClassNames as useClassNames37 } from "@marigold/system";
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
   items,
@@ -2252,7 +2288,7 @@ var _TagGroup = ({
   ...rest
 }) => {
   const classNames2 = useClassNames37({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx61(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx63(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx63(
     TagList,
     {
       items,
@@ -2264,25 +2300,25 @@ var _TagGroup = ({
 };
 
 // src/TagGroup/Tag.tsx
-import { Fragment as Fragment6, jsx as jsx62, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx64, jsxs as jsxs25 } from "react/jsx-runtime";
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ jsx62(Button4, { slot: "remove", className, children: /* @__PURE__ */ jsx62("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx62("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__ */ jsx64(Button4, { slot: "remove", className, children: /* @__PURE__ */ jsx64("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx64("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 = useClassNames38({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx64(
     Tag,
     {
       textValue,
       ...props,
-      className: cn33("data-[selection-mode]:cursor-pointer", classNames2.tag),
+      className: cn34("data-[selection-mode]:cursor-pointer", classNames2.tag),
       children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs25(Fragment6, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ jsx62(
+        allowsRemoving && /* @__PURE__ */ jsx64(
           CloseButton2,
           {
-            className: cn33("flex items-center", classNames2.closeButton)
+            className: cn34("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -2292,7 +2328,7 @@ var _Tag = ({ variant, size, children, ...props }) => {
 _Tag.Group = _TagGroup;
 
 // src/Multiselect/Multiselect.tsx
-import { jsx as jsx63, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs26 } from "react/jsx-runtime";
 var Item2 = (_) => null;
 var Multiselect = ({
   label,
@@ -2331,17 +2367,17 @@ var Multiselect = ({
     input.focus();
   };
   return /* @__PURE__ */ jsxs26("div", { className: "flex flex-wrap gap-1", children: [
-    /* @__PURE__ */ jsx63(
+    /* @__PURE__ */ jsx65(
       _Tag.Group,
       {
         items: selected,
         allowsRemoving: true,
         onRemove: setUnselected,
         renderEmptyState: () => null,
-        children: (item) => /* @__PURE__ */ jsx63(_Tag, { id: item.id, children: item.children }, item.id)
+        children: (item) => /* @__PURE__ */ jsx65(_Tag, { id: item.id, children: item.children }, item.id)
       }
     ),
-    /* @__PURE__ */ jsx63(
+    /* @__PURE__ */ jsx65(
       _ComboBox,
       {
         value,
@@ -2351,7 +2387,7 @@ var Multiselect = ({
         disabled: unselected.length === 0,
         placeholder: unselected.length === 0 ? "All items selected" : "",
         ...props,
-        children: unselected.map((item) => /* @__PURE__ */ jsx63(_ComboBox.Item, { id: item.id, children: item.children }, item.id))
+        children: unselected.map((item) => /* @__PURE__ */ jsx65(_ComboBox.Item, { id: item.id, children: item.children }, item.id))
       }
     )
   ] });
@@ -2361,13 +2397,13 @@ Multiselect.Item = Item2;
 // src/NumberField/NumberField.tsx
 import { forwardRef as forwardRef16 } from "react";
 import { Group as Group2, NumberField } from "react-aria-components";
-import { cn as cn35, useClassNames as useClassNames39 } from "@marigold/system";
+import { cn as cn36, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { Button as Button5 } from "react-aria-components";
-import { cn as cn34 } from "@marigold/system";
-import { jsx as jsx64 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx64("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx64(
+import { cn as cn35 } from "@marigold/system";
+import { jsx as jsx66 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx66("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx66(
   "path",
   {
     fillRule: "evenodd",
@@ -2375,7 +2411,7 @@ var Plus = () => /* @__PURE__ */ jsx64("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__ */ jsx64("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx64(
+var Minus = () => /* @__PURE__ */ jsx66("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx66(
   "path",
   {
     fillRule: "evenodd",
@@ -2385,10 +2421,10 @@ var Minus = () => /* @__PURE__ */ jsx64("svg", { width: 16, height: 16, viewBox:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx66(
     Button5,
     {
-      className: cn34(
+      className: cn35(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2396,13 +2432,13 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx64(Icon4, {})
+      children: /* @__PURE__ */ jsx66(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx65, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs27 } from "react/jsx-runtime";
 var _NumberField = forwardRef16(
   ({
     variant,
@@ -2427,8 +2463,8 @@ var _NumberField = forwardRef16(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx65(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group2, { className: cn35("flex items-stretch", classNames2.group), children: [
-      showStepper && /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx67(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group2, { className: cn36("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ jsx67(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2436,7 +2472,7 @@ var _NumberField = forwardRef16(
           slot: "decrement"
         }
       ),
-      /* @__PURE__ */ jsx65("div", { className: "flex-1", children: /* @__PURE__ */ jsx65(
+      /* @__PURE__ */ jsx67("div", { className: "flex-1", children: /* @__PURE__ */ jsx67(
         _Input,
         {
           ref,
@@ -2445,7 +2481,7 @@ var _NumberField = forwardRef16(
           className: classNames2.input
         }
       ) }),
-      showStepper && /* @__PURE__ */ jsx65(
+      showStepper && /* @__PURE__ */ jsx67(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2462,7 +2498,7 @@ import {
   forwardRef as forwardRef17
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn37, useClassNames as useClassNames41 } from "@marigold/system";
+import { cn as cn38, useClassNames as useClassNames41 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext6, useContext as useContext12 } from "react";
@@ -2473,8 +2509,8 @@ var useRadioGroupContext = () => useContext12(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn36, useClassNames as useClassNames40 } from "@marigold/system";
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { cn as cn37, useClassNames as useClassNames40 } from "@marigold/system";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
   size,
@@ -2498,7 +2534,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx68(
     FieldBase,
     {
       as: RadioGroup,
@@ -2509,18 +2545,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ jsx66(
+      children: /* @__PURE__ */ jsx68(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn36(
+          className: cn37(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx66(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ jsx68(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -2528,18 +2564,18 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment7, jsx as jsx67, jsxs as jsxs28 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx67("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx67("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx67(
+import { Fragment as Fragment7, jsx as jsx69, jsxs as jsxs28 } from "react/jsx-runtime";
+var Dot = () => /* @__PURE__ */ jsx69("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx69("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx69(
   "div",
   {
-    className: cn37(
+    className: cn38(
       "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__ */ jsx67(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx69(Dot, {}) : null
   }
 );
 var _Radio = forwardRef17(
@@ -2550,11 +2586,11 @@ var _Radio = forwardRef17(
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ jsx67(
+    return /* @__PURE__ */ jsx69(
       Radio,
       {
         ref,
-        className: cn37(
+        className: cn38(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -2564,17 +2600,17 @@ var _Radio = forwardRef17(
         isDisabled: disabled,
         ...props,
         children: ({ isSelected }) => /* @__PURE__ */ jsxs28(Fragment7, { children: [
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx69(
             Icon3,
             {
               checked: isSelected,
-              className: cn37(
+              className: cn38(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ jsx67("div", { className: classNames2.label, children })
+          /* @__PURE__ */ jsx69("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -2585,7 +2621,7 @@ _Radio.Group = _RadioGroup;
 // src/SearchField/SearchField.tsx
 import { forwardRef as forwardRef18 } from "react";
 import { SearchField } from "react-aria-components";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var _SearchField = forwardRef18(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
@@ -2595,7 +2631,7 @@ var _SearchField = forwardRef18(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ jsx68(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx68(
+    return /* @__PURE__ */ jsx70(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx70(
       SearchInput,
       {
         ref,
@@ -2612,8 +2648,8 @@ import {
   Select,
   SelectValue
 } from "react-aria-components";
-import { cn as cn38, useClassNames as useClassNames42 } from "@marigold/system";
-import { jsx as jsx69, jsxs as jsxs29 } from "react/jsx-runtime";
+import { cn as cn39, useClassNames as useClassNames42 } from "@marigold/system";
+import { jsx as jsx71, jsxs as jsxs29 } from "react/jsx-runtime";
 var _Select = forwardRef19(
   ({
     disabled,
@@ -2639,17 +2675,17 @@ var _Select = forwardRef19(
       /* @__PURE__ */ jsxs29(
         Button6,
         {
-          className: cn38(
+          className: cn39(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames2.select
           ),
           children: [
-            /* @__PURE__ */ jsx69(SelectValue, {}),
-            /* @__PURE__ */ jsx69(ChevronDown, { className: "size-4" })
+            /* @__PURE__ */ jsx71(SelectValue, {}),
+            /* @__PURE__ */ jsx71(ChevronDown, { className: "size-4" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx69(_Popover, { children: /* @__PURE__ */ jsx69(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ jsx71(_Popover, { children: /* @__PURE__ */ jsx71(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -2661,7 +2697,7 @@ import {
   forwardRef as forwardRef21
 } from "react";
 import { GridList as SelectList } from "react-aria-components";
-import { cn as cn40, useClassNames as useClassNames43 } from "@marigold/system";
+import { cn as cn41, useClassNames as useClassNames43 } from "@marigold/system";
 
 // src/SelectList/Context.ts
 import { createContext as createContext7, useContext as useContext13 } from "react";
@@ -2673,21 +2709,21 @@ var useSelectListContext = () => useContext13(SelectListContext);
 // src/SelectList/SelectListItem.tsx
 import { forwardRef as forwardRef20 } from "react";
 import { GridListItem as SelectListItem } from "react-aria-components";
-import { cn as cn39 } from "@marigold/system";
-import { Fragment as Fragment8, jsx as jsx70, jsxs as jsxs30 } from "react/jsx-runtime";
+import { cn as cn40 } from "@marigold/system";
+import { Fragment as Fragment8, jsx as jsx72, jsxs as jsxs30 } from "react/jsx-runtime";
 var _SelectListItem = forwardRef20(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames2 } = useSelectListContext();
-    return /* @__PURE__ */ jsx70(
+    return /* @__PURE__ */ jsx72(
       SelectListItem,
       {
         textValue,
         ...props,
-        className: cn39("flex items-center", classNames2 == null ? void 0 : classNames2.option),
+        className: cn40("flex items-center", classNames2 == null ? void 0 : classNames2.option),
         ref,
         children: ({ selectionMode }) => /* @__PURE__ */ jsxs30(Fragment8, { children: [
-          selectionMode === "multiple" && /* @__PURE__ */ jsx70(FieldGroup, { children: /* @__PURE__ */ jsx70(_Checkbox, { slot: "selection" }) }),
+          selectionMode === "multiple" && /* @__PURE__ */ jsx72(FieldGroup, { children: /* @__PURE__ */ jsx72(_Checkbox, { slot: "selection" }) }),
           children
         ] })
       }
@@ -2696,7 +2732,7 @@ var _SelectListItem = forwardRef20(
 );
 
 // src/SelectList/SelectList.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var _SelectList = forwardRef21(
   ({ onChange, ...rest }, ref) => {
     const classNames2 = useClassNames43({ component: "ListBox" });
@@ -2704,12 +2740,12 @@ var _SelectList = forwardRef21(
       onSelectionChange: onChange,
       ...rest
     };
-    return /* @__PURE__ */ jsx71(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx71("div", { className: classNames2.container, children: /* @__PURE__ */ jsx71(
+    return /* @__PURE__ */ jsx73(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx73("div", { className: classNames2.container, children: /* @__PURE__ */ jsx73(
       SelectList,
       {
         ...props,
         ref,
-        className: cn40(
+        className: cn41(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -2721,18 +2757,18 @@ var _SelectList = forwardRef21(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-import { cn as cn41, createVar as createVar10, width as twWidth2 } from "@marigold/system";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { cn as cn42, createVar as createVar10, width as twWidth2 } from "@marigold/system";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ jsx72(
+}) => /* @__PURE__ */ jsx74(
   "div",
   {
     ...props,
-    className: cn41(["sticky h-[--height] overflow-auto", twWidth2[width]]),
+    className: cn42(["sticky h-[--height] overflow-auto", twWidth2[width]]),
     style: createVar10({ height }),
     children
   }
@@ -2747,11 +2783,11 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn42,
+  cn as cn43,
   width as twWidth3,
   useClassNames as useClassNames44
 } from "@marigold/system";
-import { jsx as jsx73, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs31 } from "react/jsx-runtime";
 var _Slider = forwardRef22(
   ({
     thumbLabels,
@@ -2773,7 +2809,7 @@ var _Slider = forwardRef22(
     return /* @__PURE__ */ jsxs31(
       Slider,
       {
-        className: cn42(
+        className: cn43(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -2781,16 +2817,16 @@ var _Slider = forwardRef22(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx73(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx73(SliderOutput, { className: cn42("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx73(
+          /* @__PURE__ */ jsx75(_Label, { children: props.children }),
+          /* @__PURE__ */ jsx75(SliderOutput, { className: cn43("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx75(
             SliderTrack,
             {
-              className: cn42("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx73(
+              className: cn43("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx75(
                 SliderThumb,
                 {
-                  className: cn42("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn43("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -2805,16 +2841,16 @@ var _Slider = forwardRef22(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
-var Split = (props) => /* @__PURE__ */ jsx74("div", { ...props, role: "separator", className: "grow" });
+import { jsx as jsx76 } from "react/jsx-runtime";
+var Split = (props) => /* @__PURE__ */ jsx76("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn43,
-  gapSpace as gapSpace6
+  cn as cn44,
+  gapSpace as gapSpace7
 } from "@marigold/system";
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -2825,12 +2861,12 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx77(
     "div",
     {
-      className: cn43(
+      className: cn44(
         "flex flex-col",
-        gapSpace6[space],
+        gapSpace7[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
         alignY && ((_d = (_c = alignment3) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
@@ -2845,11 +2881,11 @@ var Stack = ({
 import { forwardRef as forwardRef23 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn44,
+  cn as cn45,
   width as twWidth4,
   useClassNames as useClassNames45
 } from "@marigold/system";
-import { jsx as jsx76, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs32 } from "react/jsx-runtime";
 var _Switch = forwardRef23(
   ({
     variant,
@@ -2873,25 +2909,25 @@ var _Switch = forwardRef23(
       {
         ...props,
         ref,
-        className: cn44(
+        className: cn45(
           twWidth4[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ jsx76(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ jsx76("div", { className: "relative", children: /* @__PURE__ */ jsx76(
+          /* @__PURE__ */ jsx78(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ jsx78("div", { className: "relative", children: /* @__PURE__ */ jsx78(
             "div",
             {
-              className: cn44(
+              className: cn45(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ jsx76(
+              children: /* @__PURE__ */ jsx78(
                 "div",
                 {
-                  className: cn44(
+                  className: cn45(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -2920,7 +2956,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn50, useClassNames as useClassNames47 } from "@marigold/system";
+import { cn as cn51, useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext8, useContext as useContext14 } from "react";
@@ -2929,10 +2965,10 @@ var useTableContext = () => useContext14(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ jsx77("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx79("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
@@ -2940,8 +2976,8 @@ import { useRef as useRef4 } from "react";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { cn as cn45, useStateProps as useStateProps2 } from "@marigold/system";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { cn as cn46, useStateProps as useStateProps2 } from "@marigold/system";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var TableCell = ({ cell, align = "left" }) => {
   const ref = useRef4(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
@@ -2964,11 +3000,11 @@ var TableCell = ({ cell, align = "left" }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing2();
   const stateProps = useStateProps2({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx80(
     "td",
     {
       ref,
-      className: cn45(classNames2 == null ? void 0 : classNames2.cell),
+      className: cn46(classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps3(cellProps, focusProps),
       ...stateProps,
       align,
@@ -2982,7 +3018,7 @@ import { useRef as useRef5 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn46, useStateProps as useStateProps3 } from "@marigold/system";
+import { cn as cn47, useStateProps as useStateProps3 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3005,7 +3041,7 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
   const ref = useRef5(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -3022,14 +3058,14 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing3();
   const stateProps = useStateProps3({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx81(
     "td",
     {
       ref,
-      className: cn46("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: cn47("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps4(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx79(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx81(_Checkbox, { ...checkboxProps })
     }
   );
 };
@@ -3041,9 +3077,9 @@ import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn47, useStateProps as useStateProps4 } from "@marigold/system";
+import { cn as cn48, useStateProps as useStateProps4 } from "@marigold/system";
 import { width as twWidth5 } from "@marigold/system";
-import { jsx as jsx80, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs33 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto",
@@ -3070,13 +3106,13 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: cn47("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn48("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps5(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
       children: [
         column.rendered,
-        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx80(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx80(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx80(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__ */ jsx82(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx82(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx82(SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3084,10 +3120,10 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx83(
     "thead",
     {
       ...rowGroupProps,
@@ -3100,12 +3136,12 @@ var TableHeader = ({ stickyHeader, children }) => {
 // src/Table/TableHeaderRow.tsx
 import { useRef as useRef7 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef7(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx82("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ jsx84("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -3114,8 +3150,8 @@ import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn48, useClassNames as useClassNames46, useStateProps as useStateProps5 } from "@marigold/system";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { cn as cn49, useClassNames as useClassNames46, useStateProps as useStateProps5 } from "@marigold/system";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef8(null);
   const { interactive, state, ...ctx } = useTableContext();
@@ -3145,11 +3181,11 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsx85(
     "tr",
     {
       ref,
-      className: cn48(
+      className: cn49(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3172,11 +3208,11 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import {
-  cn as cn49,
+  cn as cn50,
   width as twWidth6,
   useStateProps as useStateProps6
 } from "@marigold/system";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto",
@@ -3198,21 +3234,21 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx86(
     "th",
     {
       ref,
-      className: cn49(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: cn50(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps7(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ jsx84(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx86(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx87, jsxs as jsxs34 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
@@ -3240,7 +3276,7 @@ var Table = ({
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx87(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
@@ -3248,7 +3284,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn50(
+          className: cn51(
             "group/table",
             "border-collapse whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3256,10 +3292,10 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx85(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx85(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ jsx87(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx87(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c, _d, _e;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx85(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx87(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
@@ -3267,7 +3303,7 @@ var Table = ({
                     align: (_c = column.props) == null ? void 0 : _c.align
                   },
                   column.key
-                ) : /* @__PURE__ */ jsx85(
+                ) : /* @__PURE__ */ jsx87(
                   TableColumnHeader,
                   {
                     width: (_d = column.props) == null ? void 0 : _d.width,
@@ -3280,10 +3316,10 @@ var Table = ({
             ) }, headerRow.key)) }),
             /* @__PURE__ */ jsxs34(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx85(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                (row) => row.type === "item" && /* @__PURE__ */ jsx87(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__ */ jsx85(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx85(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx87(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx87(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -3308,7 +3344,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn51,
+  cn as cn52,
   createVar as createVar11,
   cursorStyle,
   fontWeight,
@@ -3319,7 +3355,7 @@ import {
   useClassNames as useClassNames48,
   useTheme as useTheme3
 } from "@marigold/system";
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 var Text2 = ({
   variant,
   size,
@@ -3338,11 +3374,11 @@ var Text2 = ({
     variant,
     size
   });
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx88(
     "p",
     {
       ...props,
-      className: cn51(
+      className: cn52(
         "text-[--color] outline-[--outline]",
         classNames2,
         fontStyle && textStyle[fontStyle],
@@ -3368,7 +3404,7 @@ var Text2 = ({
 import { forwardRef as forwardRef24 } from "react";
 import { TextArea, TextField } from "react-aria-components";
 import { useClassNames as useClassNames49 } from "@marigold/system";
-import { jsx as jsx87 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var _TextArea = forwardRef24(
   ({
     variant,
@@ -3388,14 +3424,14 @@ var _TextArea = forwardRef24(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx87(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx87(TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ jsx89(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx89(TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
 import { forwardRef as forwardRef25 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var _TextField = forwardRef25(
   ({
     variant,
@@ -3413,13 +3449,13 @@ var _TextField = forwardRef25(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx88(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx88(_Input, { ref }) });
+    return /* @__PURE__ */ jsx90(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx90(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn52, createVar as createVar12, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { cn as cn53, createVar as createVar12, gapSpace as gapSpace8 } from "@marigold/system";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3432,13 +3468,13 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx91(
     "div",
     {
       ...props,
-      className: cn52(
+      className: cn53(
         "grid",
-        gapSpace7[space],
+        gapSpace8[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
@@ -3450,11 +3486,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn53, useClassNames as useClassNames50 } from "@marigold/system";
+import { cn as cn54, useClassNames as useClassNames50 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3468,11 +3504,11 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ jsx90(TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ jsx92(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx91, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs35 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
@@ -3484,10 +3520,10 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
     Tooltip,
     {
       ...props,
-      className: cn53("group/tooltip", classNames2.container),
+      className: cn54("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ jsx91(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx91("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx91("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ jsx93(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx93("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx93("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -3501,7 +3537,7 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 // src/XLoader/XLoader.tsx
 import { forwardRef as forwardRef26 } from "react";
 import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx92, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs36 } from "react/jsx-runtime";
 var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
   SVG5,
   {
@@ -3512,13 +3548,13 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ jsx92("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx94("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ jsx94(
         "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__ */ jsx92(
+          children: /* @__PURE__ */ jsx94(
             "animate",
             {
               attributeName: "opacity",
@@ -3531,12 +3567,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx94(
         "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__ */ jsx92(
+          children: /* @__PURE__ */ jsx94(
             "animate",
             {
               attributeName: "opacity",
@@ -3549,12 +3585,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx94(
         "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__ */ jsx92(
+          children: /* @__PURE__ */ jsx94(
             "animate",
             {
               attributeName: "opacity",
@@ -3567,12 +3603,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx94(
         "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__ */ jsx92(
+          children: /* @__PURE__ */ jsx94(
             "animate",
             {
               attributeName: "opacity",
@@ -3585,12 +3621,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx94(
         "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__ */ jsx92(
+          children: /* @__PURE__ */ jsx94(
             "animate",
             {
               attributeName: "opacity",
@@ -3603,12 +3639,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx94(
         "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__ */ jsx92(
+          children: /* @__PURE__ */ jsx94(
             "animate",
             {
               attributeName: "opacity",
@@ -3621,12 +3657,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx94(
         "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__ */ jsx92(
+          children: /* @__PURE__ */ jsx94(
             "animate",
             {
               attributeName: "opacity",
@@ -3639,12 +3675,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx94(
         "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__ */ jsx92(
+          children: /* @__PURE__ */ jsx94(
             "animate",
             {
               attributeName: "opacity",
@@ -3657,12 +3693,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx94(
         "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__ */ jsx92(
+          children: /* @__PURE__ */ jsx94(
             "animate",
             {
               attributeName: "opacity",
@@ -3675,12 +3711,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx94(
         "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__ */ jsx92(
+          children: /* @__PURE__ */ jsx94(
             "animate",
             {
               attributeName: "opacity",
@@ -3693,12 +3729,12 @@ var XLoader = forwardRef26((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx92(
+      /* @__PURE__ */ jsx94(
         "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__ */ jsx92(
+          children: /* @__PURE__ */ jsx94(
             "animate",
             {
               attributeName: "opacity",
@@ -3726,15 +3762,15 @@ var useTabContext = () => useContext15(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn54 } from "@marigold/system";
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { cn as cn55 } from "@marigold/system";
+import { jsx as jsx95 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx95(
     Tab,
     {
       ...props,
-      className: cn54(
+      className: cn55(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3745,15 +3781,15 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn55, gapSpace as gapSpace8 } from "@marigold/system";
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { cn as cn56, gapSpace as gapSpace9 } from "@marigold/system";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx96(
     TabList,
     {
       ...props,
-      className: cn55("flex", gapSpace8[space], classNames2.tabsList),
+      className: cn56("flex", gapSpace9[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -3761,14 +3797,14 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 import { TabPanel } from "react-aria-components";
-import { jsx as jsx95 } from "react/jsx-runtime";
+import { jsx as jsx97 } from "react/jsx-runtime";
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx95(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ jsx97(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx96 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
@@ -3779,7 +3815,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     size,
     variant
   });
-  return /* @__PURE__ */ jsx96(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx96(Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ jsx98(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx98(Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -3816,6 +3852,7 @@ export {
   FieldGroupContext,
   Footer,
   Form,
+  Grid,
   _Header as Header,
   _Headline as Headline,
   I18nProvider,