@marigold/components 5.2.0 → 5.4.0

package/dist/index.mjs

@@ -68,12 +68,15 @@ var Aspect = ({
 );
 
 // src/Autocomplete/Autocomplete.tsx
-import React18, { useRef as useRef5 } from "react";
+import React17, { useRef as useRef5 } from "react";
 import { useSearchAutocomplete } from "@react-aria/autocomplete";
 import { useFilter } from "@react-aria/i18n";
 import { useComboBoxState } from "@react-stately/combobox";
 import { Item } from "@react-stately/collections";
-import { SVG as SVG3 } from "@marigold/system";
+import {
+  SVG as SVG3,
+  useComponentStyles as useComponentStyles7
+} from "@marigold/system";
 
 // src/FieldBase/FieldBase.tsx
 import React6 from "react";
@@ -228,63 +231,78 @@ var FieldBase = ({
   );
 };
 
-// src/Input/InputField.tsx
+// src/Input/Input.tsx
 import React7, { forwardRef } from "react";
-import { Box as Box5 } from "@marigold/system";
-var InputField = forwardRef(
-  ({ type = "text", ...props }, ref) => {
+import {
+  Box as Box5,
+  useComponentStyles as useComponentStyles4,
+  useStateProps
+} from "@marigold/system";
+var Input = forwardRef(
+  ({ type = "text", icon, action, variant, size, ...props }, ref) => {
+    const styles = useComponentStyles4(
+      "Input",
+      { variant, size },
+      { parts: ["input", "icon", "container"] }
+    );
+    const stateProps = useStateProps({
+      hasIcon: icon ? true : false
+    });
     return /* @__PURE__ */ React7.createElement(
       Box5,
       {
-        __baseCSS: { border: 0, width: "100%", outline: "none" },
-        ...props,
-        ref,
-        as: "input",
-        type
-      }
+        __baseCSS: {
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          width: "100%"
+        },
+        css: styles.container
+      },
+      /* @__PURE__ */ React7.createElement(
+        Box5,
+        {
+          __baseCSS: { border: 0, width: "100%", outline: "none", pl: 16 },
+          ...props,
+          ...stateProps,
+          as: "input",
+          ref,
+          css: styles.input,
+          type
+        }
+      ),
+      icon && /* @__PURE__ */ React7.createElement(
+        Box5,
+        {
+          __baseCSS: {
+            position: "absolute",
+            pointerEvents: "none",
+            left: 8
+          },
+          css: styles.icon
+        },
+        icon
+      ),
+      /* @__PURE__ */ React7.createElement(
+        Box5,
+        {
+          __baseCSS: {
+            display: "inline-flex",
+            position: "absolute",
+            right: 8
+          }
+        },
+        action
+      )
     );
   }
 );
 
-// src/Input/Input.tsx
-import {
-  Box as Box6,
-  useComponentStyles as useComponentStyles4
-} from "@marigold/system";
-import React8 from "react";
-var Input = ({
-  space = "xsmall",
-  children,
-  variant,
-  size,
-  ...props
-}) => {
-  const [leading, input, trailing] = React8.Children.toArray(children);
-  const styles = useComponentStyles4("Input", { variant, size });
-  return /* @__PURE__ */ React8.createElement(
-    Box6,
-    {
-      __baseCSS: {
-        display: "flex",
-        alignItems: "center",
-        width: "100%",
-        gap: space
-      },
-      css: styles,
-      ...props
-    },
-    leading,
-    input,
-    trailing
-  );
-};
-Input.Field = InputField;
-
 // src/ListBox/ListBox.tsx
-import React11, { forwardRef as forwardRef2 } from "react";
+import React10, { forwardRef as forwardRef2 } from "react";
 import { useObjectRef } from "@react-aria/utils";
 import {
-  Box as Box9,
+  Box as Box8,
   useComponentStyles as useComponentStyles5
 } from "@marigold/system";
 import { useListBox } from "@react-aria/listbox";
@@ -295,15 +313,15 @@ var ListBoxContext = createContext2({});
 var useListBoxContext = () => useContext2(ListBoxContext);
 
 // src/ListBox/ListBoxSection.tsx
-import React10 from "react";
+import React9 from "react";
 import { useListBoxSection } from "@react-aria/listbox";
-import { Box as Box8 } from "@marigold/system";
+import { Box as Box7 } from "@marigold/system";
 
 // src/ListBox/ListBoxOption.tsx
-import React9, { useRef } from "react";
+import React8, { useRef } from "react";
 import { useOption } from "@react-aria/listbox";
 import { mergeProps } from "@react-aria/utils";
-import { Box as Box7, useStateProps } from "@marigold/system";
+import { Box as Box6, useStateProps as useStateProps2 } from "@marigold/system";
 var ListBoxOption = ({ item, state }) => {
   const ref = useRef(null);
   const { optionProps, isSelected, isDisabled, isFocused } = useOption(
@@ -315,13 +333,13 @@ var ListBoxOption = ({ item, state }) => {
   );
   const { onPointerUp, ...props } = optionProps;
   const { styles } = useListBoxContext();
-  const stateProps = useStateProps({
+  const stateProps = useStateProps2({
     selected: isSelected,
     disabled: isDisabled,
     focusVisible: isFocused
   });
-  return /* @__PURE__ */ React9.createElement(
-    Box7,
+  return /* @__PURE__ */ React8.createElement(
+    Box6,
     {
       as: "li",
       ref,
@@ -339,15 +357,15 @@ var ListBoxSection = ({ section, state }) => {
     "aria-label": section["aria-label"]
   });
   const { styles } = useListBoxContext();
-  return /* @__PURE__ */ React10.createElement(Box8, { as: "li", css: styles.section, ...itemProps }, section.rendered && /* @__PURE__ */ React10.createElement(Box8, { css: styles.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ React10.createElement(
-    Box8,
+  return /* @__PURE__ */ React9.createElement(Box7, { as: "li", css: styles.section, ...itemProps }, section.rendered && /* @__PURE__ */ React9.createElement(Box7, { css: styles.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ React9.createElement(
+    Box7,
     {
       as: "ul",
       __baseCSS: { listStyle: "none", p: 0 },
       css: styles.list,
       ...groupProps
     },
-    [...section.childNodes].map((node) => /* @__PURE__ */ React10.createElement(ListBoxOption, { key: node.key, item: node, state }))
+    [...section.childNodes].map((node) => /* @__PURE__ */ React9.createElement(ListBoxOption, { key: node.key, item: node, state }))
   ));
 };
 
@@ -361,8 +379,8 @@ var ListBox = forwardRef2(
       { variant, size },
       { parts: ["container", "list", "option", "section", "sectionTitle"] }
     );
-    return /* @__PURE__ */ React11.createElement(ListBoxContext.Provider, { value: { styles } }, /* @__PURE__ */ React11.createElement(Box9, { css: styles.container }, /* @__PURE__ */ React11.createElement(
-      Box9,
+    return /* @__PURE__ */ React10.createElement(ListBoxContext.Provider, { value: { styles } }, /* @__PURE__ */ React10.createElement(Box8, { css: styles.container }, /* @__PURE__ */ React10.createElement(
+      Box8,
       {
         as: "ul",
         ref: innerRef,
@@ -371,25 +389,25 @@ var ListBox = forwardRef2(
         ...listBoxProps
       },
       [...state.collection].map(
-        (item) => item.type === "section" ? /* @__PURE__ */ React11.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React11.createElement(ListBoxOption, { key: item.key, item, state })
+        (item) => item.type === "section" ? /* @__PURE__ */ React10.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React10.createElement(ListBoxOption, { key: item.key, item, state })
       )
     )));
   }
 );
 
 // src/Overlay/Modal.tsx
-import React13, { forwardRef as forwardRef3 } from "react";
+import React12, { forwardRef as forwardRef3 } from "react";
 import { FocusScope } from "@react-aria/focus";
 import { useModal, useOverlay, usePreventScroll } from "@react-aria/overlays";
 import { mergeProps as mergeProps2, useObjectRef as useObjectRef2 } from "@react-aria/utils";
 
 // src/Overlay/Underlay.tsx
-import React12 from "react";
-import { Box as Box10, useComponentStyles as useComponentStyles6 } from "@marigold/system";
+import React11 from "react";
+import { Box as Box9, useComponentStyles as useComponentStyles6 } from "@marigold/system";
 var Underlay = ({ size, variant, ...props }) => {
   const styles = useComponentStyles6("Underlay", { size, variant });
-  return /* @__PURE__ */ React12.createElement(
-    Box10,
+  return /* @__PURE__ */ React11.createElement(
+    Box9,
     {
       __baseCSS: {
         position: "fixed",
@@ -417,7 +435,7 @@ var Modal = forwardRef3(
     );
     usePreventScroll();
     const { modalProps } = useModal({});
-    return /* @__PURE__ */ React13.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React13.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React12.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React12.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ React12.createElement(
       "div",
       {
         style: {
@@ -432,13 +450,13 @@ var Modal = forwardRef3(
         ref: modalRef,
         ...mergeProps2(props, overlayProps, modalProps)
       },
-      /* @__PURE__ */ React13.createElement("div", { style: { pointerEvents: "auto" } }, children)
+      /* @__PURE__ */ React12.createElement("div", { style: { pointerEvents: "auto" } }, children)
     ));
   }
 );
 
 // src/Overlay/Overlay.tsx
-import React14, { useRef as useRef2 } from "react";
+import React13, { useRef as useRef2 } from "react";
 import { Transition } from "react-transition-group";
 import {
   Overlay as ReactAriaOverlay
@@ -461,7 +479,7 @@ var Overlay = ({ children, container, open }) => {
   if (!mountOverlay) {
     return null;
   }
-  return /* @__PURE__ */ React14.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React14.createElement(Transition, { nodeRef, timeout: duration, in: open, appear: true }, (state) => /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React13.createElement(Transition, { nodeRef, timeout: duration, in: open, appear: true }, (state) => /* @__PURE__ */ React13.createElement(
     "div",
     {
       ref: nodeRef,
@@ -476,7 +494,7 @@ var Overlay = ({ children, container, open }) => {
 };
 
 // src/Overlay/Popover.tsx
-import React15, { forwardRef as forwardRef4, useRef as useRef3 } from "react";
+import React14, { forwardRef as forwardRef4, useRef as useRef3 } from "react";
 import {
   DismissButton,
   usePopover
@@ -487,7 +505,7 @@ var Popover = forwardRef4(
     const fallbackRef = useRef3(null);
     const popoverRef = ref || fallbackRef;
     let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ React15.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ React15.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
+    return /* @__PURE__ */ React14.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ React14.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
   }
 );
 var PopoverWrapper = forwardRef4(
@@ -508,7 +526,7 @@ var PopoverWrapper = forwardRef4(
       },
       state
     );
-    return /* @__PURE__ */ React15.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React15.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React14.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React14.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React14.createElement(
       "div",
       {
         ...popoverProps,
@@ -519,16 +537,16 @@ var PopoverWrapper = forwardRef4(
         ref,
         role: "presentation"
       },
-      !isNonModal && /* @__PURE__ */ React15.createElement(DismissButton, { onDismiss: state.close }),
+      !isNonModal && /* @__PURE__ */ React14.createElement(DismissButton, { onDismiss: state.close }),
       children,
-      /* @__PURE__ */ React15.createElement(DismissButton, { onDismiss: state.close })
+      /* @__PURE__ */ React14.createElement(DismissButton, { onDismiss: state.close })
     ));
   }
 );
 
 // src/Overlay/Tray.tsx
-import React16 from "react";
-import { Box as Box11 } from "@marigold/system";
+import React15 from "react";
+import { Box as Box10 } from "@marigold/system";
 import { FocusScope as FocusScope3 } from "@react-aria/focus";
 import {
   DismissButton as DismissButton2,
@@ -539,7 +557,7 @@ import { forwardRef as forwardRef5 } from "react";
 var Tray = forwardRef5(
   ({ state, children, ...props }, ref) => {
     const trayRef = useObjectRef3(ref);
-    return /* @__PURE__ */ React16.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React16.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
+    return /* @__PURE__ */ React15.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React15.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
   }
 );
 var TrayWrapper = forwardRef5(
@@ -552,29 +570,30 @@ var TrayWrapper = forwardRef5(
       state,
       ref
     );
-    return /* @__PURE__ */ React16.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React16.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React16.createElement(
-      Box11,
+    return /* @__PURE__ */ React15.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React15.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React15.createElement(
+      Box10,
       {
         ...modalProps,
         ref,
         __baseCSS: { position: "absolute", width: "100%", bottom: 0 },
         "data-testid": "tray"
       },
-      /* @__PURE__ */ React16.createElement(DismissButton2, { onDismiss: state.close }),
+      /* @__PURE__ */ React15.createElement(DismissButton2, { onDismiss: state.close }),
       children,
-      /* @__PURE__ */ React16.createElement(DismissButton2, { onDismiss: state.close })
+      /* @__PURE__ */ React15.createElement(DismissButton2, { onDismiss: state.close })
     )));
   }
 );
 
 // src/Autocomplete/ClearButton.tsx
-import React17, { useRef as useRef4 } from "react";
+import React16, { useRef as useRef4 } from "react";
 import { useHover } from "@react-aria/interactions";
 import { useFocusRing } from "@react-aria/focus";
 import { useButton } from "@react-aria/button";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { Box as Box12, useStateProps as useStateProps2 } from "@marigold/system";
+import { Box as Box11, useStateProps as useStateProps3 } from "@marigold/system";
 var ClearButton = ({
+  css,
   preventFocus,
   disabled,
   onClick,
@@ -610,57 +629,50 @@ var ClearButton = ({
   if (preventFocus) {
     delete buttonProps.tabIndex;
   }
-  const stateProps = useStateProps2({
+  const stateProps = useStateProps3({
     active: isPressed,
     focusVisible: isFocusVisible,
     hover: isHovered
   });
-  return /* @__PURE__ */ React17.createElement(
-    Box12,
+  return /* @__PURE__ */ React16.createElement(
+    Box11,
     {
       ...mergeProps3(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       as: "button",
       ref: buttonRef,
-      css: {
+      __baseCSS: {
         appearance: "none",
         border: "none",
         p: 0,
-        cursor: "pointer"
-      }
+        cursor: "pointer",
+        height: 16,
+        width: 16
+      },
+      css
     },
-    /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React16.createElement(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 20 20",
-        fill: "currentColor",
-        height: 20,
-        width: 20
+        fill: "currentColor"
       },
-      /* @__PURE__ */ React17.createElement("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
+      /* @__PURE__ */ React16.createElement("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
     )
   );
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var SearchIcon = () => /* @__PURE__ */ React18.createElement(
+var SearchIcon = ({ css }) => /* @__PURE__ */ React17.createElement(
   SVG3,
   {
     xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 20 20",
+    viewBox: "0 0 24 24",
     fill: "currentColor",
-    height: 16,
-    width: 16
+    css
   },
-  /* @__PURE__ */ React18.createElement(
-    "path",
-    {
-      fillRule: "evenodd",
-      d: "M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z",
-      clipRule: "evenodd"
-    }
-  )
+  /* @__PURE__ */ React17.createElement("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
 );
 var Autocomplete = ({
   disabled,
@@ -670,6 +682,8 @@ var Autocomplete = ({
   onChange,
   value,
   defaultValue,
+  variant,
+  size,
   width,
   ...rest
 }) => {
@@ -713,7 +727,12 @@ var Autocomplete = ({
   );
   const errorMessageProps = { "aria-invalid": error };
   const { isDisabled, ...restClearButtonProps } = clearButtonProps;
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
+  const styles = useComponentStyles7(
+    "Autocomplete",
+    { variant, size },
+    { parts: ["icon", "clear"] }
+  );
+  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
     FieldBase,
     {
       label: props.label,
@@ -725,15 +744,24 @@ var Autocomplete = ({
       disabled,
       width
     },
-    /* @__PURE__ */ React18.createElement(Input, null, /* @__PURE__ */ React18.createElement(SearchIcon, null), /* @__PURE__ */ React18.createElement(Input.Field, { ...inputProps, ref: inputRef }), state.inputValue !== "" && /* @__PURE__ */ React18.createElement(
-      ClearButton,
+    /* @__PURE__ */ React17.createElement(
+      Input,
       {
-        preventFocus: true,
-        disabled: isDisabled,
-        ...restClearButtonProps
+        ...inputProps,
+        ref: inputRef,
+        icon: /* @__PURE__ */ React17.createElement(SearchIcon, { css: { height: 16, width: 16, ...styles.icon } }),
+        action: state.inputValue !== "" ? /* @__PURE__ */ React17.createElement(
+          ClearButton,
+          {
+            preventFocus: true,
+            disabled: isDisabled,
+            css: styles.clear,
+            ...restClearButtonProps
+          }
+        ) : void 0
       }
-    ))
-  ), /* @__PURE__ */ React18.createElement(
+    )
+  ), /* @__PURE__ */ React17.createElement(
     Popover,
     {
       state,
@@ -742,21 +770,21 @@ var Autocomplete = ({
       scrollRef: listBoxRef,
       isNonModal: true
     },
-    /* @__PURE__ */ React18.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+    /* @__PURE__ */ React17.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
   ));
 };
 Autocomplete.Item = Item;
 
 // src/Badge/Badge.tsx
-import React19 from "react";
-import { useComponentStyles as useComponentStyles7 } from "@marigold/system";
+import React18 from "react";
+import { useComponentStyles as useComponentStyles8 } from "@marigold/system";
 var Badge = ({ variant, size, children, ...props }) => {
-  const styles = useComponentStyles7("Badge", { variant, size });
-  return /* @__PURE__ */ React19.createElement(Box, { ...props, css: styles }, children);
+  const styles = useComponentStyles8("Badge", { variant, size });
+  return /* @__PURE__ */ React18.createElement(Box, { ...props, css: styles }, children);
 };
 
 // src/Breakout/Breakout.tsx
-import React20 from "react";
+import React19 from "react";
 var useAlignment = (direction) => {
   switch (direction) {
     case "right":
@@ -777,7 +805,7 @@ var Breakout = ({
 }) => {
   const alignItems = useAlignment(alignY);
   const justifyContent = useAlignment(alignX);
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React19.createElement(
     Box,
     {
       css: {
@@ -795,26 +823,26 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-import React21 from "react";
+import React20 from "react";
 import {
-  Box as Box13,
-  useComponentStyles as useComponentStyles8
+  Box as Box12,
+  useComponentStyles as useComponentStyles9
 } from "@marigold/system";
 var Body = ({ children, variant, size, ...props }) => {
-  const styles = useComponentStyles8("Body", { variant, size });
-  return /* @__PURE__ */ React21.createElement(Box13, { as: "section", ...props, css: styles }, children);
+  const styles = useComponentStyles9("Body", { variant, size });
+  return /* @__PURE__ */ React20.createElement(Box12, { as: "section", ...props, css: styles }, children);
 };
 
 // src/Button/Button.tsx
-import React22, { forwardRef as forwardRef6 } from "react";
+import React21, { forwardRef as forwardRef6 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
 import { useHover as useHover2 } from "@react-aria/interactions";
 import { mergeProps as mergeProps4, useObjectRef as useObjectRef4 } from "@react-aria/utils";
 import {
-  Box as Box14,
-  useComponentStyles as useComponentStyles9,
-  useStateProps as useStateProps3
+  Box as Box13,
+  useComponentStyles as useComponentStyles10,
+  useStateProps as useStateProps4
 } from "@marigold/system";
 var Button = forwardRef6(
   ({
@@ -855,14 +883,14 @@ var Button = forwardRef6(
       },
       buttonRef
     );
-    const styles = useComponentStyles9("Button", { variant, size });
-    const stateProps = useStateProps3({
+    const styles = useComponentStyles10("Button", { variant, size });
+    const stateProps = useStateProps4({
       active: isPressed,
       focusVisible: isFocusVisible,
       hover: isHovered
     });
-    return /* @__PURE__ */ React22.createElement(
-      Box14,
+    return /* @__PURE__ */ React21.createElement(
+      Box13,
       {
         ...mergeProps4(buttonProps, focusProps, hoverProps, props),
         ...stateProps,
@@ -887,10 +915,10 @@ var Button = forwardRef6(
 );
 
 // src/Card/Card.tsx
-import React23 from "react";
+import React22 from "react";
 import {
-  Box as Box15,
-  useComponentStyles as useComponentStyles10
+  Box as Box14,
+  useComponentStyles as useComponentStyles11
 } from "@marigold/system";
 var Card = ({
   children,
@@ -905,18 +933,18 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const styles = useComponentStyles10("Card", { variant, size });
-  return /* @__PURE__ */ React23.createElement(Box15, { ...props, css: [styles, { p, px, py, pt, pb, pl, pr }] }, children);
+  const styles = useComponentStyles11("Card", { variant, size });
+  return /* @__PURE__ */ React22.createElement(Box14, { ...props, css: [styles, { p, px, py, pt, pb, pl, pr }] }, children);
 };
 
 // src/Center/Center.tsx
-import React24 from "react";
+import React23 from "react";
 var Center = ({
   maxWidth,
   space = "none",
   children,
   ...props
-}) => /* @__PURE__ */ React24.createElement(
+}) => /* @__PURE__ */ React23.createElement(
   Box,
   {
     css: {
@@ -935,25 +963,25 @@ var Center = ({
 );
 
 // src/Checkbox/Checkbox.tsx
-import React26, { forwardRef as forwardRef7 } from "react";
+import React25, { forwardRef as forwardRef7 } from "react";
 import { useCheckbox, useCheckboxGroupItem } from "@react-aria/checkbox";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useHover as useHover3 } from "@react-aria/interactions";
 import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
 import { useToggleState } from "@react-stately/toggle";
 import {
-  Box as Box17,
-  useComponentStyles as useComponentStyles11,
-  useStateProps as useStateProps5
+  Box as Box16,
+  useComponentStyles as useComponentStyles12,
+  useStateProps as useStateProps6
 } from "@marigold/system";
 
 // src/Checkbox/CheckboxGroup.tsx
-import React25, { createContext as createContext3, useContext as useContext3 } from "react";
+import React24, { createContext as createContext3, useContext as useContext3 } from "react";
 import { useCheckboxGroup } from "@react-aria/checkbox";
 import {
   useCheckboxGroupState
 } from "@react-stately/checkbox";
-import { Box as Box16, useStateProps as useStateProps4 } from "@marigold/system";
+import { Box as Box15, useStateProps as useStateProps5 } from "@marigold/system";
 var CheckboxGroupContext = createContext3(
   null
 );
@@ -975,12 +1003,12 @@ var CheckboxGroup = ({
   };
   const state = useCheckboxGroupState(props);
   const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
-  const stateProps = useStateProps4({
+  const stateProps = useStateProps5({
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React24.createElement(
     FieldBase,
     {
       label: props.label,
@@ -995,8 +1023,8 @@ var CheckboxGroup = ({
       required,
       ...groupProps
     },
-    /* @__PURE__ */ React25.createElement(
-      Box16,
+    /* @__PURE__ */ React24.createElement(
+      Box15,
       {
         role: "presentation",
         __baseCSS: {
@@ -1005,13 +1033,13 @@ var CheckboxGroup = ({
           alignItems: "start"
         }
       },
-      /* @__PURE__ */ React25.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children)
+      /* @__PURE__ */ React24.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children)
     )
   );
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ React26.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React26.createElement(
+var CheckMark = () => /* @__PURE__ */ React25.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React25.createElement(
   "path",
   {
     fill: "currentColor",
@@ -1019,7 +1047,7 @@ var CheckMark = () => /* @__PURE__ */ React26.createElement("svg", { viewBox: "0
     d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
   }
 ));
-var IndeterminateMark = () => /* @__PURE__ */ React26.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React26.createElement(
+var IndeterminateMark = () => /* @__PURE__ */ React25.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React25.createElement(
   "path",
   {
     fill: "currentColor",
@@ -1027,8 +1055,8 @@ var IndeterminateMark = () => /* @__PURE__ */ React26.createElement("svg", { wid
     d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
   }
 ));
-var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React26.createElement(
-  Box17,
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React25.createElement(
+  Box16,
   {
     "aria-hidden": "true",
     __baseCSS: {
@@ -1046,7 +1074,7 @@ var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React2
     css,
     ...props
   },
-  indeterminate ? /* @__PURE__ */ React26.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React26.createElement(CheckMark, null) : null
+  indeterminate ? /* @__PURE__ */ React25.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React25.createElement(CheckMark, null) : null
 );
 var Checkbox = forwardRef7(
   ({
@@ -1097,7 +1125,7 @@ var Checkbox = forwardRef7(
       }),
       inputRef
     );
-    const styles = useComponentStyles11(
+    const styles = useComponentStyles12(
       "Checkbox",
       {
         variant,
@@ -1107,7 +1135,7 @@ var Checkbox = forwardRef7(
     );
     const { hoverProps, isHovered } = useHover3({});
     const { isFocusVisible, focusProps } = useFocusRing3();
-    const stateProps = useStateProps5({
+    const stateProps = useStateProps6({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -1116,8 +1144,8 @@ var Checkbox = forwardRef7(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ React26.createElement(
-      Box17,
+    return /* @__PURE__ */ React25.createElement(
+      Box16,
       {
         as: "label",
         __baseCSS: {
@@ -1130,8 +1158,8 @@ var Checkbox = forwardRef7(
         ...hoverProps,
         ...stateProps
       },
-      /* @__PURE__ */ React26.createElement(
-        Box17,
+      /* @__PURE__ */ React25.createElement(
+        Box16,
         {
           as: "input",
           ref: inputRef,
@@ -1149,7 +1177,7 @@ var Checkbox = forwardRef7(
           ...focusProps
         }
       ),
-      /* @__PURE__ */ React26.createElement(
+      /* @__PURE__ */ React25.createElement(
         Icon,
         {
           checked: inputProps.checked,
@@ -1158,13 +1186,13 @@ var Checkbox = forwardRef7(
           ...stateProps
         }
       ),
-      props.children && /* @__PURE__ */ React26.createElement(Box17, { css: styles.label, ...stateProps }, props.children)
+      props.children && /* @__PURE__ */ React25.createElement(Box16, { css: styles.label, ...stateProps }, props.children)
     );
   }
 );
 
 // src/Columns/Columns.tsx
-import React27, {
+import React26, {
   Children,
   cloneElement,
   isValidElement
@@ -1184,7 +1212,7 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React26.createElement(
     Box,
     {
       css: {
@@ -1203,7 +1231,7 @@ var Columns = ({
       },
       ...props
     },
-    Children.map(children, (child, idx) => /* @__PURE__ */ React27.createElement(
+    Children.map(children, (child, idx) => /* @__PURE__ */ React26.createElement(
       Box,
       {
         css: {
@@ -1217,7 +1245,7 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-import React28 from "react";
+import React27 from "react";
 import { size as tokenSize } from "@marigold/tokens";
 var ALIGN_ITEMS = {
   left: "start",
@@ -1248,7 +1276,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = tokenSize[contentType][size];
-  return /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React27.createElement(
     Box,
     {
       css: {
@@ -1266,29 +1294,29 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import React33, { useRef as useRef7 } from "react";
+import React32, { useRef as useRef7 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
 import {
-  Box as Box19,
-  useComponentStyles as useComponentStyles14
+  Box as Box18,
+  useComponentStyles as useComponentStyles15
 } from "@marigold/system";
 
 // src/Header/Header.tsx
-import React29 from "react";
+import React28 from "react";
 import {
-  useComponentStyles as useComponentStyles12
+  useComponentStyles as useComponentStyles13
 } from "@marigold/system";
 var Header = ({ children, variant, size, ...props }) => {
-  const styles = useComponentStyles12("Header", { variant, size });
-  return /* @__PURE__ */ React29.createElement(Box, { as: "header", ...props, css: styles }, children);
+  const styles = useComponentStyles13("Header", { variant, size });
+  return /* @__PURE__ */ React28.createElement(Box, { as: "header", ...props, css: styles }, children);
 };
 
 // src/Headline/Headline.tsx
-import React30 from "react";
+import React29 from "react";
 import {
-  Box as Box18,
-  useComponentStyles as useComponentStyles13
+  Box as Box17,
+  useComponentStyles as useComponentStyles14
 } from "@marigold/system";
 var Headline = ({
   children,
@@ -1299,12 +1327,12 @@ var Headline = ({
   level = "1",
   ...props
 }) => {
-  const styles = useComponentStyles13("Headline", {
+  const styles = useComponentStyles14("Headline", {
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ React30.createElement(
-    Box18,
+  return /* @__PURE__ */ React29.createElement(
+    Box17,
     {
       as: `h${level}`,
       ...props,
@@ -1320,7 +1348,7 @@ var DialogContext = createContext4({});
 var useDialogContext = () => useContext4(DialogContext);
 
 // src/Dialog/DialogTrigger.tsx
-import React31, { useRef as useRef6 } from "react";
+import React30, { useRef as useRef6 } from "react";
 import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState } from "@react-stately/overlays";
 var DialogTrigger = ({
@@ -1328,11 +1356,11 @@ var DialogTrigger = ({
   dismissable = true,
   keyboardDismissable = true
 }) => {
-  const [dialogTrigger, dialog] = React31.Children.toArray(children);
+  const [dialogTrigger, dialog] = React30.Children.toArray(children);
   const dialogTriggerRef = useRef6(null);
   const state = useOverlayTriggerState({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React31.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React30.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React30.createElement(
     PressResponder,
     {
       ref: dialogTriggerRef,
@@ -1340,7 +1368,7 @@ var DialogTrigger = ({
       onPress: state.toggle
     },
     dialogTrigger
-  ), /* @__PURE__ */ React31.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React31.createElement(
+  ), /* @__PURE__ */ React30.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React30.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1354,7 +1382,7 @@ var DialogTrigger = ({
 
 // src/Dialog/DialogController.tsx
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
-import React32 from "react";
+import React31 from "react";
 var DialogController = ({
   children,
   dismissable = true,
@@ -1367,7 +1395,7 @@ var DialogController = ({
     onOpenChange
   });
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React32.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React32.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React31.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React31.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React31.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1389,8 +1417,8 @@ var CloseButton = ({ css }) => {
     },
     ref
   );
-  return /* @__PURE__ */ React33.createElement(Box19, { css: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React33.createElement(
-    Box19,
+  return /* @__PURE__ */ React32.createElement(Box18, { css: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React32.createElement(
+    Box18,
     {
       as: "button",
       __baseCSS: {
@@ -1406,7 +1434,7 @@ var CloseButton = ({ css }) => {
       ref,
       ...buttonProps
     },
-    /* @__PURE__ */ React33.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React32.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React32.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -1417,9 +1445,9 @@ var CloseButton = ({ css }) => {
   ));
 };
 var addTitleProps = (children, titleProps) => {
-  const childs = React33.Children.toArray(children);
+  const childs = React32.Children.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => React33.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => React32.isValidElement(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1427,7 +1455,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = React33.cloneElement(
+  const titleChild = React32.cloneElement(
     childs[titleIndex],
     titleProps
   );
@@ -1444,40 +1472,40 @@ var Dialog = ({
   const ref = useRef7(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
-  const styles = useComponentStyles14(
+  const styles = useComponentStyles15(
     "Dialog",
     { variant, size },
     { parts: ["container", "closeButton"] }
   );
-  return /* @__PURE__ */ React33.createElement(Box19, { __baseCSS: { bg: "#fff" }, css: styles.container, ...dialogProps }, closeButton && /* @__PURE__ */ React33.createElement(CloseButton, { css: styles.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
+  return /* @__PURE__ */ React32.createElement(Box18, { __baseCSS: { bg: "#fff" }, css: styles.container, ...dialogProps }, closeButton && /* @__PURE__ */ React32.createElement(CloseButton, { css: styles.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
 };
 Dialog.Trigger = DialogTrigger;
 Dialog.Controller = DialogController;
 
 // src/Divider/Divider.tsx
-import React34 from "react";
+import React33 from "react";
 import { useSeparator } from "@react-aria/separator";
-import { Box as Box20, useComponentStyles as useComponentStyles15 } from "@marigold/system";
+import { Box as Box19, useComponentStyles as useComponentStyles16 } from "@marigold/system";
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = useSeparator(props);
-  const styles = useComponentStyles15("Divider", { variant });
-  return /* @__PURE__ */ React34.createElement(Box20, { css: styles, ...props, ...separatorProps });
+  const styles = useComponentStyles16("Divider", { variant });
+  return /* @__PURE__ */ React33.createElement(Box19, { css: styles, ...props, ...separatorProps });
 };
 
 // src/Footer/Footer.tsx
-import React35 from "react";
+import React34 from "react";
 import {
-  useComponentStyles as useComponentStyles16
+  useComponentStyles as useComponentStyles17
 } from "@marigold/system";
 var Footer = ({ children, variant, size, ...props }) => {
-  const styles = useComponentStyles16("Footer", { variant, size });
-  return /* @__PURE__ */ React35.createElement(Box, { as: "footer", ...props, css: styles }, children);
+  const styles = useComponentStyles17("Footer", { variant, size });
+  return /* @__PURE__ */ React34.createElement(Box, { as: "footer", ...props, css: styles }, children);
 };
 
 // src/Image/Image.tsx
-import React36 from "react";
-import { Box as Box21 } from "@marigold/system";
-import { useComponentStyles as useComponentStyles17 } from "@marigold/system";
+import React35 from "react";
+import { Box as Box20 } from "@marigold/system";
+import { useComponentStyles as useComponentStyles18 } from "@marigold/system";
 var Image = ({
   variant,
   size,
@@ -1485,14 +1513,14 @@ var Image = ({
   position,
   ...props
 }) => {
-  const styles = useComponentStyles17("Image", { variant, size });
+  const styles = useComponentStyles18("Image", { variant, size });
   const css = {
     ...styles,
     objectFit: fit,
     objectPosition: position
   };
-  return /* @__PURE__ */ React36.createElement(
-    Box21,
+  return /* @__PURE__ */ React35.createElement(
+    Box20,
     {
       ...props,
       as: "img",
@@ -1503,7 +1531,7 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import React37 from "react";
+import React36 from "react";
 var ALIGNMENT_X = {
   left: "flex-start",
   center: "center",
@@ -1520,7 +1548,7 @@ var Inline = ({
   alignY = "center",
   children,
   ...props
-}) => /* @__PURE__ */ React37.createElement(
+}) => /* @__PURE__ */ React36.createElement(
   Box,
   {
     css: {
@@ -1536,14 +1564,14 @@ var Inline = ({
 );
 
 // src/Inset/Inset.tsx
-import React38 from "react";
-import { Box as Box22 } from "@marigold/system";
-var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ React38.createElement(Box22, { css: space ? { p: space } : { px: spaceX, py: spaceY } }, children);
+import React37 from "react";
+import { Box as Box21 } from "@marigold/system";
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ React37.createElement(Box21, { css: space ? { p: space } : { px: spaceX, py: spaceY } }, children);
 
 // src/Link/Link.tsx
-import React39, { forwardRef as forwardRef8 } from "react";
+import React38, { forwardRef as forwardRef8 } from "react";
 import { useLink } from "@react-aria/link";
-import { useComponentStyles as useComponentStyles18 } from "@marigold/system";
+import { useComponentStyles as useComponentStyles19 } from "@marigold/system";
 import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
 var Link = forwardRef8(
   ({
@@ -1565,8 +1593,8 @@ var Link = forwardRef8(
       },
       linkRef
     );
-    const styles = useComponentStyles18("Link", { variant, size });
-    return /* @__PURE__ */ React39.createElement(
+    const styles = useComponentStyles19("Link", { variant, size });
+    return /* @__PURE__ */ React38.createElement(
       Box,
       {
         as,
@@ -1582,10 +1610,10 @@ var Link = forwardRef8(
 );
 
 // src/List/List.tsx
-import React41 from "react";
+import React40 from "react";
 import {
-  Box as Box24,
-  useComponentStyles as useComponentStyles19
+  Box as Box23,
+  useComponentStyles as useComponentStyles20
 } from "@marigold/system";
 
 // src/List/Context.ts
@@ -1594,11 +1622,11 @@ var ListContext = createContext5({});
 var useListContext = () => useContext5(ListContext);
 
 // src/List/ListItem.tsx
-import React40 from "react";
-import { Box as Box23 } from "@marigold/system";
+import React39 from "react";
+import { Box as Box22 } from "@marigold/system";
 var ListItem = ({ children, ...props }) => {
   const { styles } = useListContext();
-  return /* @__PURE__ */ React40.createElement(Box23, { ...props, as: "li", css: styles }, children);
+  return /* @__PURE__ */ React39.createElement(Box22, { ...props, as: "li", css: styles }, children);
 };
 
 // src/List/List.tsx
@@ -1609,23 +1637,23 @@ var List = ({
   size,
   ...props
 }) => {
-  const styles = useComponentStyles19(
+  const styles = useComponentStyles20(
     "List",
     { variant, size },
     { parts: ["ul", "ol", "item"] }
   );
-  return /* @__PURE__ */ React41.createElement(Box24, { ...props, as, css: styles[as] }, /* @__PURE__ */ React41.createElement(ListContext.Provider, { value: { styles: styles.item } }, children));
+  return /* @__PURE__ */ React40.createElement(Box23, { ...props, as, css: styles[as] }, /* @__PURE__ */ React40.createElement(ListContext.Provider, { value: { styles: styles.item } }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import React44, { useRef as useRef10 } from "react";
+import React43, { useRef as useRef10 } from "react";
 import { useMenu } from "@react-aria/menu";
 import { Item as Item2 } from "@react-stately/collections";
 import { useTreeState } from "@react-stately/tree";
 import {
-  Box as Box26,
-  useComponentStyles as useComponentStyles20
+  Box as Box25,
+  useComponentStyles as useComponentStyles21
 } from "@marigold/system";
 
 // src/Menu/Context.ts
@@ -1637,7 +1665,7 @@ var MenuContext = createContext6({});
 var useMenuContext = () => useContext6(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-import React42, { useRef as useRef8 } from "react";
+import React41, { useRef as useRef8 } from "react";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { PressResponder as PressResponder2 } from "@react-aria/interactions";
 import { useMenuTrigger } from "@react-aria/menu";
@@ -1649,7 +1677,7 @@ var MenuTrigger = ({
   onOpenChange,
   children
 }) => {
-  const [menuTrigger, menu] = React42.Children.toArray(children);
+  const [menuTrigger, menu] = React41.Children.toArray(children);
   const menuTriggerRef = useRef8(null);
   const menuRef = useObjectRef7();
   const state = useMenuTriggerState({
@@ -1669,7 +1697,7 @@ var MenuTrigger = ({
     autoFocus: state.focusStrategy
   };
   const isSmallScreen = useResponsiveValue([true, false, false], 2);
-  return /* @__PURE__ */ React42.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React41.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React41.createElement(
     PressResponder2,
     {
       ...menuTriggerProps,
@@ -1677,15 +1705,15 @@ var MenuTrigger = ({
       isPressed: state.isOpen
     },
     menuTrigger
-  ), isSmallScreen ? /* @__PURE__ */ React42.createElement(Tray, { state }, menu) : /* @__PURE__ */ React42.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
+  ), isSmallScreen ? /* @__PURE__ */ React41.createElement(Tray, { state }, menu) : /* @__PURE__ */ React41.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
 };
 
 // src/Menu/MenuItem.tsx
-import React43, { useRef as useRef9 } from "react";
+import React42, { useRef as useRef9 } from "react";
 import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
-import { Box as Box25, useStateProps as useStateProps6 } from "@marigold/system";
+import { Box as Box24, useStateProps as useStateProps7 } from "@marigold/system";
 var MenuItem = ({ item, state, onAction, css }) => {
   const ref = useRef9(null);
   const { onClose } = useMenuContext();
@@ -1699,12 +1727,12 @@ var MenuItem = ({ item, state, onAction, css }) => {
     ref
   );
   const { isFocusVisible, focusProps } = useFocusRing4();
-  const stateProps = useStateProps6({
+  const stateProps = useStateProps7({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ React43.createElement(
-    Box25,
+  return /* @__PURE__ */ React42.createElement(
+    Box24,
     {
       as: "li",
       ref,
@@ -1730,13 +1758,13 @@ var Menu = ({ variant, size, ...props }) => {
   const state = useTreeState({ ...ownProps, selectionMode: "none" });
   const { menuProps } = useMenu(ownProps, state, ref);
   useSyncRef({ ref: scrollRef }, ref);
-  const styles = useComponentStyles20(
+  const styles = useComponentStyles21(
     "Menu",
     { variant, size },
     { parts: ["container", "item"] }
   );
-  return /* @__PURE__ */ React44.createElement(
-    Box26,
+  return /* @__PURE__ */ React43.createElement(
+    Box25,
     {
       as: "ul",
       ref,
@@ -1748,7 +1776,7 @@ var Menu = ({ variant, size, ...props }) => {
       css: styles.container,
       ...menuProps
     },
-    [...state.collection].map((item) => /* @__PURE__ */ React44.createElement(
+    [...state.collection].map((item) => /* @__PURE__ */ React43.createElement(
       MenuItem,
       {
         key: item.key,
@@ -1764,15 +1792,15 @@ Menu.Trigger = MenuTrigger;
 Menu.Item = Item2;
 
 // src/Menu/ActionMenu.tsx
-import React45 from "react";
+import React44 from "react";
 import { SVG as SVG4 } from "@marigold/system";
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ React45.createElement(Menu.Trigger, null, /* @__PURE__ */ React45.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ React45.createElement(SVG4, { viewBox: "0 0 24 24" }, /* @__PURE__ */ React45.createElement("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }))), /* @__PURE__ */ React45.createElement(Menu, { ...props }));
+  return /* @__PURE__ */ React44.createElement(Menu.Trigger, null, /* @__PURE__ */ React44.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ React44.createElement(SVG4, { viewBox: "0 0 24 24" }, /* @__PURE__ */ React44.createElement("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }))), /* @__PURE__ */ React44.createElement(Menu, { ...props }));
 };
 
 // src/Message/Message.tsx
-import React46 from "react";
-import { useComponentStyles as useComponentStyles21 } from "@marigold/system";
+import React45 from "react";
+import { useComponentStyles as useComponentStyles22 } from "@marigold/system";
 var Message = ({
   messageTitle,
   variant = "info",
@@ -1780,7 +1808,7 @@ var Message = ({
   children,
   ...props
 }) => {
-  const styles = useComponentStyles21(
+  const styles = useComponentStyles22(
     "Message",
     {
       variant,
@@ -1788,14 +1816,14 @@ var Message = ({
     },
     { parts: ["container", "icon", "title", "content"] }
   );
-  var icon = /* @__PURE__ */ React46.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React46.createElement("path", { d: "M12 2.85938C6.95437 2.85938 2.85938 6.95437 2.85938 12C2.85938 17.0456 6.95437 21.1406 12 21.1406C17.0456 21.1406 21.1406 17.0456 21.1406 12C21.1406 6.95437 17.0456 2.85938 12 2.85938ZM12.7875 15.9374H11.2125V11.2124H12.7875V15.9374ZM12.7875 9.6375H11.2125V8.0625H12.7875V9.6375Z" }));
+  var icon = /* @__PURE__ */ React45.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React45.createElement("path", { d: "M12 2.85938C6.95437 2.85938 2.85938 6.95437 2.85938 12C2.85938 17.0456 6.95437 21.1406 12 21.1406C17.0456 21.1406 21.1406 17.0456 21.1406 12C21.1406 6.95437 17.0456 2.85938 12 2.85938ZM12.7875 15.9374H11.2125V11.2124H12.7875V15.9374ZM12.7875 9.6375H11.2125V8.0625H12.7875V9.6375Z" }));
   if (variant === "warning") {
-    icon = /* @__PURE__ */ React46.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React46.createElement("path", { d: "M19.2 3H4.8C3.81 3 3.009 3.81 3.009 4.8L3 21L6.6 17.4H19.2C20.19 17.4 21 16.59 21 15.6V4.8C21 3.81 20.19 3 19.2 3ZM12.9 13.8H11.1V12H12.9V13.8ZM12.9 10.2001H11.1V6.60008H12.9V10.2001Z" }));
+    icon = /* @__PURE__ */ React45.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React45.createElement("path", { d: "M19.2 3H4.8C3.81 3 3.009 3.81 3.009 4.8L3 21L6.6 17.4H19.2C20.19 17.4 21 16.59 21 15.6V4.8C21 3.81 20.19 3 19.2 3ZM12.9 13.8H11.1V12H12.9V13.8ZM12.9 10.2001H11.1V6.60008H12.9V10.2001Z" }));
   }
   if (variant === "error") {
-    icon = /* @__PURE__ */ React46.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React46.createElement("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" }));
+    icon = /* @__PURE__ */ React45.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React45.createElement("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" }));
   }
-  return /* @__PURE__ */ React46.createElement(Box, { css: styles.container, ...props }, /* @__PURE__ */ React46.createElement(Box, { __baseCSS: { display: "flex", alignItems: "top", gap: 4 } }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React45.createElement(Box, { css: styles.container, ...props }, /* @__PURE__ */ React45.createElement(Box, { __baseCSS: { display: "flex", alignItems: "top", gap: 4 } }, /* @__PURE__ */ React45.createElement(
     Box,
     {
       role: "presentation",
@@ -1803,11 +1831,11 @@ var Message = ({
       css: styles.icon
     },
     icon
-  ), /* @__PURE__ */ React46.createElement(Box, { css: styles.title }, messageTitle)), /* @__PURE__ */ React46.createElement(Box, { css: styles.content }, children));
+  ), /* @__PURE__ */ React45.createElement(Box, { css: styles.title }, messageTitle)), /* @__PURE__ */ React45.createElement(Box, { css: styles.content }, children));
 };
 
 // src/NumberField/NumberField.tsx
-import React48, { forwardRef as forwardRef9 } from "react";
+import React47, { forwardRef as forwardRef9 } from "react";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useHover as useHover5 } from "@react-aria/interactions";
 import { useLocale } from "@react-aria/i18n";
@@ -1815,26 +1843,26 @@ import { useNumberField } from "@react-aria/numberfield";
 import { mergeProps as mergeProps7, useObjectRef as useObjectRef8 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import {
-  Box as Box28,
-  useComponentStyles as useComponentStyles22,
-  useStateProps as useStateProps8
+  Box as Box27,
+  useComponentStyles as useComponentStyles23,
+  useStateProps as useStateProps9
 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import React47, { useRef as useRef11 } from "react";
+import React46, { useRef as useRef11 } from "react";
 import { useButton as useButton4 } from "@react-aria/button";
 import { useHover as useHover4 } from "@react-aria/interactions";
 import { mergeProps as mergeProps6 } from "@react-aria/utils";
-import { Box as Box27, useStateProps as useStateProps7 } from "@marigold/system";
-var Plus = () => /* @__PURE__ */ React47.createElement(
-  Box27,
+import { Box as Box26, useStateProps as useStateProps8 } from "@marigold/system";
+var Plus = () => /* @__PURE__ */ React46.createElement(
+  Box26,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16 },
     viewBox: "0 0 20 20",
     fill: "currentColor"
   },
-  /* @__PURE__ */ React47.createElement(
+  /* @__PURE__ */ React46.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -1843,15 +1871,15 @@ var Plus = () => /* @__PURE__ */ React47.createElement(
     }
   )
 );
-var Minus = () => /* @__PURE__ */ React47.createElement(
-  Box27,
+var Minus = () => /* @__PURE__ */ React46.createElement(
+  Box26,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16 },
     viewBox: "0 0 20 20",
     fill: "currentColor"
   },
-  /* @__PURE__ */ React47.createElement(
+  /* @__PURE__ */ React46.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -1867,14 +1895,14 @@ var StepButton = ({ direction, css, ...props }) => {
     ref
   );
   const { hoverProps, isHovered } = useHover4(props);
-  const stateProps = useStateProps7({
+  const stateProps = useStateProps8({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React47.createElement(
-    Box27,
+  return /* @__PURE__ */ React46.createElement(
+    Box26,
     {
       __baseCSS: {
         display: "flex",
@@ -1886,7 +1914,7 @@ var StepButton = ({ direction, css, ...props }) => {
       ...mergeProps6(buttonProps, hoverProps),
       ...stateProps
     },
-    /* @__PURE__ */ React47.createElement(Icon3, null)
+    /* @__PURE__ */ React46.createElement(Icon3, null)
   );
 };
 
@@ -1929,19 +1957,19 @@ var NumberField = forwardRef9(
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const styles = useComponentStyles22(
+    const styles = useComponentStyles23(
       "NumberField",
       { variant, size },
       { parts: ["group", "stepper"] }
     );
-    const stateProps = useStateProps8({
+    const stateProps = useStateProps9({
       hover: isHovered,
       focus: isFocused,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ React48.createElement(
+    return /* @__PURE__ */ React47.createElement(
       FieldBase,
       {
         label: props.label,
@@ -1957,8 +1985,8 @@ var NumberField = forwardRef9(
         size,
         width
       },
-      /* @__PURE__ */ React48.createElement(
-        Box28,
+      /* @__PURE__ */ React47.createElement(
+        Box27,
         {
           "data-group": true,
           __baseCSS: {
@@ -1974,7 +2002,7 @@ var NumberField = forwardRef9(
           ...mergeProps7(groupProps, focusProps, hoverProps),
           ...stateProps
         },
-        showStepper && /* @__PURE__ */ React48.createElement(
+        showStepper && /* @__PURE__ */ React47.createElement(
           StepButton,
           {
             direction: "down",
@@ -1982,15 +2010,17 @@ var NumberField = forwardRef9(
             ...decrementButtonProps
           }
         ),
-        /* @__PURE__ */ React48.createElement(Input, { variant, size, ...stateProps }, /* @__PURE__ */ React48.createElement(
-          Input.Field,
+        /* @__PURE__ */ React47.createElement(
+          Input,
           {
             ref: inputRef,
+            variant,
+            size,
             ...inputProps,
             ...stateProps
           }
-        )),
-        showStepper && /* @__PURE__ */ React48.createElement(
+        ),
+        showStepper && /* @__PURE__ */ React47.createElement(
           StepButton,
           {
             direction: "up",
@@ -2008,7 +2038,7 @@ import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigol
 import { SSRProvider } from "@react-aria/ssr";
 
 // src/Provider/MarigoldProvider.tsx
-import React49 from "react";
+import React48 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   Global,
@@ -2031,17 +2061,17 @@ function MarigoldProvider({
       Nested themes with a "root" property must specify a "selector" to prevent accidentally overriding global CSS`
     );
   }
-  return /* @__PURE__ */ React49.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React48.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React48.createElement(
     Global,
     {
       normalizeDocument: isTopLevel && normalizeDocument,
       selector
     }
-  ), isTopLevel ? /* @__PURE__ */ React49.createElement(OverlayProvider, null, children) : children);
+  ), isTopLevel ? /* @__PURE__ */ React48.createElement(OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-import React51, {
+import React50, {
   forwardRef as forwardRef10
 } from "react";
 import { useHover as useHover6 } from "@react-aria/interactions";
@@ -2049,9 +2079,9 @@ import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 import { useRadio } from "@react-aria/radio";
 import { mergeProps as mergeProps8, useObjectRef as useObjectRef9 } from "@react-aria/utils";
 import {
-  Box as Box30,
-  useComponentStyles as useComponentStyles23,
-  useStateProps as useStateProps10
+  Box as Box29,
+  useComponentStyles as useComponentStyles24,
+  useStateProps as useStateProps11
 } from "@marigold/system";
 
 // src/Radio/Context.ts
@@ -2062,10 +2092,10 @@ var RadioGroupContext = createContext7(
 var useRadioGroupContext = () => useContext7(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import React50 from "react";
+import React49 from "react";
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
-import { Box as Box29, useStateProps as useStateProps9 } from "@marigold/system";
+import { Box as Box28, useStateProps as useStateProps10 } from "@marigold/system";
 var RadioGroup = ({
   children,
   orientation = "vertical",
@@ -2085,12 +2115,12 @@ var RadioGroup = ({
   };
   const state = useRadioGroupState(props);
   const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup(props, state);
-  const stateProps = useStateProps9({
+  const stateProps = useStateProps10({
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ React50.createElement(
+  return /* @__PURE__ */ React49.createElement(
     FieldBase,
     {
       width,
@@ -2106,8 +2136,8 @@ var RadioGroup = ({
       required,
       ...radioGroupProps
     },
-    /* @__PURE__ */ React50.createElement(
-      Box29,
+    /* @__PURE__ */ React49.createElement(
+      Box28,
       {
         role: "presentation",
         "data-orientation": orientation,
@@ -2118,15 +2148,15 @@ var RadioGroup = ({
           gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
         }
       },
-      /* @__PURE__ */ React50.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
+      /* @__PURE__ */ React49.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
     )
   );
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ React51.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ React51.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
-var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React51.createElement(
-  Box30,
+var Dot = () => /* @__PURE__ */ React50.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ React50.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
+var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React50.createElement(
+  Box29,
   {
     "aria-hidden": "true",
     __baseCSS: {
@@ -2143,7 +2173,7 @@ var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React51.createElemen
     css,
     ...props
   },
-  checked ? /* @__PURE__ */ React51.createElement(Dot, null) : null
+  checked ? /* @__PURE__ */ React50.createElement(Dot, null) : null
 );
 var Radio = forwardRef10(
   ({ width, disabled, ...props }, ref) => {
@@ -2160,14 +2190,14 @@ var Radio = forwardRef10(
       state,
       inputRef
     );
-    const styles = useComponentStyles23(
+    const styles = useComponentStyles24(
       "Radio",
       { variant: variant || props.variant, size: size || props.size },
       { parts: ["container", "label", "radio"] }
     );
     const { hoverProps, isHovered } = useHover6({ isDisabled: disabled });
     const { isFocusVisible, focusProps } = useFocusRing6();
-    const stateProps = useStateProps10({
+    const stateProps = useStateProps11({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -2175,8 +2205,8 @@ var Radio = forwardRef10(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ React51.createElement(
-      Box30,
+    return /* @__PURE__ */ React50.createElement(
+      Box29,
       {
         as: "label",
         __baseCSS: {
@@ -2189,8 +2219,8 @@ var Radio = forwardRef10(
         css: styles.container,
         ...mergeProps8(hoverProps, stateProps)
       },
-      /* @__PURE__ */ React51.createElement(
-        Box30,
+      /* @__PURE__ */ React50.createElement(
+        Box29,
         {
           as: "input",
           ref: inputRef,
@@ -2207,15 +2237,15 @@ var Radio = forwardRef10(
           ...mergeProps8(inputProps, focusProps)
         }
       ),
-      /* @__PURE__ */ React51.createElement(Icon2, { checked: inputProps.checked, css: styles.radio, ...stateProps }),
-      /* @__PURE__ */ React51.createElement(Box30, { css: styles.label, ...stateProps }, props.children)
+      /* @__PURE__ */ React50.createElement(Icon2, { checked: inputProps.checked, css: styles.radio, ...stateProps }),
+      /* @__PURE__ */ React50.createElement(Box29, { css: styles.label, ...stateProps }, props.children)
     );
   }
 );
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-import React52, {
+import React51, {
   forwardRef as forwardRef11,
   useRef as useRef12
 } from "react";
@@ -2227,10 +2257,10 @@ import { useSelectState } from "@react-stately/select";
 import { Item as Item3, Section } from "@react-stately/collections";
 import { mergeProps as mergeProps9, useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import {
-  Box as Box31,
-  useComponentStyles as useComponentStyles24,
+  Box as Box30,
+  useComponentStyles as useComponentStyles25,
   useResponsiveValue as useResponsiveValue2,
-  useStateProps as useStateProps11
+  useStateProps as useStateProps12
 } from "@marigold/system";
 
 // src/Select/intl.ts
@@ -2244,8 +2274,8 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ React52.createElement(
-  Box31,
+var Chevron = ({ css }) => /* @__PURE__ */ React51.createElement(
+  Box30,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16, fill: "none" },
@@ -2254,7 +2284,7 @@ var Chevron = ({ css }) => /* @__PURE__ */ React52.createElement(
     stroke: "currentColor",
     strokeWidth: 2
   },
-  /* @__PURE__ */ React52.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+  /* @__PURE__ */ React51.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
 );
 var Select = forwardRef11(
   ({
@@ -2295,18 +2325,18 @@ var Select = forwardRef11(
       buttonRef
     );
     const { focusProps, isFocusVisible } = useFocusRing7();
-    const styles = useComponentStyles24(
+    const styles = useComponentStyles25(
       "Select",
       { variant, size },
       { parts: ["container", "button", "icon"] }
     );
-    const stateProps = useStateProps11({
+    const stateProps = useStateProps12({
       disabled,
       error,
       focusVisible: isFocusVisible,
       expanded: state.isOpen
     });
-    return /* @__PURE__ */ React52.createElement(
+    return /* @__PURE__ */ React51.createElement(
       FieldBase,
       {
         variant,
@@ -2323,7 +2353,7 @@ var Select = forwardRef11(
         disabled,
         required
       },
-      /* @__PURE__ */ React52.createElement(
+      /* @__PURE__ */ React51.createElement(
         HiddenSelect,
         {
           state,
@@ -2333,8 +2363,8 @@ var Select = forwardRef11(
           isDisabled: disabled
         }
       ),
-      /* @__PURE__ */ React52.createElement(
-        Box31,
+      /* @__PURE__ */ React51.createElement(
+        Box30,
         {
           as: "button",
           __baseCSS: {
@@ -2349,8 +2379,8 @@ var Select = forwardRef11(
           ...mergeProps9(buttonProps, focusProps),
           ...stateProps
         },
-        /* @__PURE__ */ React52.createElement(
-          Box31,
+        /* @__PURE__ */ React51.createElement(
+          Box30,
           {
             css: {
               overflow: "hidden",
@@ -2360,9 +2390,9 @@ var Select = forwardRef11(
           },
           state.selectedItem ? state.selectedItem.rendered : props.placeholder
         ),
-        /* @__PURE__ */ React52.createElement(Chevron, { css: styles.icon })
+        /* @__PURE__ */ React51.createElement(Chevron, { css: styles.icon })
       ),
-      isSmallScreen ? /* @__PURE__ */ React52.createElement(Tray, { state }, /* @__PURE__ */ React52.createElement(
+      isSmallScreen ? /* @__PURE__ */ React51.createElement(Tray, { state }, /* @__PURE__ */ React51.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2371,7 +2401,7 @@ var Select = forwardRef11(
           size,
           ...menuProps
         }
-      )) : /* @__PURE__ */ React52.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React52.createElement(
+      )) : /* @__PURE__ */ React51.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React51.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2388,18 +2418,18 @@ Select.Option = Item3;
 Select.Section = Section;
 
 // src/Slider/Slider.tsx
-import React54, { forwardRef as forwardRef12 } from "react";
+import React53, { forwardRef as forwardRef12 } from "react";
 import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
 import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
-import { useComponentStyles as useComponentStyles25 } from "@marigold/system";
+import { useComponentStyles as useComponentStyles26 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
-import React53, { useEffect } from "react";
+import React52, { useEffect } from "react";
 import { useSliderThumb } from "@react-aria/slider";
 import { mergeProps as mergeProps10 } from "@react-aria/utils";
-import { useStateProps as useStateProps12 } from "@marigold/system";
+import { useStateProps as useStateProps13 } from "@marigold/system";
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 import { VisuallyHidden } from "@react-aria/visually-hidden";
@@ -2408,10 +2438,10 @@ import { VisuallyHidden } from "@react-aria/visually-hidden";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 var Thumb = ({ state, trackRef, styles, ...props }) => {
   const { disabled } = props;
-  const inputRef = React53.useRef(null);
+  const inputRef = React52.useRef(null);
   const { isFocusVisible, focusProps, isFocused } = useFocusRing8();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
-  const stateProps = useStateProps12({
+  const stateProps = useStateProps13({
     focus: focused,
     disabled
   });
@@ -2427,7 +2457,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
   useEffect(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ React53.createElement(
+  return /* @__PURE__ */ React52.createElement(
     Box,
     {
       __baseCSS: { top: "50%" },
@@ -2435,7 +2465,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
       ...thumbProps,
       ...stateProps
     },
-    /* @__PURE__ */ React53.createElement(VisuallyHidden, null, /* @__PURE__ */ React53.createElement(
+    /* @__PURE__ */ React52.createElement(VisuallyHidden, null, /* @__PURE__ */ React52.createElement(
       Box,
       {
         as: "input",
@@ -2462,12 +2492,12 @@ var Slider = forwardRef12(
       state,
       trackRef
     );
-    const styles = useComponentStyles25(
+    const styles = useComponentStyles26(
       "Slider",
       { variant, size },
       { parts: ["track", "thumb", "label", "output"] }
     );
-    return /* @__PURE__ */ React54.createElement(
+    return /* @__PURE__ */ React53.createElement(
       Box,
       {
         __baseCSS: {
@@ -2478,7 +2508,7 @@ var Slider = forwardRef12(
         },
         ...groupProps
       },
-      /* @__PURE__ */ React54.createElement(Box, { __baseCSS: { display: "flex", alignSelf: "stretch" } }, props.children && /* @__PURE__ */ React54.createElement(Box, { as: "label", __baseCSS: styles.label, ...labelProps }, props.children), /* @__PURE__ */ React54.createElement(
+      /* @__PURE__ */ React53.createElement(Box, { __baseCSS: { display: "flex", alignSelf: "stretch" } }, props.children && /* @__PURE__ */ React53.createElement(Box, { as: "label", __baseCSS: styles.label, ...labelProps }, props.children), /* @__PURE__ */ React53.createElement(
         Box,
         {
           as: "output",
@@ -2488,7 +2518,7 @@ var Slider = forwardRef12(
         },
         state.getThumbValueLabel(0)
       )),
-      /* @__PURE__ */ React54.createElement(
+      /* @__PURE__ */ React53.createElement(
         Box,
         {
           ...trackProps,
@@ -2499,7 +2529,7 @@ var Slider = forwardRef12(
             cursor: props.disabled ? "not-allowed" : "pointer"
           }
         },
-        /* @__PURE__ */ React54.createElement(
+        /* @__PURE__ */ React53.createElement(
           Box,
           {
             __baseCSS: {
@@ -2509,7 +2539,7 @@ var Slider = forwardRef12(
             css: styles.track
           }
         ),
-        /* @__PURE__ */ React54.createElement(
+        /* @__PURE__ */ React53.createElement(
           Thumb,
           {
             state,
@@ -2524,13 +2554,13 @@ var Slider = forwardRef12(
 );
 
 // src/Split/Split.tsx
-import React55 from "react";
-import { Box as Box32 } from "@marigold/system";
-var Split = (props) => /* @__PURE__ */ React55.createElement(Box32, { ...props, role: "separator", css: { flexGrow: 1 } });
+import React54 from "react";
+import { Box as Box31 } from "@marigold/system";
+var Split = (props) => /* @__PURE__ */ React54.createElement(Box31, { ...props, role: "separator", css: { flexGrow: 1 } });
 
 // src/Stack/Stack.tsx
-import React56 from "react";
-import { Box as Box33 } from "@marigold/system";
+import React55 from "react";
+import { Box as Box32 } from "@marigold/system";
 var ALIGNMENT_X2 = {
   none: "initial",
   left: "flex-start",
@@ -2550,8 +2580,8 @@ var Stack = ({
   alignY = "none",
   stretch = false,
   ...props
-}) => /* @__PURE__ */ React56.createElement(
-  Box33,
+}) => /* @__PURE__ */ React55.createElement(
+  Box32,
   {
     css: {
       display: "flex",
@@ -2568,14 +2598,14 @@ var Stack = ({
 );
 
 // src/Switch/Switch.tsx
-import React57, { forwardRef as forwardRef13 } from "react";
+import React56, { forwardRef as forwardRef13 } from "react";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
 import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
 import {
-  useComponentStyles as useComponentStyles26,
-  useStateProps as useStateProps13
+  useComponentStyles as useComponentStyles27,
+  useStateProps as useStateProps14
 } from "@marigold/system";
 var Switch = forwardRef13(
   ({
@@ -2599,18 +2629,18 @@ var Switch = forwardRef13(
     const state = useToggleState2(props);
     const { inputProps } = useSwitch(props, state, inputRef);
     const { isFocusVisible, focusProps } = useFocusRing9();
-    const stateProps = useStateProps13({
+    const stateProps = useStateProps14({
       checked: state.isSelected,
       disabled,
       readOnly,
       focus: isFocusVisible
     });
-    const styles = useComponentStyles26(
+    const styles = useComponentStyles27(
       "Switch",
       { variant, size },
       { parts: ["container", "label", "track", "thumb"] }
     );
-    return /* @__PURE__ */ React57.createElement(
+    return /* @__PURE__ */ React56.createElement(
       Box,
       {
         as: "label",
@@ -2624,7 +2654,7 @@ var Switch = forwardRef13(
         },
         css: styles.container
       },
-      /* @__PURE__ */ React57.createElement(
+      /* @__PURE__ */ React56.createElement(
         Box,
         {
           as: "input",
@@ -2643,8 +2673,8 @@ var Switch = forwardRef13(
           ...focusProps
         }
       ),
-      props.children && /* @__PURE__ */ React57.createElement(Box, { css: styles.label }, props.children),
-      /* @__PURE__ */ React57.createElement(
+      props.children && /* @__PURE__ */ React56.createElement(Box, { css: styles.label }, props.children),
+      /* @__PURE__ */ React56.createElement(
         Box,
         {
           __baseCSS: {
@@ -2658,7 +2688,7 @@ var Switch = forwardRef13(
           css: styles.track,
           ...stateProps
         },
-        /* @__PURE__ */ React57.createElement(
+        /* @__PURE__ */ React56.createElement(
           Box,
           {
             __baseCSS: {
@@ -2687,7 +2717,7 @@ var Switch = forwardRef13(
 );
 
 // src/Table/Table.tsx
-import React66, { useRef as useRef19 } from "react";
+import React65, { useRef as useRef19 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   Cell,
@@ -2698,8 +2728,8 @@ import {
   useTableState
 } from "@react-stately/table";
 import {
-  Box as Box39,
-  useComponentStyles as useComponentStyles28
+  Box as Box38,
+  useComponentStyles as useComponentStyles29
 } from "@marigold/system";
 
 // src/Table/Context.tsx
@@ -2708,19 +2738,19 @@ var TableContext = createContext8({});
 var useTableContext = () => useContext8(TableContext);
 
 // src/Table/TableBody.tsx
-import React58 from "react";
+import React57 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React58.createElement("tbody", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ React57.createElement("tbody", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableCell.tsx
-import React59, { useRef as useRef13 } from "react";
+import React58, { useRef as useRef13 } from "react";
 import { useTableCell } from "@react-aria/table";
 import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { Box as Box34, useStateProps as useStateProps14 } from "@marigold/system";
+import { Box as Box33, useStateProps as useStateProps15 } from "@marigold/system";
 var TableCell = ({ cell }) => {
   const ref = useRef13(null);
   const { interactive, state, styles } = useTableContext();
@@ -2742,9 +2772,9 @@ var TableCell = ({ cell }) => {
     onPointerDown: (e) => e.stopPropagation()
   };
   const { focusProps, isFocusVisible } = useFocusRing10();
-  const stateProps = useStateProps14({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React59.createElement(
-    Box34,
+  const stateProps = useStateProps15({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ React58.createElement(
+    Box33,
     {
       as: "td",
       ref,
@@ -2757,11 +2787,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React60, { useRef as useRef14 } from "react";
+import React59, { useRef as useRef14 } from "react";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
 import { mergeProps as mergeProps12 } from "@react-aria/utils";
-import { Box as Box35, useStateProps as useStateProps15 } from "@marigold/system";
+import { Box as Box34, useStateProps as useStateProps16 } from "@marigold/system";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2799,9 +2829,9 @@ var TableCheckboxCell = ({ cell }) => {
     useTableSelectionCheckbox({ key: cell.parentKey }, state)
   );
   const { focusProps, isFocusVisible } = useFocusRing11();
-  const stateProps = useStateProps15({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React60.createElement(
-    Box35,
+  const stateProps = useStateProps16({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ React59.createElement(
+    Box34,
     {
       as: "td",
       ref,
@@ -2814,22 +2844,22 @@ var TableCheckboxCell = ({ cell }) => {
       ...mergeProps12(gridCellProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ React60.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ React59.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-import React61, { useRef as useRef15 } from "react";
+import React60, { useRef as useRef15 } from "react";
 import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
 import { useHover as useHover7 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps13 } from "@react-aria/utils";
-import { Box as Box36, useStateProps as useStateProps16 } from "@marigold/system";
+import { Box as Box35, useStateProps as useStateProps17 } from "@marigold/system";
 var SortIndicator = ({
   direction = "ascending",
   visible
-}) => /* @__PURE__ */ React61.createElement(
-  Box36,
+}) => /* @__PURE__ */ React60.createElement(
+  Box35,
   {
     as: "span",
     role: "presentation",
@@ -2855,12 +2885,12 @@ var TableColumnHeader = ({ column }) => {
   );
   const { hoverProps, isHovered } = useHover7({});
   const { focusProps, isFocusVisible } = useFocusRing12();
-  const stateProps = useStateProps16({
+  const stateProps = useStateProps17({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React61.createElement(
-    Box36,
+  return /* @__PURE__ */ React60.createElement(
+    Box35,
     {
       as: "th",
       colSpan: column.colspan,
@@ -2871,7 +2901,7 @@ var TableColumnHeader = ({ column }) => {
       ...stateProps
     },
     column.rendered,
-    column.props.allowsSorting && /* @__PURE__ */ React61.createElement(
+    column.props.allowsSorting && /* @__PURE__ */ React60.createElement(
       SortIndicator,
       {
         direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
@@ -2882,35 +2912,35 @@ var TableColumnHeader = ({ column }) => {
 };
 
 // src/Table/TableHeader.tsx
-import React62 from "react";
+import React61 from "react";
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React62.createElement("thead", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ React61.createElement("thead", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React63, { useRef as useRef16 } from "react";
+import React62, { useRef as useRef16 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
   const ref = useRef16(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React63.createElement("tr", { ...rowProps, ref }, children);
+  return /* @__PURE__ */ React62.createElement("tr", { ...rowProps, ref }, children);
 };
 
 // src/Table/TableRow.tsx
-import React64, { useRef as useRef17 } from "react";
+import React63, { useRef as useRef17 } from "react";
 import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
 import { useHover as useHover8 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps14 } from "@react-aria/utils";
-import { Box as Box37, useComponentStyles as useComponentStyles27, useStateProps as useStateProps17 } from "@marigold/system";
+import { Box as Box36, useComponentStyles as useComponentStyles28, useStateProps as useStateProps18 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
   const ref = useRef17(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const { row: styles } = useComponentStyles27(
+  const { row: styles } = useComponentStyles28(
     "Table",
     { variant: variant || ctx.variant, size: size || ctx.size },
     { parts: ["row"] }
@@ -2928,15 +2958,15 @@ var TableRow = ({ children, row }) => {
   const { hoverProps, isHovered } = useHover8({
     isDisabled: disabled || !interactive
   });
-  const stateProps = useStateProps17({
+  const stateProps = useStateProps18({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React64.createElement(
-    Box37,
+  return /* @__PURE__ */ React63.createElement(
+    Box36,
     {
       as: "tr",
       ref,
@@ -2952,7 +2982,7 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React65, { useRef as useRef18 } from "react";
+import React64, { useRef as useRef18 } from "react";
 import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
 import { useHover as useHover9 } from "@react-aria/interactions";
 import {
@@ -2960,7 +2990,7 @@ import {
   useTableSelectAllCheckbox
 } from "@react-aria/table";
 import { mergeProps as mergeProps15 } from "@react-aria/utils";
-import { Box as Box38, useStateProps as useStateProps18 } from "@marigold/system";
+import { Box as Box37, useStateProps as useStateProps19 } from "@marigold/system";
 var TableSelectAllCell = ({ column }) => {
   const ref = useRef18(null);
   const { state, styles } = useTableContext();
@@ -2974,12 +3004,12 @@ var TableSelectAllCell = ({ column }) => {
   const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
   const { hoverProps, isHovered } = useHover9({});
   const { focusProps, isFocusVisible } = useFocusRing14();
-  const stateProps = useStateProps18({
+  const stateProps = useStateProps19({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React65.createElement(
-    Box38,
+  return /* @__PURE__ */ React64.createElement(
+    Box37,
     {
       as: "th",
       ref,
@@ -2992,7 +3022,7 @@ var TableSelectAllCell = ({ column }) => {
       ...mergeProps15(columnHeaderProps, hoverProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ React65.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ React64.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
@@ -3013,14 +3043,14 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = useTable(props, state, tableRef);
-  const styles = useComponentStyles28(
+  const styles = useComponentStyles29(
     "Table",
     { variant, size },
     { parts: ["table", "header", "row", "cell"] }
   );
   const { collection } = state;
-  return /* @__PURE__ */ React66.createElement(TableContext.Provider, { value: { state, interactive, styles } }, /* @__PURE__ */ React66.createElement(
-    Box39,
+  return /* @__PURE__ */ React65.createElement(TableContext.Provider, { value: { state, interactive, styles } }, /* @__PURE__ */ React65.createElement(
+    Box38,
     {
       as: "table",
       ref: tableRef,
@@ -3034,16 +3064,16 @@ var Table = ({
       css: styles.table,
       ...gridProps
     },
-    /* @__PURE__ */ React66.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React66.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...headerRow.childNodes].map(
+    /* @__PURE__ */ React65.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React65.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...headerRow.childNodes].map(
       (column) => {
         var _a;
-        return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React66.createElement(TableSelectAllCell, { key: column.key, column }) : /* @__PURE__ */ React66.createElement(TableColumnHeader, { key: column.key, column });
+        return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React65.createElement(TableSelectAllCell, { key: column.key, column }) : /* @__PURE__ */ React65.createElement(TableColumnHeader, { key: column.key, column });
       }
     )))),
-    /* @__PURE__ */ React66.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React66.createElement(TableRow, { key: row.key, row }, [...row.childNodes].map(
+    /* @__PURE__ */ React65.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React65.createElement(TableRow, { key: row.key, row }, [...row.childNodes].map(
       (cell) => {
         var _a;
-        return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React66.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ React66.createElement(TableCell, { key: cell.key, cell });
+        return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React65.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ React65.createElement(TableCell, { key: cell.key, cell });
       }
     ))))
   ));
@@ -3055,11 +3085,11 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React67 from "react";
+import React66 from "react";
 import {
-  useComponentStyles as useComponentStyles29
+  useComponentStyles as useComponentStyles30
 } from "@marigold/system";
-import { Box as Box40 } from "@marigold/system";
+import { Box as Box39 } from "@marigold/system";
 var Text = ({
   variant,
   size,
@@ -3067,18 +3097,19 @@ var Text = ({
   align,
   color,
   fontSize,
+  fontStyle,
   fontWeight,
   cursor,
   outline,
   children,
   ...props
 }) => {
-  const styles = useComponentStyles29("Text", {
+  const styles = useComponentStyles30("Text", {
     variant,
     size
   });
-  return /* @__PURE__ */ React67.createElement(
-    Box40,
+  return /* @__PURE__ */ React66.createElement(
+    Box39,
     {
       as: "p",
       ...props,
@@ -3090,6 +3121,7 @@ var Text = ({
           cursor,
           outline,
           fontSize,
+          fontStyle,
           fontWeight,
           textAlign: align
         }
@@ -3100,15 +3132,15 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import React68, { forwardRef as forwardRef14 } from "react";
+import React67, { forwardRef as forwardRef14 } from "react";
 import { useHover as useHover10 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useTextField } from "@react-aria/textfield";
 import { useObjectRef as useObjectRef13 } from "@react-aria/utils";
 import {
-  Box as Box41,
-  useComponentStyles as useComponentStyles30,
-  useStateProps as useStateProps19
+  Box as Box40,
+  useComponentStyles as useComponentStyles31,
+  useStateProps as useStateProps20
 } from "@marigold/system";
 var TextArea = forwardRef14(
   ({
@@ -3137,15 +3169,15 @@ var TextArea = forwardRef14(
     );
     const { hoverProps, isHovered } = useHover10({});
     const { focusProps, isFocusVisible } = useFocusRing15();
-    const stateProps = useStateProps19({
+    const stateProps = useStateProps20({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
       readOnly,
       error
     });
-    const styles = useComponentStyles30("TextArea", { variant, size });
-    return /* @__PURE__ */ React68.createElement(
+    const styles = useComponentStyles31("TextArea", { variant, size });
+    return /* @__PURE__ */ React67.createElement(
       FieldBase,
       {
         label,
@@ -3161,8 +3193,8 @@ var TextArea = forwardRef14(
         size,
         width
       },
-      /* @__PURE__ */ React68.createElement(
-        Box41,
+      /* @__PURE__ */ React67.createElement(
+        Box40,
         {
           as: "textarea",
           css: styles,
@@ -3179,12 +3211,12 @@ var TextArea = forwardRef14(
 );
 
 // src/TextField/TextField.tsx
-import React69, { forwardRef as forwardRef15 } from "react";
+import React68, { forwardRef as forwardRef15 } from "react";
 import { useHover as useHover11 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing16 } from "@react-aria/focus";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
 import { useObjectRef as useObjectRef14 } from "@react-aria/utils";
-import { useStateProps as useStateProps20 } from "@marigold/system";
+import { useStateProps as useStateProps21 } from "@marigold/system";
 var TextField = forwardRef15(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
@@ -3204,14 +3236,14 @@ var TextField = forwardRef15(
       isTextInput: true,
       autoFocus
     });
-    const stateProps = useStateProps20({
+    const stateProps = useStateProps21({
       hover: isHovered,
       focus: isFocused,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ React69.createElement(
+    return /* @__PURE__ */ React68.createElement(
       FieldBase,
       {
         label,
@@ -3227,8 +3259,8 @@ var TextField = forwardRef15(
         size,
         width
       },
-      /* @__PURE__ */ React69.createElement(Input, { ...stateProps }, /* @__PURE__ */ React69.createElement(
-        Input.Field,
+      /* @__PURE__ */ React68.createElement(
+        Input,
         {
           ref: inputRef,
           variant,
@@ -3238,13 +3270,13 @@ var TextField = forwardRef15(
           ...hoverProps,
           ...stateProps
         }
-      ))
+      )
     );
   }
 );
 
 // src/Tiles/Tiles.tsx
-import React70 from "react";
+import React69 from "react";
 import { useTheme as useTheme3 } from "@marigold/system";
 var Tiles = ({
   space = "none",
@@ -3260,7 +3292,7 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ React70.createElement(
+  return /* @__PURE__ */ React69.createElement(
     Box,
     {
       ...props,
@@ -3280,11 +3312,11 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-import React72 from "react";
+import React71 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import {
-  Box as Box42,
-  useComponentStyles as useComponentStyles31
+  Box as Box41,
+  useComponentStyles as useComponentStyles32
 } from "@marigold/system";
 
 // src/Tooltip/Context.ts
@@ -3293,7 +3325,7 @@ var TooltipContext = createContext9({});
 var useTooltipContext = () => useContext9(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React71, { useRef as useRef20 } from "react";
+import React70, { useRef as useRef20 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
@@ -3306,7 +3338,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = React71.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = React70.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -3334,7 +3366,7 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React71.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React71.createElement(
+  return /* @__PURE__ */ React70.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React70.createElement(
     TooltipContext.Provider,
     {
       value: {
@@ -3346,7 +3378,7 @@ var TooltipTrigger = ({
         ...positionProps
       }
     },
-    /* @__PURE__ */ React71.createElement(Overlay, { open: state.isOpen }, tooltip)
+    /* @__PURE__ */ React70.createElement(Overlay, { open: state.isOpen }, tooltip)
   ));
 };
 
@@ -3354,13 +3386,13 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = useTooltip({}, state);
-  const styles = useComponentStyles31(
+  const styles = useComponentStyles32(
     "Tooltip",
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ React72.createElement(
-    Box42,
+  return /* @__PURE__ */ React71.createElement(
+    Box41,
     {
       ...tooltipProps,
       ...rest,
@@ -3368,9 +3400,9 @@ var Tooltip = ({ children, variant, size }) => {
       css: styles.container,
       "data-placement": placement
     },
-    /* @__PURE__ */ React72.createElement("div", null, children),
-    /* @__PURE__ */ React72.createElement(
-      Box42,
+    /* @__PURE__ */ React71.createElement("div", null, children),
+    /* @__PURE__ */ React71.createElement(
+      Box41,
       {
         ...arrowProps,
         __baseCSS: {
@@ -3391,8 +3423,8 @@ Tooltip.Trigger = TooltipTrigger;
 
 // src/XLoader/XLoader.tsx
 import { SVG as SVG5 } from "@marigold/system";
-import React73, { forwardRef as forwardRef16 } from "react";
-var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement(
+import React72, { forwardRef as forwardRef16 } from "react";
+var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React72.createElement(
   SVG5,
   {
     id: "XLoader",
@@ -3402,14 +3434,14 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement
     ...props,
     ...ref
   },
-  /* @__PURE__ */ React73.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-  /* @__PURE__ */ React73.createElement(
+  /* @__PURE__ */ React72.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+  /* @__PURE__ */ React72.createElement(
     "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"
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React72.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3421,13 +3453,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement
       }
     )
   ),
-  /* @__PURE__ */ React73.createElement(
+  /* @__PURE__ */ React72.createElement(
     "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"
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React72.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3439,13 +3471,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement
       }
     )
   ),
-  /* @__PURE__ */ React73.createElement(
+  /* @__PURE__ */ React72.createElement(
     "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"
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React72.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3457,13 +3489,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement
       }
     )
   ),
-  /* @__PURE__ */ React73.createElement(
+  /* @__PURE__ */ React72.createElement(
     "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"
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React72.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3475,13 +3507,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement
       }
     )
   ),
-  /* @__PURE__ */ React73.createElement(
+  /* @__PURE__ */ React72.createElement(
     "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"
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React72.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3493,13 +3525,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement
       }
     )
   ),
-  /* @__PURE__ */ React73.createElement(
+  /* @__PURE__ */ React72.createElement(
     "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"
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React72.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3511,13 +3543,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement
       }
     )
   ),
-  /* @__PURE__ */ React73.createElement(
+  /* @__PURE__ */ React72.createElement(
     "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"
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React72.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3529,13 +3561,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement
       }
     )
   ),
-  /* @__PURE__ */ React73.createElement(
+  /* @__PURE__ */ React72.createElement(
     "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"
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React72.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3547,13 +3579,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement
       }
     )
   ),
-  /* @__PURE__ */ React73.createElement(
+  /* @__PURE__ */ React72.createElement(
     "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"
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React72.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3565,13 +3597,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement
       }
     )
   ),
-  /* @__PURE__ */ React73.createElement(
+  /* @__PURE__ */ React72.createElement(
     "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"
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React72.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3583,13 +3615,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement
       }
     )
   ),
-  /* @__PURE__ */ React73.createElement(
+  /* @__PURE__ */ React72.createElement(
     "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"
     },
-    /* @__PURE__ */ React73.createElement(
+    /* @__PURE__ */ React72.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3630,7 +3662,6 @@ export {
   Image,
   Inline,
   Input,
-  InputField,
   Inset,
   Label,
   Link,