@marigold/components 6.4.0 → 6.5.1

package/dist/index.js

@@ -75,8 +75,8 @@ __export(src_exports, {
   NumberField: () => NumberField,
   Overlay: () => Overlay,
   Popover: () => Popover,
-  Radio: () => Radio,
-  RadioGroup: () => RadioGroup,
+  Radio: () => _Radio,
+  RadioGroup: () => _RadioGroup,
   Select: () => Select,
   Slider: () => _Slider,
   Split: () => Split,
@@ -85,7 +85,7 @@ __export(src_exports, {
   Table: () => Table,
   Tabs: () => Tabs,
   Tag: () => Tag2,
-  Text: () => Text,
+  Text: () => Text2,
   TextArea: () => TextArea,
   TextField: () => TextField,
   ThemeProvider: () => import_system51.ThemeProvider,
@@ -326,6 +326,7 @@ var Accordion = ({ children, ...props }) => {
     state,
     ref
   );
+  delete accordionProps.onKeyDownCapture;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     AccordionItem,
     {
@@ -537,7 +538,7 @@ var FieldBase = ({
       ...stateProps,
       className: (0, import_system8.cn)("group/field", import_system8.width[width], classNames2),
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(_Label, { variant, size, ...labelProps, children: label }),
+        label ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(_Label, { variant, size, ...labelProps, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": "true" }),
         children,
         hasHelpText && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           HelpText,
@@ -2945,12 +2946,9 @@ function MarigoldProvider({
 }
 
 // src/Radio/Radio.tsx
-var import_react41 = require("react");
-var import_focus11 = require("@react-aria/focus");
-var import_interactions8 = require("@react-aria/interactions");
-var import_radio3 = require("@react-aria/radio");
-var import_utils20 = require("@react-aria/utils");
-var import_system53 = require("@marigold/system");
+var import_react42 = require("react");
+var import_react_aria_components9 = require("react-aria-components");
+var import_system55 = require("@marigold/system");
 
 // src/Radio/Context.ts
 var import_react40 = require("react");
@@ -2960,63 +2958,149 @@ var RadioGroupContext = (0, import_react40.createContext)(
 var useRadioGroupContext = () => (0, import_react40.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_radio = require("@react-aria/radio");
-var import_radio2 = require("@react-stately/radio");
+var import_react_aria_components8 = require("react-aria-components");
+var import_system54 = require("@marigold/system");
+
+// src/FieldBase/_FieldBase.tsx
+var import_react41 = require("react");
+var import_system53 = require("@marigold/system");
+
+// src/HelpText/_HelpText.tsx
+var import_react_aria_components7 = require("react-aria-components");
 var import_system52 = require("@marigold/system");
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var RadioGroup = ({
+var HelpText2 = ({
   variant,
   size,
-  children,
-  orientation = "vertical",
-  width,
-  required,
+  description,
+  error,
+  errorMessage,
+  ...props
+}) => {
+  const hasErrorMessage = errorMessage && error;
+  const classNames2 = (0, import_system52.useClassNames)({
+    component: "HelpText",
+    variant,
+    size
+  });
+  if (!description && !errorMessage) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    import_react_aria_components7.Text,
+    {
+      ...props,
+      slot: hasErrorMessage ? "errorMessage" : "description",
+      className: (0, import_system52.cn)("flex items-center gap-1", classNames2.container),
+      children: hasErrorMessage ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          "svg",
+          {
+            className: (0, import_system52.cn)("h-4 w-4", classNames2.icon),
+            viewBox: "0 0 24 24",
+            role: "presentation",
+            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("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
+var import_jsx_runtime65 = require("react/jsx-runtime");
+var fixedForwardRef = import_react41.forwardRef;
+var _FieldBase = (props, ref) => {
+  const {
+    as: Component = "div",
+    children,
+    label,
+    size,
+    variant,
+    width = "full",
+    description,
+    errorMessage,
+    ...rest
+  } = props;
+  const classNames2 = (0, import_system53.useClassNames)({
+    component: "Field",
+    variant,
+    size
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+    Component,
+    {
+      ref,
+      className: (0, import_system53.cn)("group/field", import_system53.width[width], classNames2),
+      ...rest,
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(_Label, { variant, size, children: label }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { "aria-hidden": "true" }),
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          HelpText2,
+          {
+            variant,
+            size,
+            description,
+            errorMessage,
+            error: props.isInvalid
+          }
+        )
+      ]
+    }
+  );
+};
+var FieldBase2 = fixedForwardRef(_FieldBase);
+
+// src/Radio/RadioGroup.tsx
+var import_jsx_runtime66 = require("react/jsx-runtime");
+var _RadioGroup = ({
+  variant,
+  size,
+  label,
+  error,
   disabled,
+  required,
   readOnly,
-  error,
+  description,
+  errorMessage,
+  orientation = "vertical",
+  children,
+  width,
   ...rest
 }) => {
+  const classNames2 = (0, import_system54.useClassNames)({ component: "Radio", variant, size });
   const props = {
-    isRequired: required,
     isDisabled: disabled,
     isReadOnly: readOnly,
-    validationState: error ? "invalid" : "valid",
+    isRequired: required,
+    isInvalid: error,
     ...rest
   };
-  const state = (0, import_radio2.useRadioGroupState)(props);
-  const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = (0, import_radio.useRadioGroup)(props, state);
-  const classNames2 = (0, import_system52.useClassNames)({ component: "Radio", variant, size });
-  const stateProps = (0, import_system52.useStateProps)({
-    disabled,
-    readOnly,
-    error,
-    required
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-    FieldBase,
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+    FieldBase2,
     {
+      as: import_react_aria_components8.RadioGroup,
       width,
-      label: props.label,
-      labelProps: { elementType: "span", ...labelProps },
-      description: props.description,
-      descriptionProps,
-      error,
-      errorMessage: props.errorMessage,
-      errorMessageProps,
-      disabled,
-      stateProps,
-      ...radioGroupProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      label,
+      description,
+      errorMessage,
+      variant,
+      size,
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
         "div",
         {
           role: "presentation",
+          "data-testid": "group",
           "data-orientation": orientation,
-          className: (0, import_system52.cn)(
+          className: (0, import_system54.cn)(
             classNames2.group,
             "flex items-start",
             orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(RadioGroupContext.Provider, { value: { width, error, state }, children })
+          children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(RadioGroupContext.Provider, { value: { width, variant, size }, children })
         }
       )
     }
@@ -3024,87 +3108,66 @@ var RadioGroup = ({
 };
 
 // src/Radio/Radio.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
-var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
-var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+var import_jsx_runtime67 = require("react/jsx-runtime");
+var Dot = () => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
+var Icon2 = ({ checked, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
   "div",
   {
-    className: (0, import_system53.cn)(
+    className: (0, import_system55.cn)(
       "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__ */ (0, import_jsx_runtime65.jsx)(Dot, {}) : null
+    children: checked ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Dot, {}) : null
   }
 );
-var Radio = (0, import_react41.forwardRef)(
-  ({ width, disabled, ...props }, ref) => {
-    const {
-      variant,
-      size,
-      error,
-      width: groupWidth,
-      state
-    } = useRadioGroupContext();
-    const inputRef = (0, import_utils20.useObjectRef)(ref);
-    const { inputProps } = (0, import_radio3.useRadio)(
-      { isDisabled: disabled, ...props },
-      state,
-      inputRef
-    );
-    const classNames2 = (0, import_system53.useClassNames)({
+var _Radio = (0, import_react42.forwardRef)(
+  ({ value, disabled, width, children, ...props }, ref) => {
+    const { variant, size, width: groupWidth } = useRadioGroupContext();
+    const classNames2 = (0, import_system55.useClassNames)({
       component: "Radio",
       variant: variant || props.variant,
       size: size || props.size
     });
-    const { hoverProps, isHovered } = (0, import_interactions8.useHover)({ isDisabled: disabled });
-    const { isFocusVisible, focusProps } = (0, import_focus11.useFocusRing)();
-    const stateProps = (0, import_system53.useStateProps)({
-      hover: isHovered,
-      focus: isFocusVisible,
-      checked: inputProps.checked,
-      disabled: inputProps.disabled,
-      readOnly: props.readOnly,
-      error
-    });
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
-      "label",
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      import_react_aria_components9.Radio,
       {
-        className: (0, import_system53.cn)(
+        ref,
+        className: (0, import_system55.cn)(
           "group/radio",
           "relative flex items-center gap-[1ch]",
           width || groupWidth || "w-full",
           classNames2.container
         ),
-        ...(0, import_utils20.mergeProps)(hoverProps, stateProps),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-            "input",
+        value,
+        isDisabled: disabled,
+        ...props,
+        children: ({ isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            Icon2,
             {
-              ref: inputRef,
-              className: (0, import_system53.cn)(
-                "absolute left-0 top-0 z-[1] h-full w-full opacity-[0.0001]",
-                inputProps.disabled ? "cursor-not-allowed" : "cursor-pointer"
-              ),
-              ...(0, import_utils20.mergeProps)(inputProps, focusProps)
+              checked: isSelected,
+              className: (0, import_system55.cn)(
+                disabled ? "cursor-not-allowed" : "cursor-pointer",
+                classNames2.radio
+              )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Icon2, { checked: inputProps.checked, className: classNames2.radio }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: classNames2.label, children: props.children })
-        ]
+          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: classNames2.label, children })
+        ] })
       }
     );
   }
 );
-Radio.Group = RadioGroup;
+_Radio.Group = _RadioGroup;
 
 // src/Slider/Slider.tsx
-var import_react42 = require("react");
-var import_react_aria_components7 = require("react-aria-components");
-var import_system54 = require("@marigold/system");
-var import_jsx_runtime66 = require("react/jsx-runtime");
-var _Slider = (0, import_react42.forwardRef)(
+var import_react43 = require("react");
+var import_react_aria_components10 = require("react-aria-components");
+var import_system56 = require("@marigold/system");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+var _Slider = (0, import_react43.forwardRef)(
   ({
     thumbLabels,
     variant,
@@ -3113,7 +3176,7 @@ var _Slider = (0, import_react42.forwardRef)(
     disabled,
     ...rest
   }, ref) => {
-    const classNames2 = (0, import_system54.useClassNames)({
+    const classNames2 = (0, import_system56.useClassNames)({
       component: "Slider",
       variant,
       size
@@ -3122,27 +3185,27 @@ var _Slider = (0, import_react42.forwardRef)(
       isDisabled: disabled,
       ...rest
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
-      import_react_aria_components7.Slider,
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+      import_react_aria_components10.Slider,
       {
-        className: (0, import_system54.cn)(
+        className: (0, import_system56.cn)(
           "grid grid-cols-[auto_1fr] gap-y-1",
           classNames2.container,
-          import_system54.width[width]
+          import_system56.width[width]
         ),
         ref,
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(_Label, { children: props.children }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_react_aria_components7.SliderOutput, { className: (0, import_system54.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-            import_react_aria_components7.SliderTrack,
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(_Label, { children: props.children }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_react_aria_components10.SliderOutput, { className: (0, import_system56.cn)("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            import_react_aria_components10.SliderTrack,
             {
-              className: (0, import_system54.cn)("relative col-span-2 h-2 w-full", classNames2.track),
-              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                import_react_aria_components7.SliderThumb,
+              className: (0, import_system56.cn)("relative col-span-2 h-2 w-full", classNames2.track),
+              children: ({ state }) => state.values.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+                import_react_aria_components10.SliderThumb,
                 {
-                  className: (0, import_system54.cn)("top-1/2 cursor-pointer", classNames2.thumb),
+                  className: (0, import_system56.cn)("top-1/2 cursor-pointer", classNames2.thumb),
                   index: i,
                   "aria-label": thumbLabels == null ? void 0 : thumbLabels[i]
                 },
@@ -3157,12 +3220,12 @@ var _Slider = (0, import_react42.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { ...props, role: "separator", className: "grow" });
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var Split = (props) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ...props, role: "separator", className: "grow" });
 
 // src/Stack/Stack.tsx
-var import_system55 = require("@marigold/system");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_system57 = require("@marigold/system");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var Stack = ({
   children,
   space = 0,
@@ -3173,14 +3236,14 @@ var Stack = ({
   ...props
 }) => {
   var _a, _b, _c, _d;
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     "div",
     {
-      className: (0, import_system55.cn)(
+      className: (0, import_system57.cn)(
         "flex flex-col",
-        import_system55.gapSpace[space],
-        alignX && ((_b = (_a = import_system55.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
-        alignY && ((_d = (_c = import_system55.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
+        import_system57.gapSpace[space],
+        alignX && ((_b = (_a = import_system57.alignment) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
+        alignY && ((_d = (_c = import_system57.alignment) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
         stretch && "h-full w-full"
       ),
       ...props,
@@ -3190,11 +3253,11 @@ var Stack = ({
 };
 
 // src/Switch/Switch.tsx
-var import_react43 = require("react");
-var import_react_aria_components8 = require("react-aria-components");
-var import_system56 = require("@marigold/system");
-var import_jsx_runtime69 = require("react/jsx-runtime");
-var _Switch = (0, import_react43.forwardRef)(
+var import_react44 = require("react");
+var import_react_aria_components11 = require("react-aria-components");
+var import_system58 = require("@marigold/system");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var _Switch = (0, import_react44.forwardRef)(
   ({
     variant,
     size,
@@ -3205,14 +3268,14 @@ var _Switch = (0, import_react43.forwardRef)(
     readOnly,
     ...props
   }, ref) => {
-    const classNames2 = (0, import_system56.useClassNames)({ component: "Switch", size, variant });
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
-      import_react_aria_components8.Switch,
+    const classNames2 = (0, import_system58.useClassNames)({ component: "Switch", size, variant });
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+      import_react_aria_components11.Switch,
       {
         ...props,
         ref,
-        className: (0, import_system56.cn)(
-          import_system56.width[width],
+        className: (0, import_system58.cn)(
+          import_system58.width[width],
           "group/switch",
           "flex items-center justify-between gap-[1ch]",
           classNames2.container
@@ -3221,17 +3284,17 @@ var _Switch = (0, import_react43.forwardRef)(
         isReadOnly: readOnly,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: " relative", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: " relative", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
             "div",
             {
-              className: (0, import_system56.cn)(
+              className: (0, import_system58.cn)(
                 "h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed ",
                 classNames2.track
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
                 "div",
                 {
-                  className: (0, import_system56.cn)(
+                  className: (0, import_system58.cn)(
                     "h-[22px] w-[22px]",
                     "cubic-bezier(.7,0,.3,1)",
                     "absolute left-0 top-px",
@@ -3250,33 +3313,33 @@ var _Switch = (0, import_react43.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system63 = require("@marigold/system");
+var import_system65 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react44 = require("react");
-var TableContext = (0, import_react44.createContext)({});
-var useTableContext = () => (0, import_react44.useContext)(TableContext);
+var import_react45 = require("react");
+var TableContext = (0, import_react45.createContext)({});
+var useTableContext = () => (0, import_react45.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
 var import_table = require("@react-aria/table");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var TableBody = ({ children }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("tbody", { ...rowGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("tbody", { ...rowGroupProps, children });
 };
 
 // src/Table/TableCell.tsx
-var import_react45 = require("react");
-var import_focus12 = require("@react-aria/focus");
+var import_react46 = require("react");
+var import_focus11 = require("@react-aria/focus");
 var import_table2 = require("@react-aria/table");
-var import_utils21 = require("@react-aria/utils");
-var import_system57 = require("@marigold/system");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_utils20 = require("@react-aria/utils");
+var import_system59 = require("@marigold/system");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var TableCell = ({ cell }) => {
-  const ref = (0, import_react45.useRef)(null);
+  const ref = (0, import_react46.useRef)(null);
   const { interactive, state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -3295,14 +3358,14 @@ var TableCell = ({ cell }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
-  const stateProps = (0, import_system57.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  const { focusProps, isFocusVisible } = (0, import_focus11.useFocusRing)();
+  const stateProps = (0, import_system59.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "td",
     {
       ref,
       className: classNames2 == null ? void 0 : classNames2.cell,
-      ...(0, import_utils21.mergeProps)(cellProps, focusProps),
+      ...(0, import_utils20.mergeProps)(cellProps, focusProps),
       ...stateProps,
       children: cell.rendered
     }
@@ -3310,11 +3373,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react46 = require("react");
-var import_focus13 = require("@react-aria/focus");
+var import_react47 = require("react");
+var import_focus12 = require("@react-aria/focus");
 var import_table3 = require("@react-aria/table");
-var import_utils22 = require("@react-aria/utils");
-var import_system58 = require("@marigold/system");
+var import_utils21 = require("@react-aria/utils");
+var import_system60 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -3337,9 +3400,9 @@ var mapCheckboxProps = ({
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react46.useRef)(null);
+  const ref = (0, import_react47.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -3352,36 +3415,36 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
-  const stateProps = (0, import_system58.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
+  const stateProps = (0, import_system60.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "td",
     {
       ref,
-      className: (0, import_system58.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
-      ...(0, import_utils22.mergeProps)(gridCellProps, focusProps),
+      className: (0, import_system60.cn)("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
+      ...(0, import_utils21.mergeProps)(gridCellProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react47 = require("react");
-var import_focus14 = require("@react-aria/focus");
-var import_interactions9 = require("@react-aria/interactions");
+var import_react48 = require("react");
+var import_focus13 = require("@react-aria/focus");
+var import_interactions8 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
-var import_utils24 = require("@react-aria/utils");
+var import_utils23 = require("@react-aria/utils");
 var import_icons2 = require("@marigold/icons");
-var import_system59 = require("@marigold/system");
-var import_system60 = require("@marigold/system");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_system61 = require("@marigold/system");
+var import_system62 = require("@marigold/system");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var TableColumnHeader = ({
   column,
   width = "auto"
 }) => {
   var _a, _b;
-  const ref = (0, import_react47.useRef)(null);
+  const ref = (0, import_react48.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -3390,23 +3453,23 @@ var TableColumnHeader = ({
     state,
     ref
   );
-  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)();
-  const stateProps = (0, import_system59.useStateProps)({
+  const { hoverProps, isHovered } = (0, import_interactions8.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
+  const stateProps = (0, import_system61.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     "th",
     {
       colSpan: column.colspan,
       ref,
-      className: (0, import_system59.cn)("cursor-default", import_system60.width[width], classNames2 == null ? void 0 : classNames2.header),
-      ...(0, import_utils24.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      className: (0, import_system61.cn)("cursor-default", import_system62.width[width], classNames2 == null ? void 0 : classNames2.header),
+      ...(0, import_utils23.mergeProps)(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__ */ (0, import_jsx_runtime73.jsx)(import_icons2.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_icons2.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_icons2.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__ */ (0, import_jsx_runtime75.jsx)(import_icons2.SortUp, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_icons2.SortDown, { className: "inline-block" }) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_icons2.SortDown, { className: "inline-block" }))
       ]
     }
   );
@@ -3414,36 +3477,36 @@ var TableColumnHeader = ({
 
 // src/Table/TableHeader.tsx
 var import_table5 = require("@react-aria/table");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("thead", { ...rowGroupProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("thead", { ...rowGroupProps, children });
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_table6 = require("@react-aria/table");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react48.useRef)(null);
+  const ref = (0, import_react49.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("tr", { ...rowProps, ref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("tr", { ...rowProps, ref, children });
 };
 
 // src/Table/TableRow.tsx
-var import_react49 = require("react");
-var import_focus15 = require("@react-aria/focus");
-var import_interactions10 = require("@react-aria/interactions");
+var import_react50 = require("react");
+var import_focus14 = require("@react-aria/focus");
+var import_interactions9 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
-var import_utils25 = require("@react-aria/utils");
-var import_system61 = require("@marigold/system");
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_utils24 = require("@react-aria/utils");
+var import_system63 = require("@marigold/system");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react49.useRef)(null);
+  const ref = (0, import_react50.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const classNames2 = (0, import_system61.useClassNames)({
+  const classNames2 = (0, import_system63.useClassNames)({
     component: "Table",
     variant: variant || ctx.variant,
     size: size || ctx.size
@@ -3457,28 +3520,28 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)({ within: true });
-  const { hoverProps, isHovered } = (0, import_interactions10.useHover)({
+  const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)({ within: true });
+  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system61.useStateProps)({
+  const stateProps = (0, import_system63.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "tr",
     {
       ref,
-      className: (0, import_system61.cn)(
+      className: (0, import_system63.cn)(
         [
           !interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
         ],
         classNames2 == null ? void 0 : classNames2.row
       ),
-      ...(0, import_utils25.mergeProps)(rowProps, focusProps, hoverProps),
+      ...(0, import_utils24.mergeProps)(rowProps, focusProps, hoverProps),
       ...stateProps,
       children
     }
@@ -3486,18 +3549,18 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react50 = require("react");
-var import_focus16 = require("@react-aria/focus");
-var import_interactions11 = require("@react-aria/interactions");
+var import_react51 = require("react");
+var import_focus15 = require("@react-aria/focus");
+var import_interactions10 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
-var import_utils26 = require("@react-aria/utils");
-var import_system62 = require("@marigold/system");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_utils25 = require("@react-aria/utils");
+var import_system64 = require("@marigold/system");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var TableSelectAllCell = ({
   column,
   width = "auto"
 }) => {
-  const ref = (0, import_react50.useRef)(null);
+  const ref = (0, import_react51.useRef)(null);
   const { state, classNames: classNames2 } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -3507,30 +3570,30 @@ var TableSelectAllCell = ({
     ref
   );
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
-  const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
-  const stateProps = (0, import_system62.useStateProps)({
+  const { hoverProps, isHovered } = (0, import_interactions10.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)();
+  const stateProps = (0, import_system64.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "th",
     {
       ref,
-      className: (0, import_system62.cn)(
-        import_system62.width[width],
+      className: (0, import_system64.cn)(
+        import_system64.width[width],
         ["text-center align-middle leading-none"],
         classNames2 == null ? void 0 : classNames2.header
       ),
-      ...(0, import_utils26.mergeProps)(columnHeaderProps, hoverProps, focusProps),
+      ...(0, import_utils25.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(_Checkbox, { ...checkboxProps })
+      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(_Checkbox, { ...checkboxProps })
     }
   );
 };
 
 // src/Table/Table.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var Table = ({
   variant,
   size,
@@ -3539,7 +3602,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react51.useRef)(null);
+  const tableRef = (0, import_react52.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -3547,21 +3610,21 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const classNames2 = (0, import_system63.useClassNames)({
+  const classNames2 = (0, import_system65.useClassNames)({
     component: "Table",
     variant,
     size
   });
   const { collection } = state;
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     TableContext.Provider,
     {
       value: { state, interactive, classNames: classNames2, variant, size },
-      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
         "table",
         {
           ref: tableRef,
-          className: (0, import_system63.cn)(
+          className: (0, import_system65.cn)(
             "group/table",
             "border-collapse overflow-auto whitespace-nowrap",
             stretch ? "table w-full" : "block",
@@ -3569,17 +3632,17 @@ var Table = ({
           ),
           ...gridProps,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableHeader, { children: collection.headerRows.map((headerRow) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
               (column) => {
                 var _a, _b, _c;
-                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                   TableSelectAllCell,
                   {
                     width: (_b = column.props) == null ? void 0 : _b.width,
                     column
                   },
                   column.key
-                ) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                   TableColumnHeader,
                   {
                     width: (_c = column.props) == null ? void 0 : _c.width,
@@ -3589,12 +3652,12 @@ var Table = ({
                 );
               }
             ) }, headerRow.key)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(TableBody, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(TableBody, { children: [
               ...collection.rows.map(
-                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map(
+                (row) => row.type === "item" && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableRow, { row, children: [...collection.getChildren(row.key)].map(
                   (cell) => {
                     var _a;
-                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TableCell, { cell }, cell.key);
+                    return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TableCell, { cell }, cell.key);
                   }
                 ) }, row.key)
               )
@@ -3612,9 +3675,9 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_system64 = require("@marigold/system");
-var import_jsx_runtime79 = require("react/jsx-runtime");
-var Text = ({
+var import_system66 = require("@marigold/system");
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var Text2 = ({
   variant,
   size,
   color,
@@ -3626,27 +3689,27 @@ var Text = ({
   children,
   ...props
 }) => {
-  const theme = (0, import_system64.useTheme)();
-  const classNames2 = (0, import_system64.useClassNames)({
+  const theme = (0, import_system66.useTheme)();
+  const classNames2 = (0, import_system66.useClassNames)({
     component: "Text",
     variant,
     size
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "p",
     {
       ...props,
-      className: (0, import_system64.cn)(
+      className: (0, import_system66.cn)(
         classNames2,
         "text-[--color] outline-[--outline]",
-        fontStyle && import_system64.textStyle[fontStyle],
-        align && import_system64.textAlign[align],
-        cursor && import_system64.cursorStyle[cursor],
-        weight && import_system64.fontWeight[weight],
-        fontSize && import_system64.textSize[fontSize]
+        fontStyle && import_system66.textStyle[fontStyle],
+        align && import_system66.textAlign[align],
+        cursor && import_system66.cursorStyle[cursor],
+        weight && import_system66.fontWeight[weight],
+        fontSize && import_system66.textSize[fontSize]
       ),
-      style: (0, import_system64.createVar)({
-        color: color && theme.colors && (0, import_system64.get)(
+      style: (0, import_system66.createVar)({
+        color: color && theme.colors && (0, import_system66.get)(
           theme.colors,
           color.replace("-", "."),
           color
@@ -3659,14 +3722,14 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-var import_react52 = require("react");
-var import_focus17 = require("@react-aria/focus");
-var import_interactions12 = require("@react-aria/interactions");
+var import_react53 = require("react");
+var import_focus16 = require("@react-aria/focus");
+var import_interactions11 = require("@react-aria/interactions");
 var import_textfield = require("@react-aria/textfield");
-var import_utils28 = require("@react-aria/utils");
-var import_system65 = require("@marigold/system");
-var import_jsx_runtime80 = require("react/jsx-runtime");
-var TextArea = (0, import_react52.forwardRef)(
+var import_utils27 = require("@react-aria/utils");
+var import_system67 = require("@marigold/system");
+var import_jsx_runtime82 = require("react/jsx-runtime");
+var TextArea = (0, import_react53.forwardRef)(
   ({
     variant,
     size,
@@ -3679,7 +3742,7 @@ var TextArea = (0, import_react52.forwardRef)(
     ...props
   }, ref) => {
     const { label, description, errorMessage } = props;
-    const textAreaRef = (0, import_utils28.useObjectRef)(ref);
+    const textAreaRef = (0, import_utils27.useObjectRef)(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield.useTextField)(
       {
         inputElementType: "textarea",
@@ -3691,9 +3754,9 @@ var TextArea = (0, import_react52.forwardRef)(
       },
       textAreaRef
     );
-    const { hoverProps, isHovered } = (0, import_interactions12.useHover)({});
-    const { focusProps, isFocusVisible } = (0, import_focus17.useFocusRing)();
-    const stateProps = (0, import_system65.useStateProps)({
+    const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
+    const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
+    const stateProps = (0, import_system67.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
@@ -3701,8 +3764,8 @@ var TextArea = (0, import_react52.forwardRef)(
       required,
       error
     });
-    const classNames2 = (0, import_system65.useClassNames)({ component: "TextArea", variant, size });
-    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+    const classNames2 = (0, import_system67.useClassNames)({ component: "TextArea", variant, size });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       FieldBase,
       {
         label,
@@ -3716,7 +3779,7 @@ var TextArea = (0, import_react52.forwardRef)(
         variant,
         size,
         width,
-        children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           "textarea",
           {
             className: classNames2,
@@ -3733,17 +3796,17 @@ var TextArea = (0, import_react52.forwardRef)(
 );
 
 // src/TextField/TextField.tsx
-var import_react53 = require("react");
-var import_focus18 = require("@react-aria/focus");
-var import_interactions13 = require("@react-aria/interactions");
+var import_react54 = require("react");
+var import_focus17 = require("@react-aria/focus");
+var import_interactions12 = require("@react-aria/interactions");
 var import_textfield2 = require("@react-aria/textfield");
-var import_utils29 = require("@react-aria/utils");
-var import_system66 = require("@marigold/system");
-var import_jsx_runtime81 = require("react/jsx-runtime");
-var TextField = (0, import_react53.forwardRef)(
+var import_utils28 = require("@react-aria/utils");
+var import_system68 = require("@marigold/system");
+var import_jsx_runtime83 = require("react/jsx-runtime");
+var TextField = (0, import_react54.forwardRef)(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = (0, import_utils29.useObjectRef)(ref);
+    const inputRef = (0, import_utils28.useObjectRef)(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = (0, import_textfield2.useTextField)(
       {
         isDisabled: disabled,
@@ -3754,12 +3817,12 @@ var TextField = (0, import_react53.forwardRef)(
       },
       inputRef
     );
-    const { hoverProps, isHovered } = (0, import_interactions13.useHover)({});
-    const { focusProps, isFocused } = (0, import_focus18.useFocusRing)({
+    const { hoverProps, isHovered } = (0, import_interactions12.useHover)({});
+    const { focusProps, isFocused } = (0, import_focus17.useFocusRing)({
       isTextInput: true,
       autoFocus
     });
-    const stateProps = (0, import_system66.useStateProps)({
+    const stateProps = (0, import_system68.useStateProps)({
       hover: isHovered,
       focus: isFocused,
       disabled,
@@ -3767,7 +3830,7 @@ var TextField = (0, import_react53.forwardRef)(
       readOnly,
       required
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       FieldBase,
       {
         label,
@@ -3781,13 +3844,13 @@ var TextField = (0, import_react53.forwardRef)(
         variant,
         size,
         width,
-        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           Input,
           {
             ref: inputRef,
             variant,
             size,
-            ...(0, import_utils29.mergeProps)(focusProps, inputProps, hoverProps)
+            ...(0, import_utils28.mergeProps)(focusProps, inputProps, hoverProps)
           }
         )
       }
@@ -3796,8 +3859,8 @@ var TextField = (0, import_react53.forwardRef)(
 );
 
 // src/Tiles/Tiles.tsx
-var import_system67 = require("@marigold/system");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_system69 = require("@marigold/system");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var Tiles = ({
   space = 0,
   stretch = false,
@@ -3810,17 +3873,17 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     "div",
     {
       ...props,
-      className: (0, import_system67.cn)(
+      className: (0, import_system69.cn)(
         "grid",
-        import_system67.gapSpace[space],
+        import_system69.gapSpace[space],
         "grid-cols-[repeat(auto-fit,var(--column))]",
         equalHeight && "auto-rows-[1fr]"
       ),
-      style: (0, import_system67.createVar)({ column, tilesWidth }),
+      style: (0, import_system69.createVar)({ column, tilesWidth }),
       children
     }
   );
@@ -3828,20 +3891,20 @@ var Tiles = ({
 
 // src/Tooltip/Tooltip.tsx
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_system68 = require("@marigold/system");
+var import_system70 = require("@marigold/system");
 
 // src/Tooltip/Context.ts
-var import_react54 = require("react");
-var TooltipContext = (0, import_react54.createContext)({});
-var useTooltipContext = () => (0, import_react54.useContext)(TooltipContext);
+var import_react55 = require("react");
+var TooltipContext = (0, import_react55.createContext)({});
+var useTooltipContext = () => (0, import_react55.useContext)(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react55 = require("react");
-var import_focus19 = require("@react-aria/focus");
+var import_react56 = require("react");
+var import_focus18 = require("@react-aria/focus");
 var import_overlays8 = require("@react-aria/overlays");
 var import_tooltip = require("@react-aria/tooltip");
 var import_tooltip2 = require("@react-stately/tooltip");
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var TooltipTrigger = ({
   disabled,
   open,
@@ -3850,7 +3913,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = import_react55.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = import_react56.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -3858,8 +3921,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = (0, import_react55.useRef)(null);
-  const overlayRef = (0, import_react55.useRef)(null);
+  const tooltipTriggerRef = (0, import_react56.useRef)(null);
+  const overlayRef = (0, import_react56.useRef)(null);
   const state = (0, import_tooltip2.useTooltipTriggerState)(props);
   const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)(
     props,
@@ -3878,9 +3941,9 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_focus19.FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_focus18.FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps, children: [
     tooltipTrigger,
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       TooltipContext.Provider,
       {
         value: {
@@ -3891,33 +3954,33 @@ var TooltipTrigger = ({
           ...tooltipProps,
           ...positionProps
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Overlay, { open: state.isOpen, children: tooltip })
+        children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Overlay, { open: state.isOpen, children: tooltip })
       }
     )
   ] });
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = (0, import_tooltip3.useTooltip)({}, state);
-  const classNames2 = (0, import_system68.useClassNames)({ component: "Tooltip", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+  const classNames2 = (0, import_system70.useClassNames)({ component: "Tooltip", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
     "div",
     {
       ...tooltipProps,
       ...rest,
       ref: overlayRef,
-      className: (0, import_system68.cn)("group/tooltip", classNames2.container),
+      className: (0, import_system70.cn)("group/tooltip", classNames2.container),
       "data-placement": placement,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { children }),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           "div",
           {
             ...arrowProps,
-            className: (0, import_system68.cn)("absolute h-0 w-0", classNames2.arrow)
+            className: (0, import_system70.cn)("absolute h-0 w-0", classNames2.arrow)
           }
         )
       ]
@@ -3930,31 +3993,31 @@ Tooltip.Trigger = TooltipTrigger;
 var import_collections6 = require("@react-stately/collections");
 
 // src/TagGroup/TagGroup.tsx
-var import_react57 = require("react");
+var import_react58 = require("react");
 var import_tag2 = require("@react-aria/tag");
 var import_list = require("@react-stately/list");
-var import_system70 = require("@marigold/system");
+var import_system72 = require("@marigold/system");
 
 // src/TagGroup/Tag.tsx
-var import_react56 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var import_button6 = require("@react-aria/button");
-var import_focus20 = require("@react-aria/focus");
+var import_focus19 = require("@react-aria/focus");
 var import_tag = require("@react-aria/tag");
-var import_utils30 = require("@react-aria/utils");
-var import_system69 = require("@marigold/system");
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_utils29 = require("@react-aria/utils");
+var import_system71 = require("@marigold/system");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var CloseButton2 = ({ className, ...props }) => {
-  const ref = (0, import_react56.useRef)(null);
+  const ref = (0, import_react57.useRef)(null);
   const { buttonProps } = (0, import_button6.useButton)({ ...props }, ref);
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("button", { className, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("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__ */ (0, import_jsx_runtime87.jsx)("button", { className, ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
 };
 var Tag = ({ variant, size, item, state, ...rest }) => {
   const props = {
     item,
     ...rest
   };
-  let ref = import_react56.default.useRef(null);
-  let { focusProps } = (0, import_focus20.useFocusRing)({ within: true });
+  let ref = import_react57.default.useRef(null);
+  let { focusProps } = (0, import_focus19.useFocusRing)({ within: true });
   const { rowProps, gridCellProps, allowsRemoving, removeButtonProps } = (0, import_tag.useTag)(
     {
       ...props,
@@ -3963,20 +4026,20 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
     state,
     ref
   );
-  const classNames2 = (0, import_system69.useClassNames)({ component: "Tag", variant, size });
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  const classNames2 = (0, import_system71.useClassNames)({ component: "Tag", variant, size });
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     "span",
     {
       ref,
-      ...(0, import_utils30.mergeProps)(rowProps, focusProps),
+      ...(0, import_utils29.mergeProps)(rowProps, focusProps),
       className: classNames2.tag,
-      children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { ...gridCellProps, className: classNames2.gridCell, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { children: item.rendered }),
-        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ...gridCellProps, className: classNames2.gridCell, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: item.rendered }),
+        allowsRemoving && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           CloseButton2,
           {
             ...removeButtonProps,
-            className: (0, import_system69.cn)("flex items-center", classNames2.closeButton)
+            className: (0, import_system71.cn)("flex items-center", classNames2.closeButton)
           }
         )
       ] })
@@ -3985,8 +4048,8 @@ var Tag = ({ variant, size, item, state, ...rest }) => {
 };
 
 // src/TagGroup/TagGroup.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
-var import_react58 = require("react");
+var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_react59 = require("react");
 var TagGroup = ({
   width,
   required,
@@ -3999,14 +4062,14 @@ var TagGroup = ({
     validationState: error ? "invalid" : "valid",
     ...rest
   };
-  const inputRef = (0, import_react57.useRef)(null);
+  const inputRef = (0, import_react58.useRef)(null);
   const state = (0, import_list.useListState)(props);
   const { gridProps, labelProps, descriptionProps, errorMessageProps } = (0, import_tag2.useTagGroup)(props, state, inputRef);
-  const stateProps = (0, import_system70.useStateProps)({
+  const stateProps = (0, import_system72.useStateProps)({
     error,
     required
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
     FieldBase,
     {
       width,
@@ -4019,13 +4082,13 @@ var TagGroup = ({
       errorMessageProps,
       stateProps,
       ...gridProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         "div",
         {
           role: "presentation",
           ref: inputRef,
           className: "flex flex-wrap items-start gap-1",
-          children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_react58.createElement)(
+          children: [...state.collection].map((item) => /* @__PURE__ */ (0, import_react59.createElement)(
             Tag,
             {
               ...item.props,
@@ -4051,11 +4114,11 @@ Tag2.Group = TagGroup;
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/XLoader/XLoader.tsx
-var import_react59 = require("react");
-var import_system71 = require("@marigold/system");
-var import_jsx_runtime87 = require("react/jsx-runtime");
-var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
-  import_system71.SVG,
+var import_react60 = require("react");
+var import_system73 = require("@marigold/system");
+var import_jsx_runtime89 = require("react/jsx-runtime");
+var XLoader = (0, import_react60.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+  import_system73.SVG,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -4064,13 +4127,13 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
     ...props,
     ...ref,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "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__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4083,12 +4146,12 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "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__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4101,12 +4164,12 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "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__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4119,12 +4182,12 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "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__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4137,12 +4200,12 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "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__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4155,12 +4218,12 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "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__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4173,12 +4236,12 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "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__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4191,12 +4254,12 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "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__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4209,12 +4272,12 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "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__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4227,12 +4290,12 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "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__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4245,12 +4308,12 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "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__ */ (0, import_jsx_runtime87.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "animate",
             {
               attributeName: "opacity",
@@ -4268,43 +4331,43 @@ var XLoader = (0, import_react59.forwardRef)((props, ref) => /* @__PURE__ */ (0,
 ));
 
 // src/Tabs/Tabs.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 var import_tabs3 = require("@react-aria/tabs");
 var import_collections7 = require("@react-stately/collections");
 var import_tabs4 = require("@react-stately/tabs");
-var import_system74 = require("@marigold/system");
+var import_system76 = require("@marigold/system");
 
 // src/Tabs/Context.ts
-var import_react60 = require("react");
-var TabContext = (0, import_react60.createContext)({});
-var useTabContext = () => (0, import_react60.useContext)(TabContext);
+var import_react61 = require("react");
+var TabContext = (0, import_react61.createContext)({});
+var useTabContext = () => (0, import_react61.useContext)(TabContext);
 
 // src/Tabs/Tab.tsx
-var import_react61 = require("react");
-var import_interactions14 = require("@react-aria/interactions");
+var import_react62 = require("react");
+var import_interactions13 = require("@react-aria/interactions");
 var import_tabs = require("@react-aria/tabs");
-var import_utils31 = require("@react-aria/utils");
-var import_system72 = require("@marigold/system");
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_utils30 = require("@react-aria/utils");
+var import_system74 = require("@marigold/system");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var Tab = ({ item, state }) => {
   const { key, rendered } = item;
-  const ref = (0, import_react61.useRef)(null);
+  const ref = (0, import_react62.useRef)(null);
   const { tabProps, isSelected } = (0, import_tabs.useTab)({ key }, state, ref);
   const disabled = tabProps["aria-disabled"];
-  const { hoverProps, isHovered } = (0, import_interactions14.useHover)({
+  const { hoverProps, isHovered } = (0, import_interactions13.useHover)({
     isDisabled: disabled || isSelected
   });
-  const { focusProps } = (0, import_interactions14.useFocus)({});
-  const stateProps = (0, import_system72.useStateProps)({ active: isSelected, hover: isHovered });
+  const { focusProps } = (0, import_interactions13.useFocus)({});
+  const stateProps = (0, import_system74.useStateProps)({ active: isSelected, hover: isHovered });
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
     "div",
     {
-      className: (0, import_system72.cn)(
+      className: (0, import_system74.cn)(
         "flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
         classNames2.tab
       ),
-      ...(0, import_utils31.mergeProps)(tabProps, stateProps, focusProps, hoverProps),
+      ...(0, import_utils30.mergeProps)(tabProps, stateProps, focusProps, hoverProps),
       ref,
       children: rendered
     }
@@ -4312,21 +4375,21 @@ var Tab = ({ item, state }) => {
 };
 
 // src/Tabs/TabPanel.tsx
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_tabs2 = require("@react-aria/tabs");
-var import_system73 = require("@marigold/system");
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_system75 = require("@marigold/system");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var TabPanel = ({ state, ...props }) => {
   var _a;
-  const ref = (0, import_react62.useRef)(null);
+  const ref = (0, import_react63.useRef)(null);
   const { tabPanelProps } = (0, import_tabs2.useTabPanel)(props, state, ref);
   const selectedItemProps = (_a = state.selectedItem) == null ? void 0 : _a.props;
   const { classNames: classNames2 } = useTabContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_system73.cn)(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_system75.cn)(classNames2.tabpanel), ref, ...tabPanelProps, children: selectedItemProps == null ? void 0 : selectedItemProps.children });
 };
 
 // src/Tabs/Tabs.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var Tabs = ({
   space = 2,
   size = "medium",
@@ -4335,31 +4398,31 @@ var Tabs = ({
   ...rest
 }) => {
   var _a;
-  const ref = (0, import_react63.useRef)(null);
+  const ref = (0, import_react64.useRef)(null);
   const props = {
     isDisabled: disabled,
     ...rest
   };
   const state = (0, import_tabs4.useTabListState)(props);
   const { tabListProps } = (0, import_tabs3.useTabList)(props, state, ref);
-  const classNames2 = (0, import_system74.useClassNames)({
+  const classNames2 = (0, import_system76.useClassNames)({
     component: "Tabs",
     size,
     variant
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_system74.cn)(classNames2.container), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: (0, import_system76.cn)(classNames2.container), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       "div",
       {
-        className: (0, import_system74.cn)("flex", import_system74.gapSpace[space], classNames2.tabs),
+        className: (0, import_system76.cn)("flex", import_system76.gapSpace[space], classNames2.tabs),
         ...tabListProps,
         ref,
         children: [...state.collection].map((item) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Tab, { item, state }, item.key);
+          return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Tab, { item, state }, item.key);
         })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TabPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key)
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(TabPanel, { state }, (_a = state.selectedItem) == null ? void 0 : _a.key)
   ] }) });
 };
 Tabs.Item = import_collections7.Item;