@marigold/components 6.4.0 → 6.5.0

package/dist/index.mjs

@@ -224,6 +224,7 @@ var Accordion = ({ children, ...props }) => {
     state,
     ref
   );
+  delete accordionProps.onKeyDownCapture;
   return /* @__PURE__ */ jsx4("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsx4(
     AccordionItem,
     {
@@ -2921,17 +2922,10 @@ function MarigoldProvider({
 
 // src/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef13
+  forwardRef as forwardRef14
 } from "react";
-import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
-import { useHover as useHover6 } from "@react-aria/interactions";
-import { useRadio } from "@react-aria/radio";
-import { mergeProps as mergeProps14, useObjectRef as useObjectRef7 } from "@react-aria/utils";
-import {
-  cn as cn34,
-  useClassNames as useClassNames33,
-  useStateProps as useStateProps15
-} from "@marigold/system";
+import { Radio } from "react-aria-components";
+import { cn as cn36, useClassNames as useClassNames35 } from "@marigold/system";
 
 // src/Radio/Context.ts
 import { createContext as createContext7, useContext as useContext7 } from "react";
@@ -2941,63 +2935,149 @@ var RadioGroupContext = createContext7(
 var useRadioGroupContext = () => useContext7(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import { useRadioGroup } from "@react-aria/radio";
-import { useRadioGroupState } from "@react-stately/radio";
-import { cn as cn33, useClassNames as useClassNames32, useStateProps as useStateProps14 } from "@marigold/system";
-import { jsx as jsx64 } from "react/jsx-runtime";
-var RadioGroup = ({
+import { RadioGroup } from "react-aria-components";
+import { cn as cn35, useClassNames as useClassNames34 } from "@marigold/system";
+
+// src/FieldBase/_FieldBase.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { cn as cn34, width as twWidth2, useClassNames as useClassNames33 } from "@marigold/system";
+
+// src/HelpText/_HelpText.tsx
+import { Text } from "react-aria-components";
+import { cn as cn33, useClassNames as useClassNames32 } from "@marigold/system";
+import { Fragment as Fragment7, jsx as jsx64, jsxs as jsxs27 } from "react/jsx-runtime";
+var HelpText2 = ({
   variant,
   size,
-  children,
-  orientation = "vertical",
-  width,
-  required,
+  description,
+  error,
+  errorMessage,
+  ...props
+}) => {
+  const hasErrorMessage = errorMessage && error;
+  const classNames2 = useClassNames32({
+    component: "HelpText",
+    variant,
+    size
+  });
+  if (!description && !errorMessage) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx64(
+    Text,
+    {
+      ...props,
+      slot: hasErrorMessage ? "errorMessage" : "description",
+      className: cn33("flex items-center gap-1", classNames2.container),
+      children: hasErrorMessage ? /* @__PURE__ */ jsxs27(Fragment7, { children: [
+        /* @__PURE__ */ jsx64(
+          "svg",
+          {
+            className: cn33("h-4 w-4", classNames2.icon),
+            viewBox: "0 0 24 24",
+            role: "presentation",
+            children: /* @__PURE__ */ jsx64("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
+          }
+        ),
+        errorMessage
+      ] }) : description
+    }
+  );
+};
+
+// src/FieldBase/_FieldBase.tsx
+import { jsx as jsx65, jsxs as jsxs28 } from "react/jsx-runtime";
+var fixedForwardRef = forwardRef13;
+var _FieldBase = (props, ref) => {
+  const {
+    as: Component = "div",
+    children,
+    label,
+    size,
+    variant,
+    width = "full",
+    description,
+    errorMessage,
+    ...rest
+  } = props;
+  const classNames2 = useClassNames33({
+    component: "Field",
+    variant,
+    size
+  });
+  return /* @__PURE__ */ jsxs28(
+    Component,
+    {
+      ref,
+      className: cn34("group/field", twWidth2[width], classNames2),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx65(_Label, { variant, size, children: label }),
+        children,
+        /* @__PURE__ */ jsx65(
+          HelpText2,
+          {
+            variant,
+            size,
+            description,
+            errorMessage,
+            error: props.isInvalid
+          }
+        )
+      ]
+    }
+  );
+};
+var FieldBase2 = fixedForwardRef(_FieldBase);
+
+// src/Radio/RadioGroup.tsx
+import { jsx as jsx66 } from "react/jsx-runtime";
+var _RadioGroup = ({
+  variant,
+  size,
+  label,
+  error,
   disabled,
+  required,
   readOnly,
-  error,
+  description,
+  errorMessage,
+  orientation = "vertical",
+  children,
+  width,
   ...rest
 }) => {
+  const classNames2 = useClassNames34({ component: "Radio", variant, size });
   const props = {
-    isRequired: required,
     isDisabled: disabled,
     isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid",
+    isRequired: required,
+    isInvalid: error,
     ...rest
   };
-  const state = useRadioGroupState(props);
-  const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup(props, state);
-  const classNames2 = useClassNames32({ component: "Radio", variant, size });
-  const stateProps = useStateProps14({
-    disabled,
-    readOnly,
-    error,
-    required
-  });
-  return /* @__PURE__ */ jsx64(
-    FieldBase,
+  return /* @__PURE__ */ jsx66(
+    FieldBase2,
     {
+      as: RadioGroup,
       width,
-      label: props.label,
-      labelProps: { elementType: "span", ...labelProps },
-      description: props.description,
-      descriptionProps,
-      error,
-      errorMessage: props.errorMessage,
-      errorMessageProps,
-      disabled,
-      stateProps,
-      ...radioGroupProps,
-      children: /* @__PURE__ */ jsx64(
+      label,
+      description,
+      errorMessage,
+      variant,
+      size,
+      ...props,
+      children: /* @__PURE__ */ jsx66(
         "div",
         {
           role: "presentation",
+          "data-testid": "group",
           "data-orientation": orientation,
-          className: cn33(
+          className: cn35(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ jsx64(RadioGroupContext.Provider, { value: { width, error, state }, children })
+          children: /* @__PURE__ */ jsx66(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -3005,83 +3085,62 @@ var RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-import { jsx as jsx65, jsxs as jsxs27 } from "react/jsx-runtime";
-var Dot = () => /* @__PURE__ */ jsx65("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx65("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx65(
+import { Fragment as Fragment8, jsx as jsx67, jsxs as jsxs29 } 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 Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx67(
   "div",
   {
-    className: cn34(
+    className: cn36(
       "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__ */ jsx65(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ jsx67(Dot, {}) : null
   }
 );
-var Radio = forwardRef13(
-  ({ width, disabled, ...props }, ref) => {
-    const {
-      variant,
-      size,
-      error,
-      width: groupWidth,
-      state
-    } = useRadioGroupContext();
-    const inputRef = useObjectRef7(ref);
-    const { inputProps } = useRadio(
-      { isDisabled: disabled, ...props },
-      state,
-      inputRef
-    );
-    const classNames2 = useClassNames33({
+var _Radio = forwardRef14(
+  ({ value, disabled, width, children, ...props }, ref) => {
+    const { variant, size, width: groupWidth } = useRadioGroupContext();
+    const classNames2 = useClassNames35({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    const { hoverProps, isHovered } = useHover6({ isDisabled: disabled });
-    const { isFocusVisible, focusProps } = useFocusRing8();
-    const stateProps = useStateProps15({
-      hover: isHovered,
-      focus: isFocusVisible,
-      checked: inputProps.checked,
-      disabled: inputProps.disabled,
-      readOnly: props.readOnly,
-      error
-    });
-    return /* @__PURE__ */ jsxs27(
-      "label",
+    return /* @__PURE__ */ jsx67(
+      Radio,
       {
-        className: cn34(
+        ref,
+        className: cn36(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
           classNames2.container
         ),
-        ...mergeProps14(hoverProps, stateProps),
-        children: [
-          /* @__PURE__ */ jsx65(
-            "input",
+        value,
+        isDisabled: disabled,
+        ...props,
+        children: ({ isSelected }) => /* @__PURE__ */ jsxs29(Fragment8, { children: [
+          /* @__PURE__ */ jsx67(
+            Icon2,
             {
-              ref: inputRef,
-              className: cn34(
-                "absolute left-0 top-0 z-[1] h-full w-full opacity-[0.0001]",
-                inputProps.disabled ? "cursor-not-allowed" : "cursor-pointer"
-              ),
-              ...mergeProps14(inputProps, focusProps)
+              checked: isSelected,
+              className: cn36(
+                disabled ? "cursor-not-allowed" : "cursor-pointer",
+                classNames2.radio
+              )
             }
           ),
-          /* @__PURE__ */ jsx65(Icon2, { checked: inputProps.checked, className: classNames2.radio }),
-          /* @__PURE__ */ jsx65("div", { className: classNames2.label, children: props.children })
-        ]
+          /* @__PURE__ */ jsx67("div", { className: classNames2.label, children })
+        ] })
       }
     );
   }
 );
-Radio.Group = RadioGroup;
+_Radio.Group = _RadioGroup;
 
 // src/Slider/Slider.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 import {
   Slider,
   SliderOutput,
@@ -3089,12 +3148,12 @@ import {
   SliderTrack
 } from "react-aria-components";
 import {
-  cn as cn35,
-  width as twWidth2,
-  useClassNames as useClassNames34
+  cn as cn37,
+  width as twWidth3,
+  useClassNames as useClassNames36
 } from "@marigold/system";
-import { jsx as jsx66, jsxs as jsxs28 } from "react/jsx-runtime";
-var _Slider = forwardRef14(
+import { jsx as jsx68, jsxs as jsxs30 } from "react/jsx-runtime";
+var _Slider = forwardRef15(
   ({
     thumbLabels,
     variant,
@@ -3103,7 +3162,7 @@ var _Slider = forwardRef14(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = useClassNames34({
+    const classNames2 = useClassNames36({
       component: "Slider",
       variant,
       size
@@ -3112,27 +3171,27 @@ var _Slider = forwardRef14(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs30(
       Slider,
       {
-        className: cn35(
+        className: cn37(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
-          twWidth2[width]
+          twWidth3[width]
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ jsx66(_Label, { children: props.children }),
-          /* @__PURE__ */ jsx66(SliderOutput, { className: cn35("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ jsx66(
+          /* @__PURE__ */ jsx68(_Label, { children: props.children }),
+          /* @__PURE__ */ jsx68(SliderOutput, { className: cn37("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ jsx68(
             SliderTrack,
             {
-              className: cn35("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx66(
+              className: cn37("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ jsx68(
                 SliderThumb,
                 {
-                  className: cn35("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: cn37("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -3147,16 +3206,16 @@ var _Slider = forwardRef14(
 );
 
 // src/Split/Split.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
-var Split = (props) => /* @__PURE__ */ jsx67("div", { ...props, role: "separator", className: "grow" });
+import { jsx as jsx69 } from "react/jsx-runtime";
+var Split = (props) => /* @__PURE__ */ jsx69("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
 import {
   alignment as alignment3,
-  cn as cn36,
+  cn as cn38,
   gapSpace as gapSpace6
 } from "@marigold/system";
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var Stack = ({
   children,
   space = 0,
@@ -3167,10 +3226,10 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsx70(
     "div",
     {
-      className: cn36(
+      className: cn38(
         "flex flex-col",
         gapSpace6[space],
         alignX && ((_b = (_a = alignment3) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
@@ -3184,15 +3243,15 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 import { Switch } from "react-aria-components";
 import {
-  cn as cn37,
-  width as twWidth3,
-  useClassNames as useClassNames35
+  cn as cn39,
+  width as twWidth4,
+  useClassNames as useClassNames37
 } from "@marigold/system";
-import { jsx as jsx69, jsxs as jsxs29 } from "react/jsx-runtime";
-var _Switch = forwardRef15(
+import { jsx as jsx71, jsxs as jsxs31 } from "react/jsx-runtime";
+var _Switch = forwardRef16(
   ({
     variant,
     size,
@@ -3203,14 +3262,14 @@ var _Switch = forwardRef15(
     readOnly,
     ...props
   }, ref) => {
-    const classNames2 = useClassNames35({ component: "Switch", size, variant });
-    return /* @__PURE__ */ jsxs29(
+    const classNames2 = useClassNames37({ component: "Switch", size, variant });
+    return /* @__PURE__ */ jsxs31(
       Switch,
       {
         ...props,
         ref,
-        className: cn37(
-          twWidth3[width],
+        className: cn39(
+          twWidth4[width],
           "group/switch",
           "flex items-center justify-between gap-[1ch]",
           classNames2.container
@@ -3219,17 +3278,17 @@ var _Switch = forwardRef15(
         isReadOnly: readOnly,
         children: [
           children,
-          /* @__PURE__ */ jsx69("div", { className: " relative", children: /* @__PURE__ */ jsx69(
+          /* @__PURE__ */ jsx71("div", { className: " relative", children: /* @__PURE__ */ jsx71(
             "div",
             {
-              className: cn37(
+              className: cn39(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ jsx69(
+              children: /* @__PURE__ */ jsx71(
                 "div",
                 {
-                  className: cn37(
+                  className: cn39(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -3258,7 +3317,7 @@ import {
   Row,
   useTableState
 } from "@react-stately/table";
-import { cn as cn42, useClassNames as useClassNames37 } from "@marigold/system";
+import { cn as cn44, useClassNames as useClassNames39 } from "@marigold/system";
 
 // src/Table/Context.tsx
 import { createContext as createContext8, useContext as useContext8 } from "react";
@@ -3267,19 +3326,19 @@ var useTableContext = () => useContext8(TableContext);
 
 // src/Table/TableBody.tsx
 import { useTableRowGroup } from "@react-aria/table";
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ jsx70("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx72("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
 import { useRef as useRef20 } from "react";
-import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useTableCell } from "@react-aria/table";
-import { mergeProps as mergeProps15 } from "@react-aria/utils";
-import { useStateProps as useStateProps16 } from "@marigold/system";
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { mergeProps as mergeProps14 } from "@react-aria/utils";
+import { useStateProps as useStateProps14 } from "@marigold/system";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var TableCell = ({ cell }) => {
   const ref = useRef20(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
@@ -3300,14 +3359,14 @@ var TableCell = ({ cell }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = useFocusRing9();
-  const stateProps = useStateProps16({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx71(
+  const { focusProps, isFocusVisible } = useFocusRing8();
+  const stateProps = useStateProps14({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ jsx73(
     "td",
     {
       ref,
       className: classNames2 == null ? void 0 : classNames2.cell,
-      ...mergeProps15(cellProps, focusProps),
+      ...mergeProps14(cellProps, focusProps),
       ...stateProps,
       children: cell.rendered
     }
@@ -3316,10 +3375,10 @@ var TableCell = ({ cell }) => {
 
 // src/Table/TableCheckboxCell.tsx
 import { useRef as useRef21 } from "react";
-import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
-import { mergeProps as mergeProps16 } from "@react-aria/utils";
-import { cn as cn38, useStateProps as useStateProps17 } from "@marigold/system";
+import { mergeProps as mergeProps15 } from "@react-aria/utils";
+import { cn as cn40, useStateProps as useStateProps15 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3342,7 +3401,7 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var TableCheckboxCell = ({ cell }) => {
   const ref = useRef21(null);
   const { state, classNames: classNames2 } = useTableContext();
@@ -3357,30 +3416,30 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     useTableSelectionCheckbox({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = useFocusRing10();
-  const stateProps = useStateProps17({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ jsx72(
+  const { focusProps, isFocusVisible } = useFocusRing9();
+  const stateProps = useStateProps15({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ jsx74(
     "td",
     {
       ref,
-      className: cn38("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
-      ...mergeProps16(gridCellProps, focusProps),
+      className: cn40("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      ...mergeProps15(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx72(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx74(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
 import { useRef as useRef22 } from "react";
-import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
-import { useHover as useHover7 } from "@react-aria/interactions";
+import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
+import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
-import { mergeProps as mergeProps17 } from "@react-aria/utils";
+import { mergeProps as mergeProps16 } from "@react-aria/utils";
 import { SortDown, SortUp } from "@marigold/icons";
-import { cn as cn39, useStateProps as useStateProps18 } from "@marigold/system";
-import { width as twWidth4 } from "@marigold/system";
-import { jsx as jsx73, jsxs as jsxs30 } from "react/jsx-runtime";
+import { cn as cn41, useStateProps as useStateProps16 } from "@marigold/system";
+import { width as twWidth5 } from "@marigold/system";
+import { jsx as jsx75, jsxs as jsxs32 } from "react/jsx-runtime";
 var TableColumnHeader = ({
   column,
   width = "auto"
@@ -3395,23 +3454,23 @@ var TableColumnHeader = ({
     state,
     ref
   );
-  const { hoverProps, isHovered } = useHover7({});
-  const { focusProps, isFocusVisible } = useFocusRing11();
-  const stateProps = useStateProps18({
+  const { hoverProps, isHovered } = useHover6({});
+  const { focusProps, isFocusVisible } = useFocusRing10();
+  const stateProps = useStateProps16({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs32(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: cn39("cursor-default", twWidth4[width], classNames2 == null ? void 0 : classNames2.header),
-      ...mergeProps17(columnHeaderProps, hoverProps, focusProps),
+      className: cn41("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
+      ...mergeProps16(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
       children: [
         column.rendered,
-        column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx73(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx73(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx73(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__ */ jsx75(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx75(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx75(SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3419,36 +3478,36 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ jsx74("thead", { ...rowGroupProps, children });
+  return /* @__PURE__ */ jsx76("thead", { ...rowGroupProps, children });
 };
 
 // src/Table/TableHeaderRow.tsx
 import { useRef as useRef23 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
-import { jsx as jsx75 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef23(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ jsx75("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ jsx77("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
 import { useRef as useRef24 } from "react";
-import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
-import { useHover as useHover8 } from "@react-aria/interactions";
+import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
+import { useHover as useHover7 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
-import { mergeProps as mergeProps18 } from "@react-aria/utils";
-import { cn as cn40, useClassNames as useClassNames36, useStateProps as useStateProps19 } from "@marigold/system";
-import { jsx as jsx76 } from "react/jsx-runtime";
+import { mergeProps as mergeProps17 } from "@react-aria/utils";
+import { cn as cn42, useClassNames as useClassNames38, useStateProps as useStateProps17 } from "@marigold/system";
+import { jsx as jsx78 } from "react/jsx-runtime";
 var TableRow = ({ children, row }) => {
   const ref = useRef24(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = useClassNames36({
+  const classNames2 = useClassNames38({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3462,28 +3521,28 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = useFocusRing12({ within: true });
-  const { hoverProps, isHovered } = useHover8({
+  const { focusProps, isFocusVisible } = useFocusRing11({ within: true });
+  const { hoverProps, isHovered } = useHover7({
     isDisabled: disabled || !interactive
   });
-  const stateProps = useStateProps19({
+  const stateProps = useStateProps17({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsx78(
     "tr",
     {
       ref,
-      className: cn40(
+      className: cn42(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
         classNames2 == null ? void 0 : classNames2.row
       ),
-      ...mergeProps18(rowProps, focusProps, hoverProps),
+      ...mergeProps17(rowProps, focusProps, hoverProps),
       ...stateProps,
       children
     }
@@ -3492,19 +3551,19 @@ var TableRow = ({ children, row }) => {
 
 // src/Table/TableSelectAllCell.tsx
 import { useRef as useRef25 } from "react";
-import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
-import { useHover as useHover9 } from "@react-aria/interactions";
+import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
+import { useHover as useHover8 } from "@react-aria/interactions";
 import {
   useTableColumnHeader as useTableColumnHeader2,
   useTableSelectAllCheckbox
 } from "@react-aria/table";
-import { mergeProps as mergeProps19 } from "@react-aria/utils";
+import { mergeProps as mergeProps18 } from "@react-aria/utils";
 import {
-  cn as cn41,
-  width as twWidth5,
-  useStateProps as useStateProps20
+  cn as cn43,
+  width as twWidth6,
+  useStateProps as useStateProps18
 } from "@marigold/system";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var TableSelectAllCell = ({
   column,
   width = "auto"
@@ -3519,30 +3578,30 @@ var TableSelectAllCell = ({
     ref
   );
   const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
-  const { hoverProps, isHovered } = useHover9({});
-  const { focusProps, isFocusVisible } = useFocusRing13();
-  const stateProps = useStateProps20({
+  const { hoverProps, isHovered } = useHover8({});
+  const { focusProps, isFocusVisible } = useFocusRing12();
+  const stateProps = useStateProps18({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx79(
     "th",
     {
       ref,
-      className: cn41(
-        twWidth5[width],
+      className: cn43(
+        twWidth6[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
       ),
-      ...mergeProps19(columnHeaderProps, hoverProps, focusProps),
+      ...mergeProps18(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ jsx77(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ jsx79(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-import { jsx as jsx78, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs33 } from "react/jsx-runtime";
 var Table = ({
   variant,
   size,
@@ -3559,21 +3618,21 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const classNames2 = useClassNames37({
+  const classNames2 = useClassNames39({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx80(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ jsxs31(
+      children: /* @__PURE__ */ jsxs33(
         "table",
         {
           ref: tableRef,
-          className: cn42(
+          className: cn44(
             "group/table",
             "border-collapse overflow-auto whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3581,17 +3640,17 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ jsx78(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx78(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ jsx80(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx80(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx78(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx80(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
                     column
                   },
                   column.key
-                ) : /* @__PURE__ */ jsx78(
+                ) : /* @__PURE__ */ jsx80(
                   TableColumnHeader,
                   {
                     width: (_c = column.props) == null ? void 0 : _c.width,
@@ -3601,12 +3660,12 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ jsxs31(TableBody, { children: [
+            /* @__PURE__ */ jsxs33(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ jsx78(TableRow, { row, children: [...collection.getChildren(row.key)].map(
+                (row) => row.type === "item" && /* @__PURE__ */ jsx80(TableRow, { row, children: [...collection.getChildren(row.key)].map(
                   (cell) => {
                     var _a;
-                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx78(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx78(TableCell, { cell }, cell.key);
+                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx80(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx80(TableCell, { cell }, cell.key);
                   }
                 ) }, row.key)
               )
@@ -3625,7 +3684,7 @@ Table.Row = Row;
 
 // src/Text/Text.tsx
 import {
-  cn as cn43,
+  cn as cn45,
   createVar as createVar9,
   cursorStyle,
   fontWeight,
@@ -3633,11 +3692,11 @@ import {
   textAlign as textAlign2,
   textSize,
   textStyle,
-  useClassNames as useClassNames38,
+  useClassNames as useClassNames40,
   useTheme as useTheme5
 } from "@marigold/system";
-import { jsx as jsx79 } from "react/jsx-runtime";
-var Text = ({
+import { jsx as jsx81 } from "react/jsx-runtime";
+var Text2 = ({
   variant,
   size,
   color,
@@ -3650,16 +3709,16 @@ var Text = ({
   ...props
 }) => {
   const theme = useTheme5();
-  const classNames2 = useClassNames38({
+  const classNames2 = useClassNames40({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsx81(
     "p",
     {
       ...props,
-      className: cn43(
+      className: cn45(
         classNames2,
         "text-[--color] outline-[--outline]",
         fontStyle && textStyle[fontStyle],
@@ -3682,14 +3741,14 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import { forwardRef as forwardRef16 } from "react";
-import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
-import { useHover as useHover10 } from "@react-aria/interactions";
+import { forwardRef as forwardRef17 } from "react";
+import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
+import { useHover as useHover9 } from "@react-aria/interactions";
 import { useTextField } from "@react-aria/textfield";
-import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
-import { useClassNames as useClassNames39, useStateProps as useStateProps21 } from "@marigold/system";
-import { jsx as jsx80 } from "react/jsx-runtime";
-var TextArea = forwardRef16(
+import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
+import { useClassNames as useClassNames41, useStateProps as useStateProps19 } from "@marigold/system";
+import { jsx as jsx82 } from "react/jsx-runtime";
+var TextArea = forwardRef17(
   ({
     variant,
     size,
@@ -3702,7 +3761,7 @@ var TextArea = forwardRef16(
     ...props
   }, ref) => {
     const { label, description, errorMessage } = props;
-    const textAreaRef = useObjectRef8(ref);
+    const textAreaRef = useObjectRef7(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
       {
         inputElementType: "textarea",
@@ -3714,9 +3773,9 @@ var TextArea = forwardRef16(
       },
       textAreaRef
     );
-    const { hoverProps, isHovered } = useHover10({});
-    const { focusProps, isFocusVisible } = useFocusRing14();
-    const stateProps = useStateProps21({
+    const { hoverProps, isHovered } = useHover9({});
+    const { focusProps, isFocusVisible } = useFocusRing13();
+    const stateProps = useStateProps19({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
@@ -3724,8 +3783,8 @@ var TextArea = forwardRef16(
       required,
       error
     });
-    const classNames2 = useClassNames39({ component: "TextArea", variant, size });
-    return /* @__PURE__ */ jsx80(
+    const classNames2 = useClassNames41({ component: "TextArea", variant, size });
+    return /* @__PURE__ */ jsx82(
       FieldBase,
       {
         label,
@@ -3739,7 +3798,7 @@ var TextArea = forwardRef16(
         variant,
         size,
         width,
-        children: /* @__PURE__ */ jsx80(
+        children: /* @__PURE__ */ jsx82(
           "textarea",
           {
             className: classNames2,
@@ -3756,17 +3815,17 @@ var TextArea = forwardRef16(
 );
 
 // src/TextField/TextField.tsx
-import { forwardRef as forwardRef17 } from "react";
-import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
-import { useHover as useHover11 } from "@react-aria/interactions";
+import { forwardRef as forwardRef18 } from "react";
+import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
+import { useHover as useHover10 } from "@react-aria/interactions";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
-import { mergeProps as mergeProps20, useObjectRef as useObjectRef9 } from "@react-aria/utils";
-import { useStateProps as useStateProps22 } from "@marigold/system";
-import { jsx as jsx81 } from "react/jsx-runtime";
-var TextField = forwardRef17(
+import { mergeProps as mergeProps19, useObjectRef as useObjectRef8 } from "@react-aria/utils";
+import { useStateProps as useStateProps20 } from "@marigold/system";
+import { jsx as jsx83 } from "react/jsx-runtime";
+var TextField = forwardRef18(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = useObjectRef9(ref);
+    const inputRef = useObjectRef8(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField2(
       {
         isDisabled: disabled,
@@ -3777,12 +3836,12 @@ var TextField = forwardRef17(
       },
       inputRef
     );
-    const { hoverProps, isHovered } = useHover11({});
-    const { focusProps, isFocused } = useFocusRing15({
+    const { hoverProps, isHovered } = useHover10({});
+    const { focusProps, isFocused } = useFocusRing14({
       isTextInput: true,
       autoFocus
     });
-    const stateProps = useStateProps22({
+    const stateProps = useStateProps20({
       hover: isHovered,
       focus: isFocused,
       disabled,
@@ -3790,7 +3849,7 @@ var TextField = forwardRef17(
       readOnly,
       required
     });
-    return /* @__PURE__ */ jsx81(
+    return /* @__PURE__ */ jsx83(
       FieldBase,
       {
         label,
@@ -3804,13 +3863,13 @@ var TextField = forwardRef17(
         variant,
         size,
         width,
-        children: /* @__PURE__ */ jsx81(
+        children: /* @__PURE__ */ jsx83(
           Input,
           {
             ref: inputRef,
             variant,
             size,
-            ...mergeProps20(focusProps, inputProps, hoverProps)
+            ...mergeProps19(focusProps, inputProps, hoverProps)
           }
         )
       }
@@ -3819,8 +3878,8 @@ var TextField = forwardRef17(
 );
 
 // src/Tiles/Tiles.tsx
-import { cn as cn44, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
-import { jsx as jsx82 } from "react/jsx-runtime";
+import { cn as cn46, createVar as createVar10, gapSpace as gapSpace7 } from "@marigold/system";
+import { jsx as jsx84 } from "react/jsx-runtime";
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3833,11 +3892,11 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx84(
     "div",
     {
       ...props,
-      className: cn44(
+      className: cn46(
         "grid",
         gapSpace7[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
@@ -3851,7 +3910,7 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 import { useTooltip } from "@react-aria/tooltip";
-import { cn as cn45, useClassNames as useClassNames40 } from "@marigold/system";
+import { cn as cn47, useClassNames as useClassNames42 } from "@marigold/system";
 
 // src/Tooltip/Context.ts
 import { createContext as createContext9, useContext as useContext9 } from "react";
@@ -3864,7 +3923,7 @@ import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
 import { useTooltipTriggerState } from "@react-stately/tooltip";
-import { jsx as jsx83, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
 var TooltipTrigger = ({
   disabled,
   open,
@@ -3901,9 +3960,9 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ jsxs32(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps, children: [
+  return /* @__PURE__ */ jsxs34(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps, children: [
     tooltipTrigger,
-    /* @__PURE__ */ jsx83(
+    /* @__PURE__ */ jsx85(
       TooltipContext.Provider,
       {
         value: {
@@ -3914,33 +3973,33 @@ var TooltipTrigger = ({
           ...tooltipProps,
           ...positionProps
         },
-        children: /* @__PURE__ */ jsx83(Overlay, { open: state.isOpen, children: tooltip })
+        children: /* @__PURE__ */ jsx85(Overlay, { open: state.isOpen, children: tooltip })
       }
     )
   ] });
 };
 
 // src/Tooltip/Tooltip.tsx
-import { jsx as jsx84, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs35 } from "react/jsx-runtime";
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = useTooltip({}, state);
-  const classNames2 = useClassNames40({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ jsxs33(
+  const classNames2 = useClassNames42({ component: "Tooltip", variant, size });
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       ...tooltipProps,
       ...rest,
       ref: overlayRef,
-      className: cn45("group/tooltip", classNames2.container),
+      className: cn47("group/tooltip", classNames2.container),
       "data-placement": placement,
       children: [
-        /* @__PURE__ */ jsx84("div", { children }),
-        /* @__PURE__ */ jsx84(
+        /* @__PURE__ */ jsx86("div", { children }),
+        /* @__PURE__ */ jsx86(
           "div",
           {
             ...arrowProps,
-            className: cn45("absolute h-0 w-0", classNames2.arrow)
+            className: cn47("absolute h-0 w-0", classNames2.arrow)
           }
         )
       ]
@@ -3956,20 +4015,20 @@ import { Item as Item6 } from "@react-stately/collections";
 import { useRef as useRef29 } from "react";
 import { useTagGroup } from "@react-aria/tag";
 import { useListState } from "@react-stately/list";
-import { useStateProps as useStateProps23 } from "@marigold/system";
+import { useStateProps as useStateProps21 } from "@marigold/system";
 
 // src/TagGroup/Tag.tsx
 import React3, { useRef as useRef28 } from "react";
 import { useButton as useButton6 } from "@react-aria/button";
-import { useFocusRing as useFocusRing16 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useTag } from "@react-aria/tag";
-import { mergeProps as mergeProps21 } from "@react-aria/utils";
-import { cn as cn46, useClassNames as useClassNames41 } from "@marigold/system";
-import { jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
+import { mergeProps as mergeProps20 } from "@react-aria/utils";
+import { cn as cn48, useClassNames as useClassNames43 } from "@marigold/system";
+import { jsx as jsx87, jsxs as jsxs36 } from "react/jsx-runtime";
 var CloseButton2 = ({ className, ...props }) => {
   const ref = useRef28(null);
   const { buttonProps } = useButton6({ ...props }, ref);
-  return /* @__PURE__ */ jsx85("button", { className, ...buttonProps, children: /* @__PURE__ */ jsx85("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx85("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
+  return /* @__PURE__ */ jsx87("button", { className, ...buttonProps, children: /* @__PURE__ */ jsx87("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx87("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var Tag = ({ variant, size, item, state, ...rest }) => {
   const props = {
@@ -3977,7 +4036,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     ...rest
   };
   let ref = React3.useRef(null);
-  let { focusProps } = useFocusRing16({ within: true });
+  let { focusProps } = useFocusRing15({ within: true });
   const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = useTag(
     {
       ...props,
@@ -3986,20 +4045,20 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     state,
     ref
   );
-  const classNames2 = useClassNames41({ component: "Tag", variant, size });
-  return /* @__PURE__ */ jsx85(
+  const classNames2 = useClassNames43({ component: "Tag", variant, size });
+  return /* @__PURE__ */ jsx87(
     "span",
     {
       ref,
-      ...mergeProps21(rowProps, focusProps),
+      ...mergeProps20(rowProps, focusProps),
       className: classNames2.tag,
-      children: /* @__PURE__ */ jsxs34("div", { ...gridCellProps, className: classNames2.gridCell, children: [
-        /* @__PURE__ */ jsx85("span", { children: item.rendered }),
-        allowsRemoving && /* @__PURE__ */ jsx85(
+      children: /* @__PURE__ */ jsxs36("div", { ...gridCellProps, className: classNames2.gridCell, children: [
+        /* @__PURE__ */ jsx87("span", { children: item.rendered }),
+        allowsRemoving && /* @__PURE__ */ jsx87(
           CloseButton2,
           {
             ...removeButtonProps,
-            className: cn46("flex items-center", classNames2.closeButton)
+            className: cn48("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -4008,7 +4067,7 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
 };
 
 // src/TagGroup/TagGroup.tsx
-import { jsx as jsx86 } from "react/jsx-runtime";
+import { jsx as jsx88 } from "react/jsx-runtime";
 import { createElement } from "react";
 var TagGroup = ({
   width,
@@ -4025,11 +4084,11 @@ var TagGroup = ({
   const inputRef = useRef29(null);
   const state = useListState(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = useTagGroup(props, state, inputRef);
-  const stateProps = useStateProps23({
+  const stateProps = useStateProps21({
     error,
     required
   });
-  return /* @__PURE__ */ jsx86(
+  return /* @__PURE__ */ jsx88(
     FieldBase,
     {
       width,
@@ -4042,7 +4101,7 @@ var TagGroup = ({
       errorMessageProps,
       stateProps,
       ...gridProps,
-      children: /* @__PURE__ */ jsx86(
+      children: /* @__PURE__ */ jsx88(
         "div",
         {
           role: "presentation",
@@ -4074,10 +4133,10 @@ Tag2.Group = TagGroup;
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/XLoader/XLoader.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { SVG as SVG6 } from "@marigold/system";
-import { jsx as jsx87, jsxs as jsxs35 } from "react/jsx-runtime";
-var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
+import { jsx as jsx89, jsxs as jsxs37 } from "react/jsx-runtime";
+var XLoader = forwardRef19((props, ref) => /* @__PURE__ */ jsxs37(
   SVG6,
   {
     id: "XLoader",
@@ -4087,13 +4146,13 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ jsx87("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx89("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ jsx89(
         "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__ */ jsx87(
+          children: /* @__PURE__ */ jsx89(
             "animate",
             {
               attributeName: "opacity",
@@ -4106,12 +4165,12 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx89(
         "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__ */ jsx87(
+          children: /* @__PURE__ */ jsx89(
             "animate",
             {
               attributeName: "opacity",
@@ -4124,12 +4183,12 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx89(
         "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__ */ jsx87(
+          children: /* @__PURE__ */ jsx89(
             "animate",
             {
               attributeName: "opacity",
@@ -4142,12 +4201,12 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx89(
         "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__ */ jsx87(
+          children: /* @__PURE__ */ jsx89(
             "animate",
             {
               attributeName: "opacity",
@@ -4160,12 +4219,12 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx89(
         "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__ */ jsx87(
+          children: /* @__PURE__ */ jsx89(
             "animate",
             {
               attributeName: "opacity",
@@ -4178,12 +4237,12 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx89(
         "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__ */ jsx87(
+          children: /* @__PURE__ */ jsx89(
             "animate",
             {
               attributeName: "opacity",
@@ -4196,12 +4255,12 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx89(
         "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__ */ jsx87(
+          children: /* @__PURE__ */ jsx89(
             "animate",
             {
               attributeName: "opacity",
@@ -4214,12 +4273,12 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx89(
         "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__ */ jsx87(
+          children: /* @__PURE__ */ jsx89(
             "animate",
             {
               attributeName: "opacity",
@@ -4232,12 +4291,12 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx89(
         "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__ */ jsx87(
+          children: /* @__PURE__ */ jsx89(
             "animate",
             {
               attributeName: "opacity",
@@ -4250,12 +4309,12 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx89(
         "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__ */ jsx87(
+          children: /* @__PURE__ */ jsx89(
             "animate",
             {
               attributeName: "opacity",
@@ -4268,12 +4327,12 @@ var XLoader = forwardRef18((props, ref) => /* @__PURE__ */ jsxs35(
           )
         }
       ),
-      /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx89(
         "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__ */ jsx87(
+          children: /* @__PURE__ */ jsx89(
             "animate",
             {
               attributeName: "opacity",
@@ -4295,7 +4354,7 @@ import { useRef as useRef32 } from "react";
 import { useTabList } from "@react-aria/tabs";
 import { Item as Item7 } from "@react-stately/collections";
 import { useTabListState } from "@react-stately/tabs";
-import { cn as cn49, gapSpace as gapSpace8, useClassNames as useClassNames42 } from "@marigold/system";
+import { cn as cn51, gapSpace as gapSpace8, useClassNames as useClassNames44 } from "@marigold/system";
 
 // src/Tabs/Context.ts
 import { createContext as createContext10, useContext as useContext10 } from "react";
@@ -4304,30 +4363,30 @@ var useTabContext = () => useContext10(TabContext);
 
 // src/Tabs/Tab.tsx
 import { useRef as useRef30 } from "react";
-import { useFocus, useHover as useHover12 } from "@react-aria/interactions";
+import { useFocus, useHover as useHover11 } from "@react-aria/interactions";
 import { useTab } from "@react-aria/tabs";
-import { mergeProps as mergeProps22 } from "@react-aria/utils";
-import { cn as cn47, useStateProps as useStateProps24 } from "@marigold/system";
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { mergeProps as mergeProps21 } from "@react-aria/utils";
+import { cn as cn49, useStateProps as useStateProps22 } from "@marigold/system";
+import { jsx as jsx90 } from "react/jsx-runtime";
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
   const ref = useRef30(null);
   const { tabProps, isSelected } = useTab({ key }, state, ref);
   const disabled = tabProps["aria-disabled"];
-  const { hoverProps, isHovered } = useHover12({
+  const { hoverProps, isHovered } = useHover11({
     isDisabled: disabled || isSelected
   });
   const { focusProps } = useFocus({});
-  const stateProps = useStateProps24({ active: isSelected, hover: isHovered });
+  const stateProps = useStateProps22({ active: isSelected, hover: isHovered });
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx90(
     "div",
     {
-      className: cn47(
+      className: cn49(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
-      ...mergeProps22(tabProps, stateProps, focusProps, hoverProps),
+      ...mergeProps21(tabProps, stateProps, focusProps, hoverProps),
       ref,
       children: rendered
     }
@@ -4337,19 +4396,19 @@ var Tab = ({ item, state }) => {
 // src/Tabs/TabPanel.tsx
 import { useRef as useRef31 } from "react";
 import { useTabPanel } from "@react-aria/tabs";
-import { cn as cn48 } from "@marigold/system";
-import { jsx as jsx89 } from "react/jsx-runtime";
+import { cn as cn50 } from "@marigold/system";
+import { jsx as jsx91 } from "react/jsx-runtime";
 var TabPanel = ({ state, ...props }) => {
   var _a;
   const ref = useRef31(null);
   const { tabPanelProps } = useTabPanel(props, state, ref);
   const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ jsx89("div", { className: cn48(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
+  return /* @__PURE__ */ jsx91("div", { className: cn50(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
 };
 
 // src/Tabs/Tabs.tsx
-import { jsx as jsx90, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs38 } from "react/jsx-runtime";
 var Tabs = ({
   space = 2,
   size = "medium",
@@ -4365,24 +4424,24 @@ var Tabs = ({
   };
   const state = useTabListState(props);
   const { tabListProps } = useTabList(props, state, ref);
-  const classNames2 = useClassNames42({
+  const classNames2 = useClassNames44({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ jsx90(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs36("div", { className: cn49(classNames2.container), children: [
-    /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx92(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs38("div", { className: cn51(classNames2.container), children: [
+    /* @__PURE__ */ jsx92(
       "div",
       {
-        className: cn49("flex", gapSpace8[space], classNames2.tabs),
+        className: cn51("flex", gapSpace8[space], classNames2.tabs),
         ...tabListProps,
         ref,
         children: [...state.collection].map((item) => {
-          return /* @__PURE__ */ jsx90(Tab, { item, state }, item.key);
+          return /* @__PURE__ */ jsx92(Tab, { item, state }, item.key);
         })
       }
     ),
-    /* @__PURE__ */ jsx90(TabPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key)
+    /* @__PURE__ */ jsx92(TabPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key)
   ] }) });
 };
 Tabs.Item = Item7;
@@ -4432,8 +4491,8 @@ export {
   NumberField,
   Overlay,
   Popover,
-  Radio,
-  RadioGroup,
+  _Radio as Radio,
+  _RadioGroup as RadioGroup,
   Select,
   _Slider as Slider,
   Split,
@@ -4442,7 +4501,7 @@ export {
   Table,
   Tabs,
   Tag2 as Tag,
-  Text,
+  Text2 as Text,
   TextArea,
   TextField,
   ThemeProvider2 as ThemeProvider,