@marigold/components 6.9.1 → 6.11.0

package/dist/index.js

@@ -47,6 +47,7 @@ __export(src_exports, {
   Center: () => Center,
   Checkbox: () => _Checkbox,
   CheckboxGroup: () => _CheckboxGroup,
+  CloseButton: () => CloseButton2,
   Columns: () => Columns,
   ComboBox: () => ComboBox,
   Container: () => Container,
@@ -76,14 +77,15 @@ __export(src_exports, {
   Popover: () => Popover,
   Radio: () => _Radio,
   RadioGroup: () => _RadioGroup,
+  SearchField: () => _SearchField,
   Select: () => Select,
   Slider: () => _Slider,
   Split: () => Split,
   Stack: () => Stack,
   Switch: () => _Switch,
   Table: () => Table,
-  Tabs: () => Tabs,
-  Tag: () => Tag2,
+  Tabs: () => _Tabs,
+  Tag: () => _Tag,
   Text: () => Text2,
   TextArea: () => _TextArea,
   TextField: () => _TextField,
@@ -95,8 +97,6 @@ __export(src_exports, {
   Underlay: () => Underlay,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
   XLoader: () => XLoader,
-  _Slider: () => _Slider,
-  _TextArea: () => _TextArea,
   useAsyncList: () => import_data.useAsyncList,
   useFieldGroupContext: () => useFieldGroupContext,
   useListData: () => import_data.useListData,
@@ -353,7 +353,6 @@ var Aside = ({
   sideWidth,
   space = 0,
   side = "left",
-  stretch = true,
   wrap = "50%"
 }) => {
   const [left, right] = import_react5.Children.toArray(children);
@@ -361,34 +360,24 @@ var Aside = ({
     aside: (0, import_system4.createVar)({ sideWidth }),
     content: (0, import_system4.createVar)({ wrap })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "div",
-    {
-      className: (0, import_system4.cn)(
-        "flex flex-wrap",
-        import_system4.gapSpace[space],
-        !stretch && "items-start"
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "div",
-          {
-            className: classNames[side === "left" ? "aside" : "content"],
-            style: vars[side === "left" ? "aside" : "content"],
-            children: left
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          "div",
-          {
-            className: classNames[side === "right" ? "aside" : "content"],
-            style: vars[side === "right" ? "aside" : "content"],
-            children: right
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_system4.cn)("flex flex-wrap", import_system4.gapSpace[space]), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: classNames[side === "left" ? "aside" : "content"],
+        style: vars[side === "left" ? "aside" : "content"],
+        children: left
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        className: classNames[side === "right" ? "aside" : "content"],
+        style: vars[side === "right" ? "aside" : "content"],
+        children: right
+      }
+    )
+  ] });
 };
 
 // src/Aspect/Aspect.tsx
@@ -614,7 +603,7 @@ var Input = (0, import_react7.forwardRef)(
   }
 );
 
-// src/ListBox/ListBox.tsx
+// src/ListBox/_ListBox.tsx
 var import_react10 = require("react");
 var import_listbox3 = require("@react-aria/listbox");
 var import_utils6 = require("@react-aria/utils");
@@ -625,7 +614,7 @@ var import_react8 = require("react");
 var ListBoxContext = (0, import_react8.createContext)({});
 var useListBoxContext = () => (0, import_react8.useContext)(ListBoxContext);
 
-// src/ListBox/ListBoxOption.tsx
+// src/ListBox/_ListBoxOption.tsx
 var import_react9 = require("react");
 var import_listbox = require("@react-aria/listbox");
 var import_utils5 = require("@react-aria/utils");
@@ -658,7 +647,7 @@ var ListBoxOption = ({ item, state }) => {
   );
 };
 
-// src/ListBox/ListBoxSection.tsx
+// src/ListBox/_ListBoxSection.tsx
 var import_listbox2 = require("@react-aria/listbox");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var ListBoxSection = ({ section, state }) => {
@@ -673,7 +662,7 @@ var ListBoxSection = ({ section, state }) => {
   ] });
 };
 
-// src/ListBox/ListBox.tsx
+// src/ListBox/_ListBox.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var ListBox = (0, import_react10.forwardRef)(
   ({ state, variant, size, ...props }, ref) => {
@@ -782,7 +771,7 @@ var Overlay = ({ children, container, open }) => {
   ) });
 };
 
-// src/Overlay/Popover.tsx
+// src/Overlay/_Popover.tsx
 var import_react13 = require("react");
 var import_focus2 = require("@react-aria/focus");
 var import_overlays2 = require("@react-aria/overlays");
@@ -1414,7 +1403,6 @@ var HelpText2 = ({
   description,
   error,
   errorMessage,
-  isInvalid,
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
@@ -1660,6 +1648,7 @@ var _DialogTrigger = ({
   open,
   dismissable,
   keyboardDismissable,
+  isNonModal,
   ...rest
 }) => {
   const props = {
@@ -1670,6 +1659,8 @@ var _DialogTrigger = ({
   const [dialogTrigger, dialog] = children;
   const hasDialogTrigger = dialogTrigger.type !== _Dialog;
   const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
+  if (isNonModal)
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_aria_components9.DialogTrigger, { ...props, children: props.children });
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_aria_components9.DialogTrigger, { ...props, children: [
     hasDialogTrigger && dialogTrigger,
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
@@ -3055,8 +3046,37 @@ var _Radio = (0, import_react40.forwardRef)(
 );
 _Radio.Group = _RadioGroup;
 
-// src/Select/Select.tsx
+// src/SearchField/SearchField.tsx
 var import_react41 = require("react");
+var import_react_aria_components19 = require("react-aria-components");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var SearchIcon2 = (props) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: 24,
+    height: 24,
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
+  }
+);
+var _SearchField = (0, import_react41.forwardRef)(
+  ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
+    const props = {
+      ...rest,
+      isDisabled: disabled,
+      isRequired: required,
+      isReadOnly: readOnly,
+      isInvalid: error
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(FieldBase2, { as: import_react_aria_components19.SearchField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(_Input, { ref, icon: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(SearchIcon2, {}) }) });
+  }
+);
+
+// src/Select/Select.tsx
+var import_react42 = require("react");
 var import_button3 = require("@react-aria/button");
 var import_focus8 = require("@react-aria/focus");
 var import_i18n8 = require("@react-aria/i18n");
@@ -3077,8 +3097,8 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var Select = (0, import_react41.forwardRef)(
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var Select = (0, import_react42.forwardRef)(
   ({
     variant,
     size,
@@ -3101,7 +3121,7 @@ var Select = (0, import_react41.forwardRef)(
       ...rest
     };
     const buttonRef = (0, import_utils16.useObjectRef)(ref);
-    const listboxRef = (0, import_react41.useRef)(null);
+    const listboxRef = (0, import_react42.useRef)(null);
     const state = (0, import_select2.useSelectState)(props);
     const {
       labelProps,
@@ -3125,7 +3145,7 @@ var Select = (0, import_react41.forwardRef)(
       expanded: state.isOpen,
       required
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
       FieldBase,
       {
         variant,
@@ -3141,7 +3161,7 @@ var Select = (0, import_react41.forwardRef)(
         stateProps,
         disabled,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             import_select.HiddenSelect,
             {
               state,
@@ -3151,7 +3171,7 @@ var Select = (0, import_react41.forwardRef)(
               isDisabled: disabled
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
             "button",
             {
               className: (0, import_system58.cn)(
@@ -3162,12 +3182,12 @@ var Select = (0, import_react41.forwardRef)(
               ...(0, import_utils16.mergeProps)(buttonProps, focusProps),
               ...stateProps,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChevronDown, { className: "h-4 w-4" })
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChevronDown, { className: "h-4 w-4" })
               ]
             }
           ),
-          isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Tray, { state, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          isSmallScreen ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Tray, { state, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             ListBox,
             {
               ref: listboxRef,
@@ -3176,7 +3196,7 @@ var Select = (0, import_react41.forwardRef)(
               size,
               ...menuProps
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             ListBox,
             {
               ref: listboxRef,
@@ -3195,11 +3215,11 @@ Select.Option = import_collections5.Item;
 Select.Section = import_collections5.Section;
 
 // src/Slider/Slider.tsx
-var import_react42 = require("react");
-var import_react_aria_components19 = require("react-aria-components");
+var import_react43 = require("react");
+var import_react_aria_components20 = require("react-aria-components");
 var import_system59 = require("@marigold/system");
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var _Slider = (0, import_react42.forwardRef)(
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var _Slider = (0, import_react43.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -3217,8 +3237,8 @@ var _Slider = (0, import_react42.forwardRef)(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
-      import_react_aria_components19.Slider,
+    return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+      import_react_aria_components20.Slider,
       {
         className: (0, import_system59.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
@@ -3228,14 +3248,14 @@ var _Slider = (0, import_react42.forwardRef)(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(_Label, { children: props.children }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_react_aria_components19.SliderOutput, { className: (0, import_system59.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-            import_react_aria_components19.SliderTrack,
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(_Label, { children: props.children }),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_react_aria_components20.SliderOutput, { className: (0, import_system59.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+            import_react_aria_components20.SliderTrack,
             {
               className: (0, import_system59.cn)("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
-                import_react_aria_components19.SliderThumb,
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+                import_react_aria_components20.SliderThumb,
                 {
                   className: (0, import_system59.cn)("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
@@ -3252,12 +3272,12 @@ var _Slider = (0, import_react42.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
-var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { ...props, role: "separator", className: "grow" });
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 var import_system60 = require("@marigold/system");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var Stack = ({
   children,
   space = 0,
@@ -3268,7 +3288,7 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     "div",
     {
       className: (0, import_system60.cn)(
@@ -3285,11 +3305,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react43 = require("react");
-var import_react_aria_components20 = require("react-aria-components");
+var import_react44 = require("react");
+var import_react_aria_components21 = require("react-aria-components");
 var import_system61 = require("@marigold/system");
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var _Switch = (0, import_react43.forwardRef)(
+var import_jsx_runtime73 = require("react/jsx-runtime");
+var _Switch = (0, import_react44.forwardRef)(
   ({
     variant,
     size,
@@ -3307,8 +3327,8 @@ var _Switch = (0, import_react43.forwardRef)(
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
-      import_react_aria_components20.Switch,
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+      import_react_aria_components21.Switch,
       {
         ...props,
         ref,
@@ -3319,15 +3339,15 @@ var _Switch = (0, import_react43.forwardRef)(
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
             "div",
             {
               className: (0, import_system61.cn)(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 "div",
                 {
                   className: (0, import_system61.cn)(
@@ -3349,33 +3369,33 @@ var _Switch = (0, import_react43.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
 var import_system68 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react44 = require("react");
-var TableContext = (0, import_react44.createContext)({});
-var useTableContext = () => (0, import_react44.useContext)(TableContext);
+var import_react45 = require("react");
+var TableContext = (0, import_react45.createContext)({});
+var useTableContext = () => (0, import_react45.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var TableBody = ({ children }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_focus9 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
 var import_utils17 = require("@react-aria/utils");
 var import_system62 = require("@marigold/system");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var TableCell = ({ cell }) => {
-  const ref = (0, import_react45.useRef)(null);
+  const ref = (0, import_react46.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -3396,7 +3416,7 @@ var TableCell = ({ cell }) => {
   };
   const { focusProps, isFocusVisible } = (0, import_focus9.useFocusRing)();
   const stateProps = (0, import_system62.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     "td",
     {
       ref,
@@ -3409,7 +3429,7 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react46 = require("react");
+var import_react47 = require("react");
 var import_focus10 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
 var import_utils18 = require("@react-aria/utils");
@@ -3436,9 +3456,9 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react46.useRef)(null);
+  const ref = (0, import_react47.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -3453,20 +3473,20 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = (0, import_focus10.useFocusRing)();
   const stateProps = (0, import_system63.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "td",
     {
       ref,
       className: (0, import_system63.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...(0, import_utils18.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_focus11 = require("@react-aria/focus");
 var import_interactions5 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
@@ -3474,13 +3494,13 @@ var import_utils20 = require("@react-aria/utils");
 var import_icons2 = require("@marigold/icons");
 var import_system64 = require("@marigold/system");
 var import_system65 = require("@marigold/system");
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column,
   width = "auto"
 }) => {
   var _a, _b;
-  const ref = (0, import_react47.useRef)(null);
+  const ref = (0, import_react48.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -3495,7 +3515,7 @@ var TableColumnHeader = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
     "th",
     {
       colSpan: column.colspan,
@@ -3505,7 +3525,7 @@ var TableColumnHeader = ({
       ...stateProps,
       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_runtime76.jsx)(import_icons2.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_icons2.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_icons2.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_runtime77.jsx)(import_icons2.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_icons2.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_icons2.SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3513,33 +3533,33 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("thead", { ...rowGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("thead", { ...rowGroupProps, children });
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_table6 = require("@react-aria/table");
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react48.useRef)(null);
+  const ref = (0, import_react49.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_focus12 = require("@react-aria/focus");
 var import_interactions6 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils21 = require("@react-aria/utils");
 var import_system66 = require("@marigold/system");
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react49.useRef)(null);
+  const ref = (0, import_react50.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
   const classNames2 = (0, import_system66.useClassNames)({
@@ -3567,7 +3587,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     "tr",
     {
       ref,
@@ -3585,18 +3605,18 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_focus13 = require("@react-aria/focus");
 var import_interactions7 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils22 = require("@react-aria/utils");
 var import_system67 = require("@marigold/system");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column,
   width = "auto"
 }) => {
-  const ref = (0, import_react50.useRef)(null);
+  const ref = (0, import_react51.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -3612,7 +3632,7 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "th",
     {
       ref,
@@ -3623,13 +3643,13 @@ var TableSelectAllCell = ({
       ),
       ...(0, import_utils22.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var Table = ({
   variant,
   size,
@@ -3638,7 +3658,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react51.useRef)(null);
+  const tableRef = (0, import_react52.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -3652,11 +3672,11 @@ var Table = ({
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
         "table",
         {
           ref: tableRef,
@@ -3668,17 +3688,17 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
                     column
                   },
                   column.key
-                ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                   TableColumnHeader,
                   {
                     width: (_c = column.props) == null ? void 0 : _c.width,
@@ -3688,12 +3708,12 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(TableBody, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map(
+                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map(
                   (cell) => {
                     var _a;
-                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(TableCell, { cell }, cell.key);
+                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(TableCell, { cell }, cell.key);
                   }
                 ) }, row.key)
               )
@@ -3712,7 +3732,7 @@ Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
 var import_system69 = require("@marigold/system");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var Text2 = ({
   variant,
   size,
@@ -3731,7 +3751,7 @@ var Text2 = ({
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
     "p",
     {
       ...props,
@@ -3758,11 +3778,11 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-var import_react52 = require("react");
-var import_react_aria_components21 = require("react-aria-components");
+var import_react53 = require("react");
+var import_react_aria_components22 = require("react-aria-components");
 var import_system70 = require("@marigold/system");
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var _TextArea = (0, import_react52.forwardRef)(
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var _TextArea = (0, import_react53.forwardRef)(
   ({
     variant,
     size,
@@ -3781,15 +3801,15 @@ var _TextArea = (0, import_react52.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(FieldBase2, { as: import_react_aria_components21.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_react_aria_components21.TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(FieldBase2, { as: import_react_aria_components22.TextField, ...props, variant, size, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_react_aria_components22.TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-var import_react53 = require("react");
-var import_react_aria_components22 = require("react-aria-components");
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var _TextField = (0, import_react53.forwardRef)(
+var import_react54 = require("react");
+var import_react_aria_components23 = require("react-aria-components");
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var _TextField = (0, import_react54.forwardRef)(
   ({
     variant,
     size,
@@ -3806,13 +3826,13 @@ var _TextField = (0, import_react53.forwardRef)(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(FieldBase2, { as: import_react_aria_components22.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(_Input, { ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(FieldBase2, { as: import_react_aria_components23.TextField, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
 var import_system71 = require("@marigold/system");
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3825,7 +3845,7 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     "div",
     {
       ...props,
@@ -3842,12 +3862,12 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_react_aria_components24 = require("react-aria-components");
+var import_react_aria_components25 = require("react-aria-components");
 var import_system72 = require("@marigold/system");
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react_aria_components23 = require("react-aria-components");
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_react_aria_components24 = require("react-aria-components");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3861,153 +3881,72 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react_aria_components23.TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react_aria_components24.TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
   const classNames2 = (0, import_system72.useClassNames)({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_react_aria_components24.Tooltip, { ...props, className: (0, import_system72.cn)("group/tooltip", classNames2.container), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react_aria_components24.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_react_aria_components25.Tooltip, { ...props, className: (0, import_system72.cn)("group/tooltip", classNames2.container), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_react_aria_components25.OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
   ] });
 };
 _Tooltip.Trigger = _TooltipTrigger;
 
-// src/TagGroup/index.ts
-var import_collections6 = require("@react-stately/collections");
-
-// src/TagGroup/TagGroup.tsx
-var import_react55 = require("react");
-var import_tag2 = require("@react-aria/tag");
-var import_list = require("@react-stately/list");
-var import_system74 = require("@marigold/system");
-
 // src/TagGroup/Tag.tsx
-var import_react54 = __toESM(require("react"));
-var import_button4 = require("@react-aria/button");
-var import_focus14 = require("@react-aria/focus");
-var import_tag = require("@react-aria/tag");
-var import_utils24 = require("@react-aria/utils");
-var import_system73 = require("@marigold/system");
-var import_jsx_runtime88 = require("react/jsx-runtime");
-var CloseButton2 = ({ className, ...props }) => {
-  const ref = (0, import_react54.useRef)(null);
-  const { buttonProps } = (0, import_button4.useButton)({ ...props }, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("button", { className, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime88.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, item, state, ...rest }) => {
-  const props = {
-    item,
-    ...rest
-  };
-  let ref = import_react54.default.useRef(null);
-  let { focusProps } = (0, import_focus14.useFocusRing)({ within: true });
-  const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = (0, import_tag.useTag)(
-    {
-      ...props,
-      item
-    },
-    state,
-    ref
-  );
-  const classNames2 = (0, import_system73.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-    "span",
-    {
-      ref,
-      ...(0, import_utils24.mergeProps)(rowProps, focusProps),
-      className: classNames2.tag,
-      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { ...gridCellProps, className: classNames2.gridCell, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { children: item.rendered }),
-        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
-          CloseButton2,
-          {
-            ...removeButtonProps,
-            className: (0, import_system73.cn)("flex items-center", classNames2.closeButton)
-          }
-        )
-      ] })
-    }
-  );
-};
+var import_react_aria_components27 = require("react-aria-components");
+var import_system74 = require("@marigold/system");
 
 // src/TagGroup/TagGroup.tsx
+var import_react_aria_components26 = require("react-aria-components");
+var import_system73 = require("@marigold/system");
 var import_jsx_runtime89 = require("react/jsx-runtime");
-var import_react56 = require("react");
-var TagGroup = ({
+var _TagGroup = ({
   width,
-  required,
-  error,
-  allowsRemoving,
+  items,
+  children,
+  variant,
+  size,
   ...rest
 }) => {
-  const props = {
-    isRequired: required,
-    validationState: error ? "invalid" : "valid",
-    ...rest
-  };
-  const inputRef = (0, import_react55.useRef)(null);
-  const state = (0, import_list.useListState)(props);
-  const { gridProps, labelProps, descriptionProps, errorMessageProps } = (0, import_tag2.useTagGroup)(props, state, inputRef);
-  const stateProps = (0, import_system74.useStateProps)({
-    error,
-    required
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-    FieldBase,
-    {
-      width,
-      label: props.label,
-      labelProps,
-      description: props.description,
-      descriptionProps,
-      error,
-      errorMessage: props.errorMessage,
-      errorMessageProps,
-      stateProps,
-      ...gridProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-        "div",
-        {
-          role: "presentation",
-          ref: inputRef,
-          className: "flex flex-wrap items-start gap-1",
-          children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_react56.createElement)(
-            Tag,
-            {
-              ...item.props,
-              key: item.key,
-              item,
-              state,
-              allowsRemoving,
-              onRemove: props.onRemove
-            },
-            item.rendered
-          ))
-        }
-      )
-    }
-  );
+  const classNames2 = (0, import_system73.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(FieldBase2, { as: import_react_aria_components26.TagGroup, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_react_aria_components26.TagList, { items, className: classNames2.listItems, children }) });
 };
 
-// src/TagGroup/index.ts
-var Tag2 = import_collections6.Item;
-Tag2.Group = TagGroup;
+// src/TagGroup/Tag.tsx
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var CloseButton2 = ({ className }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react_aria_components27.Button, { slot: "remove", className, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime90.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_system74.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react_aria_components27.Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
+    children,
+    allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      CloseButton2,
+      {
+        className: (0, import_system74.cn)("flex items-center", classNames2.closeButton)
+      }
+    )
+  ] }) });
+};
+_Tag.Group = _TagGroup;
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react57 = require("react");
+var import_react55 = require("react");
 var import_system75 = require("@marigold/system");
-var import_jsx_runtime90 = require("react/jsx-runtime");
-var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+var import_jsx_runtime91 = require("react/jsx-runtime");
+var XLoader = (0, import_react55.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
   import_system75.SVG,
   {
     id: "XLoader",
@@ -4017,13 +3956,13 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime90.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4036,12 +3975,12 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime90.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4054,12 +3993,12 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime90.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4072,12 +4011,12 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime90.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4090,12 +4029,12 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime90.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4108,12 +4047,12 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime90.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4126,12 +4065,12 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime90.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4144,12 +4083,12 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime90.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4162,12 +4101,12 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime90.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4180,12 +4119,12 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime90.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4198,12 +4137,12 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime91.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_runtime90.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4221,101 +4160,74 @@ var XLoader = (0, import_react57.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 ));
 
 // src/Tabs/Tabs.tsx
-var import_react61 = require("react");
-var import_tabs3 = require("@react-aria/tabs");
-var import_collections7 = require("@react-stately/collections");
-var import_tabs4 = require("@react-stately/tabs");
+var import_react_aria_components31 = require("react-aria-components");
 var import_system78 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react58 = require("react");
-var TabContext = (0, import_react58.createContext)({});
-var useTabContext = () => (0, import_react58.useContext)(TabContext);
+var import_react56 = require("react");
+var TabContext = (0, import_react56.createContext)({});
+var useTabContext = () => (0, import_react56.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react59 = require("react");
-var import_interactions8 = require("@react-aria/interactions");
-var import_tabs = require("@react-aria/tabs");
-var import_utils25 = require("@react-aria/utils");
+var import_react_aria_components28 = require("react-aria-components");
 var import_system76 = require("@marigold/system");
-var import_jsx_runtime91 = require("react/jsx-runtime");
-var Tab = ({ item, state }) => {
-  const { key, rendered } = item;
-  const ref = (0, import_react59.useRef)(null);
-  const { tabProps, isSelected } = (0, import_tabs.useTab)({ key }, state, ref);
-  const disabled = tabProps["aria-disabled"];
-  const { hoverProps, isHovered } = (0, import_interactions8.useHover)({
-    isDisabled: disabled || isSelected
-  });
-  const { focusProps } = (0, import_interactions8.useFocus)({});
-  const stateProps = (0, import_system76.useStateProps)({ active: isSelected, hover: isHovered });
+var import_jsx_runtime92 = require("react/jsx-runtime");
+var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-    "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    import_react_aria_components28.Tab,
     {
+      ...props,
       className: (0, import_system76.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
-      ...(0, import_utils25.mergeProps)(tabProps, stateProps, focusProps, hoverProps),
-      ref,
-      children: rendered
+      children: props.children
     }
   );
 };
 
-// src/Tabs/TabPanel.tsx
-var import_react60 = require("react");
-var import_tabs2 = require("@react-aria/tabs");
+// src/Tabs/TabList.tsx
+var import_react_aria_components29 = require("react-aria-components");
 var import_system77 = require("@marigold/system");
-var import_jsx_runtime92 = require("react/jsx-runtime");
-var TabPanel = ({ state, ...props }) => {
-  var _a;
-  const ref = (0, import_react60.useRef)(null);
-  const { tabPanelProps } = (0, import_tabs2.useTabPanel)(props, state, ref);
-  const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
+var import_jsx_runtime93 = require("react/jsx-runtime");
+var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_system77.cn)(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+    import_react_aria_components29.TabList,
+    {
+      ...props,
+      className: (0, import_system77.cn)("flex", import_system77.gapSpace[space], classNames2.tabsList),
+      children: props.children
+    }
+  );
+};
+
+// src/Tabs/TabPanel.tsx
+var import_react_aria_components30 = require("react-aria-components");
+var import_jsx_runtime94 = require("react/jsx-runtime");
+var _TabPanel = (props) => {
+  const { classNames: classNames2 } = useTabContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_react_aria_components30.TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
-var Tabs = ({
-  space = 2,
-  size = "medium",
-  disabled,
-  variant,
-  ...rest
-}) => {
-  var _a;
-  const ref = (0, import_react61.useRef)(null);
+var import_jsx_runtime95 = require("react/jsx-runtime");
+var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const state = (0, import_tabs4.useTabListState)(props);
-  const { tabListProps } = (0, import_tabs3.useTabList)(props, state, ref);
   const classNames2 = (0, import_system78.useClassNames)({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_system78.cn)(classNames2.container), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
-      "div",
-      {
-        className: (0, import_system78.cn)("flex", import_system78.gapSpace[space], classNames2.tabs),
-        ...tabListProps,
-        ref,
-        children: [...state.collection].map((item) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Tab, { item, state }, item.key);
-        })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(TabPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key)
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react_aria_components31.Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
-Tabs.Item = import_collections7.Item;
+_Tabs.List = _TabList;
+_Tabs.TabPanel = _TabPanel;
+_Tabs.Item = _Tab;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -4335,6 +4247,7 @@ Tabs.Item = import_collections7.Item;
   Center,
   Checkbox,
   CheckboxGroup,
+  CloseButton,
   Columns,
   ComboBox,
   Container,
@@ -4364,6 +4277,7 @@ Tabs.Item = import_collections7.Item;
   Popover,
   Radio,
   RadioGroup,
+  SearchField,
   Select,
   Slider,
   Split,
@@ -4383,8 +4297,6 @@ Tabs.Item = import_collections7.Item;
   Underlay,
   VisuallyHidden,
   XLoader,
-  _Slider,
-  _TextArea,
   useAsyncList,
   useFieldGroupContext,
   useListData,