@marigold/components 6.10.0 → 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,25 +568,27 @@ 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) => {
     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",
+    return /* @__PURE__ */ jsx14(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx14("div", { className: classNames2.container, children: /* @__PURE__ */ jsx14(
+      "ul",
       {
         className: cn8(
-          "overflow-y-auto overflow-x-hidden",
-          classNames2.container
+          "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
+          classNames2.list
         ),
-        children: /* @__PURE__ */ jsx14("ul", { className: classNames2.list, ref: innerRef, ...listBoxProps, children: [...state.collection].map(
+        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)
-        ) })
+        )
       }
-    ) });
+    ) }) });
   }
 );
 
@@ -688,14 +679,14 @@ 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 {
   DismissButton,
   usePopover
 } from "@react-aria/overlays";
-import { cn as cn10, useClassNames as useClassNames8 } from "@marigold/system";
+import { useClassNames as useClassNames8 } from "@marigold/system";
 import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 var Popover = forwardRef6(
   (props, ref) => {
@@ -733,10 +724,7 @@ var PopoverWrapper = forwardRef6(
         "div",
         {
           ...popoverProps,
-          className: cn10(
-            "flex flex-col sm:max-h-[75vh] lg:max-h-[45vh]",
-            classNames2
-          ),
+          className: classNames2,
           style: {
             ...popoverProps.style,
             minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
@@ -764,11 +752,11 @@ import {
 import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 
 // src/Overlay/_Underlay.tsx
-import { cn as cn11, useClassNames as useClassNames9 } from "@marigold/system";
+import { cn as cn10, 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: cn11("fixed inset-0 z-40", classNames2), ...props });
+  return /* @__PURE__ */ jsx19("div", { className: cn10("fixed inset-0 z-40", classNames2), ...props });
 };
 
 // src/Overlay/Tray.tsx
@@ -812,7 +800,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 cn12, useStateProps as useStateProps3 } from "@marigold/system";
+import { cn as cn11, useStateProps as useStateProps3 } from "@marigold/system";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var ClearButton = ({
   preventFocus,
@@ -862,7 +850,7 @@ var ClearButton = ({
       ...mergeProps4(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       ref: buttonRef,
-      className: cn12(
+      className: cn11(
         "cursor-pointer appearance-none border-none p-0 pr-1",
         className
       ),
@@ -1001,7 +989,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 cn13, useClassNames as useClassNames10 } from "@marigold/system";
+import { cn as cn12, 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) => {
@@ -1016,7 +1004,7 @@ var _Button = forwardRef8(
       {
         ...props,
         ref,
-        className: cn13(
+        className: cn12(
           "inline-flex items-center justify-center gap-[0.5ch]",
           classNames2,
           fullWidth ? "w-full" : void 0
@@ -1122,7 +1110,7 @@ var Badge = ({ variant, size, children, ...props }) => {
 };
 
 // src/Breakout/Breakout.tsx
-import { alignment, cn as cn14, createVar as createVar4 } from "@marigold/system";
+import { alignment, cn as cn13, createVar as createVar4 } from "@marigold/system";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var Breakout = ({
   height,
@@ -1136,7 +1124,7 @@ var Breakout = ({
   return /* @__PURE__ */ jsx26(
     "div",
     {
-      className: cn14(
+      className: cn13(
         "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]),
@@ -1160,7 +1148,7 @@ var Body = ({ children, variant, size, ...props }) => {
 
 // src/Card/Card.tsx
 import {
-  cn as cn15,
+  cn as cn14,
   gapSpace as gapSpace2,
   paddingBottom,
   paddingLeft,
@@ -1191,7 +1179,7 @@ var Card = ({
     "div",
     {
       ...props,
-      className: cn15(
+      className: cn14(
         "flex flex-col",
         classNames2,
         gapSpace2[space],
@@ -1209,7 +1197,7 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-import { cn as cn16, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
+import { cn as cn15, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
 import { jsx as jsx29 } from "react/jsx-runtime";
 var Center = ({
   maxWidth = "100%",
@@ -1221,7 +1209,7 @@ var Center = ({
     "div",
     {
       ...props,
-      className: cn16(
+      className: cn15(
         "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
         gapSpace3[space],
         "max-w-[--maxWidth]"
@@ -1235,7 +1223,7 @@ var Center = ({
 // src/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef9 } from "react";
 import { Checkbox } from "react-aria-components";
-import { cn as cn17, useClassNames as useClassNames14 } from "@marigold/system";
+import { cn as cn16, 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",
@@ -1258,7 +1246,7 @@ var Icon = ({ className, checked, indeterminate, ...props }) => {
     "div",
     {
       "aria-hidden": "true",
-      className: cn17(
+      className: cn16(
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
@@ -1300,7 +1288,7 @@ var _Checkbox = forwardRef9(
       Checkbox,
       {
         ref,
-        className: cn17(
+        className: cn16(
           "group/checkbox flex items-center gap-[0.5rem]",
           "cursor-pointer data-[disabled]:cursor-not-allowed",
           classNames2.container
@@ -1328,11 +1316,11 @@ import { useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/FieldBase/_FieldBase.tsx
 import { forwardRef as forwardRef10 } from "react";
-import { cn as cn19, width as twWidth2, useClassNames as useClassNames16 } from "@marigold/system";
+import { cn as cn18, width as twWidth2, useClassNames as useClassNames16 } from "@marigold/system";
 
 // src/HelpText/_HelpText.tsx
 import { FieldError, Text } from "react-aria-components";
-import { cn as cn18, useClassNames as useClassNames15 } from "@marigold/system";
+import { cn as cn17, useClassNames as useClassNames15 } from "@marigold/system";
 import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 var HelpText2 = ({
   variant,
@@ -1340,7 +1328,6 @@ var HelpText2 = ({
   description,
   error,
   errorMessage,
-  isInvalid,
   ...props
 }) => {
   const hasErrorMessage = errorMessage && error;
@@ -1352,7 +1339,7 @@ var HelpText2 = ({
   if (!description && !errorMessage) {
     return null;
   }
-  return /* @__PURE__ */ jsxs13("div", { className: cn18(classNames2.container), children: [
+  return /* @__PURE__ */ jsxs13("div", { className: cn17(classNames2.container), children: [
     /* @__PURE__ */ jsxs13(
       FieldError,
       {
@@ -1362,7 +1349,7 @@ var HelpText2 = ({
           /* @__PURE__ */ jsx31(
             "svg",
             {
-              className: cn18("h-4 w-4", classNames2.icon),
+              className: cn17("h-4 w-4", classNames2.icon),
               viewBox: "0 0 24 24",
               role: "presentation",
               fill: "currentColor",
@@ -1403,7 +1390,7 @@ var _FieldBase = (props, ref) => {
     Component,
     {
       ref,
-      className: cn19("group/field", twWidth2[width], classNames2, className),
+      className: cn18("group/field", twWidth2[width], classNames2, className),
       "data-required": props.isRequired ? true : void 0,
       "data-error": props.isInvalid ? true : void 0,
       ...rest,
@@ -1457,7 +1444,7 @@ var _CheckboxGroup = ({
 
 // src/Columns/Columns.tsx
 import { Children as Children3, cloneElement as cloneElement3, isValidElement as isValidElement2 } from "react";
-import { cn as cn20, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
+import { cn as cn19, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
 import { jsx as jsx34 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
@@ -1477,7 +1464,7 @@ var Columns = ({
   return /* @__PURE__ */ jsx34(
     "div",
     {
-      className: cn20(
+      className: cn19(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
         gapSpace4[space]
@@ -1486,7 +1473,7 @@ var Columns = ({
       children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx34(
         "div",
         {
-          className: cn20(
+          className: cn19(
             "grow-[--columnSize] basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
           style: createVar6({ collapseAt, columnSize: columns[idx] }),
@@ -1499,7 +1486,7 @@ var Columns = ({
 
 // src/Container/Container.tsx
 import {
-  cn as cn21,
+  cn as cn20,
   createVar as createVar7,
   gridColsAlign,
   gridColumn,
@@ -1529,7 +1516,7 @@ var Container = ({
     "div",
     {
       ...props,
-      className: cn21(
+      className: cn20(
         "grid",
         placeItems[alignItems],
         gridColsAlign[align],
@@ -1544,12 +1531,12 @@ var Container = ({
 // src/Dialog/Dialog.tsx
 import { useContext as useContext3 } from "react";
 import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
-import { cn as cn23, useClassNames as useClassNames19 } from "@marigold/system";
+import { cn as cn22, useClassNames as useClassNames19 } from "@marigold/system";
 
 // src/Headline/Headline.tsx
 import { Heading } from "react-aria-components";
 import {
-  cn as cn22,
+  cn as cn21,
   createVar as createVar8,
   get,
   textAlign,
@@ -1577,7 +1564,7 @@ var _Headline = ({
     {
       level: Number(level),
       ...props,
-      className: cn22(classNames2, "text-[--color]", textAlign[align]),
+      className: cn21(classNames2, "text-[--color]", textAlign[align]),
       style: createVar8({
         color: color && theme.colors && get(
           theme.colors,
@@ -1599,6 +1586,7 @@ var _DialogTrigger = ({
   open,
   dismissable,
   keyboardDismissable,
+  isNonModal,
   ...rest
 }) => {
   const props = {
@@ -1609,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(
@@ -1629,7 +1619,7 @@ var CloseButton = ({ className }) => {
   return /* @__PURE__ */ jsx38("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx38(
     "button",
     {
-      className: cn23(
+      className: cn22(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
@@ -1666,7 +1656,7 @@ var _Dialog = ({
     Dialog,
     {
       ...props,
-      className: cn23("relative outline-none", classNames2.container),
+      className: cn22("relative outline-none", classNames2.container),
       children: /* @__PURE__ */ jsxs16(Fragment5, { children: [
         closeButton && /* @__PURE__ */ jsx38(CloseButton, { className: classNames2.closeButton }),
         children
@@ -1709,7 +1699,7 @@ var _Header = ({ variant, size, ...props }) => {
 
 // src/Image/Image.tsx
 import {
-  cn as cn24,
+  cn as cn23,
   objectFit,
   objectPosition,
   useClassNames as useClassNames23
@@ -1728,7 +1718,7 @@ var Image = ({
     {
       ...props,
       alt: props.alt,
-      className: cn24(
+      className: cn23(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1741,7 +1731,7 @@ var Image = ({
 // src/Inline/Inline.tsx
 import {
   alignment as alignment2,
-  cn as cn25,
+  cn as cn24,
   gapSpace as gapSpace5
 } from "@marigold/system";
 import { jsx as jsx43 } from "react/jsx-runtime";
@@ -1758,7 +1748,7 @@ var Inline = ({
     "div",
     {
       ...props,
-      className: cn25(
+      className: cn24(
         "flex flex-wrap",
         gapSpace5[space],
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
@@ -1778,14 +1768,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 cn27, useClassNames as useClassNames24, useStateProps as useStateProps5 } from "@marigold/system";
+import { cn as cn26, 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 cn26, useStateProps as useStateProps4 } from "@marigold/system";
+import { cn as cn25, useStateProps as useStateProps4 } from "@marigold/system";
 import { jsx as jsx44, jsxs as jsxs17 } from "react/jsx-runtime";
 var DateSegment = ({
   className,
@@ -1809,7 +1799,7 @@ var DateSegment = ({
     {
       ...mergeProps5(segmentProps, stateProps, focusProps),
       ref,
-      className: cn26(
+      className: cn25(
         "group/segment",
         "text-center leading-none outline-0",
         type !== "literal" && "p-0.5",
@@ -1824,7 +1814,7 @@ var DateSegment = ({
           "span",
           {
             "aria-hidden": "true",
-            className: cn26(
+            className: cn25(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
@@ -1907,7 +1897,7 @@ var DateField = ({
         "div",
         {
           ...mergeProps6(fieldProps, focusProps, stateProps, hoverProps),
-          className: cn27(
+          className: cn26(
             "relative flex flex-row flex-nowrap",
             "cursor-text aria-disabled:cursor-not-allowed",
             classNames2.field
@@ -1932,7 +1922,7 @@ var DateField = ({
               "svg",
               {
                 "data-testid": "action",
-                className: cn27(classNames2.action),
+                className: cn26(classNames2.action),
                 viewBox: "0 0 24 24",
                 width: 24,
                 height: 24,
@@ -1955,7 +1945,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 cn29, useClassNames as useClassNames26, useStateProps as useStateProps7 } from "@marigold/system";
+import { cn as cn28, useClassNames as useClassNames26, useStateProps as useStateProps7 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import { getWeeksInMonth, startOfWeek, today } from "@internationalized/date";
@@ -1969,7 +1959,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 cn28, useClassNames as useClassNames25, useStateProps as useStateProps6 } from "@marigold/system";
+import { cn as cn27, useClassNames as useClassNames25, useStateProps as useStateProps6 } from "@marigold/system";
 import { jsx as jsx46 } from "react/jsx-runtime";
 var CalendarCell = (props) => {
   const ref = useRef10(null);
@@ -1990,7 +1980,7 @@ var CalendarCell = (props) => {
   return /* @__PURE__ */ jsx46("td", { className: "group/cell", ...cellProps, children: /* @__PURE__ */ jsx46(
     "div",
     {
-      className: cn28(
+      className: cn27(
         "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
       ),
@@ -2211,7 +2201,7 @@ var Calendar = ({
     "div",
     {
       tabIndex: -1,
-      className: cn29(
+      className: cn28(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4  shadow-[0_4px_4px_rgba(165,165,165,0.25)]",
         classNames2.calendar
       ),
@@ -2239,7 +2229,7 @@ var Calendar = ({
               {
                 disabled: state.isDisabled,
                 onClick: () => setSelectedDropdown("month"),
-                className: cn29(buttonStyles, selectClassNames),
+                className: cn28(buttonStyles, selectClassNames),
                 "data-testid": "month",
                 children: [
                   selectedValue.month,
@@ -2252,7 +2242,7 @@ var Calendar = ({
               {
                 disabled: state.isDisabled,
                 onClick: () => setSelectedDropdown("year"),
-                className: cn29(buttonStyles, selectClassNames),
+                className: cn28(buttonStyles, selectClassNames),
                 "data-testid": "year",
                 children: [
                   selectedValue.year,
@@ -2264,7 +2254,7 @@ var Calendar = ({
           /* @__PURE__ */ jsxs20(
             "div",
             {
-              className: cn29(
+              className: cn28(
                 "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
                 classNames2.calendarControllers
               ),
@@ -2365,7 +2355,7 @@ var DatePicker = ({
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn30,
+  cn as cn29,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
@@ -2374,7 +2364,7 @@ import { jsx as jsx52 } from "react/jsx-runtime";
 var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
   "div",
   {
-    className: cn30(
+    className: cn29(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -2616,7 +2606,7 @@ var ActionMenu = (props) => {
 };
 
 // src/Message/Message.tsx
-import { cn as cn31, useClassNames as useClassNames32 } from "@marigold/system";
+import { cn as cn30, useClassNames as useClassNames32 } from "@marigold/system";
 import { jsx as jsx61, jsxs as jsxs25 } from "react/jsx-runtime";
 var icons = {
   success: () => /* @__PURE__ */ jsx61(
@@ -2696,21 +2686,21 @@ var Message = ({
   return /* @__PURE__ */ jsxs25(
     "div",
     {
-      className: cn31(
+      className: cn30(
         "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
         classNames2.container
       ),
       ...props,
       children: [
-        /* @__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-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx61(Icon3, {}) }),
         /* @__PURE__ */ jsx61(
           "div",
           {
-            className: cn31("col-start-2 row-start-1 self-center", classNames2.title),
+            className: cn30("col-start-2 row-start-1 self-center", classNames2.title),
             children: messageTitle
           }
         ),
-        /* @__PURE__ */ jsx61("div", { className: cn31("col-start-2", classNames2.content), children })
+        /* @__PURE__ */ jsx61("div", { className: cn30("col-start-2", classNames2.content), children })
       ]
     }
   );
@@ -2719,12 +2709,12 @@ var Message = ({
 // src/NumberField/NumberField.tsx
 import { forwardRef as forwardRef13 } from "react";
 import { Group, NumberField } from "react-aria-components";
-import { cn as cn34, useClassNames as useClassNames34 } from "@marigold/system";
+import { cn as cn33, 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 cn32, useClassNames as useClassNames33 } from "@marigold/system";
+import { cn as cn31, 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) => {
@@ -2734,7 +2724,7 @@ var _Input = forwardRef12(
       size
     });
     const inputIcon = icon ? cloneElement4(icon, {
-      className: cn32(
+      className: cn31(
         "pointer-events-none absolute",
         classNames2.icon,
         icon.props.className
@@ -2742,7 +2732,7 @@ var _Input = forwardRef12(
       ...icon.props
     }) : null;
     const inputAction = action && !props.readOnly ? cloneElement4(action, {
-      className: cn32(
+      className: cn31(
         "absolute",
         classNames2.action,
         action.props.className
@@ -2761,7 +2751,7 @@ var _Input = forwardRef12(
             Input2,
             {
               ...props,
-              className: cn32(
+              className: cn31(
                 "w-full flex-1",
                 "disabled:cursor-not-allowed",
                 "[&[type=file]]:border-none [&[type=file]]:p-0",
@@ -2782,7 +2772,7 @@ var _Input = forwardRef12(
 
 // src/NumberField/StepButton.tsx
 import { Button as Button2 } from "react-aria-components";
-import { cn as cn33 } from "@marigold/system";
+import { cn as cn32 } 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",
@@ -2805,7 +2795,7 @@ var _StepButton = ({ direction, className, ...props }) => {
   return /* @__PURE__ */ jsx63(
     Button2,
     {
-      className: cn33(
+      className: cn32(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2844,7 +2834,7 @@ var _NumberField = forwardRef13(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx64(FieldBase2, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group, { className: cn34("flex items-stretch", classNames2.group), children: [
+    return /* @__PURE__ */ jsx64(FieldBase2, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group, { className: cn33("flex items-stretch", classNames2.group), children: [
       showStepper && /* @__PURE__ */ jsx64(
         _StepButton,
         {
@@ -2899,7 +2889,7 @@ import {
   forwardRef as forwardRef14
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn36, useClassNames as useClassNames36 } from "@marigold/system";
+import { cn as cn35, useClassNames as useClassNames36 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext5, useContext as useContext6 } from "react";
@@ -2910,7 +2900,7 @@ var useRadioGroupContext = () => useContext6(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn35, useClassNames as useClassNames35 } from "@marigold/system";
+import { cn as cn34, useClassNames as useClassNames35 } from "@marigold/system";
 import { jsx as jsx66 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
@@ -2952,7 +2942,7 @@ var _RadioGroup = ({
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn35(
+          className: cn34(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
@@ -2970,7 +2960,7 @@ var Dot = () => /* @__PURE__ */ jsx67("svg", { viewBox: "0 0 6 6", children: /*
 var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx67(
   "div",
   {
-    className: cn36(
+    className: cn35(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
@@ -2991,7 +2981,7 @@ var _Radio = forwardRef14(
       Radio,
       {
         ref,
-        className: cn36(
+        className: cn35(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -3005,7 +2995,7 @@ var _Radio = forwardRef14(
             Icon2,
             {
               checked: isSelected,
-              className: cn36(
+              className: cn35(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
@@ -3061,7 +3051,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 cn37,
+  cn as cn36,
   useClassNames as useClassNames37,
   useSmallScreen as useSmallScreen2,
   useStateProps as useStateProps10
@@ -3155,7 +3145,7 @@ var Select = forwardRef16(
           /* @__PURE__ */ jsxs29(
             "button",
             {
-              className: cn37(
+              className: cn36(
                 "flex w-full items-center justify-between gap-1 overflow-hidden",
                 classNames2.select
               ),
@@ -3204,7 +3194,7 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn38,
+  cn as cn37,
   width as twWidth3,
   useClassNames as useClassNames38
 } from "@marigold/system";
@@ -3230,7 +3220,7 @@ var _Slider = forwardRef17(
     return /* @__PURE__ */ jsxs30(
       Slider,
       {
-        className: cn38(
+        className: cn37(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -3239,15 +3229,15 @@ var _Slider = forwardRef17(
         ...props,
         children: [
           /* @__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(SliderOutput, { className: cn37("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
           /* @__PURE__ */ jsx70(
             SliderTrack,
             {
-              className: cn38("relative col-span-2 h-2 w-full", classNames2.track),
+              className: cn37("relative col-span-2 h-2 w-full", classNames2.track),
               children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx70(
                 SliderThumb,
                 {
-                  className: cn38("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn37("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -3268,7 +3258,7 @@ var Split = (props) => /* @__PURE__ */ jsx71("div", { ...props, role: "separator
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn39,
+  cn as cn38,
   gapSpace as gapSpace6
 } from "@marigold/system";
 import { jsx as jsx72 } from "react/jsx-runtime";
@@ -3285,7 +3275,7 @@ var Stack = ({
   return /* @__PURE__ */ jsx72(
     "div",
     {
-      className: cn39(
+      className: cn38(
         "flex flex-col",
         gapSpace6[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -3302,7 +3292,7 @@ var Stack = ({
 import { forwardRef as forwardRef18 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn40,
+  cn as cn39,
   width as twWidth4,
   useClassNames as useClassNames39
 } from "@marigold/system";
@@ -3330,7 +3320,7 @@ var _Switch = forwardRef18(
       {
         ...props,
         ref,
-        className: cn40(
+        className: cn39(
           twWidth4[width],
           "group/switch",
           "flex items-center justify-between gap-[1ch]",
@@ -3341,14 +3331,14 @@ var _Switch = forwardRef18(
           /* @__PURE__ */ jsx73("div", { className: "relative", children: /* @__PURE__ */ jsx73(
             "div",
             {
-              className: cn40(
+              className: cn39(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
               children: /* @__PURE__ */ jsx73(
                 "div",
                 {
-                  className: cn40(
+                  className: cn39(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -3377,7 +3367,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn45, useClassNames as useClassNames41 } from "@marigold/system";
+import { cn as cn44, useClassNames as useClassNames41 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext6, useContext as useContext7 } from "react";
@@ -3438,7 +3428,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 cn41, useStateProps as useStateProps12 } from "@marigold/system";
+import { cn as cn40, useStateProps as useStateProps12 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3482,7 +3472,7 @@ var TableCheckboxCell = ({ cell }) => {
     "td",
     {
       ref,
-      className: cn41("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: cn40("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps12(gridCellProps, focusProps),
       ...stateProps,
       children: /* @__PURE__ */ jsx76(_Checkbox, { ...checkboxProps })
@@ -3497,7 +3487,7 @@ 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 cn42, useStateProps as useStateProps13 } from "@marigold/system";
+import { cn as cn41, useStateProps as useStateProps13 } from "@marigold/system";
 import { width as twWidth5 } from "@marigold/system";
 import { jsx as jsx77, jsxs as jsxs32 } from "react/jsx-runtime";
 var TableColumnHeader = ({
@@ -3525,7 +3515,7 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: cn42("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn41("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps13(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       children: [
@@ -3561,7 +3551,7 @@ 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 cn43, useClassNames as useClassNames40, useStateProps as useStateProps14 } from "@marigold/system";
+import { cn as cn42, 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);
@@ -3596,7 +3586,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: cn43(
+      className: cn42(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3619,7 +3609,7 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps15 } from "@react-aria/utils";
 import {
-  cn as cn44,
+  cn as cn43,
   width as twWidth6,
   useStateProps as useStateProps15
 } from "@marigold/system";
@@ -3648,7 +3638,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: cn44(
+      className: cn43(
         twWidth6[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
@@ -3692,7 +3682,7 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn45(
+          className: cn44(
             "group/table",
             "border-collapse overflow-auto whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3744,7 +3734,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn46,
+  cn as cn45,
   createVar as createVar9,
   cursorStyle,
   fontWeight,
@@ -3778,7 +3768,7 @@ var Text2 = ({
     "p",
     {
       ...props,
-      className: cn46(
+      className: cn45(
         classNames2,
         "text-[--color] outline-[--outline]",
         fontStyle && textStyle[fontStyle],
@@ -3854,7 +3844,7 @@ var _TextField = forwardRef20(
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn47, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
+import { cn as cn46, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
 import { jsx as jsx86 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
@@ -3872,7 +3862,7 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: cn47(
+      className: cn46(
         "grid",
         gapSpace7[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3886,7 +3876,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn48, useClassNames as useClassNames44 } from "@marigold/system";
+import { cn as cn47, useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
@@ -3915,133 +3905,52 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
     isOpen: open
   };
   const classNames2 = useClassNames44({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ jsxs34(Tooltip, { ...props, className: cn48("group/tooltip", classNames2.container), children: [
+  return /* @__PURE__ */ jsxs34(Tooltip, { ...props, className: cn47("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
   ] });
 };
 _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 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__ */ 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 = {
-    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__ */ jsx89(
-    "span",
-    {
-      ref,
-      ...mergeProps16(rowProps, focusProps),
-      className: classNames2.tag,
-      children: /* @__PURE__ */ jsxs35("div", { ...gridCellProps, className: classNames2.gridCell, children: [
-        /* @__PURE__ */ jsx89("span", { children: item.rendered }),
-        allowsRemoving && /* @__PURE__ */ jsx89(
-          CloseButton2,
-          {
-            ...removeButtonProps,
-            className: cn49("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 { jsx as jsx90 } from "react/jsx-runtime";
-import { createElement } from "react";
-var TagGroup = ({
+import { TagGroup, TagList } from "react-aria-components";
+import { useClassNames as useClassNames45 } from "@marigold/system";
+import { jsx as jsx89 } from "react/jsx-runtime";
+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__ */ jsx90(
-    FieldBase,
-    {
-      width,
-      label: props.label,
-      labelProps,
-      description: props.description,
-      descriptionProps,
-      error,
-      errorMessage: props.errorMessage,
-      errorMessageProps,
-      stateProps,
-      ...gridProps,
-      children: /* @__PURE__ */ jsx90(
-        "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";
@@ -4265,7 +4174,7 @@ var XLoader = forwardRef21((props, ref) => /* @__PURE__ */ jsxs36(
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames46 } from "@marigold/system";
+import { useClassNames as useClassNames47 } from "@marigold/system";
 
 // src/Tabs/Context.ts
 import { createContext as createContext7, useContext as useContext8 } from "react";
@@ -4274,7 +4183,7 @@ var useTabContext = () => useContext8(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn50 } from "@marigold/system";
+import { cn as cn49 } from "@marigold/system";
 import { jsx as jsx92 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
@@ -4282,7 +4191,7 @@ var _Tab = (props) => {
     Tab,
     {
       ...props,
-      className: cn50(
+      className: cn49(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -4293,7 +4202,7 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn51, gapSpace as gapSpace8 } from "@marigold/system";
+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();
@@ -4301,7 +4210,7 @@ var _TabList = ({ space = 2, ...props }) => {
     TabList,
     {
       ...props,
-      className: cn51("flex", gapSpace8[space], classNames2.tabsList),
+      className: cn50("flex", gapSpace8[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -4322,7 +4231,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = useClassNames46({
+  const classNames2 = useClassNames47({
     component: "Tabs",
     size,
     variant
@@ -4350,6 +4259,7 @@ export {
   Center,
   _Checkbox as Checkbox,
   _CheckboxGroup as CheckboxGroup,
+  CloseButton2 as CloseButton,
   Columns,
   ComboBox,
   Container,
@@ -4387,7 +4297,7 @@ export {
   _Switch as Switch,
   Table,
   _Tabs as Tabs,
-  Tag2 as Tag,
+  _Tag as Tag,
   Text2 as Text,
   _TextArea as TextArea,
   _TextField as TextField,