@marigold/components 7.5.2 → 7.5.4

package/dist/index.mjs

@@ -1434,11 +1434,11 @@ _Dialog.Headline = DialogHeadline;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { useClassNames as useClassNames19 } from "@marigold/system";
+import { cn as cn23, useClassNames as useClassNames19 } from "@marigold/system";
 import { jsx as jsx36 } from "react/jsx-runtime";
 var _Divider = ({ variant, ...props }) => {
   const classNames2 = useClassNames19({ component: "Divider", variant });
-  return /* @__PURE__ */ jsx36(Separator, { className: classNames2, ...props });
+  return /* @__PURE__ */ jsx36(Separator, { className: cn23("border-none", classNames2), ...props });
 };
 
 // src/Footer/Footer.tsx
@@ -1467,7 +1467,7 @@ var _Header = ({ variant, size, ...props }) => {
 
 // src/Image/Image.tsx
 import {
-  cn as cn23,
+  cn as cn24,
   objectFit,
   objectPosition,
   useClassNames as useClassNames22
@@ -1486,7 +1486,7 @@ var Image = ({
     {
       ...props,
       alt: props.alt,
-      className: cn23(
+      className: cn24(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1499,7 +1499,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 jsx40 } from "react/jsx-runtime";
@@ -1516,7 +1516,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]),
@@ -1537,7 +1537,7 @@ import { useClassNames as useClassNames23 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
-import { cn as cn25 } from "@marigold/system";
+import { cn as cn26 } from "@marigold/system";
 import { Fragment as Fragment4, jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
 var _DateSegment = ({ segment, ...props }) => {
   return /* @__PURE__ */ jsx41(
@@ -1553,7 +1553,7 @@ var _DateSegment = ({ segment, ...props }) => {
           "span",
           {
             "aria-hidden": "true",
-            className: cn25(
+            className: cn26(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
@@ -1623,7 +1623,7 @@ var _DateField = forwardRef13(
 // src/Calendar/Calendar.tsx
 import { useState } from "react";
 import { Calendar } from "react-aria-components";
-import { cn as cn29, useClassNames as useClassNames28 } from "@marigold/system";
+import { cn as cn30, useClassNames as useClassNames28 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import {
@@ -1631,7 +1631,7 @@ import {
   CalendarGrid,
   CalendarGridBody
 } from "react-aria-components";
-import { cn as cn26, useClassNames as useClassNames25 } from "@marigold/system";
+import { cn as cn27, useClassNames as useClassNames25 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
@@ -1671,7 +1671,7 @@ var _CalendarGrid = () => {
       CalendarCell,
       {
         date,
-        className: cn26(
+        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
         )
@@ -1684,7 +1684,7 @@ var _CalendarGrid = () => {
 import { useContext as useContext8 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
 import { ChevronDown as ChevronDown2 } from "@marigold/icons";
-import { cn as cn27, useClassNames as useClassNames26 } from "@marigold/system";
+import { cn as cn28, useClassNames as useClassNames26 } from "@marigold/system";
 
 // src/Calendar/useFormattedMonths.tsx
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
@@ -1718,7 +1718,7 @@ function CalendarListBox({
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: cn27(buttonStyles, selectClassNames),
+      className: cn28(buttonStyles, selectClassNames),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
@@ -1731,7 +1731,7 @@ function CalendarListBox({
 // src/Calendar/MonthControls.tsx
 import { Button as Button3 } from "react-aria-components";
 import { ChevronLeft, ChevronRight } from "@marigold/icons";
-import { cn as cn28, useClassNames as useClassNames27 } from "@marigold/system";
+import { cn as cn29, useClassNames as useClassNames27 } from "@marigold/system";
 import { jsx as jsx47, jsxs as jsxs18 } from "react/jsx-runtime";
 function MonthControls() {
   const classNames2 = useClassNames27({ component: "Calendar" });
@@ -1739,7 +1739,7 @@ function MonthControls() {
   return /* @__PURE__ */ jsxs18(
     "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
       ),
@@ -1747,7 +1747,7 @@ function MonthControls() {
         /* @__PURE__ */ jsx47(
           Button3,
           {
-            className: cn28(
+            className: cn29(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
@@ -1758,7 +1758,7 @@ function MonthControls() {
         /* @__PURE__ */ jsx47(
           Button3,
           {
-            className: cn28(
+            className: cn29(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
@@ -1907,7 +1907,7 @@ var _Calendar = ({
   return /* @__PURE__ */ jsx50(
     Calendar,
     {
-      className: cn29(
+      className: cn30(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4",
         classNames2.calendar
       ),
@@ -1998,7 +1998,7 @@ var _DatePicker = ({
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn30,
+  cn as cn31,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
@@ -2007,7 +2007,7 @@ import { jsx as jsx52 } from "react/jsx-runtime";
 var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx52(
   "div",
   {
-    className: cn30(
+    className: cn31(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -2126,7 +2126,7 @@ var ActionMenu = ({
 
 // src/Message/Message.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { cn as cn31, useClassNames as useClassNames36 } from "@marigold/system";
+import { cn as cn32, useClassNames as useClassNames36 } from "@marigold/system";
 import { jsx as jsx60, jsxs as jsxs24 } from "react/jsx-runtime";
 var icons = {
   success: () => /* @__PURE__ */ jsx60(
@@ -2201,41 +2201,169 @@ var Message = forwardRef15(
     return /* @__PURE__ */ jsxs24(
       "div",
       {
-        className: cn31(
+        className: cn32(
           "grid auto-rows-min grid-cols-[min-content_auto] gap-1",
           classNames2.container
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx60("div", { className: cn31("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx60(Icon4, {}) }),
+          /* @__PURE__ */ jsx60("div", { className: cn32("col-span-1 h-5 w-5 self-center", classNames2.icon), children: /* @__PURE__ */ jsx60(Icon4, {}) }),
           /* @__PURE__ */ jsx60(
             "div",
             {
-              className: cn31(
+              className: cn32(
                 "col-start-2 row-start-1 self-center",
                 classNames2.title
               ),
               children: messageTitle
             }
           ),
-          /* @__PURE__ */ jsx60("div", { className: cn31("col-start-2", classNames2.content), children })
+          /* @__PURE__ */ jsx60("div", { className: cn32("col-start-2", classNames2.content), children })
         ]
       }
     );
   }
 );
 
+// src/Multiselect/Multiselect.tsx
+import { Children as Children5, useState as useState2 } from "react";
+import { useListData as useListData2 } from "@react-stately/data";
+
+// src/TagGroup/Tag.tsx
+import { Button as Button4, Tag } from "react-aria-components";
+import { cn as cn33, useClassNames as useClassNames38 } from "@marigold/system";
+
+// src/TagGroup/TagGroup.tsx
+import { TagGroup, TagList } from "react-aria-components";
+import { useClassNames as useClassNames37 } from "@marigold/system";
+import { jsx as jsx61 } from "react/jsx-runtime";
+var _TagGroup = ({
+  width,
+  items,
+  children,
+  renderEmptyState,
+  variant,
+  size,
+  ...rest
+}) => {
+  const classNames2 = useClassNames37({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx61(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx61(
+    TagList,
+    {
+      items,
+      className: classNames2.listItems,
+      renderEmptyState,
+      children
+    }
+  ) });
+};
+
+// src/TagGroup/Tag.tsx
+import { Fragment as Fragment6, jsx as jsx62, jsxs as jsxs25 } from "react/jsx-runtime";
+var CloseButton2 = ({ className }) => {
+  return /* @__PURE__ */ jsx62(Button4, { slot: "remove", className, children: /* @__PURE__ */ jsx62("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx62("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 = useClassNames38({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx62(
+    Tag,
+    {
+      textValue,
+      ...props,
+      className: cn33("data-[selection-mode]:cursor-pointer", classNames2.tag),
+      children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs25(Fragment6, { children: [
+        children,
+        allowsRemoving && /* @__PURE__ */ jsx62(
+          CloseButton2,
+          {
+            className: cn33("flex items-center", classNames2.closeButton)
+          }
+        )
+      ] })
+    }
+  );
+};
+_Tag.Group = _TagGroup;
+
+// src/Multiselect/Multiselect.tsx
+import { jsx as jsx63, jsxs as jsxs26 } from "react/jsx-runtime";
+var Item2 = (_) => null;
+var Multiselect = ({
+  label,
+  children,
+  ...props
+}) => {
+  const items = Children5.map(children, ({ props: props2 }) => props2);
+  const list = useListData2({
+    initialItems: items,
+    initialSelectedKeys: props.defaultSelectedKeys,
+    getKey: (item) => item.id
+  });
+  const selected = list.items.filter(
+    (item) => list.selectedKeys === "all" ? true : list.selectedKeys.has(item.id)
+  );
+  const unselected = list.items.filter((item) => !selected.includes(item));
+  const setUnselected = (keys) => {
+    const next = list.selectedKeys === "all" ? new Set(items) : new Set(list.selectedKeys);
+    if (list.selectedKeys !== "all") {
+      keys.forEach((key) => {
+        next.delete(key);
+      });
+    }
+    list.setSelectedKeys(next);
+  };
+  const [value, setValue] = useState2("");
+  const selectItem = (key) => {
+    if (list.selectedKeys !== "all") {
+      const next = list.selectedKeys.add(key);
+      list.setSelectedKeys(next);
+    }
+    const input = document.activeElement;
+    setTimeout(() => {
+      setValue("");
+    }, 0);
+    input.focus();
+  };
+  return /* @__PURE__ */ jsxs26("div", { className: "flex flex-wrap gap-1", children: [
+    /* @__PURE__ */ jsx63(
+      _Tag.Group,
+      {
+        items: selected,
+        allowsRemoving: true,
+        onRemove: setUnselected,
+        renderEmptyState: () => null,
+        children: (item) => /* @__PURE__ */ jsx63(_Tag, { id: item.id, children: item.children }, item.id)
+      }
+    ),
+    /* @__PURE__ */ jsx63(
+      _ComboBox,
+      {
+        value,
+        onChange: setValue,
+        onSelectionChange: selectItem,
+        menuTrigger: "focus",
+        disabled: unselected.length === 0,
+        placeholder: unselected.length === 0 ? "All items selected" : "",
+        ...props,
+        children: unselected.map((item) => /* @__PURE__ */ jsx63(_ComboBox.Item, { id: item.id, children: item.children }, item.id))
+      }
+    )
+  ] });
+};
+Multiselect.Item = Item2;
+
 // src/NumberField/NumberField.tsx
 import { forwardRef as forwardRef16 } from "react";
 import { Group as Group2, NumberField } from "react-aria-components";
-import { cn as cn33, useClassNames as useClassNames37 } from "@marigold/system";
+import { cn as cn35, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import { Button as Button4 } from "react-aria-components";
-import { cn as cn32 } from "@marigold/system";
-import { jsx as jsx61 } from "react/jsx-runtime";
-var Plus = () => /* @__PURE__ */ jsx61("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx61(
+import { Button as Button5 } from "react-aria-components";
+import { cn as cn34 } from "@marigold/system";
+import { jsx as jsx64 } from "react/jsx-runtime";
+var Plus = () => /* @__PURE__ */ jsx64("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx64(
   "path",
   {
     fillRule: "evenodd",
@@ -2243,7 +2371,7 @@ var Plus = () => /* @__PURE__ */ jsx61("svg", { width: 16, height: 16, viewBox:
     d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
   }
 ) });
-var Minus = () => /* @__PURE__ */ jsx61("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx61(
+var Minus = () => /* @__PURE__ */ jsx64("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx64(
   "path",
   {
     fillRule: "evenodd",
@@ -2253,10 +2381,10 @@ var Minus = () => /* @__PURE__ */ jsx61("svg", { width: 16, height: 16, viewBox:
 ) });
 var _StepButton = ({ direction, className, ...props }) => {
   const Icon4 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ jsx61(
-    Button4,
+  return /* @__PURE__ */ jsx64(
+    Button5,
     {
-      className: cn32(
+      className: cn34(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2264,13 +2392,13 @@ var _StepButton = ({ direction, className, ...props }) => {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx61(Icon4, {})
+      children: /* @__PURE__ */ jsx64(Icon4, {})
     }
   );
 };
 
 // src/NumberField/NumberField.tsx
-import { jsx as jsx62, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs27 } from "react/jsx-runtime";
 var _NumberField = forwardRef16(
   ({
     variant,
@@ -2282,7 +2410,7 @@ var _NumberField = forwardRef16(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames37({
+    const classNames2 = useClassNames39({
       component: "NumberField",
       size,
       variant
@@ -2295,8 +2423,8 @@ var _NumberField = forwardRef16(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx62(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs25(Group2, { className: cn33("flex items-stretch", classNames2.group), children: [
-      showStepper && /* @__PURE__ */ jsx62(
+    return /* @__PURE__ */ jsx65(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group2, { className: cn35("flex items-stretch", classNames2.group), children: [
+      showStepper && /* @__PURE__ */ jsx65(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2304,7 +2432,7 @@ var _NumberField = forwardRef16(
           slot: "decrement"
         }
       ),
-      /* @__PURE__ */ jsx62("div", { className: "flex-1", children: /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx65("div", { className: "flex-1", children: /* @__PURE__ */ jsx65(
         _Input,
         {
           ref,
@@ -2313,7 +2441,7 @@ var _NumberField = forwardRef16(
           className: classNames2.input
         }
       ) }),
-      showStepper && /* @__PURE__ */ jsx62(
+      showStepper && /* @__PURE__ */ jsx65(
         _StepButton,
         {
           className: classNames2.stepper,
@@ -2330,7 +2458,7 @@ import {
   forwardRef as forwardRef17
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn35, useClassNames as useClassNames39 } from "@marigold/system";
+import { cn as cn37, useClassNames as useClassNames41 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext6, useContext as useContext12 } from "react";
@@ -2341,8 +2469,8 @@ var useRadioGroupContext = () => useContext12(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn34, useClassNames as useClassNames38 } from "@marigold/system";
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { cn as cn36, useClassNames as useClassNames40 } from "@marigold/system";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
   size,
@@ -2358,7 +2486,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = useClassNames38({ component: "Radio", variant, size });
+  const classNames2 = useClassNames40({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2366,7 +2494,7 @@ var _RadioGroup = ({
     isInvalid: error,
     ...rest
   };
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx66(
     FieldBase,
     {
       as: RadioGroup,
@@ -2377,18 +2505,18 @@ var _RadioGroup = ({
       variant,
       size,
       ...props,
-      children: /* @__PURE__ */ jsx63(
+      children: /* @__PURE__ */ jsx66(
         "div",
         {
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn34(
+          className: cn36(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx63(RadioGroupContext.Provider, { value: { width, variant, size }, children })
+          children: /* @__PURE__ */ jsx66(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -2396,33 +2524,33 @@ var _RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { Fragment as Fragment6, jsx as jsx64, jsxs as jsxs26 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx64("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx64("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx64(
+import { Fragment as Fragment7, jsx as jsx67, jsxs as jsxs28 } from "react/jsx-runtime";
+var Dot = () => /* @__PURE__ */ jsx67("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx67("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx67(
   "div",
   {
-    className: cn35(
+    className: cn37(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
     "aria-hidden": "true",
     ...props,
-    children: checked ? /* @__PURE__ */ jsx64(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx67(Dot, {}) : null
   }
 );
 var _Radio = forwardRef17(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = useClassNames39({
+    const classNames2 = useClassNames41({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    return /* @__PURE__ */ jsx64(
+    return /* @__PURE__ */ jsx67(
       Radio,
       {
         ref,
-        className: cn35(
+        className: cn37(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -2431,18 +2559,18 @@ var _Radio = forwardRef17(
         value,
         isDisabled: disabled,
         ...props,
-        children: ({ isSelected }) => /* @__PURE__ */ jsxs26(Fragment6, { children: [
-          /* @__PURE__ */ jsx64(
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs28(Fragment7, { children: [
+          /* @__PURE__ */ jsx67(
             Icon3,
             {
               checked: isSelected,
-              className: cn35(
+              className: cn37(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
             }
           ),
-          /* @__PURE__ */ jsx64("div", { className: classNames2.label, children })
+          /* @__PURE__ */ jsx67("div", { className: classNames2.label, children })
         ] })
       }
     );
@@ -2453,7 +2581,7 @@ _Radio.Group = _RadioGroup;
 // src/SearchField/SearchField.tsx
 import { forwardRef as forwardRef18 } from "react";
 import { SearchField } from "react-aria-components";
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var _SearchField = forwardRef18(
   ({ disabled, required, readOnly, error, action, ...rest }, ref) => {
     const props = {
@@ -2463,7 +2591,7 @@ var _SearchField = forwardRef18(
       isReadOnly: readOnly,
       isInvalid: error
     };
-    return /* @__PURE__ */ jsx65(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx65(
+    return /* @__PURE__ */ jsx68(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx68(
       SearchInput,
       {
         ref,
@@ -2476,12 +2604,12 @@ var _SearchField = forwardRef18(
 // src/Select/Select.tsx
 import { forwardRef as forwardRef19 } from "react";
 import {
-  Button as Button5,
+  Button as Button6,
   Select,
   SelectValue
 } from "react-aria-components";
-import { cn as cn36, useClassNames as useClassNames40 } from "@marigold/system";
-import { jsx as jsx66, jsxs as jsxs27 } from "react/jsx-runtime";
+import { cn as cn38, useClassNames as useClassNames42 } from "@marigold/system";
+import { jsx as jsx69, jsxs as jsxs29 } from "react/jsx-runtime";
 var _Select = forwardRef19(
   ({
     disabled,
@@ -2502,22 +2630,22 @@ var _Select = forwardRef19(
       onSelectionChange: onChange,
       ...rest
     };
-    const classNames2 = useClassNames40({ component: "Select", variant, size });
-    return /* @__PURE__ */ jsxs27(FieldBase, { isOpen: true, as: Select, ref, ...props, children: [
-      /* @__PURE__ */ jsxs27(
-        Button5,
+    const classNames2 = useClassNames42({ component: "Select", variant, size });
+    return /* @__PURE__ */ jsxs29(FieldBase, { isOpen: true, as: Select, ref, ...props, children: [
+      /* @__PURE__ */ jsxs29(
+        Button6,
         {
-          className: cn36(
+          className: cn38(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames2.select
           ),
           children: [
-            /* @__PURE__ */ jsx66(SelectValue, {}),
-            /* @__PURE__ */ jsx66(ChevronDown, { className: "size-4" })
+            /* @__PURE__ */ jsx69(SelectValue, {}),
+            /* @__PURE__ */ jsx69(ChevronDown, { className: "size-4" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx66(_Popover, { children: /* @__PURE__ */ jsx66(_ListBox, { items, children: props.children }) })
+      /* @__PURE__ */ jsx69(_Popover, { children: /* @__PURE__ */ jsx69(_ListBox, { items, children: props.children }) })
     ] });
   }
 );
@@ -2525,18 +2653,18 @@ _Select.Option = _ListBox.Item;
 _Select.Section = _ListBox.Section;
 
 // src/Scrollable/Scrollable.tsx
-import { cn as cn37, createVar as createVar10, width as twWidth2 } from "@marigold/system";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { cn as cn39, createVar as createVar10, width as twWidth2 } from "@marigold/system";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var Scrollable = ({
   children,
   width = "full",
   height,
   ...props
-}) => /* @__PURE__ */ jsx67(
+}) => /* @__PURE__ */ jsx70(
   "div",
   {
     ...props,
-    className: cn37(["sticky h-[--height] overflow-auto", twWidth2[width]]),
+    className: cn39(["sticky h-[--height] overflow-auto", twWidth2[width]]),
     style: createVar10({ height }),
     children
   }
@@ -2551,11 +2679,11 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn38,
+  cn as cn40,
   width as twWidth3,
-  useClassNames as useClassNames41
+  useClassNames as useClassNames43
 } from "@marigold/system";
-import { jsx as jsx68, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx71, jsxs as jsxs30 } from "react/jsx-runtime";
 var _Slider = forwardRef20(
   ({
     thumbLabels,
@@ -2565,7 +2693,7 @@ var _Slider = forwardRef20(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames41({
+    const classNames2 = useClassNames43({
       component: "Slider",
       variant,
       size
@@ -2574,10 +2702,10 @@ var _Slider = forwardRef20(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs30(
       Slider,
       {
-        className: cn38(
+        className: cn40(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -2585,16 +2713,16 @@ var _Slider = forwardRef20(
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx68(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx68(SliderOutput, { className: cn38("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx68(
+          /* @__PURE__ */ jsx71(_Label, { children: props.children }),
+          /* @__PURE__ */ jsx71(SliderOutput, { className: cn40("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx71(
             SliderTrack,
             {
-              className: cn38("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx68(
+              className: cn40("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx71(
                 SliderThumb,
                 {
-                  className: cn38("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn40("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -2609,16 +2737,16 @@ var _Slider = forwardRef20(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
-var Split = (props) => /* @__PURE__ */ jsx69("div", { ...props, role: "separator", className: "grow" });
+import { jsx as jsx72 } from "react/jsx-runtime";
+var Split = (props) => /* @__PURE__ */ jsx72("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn39,
+  cn as cn41,
   gapSpace as gapSpace6
 } from "@marigold/system";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -2629,10 +2757,10 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx70(
+  return /* @__PURE__ */ jsx73(
     "div",
     {
-      className: cn39(
+      className: cn41(
         "flex flex-col",
         gapSpace6[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -2649,11 +2777,11 @@ var Stack = ({
 import { forwardRef as forwardRef21 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn40,
+  cn as cn42,
   width as twWidth4,
-  useClassNames as useClassNames42
+  useClassNames as useClassNames44
 } from "@marigold/system";
-import { jsx as jsx71, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs31 } from "react/jsx-runtime";
 var _Switch = forwardRef21(
   ({
     variant,
@@ -2665,37 +2793,37 @@ var _Switch = forwardRef21(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames42({ component: "Switch", size, variant });
+    const classNames2 = useClassNames44({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
       isSelected: selected,
       ...rest
     };
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs31(
       Switch,
       {
         ...props,
         ref,
-        className: cn40(
+        className: cn42(
           twWidth4[width],
           "group/switch",
           "flex items-center gap-[1ch]",
           classNames2.container
         ),
         children: [
-          /* @__PURE__ */ jsx71(_Label, { elementType: "span", children }),
-          /* @__PURE__ */ jsx71("div", { className: "relative", children: /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsx74(_Label, { elementType: "span", children }),
+          /* @__PURE__ */ jsx74("div", { className: "relative", children: /* @__PURE__ */ jsx74(
             "div",
             {
-              className: cn40(
+              className: cn42(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ jsx71(
+              children: /* @__PURE__ */ jsx74(
                 "div",
                 {
-                  className: cn40(
+                  className: cn42(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -2724,7 +2852,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn46, useClassNames as useClassNames44 } from "@marigold/system";
+import { cn as cn48, useClassNames as useClassNames46 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext7, useContext as useContext13 } from "react";
@@ -2733,10 +2861,10 @@ var useTableContext = () => useContext13(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ jsx72("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx75("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
@@ -2744,8 +2872,8 @@ import { useRef as useRef4 } from "react";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { cn as cn41, useStateProps as useStateProps2 } from "@marigold/system";
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { cn as cn43, useStateProps as useStateProps2 } from "@marigold/system";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var TableCell = ({ cell, align = "left" }) => {
   const ref = useRef4(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
@@ -2768,11 +2896,11 @@ var TableCell = ({ cell, align = "left" }) => {
   };
   const { focusProps, isFocusVisible } = useFocusRing2();
   const stateProps = useStateProps2({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx76(
     "td",
     {
       ref,
-      className: cn41(classNames2 == null ? void 0 : classNames2.cell),
+      className: cn43(classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps3(cellProps, focusProps),
       ...stateProps,
       align,
@@ -2786,7 +2914,7 @@ import { useRef as useRef5 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { cn as cn42, useStateProps as useStateProps3 } from "@marigold/system";
+import { cn as cn44, useStateProps as useStateProps3 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2809,7 +2937,7 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
   const ref = useRef5(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -2826,14 +2954,14 @@ var TableCheckboxCell = ({ cell }) => {
   );
   const { focusProps, isFocusVisible } = useFocusRing3();
   const stateProps = useStateProps3({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx77(
     "td",
     {
       ref,
-      className: cn42("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: cn44("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps4(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx74(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx77(_Checkbox, { ...checkboxProps })
     }
   );
 };
@@ -2845,9 +2973,9 @@ import { useHover } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn43, useStateProps as useStateProps4 } from "@marigold/system";
+import { cn as cn45, useStateProps as useStateProps4 } from "@marigold/system";
 import { width as twWidth5 } from "@marigold/system";
-import { jsx as jsx75, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs32 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto",
@@ -2869,18 +2997,18 @@ var TableColumnHeader = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: cn43("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn45("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps5(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
       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__ */ jsx75(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx75(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx75(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__ */ jsx78(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx78(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx78(SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -2888,10 +3016,10 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var TableHeader = ({ stickyHeader, children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx79(
     "thead",
     {
       ...rowGroupProps,
@@ -2904,12 +3032,12 @@ var TableHeader = ({ stickyHeader, children }) => {
 // src/Table/TableHeaderRow.tsx
 import { useRef as useRef7 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx80 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef7(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx77("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ jsx80("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
@@ -2918,13 +3046,13 @@ import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { cn as cn44, useClassNames as useClassNames43, useStateProps as useStateProps5 } from "@marigold/system";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import { cn as cn46, useClassNames as useClassNames45, useStateProps as useStateProps5 } from "@marigold/system";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef8(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames43({
+  const classNames2 = useClassNames45({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -2949,11 +3077,11 @@ var TableRow = ({ children, row }) => {
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx81(
     "tr",
     {
       ref,
-      className: cn44(
+      className: cn46(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -2976,11 +3104,11 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import {
-  cn as cn45,
+  cn as cn47,
   width as twWidth6,
   useStateProps as useStateProps6
 } from "@marigold/system";
-import { jsx as jsx79 } from "react/jsx-runtime";
+import { jsx as jsx82 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto",
@@ -3002,21 +3130,21 @@ var TableSelectAllCell = ({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx82(
     "th",
     {
       ref,
-      className: cn45(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: cn47(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps7(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
-      children: /* @__PURE__ */ jsx79(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx82(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx80, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs33 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
@@ -3034,21 +3162,21 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames44({
+  const classNames2 = useClassNames46({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx83(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ jsxs31(
+      children: /* @__PURE__ */ jsxs33(
         "table",
         {
           ref: tableRef,
-          className: cn46(
+          className: cn48(
             "group/table",
             "border-collapse whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3056,10 +3184,10 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx80(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx80(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ jsx83(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx83(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c, _d, _e;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx80(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx83(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
@@ -3067,7 +3195,7 @@ var Table = ({
                     align: (_c = column.props) == null ? void 0 : _c.align
                   },
                   column.key
-                ) : /* @__PURE__ */ jsx80(
+                ) : /* @__PURE__ */ jsx83(
                   TableColumnHeader,
                   {
                     width: (_d = column.props) == null ? void 0 : _d.width,
@@ -3078,12 +3206,12 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ jsxs31(TableBody, { children: [
+            /* @__PURE__ */ jsxs33(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx80(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
+                (row) => row.type === "item" && /* @__PURE__ */ jsx83(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
                   var _a, _b;
                   const currentColumn = collection.columns[index];
-                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx80(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx80(
+                  return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx83(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx83(
                     TableCell,
                     {
                       align: (_b = currentColumn.props) == null ? void 0 : _b.align,
@@ -3108,7 +3236,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn47,
+  cn as cn49,
   createVar as createVar11,
   cursorStyle,
   fontWeight,
@@ -3116,10 +3244,10 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames45,
+  useClassNames as useClassNames47,
   useTheme as useTheme3
 } from "@marigold/system";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var Text2 = ({
   variant,
   size,
@@ -3133,16 +3261,16 @@ var Text2 = ({
   ...props
 }) => {
   const theme = useTheme3();
-  const classNames2 = useClassNames45({
+  const classNames2 = useClassNames47({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx84(
     "p",
     {
       ...props,
-      className: cn47(
+      className: cn49(
         "text-[--color] outline-[--outline]",
         classNames2,
         fontStyle && textStyle[fontStyle],
@@ -3167,8 +3295,8 @@ var Text2 = ({
 // src/TextArea/TextArea.tsx
 import { forwardRef as forwardRef22 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames46 } from "@marigold/system";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { useClassNames as useClassNames48 } from "@marigold/system";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var _TextArea = forwardRef22(
   ({
     variant,
@@ -3180,7 +3308,7 @@ var _TextArea = forwardRef22(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames46({ component: "TextArea", variant, size });
+    const classNames2 = useClassNames48({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3188,14 +3316,14 @@ var _TextArea = forwardRef22(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx82(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx82(TextArea, { className: classNames2, ref, rows }) });
+    return /* @__PURE__ */ jsx85(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx85(TextArea, { className: classNames2, ref, rows }) });
   }
 );
 
 // src/TextField/TextField.tsx
 import { forwardRef as forwardRef23 } from "react";
 import { TextField as TextField2 } from "react-aria-components";
-import { jsx as jsx83 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var _TextField = forwardRef23(
   ({
     variant,
@@ -3213,13 +3341,13 @@ var _TextField = forwardRef23(
       isRequired: required,
       ...rest
     };
-    return /* @__PURE__ */ jsx83(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx83(_Input, { ref }) });
+    return /* @__PURE__ */ jsx86(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx86(_Input, { ref }) });
   }
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn48, createVar as createVar12, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx84 } from "react/jsx-runtime";
+import { cn as cn50, createVar as createVar12, gapSpace as gapSpace7 } from "@marigold/system";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3232,11 +3360,11 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx87(
     "div",
     {
       ...props,
-      className: cn48(
+      className: cn50(
         "grid",
         gapSpace7[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3250,11 +3378,11 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn49, useClassNames as useClassNames47 } from "@marigold/system";
+import { cn as cn51, useClassNames as useClassNames49 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
-import { jsx as jsx85 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 var _TooltipTrigger = ({
   delay = 1e3,
   children,
@@ -3268,72 +3396,32 @@ var _TooltipTrigger = ({
     isOpen: open,
     delay
   };
-  return /* @__PURE__ */ jsx85(TooltipTrigger, { ...props, children });
+  return /* @__PURE__ */ jsx88(TooltipTrigger, { ...props, children });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx86, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs34 } from "react/jsx-runtime";
 var _Tooltip = ({ children, variant, size, open, ...rest }) => {
   const props = {
     ...rest,
     isOpen: open
   };
-  const classNames2 = useClassNames47({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ jsxs32(Tooltip, { ...props, className: cn49("group/tooltip", classNames2.container), children: [
-    /* @__PURE__ */ jsx86(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx86("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx86("path", { d: "M0 0 L4 4 L8 0" }) }) }),
-    children
-  ] });
-};
-_Tooltip.Trigger = _TooltipTrigger;
-
-// src/TagGroup/Tag.tsx
-import { Button as Button6, Tag } from "react-aria-components";
-import { cn as cn50, useClassNames as useClassNames49 } from "@marigold/system";
-
-// src/TagGroup/TagGroup.tsx
-import { TagGroup, TagList } from "react-aria-components";
-import { useClassNames as useClassNames48 } from "@marigold/system";
-import { jsx as jsx87 } from "react/jsx-runtime";
-var _TagGroup = ({
-  width,
-  items,
-  children,
-  renderEmptyState,
-  variant,
-  size,
-  ...rest
-}) => {
-  const classNames2 = useClassNames48({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx87(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx87(
-    TagList,
+  const classNames2 = useClassNames49({ component: "Tooltip", variant, size });
+  const portal = usePortalContainer();
+  return /* @__PURE__ */ jsxs34(
+    Tooltip,
     {
-      items,
-      className: classNames2.listItems,
-      renderEmptyState,
-      children
+      ...props,
+      className: cn51("group/tooltip", classNames2.container),
+      UNSTABLE_portalContainer: portal,
+      children: [
+        /* @__PURE__ */ jsx89(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx89("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx89("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+        children
+      ]
     }
-  ) });
-};
-
-// src/TagGroup/Tag.tsx
-import { Fragment as Fragment7, jsx as jsx88, jsxs as jsxs33 } from "react/jsx-runtime";
-var CloseButton2 = ({ className }) => {
-  return /* @__PURE__ */ jsx88(Button6, { slot: "remove", className, children: /* @__PURE__ */ jsx88("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx88("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
-};
-var _Tag = ({ variant, size, children, ...props }) => {
-  let textValue = typeof children === "string" ? children : void 0;
-  const classNames2 = useClassNames49({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx88(Tag, { textValue, ...props, className: classNames2.tag, children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs33(Fragment7, { children: [
-    children,
-    allowsRemoving && /* @__PURE__ */ jsx88(
-      CloseButton2,
-      {
-        className: cn50("flex items-center", classNames2.closeButton)
-      }
-    )
-  ] }) });
+  );
 };
-_Tag.Group = _TagGroup;
+_Tooltip.Trigger = _TooltipTrigger;
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 import { VisuallyHidden } from "@react-aria/visually-hidden";
@@ -3341,8 +3429,8 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 // src/XLoader/XLoader.tsx
 import { forwardRef as forwardRef24 } from "react";
 import { SVG as SVG5 } from "@marigold/system";
-import { jsx as jsx89, jsxs as jsxs34 } from "react/jsx-runtime";
-var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
+import { jsx as jsx90, jsxs as jsxs35 } from "react/jsx-runtime";
+var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs35(
   SVG5,
   {
     id: "XLoader",
@@ -3352,13 +3440,13 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ jsx89("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -3371,12 +3459,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -3389,12 +3477,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -3407,12 +3495,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -3425,12 +3513,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -3443,12 +3531,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -3461,12 +3549,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -3479,12 +3567,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -3497,12 +3585,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -3515,12 +3603,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -3533,12 +3621,12 @@ var XLoader = forwardRef24((props, ref) => /* @__PURE__ */ jsxs34(
           )
         }
       ),
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "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__ */ jsx89(
+          children: /* @__PURE__ */ jsx90(
             "animate",
             {
               attributeName: "opacity",
@@ -3566,15 +3654,15 @@ var useTabContext = () => useContext14(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn51 } from "@marigold/system";
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { cn as cn52 } from "@marigold/system";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx91(
     Tab,
     {
       ...props,
-      className: cn51(
+      className: cn52(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3585,15 +3673,15 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn52, gapSpace as gapSpace8 } from "@marigold/system";
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { cn as cn53, gapSpace as gapSpace8 } from "@marigold/system";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx92(
     TabList,
     {
       ...props,
-      className: cn52("flex", gapSpace8[space], classNames2.tabsList),
+      className: cn53("flex", gapSpace8[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -3601,14 +3689,14 @@ var _TabList = ({ space = 2, ...props }) => {
 
 // src/Tabs/TabPanel.tsx
 import { TabPanel } from "react-aria-components";
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx93 } from "react/jsx-runtime";
 var _TabPanel = (props) => {
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx92(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
+  return /* @__PURE__ */ jsx93(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
   const props = {
     isDisabled: disabled,
@@ -3619,7 +3707,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     size,
     variant
   });
-  return /* @__PURE__ */ jsx93(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx93(Tabs, { ...props, className: classNames2.container, children: props.children }) });
+  return /* @__PURE__ */ jsx94(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx94(Tabs, { ...props, className: classNames2.container, children: props.children }) });
 };
 _Tabs.List = _TabList;
 _Tabs.TabPanel = _TabPanel;
@@ -3670,6 +3758,7 @@ export {
   _Menu as Menu,
   Message,
   _Modal as Modal,
+  Multiselect,
   _NumberField as NumberField,
   OverlayContainerProvider,
   _Popover as Popover,