@marigold/components 8.0.2 → 9.0.0

package/dist/index.js

@@ -57,7 +57,7 @@ __export(src_exports, {
   FieldGroup: () => FieldGroup,
   FieldGroupContext: () => FieldGroupContext,
   Footer: () => Footer,
-  Form: () => import_react_aria_components21.Form,
+  Form: () => import_react_aria_components20.Form,
   Grid: () => Grid,
   Header: () => _Header,
   Headline: () => _Headline,
@@ -78,7 +78,7 @@ __export(src_exports, {
   Popover: () => _Popover,
   Radio: () => _Radio,
   RadioGroup: () => _RadioGroup,
-  RouterProvider: () => import_react_aria_components59.RouterProvider,
+  RouterProvider: () => import_react_aria_components58.RouterProvider,
   Scrollable: () => Scrollable,
   SearchField: () => _SearchField,
   SectionMessage: () => SectionMessage,
@@ -426,13 +426,6 @@ var import_react6 = require("react");
 var import_react_aria_components = require("react-aria-components");
 var import_system6 = require("@marigold/system");
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Description = ({ children }) => {
-  const ctx = (0, import_react6.useContext)(import_react_aria_components.FieldErrorContext);
-  if (ctx && ctx.isInvalid) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_aria_components.Text, { slot: "description", children });
-};
 var Icon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
   "svg",
   {
@@ -455,6 +448,10 @@ var HelpText = ({
     variant,
     size
   });
+  const ctx = (0, import_react6.useContext)(import_react_aria_components.FieldErrorContext);
+  if (!description && ctx && !ctx.isInvalid) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: (0, import_system6.cn)(classNames2.container), children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_aria_components.FieldError, { ...props, className: "flex flex-col", children: (validation) => {
       const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
@@ -466,7 +463,7 @@ var HelpText = ({
         messages
       ] });
     } }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Description, { children: description })
+    ctx && ctx.isInvalid ? null : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_aria_components.Text, { slot: "description", children: description })
   ] });
 };
 
@@ -861,6 +858,7 @@ var _Popover = (0, import_react14.forwardRef)(
         ref,
         ...props,
         className: classNames2,
+        placement,
         offset: 0,
         UNSTABLE_portalContainer: portal,
         children
@@ -1017,7 +1015,7 @@ var import_system20 = require("@marigold/system");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var Badge = ({ variant, size, children, ...props }) => {
   const classNames2 = (0, import_system20.useClassNames)({ component: "Badge", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...props, className: classNames2, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: classNames2, ...props, children });
 };
 
 // src/Breakout/Breakout.tsx
@@ -1027,8 +1025,7 @@ var Breakout = ({
   height,
   children,
   alignX = "left",
-  alignY = "center",
-  ...props
+  alignY = "center"
 }) => {
   var _a, _b, _c, _d;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -1042,7 +1039,6 @@ var Breakout = ({
         "h-[--height]"
       ),
       style: (0, import_system21.createVar)({ height }),
-      ...props,
       children
     }
   );
@@ -1120,9 +1116,8 @@ var Center = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 var import_react_aria_components13 = require("react-aria-components");
-var import_react_aria_components14 = require("react-aria-components");
 var import_system26 = require("@marigold/system");
 
 // src/Checkbox/CheckBoxField.tsx
@@ -1136,6 +1131,11 @@ var CheckboxField = ({ children, labelWidth }) => {
   ] });
 };
 
+// src/Checkbox/Context.tsx
+var import_react19 = require("react");
+var CheckboxGroupContext = (0, import_react19.createContext)(null);
+var useCheckboxGroupContext = () => (0, import_react19.useContext)(CheckboxGroupContext);
+
 // src/Checkbox/Checkbox.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
 var CheckMark = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -1163,7 +1163,7 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
-        "rounded-[3px] border border-solid border-black ",
+        "rounded-[3px] border border-solid border-black",
         className
       ),
       ...props,
@@ -1171,17 +1171,16 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
     }
   );
 };
-var _Checkbox = (0, import_react19.forwardRef)(
+var _Checkbox = (0, import_react20.forwardRef)(
   ({
-    className,
-    indeterminate,
     error,
     disabled,
-    defaultChecked,
-    children,
-    checked,
     readOnly,
     required,
+    checked,
+    defaultChecked,
+    indeterminate,
+    children,
     variant,
     size,
     ...rest
@@ -1197,8 +1196,13 @@ var _Checkbox = (0, import_react19.forwardRef)(
       ...rest
     };
     const { labelWidth } = useFieldGroupContext();
-    const classNames2 = (0, import_system26.useClassNames)({ component: "Checkbox", variant, size });
-    const state = (0, import_react19.useContext)(import_react_aria_components14.CheckboxGroupStateContext);
+    const group = useCheckboxGroupContext();
+    console.log(group);
+    const classNames2 = (0, import_system26.useClassNames)({
+      component: "Checkbox",
+      variant: variant || (group == null ? void 0 : group.variant),
+      size: size || (group == null ? void 0 : group.size)
+    });
     const component = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_react_aria_components13.Checkbox,
       {
@@ -1222,21 +1226,13 @@ var _Checkbox = (0, import_react19.forwardRef)(
         ] })
       }
     );
-    return !state && labelWidth ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CheckboxField, { labelWidth, children: component }) : component;
+    return !group && !!labelWidth ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CheckboxField, { labelWidth, children: component }) : component;
   }
 );
 
 // src/Checkbox/CheckboxGroup.tsx
-var import_react_aria_components15 = require("react-aria-components");
+var import_react_aria_components14 = require("react-aria-components");
 var import_system27 = require("@marigold/system");
-
-// src/Checkbox/Context.tsx
-var import_react20 = require("react");
-var CheckboxGroupContext = (0, import_react20.createContext)(
-  null
-);
-
-// src/Checkbox/CheckboxGroup.tsx
 var import_jsx_runtime29 = require("react/jsx-runtime");
 var _CheckboxGroup = ({
   children,
@@ -1264,7 +1260,7 @@ var _CheckboxGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FieldBase, { as: import_react_aria_components15.CheckboxGroup, width, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(FieldBase, { as: import_react_aria_components14.CheckboxGroup, width, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       role: "presentation",
@@ -1365,11 +1361,11 @@ var Container = ({
 
 // src/Dialog/Dialog.tsx
 var import_react24 = require("react");
-var import_react_aria_components19 = require("react-aria-components");
+var import_react_aria_components18 = require("react-aria-components");
 var import_system31 = require("@marigold/system");
 
 // src/Headline/Headline.tsx
-var import_react_aria_components16 = require("react-aria-components");
+var import_react_aria_components15 = require("react-aria-components");
 var import_system30 = require("@marigold/system");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var _Headline = ({
@@ -1378,7 +1374,7 @@ var _Headline = ({
   children,
   align = "left",
   color,
-  level = 1,
+  level = "1",
   ...props
 }) => {
   const theme = (0, import_system30.useTheme)();
@@ -1388,7 +1384,7 @@ var _Headline = ({
     size: size != null ? size : `level-${level}`
   });
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-    import_react_aria_components16.Heading,
+    import_react_aria_components15.Heading,
     {
       level: Number(level),
       ...props,
@@ -1408,11 +1404,11 @@ var _Headline = ({
 
 // src/Dialog/DialogTrigger.tsx
 var import_react23 = require("react");
-var import_react_aria_components18 = require("react-aria-components");
+var import_react_aria_components17 = require("react-aria-components");
 
 // src/Overlay/Modal.tsx
 var import_react22 = require("react");
-var import_react_aria_components17 = require("react-aria-components");
+var import_react_aria_components16 = require("react-aria-components");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var _Modal = (0, import_react22.forwardRef)(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
   const props = {
@@ -1428,7 +1424,7 @@ var _Modal = (0, import_react22.forwardRef)(({ open, dismissable, keyboardDismis
       keyboardDismissable,
       open,
       variant: "modal",
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components17.Modal, { ref, className: "relative", ...props, children: props.children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components16.Modal, { ref, className: "relative", ...props, children: props.children })
     }
   );
 });
@@ -1451,8 +1447,8 @@ var _DialogTrigger = ({
   const hasDialogTrigger = dialogTrigger.type !== _Dialog;
   const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
   if (isNonModal)
-    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_aria_components18.DialogTrigger, { ...props, children: props.children });
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_aria_components18.DialogTrigger, { ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_aria_components17.DialogTrigger, { ...props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_aria_components17.DialogTrigger, { ...props, children: [
     hasDialogTrigger && dialogTrigger,
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       _Modal,
@@ -1468,7 +1464,7 @@ var _DialogTrigger = ({
 // src/Dialog/Dialog.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var CloseButton = ({ className }) => {
-  const { close } = (0, import_react24.useContext)(import_react_aria_components19.OverlayTriggerStateContext);
+  const { close } = (0, import_react24.useContext)(import_react_aria_components18.OverlayTriggerStateContext);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "button",
     {
@@ -1497,7 +1493,7 @@ var _Dialog = ({
   ...props
 }) => {
   const classNames2 = (0, import_system31.useClassNames)({ component: "Dialog", variant, size });
-  let state = (0, import_react24.useContext)(import_react_aria_components19.OverlayTriggerStateContext);
+  let state = (0, import_react24.useContext)(import_react_aria_components18.OverlayTriggerStateContext);
   let children = props.children;
   if (typeof children === "function") {
     children = children({
@@ -1506,7 +1502,7 @@ var _Dialog = ({
     });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    import_react_aria_components19.Dialog,
+    import_react_aria_components18.Dialog,
     {
       ...props,
       className: (0, import_system31.cn)("relative outline-none", classNames2.container),
@@ -1521,12 +1517,12 @@ _Dialog.Trigger = _DialogTrigger;
 _Dialog.Headline = DialogHeadline;
 
 // src/Divider/Divider.tsx
-var import_react_aria_components20 = require("react-aria-components");
+var import_react_aria_components19 = require("react-aria-components");
 var import_system32 = require("@marigold/system");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var _Divider = ({ variant, ...props }) => {
   const classNames2 = (0, import_system32.useClassNames)({ component: "Divider", variant });
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_aria_components20.Separator, { className: (0, import_system32.cn)("border-none", classNames2), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_aria_components19.Separator, { className: (0, import_system32.cn)("border-none", classNames2), ...props });
 };
 
 // src/Footer/Footer.tsx
@@ -1538,7 +1534,7 @@ var Footer = ({ children, variant, size, ...props }) => {
 };
 
 // src/Form/Form.tsx
-var import_react_aria_components21 = require("react-aria-components");
+var import_react_aria_components20 = require("react-aria-components");
 
 // src/Grid/Grid.tsx
 var import_system34 = require("@marigold/system");
@@ -1577,7 +1573,7 @@ var Grid = ({
 Grid.Area = GridArea;
 
 // src/Header/Header.tsx
-var import_react_aria_components22 = require("react-aria-components");
+var import_react_aria_components21 = require("react-aria-components");
 var import_system35 = require("@marigold/system");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var _Header = ({ variant, size, ...props }) => {
@@ -1586,7 +1582,7 @@ var _Header = ({ variant, size, ...props }) => {
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_aria_components22.Header, { className: classNames2, ...props, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_aria_components21.Header, { className: classNames2, ...props, children: props.children });
 };
 
 // src/Image/Image.tsx
@@ -1644,19 +1640,19 @@ var Inline = ({
 
 // src/DateField/DateField.tsx
 var import_react25 = require("react");
-var import_react_aria_components25 = require("react-aria-components");
+var import_react_aria_components24 = require("react-aria-components");
 
 // src/DateField/DateInput.tsx
-var import_react_aria_components24 = require("react-aria-components");
+var import_react_aria_components23 = require("react-aria-components");
 var import_system39 = require("@marigold/system");
 
 // src/DateField/DateSegment.tsx
-var import_react_aria_components23 = require("react-aria-components");
+var import_react_aria_components22 = require("react-aria-components");
 var import_system38 = require("@marigold/system");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var _DateSegment = ({ segment, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-    import_react_aria_components23.DateSegment,
+    import_react_aria_components22.DateSegment,
     {
       ...props,
       segment,
@@ -1685,8 +1681,8 @@ var _DateSegment = ({ segment, ...props }) => {
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var _DateInput = ({ variant, size, action, ...props }) => {
   const classNames2 = (0, import_system39.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 }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_aria_components23.Group, { className: classNames2.field, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_aria_components23.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",
       {
@@ -1724,7 +1720,7 @@ var _DateField = (0, import_react25.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
       FieldBase,
       {
-        as: import_react_aria_components25.DateField,
+        as: import_react_aria_components24.DateField,
         variant,
         size,
         ref,
@@ -1737,23 +1733,23 @@ var _DateField = (0, import_react25.forwardRef)(
 
 // src/Calendar/Calendar.tsx
 var import_react30 = require("react");
-var import_react_aria_components32 = require("react-aria-components");
+var import_react_aria_components31 = require("react-aria-components");
 var import_system44 = require("@marigold/system");
 
 // src/Calendar/CalendarGrid.tsx
-var import_react_aria_components27 = require("react-aria-components");
+var import_react_aria_components26 = require("react-aria-components");
 var import_system41 = require("@marigold/system");
 
 // src/Calendar/CalendarGridHeader.tsx
 var import_date = require("@internationalized/date");
 var import_react26 = require("react");
-var import_react_aria_components26 = require("react-aria-components");
+var import_react_aria_components25 = require("react-aria-components");
 var import_calendar = require("@react-aria/calendar");
 var import_i18n3 = require("@react-aria/i18n");
 var import_system40 = require("@marigold/system");
 var import_jsx_runtime46 = require("react/jsx-runtime");
 function CalendarGridHeader(props) {
-  const state = (0, import_react26.useContext)(import_react_aria_components26.CalendarStateContext);
+  const state = (0, import_react26.useContext)(import_react_aria_components25.CalendarStateContext);
   const { headerProps } = (0, import_calendar.useCalendarGrid)(props, state);
   const { locale } = (0, import_i18n3.useLocale)();
   const dayFormatter = (0, import_i18n3.useDateFormatter)({
@@ -1776,10 +1772,10 @@ function CalendarGridHeader(props) {
 var import_jsx_runtime47 = require("react/jsx-runtime");
 var _CalendarGrid = () => {
   const classNames2 = (0, import_system41.useClassNames)({ component: "Calendar" });
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_aria_components27.CalendarGrid, { className: classNames2.calendarGrid, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_aria_components26.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,
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_aria_components26.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      import_react_aria_components26.CalendarCell,
       {
         date,
         className: (0, import_system41.cn)(
@@ -1793,7 +1789,7 @@ var _CalendarGrid = () => {
 
 // src/Calendar/CalendarListBox.tsx
 var import_react27 = require("react");
-var import_react_aria_components28 = require("react-aria-components");
+var import_react_aria_components27 = require("react-aria-components");
 var import_icons = require("@marigold/icons");
 var import_system42 = require("@marigold/system");
 
@@ -1820,7 +1816,7 @@ function CalendarListBox({
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = (0, import_react27.useContext)(import_react_aria_components28.CalendarStateContext);
+  const state = (0, import_react27.useContext)(import_react_aria_components27.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
   const { select: selectClassNames } = (0, import_system42.useClassNames)({ component: "Select" });
@@ -1840,7 +1836,7 @@ function CalendarListBox({
 }
 
 // src/Calendar/MonthControls.tsx
-var import_react_aria_components29 = require("react-aria-components");
+var import_react_aria_components28 = require("react-aria-components");
 var import_icons2 = require("@marigold/icons");
 var import_system43 = require("@marigold/system");
 var import_jsx_runtime49 = require("react/jsx-runtime");
@@ -1856,7 +1852,7 @@ function MonthControls() {
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_react_aria_components29.Button,
+          import_react_aria_components28.Button,
           {
             className: (0, import_system43.cn)(
               "inline-flex items-center justify-center gap-[0.5ch]",
@@ -1867,7 +1863,7 @@ function MonthControls() {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
-          import_react_aria_components29.Button,
+          import_react_aria_components28.Button,
           {
             className: (0, import_system43.cn)(
               "inline-flex items-center justify-center gap-[0.5ch]",
@@ -1885,10 +1881,10 @@ var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
 var import_react28 = require("react");
-var import_react_aria_components30 = require("react-aria-components");
+var import_react_aria_components29 = require("react-aria-components");
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react28.useContext)(import_react_aria_components30.CalendarStateContext);
+  const state = (0, import_react28.useContext)(import_react_aria_components29.CalendarStateContext);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange = (index) => {
     let value = Number(index) + 1;
@@ -1923,11 +1919,11 @@ var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
 var import_react29 = require("react");
-var import_react_aria_components31 = require("react-aria-components");
+var import_react_aria_components30 = require("react-aria-components");
 var import_i18n5 = require("@react-aria/i18n");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = (0, import_react29.useContext)(import_react_aria_components31.CalendarStateContext);
+  const state = (0, import_react29.useContext)(import_react_aria_components30.CalendarStateContext);
   const years = [];
   let formatter = (0, import_i18n5.useDateFormatter)({
     year: "numeric",
@@ -2012,7 +2008,7 @@ var _Calendar = ({
     year: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(YearListBox_default, { setSelectedDropdown })
   };
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    import_react_aria_components32.Calendar,
+    import_react_aria_components31.Calendar,
     {
       className: (0, import_system44.cn)(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4",
@@ -2049,7 +2045,7 @@ var _Calendar = ({
 
 // src/DatePicker/DatePicker.tsx
 var import_react31 = __toESM(require("react"));
-var import_react_aria_components33 = require("react-aria-components");
+var import_react_aria_components32 = require("react-aria-components");
 var import_system45 = require("@marigold/system");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 var _DatePicker = import_react31.default.forwardRef(
@@ -2081,7 +2077,7 @@ var _DatePicker = import_react31.default.forwardRef(
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
       FieldBase,
       {
-        as: import_react_aria_components33.DatePicker,
+        as: import_react_aria_components32.DatePicker,
         variant,
         size,
         ...props,
@@ -2135,7 +2131,7 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ (0, import_
 
 // src/Link/Link.tsx
 var import_react32 = require("react");
-var import_react_aria_components34 = require("react-aria-components");
+var import_react_aria_components33 = require("react-aria-components");
 var import_system47 = require("@marigold/system");
 var import_jsx_runtime55 = require("react/jsx-runtime");
 var _Link = (0, import_react32.forwardRef)(
@@ -2145,7 +2141,7 @@ var _Link = (0, import_react32.forwardRef)(
       variant,
       size
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_aria_components34.Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react_aria_components33.Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
   }
 );
 
@@ -2180,25 +2176,25 @@ var List = ({
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-var import_react_aria_components37 = require("react-aria-components");
+var import_react_aria_components36 = require("react-aria-components");
 var import_system51 = require("@marigold/system");
 
 // src/Menu/MenuItem.tsx
-var import_react_aria_components35 = require("react-aria-components");
+var import_react_aria_components34 = require("react-aria-components");
 var import_system49 = require("@marigold/system");
 var import_jsx_runtime58 = require("react/jsx-runtime");
 var _MenuItem = ({ children, ...props }) => {
   const classNames2 = (0, import_system49.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_aria_components35.MenuItem, { ...props, className: classNames2.item, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_react_aria_components34.MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
-var import_react_aria_components36 = require("react-aria-components");
+var import_react_aria_components35 = require("react-aria-components");
 var import_system50 = require("@marigold/system");
 var import_jsx_runtime59 = require("react/jsx-runtime");
 var _MenuSection = ({ children, title, ...props }) => {
   const className = (0, import_system50.useClassNames)({ component: "Menu" });
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components36.Section, { ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components35.Section, { ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(_Header, { className: className.section, children: title }),
     children
   ] });
@@ -2217,16 +2213,16 @@ var _Menu = ({
   ...props
 }) => {
   const classNames2 = (0, import_system51.useClassNames)({ component: "Menu", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components37.MenuTrigger, { ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components36.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 }) })
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(_Popover, { open, placement, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_aria_components36.Menu, { ...props, className: classNames2.container, children }) })
   ] });
 };
 _Menu.Item = _MenuItem;
 _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
-var import_react_aria_components38 = require("react-aria-components");
+var import_react_aria_components37 = require("react-aria-components");
 var import_system52 = require("@marigold/system");
 var import_jsx_runtime61 = require("react/jsx-runtime");
 var ActionMenu = ({
@@ -2236,9 +2232,9 @@ var ActionMenu = ({
   ...props
 }) => {
   const classNames2 = (0, import_system52.useClassNames)({ component: "Menu", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_aria_components38.MenuTrigger, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_aria_components37.MenuTrigger, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_system52.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 }) })
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_aria_components37.Menu, { ...props, className: classNames2.container, children: props.children }) })
   ] });
 };
 
@@ -2378,11 +2374,11 @@ var import_react35 = require("react");
 var import_data2 = require("@react-stately/data");
 
 // src/TagGroup/Tag.tsx
-var import_react_aria_components40 = require("react-aria-components");
+var import_react_aria_components39 = require("react-aria-components");
 var import_system57 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
-var import_react_aria_components39 = require("react-aria-components");
+var import_react_aria_components38 = require("react-aria-components");
 var import_system56 = require("@marigold/system");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var _TagGroup = ({
@@ -2395,8 +2391,8 @@ var _TagGroup = ({
   ...rest
 }) => {
   const classNames2 = (0, import_system56.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FieldBase, { as: import_react_aria_components39.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-    import_react_aria_components39.TagList,
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FieldBase, { as: import_react_aria_components38.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    import_react_aria_components38.TagList,
     {
       items,
       className: classNames2.listItems,
@@ -2409,13 +2405,13 @@ var _TagGroup = ({
 // src/TagGroup/Tag.tsx
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_aria_components40.Button, { slot: "remove", className, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime66.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_runtime66.jsx)(import_react_aria_components39.Button, { slot: "remove", className, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime66.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_system57.useClassNames)({ component: "Tag", variant, size });
   return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-    import_react_aria_components40.Tag,
+    import_react_aria_components39.Tag,
     {
       textValue,
       ...props,
@@ -2503,11 +2499,11 @@ Multiselect.Item = Item2;
 
 // src/NumberField/NumberField.tsx
 var import_react36 = require("react");
-var import_react_aria_components42 = require("react-aria-components");
+var import_react_aria_components41 = require("react-aria-components");
 var import_system59 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
-var import_react_aria_components41 = require("react-aria-components");
+var import_react_aria_components40 = require("react-aria-components");
 var import_system58 = require("@marigold/system");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 var Plus = () => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
@@ -2529,7 +2525,7 @@ var Minus = () => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("svg", { width:
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
   return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
-    import_react_aria_components41.Button,
+    import_react_aria_components40.Button,
     {
       className: (0, import_system58.cn)(
         [
@@ -2570,7 +2566,7 @@ var _NumberField = (0, import_react36.forwardRef)(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(FieldBase, { as: import_react_aria_components42.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react_aria_components42.Group, { className: (0, import_system59.cn)("flex items-stretch", classNames2.group), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(FieldBase, { as: import_react_aria_components41.NumberField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_react_aria_components41.Group, { className: (0, import_system59.cn)("flex items-stretch", classNames2.group), children: [
       showStepper && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
         _StepButton,
         {
@@ -2602,7 +2598,7 @@ var _NumberField = (0, import_react36.forwardRef)(
 
 // src/Radio/Radio.tsx
 var import_react38 = require("react");
-var import_react_aria_components44 = require("react-aria-components");
+var import_react_aria_components43 = require("react-aria-components");
 var import_system61 = require("@marigold/system");
 
 // src/Radio/Context.ts
@@ -2613,7 +2609,7 @@ var RadioGroupContext = (0, import_react37.createContext)(
 var useRadioGroupContext = () => (0, import_react37.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_react_aria_components43 = require("react-aria-components");
+var import_react_aria_components42 = require("react-aria-components");
 var import_system60 = require("@marigold/system");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var _RadioGroup = ({
@@ -2642,7 +2638,7 @@ var _RadioGroup = ({
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     FieldBase,
     {
-      as: import_react_aria_components43.RadioGroup,
+      as: import_react_aria_components42.RadioGroup,
       width,
       label,
       description,
@@ -2692,7 +2688,7 @@ var _Radio = (0, import_react38.forwardRef)(
       size: size || props.size
     });
     return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
-      import_react_aria_components44.Radio,
+      import_react_aria_components43.Radio,
       {
         ref,
         className: (0, import_system61.cn)(
@@ -2725,7 +2721,7 @@ _Radio.Group = _RadioGroup;
 
 // src/SearchField/SearchField.tsx
 var import_react39 = require("react");
-var import_react_aria_components45 = require("react-aria-components");
+var import_react_aria_components44 = require("react-aria-components");
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var _SearchField = (0, import_react39.forwardRef)(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
@@ -2736,7 +2732,7 @@ var _SearchField = (0, import_react39.forwardRef)(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(FieldBase, { as: import_react_aria_components45.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(FieldBase, { as: import_react_aria_components44.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       SearchInput,
       {
         ref,
@@ -2748,7 +2744,7 @@ var _SearchField = (0, import_react39.forwardRef)(
 
 // src/Select/Select.tsx
 var import_react40 = require("react");
-var import_react_aria_components46 = require("react-aria-components");
+var import_react_aria_components45 = require("react-aria-components");
 var import_system62 = require("@marigold/system");
 var import_jsx_runtime73 = require("react/jsx-runtime");
 var _Select = (0, import_react40.forwardRef)(
@@ -2772,22 +2768,33 @@ var _Select = (0, import_react40.forwardRef)(
       ...rest
     };
     const classNames2 = (0, import_system62.useClassNames)({ component: "Select", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(FieldBase, { isOpen: true, as: import_react_aria_components46.Select, ref, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
-        import_react_aria_components46.Button,
-        {
-          className: (0, import_system62.cn)(
-            "flex w-full items-center justify-between gap-1 overflow-hidden",
-            classNames2.select
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+      FieldBase,
+      {
+        isOpen: true,
+        as: import_react_aria_components45.Select,
+        ref,
+        variant,
+        size,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+            import_react_aria_components45.Button,
+            {
+              className: (0, import_system62.cn)(
+                "flex w-full items-center justify-between gap-1 overflow-hidden",
+                classNames2.select
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_react_aria_components45.SelectValue, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronDown, { className: (0, import_system62.cn)("size-4", classNames2.icon) })
+              ]
+            }
           ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_react_aria_components46.SelectValue, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronDown, { className: "size-4" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(_ListBox, { items, children: props.children }) })
-    ] });
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(_Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(_ListBox, { items, children: props.children }) })
+        ]
+      }
+    );
   }
 );
 _Select.Option = _ListBox.Item;
@@ -2795,7 +2802,7 @@ _Select.Section = _ListBox.Section;
 
 // src/SelectList/SelectList.tsx
 var import_react43 = require("react");
-var import_react_aria_components48 = require("react-aria-components");
+var import_react_aria_components47 = require("react-aria-components");
 var import_system64 = require("@marigold/system");
 
 // src/SelectList/Context.ts
@@ -2807,7 +2814,7 @@ var useSelectListContext = () => (0, import_react41.useContext)(SelectListContex
 
 // src/SelectList/SelectListItem.tsx
 var import_react42 = require("react");
-var import_react_aria_components47 = require("react-aria-components");
+var import_react_aria_components46 = require("react-aria-components");
 var import_system63 = require("@marigold/system");
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var _SelectListItem = (0, import_react42.forwardRef)(
@@ -2815,7 +2822,7 @@ var _SelectListItem = (0, import_react42.forwardRef)(
     let textValue = typeof children === "string" ? children : void 0;
     const { classNames: classNames2 } = useSelectListContext();
     return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-      import_react_aria_components47.GridListItem,
+      import_react_aria_components46.GridListItem,
       {
         textValue,
         ...props,
@@ -2840,7 +2847,7 @@ var _SelectList = (0, import_react43.forwardRef)(
       ...rest
     };
     return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: classNames2.container, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-      import_react_aria_components48.GridList,
+      import_react_aria_components47.GridList,
       {
         ...props,
         ref,
@@ -2875,7 +2882,7 @@ var Scrollable = ({
 
 // src/Slider/Slider.tsx
 var import_react44 = require("react");
-var import_react_aria_components49 = require("react-aria-components");
+var import_react_aria_components48 = require("react-aria-components");
 var import_system66 = require("@marigold/system");
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var _Slider = (0, import_react44.forwardRef)(
@@ -2897,7 +2904,7 @@ var _Slider = (0, import_react44.forwardRef)(
       ...rest
     };
     return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
-      import_react_aria_components49.Slider,
+      import_react_aria_components48.Slider,
       {
         className: (0, import_system66.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
@@ -2908,13 +2915,13 @@ var _Slider = (0, import_react44.forwardRef)(
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(_Label, { children: props.children }),
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react_aria_components49.SliderOutput, { className: (0, import_system66.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react_aria_components48.SliderOutput, { className: (0, import_system66.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
           /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-            import_react_aria_components49.SliderTrack,
+            import_react_aria_components48.SliderTrack,
             {
               className: (0, import_system66.cn)("relative col-span-2 h-2 w-full", classNames2.track),
               children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
-                import_react_aria_components49.SliderThumb,
+                import_react_aria_components48.SliderThumb,
                 {
                   className: (0, import_system66.cn)("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
@@ -2932,7 +2939,7 @@ var _Slider = (0, import_react44.forwardRef)(
 
 // src/Split/Split.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
-var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ...props, role: "separator", className: "grow" });
+var Split = () => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 var import_system67 = require("@marigold/system");
@@ -2964,7 +2971,7 @@ var Stack = ({
 
 // src/Switch/Switch.tsx
 var import_react45 = require("react");
-var import_react_aria_components50 = require("react-aria-components");
+var import_react_aria_components49 = require("react-aria-components");
 var import_system68 = require("@marigold/system");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var _Switch = (0, import_react45.forwardRef)(
@@ -2986,7 +2993,7 @@ var _Switch = (0, import_react45.forwardRef)(
       ...rest
     };
     return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
-      import_react_aria_components50.Switch,
+      import_react_aria_components49.Switch,
       {
         ...props,
         ref,
@@ -3458,7 +3465,7 @@ var Text2 = ({
 
 // src/TextArea/TextArea.tsx
 var import_react54 = require("react");
-var import_react_aria_components51 = require("react-aria-components");
+var import_react_aria_components50 = require("react-aria-components");
 var import_system77 = require("@marigold/system");
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var _TextArea = (0, import_react54.forwardRef)(
@@ -3480,24 +3487,16 @@ var _TextArea = (0, import_react54.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(FieldBase, { as: import_react_aria_components51.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_react_aria_components51.TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(FieldBase, { as: import_react_aria_components50.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_react_aria_components50.TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
 var import_react55 = require("react");
-var import_react_aria_components52 = require("react-aria-components");
+var import_react_aria_components51 = require("react-aria-components");
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var _TextField = (0, import_react55.forwardRef)(
-  ({
-    variant,
-    size,
-    required,
-    disabled,
-    readOnly,
-    error,
-    ...rest
-  }, ref) => {
+  ({ required, disabled, readOnly, error, ...rest }, ref) => {
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3505,7 +3504,7 @@ var _TextField = (0, import_react55.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FieldBase, { as: import_react_aria_components52.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(_Input, { ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(FieldBase, { as: import_react_aria_components51.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(_Input, { ref }) });
   }
 );
 
@@ -3541,11 +3540,11 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_react_aria_components54 = require("react-aria-components");
+var import_react_aria_components53 = require("react-aria-components");
 var import_system79 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react_aria_components53 = require("react-aria-components");
+var import_react_aria_components52 = require("react-aria-components");
 var import_jsx_runtime94 = require("react/jsx-runtime");
 var _TooltipTrigger = ({
   delay = 1e3,
@@ -3560,7 +3559,7 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria_components53.TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria_components52.TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
@@ -3573,13 +3572,13 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const classNames2 = (0, import_system79.useClassNames)({ component: "Tooltip", variant, size });
   const portal = usePortalContainer();
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
-    import_react_aria_components54.Tooltip,
+    import_react_aria_components53.Tooltip,
     {
       ...props,
       className: (0, import_system79.cn)("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria_components54.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria_components53.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
         children
       ]
     }
@@ -3808,7 +3807,7 @@ var XLoader = (0, import_react56.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 ));
 
 // src/Tabs/Tabs.tsx
-var import_react_aria_components58 = require("react-aria-components");
+var import_react_aria_components57 = require("react-aria-components");
 var import_system83 = require("@marigold/system");
 
 // src/Tabs/Context.ts
@@ -3817,13 +3816,13 @@ var TabContext = (0, import_react57.createContext)({});
 var useTabContext = () => (0, import_react57.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react_aria_components55 = require("react-aria-components");
+var import_react_aria_components54 = require("react-aria-components");
 var import_system81 = require("@marigold/system");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
-    import_react_aria_components55.Tab,
+    import_react_aria_components54.Tab,
     {
       ...props,
       className: (0, import_system81.cn)(
@@ -3836,13 +3835,13 @@ var _Tab = (props) => {
 };
 
 // src/Tabs/TabList.tsx
-var import_react_aria_components56 = require("react-aria-components");
+var import_react_aria_components55 = require("react-aria-components");
 var import_system82 = require("@marigold/system");
 var import_jsx_runtime98 = require("react/jsx-runtime");
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
-    import_react_aria_components56.TabList,
+    import_react_aria_components55.TabList,
     {
       ...props,
       className: (0, import_system82.cn)("flex", import_system82.gapSpace[space], classNames2.tabsList),
@@ -3852,11 +3851,11 @@ var _TabList = ({ space = 2, ...props }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react_aria_components57 = require("react-aria-components");
+var import_react_aria_components56 = require("react-aria-components");
 var import_jsx_runtime99 = require("react/jsx-runtime");
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react_aria_components57.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(import_react_aria_components56.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
@@ -3871,14 +3870,14 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     size,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react_aria_components58.Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react_aria_components57.Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
 _Tabs.Item = _Tab;
 
 // src/RouterProvider/RouterProvider.tsx
-var import_react_aria_components59 = require("react-aria-components");
+var import_react_aria_components58 = require("react-aria-components");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,