@marigold/components 6.9.0 → 6.10.0

package/dist/index.mjs

@@ -586,20 +586,18 @@ var ListBox = forwardRef4(
     const innerRef = useObjectRef(ref);
     const { listBoxProps } = useListBox(props, state, innerRef);
     const classNames2 = useClassNames6({ component: "ListBox", variant, size });
-    return /* @__PURE__ */ jsx14(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx14("div", { className: classNames2.container, children: /* @__PURE__ */ jsx14(
-      "ul",
+    return /* @__PURE__ */ jsx14(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx14(
+      "div",
       {
         className: cn8(
-          "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
-          classNames2.list
+          "overflow-y-auto overflow-x-hidden",
+          classNames2.container
         ),
-        ref: innerRef,
-        ...listBoxProps,
-        children: [...state.collection].map(
+        children: /* @__PURE__ */ jsx14("ul", { className: classNames2.list, ref: innerRef, ...listBoxProps, children: [...state.collection].map(
           (item) => item.type === "section" ? /* @__PURE__ */ jsx14(ListBoxSection, { section: item, state }, item.key) : /* @__PURE__ */ jsx14(ListBoxOption, { item, state }, item.key)
-        )
+        ) })
       }
-    ) }) });
+    ) });
   }
 );
 
@@ -697,7 +695,7 @@ import {
   DismissButton,
   usePopover
 } from "@react-aria/overlays";
-import { useClassNames as useClassNames8 } from "@marigold/system";
+import { cn as cn10, useClassNames as useClassNames8 } from "@marigold/system";
 import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var Popover = forwardRef6(
   (props, ref) => {
@@ -735,7 +733,10 @@ var PopoverWrapper = forwardRef6(
         "div",
         {
           ...popoverProps,
-          className: classNames2,
+          className: cn10(
+            "flex flex-col sm:max-h-[75vh] lg:max-h-[45vh]",
+            classNames2
+          ),
           style: {
             ...popoverProps.style,
             minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
@@ -763,11 +764,11 @@ import {
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 
 // src/Overlay/_Underlay.tsx
-import { cn as cn10, useClassNames as useClassNames9 } from "@marigold/system";
+import { cn as cn11, useClassNames as useClassNames9 } from "@marigold/system";
 import { jsx as jsx19 } from "react/jsx-runtime";
 var Underlay2 = ({ size, variant, ...props }) => {
   const classNames2 = useClassNames9({ component: "Underlay", size, variant });
-  return /* @__PURE__ */ jsx19("div", { className: cn10("fixed inset-0 z-40", classNames2), ...props });
+  return /* @__PURE__ */ jsx19("div", { className: cn11("fixed inset-0 z-40", classNames2), ...props });
 };
 
 // src/Overlay/Tray.tsx
@@ -811,7 +812,7 @@ import { useButton as useButton2 } from "@react-aria/button";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn11, useStateProps as useStateProps3 } from "@marigold/system";
+import { cn as cn12, useStateProps as useStateProps3 } from "@marigold/system";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var ClearButton = ({
   preventFocus,
@@ -861,7 +862,7 @@ var ClearButton = ({
       ...mergeProps4(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       ref: buttonRef,
-      className: cn11(
+      className: cn12(
         "cursor-pointer appearance-none border-none p-0 pr-1",
         className
       ),
@@ -1000,7 +1001,7 @@ import { useComboBoxState as useComboBoxState2 } from "@react-stately/combobox";
 // src/Button/Button.tsx
 import { forwardRef as forwardRef8 } from "react";
 import { Button } from "react-aria-components";
-import { cn as cn12, useClassNames as useClassNames10 } from "@marigold/system";
+import { cn as cn13, useClassNames as useClassNames10 } from "@marigold/system";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var _Button = forwardRef8(
   ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
@@ -1015,7 +1016,7 @@ var _Button = forwardRef8(
       {
         ...props,
         ref,
-        className: cn12(
+        className: cn13(
           "inline-flex items-center justify-center gap-[0.5ch]",
           classNames2,
           fullWidth ? "w-full" : void 0
@@ -1121,7 +1122,7 @@ var Badge = ({ variant, size, children, ...props }) => {
 };
 
 // src/Breakout/Breakout.tsx
-import { alignment, cn as cn13, createVar as createVar4 } from "@marigold/system";
+import { alignment, cn as cn14, createVar as createVar4 } from "@marigold/system";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var Breakout = ({
   height,
@@ -1135,7 +1136,7 @@ var Breakout = ({
   return /* @__PURE__ */ jsx26(
     "div",
     {
-      className: cn13(
+      className: cn14(
         "col-start-[1_!important] col-end-[-1_!important] w-full",
         alignX && ((_b = (_a = alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
         alignY && ((_d = (_c = alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
@@ -1159,7 +1160,7 @@ var Body = ({ children, variant, size, ...props }) => {
 
 // src/Card/Card.tsx
 import {
-  cn as cn14,
+  cn as cn15,
   gapSpace as gapSpace2,
   paddingBottom,
   paddingLeft,
@@ -1190,7 +1191,7 @@ var Card = ({
     "div",
     {
       ...props,
-      className: cn14(
+      className: cn15(
         "flex flex-col",
         classNames2,
         gapSpace2[space],
@@ -1208,7 +1209,7 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-import { cn as cn15, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
+import { cn as cn16, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var Center = ({
   maxWidth = "100%",
@@ -1220,7 +1221,7 @@ var Center = ({
     "div",
     {
       ...props,
-      className: cn15(
+      className: cn16(
         "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
         gapSpace3[space],
         "max-w-[--maxWidth]"
@@ -1234,7 +1235,7 @@ var Center = ({
 // src/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef9 } from "react";
 import { Checkbox } from "react-aria-components";
-import { cn as cn16, useClassNames as useClassNames14 } from "@marigold/system";
+import { cn as cn17, useClassNames as useClassNames14 } from "@marigold/system";
 import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
 var CheckMark = () => /* @__PURE__ */ jsx30("svg", { viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx30(
   "path",
@@ -1257,7 +1258,7 @@ var Icon = ({ className, checked, indeterminate, ...props }) => {
     "div",
     {
       "aria-hidden": "true",
-      className: cn16(
+      className: cn17(
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
@@ -1299,7 +1300,7 @@ var _Checkbox = forwardRef9(
       Checkbox,
       {
         ref,
-        className: cn16(
+        className: cn17(
           "group/checkbox flex items-center gap-[0.5rem]",
           "cursor-pointer data-[disabled]:cursor-not-allowed",
           classNames2.container
@@ -1327,11 +1328,11 @@ import { useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/FieldBase/_FieldBase.tsx
 import { forwardRef as forwardRef10 } from "react";
-import { cn as cn18, width as twWidth2, useClassNames as useClassNames16 } from "@marigold/system";
+import { cn as cn19, width as twWidth2, useClassNames as useClassNames16 } from "@marigold/system";
 
 // src/HelpText/_HelpText.tsx
 import { FieldError, Text } from "react-aria-components";
-import { cn as cn17, useClassNames as useClassNames15 } from "@marigold/system";
+import { cn as cn18, useClassNames as useClassNames15 } from "@marigold/system";
 import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 var HelpText2 = ({
   variant,
@@ -1351,7 +1352,7 @@ var HelpText2 = ({
   if (!description && !errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ jsxs13("div", { className: cn17(classNames2.container), children: [
+  return /* @__PURE__ */ jsxs13("div", { className: cn18(classNames2.container), children: [
     /* @__PURE__ */ jsxs13(
       FieldError,
       {
@@ -1361,7 +1362,7 @@ var HelpText2 = ({
           /* @__PURE__ */ jsx31(
             "svg",
             {
-              className: cn17("h-4 w-4", classNames2.icon),
+              className: cn18("h-4 w-4", classNames2.icon),
               viewBox: "0 0 24 24",
               role: "presentation",
               fill: "currentColor",
@@ -1402,7 +1403,7 @@ var _FieldBase = (props, ref) => {
     Component,
     {
       ref,
-      className: cn18("group/field", twWidth2[width], classNames2, className),
+      className: cn19("group/field", twWidth2[width], classNames2, className),
       "data-required": props.isRequired ? true : void 0,
       "data-error": props.isInvalid ? true : void 0,
       ...rest,
@@ -1456,7 +1457,7 @@ var _CheckboxGroup = ({
 
 // src/Columns/Columns.tsx
 import { Children as Children3, cloneElement as cloneElement3, isValidElement as isValidElement2 } from "react";
-import { cn as cn19, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
+import { cn as cn20, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
@@ -1476,7 +1477,7 @@ var Columns = ({
   return /* @__PURE__ */ jsx34(
     "div",
     {
-      className: cn19(
+      className: cn20(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
         gapSpace4[space]
@@ -1485,7 +1486,7 @@ var Columns = ({
       children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx34(
         "div",
         {
-          className: cn19(
+          className: cn20(
             "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
           style: createVar6({ collapseAt, columnSize: columns[idx] }),
@@ -1498,7 +1499,7 @@ var Columns = ({
 
 // src/Container/Container.tsx
 import {
-  cn as cn20,
+  cn as cn21,
   createVar as createVar7,
   gridColsAlign,
   gridColumn,
@@ -1528,7 +1529,7 @@ var Container = ({
     "div",
     {
       ...props,
-      className: cn20(
+      className: cn21(
         "grid",
         placeItems[alignItems],
         gridColsAlign[align],
@@ -1543,12 +1544,12 @@ var Container = ({
 // src/Dialog/Dialog.tsx
 import { useContext as useContext3 } from "react";
 import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
-import { cn as cn22, useClassNames as useClassNames19 } from "@marigold/system";
+import { cn as cn23, useClassNames as useClassNames19 } from "@marigold/system";
 
 // src/Headline/Headline.tsx
 import { Heading } from "react-aria-components";
 import {
-  cn as cn21,
+  cn as cn22,
   createVar as createVar8,
   get,
   textAlign,
@@ -1576,7 +1577,7 @@ var _Headline = ({
     {
       level: Number(level),
       ...props,
-      className: cn21(classNames2, "text-[--color]", textAlign[align]),
+      className: cn22(classNames2, "text-[--color]", textAlign[align]),
       style: createVar8({
         color: color && theme.colors && get(
           theme.colors,
@@ -1628,7 +1629,7 @@ var CloseButton = ({ className }) => {
   return /* @__PURE__ */ jsx38("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx38(
     "button",
     {
-      className: cn22(
+      className: cn23(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
@@ -1665,7 +1666,7 @@ var _Dialog = ({
     Dialog,
     {
       ...props,
-      className: cn22("relative outline-none", classNames2.container),
+      className: cn23("relative outline-none", classNames2.container),
       children: /* @__PURE__ */ jsxs16(Fragment5, { children: [
         closeButton && /* @__PURE__ */ jsx38(CloseButton, { className: classNames2.closeButton }),
         children
@@ -1708,7 +1709,7 @@ var _Header = ({ variant, size, ...props }) => {
 
 // src/Image/Image.tsx
 import {
-  cn as cn23,
+  cn as cn24,
   objectFit,
   objectPosition,
   useClassNames as useClassNames23
@@ -1727,7 +1728,7 @@ var Image = ({
     {
       ...props,
       alt: props.alt,
-      className: cn23(
+      className: cn24(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1740,7 +1741,7 @@ var Image = ({
 // src/Inline/Inline.tsx
 import {
   alignment as alignment2,
-  cn as cn24,
+  cn as cn25,
   gapSpace as gapSpace5
 } from "@marigold/system";
 import { jsx as jsx43 } from "react/jsx-runtime";
@@ -1757,7 +1758,7 @@ var Inline = ({
     "div",
     {
       ...props,
-      className: cn24(
+      className: cn25(
         "flex flex-wrap",
         gapSpace5[space],
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
@@ -1777,14 +1778,14 @@ import { useLocale } from "@react-aria/i18n";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
 import { useDateFieldState } from "@react-stately/datepicker";
-import { cn as cn26, useClassNames as useClassNames24, useStateProps as useStateProps5 } from "@marigold/system";
+import { cn as cn27, useClassNames as useClassNames24, useStateProps as useStateProps5 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { useRef as useRef8 } from "react";
 import { useDateSegment } from "@react-aria/datepicker";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { cn as cn25, useStateProps as useStateProps4 } from "@marigold/system";
+import { cn as cn26, useStateProps as useStateProps4 } from "@marigold/system";
 import { jsx as jsx44, jsxs as jsxs17 } from "react/jsx-runtime";
 var DateSegment = ({
   className,
@@ -1808,7 +1809,7 @@ var DateSegment = ({
     {
       ...mergeProps5(segmentProps, stateProps, focusProps),
       ref,
-      className: cn25(
+      className: cn26(
         "group/segment",
         "text-center leading-none outline-0",
         type !== "literal" && "p-0.5",
@@ -1823,7 +1824,7 @@ var DateSegment = ({
           "span",
           {
             "aria-hidden": "true",
-            className: cn25(
+            className: cn26(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
@@ -1906,7 +1907,7 @@ var DateField = ({
         "div",
         {
           ...mergeProps6(fieldProps, focusProps, stateProps, hoverProps),
-          className: cn26(
+          className: cn27(
             "relative flex flex-row flex-nowrap",
             "cursor-text aria-disabled:cursor-not-allowed",
             classNames2.field
@@ -1931,7 +1932,7 @@ var DateField = ({
               "svg",
               {
                 "data-testid": "action",
-                className: cn26(classNames2.action),
+                className: cn27(classNames2.action),
                 viewBox: "0 0 24 24",
                 width: 24,
                 height: 24,
@@ -1954,7 +1955,7 @@ import {
 import { useDateFormatter as useDateFormatter3, useLocale as useLocale3 } from "@react-aria/i18n";
 import { useCalendarState } from "@react-stately/calendar";
 import { ChevronDown as ChevronDown2, ChevronLeft, ChevronRight } from "@marigold/icons";
-import { cn as cn28, useClassNames as useClassNames26, useStateProps as useStateProps7 } from "@marigold/system";
+import { cn as cn29, useClassNames as useClassNames26, useStateProps as useStateProps7 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import { getWeeksInMonth, startOfWeek, today } from "@internationalized/date";
@@ -1968,7 +1969,7 @@ import { useRef as useRef10 } from "react";
 import { useCalendarCell } from "@react-aria/calendar";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
-import { cn as cn27, useClassNames as useClassNames25, useStateProps as useStateProps6 } from "@marigold/system";
+import { cn as cn28, useClassNames as useClassNames25, useStateProps as useStateProps6 } from "@marigold/system";
 import { jsx as jsx46 } from "react/jsx-runtime";
 var CalendarCell = (props) => {
   const ref = useRef10(null);
@@ -1989,7 +1990,7 @@ var CalendarCell = (props) => {
   return /* @__PURE__ */ jsx46("td", { className: "group/cell", ...cellProps, children: /* @__PURE__ */ jsx46(
     "div",
     {
-      className: cn27(
+      className: cn28(
         "flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
         classNames2.calendarCell
       ),
@@ -2210,7 +2211,7 @@ var Calendar = ({
     "div",
     {
       tabIndex: -1,
-      className: cn28(
+      className: cn29(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4  shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
         classNames2.calendar
       ),
@@ -2238,7 +2239,7 @@ var Calendar = ({
               {
                 disabled: state.isDisabled,
                 onClick: () => setSelectedDropdown("month"),
-                className: cn28(buttonStyles, selectClassNames),
+                className: cn29(buttonStyles, selectClassNames),
                 "data-testid": "month",
                 children: [
                   selectedValue.month,
@@ -2251,7 +2252,7 @@ var Calendar = ({
               {
                 disabled: state.isDisabled,
                 onClick: () => setSelectedDropdown("year"),
-                className: cn28(buttonStyles, selectClassNames),
+                className: cn29(buttonStyles, selectClassNames),
                 "data-testid": "year",
                 children: [
                   selectedValue.year,
@@ -2263,7 +2264,7 @@ var Calendar = ({
           /* @__PURE__ */ jsxs20(
             "div",
             {
-              className: cn28(
+              className: cn29(
                 "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
                 classNames2.calendarControllers
               ),
@@ -2364,7 +2365,7 @@ var DatePicker = ({
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn29,
+  cn as cn30,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
@@ -2373,7 +2374,7 @@ import { jsx as jsx52 } from "react/jsx-runtime";
 var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
   "div",
   {
-    className: cn29(
+    className: cn30(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -2615,7 +2616,7 @@ var ActionMenu = (props) => {
 };
 
 // src/Message/Message.tsx
-import { cn as cn30, useClassNames as useClassNames32 } from "@marigold/system";
+import { cn as cn31, useClassNames as useClassNames32 } from "@marigold/system";
 import { jsx as jsx61, jsxs as jsxs25 } from "react/jsx-runtime";
 var icons = {
   success: () => /* @__PURE__ */ jsx61(
@@ -2695,21 +2696,21 @@ var Message = ({
   return /* @__PURE__ */ jsxs25(
     "div",
     {
-      className: cn30(
+      className: cn31(
         "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
         classNames2.container
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx61("div", { className: cn30("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx61(Icon3, {}) }),
+        /* @__PURE__ */ jsx61("div", { className: cn31("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx61(Icon3, {}) }),
         /* @__PURE__ */ jsx61(
           "div",
           {
-            className: cn30("col-start-2 row-start-1 self-center", classNames2.title),
+            className: cn31("col-start-2 row-start-1 self-center", classNames2.title),
             children: messageTitle
           }
         ),
-        /* @__PURE__ */ jsx61("div", { className: cn30("col-start-2", classNames2.content), children })
+        /* @__PURE__ */ jsx61("div", { className: cn31("col-start-2", classNames2.content), children })
       ]
     }
   );
@@ -2718,12 +2719,12 @@ var Message = ({
 // src/NumberField/NumberField.tsx
 import { forwardRef as forwardRef13 } from "react";
 import { Group, NumberField } from "react-aria-components";
-import { cn as cn33, useClassNames as useClassNames34 } from "@marigold/system";
+import { cn as cn34, useClassNames as useClassNames34 } from "@marigold/system";
 
 // src/Input/_Input.tsx
 import { cloneElement as cloneElement4, forwardRef as forwardRef12 } from "react";
 import { Input as Input2 } from "react-aria-components";
-import { cn as cn31, useClassNames as useClassNames33 } from "@marigold/system";
+import { cn as cn32, useClassNames as useClassNames33 } from "@marigold/system";
 import { jsx as jsx62, jsxs as jsxs26 } from "react/jsx-runtime";
 var _Input = forwardRef12(
   ({ type, icon, action, variant, size, className, ...props }, ref) => {
@@ -2733,7 +2734,7 @@ var _Input = forwardRef12(
       size
     });
     const inputIcon = icon ? cloneElement4(icon, {
-      className: cn31(
+      className: cn32(
         "pointer-events-none absolute",
         classNames2.icon,
         icon.props.className
@@ -2741,7 +2742,7 @@ var _Input = forwardRef12(
       ...icon.props
     }) : null;
     const inputAction = action && !props.readOnly ? cloneElement4(action, {
-      className: cn31(
+      className: cn32(
         "absolute",
         classNames2.action,
         action.props.className
@@ -2760,7 +2761,7 @@ var _Input = forwardRef12(
             Input2,
             {
               ...props,
-              className: cn31(
+              className: cn32(
                 "w-full flex-1",
                 "disabled:cursor-not-allowed",
                 "[&[type=file]]:border-none [&[type=file]]:p-0",
@@ -2781,7 +2782,7 @@ var _Input = forwardRef12(
 
 // src/NumberField/StepButton.tsx
 import { Button as Button2 } from "react-aria-components";
-import { cn as cn32 } from "@marigold/system";
+import { cn as cn33 } from "@marigold/system";
 import { jsx as jsx63 } from "react/jsx-runtime";
 var Plus = () => /* @__PURE__ */ jsx63("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx63(
   "path",
@@ -2804,7 +2805,7 @@ var _StepButton = ({ direction, className, ...props }) => {
   return /* @__PURE__ */ jsx63(
     Button2,
     {
-      className: cn32(
+      className: cn33(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2843,7 +2844,7 @@ var _NumberField = forwardRef13(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx64(FieldBase2, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group, { className: cn33("flex items-stretch", classNames2.group), children: [
+    return /* @__PURE__ */ jsx64(FieldBase2, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group, { className: cn34("flex items-stretch", classNames2.group), children: [
       showStepper && /* @__PURE__ */ jsx64(
         _StepButton,
         {
@@ -2898,7 +2899,7 @@ import {
   forwardRef as forwardRef14
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn35, useClassNames as useClassNames36 } from "@marigold/system";
+import { cn as cn36, useClassNames as useClassNames36 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext5, useContext as useContext6 } from "react";
@@ -2909,7 +2910,7 @@ var useRadioGroupContext = () => useContext6(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn34, useClassNames as useClassNames35 } from "@marigold/system";
+import { cn as cn35, useClassNames as useClassNames35 } from "@marigold/system";
 import { jsx as jsx66 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
@@ -2951,7 +2952,7 @@ var _RadioGroup = ({
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn34(
+          className: cn35(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
@@ -2969,7 +2970,7 @@ var Dot = () => /* @__PURE__ */ jsx67("svg", { viewBox: "0 0 6 6", children: /*
 var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx67(
   "div",
   {
-    className: cn35(
+    className: cn36(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
@@ -2990,7 +2991,7 @@ var _Radio = forwardRef14(
       Radio,
       {
         ref,
-        className: cn35(
+        className: cn36(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -3004,7 +3005,7 @@ var _Radio = forwardRef14(
             Icon2,
             {
               checked: isSelected,
-              className: cn35(
+              className: cn36(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
@@ -3018,9 +3019,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";
@@ -3031,7 +3061,7 @@ import { mergeProps as mergeProps10, useObjectRef as useObjectRef4 } from "@reac
 import { Item as Item5, Section as Section2 } from "@react-stately/collections";
 import { useSelectState } from "@react-stately/select";
 import {
-  cn as cn36,
+  cn as cn37,
   useClassNames as useClassNames37,
   useSmallScreen as useSmallScreen2,
   useStateProps as useStateProps10
@@ -3048,8 +3078,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 +3142,7 @@ var Select = forwardRef15(
         stateProps,
         disabled,
         children: [
-          /* @__PURE__ */ jsx68(
+          /* @__PURE__ */ jsx69(
             HiddenSelect,
             {
               state,
@@ -3125,7 +3155,7 @@ var Select = forwardRef15(
           /* @__PURE__ */ jsxs29(
             "button",
             {
-              className: cn36(
+              className: cn37(
                 "flex w-full items-center justify-between gap-1 overflow-hidden",
                 classNames2.select
               ),
@@ -3133,12 +3163,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 +3177,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 +3196,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,
@@ -3174,12 +3204,12 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn37,
+  cn as cn38,
   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,
@@ -3200,7 +3230,7 @@ var _Slider = forwardRef16(
     return /* @__PURE__ */ jsxs30(
       Slider,
       {
-        className: cn37(
+        className: cn38(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -3208,16 +3238,16 @@ 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: cn38("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(
+              className: cn38("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx70(
                 SliderThumb,
                 {
-                  className: cn37("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn38("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -3232,16 +3262,16 @@ 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 {
   alignment as alignment3,
-  cn as cn38,
+  cn as cn39,
   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,10 +3282,10 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx72(
     "div",
     {
-      className: cn38(
+      className: cn39(
         "flex flex-col",
         gapSpace6[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -3269,15 +3299,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,
+  cn as cn40,
   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,
@@ -3300,25 +3330,25 @@ var _Switch = forwardRef17(
       {
         ...props,
         ref,
-        className: cn39(
+        className: cn40(
           twWidth4[width],
           "group/switch",
           "flex items-center justify-between gap-[1ch]",
           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(
+              className: cn40(
                 "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(
+                  className: cn40(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -3347,7 +3377,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn44, useClassNames as useClassNames41 } from "@marigold/system";
+import { cn as cn45, useClassNames as useClassNames41 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext6, useContext as useContext7 } from "react";
@@ -3356,10 +3386,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 +3398,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 +3421,7 @@ var TableCell = ({ cell }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing7();
   const stateProps = useStateProps11({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     "td",
     {
       ref,
@@ -3408,7 +3438,7 @@ import { useRef as useRef19 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps12 } from "@react-aria/utils";
-import { cn as cn40, useStateProps as useStateProps12 } from "@marigold/system";
+import { cn as cn41, useStateProps as useStateProps12 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3431,7 +3461,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 +3478,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),
+      className: cn41("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 })
     }
   );
 };
@@ -3467,9 +3497,9 @@ import { useHover as useHover4 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 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 { cn as cn42, 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"
@@ -3495,12 +3525,12 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: cn41("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn42("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps13(columnHeaderProps, hoverProps, focusProps),
       ...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 +3538,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
@@ -3531,8 +3561,8 @@ import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
 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 { cn as cn43, useClassNames as useClassNames40, useStateProps as useStateProps14 } from "@marigold/system";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef22(null);
   const { interactive, state, ...ctx } = useTableContext();
@@ -3562,11 +3592,11 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx80(
     "tr",
     {
       ref,
-      className: cn42(
+      className: cn43(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3589,11 +3619,11 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps15 } from "@react-aria/utils";
 import {
-  cn as cn43,
+  cn as cn44,
   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,24 +3644,24 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx81(
     "th",
     {
       ref,
-      className: cn43(
+      className: cn44(
         twWidth6[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
       ),
       ...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 +3684,7 @@ var Table = ({
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx82(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
@@ -3662,7 +3692,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn44(
+          className: cn45(
             "group/table",
             "border-collapse overflow-auto whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3670,17 +3700,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 +3722,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)
               )
@@ -3714,7 +3744,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn45,
+  cn as cn46,
   createVar as createVar9,
   cursorStyle,
   fontWeight,
@@ -3725,7 +3755,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,11 +3774,11 @@ var Text2 = ({
     variant,
     size
   });
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx83(
     "p",
     {
       ...props,
-      className: cn45(
+      className: cn46(
         classNames2,
         "text-[--color] outline-[--outline]",
         fontStyle && textStyle[fontStyle],
@@ -3771,11 +3801,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 +3824,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 +3849,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 { cn as cn47, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3838,11 +3868,11 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx86(
     "div",
     {
       ...props,
-      className: cn46(
+      className: cn47(
         "grid",
         gapSpace7[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3856,11 +3886,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn47, useClassNames as useClassNames44 } from "@marigold/system";
+import { cn as cn48, 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,19 +3904,19 @@ 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,
     isOpen: open
   };
   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" }) }) }),
+  return /* @__PURE__ */ jsxs34(Tooltip, { ...props, className: cn48("group/tooltip", classNames2.container), children: [
+    /* @__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
   ] });
 };
@@ -3907,12 +3937,12 @@ 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";
+import { cn as cn49, useClassNames as useClassNames45 } from "@marigold/system";
+import { jsx as jsx89, 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" }) }) });
+  return /* @__PURE__ */ jsx89("button", { className, ...buttonProps, children: /* @__PURE__ */ jsx89("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx89("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 = {
@@ -3930,19 +3960,19 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     ref
   );
   const classNames2 = useClassNames45({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx89(
     "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(
+        /* @__PURE__ */ jsx89("span", { children: item.rendered }),
+        allowsRemoving && /* @__PURE__ */ jsx89(
           CloseButton2,
           {
             ...removeButtonProps,
-            className: cn48("flex items-center", classNames2.closeButton)
+            className: cn49("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -3951,7 +3981,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
 };
 
 // src/TagGroup/TagGroup.tsx
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { jsx as jsx90 } from "react/jsx-runtime";
 import { createElement } from "react";
 var TagGroup = ({
   width,
@@ -3972,7 +4002,7 @@ var TagGroup = ({
     error,
     required
   });
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx90(
     FieldBase,
     {
       width,
@@ -3985,7 +4015,7 @@ var TagGroup = ({
       errorMessageProps,
       stateProps,
       ...gridProps,
-      children: /* @__PURE__ */ jsx89(
+      children: /* @__PURE__ */ jsx90(
         "div",
         {
           role: "presentation",
@@ -4017,10 +4047,10 @@ Tag2.Group = TagGroup;
 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 +4060,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 +4079,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 +4097,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 +4115,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 +4133,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 +4151,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 +4169,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 +4187,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 +4205,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 +4223,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 +4241,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 +4264,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 useClassNames46 } from "@marigold/system";
 
 // src/Tabs/Context.ts
 import { createContext as createContext7, useContext as useContext8 } from "react";
@@ -4246,89 +4273,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 cn50 } 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,
     {
-      className: cn49(
+      ...props,
+      className: cn50(
         "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 cn51, 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: cn51("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({
     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,
@@ -4376,13 +4379,14 @@ export {
   Popover,
   _Radio as Radio,
   _RadioGroup as RadioGroup,
+  _SearchField as SearchField,
   Select,
   _Slider as Slider,
   Split,
   Stack,
   _Switch as Switch,
   Table,
-  Tabs,
+  _Tabs as Tabs,
   Tag2 as Tag,
   Text2 as Text,
   _TextArea as TextArea,
@@ -4395,8 +4399,6 @@ export {
   Underlay,
   VisuallyHidden,
   XLoader,
-  _Slider,
-  _TextArea,
   useAsyncList,
   useFieldGroupContext,
   useListData,