@marigold/components 6.9.1 → 6.11.0

package/dist/index.mjs

@@ -252,7 +252,6 @@ var Aside = ({
   sideWidth,
   space = 0,
   side = "left",
-  stretch = true,
   wrap = "50%"
 }) => {
   const [left, right] = Children2.toArray(children);
@@ -260,34 +259,24 @@ var Aside = ({
     aside: createVar({ sideWidth }),
     content: createVar({ wrap })
   };
-  return /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: cn2(
-        "flex flex-wrap",
-        gapSpace[space],
-        !stretch && "items-start"
-      ),
-      children: [
-        /* @__PURE__ */ jsx5(
-          "div",
-          {
-            className: classNames[side === "left" ? "aside" : "content"],
-            style: vars[side === "left" ? "aside" : "content"],
-            children: left
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          "div",
-          {
-            className: classNames[side === "right" ? "aside" : "content"],
-            style: vars[side === "right" ? "aside" : "content"],
-            children: right
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs2("div", { className: cn2("flex flex-wrap", gapSpace[space]), children: [
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: classNames[side === "left" ? "aside" : "content"],
+        style: vars[side === "left" ? "aside" : "content"],
+        children: left
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        className: classNames[side === "right" ? "aside" : "content"],
+        style: vars[side === "right" ? "aside" : "content"],
+        children: right
+      }
+    )
+  ] });
 };
 
 // src/Aspect/Aspect.tsx
@@ -520,7 +509,7 @@ var Input = forwardRef3(
   }
 );
 
-// src/ListBox/ListBox.tsx
+// src/ListBox/_ListBox.tsx
 import { forwardRef as forwardRef4 } from "react";
 import { useListBox } from "@react-aria/listbox";
 import { useObjectRef } from "@react-aria/utils";
@@ -531,7 +520,7 @@ import { createContext as createContext2, useContext as useContext2 } from "reac
 var ListBoxContext = createContext2({});
 var useListBoxContext = () => useContext2(ListBoxContext);
 
-// src/ListBox/ListBoxOption.tsx
+// src/ListBox/_ListBoxOption.tsx
 import { useRef as useRef3 } from "react";
 import { useOption } from "@react-aria/listbox";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
@@ -564,7 +553,7 @@ var ListBoxOption = ({ item, state }) => {
   );
 };
 
-// src/ListBox/ListBoxSection.tsx
+// src/ListBox/_ListBoxSection.tsx
 import { useListBoxSection } from "@react-aria/listbox";
 import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 var ListBoxSection = ({ section, state }) => {
@@ -579,7 +568,7 @@ var ListBoxSection = ({ section, state }) => {
   ] });
 };
 
-// src/ListBox/ListBox.tsx
+// src/ListBox/_ListBox.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
 var ListBox = forwardRef4(
   ({ state, variant, size, ...props }, ref) => {
@@ -690,7 +679,7 @@ var Overlay = ({ children, container, open }) => {
   ) });
 };
 
-// src/Overlay/Popover.tsx
+// src/Overlay/_Popover.tsx
 import { forwardRef as forwardRef6, useRef as useRef5 } from "react";
 import { FocusScope } from "@react-aria/focus";
 import {
@@ -1339,7 +1328,6 @@ var HelpText2 = ({
   description,
   error,
   errorMessage,
-  isInvalid,
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
@@ -1598,6 +1586,7 @@ var _DialogTrigger = ({
   open,
   dismissable,
   keyboardDismissable,
+  isNonModal,
   ...rest
 }) => {
   const props = {
@@ -1608,6 +1597,8 @@ var _DialogTrigger = ({
   const [dialogTrigger, dialog] = children;
   const hasDialogTrigger = dialogTrigger.type !== _Dialog;
   const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
+  if (isNonModal)
+    return /* @__PURE__ */ jsx37(DialogTrigger, { ...props, children: props.children });
   return /* @__PURE__ */ jsxs15(DialogTrigger, { ...props, children: [
     hasDialogTrigger && dialogTrigger,
     /* @__PURE__ */ jsx37(
@@ -3018,9 +3009,38 @@ var _Radio = forwardRef14(
 );
 _Radio.Group = _RadioGroup;
 
+// src/SearchField/SearchField.tsx
+import { forwardRef as forwardRef15 } from "react";
+import { SearchField } from "react-aria-components";
+import { jsx as jsx68 } from "react/jsx-runtime";
+var SearchIcon2 = (props) => /* @__PURE__ */ jsx68(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    width: 24,
+    height: 24,
+    ...props,
+    children: /* @__PURE__ */ jsx68("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 = forwardRef15(
+  ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
+    const props = {
+      ...rest,
+      isDisabled: disabled,
+      isRequired: required,
+      isReadOnly: readOnly,
+      isInvalid: error
+    };
+    return /* @__PURE__ */ jsx68(FieldBase2, { as: SearchField, ...props, children: /* @__PURE__ */ jsx68(_Input, { ref, icon: /* @__PURE__ */ jsx68(SearchIcon2, {}) }) });
+  }
+);
+
 // src/Select/Select.tsx
 import {
-  forwardRef as forwardRef15,
+  forwardRef as forwardRef16,
   useRef as useRef17
 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
@@ -3048,8 +3068,8 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-import { jsx as jsx68, jsxs as jsxs29 } from "react/jsx-runtime";
-var Select = forwardRef15(
+import { jsx as jsx69, jsxs as jsxs29 } from "react/jsx-runtime";
+var Select = forwardRef16(
   ({
     variant,
     size,
@@ -3112,7 +3132,7 @@ var Select = forwardRef15(
         stateProps,
         disabled,
         children: [
-          /* @__PURE__ */ jsx68(
+          /* @__PURE__ */ jsx69(
             HiddenSelect,
             {
               state,
@@ -3133,12 +3153,12 @@ var Select = forwardRef15(
               ...mergeProps10(buttonProps, focusProps),
               ...stateProps,
               children: [
-                /* @__PURE__ */ jsx68("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
-                /* @__PURE__ */ jsx68(ChevronDown, { className: "h-4 w-4" })
+                /* @__PURE__ */ jsx69("div", { className: "overflow-hidden whitespace-nowrap", ...valueProps, children: state.selectedItem ? state.selectedItem.rendered : props.placeholder }),
+                /* @__PURE__ */ jsx69(ChevronDown, { className: "h-4 w-4" })
               ]
             }
           ),
-          isSmallScreen ? /* @__PURE__ */ jsx68(Tray, { state, children: /* @__PURE__ */ jsx68(
+          isSmallScreen ? /* @__PURE__ */ jsx69(Tray, { state, children: /* @__PURE__ */ jsx69(
             ListBox,
             {
               ref: listboxRef,
@@ -3147,7 +3167,7 @@ var Select = forwardRef15(
               size,
               ...menuProps
             }
-          ) }) : /* @__PURE__ */ jsx68(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ jsx68(
+          ) }) : /* @__PURE__ */ jsx69(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef, children: /* @__PURE__ */ jsx69(
             ListBox,
             {
               ref: listboxRef,
@@ -3166,7 +3186,7 @@ Select.Option = Item5;
 Select.Section = Section2;
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef17 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -3178,8 +3198,8 @@ import {
   width as twWidth3,
   useClassNames as useClassNames38
 } from "@marigold/system";
-import { jsx as jsx69, jsxs as jsxs30 } from "react/jsx-runtime";
-var _Slider = forwardRef16(
+import { jsx as jsx70, jsxs as jsxs30 } from "react/jsx-runtime";
+var _Slider = forwardRef17(
   ({
     thumbLabels,
     variant,
@@ -3208,13 +3228,13 @@ var _Slider = forwardRef16(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx69(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx69(SliderOutput, { className: cn37("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx69(
+          /* @__PURE__ */ jsx70(_Label, { children: props.children }),
+          /* @__PURE__ */ jsx70(SliderOutput, { className: cn37("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx70(
             SliderTrack,
             {
               className: cn37("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx69(
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx70(
                 SliderThumb,
                 {
                   className: cn37("top-1/2 cursor-pointer", classNames2.thumb),
@@ -3232,8 +3252,8 @@ var _Slider = forwardRef16(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
-var Split = (props) => /* @__PURE__ */ jsx70("div", { ...props, role: "separator", className: "grow" });
+import { jsx as jsx71 } from "react/jsx-runtime";
+var Split = (props) => /* @__PURE__ */ jsx71("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 import {
@@ -3241,7 +3261,7 @@ import {
   cn as cn38,
   gapSpace as gapSpace6
 } from "@marigold/system";
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -3252,7 +3272,7 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     "div",
     {
       className: cn38(
@@ -3269,15 +3289,15 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef17 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 import { Switch } from "react-aria-components";
 import {
   cn as cn39,
   width as twWidth4,
   useClassNames as useClassNames39
 } from "@marigold/system";
-import { jsx as jsx72, jsxs as jsxs31 } from "react/jsx-runtime";
-var _Switch = forwardRef17(
+import { jsx as jsx73, jsxs as jsxs31 } from "react/jsx-runtime";
+var _Switch = forwardRef18(
   ({
     variant,
     size,
@@ -3307,15 +3327,15 @@ var _Switch = forwardRef17(
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ jsx72(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ jsx72("div", { className: "relative", children: /* @__PURE__ */ jsx72(
+          /* @__PURE__ */ jsx73(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ jsx73("div", { className: "relative", children: /* @__PURE__ */ jsx73(
             "div",
             {
               className: cn39(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ jsx72(
+              children: /* @__PURE__ */ jsx73(
                 "div",
                 {
                   className: cn39(
@@ -3356,10 +3376,10 @@ var useTableContext = () => useContext7(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ jsx73("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx74("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
@@ -3368,7 +3388,7 @@ import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
 import { useStateProps as useStateProps11 } from "@marigold/system";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var TableCell = ({ cell }) => {
   const ref = useRef18(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
@@ -3391,7 +3411,7 @@ var TableCell = ({ cell }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing7();
   const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "td",
     {
       ref,
@@ -3431,7 +3451,7 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
   const ref = useRef19(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -3448,14 +3468,14 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing8();
   const stateProps = useStateProps12({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "td",
     {
       ref,
       className: cn40("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps12(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx75(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx76(_Checkbox, { ...checkboxProps })
     }
   );
 };
@@ -3469,7 +3489,7 @@ import { mergeProps as mergeProps13 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
 import { cn as cn41, useStateProps as useStateProps13 } from "@marigold/system";
 import { width as twWidth5 } from "@marigold/system";
-import { jsx as jsx76, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs32 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto"
@@ -3500,7 +3520,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__ */ jsx76(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx76(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx76(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__ */ jsx77(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx77(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx77(SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3508,21 +3528,21 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ jsx77("thead", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx78("thead", { ...rowGroupProps, children });
 };
 
 // src/Table/TableHeaderRow.tsx
 import { useRef as useRef21 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef21(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx78("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ jsx79("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -3532,7 +3552,7 @@ import { useHover as useHover5 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps14 } from "@react-aria/utils";
 import { cn as cn42, useClassNames as useClassNames40, useStateProps as useStateProps14 } from "@marigold/system";
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef22(null);
   const { interactive, state, ...ctx } = useTableContext();
@@ -3562,7 +3582,7 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx80(
     "tr",
     {
       ref,
@@ -3593,7 +3613,7 @@ import {
   width as twWidth6,
   useStateProps as useStateProps15
 } from "@marigold/system";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto"
@@ -3614,7 +3634,7 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx81(
     "th",
     {
       ref,
@@ -3625,13 +3645,13 @@ var TableSelectAllCell = ({
       ),
       ...mergeProps15(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx80(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx81(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx81, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs33 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
@@ -3654,7 +3674,7 @@ var Table = ({
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx82(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
@@ -3670,17 +3690,17 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx81(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx81(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ jsx82(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx82(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx81(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx82(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
                     column
                   },
                   column.key
-                ) : /* @__PURE__ */ jsx81(
+                ) : /* @__PURE__ */ jsx82(
                   TableColumnHeader,
                   {
                     width: (_c = column.props) == null ? void 0 : _c.width,
@@ -3692,10 +3712,10 @@ var Table = ({
             ) }, headerRow.key)) }),
             /* @__PURE__ */ jsxs33(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx81(TableRow, { row, children: [...collection.getChildren(row.key)].map(
+                (row) => row.type === "item" && /* @__PURE__ */ jsx82(TableRow, { row, children: [...collection.getChildren(row.key)].map(
                   (cell) => {
                     var _a;
-                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx81(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx81(TableCell, { cell }, cell.key);
+                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx82(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx82(TableCell, { cell }, cell.key);
                   }
                 ) }, row.key)
               )
@@ -3725,7 +3745,7 @@ import {
   useClassNames as useClassNames42,
   useTheme as useTheme6
 } from "@marigold/system";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { jsx as jsx83 } from "react/jsx-runtime";
 var Text2 = ({
   variant,
   size,
@@ -3744,7 +3764,7 @@ var Text2 = ({
     variant,
     size
   });
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx83(
     "p",
     {
       ...props,
@@ -3771,11 +3791,11 @@ var Text2 = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { TextArea, TextField } from "react-aria-components";
 import { useClassNames as useClassNames43 } from "@marigold/system";
-import { jsx as jsx83 } from "react/jsx-runtime";
-var _TextArea = forwardRef18(
+import { jsx as jsx84 } from "react/jsx-runtime";
+var _TextArea = forwardRef19(
   ({
     variant,
     size,
@@ -3794,15 +3814,15 @@ var _TextArea = forwardRef18(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx83(FieldBase2, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx83(TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ jsx84(FieldBase2, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx84(TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
-import { jsx as jsx84 } from "react/jsx-runtime";
-var _TextField = forwardRef19(
+import { jsx as jsx85 } from "react/jsx-runtime";
+var _TextField = forwardRef20(
   ({
     variant,
     size,
@@ -3819,13 +3839,13 @@ var _TextField = forwardRef19(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx84(FieldBase2, { as: TextField2, ...props, children: /* @__PURE__ */ jsx84(_Input, { ref }) });
+    return /* @__PURE__ */ jsx85(FieldBase2, { as: TextField2, ...props, children: /* @__PURE__ */ jsx85(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
 import { cn as cn46, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3838,7 +3858,7 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx86(
     "div",
     {
       ...props,
@@ -3860,7 +3880,7 @@ import { cn as cn47, useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3874,11 +3894,11 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ jsx86(TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ jsx87(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx87, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs34 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
@@ -3886,141 +3906,60 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   };
   const classNames2 = useClassNames44({ component: "Tooltip", variant, size });
   return /* @__PURE__ */ jsxs34(Tooltip, { ...props, className: cn47("group/tooltip", classNames2.container), children: [
-    /* @__PURE__ */ jsx87(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx87("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx87("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+    /* @__PURE__ */ jsx88(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx88("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx88("path", { d: "M0 0 L4 4 L8 0" }) }) }),
     children
   ] });
 };
 _Tooltip.Trigger = _TooltipTrigger;
 
-// src/TagGroup/index.ts
-import { Item as Item6 } from "@react-stately/collections";
-
-// src/TagGroup/TagGroup.tsx
-import { useRef as useRef26 } from "react";
-import { useTagGroup } from "@react-aria/tag";
-import { useListState } from "@react-stately/list";
-import { useStateProps as useStateProps16 } from "@marigold/system";
-
 // src/TagGroup/Tag.tsx
-import React3, { useRef as useRef25 } from "react";
-import { useButton as useButton4 } from "@react-aria/button";
-import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
-import { useTag } from "@react-aria/tag";
-import { mergeProps as mergeProps16 } from "@react-aria/utils";
-import { cn as cn48, useClassNames as useClassNames45 } from "@marigold/system";
-import { jsx as jsx88, jsxs as jsxs35 } from "react/jsx-runtime";
-var CloseButton2 = ({ className, ...props }) => {
-  const ref = useRef25(null);
-  const { buttonProps } = useButton4({ ...props }, ref);
-  return /* @__PURE__ */ jsx88("button", { className, ...buttonProps, children: /* @__PURE__ */ jsx88("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx88("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 = React3.useRef(null);
-  let { focusProps } = useFocusRing12({ within: true });
-  const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = useTag(
-    {
-      ...props,
-      item
-    },
-    state,
-    ref
-  );
-  const classNames2 = useClassNames45({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx88(
-    "span",
-    {
-      ref,
-      ...mergeProps16(rowProps, focusProps),
-      className: classNames2.tag,
-      children: /* @__PURE__ */ jsxs35("div", { ...gridCellProps, className: classNames2.gridCell, children: [
-        /* @__PURE__ */ jsx88("span", { children: item.rendered }),
-        allowsRemoving && /* @__PURE__ */ jsx88(
-          CloseButton2,
-          {
-            ...removeButtonProps,
-            className: cn48("flex items-center", classNames2.closeButton)
-          }
-        )
-      ] })
-    }
-  );
-};
+import { Button as Button3, Tag } from "react-aria-components";
+import { cn as cn48, useClassNames as useClassNames46 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
+import { TagGroup, TagList } from "react-aria-components";
+import { useClassNames as useClassNames45 } from "@marigold/system";
 import { jsx as jsx89 } from "react/jsx-runtime";
-import { createElement } from "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 = useRef26(null);
-  const state = useListState(props);
-  const { gridProps, labelProps, descriptionProps, errorMessageProps } = useTagGroup(props, state, inputRef);
-  const stateProps = useStateProps16({
-    error,
-    required
-  });
-  return /* @__PURE__ */ jsx89(
-    FieldBase,
-    {
-      width,
-      label: props.label,
-      labelProps,
-      description: props.description,
-      descriptionProps,
-      error,
-      errorMessage: props.errorMessage,
-      errorMessageProps,
-      stateProps,
-      ...gridProps,
-      children: /* @__PURE__ */ jsx89(
-        "div",
-        {
-          role: "presentation",
-          ref: inputRef,
-          className: "flex flex-wrap items-start gap-1",
-          children: [...state.collection].map((item) => /* @__PURE__ */ createElement(
-            Tag,
-            {
-              ...item.props,
-              key: item.key,
-              item,
-              state,
-              allowsRemoving,
-              onRemove: props.onRemove
-            },
-            item.rendered
-          ))
-        }
-      )
-    }
-  );
+  const classNames2 = useClassNames45({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx89(FieldBase2, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx89(TagList, { items, className: classNames2.listItems, children }) });
 };
 
-// src/TagGroup/index.ts
-var Tag2 = Item6;
-Tag2.Group = TagGroup;
+// src/TagGroup/Tag.tsx
+import { Fragment as Fragment10, jsx as jsx90, jsxs as jsxs35 } from "react/jsx-runtime";
+var CloseButton2 = ({ className }) => {
+  return /* @__PURE__ */ jsx90(Button3, { slot: "remove", className, children: /* @__PURE__ */ jsx90("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx90("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 = useClassNames46({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx90(Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs35(Fragment10, { children: [
+    children,
+    allowsRemoving && /* @__PURE__ */ jsx90(
+      CloseButton2,
+      {
+        className: cn48("flex items-center", classNames2.closeButton)
+      }
+    )
+  ] }) });
+};
+_Tag.Group = _TagGroup;
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import { SVG as SVG6 } from "@marigold/system";
-import { jsx as jsx90, jsxs as jsxs36 } from "react/jsx-runtime";
-var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
+import { jsx as jsx91, jsxs as jsxs36 } from "react/jsx-runtime";
+var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
   SVG6,
   {
     id: "XLoader",
@@ -4030,13 +3969,13 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ jsx90("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ jsx91(
         "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__ */ jsx90(
+          children: /* @__PURE__ */ jsx91(
             "animate",
             {
               attributeName: "opacity",
@@ -4049,12 +3988,12 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         "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__ */ jsx90(
+          children: /* @__PURE__ */ jsx91(
             "animate",
             {
               attributeName: "opacity",
@@ -4067,12 +4006,12 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         "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__ */ jsx90(
+          children: /* @__PURE__ */ jsx91(
             "animate",
             {
               attributeName: "opacity",
@@ -4085,12 +4024,12 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         "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__ */ jsx90(
+          children: /* @__PURE__ */ jsx91(
             "animate",
             {
               attributeName: "opacity",
@@ -4103,12 +4042,12 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         "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__ */ jsx90(
+          children: /* @__PURE__ */ jsx91(
             "animate",
             {
               attributeName: "opacity",
@@ -4121,12 +4060,12 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         "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__ */ jsx90(
+          children: /* @__PURE__ */ jsx91(
             "animate",
             {
               attributeName: "opacity",
@@ -4139,12 +4078,12 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         "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__ */ jsx90(
+          children: /* @__PURE__ */ jsx91(
             "animate",
             {
               attributeName: "opacity",
@@ -4157,12 +4096,12 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         "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__ */ jsx90(
+          children: /* @__PURE__ */ jsx91(
             "animate",
             {
               attributeName: "opacity",
@@ -4175,12 +4114,12 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         "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__ */ jsx90(
+          children: /* @__PURE__ */ jsx91(
             "animate",
             {
               attributeName: "opacity",
@@ -4193,12 +4132,12 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         "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__ */ jsx90(
+          children: /* @__PURE__ */ jsx91(
             "animate",
             {
               attributeName: "opacity",
@@ -4211,12 +4150,12 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
           )
         }
       ),
-      /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91(
         "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__ */ jsx90(
+          children: /* @__PURE__ */ jsx91(
             "animate",
             {
               attributeName: "opacity",
@@ -4234,11 +4173,8 @@ var XLoader = forwardRef20((props, ref) => /* @__PURE__ */ jsxs36(
 ));
 
 // src/Tabs/Tabs.tsx
-import { useRef as useRef29 } from "react";
-import { useTabList } from "@react-aria/tabs";
-import { Item as Item7 } from "@react-stately/collections";
-import { useTabListState } from "@react-stately/tabs";
-import { cn as cn51, gapSpace as gapSpace8, useClassNames as useClassNames46 } from "@marigold/system";
+import { Tabs } from "react-aria-components";
+import { useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/Tabs/Context.ts
 import { createContext as createContext7, useContext as useContext8 } from "react";
@@ -4246,89 +4182,65 @@ var TabContext = createContext7({});
 var useTabContext = () => useContext8(TabContext);
 
 // src/Tabs/Tab.tsx
-import { useRef as useRef27 } from "react";
-import { useFocus, useHover as useHover7 } from "@react-aria/interactions";
-import { useTab } from "@react-aria/tabs";
-import { mergeProps as mergeProps17 } from "@react-aria/utils";
-import { cn as cn49, useStateProps as useStateProps17 } from "@marigold/system";
-import { jsx as jsx91 } from "react/jsx-runtime";
-var Tab = ({ item, state }) => {
-  const { key, rendered } = item;
-  const ref = useRef27(null);
-  const { tabProps, isSelected } = useTab({ key }, state, ref);
-  const disabled = tabProps["aria-disabled"];
-  const { hoverProps, isHovered } = useHover7({
-    isDisabled: disabled || isSelected
-  });
-  const { focusProps } = useFocus({});
-  const stateProps = useStateProps17({ active: isSelected, hover: isHovered });
+import { Tab } from "react-aria-components";
+import { cn as cn49 } from "@marigold/system";
+import { jsx as jsx92 } from "react/jsx-runtime";
+var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx91(
-    "div",
+  return /* @__PURE__ */ jsx92(
+    Tab,
     {
+      ...props,
       className: cn49(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
-      ...mergeProps17(tabProps, stateProps, focusProps, hoverProps),
-      ref,
-      children: rendered
+      children: props.children
+    }
+  );
+};
+
+// src/Tabs/TabList.tsx
+import { TabList } from "react-aria-components";
+import { cn as cn50, gapSpace as gapSpace8 } from "@marigold/system";
+import { jsx as jsx93 } from "react/jsx-runtime";
+var _TabList = ({ space = 2, ...props }) => {
+  const { classNames: classNames2 } = useTabContext();
+  return /* @__PURE__ */ jsx93(
+    TabList,
+    {
+      ...props,
+      className: cn50("flex", gapSpace8[space], classNames2.tabsList),
+      children: props.children
     }
   );
 };
 
 // src/Tabs/TabPanel.tsx
-import { useRef as useRef28 } from "react";
-import { useTabPanel } from "@react-aria/tabs";
-import { cn as cn50 } from "@marigold/system";
-import { jsx as jsx92 } from "react/jsx-runtime";
-var TabPanel = ({ state, ...props }) => {
-  var _a;
-  const ref = useRef28(null);
-  const { tabPanelProps } = useTabPanel(props, state, ref);
-  const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
+import { TabPanel } from "react-aria-components";
+import { jsx as jsx94 } from "react/jsx-runtime";
+var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx92("div", { className: cn50(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
+  return /* @__PURE__ */ jsx94(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx93, jsxs as jsxs37 } from "react/jsx-runtime";
-var Tabs = ({
-  space = 2,
-  size = "medium",
-  disabled,
-  variant,
-  ...rest
-}) => {
-  var _a;
-  const ref = useRef29(null);
+import { jsx as jsx95 } from "react/jsx-runtime";
+var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
     ...rest
   };
-  const state = useTabListState(props);
-  const { tabListProps } = useTabList(props, state, ref);
-  const classNames2 = useClassNames46({
+  const classNames2 = useClassNames47({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ jsx93(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs37("div", { className: cn51(classNames2.container), children: [
-    /* @__PURE__ */ jsx93(
-      "div",
-      {
-        className: cn51("flex", gapSpace8[space], classNames2.tabs),
-        ...tabListProps,
-        ref,
-        children: [...state.collection].map((item) => {
-          return /* @__PURE__ */ jsx93(Tab, { item, state }, item.key);
-        })
-      }
-    ),
-    /* @__PURE__ */ jsx93(TabPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key)
-  ] }) });
+  return /* @__PURE__ */ jsx95(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx95(Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
-Tabs.Item = Item7;
+_Tabs.List = _TabList;
+_Tabs.TabPanel = _TabPanel;
+_Tabs.Item = _Tab;
 export {
   Accordion,
   AccordionItem,
@@ -4347,6 +4259,7 @@ export {
   Center,
   _Checkbox as Checkbox,
   _CheckboxGroup as CheckboxGroup,
+  CloseButton2 as CloseButton,
   Columns,
   ComboBox,
   Container,
@@ -4376,14 +4289,15 @@ export {
   Popover,
   _Radio as Radio,
   _RadioGroup as RadioGroup,
+  _SearchField as SearchField,
   Select,
   _Slider as Slider,
   Split,
   Stack,
   _Switch as Switch,
   Table,
-  Tabs,
-  Tag2 as Tag,
+  _Tabs as Tabs,
+  _Tag as Tag,
   Text2 as Text,
   _TextArea as TextArea,
   _TextField as TextField,
@@ -4395,8 +4309,6 @@ export {
   Underlay,
   VisuallyHidden,
   XLoader,
-  _Slider,
-  _TextArea,
   useAsyncList,
   useFieldGroupContext,
   useListData,