@marigold/components 7.7.2 → 7.8.0

package/dist/index.js

@@ -58,6 +58,7 @@ __export(src_exports, {
   FieldGroupContext: () => FieldGroupContext,
   Footer: () => Footer,
   Form: () => import_react_aria_components21.Form,
+  Grid: () => Grid,
   Header: () => _Header,
   Headline: () => _Headline,
   I18nProvider: () => import_i18n2.I18nProvider,
@@ -1530,22 +1531,58 @@ var Footer = ({ children, variant, size, ...props }) => {
 // src/Form/Form.tsx
 var import_react_aria_components21 = require("react-aria-components");
 
-// src/Header/Header.tsx
-var import_react_aria_components22 = require("react-aria-components");
+// src/Grid/Grid.tsx
 var import_system33 = require("@marigold/system");
+
+// src/Grid/GridArea.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
+var GridArea = ({ name, children }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { style: { gridArea: name }, children });
+
+// src/Grid/Grid.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var parseGridAreas = (areas) => areas.map((area) => `"${area}"`).join("\n");
+var parseTemplateValue = (values) => values.map((val) => typeof val === "number" ? `${val}fr` : val).join(" ");
+var Grid = ({
+  children,
+  areas,
+  columns,
+  rows,
+  height = "auto",
+  space = 0,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "div",
+    {
+      className: (0, import_system33.cn)("grid", import_system33.gapSpace[space], import_system33.height[height]),
+      style: {
+        gridTemplateAreas: parseGridAreas(areas),
+        gridTemplateColumns: parseTemplateValue(columns),
+        gridTemplateRows: parseTemplateValue(rows)
+      },
+      ...props,
+      children
+    }
+  );
+};
+Grid.Area = GridArea;
+
+// src/Header/Header.tsx
+var import_react_aria_components22 = require("react-aria-components");
+var import_system34 = require("@marigold/system");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var _Header = ({ variant, size, ...props }) => {
-  const classNames2 = (0, import_system33.useClassNames)({
+  const classNames2 = (0, import_system34.useClassNames)({
     component: "Header",
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_aria_components22.Header, { className: classNames2, ...props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_aria_components22.Header, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Image/Image.tsx
-var import_system34 = require("@marigold/system");
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_system35 = require("@marigold/system");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var Image = ({
   variant,
   size,
@@ -1553,25 +1590,25 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = (0, import_system34.useClassNames)({ component: "Image", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  const classNames2 = (0, import_system35.useClassNames)({ component: "Image", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: (0, import_system34.cn)(
+      className: (0, import_system35.cn)(
         fit !== "none" && "h-full w-full",
         classNames2,
-        import_system34.objectFit[fit],
-        import_system34.objectPosition[position]
+        import_system35.objectFit[fit],
+        import_system35.objectPosition[position]
       )
     }
   );
 };
 
 // src/Inline/Inline.tsx
-var import_system35 = require("@marigold/system");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_system36 = require("@marigold/system");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Inline = ({
   space = 0,
   orientation,
@@ -1581,15 +1618,15 @@ var Inline = ({
   ...props
 }) => {
   var _a2, _b2, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system35.cn)(
+      className: (0, import_system36.cn)(
         "flex flex-wrap",
-        import_system35.gapSpace[space],
-        alignX && ((_b2 = (_a2 = import_system35.alignment) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system35.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
+        import_system36.gapSpace[space],
+        alignX && ((_b2 = (_a2 = import_system36.alignment) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system36.alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
       ),
       children
     }
@@ -1602,14 +1639,14 @@ var import_react_aria_components25 = require("react-aria-components");
 
 // src/DateField/DateInput.tsx
 var import_react_aria_components24 = require("react-aria-components");
-var import_system37 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 
 // src/DateField/DateSegment.tsx
 var import_react_aria_components23 = require("react-aria-components");
-var import_system36 = require("@marigold/system");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_system37 = require("@marigold/system");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var _DateSegment = ({ segment, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     import_react_aria_components23.DateSegment,
     {
       ...props,
@@ -1617,31 +1654,31 @@ var _DateSegment = ({ segment, ...props }) => {
       style: {
         minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
       },
-      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "span",
           {
             "aria-hidden": "true",
-            className: (0, import_system36.cn)(
+            className: (0, import_system37.cn)(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
             children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
       ] })
     }
   );
 };
 
 // src/DateField/DateInput.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var _DateInput = ({ variant, size, action, ...props }) => {
-  const classNames2 = (0, import_system37.useClassNames)({ component: "DateField", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_aria_components24.Group, { className: classNames2.field, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_aria_components24.DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(_DateSegment, { className: classNames2.segment, segment }) }),
-    action ? action : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  const classNames2 = (0, import_system38.useClassNames)({ component: "DateField", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_aria_components24.Group, { className: classNames2.field, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components24.DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(_DateSegment, { className: classNames2.segment, segment }) }),
+    action ? action : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       "svg",
       {
         "data-testid": "action",
@@ -1649,14 +1686,14 @@ var _DateInput = ({ variant, size, action, ...props }) => {
         viewBox: "0 0 24 24",
         width: 24,
         height: 24,
-        children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
       }
     ) })
   ] });
 };
 
 // src/DateField/DateField.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var _DateField = (0, import_react24.forwardRef)(
   ({
     variant,
@@ -1675,7 +1712,7 @@ var _DateField = (0, import_react24.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       FieldBase,
       {
         as: import_react_aria_components25.DateField,
@@ -1683,7 +1720,7 @@ var _DateField = (0, import_react24.forwardRef)(
         size,
         ref,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(_DateInput, { action })
+        children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(_DateInput, { action })
       }
     );
   }
@@ -1692,11 +1729,11 @@ var _DateField = (0, import_react24.forwardRef)(
 // src/Calendar/Calendar.tsx
 var import_react29 = require("react");
 var import_react_aria_components32 = require("react-aria-components");
-var import_system42 = require("@marigold/system");
+var import_system43 = require("@marigold/system");
 
 // src/Calendar/CalendarGrid.tsx
 var import_react_aria_components27 = require("react-aria-components");
-var import_system39 = require("@marigold/system");
+var import_system40 = require("@marigold/system");
 
 // src/Calendar/CalendarGridHeader.tsx
 var import_date = require("@internationalized/date");
@@ -1704,8 +1741,8 @@ var import_react25 = require("react");
 var import_react_aria_components26 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
 var import_i18n3 = require("@react-aria/i18n");
-var import_system38 = require("@marigold/system");
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_system39 = require("@marigold/system");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
   const state = (0, import_react25.useContext)(import_react_aria_components26.CalendarStateContext);
   const { headerProps } = (0, import_calendar.useCalendarGrid)(props, state);
@@ -1722,21 +1759,21 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames2 = (0, import_system38.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
+  const classNames2 = (0, import_system39.useClassNames)({ component: "Calendar" });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("thead", { ...headerProps, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var _CalendarGrid = () => {
-  const classNames2 = (0, import_system39.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_aria_components27.CalendarGrid, { className: classNames2.calendarGrid, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(CalendarGridHeader, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_aria_components27.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  const classNames2 = (0, import_system40.useClassNames)({ component: "Calendar" });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_aria_components27.CalendarGrid, { className: classNames2.calendarGrid, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(CalendarGridHeader, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_aria_components27.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
       import_react_aria_components27.CalendarCell,
       {
         date,
-        className: (0, import_system39.cn)(
+        className: (0, import_system40.cn)(
           "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
         )
@@ -1749,7 +1786,7 @@ var _CalendarGrid = () => {
 var import_react26 = require("react");
 var import_react_aria_components28 = require("react-aria-components");
 var import_icons = require("@marigold/icons");
-var import_system40 = require("@marigold/system");
+var import_system41 = require("@marigold/system");
 
 // src/Calendar/useFormattedMonths.tsx
 var import_i18n4 = require("@react-aria/i18n");
@@ -1768,7 +1805,7 @@ function useFormattedMonths(timeZone, focusedDate) {
 }
 
 // src/Calendar/CalendarListBox.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function CalendarListBox({
   type,
   isDisabled,
@@ -1777,17 +1814,17 @@ function CalendarListBox({
   const state = (0, import_react26.useContext)(import_react_aria_components28.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = (0, import_system40.useClassNames)({ component: "Select" });
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  const { select: selectClassNames } = (0, import_system41.useClassNames)({ component: "Select" });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "button",
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: (0, import_system40.cn)(buttonStyles, selectClassNames),
+      className: (0, import_system41.cn)(buttonStyles, selectClassNames),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_icons.ChevronDown, {})
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_icons.ChevronDown, {})
       ]
     }
   );
@@ -1796,39 +1833,39 @@ function CalendarListBox({
 // src/Calendar/MonthControls.tsx
 var import_react_aria_components29 = require("react-aria-components");
 var import_icons2 = require("@marigold/icons");
-var import_system41 = require("@marigold/system");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_system42 = require("@marigold/system");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function MonthControls() {
-  const classNames2 = (0, import_system41.useClassNames)({ component: "Calendar" });
-  const buttonClassNames = (0, import_system41.useClassNames)({ component: "Button" });
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  const classNames2 = (0, import_system42.useClassNames)({ component: "Calendar" });
+  const buttonClassNames = (0, import_system42.useClassNames)({ component: "Button" });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
-      className: (0, import_system41.cn)(
+      className: (0, import_system42.cn)(
         "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
         classNames2.calendarControllers
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_react_aria_components29.Button,
           {
-            className: (0, import_system41.cn)(
+            className: (0, import_system42.cn)(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
             slot: "previous",
-            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons2.ChevronLeft, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons2.ChevronLeft, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_react_aria_components29.Button,
           {
-            className: (0, import_system41.cn)(
+            className: (0, import_system42.cn)(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
             slot: "next",
-            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_icons2.ChevronRight, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_icons2.ChevronRight, {})
           }
         )
       ]
@@ -1840,7 +1877,7 @@ var MonthControls_default = MonthControls;
 // src/Calendar/MonthListBox.tsx
 var import_react27 = require("react");
 var import_react_aria_components30 = require("react-aria-components");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 var MonthListBox = ({ setSelectedDropdown }) => {
   const state = (0, import_react27.useContext)(import_react_aria_components30.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
@@ -1849,13 +1886,13 @@ var MonthListBox = ({ setSelectedDropdown }) => {
     let date = state.focusedDate.set({ month: value });
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "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__ */ (0, import_jsx_runtime48.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           _Button,
           {
             slot: "previous",
@@ -1879,7 +1916,7 @@ var MonthListBox_default = MonthListBox;
 var import_react28 = require("react");
 var import_react_aria_components31 = require("react-aria-components");
 var import_i18n5 = require("@react-aria/i18n");
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var YearListBox = ({ setSelectedDropdown }) => {
   const state = (0, import_react28.useContext)(import_react_aria_components31.CalendarStateContext);
   const years = [];
@@ -1909,19 +1946,19 @@ var YearListBox = ({ setSelectedDropdown }) => {
     let date = years[index].value;
     state.setFocusedDate(date);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "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__ */ (0, import_jsx_runtime49.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("li", { className: "flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "div",
           {
             ref: isActive ? activeButtonRef : null,
             style: { height: "100%", width: "100%" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
               _Button,
               {
                 slot: "previous",
@@ -1946,7 +1983,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
 var YearListBox_default = YearListBox;
 
 // src/Calendar/Calendar.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var _Calendar = ({
   disabled,
   readOnly,
@@ -1959,24 +1996,24 @@ var _Calendar = ({
     isReadOnly: readOnly,
     ...rest
   };
-  const classNames2 = (0, import_system42.useClassNames)({ component: "Calendar" });
+  const classNames2 = (0, import_system43.useClassNames)({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = (0, import_react29.useState)();
   const ViewMap = {
-    month: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MonthListBox_default, { setSelectedDropdown }),
-    year: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(YearListBox_default, { setSelectedDropdown })
+    month: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(MonthListBox_default, { setSelectedDropdown }),
+    year: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(YearListBox_default, { setSelectedDropdown })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     import_react_aria_components32.Calendar,
     {
-      className: (0, import_system42.cn)(
+      className: (0, import_system43.cn)(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4",
         classNames2.calendar
       ),
       ...props,
-      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex w-full gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "mb-4 flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex w-full gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               CalendarListBox,
               {
                 type: "month",
@@ -1984,7 +2021,7 @@ var _Calendar = ({
                 setSelectedDropdown
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
               CalendarListBox,
               {
                 type: "year",
@@ -1993,9 +2030,9 @@ var _Calendar = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(MonthControls_default, {})
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(MonthControls_default, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(_CalendarGrid, {})
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(_CalendarGrid, {})
       ] })
     }
   );
@@ -2003,8 +2040,8 @@ var _Calendar = ({
 
 // src/DatePicker/DatePicker.tsx
 var import_react_aria_components33 = require("react-aria-components");
-var import_system43 = require("@marigold/system");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_system44 = require("@marigold/system");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var _DatePicker = ({
   disabled,
   required,
@@ -2025,22 +2062,22 @@ var _DatePicker = ({
     granularity,
     ...rest
   };
-  const classNames2 = (0, import_system43.useClassNames)({
+  const classNames2 = (0, import_system44.useClassNames)({
     component: "DatePicker",
     size,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(FieldBase, { as: import_react_aria_components33.DatePicker, variant, size, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(FieldBase, { as: import_react_aria_components33.DatePicker, variant, size, ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       _DateInput,
       {
-        action: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        action: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           _Button,
           {
             size: "small",
             disabled,
             className: classNames2.button,
-            children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               "svg",
               {
                 "data-testid": "action",
@@ -2048,27 +2085,27 @@ var _DatePicker = ({
                 width: 24,
                 height: 24,
                 fill: "currentColor",
-                children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
               }
             )
           }
         ) })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(_Calendar, { disabled }) })
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(_Calendar, { disabled }) })
   ] });
 };
 
 // src/Inset/Inset.tsx
-var import_system44 = require("@marigold/system");
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+var import_system45 = require("@marigold/system");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
   "div",
   {
-    className: (0, import_system44.cn)(
-      space && import_system44.paddingSpace[space],
-      !space && spaceX && import_system44.paddingSpaceX[spaceX],
-      !space && spaceY && import_system44.paddingSpaceY[spaceY]
+    className: (0, import_system45.cn)(
+      space && import_system45.paddingSpace[space],
+      !space && spaceX && import_system45.paddingSpaceX[spaceX],
+      !space && spaceY && import_system45.paddingSpaceY[spaceY]
     ),
     children
   }
@@ -2077,21 +2114,21 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_
 // src/Link/Link.tsx
 var import_react30 = require("react");
 var import_react_aria_components34 = require("react-aria-components");
-var import_system45 = require("@marigold/system");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_system46 = require("@marigold/system");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var _Link = (0, import_react30.forwardRef)(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = (0, import_system45.useClassNames)({
+    const classNames2 = (0, import_system46.useClassNames)({
       component: "Link",
       variant,
       size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_aria_components34.Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_aria_components34.Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
 // src/List/List.tsx
-var import_system46 = require("@marigold/system");
+var import_system47 = require("@marigold/system");
 
 // src/List/Context.ts
 var import_react31 = require("react");
@@ -2099,14 +2136,14 @@ var ListContext = (0, import_react31.createContext)({});
 var useListContext = () => (0, import_react31.useContext)(ListContext);
 
 // src/List/ListItem.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var ListItem = ({ children, ...props }) => {
   const { classNames: classNames2 } = useListContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("li", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { ...props, className: classNames2, children });
 };
 
 // src/List/List.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var List = ({
   as = "ul",
   children,
@@ -2115,38 +2152,38 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = (0, import_system46.useClassNames)({ component: "List", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
+  const classNames2 = (0, import_system47.useClassNames)({ component: "List", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 var import_react_aria_components37 = require("react-aria-components");
-var import_system49 = require("@marigold/system");
+var import_system50 = require("@marigold/system");
 
 // src/Menu/MenuItem.tsx
 var import_react_aria_components35 = require("react-aria-components");
-var import_system47 = require("@marigold/system");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_system48 = require("@marigold/system");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var _MenuItem = ({ children, ...props }) => {
-  const classNames2 = (0, import_system47.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_react_aria_components35.MenuItem, { ...props, className: classNames2.item, children });
+  const classNames2 = (0, import_system48.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_aria_components35.MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 var import_react_aria_components36 = require("react-aria-components");
-var import_system48 = require("@marigold/system");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_system49 = require("@marigold/system");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = (0, import_system48.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_react_aria_components36.Section, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(_Header, { className: className.section, children: title }),
+  const className = (0, import_system49.useClassNames)({ component: "Menu" });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components36.Section, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(_Header, { className: className.section, children: title }),
     children
   ] });
 };
 
 // src/Menu/Menu.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var _Menu = ({
   children,
   label,
@@ -2157,10 +2194,10 @@ var _Menu = ({
   placement,
   ...props
 }) => {
-  const classNames2 = (0, import_system49.useClassNames)({ component: "Menu", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_react_aria_components37.MenuTrigger, { ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(_Button, { variant: "menu", disabled, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_aria_components37.Menu, { ...props, className: classNames2.container, children }) })
+  const classNames2 = (0, import_system50.useClassNames)({ component: "Menu", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components37.MenuTrigger, { ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(_Button, { variant: "menu", disabled, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_aria_components37.Menu, { ...props, className: classNames2.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
@@ -2168,33 +2205,33 @@ _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
 var import_react_aria_components38 = require("react-aria-components");
-var import_system50 = require("@marigold/system");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_system51 = require("@marigold/system");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var ActionMenu = ({
   variant,
   size,
   disabled,
   ...props
 }) => {
-  const classNames2 = (0, import_system50.useClassNames)({ component: "Menu", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components38.MenuTrigger, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_system50.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("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__ */ (0, import_jsx_runtime59.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_aria_components38.Menu, { ...props, className: classNames2.container, children: props.children }) })
+  const classNames2 = (0, import_system51.useClassNames)({ component: "Menu", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_aria_components38.MenuTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_system51.SVG, { viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("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__ */ (0, import_jsx_runtime61.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_aria_components38.Menu, { ...props, className: classNames2.container, children: props.children }) })
   ] });
 };
 
 // src/Message/Message.tsx
 var import_react32 = require("react");
-var import_system51 = require("@marigold/system");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_system52 = require("@marigold/system");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var icons = {
-  success: () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  success: () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2204,13 +2241,13 @@ var icons = {
       )
     }
   ),
-  info: () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  info: () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2220,13 +2257,13 @@ var icons = {
       )
     }
   ),
-  warning: () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  warning: () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2236,13 +2273,13 @@ var icons = {
       )
     }
   ),
-  error: () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  error: () => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2255,30 +2292,30 @@ var icons = {
 };
 var Message = (0, import_react32.forwardRef)(
   ({ messageTitle, variant = "info", size, children, ...props }, ref) => {
-    const classNames2 = (0, import_system51.useClassNames)({ component: "Message", variant, size });
+    const classNames2 = (0, import_system52.useClassNames)({ component: "Message", variant, size });
     const Icon4 = icons[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
       "div",
       {
-        className: (0, import_system51.cn)(
+        className: (0, import_system52.cn)(
           "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
           classNames2.container
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_system51.cn)("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon4, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: (0, import_system52.cn)("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon4, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
             "div",
             {
-              className: (0, import_system51.cn)(
+              className: (0, import_system52.cn)(
                 "col-start-2 row-start-1 self-center",
                 classNames2.title
               ),
               children: messageTitle
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: (0, import_system51.cn)("col-start-2", classNames2.content), children })
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: (0, import_system52.cn)("col-start-2", classNames2.content), children })
         ]
       }
     );
@@ -2291,12 +2328,12 @@ var import_data2 = require("@react-stately/data");
 
 // src/TagGroup/Tag.tsx
 var import_react_aria_components40 = require("react-aria-components");
-var import_system53 = require("@marigold/system");
+var import_system54 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
 var import_react_aria_components39 = require("react-aria-components");
-var import_system52 = require("@marigold/system");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_system53 = require("@marigold/system");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var _TagGroup = ({
   width,
   items,
@@ -2306,8 +2343,8 @@ var _TagGroup = ({
   size,
   ...rest
 }) => {
-  const classNames2 = (0, import_system52.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FieldBase, { as: import_react_aria_components39.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  const classNames2 = (0, import_system53.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(FieldBase, { as: import_react_aria_components39.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     import_react_aria_components39.TagList,
     {
       items,
@@ -2319,25 +2356,25 @@ var _TagGroup = ({
 };
 
 // src/TagGroup/Tag.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_react_aria_components40.Button, { slot: "remove", className, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_react_aria_components40.Button, { slot: "remove", className, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var _Tag = ({ variant, size, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames2 = (0, import_system53.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  const classNames2 = (0, import_system54.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     import_react_aria_components40.Tag,
     {
       textValue,
       ...props,
-      className: (0, import_system53.cn)("data-[selection-mode]:cursor-pointer", classNames2.tag),
-      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+      className: (0, import_system54.cn)("data-[selection-mode]:cursor-pointer", classNames2.tag),
+      children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
         children,
-        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           CloseButton2,
           {
-            className: (0, import_system53.cn)("flex items-center", classNames2.closeButton)
+            className: (0, import_system54.cn)("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -2347,7 +2384,7 @@ var _Tag = ({ variant, size, children, ...props }) => {
 _Tag.Group = _TagGroup;
 
 // src/Multiselect/Multiselect.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var Item2 = (_) => null;
 var Multiselect = ({
   label,
@@ -2385,18 +2422,18 @@ var Multiselect = ({
     }, 0);
     input.focus();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       _Tag.Group,
       {
         items: selected,
         allowsRemoving: true,
         onRemove: setUnselected,
         renderEmptyState: () => null,
-        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(_Tag, { id: item.id, children: item.children }, item.id)
+        children: (item) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(_Tag, { id: item.id, children: item.children }, item.id)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
       _ComboBox,
       {
         value,
@@ -2406,7 +2443,7 @@ var Multiselect = ({
         disabled: unselected.length === 0,
         placeholder: unselected.length === 0 ? "All items selected" : "",
         ...props,
-        children: unselected.map((item) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(_ComboBox.Item, { id: item.id, children: item.children }, item.id))
+        children: unselected.map((item) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(_ComboBox.Item, { id: item.id, children: item.children }, item.id))
       }
     )
   ] });
@@ -2416,13 +2453,13 @@ Multiselect.Item = Item2;
 // src/NumberField/NumberField.tsx
 var import_react34 = require("react");
 var import_react_aria_components42 = require("react-aria-components");
-var import_system55 = require("@marigold/system");
+var import_system56 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
 var import_react_aria_components41 = require("react-aria-components");
-var import_system54 = require("@marigold/system");
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+var import_system55 = require("@marigold/system");
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -2430,7 +2467,7 @@ var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("svg", { width: 1
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -2440,10 +2477,10 @@ var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("svg", { width:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     import_react_aria_components41.Button,
     {
-      className: (0, import_system54.cn)(
+      className: (0, import_system55.cn)(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2451,13 +2488,13 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon4, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var _NumberField = (0, import_react34.forwardRef)(
   ({
     variant,
@@ -2469,7 +2506,7 @@ var _NumberField = (0, import_react34.forwardRef)(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system55.useClassNames)({
+    const classNames2 = (0, import_system56.useClassNames)({
       component: "NumberField",
       size,
       variant
@@ -2482,8 +2519,8 @@ var _NumberField = (0, import_react34.forwardRef)(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FieldBase, { as: import_react_aria_components42.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_react_aria_components42.Group, { className: (0, import_system55.cn)("flex items-stretch", classNames2.group), children: [
-      showStepper && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FieldBase, { as: import_react_aria_components42.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_react_aria_components42.Group, { className: (0, import_system56.cn)("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2491,7 +2528,7 @@ var _NumberField = (0, import_react34.forwardRef)(
           slot: "decrement"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         _Input,
         {
           ref,
@@ -2500,7 +2537,7 @@ var _NumberField = (0, import_react34.forwardRef)(
           className: classNames2.input
         }
       ) }),
-      showStepper && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      showStepper && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2515,7 +2552,7 @@ var _NumberField = (0, import_react34.forwardRef)(
 // src/Radio/Radio.tsx
 var import_react36 = require("react");
 var import_react_aria_components44 = require("react-aria-components");
-var import_system57 = require("@marigold/system");
+var import_system58 = require("@marigold/system");
 
 // src/Radio/Context.ts
 var import_react35 = require("react");
@@ -2526,8 +2563,8 @@ var useRadioGroupContext = () => (0, import_react35.useContext)(RadioGroupContex
 
 // src/Radio/RadioGroup.tsx
 var import_react_aria_components43 = require("react-aria-components");
-var import_system56 = require("@marigold/system");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_system57 = require("@marigold/system");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var _RadioGroup = ({
   variant,
   size,
@@ -2543,7 +2580,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = (0, import_system56.useClassNames)({ component: "Radio", variant, size });
+  const classNames2 = (0, import_system57.useClassNames)({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2551,7 +2588,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     FieldBase,
     {
       as: import_react_aria_components43.RadioGroup,
@@ -2562,18 +2599,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system56.cn)(
+          className: (0, import_system57.cn)(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -2581,33 +2618,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
   "div",
   {
-    className: (0, import_system57.cn)(
+    className: (0, import_system58.cn)(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Dot, {}) : null
   }
 );
 var _Radio = (0, import_react36.forwardRef)(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = (0, import_system57.useClassNames)({
+    const classNames2 = (0, import_system58.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       import_react_aria_components44.Radio,
       {
         ref,
-        className: (0, import_system57.cn)(
+        className: (0, import_system58.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -2616,18 +2653,18 @@ var _Radio = (0, import_react36.forwardRef)(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             Icon3,
             {
               checked: isSelected,
-              className: (0, import_system57.cn)(
+              className: (0, import_system58.cn)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: classNames2.label, children })
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -2638,7 +2675,7 @@ _Radio.Group = _RadioGroup;
 // src/SearchField/SearchField.tsx
 var import_react37 = require("react");
 var import_react_aria_components45 = require("react-aria-components");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var _SearchField = (0, import_react37.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
@@ -2648,7 +2685,7 @@ var _SearchField = (0, import_react37.forwardRef)(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(FieldBase, { as: import_react_aria_components45.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FieldBase, { as: import_react_aria_components45.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       SearchInput,
       {
         ref,
@@ -2661,8 +2698,8 @@ var _SearchField = (0, import_react37.forwardRef)(
 // src/Select/Select.tsx
 var import_react38 = require("react");
 var import_react_aria_components46 = require("react-aria-components");
-var import_system58 = require("@marigold/system");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_system59 = require("@marigold/system");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var _Select = (0, import_react38.forwardRef)(
   ({
     disabled,
@@ -2683,22 +2720,22 @@ var _Select = (0, import_react38.forwardRef)(
       onSelectionChange: onChange,
       ...rest
     };
-    const classNames2 = (0, import_system58.useClassNames)({ component: "Select", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(FieldBase, { isOpen: true, as: import_react_aria_components46.Select, ref, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+    const classNames2 = (0, import_system59.useClassNames)({ component: "Select", variant, size });
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(FieldBase, { isOpen: true, as: import_react_aria_components46.Select, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
         import_react_aria_components46.Button,
         {
-          className: (0, import_system58.cn)(
+          className: (0, import_system59.cn)(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames2.select
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react_aria_components46.SelectValue, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChevronDown, { className: "size-4" })
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_react_aria_components46.SelectValue, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronDown, { className: "size-4" })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -2708,7 +2745,7 @@ _Select.Section = _ListBox.Section;
 // src/SelectList/SelectList.tsx
 var import_react41 = require("react");
 var import_react_aria_components48 = require("react-aria-components");
-var import_system60 = require("@marigold/system");
+var import_system61 = require("@marigold/system");
 
 // src/SelectList/Context.ts
 var import_react39 = require("react");
@@ -2720,21 +2757,21 @@ var useSelectListContext = () => (0, import_react39.useContext)(SelectListContex
 // src/SelectList/SelectListItem.tsx
 var import_react40 = require("react");
 var import_react_aria_components47 = require("react-aria-components");
-var import_system59 = require("@marigold/system");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_system60 = require("@marigold/system");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var _SelectListItem = (0, import_react40.forwardRef)(
   ({ children, ...props }, ref) => {
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames2 } = useSelectListContext();
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       import_react_aria_components47.GridListItem,
       {
         textValue,
         ...props,
-        className: (0, import_system59.cn)("flex items-center", classNames2 == null ? void 0 : classNames2.option),
+        className: (0, import_system60.cn)("flex items-center", classNames2 == null ? void 0 : classNames2.option),
         ref,
-        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
-          selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FieldGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(_Checkbox, { slot: "selection" }) }),
+        children: ({ selectionMode }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
+          selectionMode === "multiple" && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(FieldGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Checkbox, { slot: "selection" }) }),
           children
         ] })
       }
@@ -2743,20 +2780,20 @@ var _SelectListItem = (0, import_react40.forwardRef)(
 );
 
 // src/SelectList/SelectList.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var _SelectList = (0, import_react41.forwardRef)(
   ({ onChange, ...rest }, ref) => {
-    const classNames2 = (0, import_system60.useClassNames)({ component: "ListBox" });
+    const classNames2 = (0, import_system61.useClassNames)({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       import_react_aria_components48.GridList,
       {
         ...props,
         ref,
-        className: (0, import_system60.cn)(
+        className: (0, import_system61.cn)(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -2768,19 +2805,19 @@ var _SelectList = (0, import_react41.forwardRef)(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-var import_system61 = require("@marigold/system");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_system62 = require("@marigold/system");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
   "div",
   {
     ...props,
-    className: (0, import_system61.cn)(["sticky h-[--height] overflow-auto", import_system61.width[width]]),
-    style: (0, import_system61.createVar)({ height }),
+    className: (0, import_system62.cn)(["sticky h-[--height] overflow-auto", import_system62.width[width]]),
+    style: (0, import_system62.createVar)({ height }),
     children
   }
 );
@@ -2788,8 +2825,8 @@ var Scrollable = ({
 // src/Slider/Slider.tsx
 var import_react42 = require("react");
 var import_react_aria_components49 = require("react-aria-components");
-var import_system62 = require("@marigold/system");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_system63 = require("@marigold/system");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var _Slider = (0, import_react42.forwardRef)(
   ({
     thumbLabels,
@@ -2799,7 +2836,7 @@ var _Slider = (0, import_react42.forwardRef)(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system62.useClassNames)({
+    const classNames2 = (0, import_system63.useClassNames)({
       component: "Slider",
       variant,
       size
@@ -2808,27 +2845,27 @@ var _Slider = (0, import_react42.forwardRef)(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
       import_react_aria_components49.Slider,
       {
-        className: (0, import_system62.cn)(
+        className: (0, import_system63.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
-          import_system62.width[width]
+          import_system63.width[width]
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(_Label, { children: props.children }),
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_react_aria_components49.SliderOutput, { className: (0, import_system62.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(_Label, { children: props.children }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_react_aria_components49.SliderOutput, { className: (0, import_system63.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             import_react_aria_components49.SliderTrack,
             {
-              className: (0, import_system62.cn)("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              className: (0, import_system63.cn)("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                 import_react_aria_components49.SliderThumb,
                 {
-                  className: (0, import_system62.cn)("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: (0, import_system63.cn)("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -2843,12 +2880,12 @@ var _Slider = (0, import_react42.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { ...props, role: "separator", className: "grow" });
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_system63 = require("@marigold/system");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_system64 = require("@marigold/system");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var Stack = ({
   children,
   space = 0,
@@ -2859,14 +2896,14 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     "div",
     {
-      className: (0, import_system63.cn)(
+      className: (0, import_system64.cn)(
         "flex flex-col",
-        import_system63.gapSpace[space],
-        alignX && ((_b = (_a = import_system63.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system63.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system64.gapSpace[space],
+        alignX && ((_b = (_a = import_system64.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system64.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -2878,8 +2915,8 @@ var Stack = ({
 // src/Switch/Switch.tsx
 var import_react43 = require("react");
 var import_react_aria_components50 = require("react-aria-components");
-var import_system64 = require("@marigold/system");
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_system65 = require("@marigold/system");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var _Switch = (0, import_react43.forwardRef)(
   ({
     variant,
@@ -2891,37 +2928,37 @@ var _Switch = (0, import_react43.forwardRef)(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system64.useClassNames)({ component: "Switch", size, variant });
+    const classNames2 = (0, import_system65.useClassNames)({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
       import_react_aria_components50.Switch,
       {
         ...props,
         ref,
-        className: (0, import_system64.cn)(
-          import_system64.width[width],
+        className: (0, import_system65.cn)(
+          import_system65.width[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
             "div",
             {
-              className: (0, import_system64.cn)(
+              className: (0, import_system65.cn)(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                 "div",
                 {
-                  className: (0, import_system64.cn)(
+                  className: (0, import_system65.cn)(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -2943,7 +2980,7 @@ var _Switch = (0, import_react43.forwardRef)(
 var import_react51 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system71 = require("@marigold/system");
+var import_system72 = require("@marigold/system");
 
 // src/Table/Context.tsx
 var import_react44 = require("react");
@@ -2952,10 +2989,10 @@ var useTableContext = () => (0, import_react44.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var TableBody = ({ children }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
@@ -2963,8 +3000,8 @@ var import_react45 = require("react");
 var import_focus2 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
 var import_utils3 = require("@react-aria/utils");
-var import_system65 = require("@marigold/system");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_system66 = require("@marigold/system");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var TableCell = ({ cell, align = "left" }) => {
   const ref = (0, import_react45.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
@@ -2986,12 +3023,12 @@ var TableCell = ({ cell, align = "left" }) => {
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = (0, import_focus2.useFocusRing)();
-  const stateProps = (0, import_system65.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  const stateProps = (0, import_system66.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system65.cn)(classNames2 == null ? void 0 : classNames2.cell),
+      className: (0, import_system66.cn)(classNames2 == null ? void 0 : classNames2.cell),
       ...(0, import_utils3.mergeProps)(cellProps, focusProps),
       ...stateProps,
       align,
@@ -3005,7 +3042,7 @@ var import_react46 = require("react");
 var import_focus3 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
 var import_utils4 = require("@react-aria/utils");
-var import_system66 = require("@marigold/system");
+var import_system67 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3028,7 +3065,7 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
   const ref = (0, import_react46.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -3044,15 +3081,15 @@ var TableCheckboxCell = ({ cell }) => {
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = (0, import_focus3.useFocusRing)();
-  const stateProps = (0, import_system66.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  const stateProps = (0, import_system67.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system66.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: (0, import_system67.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...(0, import_utils4.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
@@ -3064,9 +3101,9 @@ var import_interactions = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils6 = require("@react-aria/utils");
 var import_icons3 = require("@marigold/icons");
-var import_system67 = require("@marigold/system");
 var import_system68 = require("@marigold/system");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_system69 = require("@marigold/system");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column,
   width = "auto",
@@ -3084,22 +3121,22 @@ var TableColumnHeader = ({
   );
   const { hoverProps, isHovered } = (0, import_interactions.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus4.useFocusRing)();
-  const stateProps = (0, import_system67.useStateProps)({
+  const stateProps = (0, import_system68.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: (0, import_system67.cn)("cursor-default", import_system68.width[width], classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system68.cn)("cursor-default", import_system69.width[width], classNames2 == null ? void 0 : classNames2.header),
       ...(0, import_utils6.mergeProps)(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__ */ (0, import_jsx_runtime80.jsx)(import_icons3.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_icons3.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_icons3.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__ */ (0, import_jsx_runtime82.jsx)(import_icons3.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_icons3.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_icons3.SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3107,10 +3144,10 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     "thead",
     {
       ...rowGroupProps,
@@ -3123,12 +3160,12 @@ var TableHeader = ({ stickyHeader, children }) => {
 // src/Table/TableHeaderRow.tsx
 var import_react48 = require("react");
 var import_table6 = require("@react-aria/table");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = (0, import_react48.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -3137,13 +3174,13 @@ var import_focus5 = require("@react-aria/focus");
 var import_interactions2 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils7 = require("@react-aria/utils");
-var import_system69 = require("@marigold/system");
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_system70 = require("@marigold/system");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
   const ref = (0, import_react49.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = (0, import_system69.useClassNames)({
+  const classNames2 = (0, import_system70.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3161,18 +3198,18 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = (0, import_interactions2.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system69.useStateProps)({
+  const stateProps = (0, import_system70.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     "tr",
     {
       ref,
-      className: (0, import_system69.cn)(
+      className: (0, import_system70.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3191,8 +3228,8 @@ var import_focus6 = require("@react-aria/focus");
 var import_interactions3 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils8 = require("@react-aria/utils");
-var import_system70 = require("@marigold/system");
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_system71 = require("@marigold/system");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column,
   width = "auto",
@@ -3210,25 +3247,25 @@ var TableSelectAllCell = ({
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
   const { hoverProps, isHovered } = (0, import_interactions3.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus6.useFocusRing)();
-  const stateProps = (0, import_system70.useStateProps)({
+  const stateProps = (0, import_system71.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     "th",
     {
       ref,
-      className: (0, import_system70.cn)(import_system70.width[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: (0, import_system71.cn)(import_system71.width[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...(0, import_utils8.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var Table = ({
   variant,
   size,
@@ -3250,21 +3287,21 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames2 = (0, import_system71.useClassNames)({
+  const classNames2 = (0, import_system72.useClassNames)({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
         "table",
         {
           ref: tableRef,
-          className: (0, import_system71.cn)(
+          className: (0, import_system72.cn)(
             "group/table",
             "border-collapse whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3272,10 +3309,10 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(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__ */ (0, import_jsx_runtime85.jsx)(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
@@ -3283,7 +3320,7 @@ var Table = ({
                     align: (_c = column.props) == null ? void 0 : _c.align
                   },
                   column.key
-                ) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                   TableColumnHeader,
                   {
                     width: (_d = column.props) == null ? void 0 : _d.width,
@@ -3294,12 +3331,12 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(TableBody, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(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__ */ (0, import_jsx_runtime85.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -3323,8 +3360,8 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_system72 = require("@marigold/system");
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_system73 = require("@marigold/system");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var Text2 = ({
   variant,
   size,
@@ -3337,27 +3374,27 @@ var Text2 = ({
   children,
   ...props
 }) => {
-  const theme = (0, import_system72.useTheme)();
-  const classNames2 = (0, import_system72.useClassNames)({
+  const theme = (0, import_system73.useTheme)();
+  const classNames2 = (0, import_system73.useClassNames)({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     "p",
     {
       ...props,
-      className: (0, import_system72.cn)(
+      className: (0, import_system73.cn)(
         "text-[--color] outline-[--outline]",
         classNames2,
-        fontStyle && import_system72.textStyle[fontStyle],
-        align && import_system72.textAlign[align],
-        cursor && import_system72.cursorStyle[cursor],
-        weight && import_system72.fontWeight[weight],
-        fontSize && import_system72.textSize[fontSize]
+        fontStyle && import_system73.textStyle[fontStyle],
+        align && import_system73.textAlign[align],
+        cursor && import_system73.cursorStyle[cursor],
+        weight && import_system73.fontWeight[weight],
+        fontSize && import_system73.textSize[fontSize]
       ),
-      style: (0, import_system72.createVar)({
-        color: color && (0, import_system72.getColor)(
+      style: (0, import_system73.createVar)({
+        color: color && (0, import_system73.getColor)(
           theme,
           color,
           color
@@ -3372,8 +3409,8 @@ var Text2 = ({
 // src/TextArea/TextArea.tsx
 var import_react52 = require("react");
 var import_react_aria_components51 = require("react-aria-components");
-var import_system73 = require("@marigold/system");
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_system74 = require("@marigold/system");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var _TextArea = (0, import_react52.forwardRef)(
   ({
     variant,
@@ -3385,7 +3422,7 @@ var _TextArea = (0, import_react52.forwardRef)(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system73.useClassNames)({ component: "TextArea", variant, size });
+    const classNames2 = (0, import_system74.useClassNames)({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3393,14 +3430,14 @@ var _TextArea = (0, import_react52.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(FieldBase, { as: import_react_aria_components51.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react_aria_components51.TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(FieldBase, { as: import_react_aria_components51.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react_aria_components51.TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
 var import_react53 = require("react");
 var import_react_aria_components52 = require("react-aria-components");
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var _TextField = (0, import_react53.forwardRef)(
   ({
     variant,
@@ -3418,13 +3455,13 @@ var _TextField = (0, import_react53.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(FieldBase, { as: import_react_aria_components52.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(_Input, { ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(FieldBase, { as: import_react_aria_components52.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-var import_system74 = require("@marigold/system");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_system75 = require("@marigold/system");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3437,17 +3474,17 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system74.cn)(
+      className: (0, import_system75.cn)(
         "grid",
-        import_system74.gapSpace[space],
+        import_system75.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system74.createVar)({ column, tilesWidth }),
+      style: (0, import_system75.createVar)({ column, tilesWidth }),
       children
     }
   );
@@ -3455,11 +3492,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 var import_react_aria_components54 = require("react-aria-components");
-var import_system75 = require("@marigold/system");
+var import_system76 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
 var import_react_aria_components53 = require("react-aria-components");
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3473,26 +3510,26 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react_aria_components53.TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_react_aria_components53.TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames2 = (0, import_system75.useClassNames)({ component: "Tooltip", variant, size });
+  const classNames2 = (0, import_system76.useClassNames)({ component: "Tooltip", variant, size });
   const portal = usePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
     import_react_aria_components54.Tooltip,
     {
       ...props,
-      className: (0, import_system75.cn)("group/tooltip", classNames2.container),
+      className: (0, import_system76.cn)("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_react_aria_components54.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_react_aria_components54.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -3505,10 +3542,10 @@ var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
 var import_react54 = require("react");
-var import_system76 = require("@marigold/system");
-var import_jsx_runtime92 = require("react/jsx-runtime");
-var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
-  import_system76.SVG,
+var import_system77 = require("@marigold/system");
+var import_jsx_runtime94 = require("react/jsx-runtime");
+var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+  import_system77.SVG,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -3517,13 +3554,13 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "path",
         {
           id: "XMLID_5_",
           d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3536,12 +3573,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "path",
         {
           id: "XMLID_18_",
           d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3554,12 +3591,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "path",
         {
           id: "XMLID_19_",
           d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3572,12 +3609,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "path",
         {
           id: "XMLID_20_",
           d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3590,12 +3627,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "path",
         {
           id: "XMLID_21_",
           d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3608,12 +3645,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "path",
         {
           id: "XMLID_22_",
           d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3626,12 +3663,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "path",
         {
           id: "XMLID_23_",
           d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3644,12 +3681,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "path",
         {
           id: "XMLID_24_",
           d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3662,12 +3699,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "path",
         {
           id: "XMLID_25_",
           d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3680,12 +3717,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "path",
         {
           id: "XMLID_26_",
           d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3698,12 +3735,12 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
         "path",
         {
           id: "XMLID_27_",
           d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
-          children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -3722,7 +3759,7 @@ var XLoader = (0, import_react54.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 
 // src/Tabs/Tabs.tsx
 var import_react_aria_components58 = require("react-aria-components");
-var import_system79 = require("@marigold/system");
+var import_system80 = require("@marigold/system");
 
 // src/Tabs/Context.ts
 var import_react55 = require("react");
@@ -3731,15 +3768,15 @@ var useTabContext = () => (0, import_react55.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
 var import_react_aria_components55 = require("react-aria-components");
-var import_system77 = require("@marigold/system");
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_system78 = require("@marigold/system");
+var import_jsx_runtime95 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
     import_react_aria_components55.Tab,
     {
       ...props,
-      className: (0, import_system77.cn)(
+      className: (0, import_system78.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3750,15 +3787,15 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 var import_react_aria_components56 = require("react-aria-components");
-var import_system78 = require("@marigold/system");
-var import_jsx_runtime94 = require("react/jsx-runtime");
+var import_system79 = require("@marigold/system");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     import_react_aria_components56.TabList,
     {
       ...props,
-      className: (0, import_system78.cn)("flex", import_system78.gapSpace[space], classNames2.tabsList),
+      className: (0, import_system79.cn)("flex", import_system79.gapSpace[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -3766,25 +3803,25 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 var import_react_aria_components57 = require("react-aria-components");
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime97 = require("react/jsx-runtime");
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria_components57.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_react_aria_components57.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-var import_jsx_runtime96 = require("react/jsx-runtime");
+var import_jsx_runtime98 = require("react/jsx-runtime");
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = (0, import_system79.useClassNames)({
+  const classNames2 = (0, import_system80.useClassNames)({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_react_aria_components58.Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_react_aria_components58.Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -3822,6 +3859,7 @@ var import_react_aria_components59 = require("react-aria-components");
   FieldGroupContext,
   Footer,
   Form,
+  Grid,
   Header,
   Headline,
   I18nProvider,