@marigold/components 8.0.0 → 8.0.2

package/dist/index.mjs

@@ -311,15 +311,24 @@ import {
 } from "react";
 import React from "react";
 import { ComboBox, ComboBoxStateContext } from "react-aria-components";
+import { cn as cn13, useClassNames as useClassNames9 } from "@marigold/system";
 
 // src/FieldBase/FieldBase.tsx
 import { forwardRef as forwardRef3 } from "react";
 import { cn as cn6, width as twWidth, useClassNames as useClassNames4 } from "@marigold/system";
 
 // src/HelpText/HelpText.tsx
-import { FieldError, Text } from "react-aria-components";
+import { useContext } from "react";
+import { FieldError, FieldErrorContext, Text } from "react-aria-components";
 import { cn as cn4, useClassNames as useClassNames2 } from "@marigold/system";
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Description = ({ children }) => {
+  const ctx = useContext(FieldErrorContext);
+  if (ctx && ctx.isInvalid) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx7(Text, { slot: "description", children });
+};
 var Icon = ({ className }) => /* @__PURE__ */ jsx7(
   "svg",
   {
@@ -343,17 +352,17 @@ var HelpText = ({
     size
   });
   return /* @__PURE__ */ jsxs3("div", { className: cn4(classNames2.container), children: [
-    /* @__PURE__ */ jsx7(FieldError, { ...props, className: "peer/error flex flex-col", children: (validation) => {
+    /* @__PURE__ */ jsx7(FieldError, { ...props, className: "flex flex-col", children: (validation) => {
       const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
-      return Array.isArray(messages) ? messages.map((msg) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
+      return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
         /* @__PURE__ */ jsx7(Icon, { className: classNames2.icon }),
         msg
-      ] })) : /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
+      ] }, idx)) : /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-start gap-1", children: [
         /* @__PURE__ */ jsx7(Icon, { className: classNames2.icon }),
         messages
       ] });
     } }),
-    /* @__PURE__ */ jsx7(Text, { slot: "description", className: "peer-first/error:hidden", children: description })
+    /* @__PURE__ */ jsx7(Description, { children: description })
   ] });
 };
 
@@ -362,10 +371,10 @@ import { Label } from "react-aria-components";
 import { SVG as SVG3, cn as cn5, createVar as createVar3, useClassNames as useClassNames3 } from "@marigold/system";
 
 // src/FieldBase/FieldGroup.tsx
-import { createContext, useContext } from "react";
+import { createContext, useContext as useContext2 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var FieldGroupContext = createContext({});
-var useFieldGroupContext = () => useContext(FieldGroupContext);
+var useFieldGroupContext = () => useContext2(FieldGroupContext);
 var FieldGroup = ({ labelWidth, children }) => {
   return /* @__PURE__ */ jsx8(FieldGroupContext.Provider, { value: { labelWidth }, children });
 };
@@ -590,9 +599,9 @@ import { ListBox } from "react-aria-components";
 import { cn as cn10, useClassNames as useClassNames6 } from "@marigold/system";
 
 // src/ListBox/Context.ts
-import { createContext as createContext2, useContext as useContext2 } from "react";
+import { createContext as createContext2, useContext as useContext3 } from "react";
 var ListBoxContext = createContext2({});
-var useListBoxContext = () => useContext2(ListBoxContext);
+var useListBoxContext = () => useContext3(ListBoxContext);
 
 // src/ListBox/ListBoxOption.tsx
 import { ListBoxItem } from "react-aria-components";
@@ -647,12 +656,12 @@ import { Popover } from "react-aria-components";
 import { cn as cn12, useClassNames as useClassNames8, useSmallScreen } from "@marigold/system";
 
 // src/Provider/OverlayContainerProvider.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
+import { createContext as createContext3, useContext as useContext4 } from "react";
 import { useIsSSR } from "@react-aria/ssr";
 var OverlayContainerContext = createContext3(void 0);
 var OverlayContainerProvider = OverlayContainerContext.Provider;
 var usePortalContainer = () => {
-  const portalContainer = useContext3(OverlayContainerContext);
+  const portalContainer = useContext4(OverlayContainerContext);
   const isSSR = useIsSSR();
   const portal = isSSR ? null : portalContainer ? document.getElementById(portalContainer) : document.body;
   return portal;
@@ -766,12 +775,13 @@ var AutocompleteInput = ({
   ref
 }) => {
   const state = React.useContext(ComboBoxStateContext);
+  const classNames2 = useClassNames9({ component: "ComboBox" });
   return /* @__PURE__ */ jsx19(
     SearchInput,
     {
       ref,
       className: {
-        action: (state == null ? void 0 : state.inputValue) === "" ? "hidden" : void 0
+        action: cn13((state == null ? void 0 : state.inputValue) === "" ? "hidden" : void 0, classNames2)
       },
       onKeyDown: (e) => {
         if (e.key === "Enter" || e.key === "Escape") {
@@ -828,16 +838,16 @@ _Autocomplete.Item = _ListBox.Item;
 // src/ComboBox/ComboBox.tsx
 import { forwardRef as forwardRef10 } from "react";
 import { ComboBox as ComboBox2 } from "react-aria-components";
-import { useClassNames as useClassNames10 } from "@marigold/system";
+import { useClassNames as useClassNames11 } from "@marigold/system";
 
 // src/Button/Button.tsx
 import { forwardRef as forwardRef9 } from "react";
 import { Button as Button2 } from "react-aria-components";
-import { cn as cn13, useClassNames as useClassNames9 } from "@marigold/system";
+import { cn as cn14, useClassNames as useClassNames10 } from "@marigold/system";
 import { jsx as jsx20 } from "react/jsx-runtime";
 var _Button = forwardRef9(
   ({ children, variant, size, className, disabled, fullWidth, ...props }, ref) => {
-    const classNames2 = useClassNames9({
+    const classNames2 = useClassNames10({
       component: "Button",
       variant,
       size,
@@ -848,7 +858,7 @@ var _Button = forwardRef9(
       {
         ...props,
         ref,
-        className: cn13(
+        className: cn14(
           "inline-flex items-center justify-center gap-[0.5ch]",
           classNames2,
           fullWidth ? "w-full" : void 0
@@ -886,7 +896,7 @@ var _ComboBox = forwardRef10(
       onInputChange: onChange,
       ...rest
     };
-    const classNames2 = useClassNames10({ component: "ComboBox", variant, size });
+    const classNames2 = useClassNames11({ component: "ComboBox", variant, size });
     return /* @__PURE__ */ jsxs9(FieldBase, { as: ComboBox2, ref, ...props, children: [
       /* @__PURE__ */ jsx21(
         _Input,
@@ -901,15 +911,15 @@ var _ComboBox = forwardRef10(
 _ComboBox.Item = _ListBox.Item;
 
 // src/Badge/Badge.tsx
-import { useClassNames as useClassNames11 } from "@marigold/system";
+import { useClassNames as useClassNames12 } from "@marigold/system";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var Badge = ({ variant, size, children, ...props }) => {
-  const classNames2 = useClassNames11({ component: "Badge", variant, size });
+  const classNames2 = useClassNames12({ component: "Badge", variant, size });
   return /* @__PURE__ */ jsx22("div", { ...props, className: classNames2, children });
 };
 
 // src/Breakout/Breakout.tsx
-import { alignment, cn as cn14, createVar as createVar4 } from "@marigold/system";
+import { alignment, cn as cn15, createVar as createVar4 } from "@marigold/system";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var Breakout = ({
   height,
@@ -922,7 +932,7 @@ var Breakout = ({
   return /* @__PURE__ */ jsx23(
     "div",
     {
-      className: cn14(
+      className: cn15(
         "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]),
@@ -937,16 +947,16 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-import { useClassNames as useClassNames12 } from "@marigold/system";
+import { useClassNames as useClassNames13 } from "@marigold/system";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var Body = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames12({ component: "Body", variant, size });
+  const classNames2 = useClassNames13({ component: "Body", variant, size });
   return /* @__PURE__ */ jsx24("section", { ...props, className: classNames2, children });
 };
 
 // src/Card/Card.tsx
 import {
-  cn as cn15,
+  cn as cn16,
   gapSpace as gapSpace2,
   paddingBottom,
   paddingLeft,
@@ -955,7 +965,7 @@ import {
   paddingSpaceX,
   paddingSpaceY,
   paddingTop,
-  useClassNames as useClassNames13
+  useClassNames as useClassNames14
 } from "@marigold/system";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var Card = ({
@@ -972,12 +982,12 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const classNames2 = useClassNames13({ component: "Card", variant, size });
+  const classNames2 = useClassNames14({ component: "Card", variant, size });
   return /* @__PURE__ */ jsx25(
     "div",
     {
       ...props,
-      className: cn15(
+      className: cn16(
         "flex flex-col",
         classNames2,
         gapSpace2[space],
@@ -995,7 +1005,7 @@ var Card = ({
 };
 
 // src/Center/Center.tsx
-import { cn as cn16, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
+import { cn as cn17, createVar as createVar5, gapSpace as gapSpace3 } from "@marigold/system";
 import { jsx as jsx26 } from "react/jsx-runtime";
 var Center = ({
   maxWidth = "100%",
@@ -1007,7 +1017,7 @@ var Center = ({
     "div",
     {
       ...props,
-      className: cn16(
+      className: cn17(
         "me-[auto] ms-[auto] box-content flex flex-col items-center justify-center",
         gapSpace3[space],
         "max-w-[--maxWidth]"
@@ -1019,16 +1029,16 @@ var Center = ({
 };
 
 // src/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef11, useContext as useContext4 } from "react";
+import { forwardRef as forwardRef11, useContext as useContext5 } from "react";
 import { Checkbox } from "react-aria-components";
 import { CheckboxGroupStateContext } from "react-aria-components";
-import { cn as cn17, useClassNames as useClassNames15 } from "@marigold/system";
+import { cn as cn18, useClassNames as useClassNames16 } from "@marigold/system";
 
 // src/Checkbox/CheckBoxField.tsx
-import { createVar as createVar6, useClassNames as useClassNames14 } from "@marigold/system";
+import { createVar as createVar6, useClassNames as useClassNames15 } from "@marigold/system";
 import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
 var CheckboxField = ({ children, labelWidth }) => {
-  const classNames2 = useClassNames14({ component: "Field" });
+  const classNames2 = useClassNames15({ component: "Field" });
   return /* @__PURE__ */ jsxs10("div", { className: classNames2, children: [
     /* @__PURE__ */ jsx27("div", { className: "w-[--labelWidth]", style: createVar6({ labelWidth }) }),
     children
@@ -1058,7 +1068,7 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
     "div",
     {
       "aria-hidden": "true",
-      className: cn17(
+      className: cn18(
         "flex shrink-0 grow-0 basis-4 items-center justify-center",
         "h-4 w-4 p-px",
         "bg-white",
@@ -1096,13 +1106,13 @@ var _Checkbox = forwardRef11(
       ...rest
     };
     const { labelWidth } = useFieldGroupContext();
-    const classNames2 = useClassNames15({ component: "Checkbox", variant, size });
-    const state = useContext4(CheckboxGroupStateContext);
+    const classNames2 = useClassNames16({ component: "Checkbox", variant, size });
+    const state = useContext5(CheckboxGroupStateContext);
     const component = /* @__PURE__ */ jsx28(
       Checkbox,
       {
         ref,
-        className: cn17(
+        className: cn18(
           "group/checkbox flex items-center gap-[0.5rem]",
           "cursor-pointer data-[disabled]:cursor-not-allowed",
           classNames2.container
@@ -1127,10 +1137,10 @@ var _Checkbox = forwardRef11(
 
 // src/Checkbox/CheckboxGroup.tsx
 import { CheckboxGroup } from "react-aria-components";
-import { cn as cn18, useClassNames as useClassNames16 } from "@marigold/system";
+import { cn as cn19, useClassNames as useClassNames17 } from "@marigold/system";
 
 // src/Checkbox/Context.tsx
-import { createContext as createContext4, useContext as useContext5 } from "react";
+import { createContext as createContext4, useContext as useContext6 } from "react";
 var CheckboxGroupContext = createContext4(
   null
 );
@@ -1149,7 +1159,7 @@ var _CheckboxGroup = ({
   orientation = "vertical",
   ...rest
 }) => {
-  const classNames2 = useClassNames16({
+  const classNames2 = useClassNames17({
     component: "Checkbox",
     variant,
     size,
@@ -1168,7 +1178,7 @@ var _CheckboxGroup = ({
     {
       role: "presentation",
       "data-orientation": orientation,
-      className: cn18(
+      className: cn19(
         classNames2.group,
         "flex items-start",
         orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
@@ -1180,7 +1190,7 @@ var _CheckboxGroup = ({
 
 // src/Columns/Columns.tsx
 import { Children as Children3 } from "react";
-import { cn as cn19, createVar as createVar7, gapSpace as gapSpace4 } from "@marigold/system";
+import { cn as cn20, createVar as createVar7, gapSpace as gapSpace4 } from "@marigold/system";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var Columns = ({
   space = 0,
@@ -1200,7 +1210,7 @@ var Columns = ({
   return /* @__PURE__ */ jsx30(
     "div",
     {
-      className: cn19(
+      className: cn20(
         "flex flex-wrap items-stretch",
         stretch && "h-full",
         gapSpace4[space]
@@ -1209,7 +1219,7 @@ var Columns = ({
       children: Children3.map(children, (child, idx) => /* @__PURE__ */ jsx30(
         "div",
         {
-          className: cn19(
+          className: cn20(
             columns[idx] === "fit" ? "flex h-fit w-fit" : "flex-[--columnSize]",
             "basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
           ),
@@ -1226,7 +1236,7 @@ var Columns = ({
 
 // src/Container/Container.tsx
 import {
-  cn as cn20,
+  cn as cn21,
   createVar as createVar8,
   gridColsAlign,
   gridColumn,
@@ -1256,7 +1266,7 @@ var Container = ({
     "div",
     {
       ...props,
-      className: cn20(
+      className: cn21(
         "grid",
         placeItems[alignItems],
         gridColsAlign[align],
@@ -1269,18 +1279,18 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import { useContext as useContext6 } from "react";
+import { useContext as useContext7 } from "react";
 import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
-import { cn as cn22, useClassNames as useClassNames18 } from "@marigold/system";
+import { cn as cn23, useClassNames as useClassNames19 } from "@marigold/system";
 
 // src/Headline/Headline.tsx
 import { Heading } from "react-aria-components";
 import {
-  cn as cn21,
+  cn as cn22,
   createVar as createVar9,
   getColor,
   textAlign,
-  useClassNames as useClassNames17,
+  useClassNames as useClassNames18,
   useTheme as useTheme2
 } from "@marigold/system";
 import { jsx as jsx32 } from "react/jsx-runtime";
@@ -1294,7 +1304,7 @@ var _Headline = ({
   ...props
 }) => {
   const theme = useTheme2();
-  const classNames2 = useClassNames17({
+  const classNames2 = useClassNames18({
     component: "Headline",
     variant,
     size: size != null ? size : `level-${level}`
@@ -1304,7 +1314,7 @@ var _Headline = ({
     {
       level: Number(level),
       ...props,
-      className: cn21(classNames2, "text-[--color]", textAlign[align]),
+      className: cn22(classNames2, "text-[--color]", textAlign[align]),
       style: createVar9({
         color: color && getColor(
           theme,
@@ -1380,11 +1390,11 @@ var _DialogTrigger = ({
 // src/Dialog/Dialog.tsx
 import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
 var CloseButton = ({ className }) => {
-  const { close } = useContext6(OverlayTriggerStateContext);
+  const { close } = useContext7(OverlayTriggerStateContext);
   return /* @__PURE__ */ jsx35("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx35(
     "button",
     {
-      className: cn22(
+      className: cn23(
         "h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
         className
       ),
@@ -1408,8 +1418,8 @@ var _Dialog = ({
   isNonModal,
   ...props
 }) => {
-  const classNames2 = useClassNames18({ component: "Dialog", variant, size });
-  let state = useContext6(OverlayTriggerStateContext);
+  const classNames2 = useClassNames19({ component: "Dialog", variant, size });
+  let state = useContext7(OverlayTriggerStateContext);
   let children = props.children;
   if (typeof children === "function") {
     children = children({
@@ -1421,7 +1431,7 @@ var _Dialog = ({
     Dialog,
     {
       ...props,
-      className: cn22("relative outline-none", classNames2.container),
+      className: cn23("relative outline-none", classNames2.container),
       children: /* @__PURE__ */ jsxs13(Fragment3, { children: [
         closeButton && /* @__PURE__ */ jsx35(CloseButton, { className: classNames2.closeButton }),
         children
@@ -1434,18 +1444,18 @@ _Dialog.Headline = DialogHeadline;
 
 // src/Divider/Divider.tsx
 import { Separator } from "react-aria-components";
-import { cn as cn23, useClassNames as useClassNames19 } from "@marigold/system";
+import { cn as cn24, useClassNames as useClassNames20 } 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: cn23("border-none", classNames2), ...props });
+  const classNames2 = useClassNames20({ component: "Divider", variant });
+  return /* @__PURE__ */ jsx36(Separator, { className: cn24("border-none", classNames2), ...props });
 };
 
 // src/Footer/Footer.tsx
-import { useClassNames as useClassNames20 } from "@marigold/system";
+import { useClassNames as useClassNames21 } from "@marigold/system";
 import { jsx as jsx37 } from "react/jsx-runtime";
 var Footer = ({ children, variant, size, ...props }) => {
-  const classNames2 = useClassNames20({ component: "Footer", variant, size });
+  const classNames2 = useClassNames21({ component: "Footer", variant, size });
   return /* @__PURE__ */ jsx37("footer", { ...props, className: classNames2, children });
 };
 
@@ -1453,7 +1463,7 @@ var Footer = ({ children, variant, size, ...props }) => {
 import { Form } from "react-aria-components";
 
 // src/Grid/Grid.tsx
-import { cn as cn24, gapSpace as gapSpace5, height as twHeight } from "@marigold/system";
+import { cn as cn25, gapSpace as gapSpace5, height as twHeight } from "@marigold/system";
 
 // src/Grid/GridArea.tsx
 import { jsx as jsx38 } from "react/jsx-runtime";
@@ -1475,7 +1485,7 @@ var Grid = ({
   return /* @__PURE__ */ jsx39(
     "div",
     {
-      className: cn24("grid", gapSpace5[space], twHeight[height]),
+      className: cn25("grid", gapSpace5[space], twHeight[height]),
       style: {
         gridTemplateAreas: parseGridAreas(areas),
         gridTemplateColumns: parseTemplateValue(columns),
@@ -1490,10 +1500,10 @@ Grid.Area = GridArea;
 
 // src/Header/Header.tsx
 import { Header } from "react-aria-components";
-import { useClassNames as useClassNames21 } from "@marigold/system";
+import { useClassNames as useClassNames22 } from "@marigold/system";
 import { jsx as jsx40 } from "react/jsx-runtime";
 var _Header = ({ variant, size, ...props }) => {
-  const classNames2 = useClassNames21({
+  const classNames2 = useClassNames22({
     component: "Header",
     variant,
     size
@@ -1503,10 +1513,10 @@ var _Header = ({ variant, size, ...props }) => {
 
 // src/Image/Image.tsx
 import {
-  cn as cn25,
+  cn as cn26,
   objectFit,
   objectPosition,
-  useClassNames as useClassNames22
+  useClassNames as useClassNames23
 } from "@marigold/system";
 import { jsx as jsx41 } from "react/jsx-runtime";
 var Image = ({
@@ -1516,13 +1526,13 @@ var Image = ({
   position = "none",
   ...props
 }) => {
-  const classNames2 = useClassNames22({ component: "Image", variant, size });
+  const classNames2 = useClassNames23({ component: "Image", variant, size });
   return /* @__PURE__ */ jsx41(
     "img",
     {
       ...props,
       alt: props.alt,
-      className: cn25(
+      className: cn26(
         fit !== "none" && "h-full w-full",
         classNames2,
         objectFit[fit],
@@ -1535,7 +1545,7 @@ var Image = ({
 // src/Inline/Inline.tsx
 import {
   alignment as alignment2,
-  cn as cn26,
+  cn as cn27,
   gapSpace as gapSpace6
 } from "@marigold/system";
 import { jsx as jsx42 } from "react/jsx-runtime";
@@ -1552,7 +1562,7 @@ var Inline = ({
     "div",
     {
       ...props,
-      className: cn26(
+      className: cn27(
         "flex flex-wrap",
         gapSpace6[space],
         alignX && ((_b2 = (_a2 = alignment2) == null ? void 0 : _a2.horizontal) == null ? void 0 : _b2.alignmentX[alignX]),
@@ -1569,11 +1579,11 @@ import { DateField } from "react-aria-components";
 
 // src/DateField/DateInput.tsx
 import { DateInput, Group } from "react-aria-components";
-import { useClassNames as useClassNames23 } from "@marigold/system";
+import { useClassNames as useClassNames24 } from "@marigold/system";
 
 // src/DateField/DateSegment.tsx
 import { DateSegment } from "react-aria-components";
-import { cn as cn27 } from "@marigold/system";
+import { cn as cn28 } from "@marigold/system";
 import { Fragment as Fragment4, jsx as jsx43, jsxs as jsxs14 } from "react/jsx-runtime";
 var _DateSegment = ({ segment, ...props }) => {
   return /* @__PURE__ */ jsx43(
@@ -1589,7 +1599,7 @@ var _DateSegment = ({ segment, ...props }) => {
           "span",
           {
             "aria-hidden": "true",
-            className: cn27(
+            className: cn28(
               isPlaceholder ? "visible block" : "invisible hidden",
               "pointer-events-none w-full text-center"
             ),
@@ -1605,7 +1615,7 @@ var _DateSegment = ({ segment, ...props }) => {
 // src/DateField/DateInput.tsx
 import { jsx as jsx44, jsxs as jsxs15 } from "react/jsx-runtime";
 var _DateInput = ({ variant, size, action, ...props }) => {
-  const classNames2 = useClassNames23({ component: "DateField", variant, size });
+  const classNames2 = useClassNames24({ component: "DateField", variant, size });
   return /* @__PURE__ */ jsxs15(Group, { className: classNames2.field, children: [
     /* @__PURE__ */ jsx44(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx44(_DateSegment, { className: classNames2.segment, segment }) }),
     action ? action : /* @__PURE__ */ jsx44("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx44(
@@ -1659,7 +1669,7 @@ var _DateField = forwardRef13(
 // src/Calendar/Calendar.tsx
 import { useState } from "react";
 import { Calendar } from "react-aria-components";
-import { cn as cn31, useClassNames as useClassNames28 } from "@marigold/system";
+import { cn as cn32, useClassNames as useClassNames29 } from "@marigold/system";
 
 // src/Calendar/CalendarGrid.tsx
 import {
@@ -1667,18 +1677,18 @@ import {
   CalendarGrid,
   CalendarGridBody
 } from "react-aria-components";
-import { cn as cn28, useClassNames as useClassNames25 } from "@marigold/system";
+import { cn as cn29, useClassNames as useClassNames26 } from "@marigold/system";
 
 // src/Calendar/CalendarGridHeader.tsx
 import { startOfWeek, today } from "@internationalized/date";
-import { useContext as useContext7, useMemo } from "react";
+import { useContext as useContext8, useMemo } from "react";
 import { CalendarStateContext } from "react-aria-components";
 import { useCalendarGrid } from "@react-aria/calendar";
 import { useDateFormatter, useLocale } from "@react-aria/i18n";
-import { useClassNames as useClassNames24 } from "@marigold/system";
+import { useClassNames as useClassNames25 } from "@marigold/system";
 import { jsx as jsx46 } from "react/jsx-runtime";
 function CalendarGridHeader(props) {
-  const state = useContext7(CalendarStateContext);
+  const state = useContext8(CalendarStateContext);
   const { headerProps } = useCalendarGrid(props, state);
   const { locale } = useLocale();
   const dayFormatter = useDateFormatter({
@@ -1693,21 +1703,21 @@ function CalendarGridHeader(props) {
       return dayFormatter.format(dateDay);
     });
   }, [locale, state.timeZone, dayFormatter]);
-  const classNames2 = useClassNames24({ component: "Calendar" });
+  const classNames2 = useClassNames25({ component: "Calendar" });
   return /* @__PURE__ */ jsx46("thead", { ...headerProps, children: /* @__PURE__ */ jsx46("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx46("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
 }
 
 // src/Calendar/CalendarGrid.tsx
 import { jsx as jsx47, jsxs as jsxs16 } from "react/jsx-runtime";
 var _CalendarGrid = () => {
-  const classNames2 = useClassNames25({ component: "Calendar" });
+  const classNames2 = useClassNames26({ component: "Calendar" });
   return /* @__PURE__ */ jsxs16(CalendarGrid, { className: classNames2.calendarGrid, children: [
     /* @__PURE__ */ jsx47(CalendarGridHeader, {}),
     /* @__PURE__ */ jsx47(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx47(
       CalendarCell,
       {
         date,
-        className: cn28(
+        className: cn29(
           "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
         )
@@ -1717,10 +1727,10 @@ var _CalendarGrid = () => {
 };
 
 // src/Calendar/CalendarListBox.tsx
-import { useContext as useContext8 } from "react";
+import { useContext as useContext9 } from "react";
 import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
 import { ChevronDown as ChevronDown2 } from "@marigold/icons";
-import { cn as cn29, useClassNames as useClassNames26 } from "@marigold/system";
+import { cn as cn30, useClassNames as useClassNames27 } from "@marigold/system";
 
 // src/Calendar/useFormattedMonths.tsx
 import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
@@ -1745,16 +1755,16 @@ function CalendarListBox({
   isDisabled,
   setSelectedDropdown
 }) {
-  const state = useContext8(CalendarStateContext2);
+  const state = useContext9(CalendarStateContext2);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
-  const { select: selectClassNames } = useClassNames26({ component: "Select" });
+  const { select: selectClassNames } = useClassNames27({ component: "Select" });
   return /* @__PURE__ */ jsxs17(
     "button",
     {
       disabled: isDisabled,
       onClick: () => setSelectedDropdown(type),
-      className: cn29(buttonStyles, selectClassNames),
+      className: cn30(buttonStyles, selectClassNames),
       "data-testid": type,
       children: [
         type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
@@ -1767,15 +1777,15 @@ function CalendarListBox({
 // src/Calendar/MonthControls.tsx
 import { Button as Button3 } from "react-aria-components";
 import { ChevronLeft, ChevronRight } from "@marigold/icons";
-import { cn as cn30, useClassNames as useClassNames27 } from "@marigold/system";
+import { cn as cn31, useClassNames as useClassNames28 } from "@marigold/system";
 import { jsx as jsx49, jsxs as jsxs18 } from "react/jsx-runtime";
 function MonthControls() {
-  const classNames2 = useClassNames27({ component: "Calendar" });
-  const buttonClassNames = useClassNames27({ component: "Button" });
+  const classNames2 = useClassNames28({ component: "Calendar" });
+  const buttonClassNames = useClassNames28({ component: "Button" });
   return /* @__PURE__ */ jsxs18(
     "div",
     {
-      className: cn30(
+      className: cn31(
         "flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
         classNames2.calendarControllers
       ),
@@ -1783,7 +1793,7 @@ function MonthControls() {
         /* @__PURE__ */ jsx49(
           Button3,
           {
-            className: cn30(
+            className: cn31(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
@@ -1794,7 +1804,7 @@ function MonthControls() {
         /* @__PURE__ */ jsx49(
           Button3,
           {
-            className: cn30(
+            className: cn31(
               "inline-flex items-center justify-center gap-[0.5ch]",
               buttonClassNames
             ),
@@ -1809,11 +1819,11 @@ function MonthControls() {
 var MonthControls_default = MonthControls;
 
 // src/Calendar/MonthListBox.tsx
-import { useContext as useContext9 } from "react";
+import { useContext as useContext10 } from "react";
 import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var MonthListBox = ({ setSelectedDropdown }) => {
-  const state = useContext9(CalendarStateContext3);
+  const state = useContext10(CalendarStateContext3);
   const months = useFormattedMonths(state.timeZone, state.focusedDate);
   let onChange = (index) => {
     let value = Number(index) + 1;
@@ -1848,7 +1858,7 @@ var MonthListBox_default = MonthListBox;
 
 // src/Calendar/YearListBox.tsx
 import {
-  useContext as useContext10,
+  useContext as useContext11,
   useEffect as useEffect2,
   useRef as useRef3
 } from "react";
@@ -1856,7 +1866,7 @@ import { CalendarStateContext as CalendarStateContext4 } from "react-aria-compon
 import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
 import { jsx as jsx51 } from "react/jsx-runtime";
 var YearListBox = ({ setSelectedDropdown }) => {
-  const state = useContext10(CalendarStateContext4);
+  const state = useContext11(CalendarStateContext4);
   const years = [];
   let formatter = useDateFormatter3({
     year: "numeric",
@@ -1934,7 +1944,7 @@ var _Calendar = ({
     isReadOnly: readOnly,
     ...rest
   };
-  const classNames2 = useClassNames28({ component: "Calendar" });
+  const classNames2 = useClassNames29({ component: "Calendar" });
   const [selectedDropdown, setSelectedDropdown] = useState();
   const ViewMap = {
     month: /* @__PURE__ */ jsx52(MonthListBox_default, { setSelectedDropdown }),
@@ -1943,7 +1953,7 @@ var _Calendar = ({
   return /* @__PURE__ */ jsx52(
     Calendar,
     {
-      className: cn31(
+      className: cn32(
         "flex min-h-[350px] w-[360px] flex-col rounded-sm p-4",
         classNames2.calendar
       ),
@@ -1977,66 +1987,79 @@ var _Calendar = ({
 };
 
 // src/DatePicker/DatePicker.tsx
+import React4 from "react";
 import { DatePicker } from "react-aria-components";
-import { useClassNames as useClassNames29 } from "@marigold/system";
+import { useClassNames as useClassNames30 } from "@marigold/system";
 import { jsx as jsx53, jsxs as jsxs20 } from "react/jsx-runtime";
-var _DatePicker = ({
-  disabled,
-  required,
-  readOnly,
-  error,
-  variant,
-  size,
-  open,
-  granularity = "day",
-  ...rest
-}) => {
-  const props = {
-    isDisabled: disabled,
-    isReadOnly: readOnly,
-    isRequired: required,
-    isInvalid: error,
-    isOpen: open,
-    granularity,
-    ...rest
-  };
-  const classNames2 = useClassNames29({
-    component: "DatePicker",
+var _DatePicker = React4.forwardRef(
+  ({
+    disabled,
+    required,
+    readOnly,
+    error,
+    variant,
     size,
-    variant
-  });
-  return /* @__PURE__ */ jsxs20(FieldBase, { as: DatePicker, variant, size, ...props, children: [
-    /* @__PURE__ */ jsx53(
-      _DateInput,
+    open,
+    granularity = "day",
+    ...rest
+  }, ref) => {
+    const props = {
+      isDisabled: disabled,
+      isReadOnly: readOnly,
+      isRequired: required,
+      isInvalid: error,
+      isOpen: open,
+      granularity,
+      ...rest
+    };
+    const classNames2 = useClassNames30({
+      component: "DatePicker",
+      size,
+      variant
+    });
+    return /* @__PURE__ */ jsxs20(
+      FieldBase,
       {
-        action: /* @__PURE__ */ jsx53("div", { className: classNames2.container, children: /* @__PURE__ */ jsx53(
-          _Button,
-          {
-            size: "small",
-            disabled,
-            className: classNames2.button,
-            children: /* @__PURE__ */ jsx53(
-              "svg",
-              {
-                "data-testid": "action",
-                viewBox: "0 0 24 24",
-                width: 24,
-                height: 24,
-                fill: "currentColor",
-                children: /* @__PURE__ */ jsx53("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
-              }
-            )
-          }
-        ) })
+        as: DatePicker,
+        variant,
+        size,
+        ...props,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx53(
+            _DateInput,
+            {
+              action: /* @__PURE__ */ jsx53("div", { className: classNames2.container, children: /* @__PURE__ */ jsx53(
+                _Button,
+                {
+                  size: "small",
+                  disabled,
+                  className: classNames2.button,
+                  children: /* @__PURE__ */ jsx53(
+                    "svg",
+                    {
+                      "data-testid": "action",
+                      viewBox: "0 0 24 24",
+                      width: 24,
+                      height: 24,
+                      fill: "currentColor",
+                      children: /* @__PURE__ */ jsx53("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
+                    }
+                  )
+                }
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsx53(_Popover, { children: /* @__PURE__ */ jsx53(_Calendar, { disabled }) })
+        ]
       }
-    ),
-    /* @__PURE__ */ jsx53(_Popover, { children: /* @__PURE__ */ jsx53(_Calendar, { disabled }) })
-  ] });
-};
+    );
+  }
+);
 
 // src/Inset/Inset.tsx
 import {
-  cn as cn32,
+  cn as cn33,
   paddingSpace as paddingSpace2,
   paddingSpaceX as paddingSpaceX2,
   paddingSpaceY as paddingSpaceY2
@@ -2045,7 +2068,7 @@ import { jsx as jsx54 } from "react/jsx-runtime";
 var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx54(
   "div",
   {
-    className: cn32(
+    className: cn33(
       space && paddingSpace2[space],
       !space && spaceX && paddingSpaceX2[spaceX],
       !space && spaceY && paddingSpaceY2[spaceY]
@@ -2057,11 +2080,11 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx54(
 // src/Link/Link.tsx
 import { forwardRef as forwardRef14 } from "react";
 import { Link } from "react-aria-components";
-import { useClassNames as useClassNames30 } from "@marigold/system";
+import { useClassNames as useClassNames31 } from "@marigold/system";
 import { jsx as jsx55 } from "react/jsx-runtime";
 var _Link = forwardRef14(
   ({ variant, size, disabled, children, ...props }, ref) => {
-    const classNames2 = useClassNames30({
+    const classNames2 = useClassNames31({
       component: "Link",
       variant,
       size
@@ -2071,12 +2094,12 @@ var _Link = forwardRef14(
 );
 
 // src/List/List.tsx
-import { useClassNames as useClassNames31 } from "@marigold/system";
+import { useClassNames as useClassNames32 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext5, useContext as useContext11 } from "react";
+import { createContext as createContext5, useContext as useContext12 } from "react";
 var ListContext = createContext5({});
-var useListContext = () => useContext11(ListContext);
+var useListContext = () => useContext12(ListContext);
 
 // src/List/ListItem.tsx
 import { jsx as jsx56 } from "react/jsx-runtime";
@@ -2095,30 +2118,30 @@ var List = ({
   ...props
 }) => {
   const Component = as;
-  const classNames2 = useClassNames31({ component: "List", variant, size });
+  const classNames2 = useClassNames32({ component: "List", variant, size });
   return /* @__PURE__ */ jsx57(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx57(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
 import { Menu, MenuTrigger } from "react-aria-components";
-import { useClassNames as useClassNames34 } from "@marigold/system";
+import { useClassNames as useClassNames35 } from "@marigold/system";
 
 // src/Menu/MenuItem.tsx
 import { MenuItem } from "react-aria-components";
-import { useClassNames as useClassNames32 } from "@marigold/system";
+import { useClassNames as useClassNames33 } from "@marigold/system";
 import { jsx as jsx58 } from "react/jsx-runtime";
 var _MenuItem = ({ children, ...props }) => {
-  const classNames2 = useClassNames32({ component: "Menu" });
+  const classNames2 = useClassNames33({ component: "Menu" });
   return /* @__PURE__ */ jsx58(MenuItem, { ...props, className: classNames2.item, children });
 };
 
 // src/Menu/MenuSection.tsx
 import { Section as Section2 } from "react-aria-components";
-import { useClassNames as useClassNames33 } from "@marigold/system";
+import { useClassNames as useClassNames34 } from "@marigold/system";
 import { jsx as jsx59, jsxs as jsxs21 } from "react/jsx-runtime";
 var _MenuSection = ({ children, title, ...props }) => {
-  const className = useClassNames33({ component: "Menu" });
+  const className = useClassNames34({ component: "Menu" });
   return /* @__PURE__ */ jsxs21(Section2, { ...props, children: [
     /* @__PURE__ */ jsx59(_Header, { className: className.section, children: title }),
     children
@@ -2137,7 +2160,7 @@ var _Menu = ({
   placement,
   ...props
 }) => {
-  const classNames2 = useClassNames34({ component: "Menu", variant, size });
+  const classNames2 = useClassNames35({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs22(MenuTrigger, { ...props, children: [
     /* @__PURE__ */ jsx60(_Button, { variant: "menu", disabled, children: label }),
     /* @__PURE__ */ jsx60(_Popover, { open, placement, children: /* @__PURE__ */ jsx60(Menu, { ...props, className: classNames2.container, children }) })
@@ -2148,7 +2171,7 @@ _Menu.Section = _MenuSection;
 
 // src/Menu/ActionMenu.tsx
 import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
-import { SVG as SVG4, useClassNames as useClassNames35 } from "@marigold/system";
+import { SVG as SVG4, useClassNames as useClassNames36 } from "@marigold/system";
 import { jsx as jsx61, jsxs as jsxs23 } from "react/jsx-runtime";
 var ActionMenu = ({
   variant,
@@ -2156,7 +2179,7 @@ var ActionMenu = ({
   disabled,
   ...props
 }) => {
-  const classNames2 = useClassNames35({ component: "Menu", variant, size });
+  const classNames2 = useClassNames36({ component: "Menu", variant, size });
   return /* @__PURE__ */ jsxs23(MenuTrigger2, { children: [
     /* @__PURE__ */ jsx61(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx61(SVG4, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx61("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
     /* @__PURE__ */ jsx61(_Popover, { children: /* @__PURE__ */ jsx61(Menu2, { ...props, className: classNames2.container, children: props.children }) })
@@ -2164,29 +2187,29 @@ var ActionMenu = ({
 };
 
 // src/SectionMessage/SectionMessage.tsx
-import { cn as cn35, useClassNames as useClassNames36 } from "@marigold/system";
+import { cn as cn36, useClassNames as useClassNames37 } from "@marigold/system";
 
 // src/SectionMessage/Context.tsx
-import { createContext as createContext6, useContext as useContext12 } from "react";
+import { createContext as createContext6, useContext as useContext13 } from "react";
 var SectionMessageContext = createContext6({});
-var useSectionMessageContext = () => useContext12(SectionMessageContext);
+var useSectionMessageContext = () => useContext13(SectionMessageContext);
 
 // src/SectionMessage/SectionMessageContent.tsx
-import { cn as cn33 } from "@marigold/system";
+import { cn as cn34 } from "@marigold/system";
 import { jsx as jsx62 } from "react/jsx-runtime";
 var SectionMessageContent = ({
   children
 }) => {
   const { classNames: classNames2 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx62("div", { className: cn33("[grid-area:content]", classNames2.content), children });
+  return /* @__PURE__ */ jsx62("div", { className: cn34("[grid-area:content]", classNames2.content), children });
 };
 
 // src/SectionMessage/SectionMessageTitle.tsx
-import { cn as cn34 } from "@marigold/system";
+import { cn as cn35 } from "@marigold/system";
 import { jsx as jsx63 } from "react/jsx-runtime";
 var SectionMessageTitle = ({ children }) => {
   const { classNames: classNames2 } = useSectionMessageContext();
-  return /* @__PURE__ */ jsx63("div", { className: cn34("[grid-area:title]", classNames2.title), children });
+  return /* @__PURE__ */ jsx63("div", { className: cn35("[grid-area:title]", classNames2.title), children });
 };
 
 // src/SectionMessage/SectionMessage.tsx
@@ -2263,7 +2286,7 @@ var SectionMessage = ({
   children,
   ...props
 }) => {
-  const classNames2 = useClassNames36({
+  const classNames2 = useClassNames37({
     component: "SectionMessage",
     variant,
     size
@@ -2274,12 +2297,12 @@ var SectionMessage = ({
     {
       role: variant === "error" ? "alert" : void 0,
       ...props,
-      className: cn35("grid auto-rows-min", classNames2.container),
+      className: cn36("grid auto-rows-min", classNames2.container),
       children: [
         /* @__PURE__ */ jsx64(
           "div",
           {
-            className: cn35(
+            className: cn36(
               "h-5 w-5 self-center [grid-area:icon]",
               classNames2.icon
             ),
@@ -2300,11 +2323,11 @@ import { useListData as useListData2 } from "@react-stately/data";
 
 // src/TagGroup/Tag.tsx
 import { Button as Button4, Tag } from "react-aria-components";
-import { cn as cn36, useClassNames as useClassNames38 } from "@marigold/system";
+import { cn as cn37, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/TagGroup/TagGroup.tsx
 import { TagGroup, TagList } from "react-aria-components";
-import { useClassNames as useClassNames37 } from "@marigold/system";
+import { useClassNames as useClassNames38 } from "@marigold/system";
 import { jsx as jsx65 } from "react/jsx-runtime";
 var _TagGroup = ({
   width,
@@ -2315,7 +2338,7 @@ var _TagGroup = ({
   size,
   ...rest
 }) => {
-  const classNames2 = useClassNames37({ component: "Tag", variant, size });
+  const classNames2 = useClassNames38({ component: "Tag", variant, size });
   return /* @__PURE__ */ jsx65(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx65(
     TagList,
     {
@@ -2334,19 +2357,19 @@ var CloseButton2 = ({ className }) => {
 };
 var _Tag = ({ variant, size, children, ...props }) => {
   let textValue = typeof children === "string" ? children : void 0;
-  const classNames2 = useClassNames38({ component: "Tag", variant, size });
+  const classNames2 = useClassNames39({ component: "Tag", variant, size });
   return /* @__PURE__ */ jsx66(
     Tag,
     {
       textValue,
       ...props,
-      className: cn36("data-[selection-mode]:cursor-pointer", classNames2.tag),
+      className: cn37("data-[selection-mode]:cursor-pointer", classNames2.tag),
       children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs25(Fragment6, { children: [
         children,
         allowsRemoving && /* @__PURE__ */ jsx66(
           CloseButton2,
           {
-            className: cn36("flex items-center", classNames2.closeButton)
+            className: cn37("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -2425,11 +2448,11 @@ Multiselect.Item = Item2;
 // src/NumberField/NumberField.tsx
 import { forwardRef as forwardRef15 } from "react";
 import { Group as Group2, NumberField } from "react-aria-components";
-import { cn as cn38, useClassNames as useClassNames39 } from "@marigold/system";
+import { cn as cn39, useClassNames as useClassNames40 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
 import { Button as Button5 } from "react-aria-components";
-import { cn as cn37 } from "@marigold/system";
+import { cn as cn38 } from "@marigold/system";
 import { jsx as jsx68 } from "react/jsx-runtime";
 var Plus = () => /* @__PURE__ */ jsx68("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx68(
   "path",
@@ -2452,7 +2475,7 @@ var _StepButton = ({ direction, className, ...props }) => {
   return /* @__PURE__ */ jsx68(
     Button5,
     {
-      className: cn37(
+      className: cn38(
         [
           "flex items-center justify-center",
           "cursor-pointer data-[disabled]:cursor-not-allowed"
@@ -2478,7 +2501,7 @@ var _NumberField = forwardRef15(
     hideStepper,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames39({
+    const classNames2 = useClassNames40({
       component: "NumberField",
       size,
       variant
@@ -2491,7 +2514,7 @@ var _NumberField = forwardRef15(
       ...rest
     };
     const showStepper = !hideStepper;
-    return /* @__PURE__ */ jsx69(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group2, { className: cn38("flex items-stretch", classNames2.group), children: [
+    return /* @__PURE__ */ jsx69(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs27(Group2, { className: cn39("flex items-stretch", classNames2.group), children: [
       showStepper && /* @__PURE__ */ jsx69(
         _StepButton,
         {
@@ -2526,18 +2549,18 @@ import {
   forwardRef as forwardRef16
 } from "react";
 import { Radio } from "react-aria-components";
-import { cn as cn40, useClassNames as useClassNames41 } from "@marigold/system";
+import { cn as cn41, useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext7, useContext as useContext13 } from "react";
+import { createContext as createContext7, useContext as useContext14 } from "react";
 var RadioGroupContext = createContext7(
   null
 );
-var useRadioGroupContext = () => useContext13(RadioGroupContext);
+var useRadioGroupContext = () => useContext14(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
 import { RadioGroup } from "react-aria-components";
-import { cn as cn39, useClassNames as useClassNames40 } from "@marigold/system";
+import { cn as cn40, useClassNames as useClassNames41 } from "@marigold/system";
 import { jsx as jsx70 } from "react/jsx-runtime";
 var _RadioGroup = ({
   variant,
@@ -2554,7 +2577,7 @@ var _RadioGroup = ({
   width,
   ...rest
 }) => {
-  const classNames2 = useClassNames40({ component: "Radio", variant, size });
+  const classNames2 = useClassNames41({ component: "Radio", variant, size });
   const props = {
     isDisabled: disabled,
     isReadOnly: readOnly,
@@ -2579,7 +2602,7 @@ var _RadioGroup = ({
           role: "presentation",
           "data-testid": "group",
           "data-orientation": orientation,
-          className: cn39(
+          className: cn40(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
@@ -2597,7 +2620,7 @@ var Dot = () => /* @__PURE__ */ jsx71("svg", { viewBox: "0 0 6 6", children: /*
 var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx71(
   "div",
   {
-    className: cn40(
+    className: cn41(
       "bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
       className
     ),
@@ -2609,7 +2632,7 @@ var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx71(
 var _Radio = forwardRef16(
   ({ value, disabled, width, children, ...props }, ref) => {
     const { variant, size, width: groupWidth } = useRadioGroupContext();
-    const classNames2 = useClassNames41({
+    const classNames2 = useClassNames42({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
@@ -2618,7 +2641,7 @@ var _Radio = forwardRef16(
       Radio,
       {
         ref,
-        className: cn40(
+        className: cn41(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
@@ -2632,7 +2655,7 @@ var _Radio = forwardRef16(
             Icon3,
             {
               checked: isSelected,
-              className: cn40(
+              className: cn41(
                 disabled ? "cursor-not-allowed" : "cursor-pointer",
                 classNames2.radio
               )
@@ -2676,7 +2699,7 @@ import {
   Select,
   SelectValue
 } from "react-aria-components";
-import { cn as cn41, useClassNames as useClassNames42 } from "@marigold/system";
+import { cn as cn42, useClassNames as useClassNames43 } from "@marigold/system";
 import { jsx as jsx73, jsxs as jsxs29 } from "react/jsx-runtime";
 var _Select = forwardRef18(
   ({
@@ -2698,12 +2721,12 @@ var _Select = forwardRef18(
       onSelectionChange: onChange,
       ...rest
     };
-    const classNames2 = useClassNames42({ component: "Select", variant, size });
+    const classNames2 = useClassNames43({ component: "Select", variant, size });
     return /* @__PURE__ */ jsxs29(FieldBase, { isOpen: true, as: Select, ref, ...props, children: [
       /* @__PURE__ */ jsxs29(
         Button6,
         {
-          className: cn41(
+          className: cn42(
             "flex w-full items-center justify-between gap-1 overflow-hidden",
             classNames2.select
           ),
@@ -2725,19 +2748,19 @@ import {
   forwardRef as forwardRef20
 } from "react";
 import { GridList as SelectList } from "react-aria-components";
-import { cn as cn43, useClassNames as useClassNames43 } from "@marigold/system";
+import { cn as cn44, useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/SelectList/Context.ts
-import { createContext as createContext8, useContext as useContext14 } from "react";
+import { createContext as createContext8, useContext as useContext15 } from "react";
 var SelectListContext = createContext8(
   {}
 );
-var useSelectListContext = () => useContext14(SelectListContext);
+var useSelectListContext = () => useContext15(SelectListContext);
 
 // src/SelectList/SelectListItem.tsx
 import { forwardRef as forwardRef19 } from "react";
 import { GridListItem as SelectListItem } from "react-aria-components";
-import { cn as cn42 } from "@marigold/system";
+import { cn as cn43 } from "@marigold/system";
 import { Fragment as Fragment8, jsx as jsx74, jsxs as jsxs30 } from "react/jsx-runtime";
 var _SelectListItem = forwardRef19(
   ({ children, ...props }, ref) => {
@@ -2748,7 +2771,7 @@ var _SelectListItem = forwardRef19(
       {
         textValue,
         ...props,
-        className: cn42("flex items-center", classNames2 == null ? void 0 : classNames2.option),
+        className: cn43("flex items-center", classNames2 == null ? void 0 : classNames2.option),
         ref,
         children: ({ selectionMode }) => /* @__PURE__ */ jsxs30(Fragment8, { children: [
           selectionMode === "multiple" && /* @__PURE__ */ jsx74(FieldGroup, { children: /* @__PURE__ */ jsx74(_Checkbox, { slot: "selection" }) }),
@@ -2763,7 +2786,7 @@ var _SelectListItem = forwardRef19(
 import { jsx as jsx75 } from "react/jsx-runtime";
 var _SelectList = forwardRef20(
   ({ onChange, ...rest }, ref) => {
-    const classNames2 = useClassNames43({ component: "ListBox" });
+    const classNames2 = useClassNames44({ component: "ListBox" });
     const props = {
       onSelectionChange: onChange,
       ...rest
@@ -2773,7 +2796,7 @@ var _SelectList = forwardRef20(
       {
         ...props,
         ref,
-        className: cn43(
+        className: cn44(
           "overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
           classNames2.list
         ),
@@ -2785,7 +2808,7 @@ var _SelectList = forwardRef20(
 _SelectList.Item = _SelectListItem;
 
 // src/Scrollable/Scrollable.tsx
-import { cn as cn44, createVar as createVar10, width as twWidth2 } from "@marigold/system";
+import { cn as cn45, createVar as createVar10, width as twWidth2 } from "@marigold/system";
 import { jsx as jsx76 } from "react/jsx-runtime";
 var Scrollable = ({
   children,
@@ -2796,7 +2819,7 @@ var Scrollable = ({
   "div",
   {
     ...props,
-    className: cn44(["sticky h-[--height] overflow-auto", twWidth2[width]]),
+    className: cn45(["sticky h-[--height] overflow-auto", twWidth2[width]]),
     style: createVar10({ height }),
     children
   }
@@ -2811,9 +2834,9 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn45,
+  cn as cn46,
   width as twWidth3,
-  useClassNames as useClassNames44
+  useClassNames as useClassNames45
 } from "@marigold/system";
 import { jsx as jsx77, jsxs as jsxs31 } from "react/jsx-runtime";
 var _Slider = forwardRef21(
@@ -2825,7 +2848,7 @@ var _Slider = forwardRef21(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames44({
+    const classNames2 = useClassNames45({
       component: "Slider",
       variant,
       size
@@ -2837,7 +2860,7 @@ var _Slider = forwardRef21(
     return /* @__PURE__ */ jsxs31(
       Slider,
       {
-        className: cn45(
+        className: cn46(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
           twWidth3[width]
@@ -2846,15 +2869,15 @@ var _Slider = forwardRef21(
         ...props,
         children: [
           /* @__PURE__ */ jsx77(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx77(SliderOutput, { className: cn45("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx77(SliderOutput, { className: cn46("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
           /* @__PURE__ */ jsx77(
             SliderTrack,
             {
-              className: cn45("relative col-span-2 h-2 w-full", classNames2.track),
+              className: cn46("relative col-span-2 h-2 w-full", classNames2.track),
               children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx77(
                 SliderThumb,
                 {
-                  className: cn45("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn46("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -2875,7 +2898,7 @@ var Split = (props) => /* @__PURE__ */ jsx78("div", { ...props, role: "separator
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn46,
+  cn as cn47,
   gapSpace as gapSpace7
 } from "@marigold/system";
 import { jsx as jsx79 } from "react/jsx-runtime";
@@ -2891,7 +2914,7 @@ var Stack = ({
   return /* @__PURE__ */ jsx79(
     "div",
     {
-      className: cn46(
+      className: cn47(
         "flex flex-col",
         gapSpace7[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -2908,9 +2931,9 @@ var Stack = ({
 import { forwardRef as forwardRef22 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn47,
+  cn as cn48,
   width as twWidth4,
-  useClassNames as useClassNames45
+  useClassNames as useClassNames46
 } from "@marigold/system";
 import { jsx as jsx80, jsxs as jsxs32 } from "react/jsx-runtime";
 var _Switch = forwardRef22(
@@ -2924,7 +2947,7 @@ var _Switch = forwardRef22(
     readOnly,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames45({ component: "Switch", size, variant });
+    const classNames2 = useClassNames46({ component: "Switch", size, variant });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -2936,7 +2959,7 @@ var _Switch = forwardRef22(
       {
         ...props,
         ref,
-        className: cn47(
+        className: cn48(
           twWidth4[width],
           "group/switch",
           "flex items-center gap-[1ch]",
@@ -2947,14 +2970,14 @@ var _Switch = forwardRef22(
           /* @__PURE__ */ jsx80("div", { className: "relative", children: /* @__PURE__ */ jsx80(
             "div",
             {
-              className: cn47(
+              className: cn48(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
               children: /* @__PURE__ */ jsx80(
                 "div",
                 {
-                  className: cn47(
+                  className: cn48(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -2983,12 +3006,12 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn53, useClassNames as useClassNames47 } from "@marigold/system";
+import { cn as cn54, useClassNames as useClassNames48 } from "@marigold/system";
 
 // src/Table/Context.tsx
-import { createContext as createContext9, useContext as useContext15 } from "react";
+import { createContext as createContext9, useContext as useContext16 } from "react";
 var TableContext = createContext9({});
-var useTableContext = () => useContext15(TableContext);
+var useTableContext = () => useContext16(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
@@ -3003,7 +3026,7 @@ 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 cn48, useStateProps as useStateProps2 } from "@marigold/system";
+import { cn as cn49, useStateProps as useStateProps2 } from "@marigold/system";
 import { jsx as jsx82 } from "react/jsx-runtime";
 var TableCell = ({ cell, align = "left" }) => {
   const ref = useRef4(null);
@@ -3031,7 +3054,7 @@ var TableCell = ({ cell, align = "left" }) => {
     "td",
     {
       ref,
-      className: cn48(classNames2 == null ? void 0 : classNames2.cell),
+      className: cn49(classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps3(cellProps, focusProps),
       ...stateProps,
       align,
@@ -3045,7 +3068,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 cn49, useStateProps as useStateProps3 } from "@marigold/system";
+import { cn as cn50, useStateProps as useStateProps3 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3089,7 +3112,7 @@ var TableCheckboxCell = ({ cell }) => {
     "td",
     {
       ref,
-      className: cn49("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      className: cn50("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
       ...mergeProps4(gridCellProps, focusProps),
       ...stateProps,
       children: /* @__PURE__ */ jsx83(_Checkbox, { ...checkboxProps })
@@ -3104,7 +3127,7 @@ 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 cn50, useStateProps as useStateProps4 } from "@marigold/system";
+import { cn as cn51, useStateProps as useStateProps4 } from "@marigold/system";
 import { width as twWidth5 } from "@marigold/system";
 import { jsx as jsx84, jsxs as jsxs33 } from "react/jsx-runtime";
 var TableColumnHeader = ({
@@ -3133,7 +3156,7 @@ var TableColumnHeader = ({
     {
       colSpan: column.colspan,
       ref,
-      className: cn50("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      className: cn51("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps5(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -3177,13 +3200,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 cn51, useClassNames as useClassNames46, useStateProps as useStateProps5 } from "@marigold/system";
+import { cn as cn52, useClassNames as useClassNames47, useStateProps as useStateProps5 } from "@marigold/system";
 import { jsx as jsx87 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef8(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames46({
+  const classNames2 = useClassNames47({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3212,7 +3235,7 @@ var TableRow = ({ children, row }) => {
     "tr",
     {
       ref,
-      className: cn51(
+      className: cn52(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
@@ -3235,7 +3258,7 @@ import {
 } from "@react-aria/table";
 import { mergeProps as mergeProps7 } from "@react-aria/utils";
 import {
-  cn as cn52,
+  cn as cn53,
   width as twWidth6,
   useStateProps as useStateProps6
 } from "@marigold/system";
@@ -3265,7 +3288,7 @@ var TableSelectAllCell = ({
     "th",
     {
       ref,
-      className: cn52(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
+      className: cn53(twWidth6[width], ["  leading-none"], classNames2 == null ? void 0 : classNames2.header),
       ...mergeProps7(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       align,
@@ -3297,7 +3320,7 @@ var Table = ({
     state.isKeyboardNavigationDisabled = disableKeyboardNavigation;
   }
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames47({
+  const classNames2 = useClassNames48({
     component: "Table",
     variant,
     size
@@ -3311,9 +3334,9 @@ var Table = ({
         "table",
         {
           ref: tableRef,
-          className: cn53(
+          className: cn54(
             "group/table",
-            "border-collapse whitespace-nowrap",
+            "border-collapse",
             stretch ? "table w-full" : "block",
             classNames2.table
           ),
@@ -3371,7 +3394,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn54,
+  cn as cn55,
   createVar as createVar11,
   cursorStyle,
   fontWeight,
@@ -3379,7 +3402,7 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames48,
+  useClassNames as useClassNames49,
   useTheme as useTheme3
 } from "@marigold/system";
 import { jsx as jsx90 } from "react/jsx-runtime";
@@ -3396,7 +3419,7 @@ var Text2 = ({
   ...props
 }) => {
   const theme = useTheme3();
-  const classNames2 = useClassNames48({
+  const classNames2 = useClassNames49({
     component: "Text",
     variant,
     size
@@ -3405,7 +3428,7 @@ var Text2 = ({
     "p",
     {
       ...props,
-      className: cn54(
+      className: cn55(
         "text-[--color] outline-[--outline]",
         classNames2,
         fontStyle && textStyle[fontStyle],
@@ -3430,7 +3453,7 @@ var Text2 = ({
 // src/TextArea/TextArea.tsx
 import { forwardRef as forwardRef23 } from "react";
 import { TextArea, TextField } from "react-aria-components";
-import { useClassNames as useClassNames49 } from "@marigold/system";
+import { useClassNames as useClassNames50 } from "@marigold/system";
 import { jsx as jsx91 } from "react/jsx-runtime";
 var _TextArea = forwardRef23(
   ({
@@ -3443,7 +3466,7 @@ var _TextArea = forwardRef23(
     rows,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames49({ component: "TextArea", variant, size });
+    const classNames2 = useClassNames50({ component: "TextArea", variant, size });
     const props = {
       isDisabled: disabled,
       isReadOnly: readOnly,
@@ -3481,7 +3504,7 @@ var _TextField = forwardRef24(
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn55, createVar as createVar12, gapSpace as gapSpace8 } from "@marigold/system";
+import { cn as cn56, createVar as createVar12, gapSpace as gapSpace8 } from "@marigold/system";
 import { jsx as jsx93 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
@@ -3499,7 +3522,7 @@ var Tiles = ({
     "div",
     {
       ...props,
-      className: cn55(
+      className: cn56(
         "grid",
         gapSpace8[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3513,7 +3536,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { OverlayArrow, Tooltip } from "react-aria-components";
-import { cn as cn56, useClassNames as useClassNames50 } from "@marigold/system";
+import { cn as cn57, useClassNames as useClassNames51 } from "@marigold/system";
 
 // src/Tooltip/TooltipTrigger.tsx
 import { TooltipTrigger } from "react-aria-components";
@@ -3541,13 +3564,13 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
     ...rest,
     isOpen: open
   };
-  const classNames2 = useClassNames50({ component: "Tooltip", variant, size });
+  const classNames2 = useClassNames51({ component: "Tooltip", variant, size });
   const portal = usePortalContainer();
   return /* @__PURE__ */ jsxs35(
     Tooltip,
     {
       ...props,
-      className: cn56("group/tooltip", classNames2.container),
+      className: cn57("group/tooltip", classNames2.container),
       UNSTABLE_portalContainer: portal,
       children: [
         /* @__PURE__ */ jsx95(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx95("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx95("path", { d: "M0 0 L4 4 L8 0" }) }) }),
@@ -3780,16 +3803,16 @@ var XLoader = forwardRef25((props, ref) => /* @__PURE__ */ jsxs36(
 
 // src/Tabs/Tabs.tsx
 import { Tabs } from "react-aria-components";
-import { useClassNames as useClassNames51 } from "@marigold/system";
+import { useClassNames as useClassNames52 } from "@marigold/system";
 
 // src/Tabs/Context.ts
-import { createContext as createContext10, useContext as useContext16 } from "react";
+import { createContext as createContext10, useContext as useContext17 } from "react";
 var TabContext = createContext10({});
-var useTabContext = () => useContext16(TabContext);
+var useTabContext = () => useContext17(TabContext);
 
 // src/Tabs/Tab.tsx
 import { Tab } from "react-aria-components";
-import { cn as cn57 } from "@marigold/system";
+import { cn as cn58 } from "@marigold/system";
 import { jsx as jsx97 } from "react/jsx-runtime";
 var _Tab = (props) => {
   const { classNames: classNames2 } = useTabContext();
@@ -3797,7 +3820,7 @@ var _Tab = (props) => {
     Tab,
     {
       ...props,
-      className: cn57(
+      className: cn58(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
@@ -3808,7 +3831,7 @@ var _Tab = (props) => {
 
 // src/Tabs/TabList.tsx
 import { TabList } from "react-aria-components";
-import { cn as cn58, gapSpace as gapSpace9 } from "@marigold/system";
+import { cn as cn59, gapSpace as gapSpace9 } from "@marigold/system";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var _TabList = ({ space = 2, ...props }) => {
   const { classNames: classNames2 } = useTabContext();
@@ -3816,7 +3839,7 @@ var _TabList = ({ space = 2, ...props }) => {
     TabList,
     {
       ...props,
-      className: cn58("flex", gapSpace9[space], classNames2.tabsList),
+      className: cn59("flex", gapSpace9[space], classNames2.tabsList),
       children: props.children
     }
   );
@@ -3837,7 +3860,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
     isDisabled: disabled,
     ...rest
   };
-  const classNames2 = useClassNames51({
+  const classNames2 = useClassNames52({
     component: "Tabs",
     size,
     variant