@marigold/components 5.1.0 → 5.2.0

package/dist/index.mjs

@@ -67,16 +67,696 @@ var Aspect = ({
   children
 );
 
+// src/Autocomplete/Autocomplete.tsx
+import React18, { 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";
+
+// src/FieldBase/FieldBase.tsx
+import React6 from "react";
+import {
+  Box as Box4,
+  useComponentStyles as useComponentStyles3
+} from "@marigold/system";
+
+// src/Label/Label.tsx
+import React3 from "react";
+import { Box as Box2, SVG, useComponentStyles } from "@marigold/system";
+var Label = ({
+  as = "label",
+  required,
+  children,
+  variant,
+  size,
+  labelWidth,
+  ...props
+}) => {
+  const styles = useComponentStyles("Label", { size, variant });
+  return /* @__PURE__ */ React3.createElement(
+    Box2,
+    {
+      ...props,
+      as,
+      "aria-required": required,
+      __baseCSS: {
+        display: "flex",
+        width: labelWidth
+      },
+      css: styles
+    },
+    children,
+    required && /* @__PURE__ */ React3.createElement(SVG, { viewBox: "0 0 24 24", role: "presentation", size: 16, fill: "error" }, /* @__PURE__ */ React3.createElement("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" }))
+  );
+};
+
+// src/HelpText/HelpText.tsx
+import React4 from "react";
+import {
+  Box as Box3,
+  SVG as SVG2,
+  useComponentStyles as useComponentStyles2
+} from "@marigold/system";
+var HelpText = ({
+  variant,
+  size,
+  disabled,
+  description,
+  descriptionProps,
+  error,
+  errorMessage,
+  errorMessageProps,
+  ...props
+}) => {
+  var _a;
+  const hasErrorMessage = errorMessage && error;
+  const styles = useComponentStyles2(
+    "HelpText",
+    { variant, size },
+    { parts: ["container", "icon"] }
+  );
+  return /* @__PURE__ */ React4.createElement(
+    Box3,
+    {
+      ...hasErrorMessage ? errorMessageProps : descriptionProps,
+      ...props,
+      __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
+      css: styles.container
+    },
+    hasErrorMessage ? /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(
+      SVG2,
+      {
+        viewBox: "0 0 24 24",
+        role: "presentation",
+        size: ((_a = styles == null ? void 0 : styles.icon) == null ? void 0 : _a.size) || 16
+      },
+      /* @__PURE__ */ React4.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" })
+    ), errorMessage) : /* @__PURE__ */ React4.createElement(React4.Fragment, null, description)
+  );
+};
+
+// src/FieldBase/FieldGroup.tsx
+import React5 from "react";
+import { createContext, useContext } from "react";
+var FieldGroupContext = createContext({});
+var useFieldGroupContext = () => useContext(FieldGroupContext);
+var FieldGroup = ({ labelWidth, children }) => {
+  return /* @__PURE__ */ React5.createElement(FieldGroupContext.Provider, { value: { labelWidth } }, children);
+};
+
+// src/FieldBase/FieldBase.tsx
+var FieldBase = ({
+  children,
+  variant,
+  size,
+  width = "100%",
+  disabled,
+  required,
+  label,
+  labelProps,
+  description,
+  descriptionProps,
+  error,
+  errorMessage,
+  errorMessageProps,
+  stateProps,
+  ...props
+}) => {
+  const hasHelpText = !!description || errorMessage && error;
+  const style = useComponentStyles3("Field", { variant, size });
+  const { labelWidth } = useFieldGroupContext();
+  return /* @__PURE__ */ React6.createElement(
+    Box4,
+    {
+      ...props,
+      __baseCSS: {
+        display: "flex",
+        flexDirection: "column",
+        width,
+        position: "relative"
+      },
+      css: style
+    },
+    label && /* @__PURE__ */ React6.createElement(
+      Label,
+      {
+        required,
+        variant,
+        size,
+        labelWidth,
+        ...labelProps,
+        ...stateProps
+      },
+      label
+    ),
+    /* @__PURE__ */ React6.createElement(Box4, { __baseCSS: { display: "flex", flexDirection: "column" } }, children, hasHelpText && /* @__PURE__ */ React6.createElement(
+      HelpText,
+      {
+        ...stateProps,
+        variant,
+        size,
+        disabled,
+        description,
+        descriptionProps,
+        error,
+        errorMessage,
+        errorMessageProps
+      }
+    ))
+  );
+};
+
+// src/Input/InputField.tsx
+import React7, { forwardRef } from "react";
+import { Box as Box5 } from "@marigold/system";
+var InputField = forwardRef(
+  ({ type = "text", ...props }, ref) => {
+    return /* @__PURE__ */ React7.createElement(
+      Box5,
+      {
+        __baseCSS: { border: 0, width: "100%", outline: "none" },
+        ...props,
+        ref,
+        as: "input",
+        type
+      }
+    );
+  }
+);
+
+// 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 { useObjectRef } from "@react-aria/utils";
+import {
+  Box as Box9,
+  useComponentStyles as useComponentStyles5
+} from "@marigold/system";
+import { useListBox } from "@react-aria/listbox";
+
+// src/ListBox/Context.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ListBoxContext = createContext2({});
+var useListBoxContext = () => useContext2(ListBoxContext);
+
+// src/ListBox/ListBoxSection.tsx
+import React10 from "react";
+import { useListBoxSection } from "@react-aria/listbox";
+import { Box as Box8 } from "@marigold/system";
+
+// src/ListBox/ListBoxOption.tsx
+import React9, { useRef } from "react";
+import { useOption } from "@react-aria/listbox";
+import { mergeProps } from "@react-aria/utils";
+import { Box as Box7, useStateProps } from "@marigold/system";
+var ListBoxOption = ({ item, state }) => {
+  const ref = useRef(null);
+  const { optionProps, isSelected, isDisabled, isFocused } = useOption(
+    {
+      key: item.key
+    },
+    state,
+    ref
+  );
+  const { onPointerUp, ...props } = optionProps;
+  const { styles } = useListBoxContext();
+  const stateProps = useStateProps({
+    selected: isSelected,
+    disabled: isDisabled,
+    focusVisible: isFocused
+  });
+  return /* @__PURE__ */ React9.createElement(
+    Box7,
+    {
+      as: "li",
+      ref,
+      css: styles.option,
+      ...mergeProps(props, { onPointerDown: onPointerUp }, { ...stateProps })
+    },
+    item.rendered
+  );
+};
+
+// src/ListBox/ListBoxSection.tsx
+var ListBoxSection = ({ section, state }) => {
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    "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,
+    {
+      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 }))
+  ));
+};
+
+// src/ListBox/ListBox.tsx
+var ListBox = forwardRef2(
+  ({ state, variant, size, ...props }, ref) => {
+    const innerRef = useObjectRef(ref);
+    const { listBoxProps } = useListBox(props, state, innerRef);
+    const styles = useComponentStyles5(
+      "ListBox",
+      { 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,
+      {
+        as: "ul",
+        ref: innerRef,
+        __baseCSS: { listStyle: "none", p: 0 },
+        css: styles.list,
+        ...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 })
+      )
+    )));
+  }
+);
+
+// src/Overlay/Modal.tsx
+import React13, { 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";
+var Underlay = ({ size, variant, ...props }) => {
+  const styles = useComponentStyles6("Underlay", { size, variant });
+  return /* @__PURE__ */ React12.createElement(
+    Box10,
+    {
+      __baseCSS: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1
+      },
+      css: styles,
+      ...props
+    }
+  );
+};
+
+// src/Overlay/Modal.tsx
+var Modal = forwardRef3(
+  ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
+    const modalRef = useObjectRef2(ref);
+    const { overlayProps, underlayProps } = useOverlay(
+      {
+        isOpen: open,
+        onClose,
+        isDismissable: dismissable,
+        isKeyboardDismissDisabled: !keyboardDismissable
+      },
+      modalRef
+    );
+    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(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "fixed",
+          inset: 0,
+          zIndex: 2,
+          pointerEvents: "none"
+        },
+        ref: modalRef,
+        ...mergeProps2(props, overlayProps, modalProps)
+      },
+      /* @__PURE__ */ React13.createElement("div", { style: { pointerEvents: "auto" } }, children)
+    ));
+  }
+);
+
+// src/Overlay/Overlay.tsx
+import React14, { useRef as useRef2 } from "react";
+import { Transition } from "react-transition-group";
+import {
+  Overlay as ReactAriaOverlay
+} from "@react-aria/overlays";
+var duration = 300;
+var defaultStyle = {
+  transition: `opacity ${duration}ms ease-in-out`,
+  opacity: 0
+};
+var transitionStyles = {
+  entering: { opacity: 1 },
+  entered: { opacity: 1 },
+  exiting: { opacity: 0 },
+  exited: { opacity: 0 },
+  unmounted: { opacity: 0 }
+};
+var Overlay = ({ children, container, open }) => {
+  const nodeRef = useRef2(null);
+  let mountOverlay = 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(
+    "div",
+    {
+      ref: nodeRef,
+      "data-testid": "overlay",
+      style: {
+        ...defaultStyle,
+        ...transitionStyles[state]
+      }
+    },
+    children
+  )));
+};
+
+// src/Overlay/Popover.tsx
+import React15, { forwardRef as forwardRef4, useRef as useRef3 } from "react";
+import {
+  DismissButton,
+  usePopover
+} from "@react-aria/overlays";
+import { FocusScope as FocusScope2 } from "@react-aria/focus";
+var Popover = forwardRef4(
+  (props, ref) => {
+    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));
+  }
+);
+var PopoverWrapper = forwardRef4(
+  ({
+    children,
+    isNonModal,
+    state,
+    keyboardDismissDisabled,
+    ...props
+  }, ref) => {
+    const { popoverProps, underlayProps } = usePopover(
+      {
+        ...props,
+        isNonModal,
+        isKeyboardDismissDisabled: keyboardDismissDisabled,
+        popoverRef: ref,
+        placement: "bottom left"
+      },
+      state
+    );
+    return /* @__PURE__ */ React15.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React15.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React15.createElement(
+      "div",
+      {
+        ...popoverProps,
+        style: {
+          ...popoverProps.style,
+          minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
+        },
+        ref,
+        role: "presentation"
+      },
+      !isNonModal && /* @__PURE__ */ React15.createElement(DismissButton, { onDismiss: state.close }),
+      children,
+      /* @__PURE__ */ React15.createElement(DismissButton, { onDismiss: state.close })
+    ));
+  }
+);
+
+// src/Overlay/Tray.tsx
+import React16 from "react";
+import { Box as Box11 } from "@marigold/system";
+import { FocusScope as FocusScope3 } from "@react-aria/focus";
+import {
+  DismissButton as DismissButton2,
+  useModalOverlay
+} from "@react-aria/overlays";
+import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
+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));
+  }
+);
+var TrayWrapper = forwardRef5(
+  ({ children, state, ...props }, ref) => {
+    let { modalProps, underlayProps } = useModalOverlay(
+      {
+        ...props,
+        isDismissable: true
+      },
+      state,
+      ref
+    );
+    return /* @__PURE__ */ React16.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React16.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React16.createElement(
+      Box11,
+      {
+        ...modalProps,
+        ref,
+        __baseCSS: { position: "absolute", width: "100%", bottom: 0 },
+        "data-testid": "tray"
+      },
+      /* @__PURE__ */ React16.createElement(DismissButton2, { onDismiss: state.close }),
+      children,
+      /* @__PURE__ */ React16.createElement(DismissButton2, { onDismiss: state.close })
+    )));
+  }
+);
+
+// src/Autocomplete/ClearButton.tsx
+import React17, { 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";
+var ClearButton = ({
+  preventFocus,
+  disabled,
+  onClick,
+  onPress,
+  onPressStart,
+  onPressEnd,
+  onPressChange,
+  onPressUp,
+  excludeFromTabOrder,
+  preventFocusOnPress,
+  ...props
+}) => {
+  const buttonRef = useRef4(null);
+  const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
+  const { isFocusVisible, focusProps } = useFocusRing({
+    autoFocus: props.autoFocus
+  });
+  const { buttonProps, isPressed } = useButton(
+    {
+      ...props,
+      onClick,
+      onPress,
+      onPressStart,
+      onPressEnd,
+      onPressChange,
+      onPressUp,
+      excludeFromTabOrder,
+      preventFocusOnPress,
+      isDisabled: disabled
+    },
+    buttonRef
+  );
+  if (preventFocus) {
+    delete buttonProps.tabIndex;
+  }
+  const stateProps = useStateProps2({
+    active: isPressed,
+    focusVisible: isFocusVisible,
+    hover: isHovered
+  });
+  return /* @__PURE__ */ React17.createElement(
+    Box12,
+    {
+      ...mergeProps3(buttonProps, focusProps, hoverProps, props),
+      ...stateProps,
+      as: "button",
+      ref: buttonRef,
+      css: {
+        appearance: "none",
+        border: "none",
+        p: 0,
+        cursor: "pointer"
+      }
+    },
+    /* @__PURE__ */ React17.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        height: 20,
+        width: 20
+      },
+      /* @__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" })
+    )
+  );
+};
+
+// src/Autocomplete/Autocomplete.tsx
+var SearchIcon = () => /* @__PURE__ */ React18.createElement(
+  SVG3,
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    height: 16,
+    width: 16
+  },
+  /* @__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"
+    }
+  )
+);
+var Autocomplete = ({
+  disabled,
+  required,
+  readOnly,
+  error,
+  onChange,
+  value,
+  defaultValue,
+  width,
+  ...rest
+}) => {
+  const { contains } = useFilter({ sensitivity: "base" });
+  const props = {
+    ...rest,
+    onInputChange: onChange,
+    inputValue: value,
+    defaultInputValue: defaultValue,
+    isDisabled: disabled,
+    isRequired: required,
+    isReadOnly: readOnly,
+    validationState: error ? "invalid" : "valid"
+  };
+  const state = useComboBoxState({
+    ...props,
+    defaultFilter: contains,
+    allowsCustomValue: true,
+    onSelectionChange: (key) => {
+      var _a;
+      return key !== null && ((_a = props.onSubmit) == null ? void 0 : _a.call(props, key, null));
+    },
+    selectedKey: void 0,
+    defaultSelectedKey: void 0
+  });
+  const inputRef = useRef5(null);
+  const listBoxRef = useRef5(null);
+  const popoverRef = useRef5(null);
+  const { inputProps, listBoxProps, labelProps, clearButtonProps } = useSearchAutocomplete(
+    {
+      ...props,
+      onSubmit: (value2, key) => {
+        var _a;
+        return (_a = props.onSubmit) == null ? void 0 : _a.call(props, key, value2);
+      },
+      popoverRef,
+      listBoxRef,
+      inputRef
+    },
+    state
+  );
+  const errorMessageProps = { "aria-invalid": error };
+  const { isDisabled, ...restClearButtonProps } = clearButtonProps;
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(
+    FieldBase,
+    {
+      label: props.label,
+      labelProps,
+      description: props.description,
+      error,
+      errorMessage: props.errorMessage,
+      errorMessageProps,
+      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,
+      {
+        preventFocus: true,
+        disabled: isDisabled,
+        ...restClearButtonProps
+      }
+    ))
+  ), /* @__PURE__ */ React18.createElement(
+    Popover,
+    {
+      state,
+      ref: popoverRef,
+      triggerRef: inputRef,
+      scrollRef: listBoxRef,
+      isNonModal: true
+    },
+    /* @__PURE__ */ React18.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+  ));
+};
+Autocomplete.Item = Item;
+
 // src/Badge/Badge.tsx
-import React3 from "react";
-import { useComponentStyles } from "@marigold/system";
+import React19 from "react";
+import { useComponentStyles as useComponentStyles7 } from "@marigold/system";
 var Badge = ({ variant, size, children, ...props }) => {
-  const styles = useComponentStyles("Badge", { variant, size });
-  return /* @__PURE__ */ React3.createElement(Box, { ...props, css: styles }, children);
+  const styles = useComponentStyles7("Badge", { variant, size });
+  return /* @__PURE__ */ React19.createElement(Box, { ...props, css: styles }, children);
 };
 
 // src/Breakout/Breakout.tsx
-import React4 from "react";
+import React20 from "react";
 var useAlignment = (direction) => {
   switch (direction) {
     case "right":
@@ -97,7 +777,7 @@ var Breakout = ({
 }) => {
   const alignItems = useAlignment(alignY);
   const justifyContent = useAlignment(alignX);
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React20.createElement(
     Box,
     {
       css: {
@@ -115,28 +795,28 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-import React5 from "react";
+import React21 from "react";
 import {
-  Box as Box2,
-  useComponentStyles as useComponentStyles2
+  Box as Box13,
+  useComponentStyles as useComponentStyles8
 } from "@marigold/system";
 var Body = ({ children, variant, size, ...props }) => {
-  const styles = useComponentStyles2("Body", { variant, size });
-  return /* @__PURE__ */ React5.createElement(Box2, { as: "section", ...props, css: styles }, children);
+  const styles = useComponentStyles8("Body", { variant, size });
+  return /* @__PURE__ */ React21.createElement(Box13, { as: "section", ...props, css: styles }, children);
 };
 
 // src/Button/Button.tsx
-import React6, { forwardRef } from "react";
-import { useButton } from "@react-aria/button";
-import { useFocusRing } from "@react-aria/focus";
-import { useHover } from "@react-aria/interactions";
-import { mergeProps, useObjectRef } from "@react-aria/utils";
+import React22, { 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 Box3,
-  useComponentStyles as useComponentStyles3,
-  useStateProps
+  Box as Box14,
+  useComponentStyles as useComponentStyles9,
+  useStateProps as useStateProps3
 } from "@marigold/system";
-var Button = forwardRef(
+var Button = forwardRef6(
   ({
     as = "button",
     children,
@@ -152,12 +832,12 @@ var Button = forwardRef(
     fullWidth,
     ...props
   }, ref) => {
-    const buttonRef = useObjectRef(ref);
-    const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
-    const { isFocusVisible, focusProps } = useFocusRing({
+    const buttonRef = useObjectRef4(ref);
+    const { hoverProps, isHovered } = useHover2({ isDisabled: disabled });
+    const { isFocusVisible, focusProps } = useFocusRing2({
       autoFocus: props.autoFocus
     });
-    const { buttonProps, isPressed } = useButton(
+    const { buttonProps, isPressed } = useButton2(
       {
         /**
          * `react-aria` only expected `Element` but we casted
@@ -175,16 +855,16 @@ var Button = forwardRef(
       },
       buttonRef
     );
-    const styles = useComponentStyles3("Button", { variant, size });
-    const stateProps = useStateProps({
+    const styles = useComponentStyles9("Button", { variant, size });
+    const stateProps = useStateProps3({
       active: isPressed,
       focusVisible: isFocusVisible,
       hover: isHovered
     });
-    return /* @__PURE__ */ React6.createElement(
-      Box3,
+    return /* @__PURE__ */ React22.createElement(
+      Box14,
       {
-        ...mergeProps(buttonProps, focusProps, hoverProps, props),
+        ...mergeProps4(buttonProps, focusProps, hoverProps, props),
         ...stateProps,
         as,
         ref: buttonRef,
@@ -207,10 +887,10 @@ var Button = forwardRef(
 );
 
 // src/Card/Card.tsx
-import React7 from "react";
+import React23 from "react";
 import {
-  Box as Box4,
-  useComponentStyles as useComponentStyles4
+  Box as Box15,
+  useComponentStyles as useComponentStyles10
 } from "@marigold/system";
 var Card = ({
   children,
@@ -225,214 +905,59 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const styles = useComponentStyles4("Card", { variant, size });
-  return /* @__PURE__ */ React7.createElement(Box4, { ...props, css: [styles, { p, px, py, pt, pb, pl, pr }] }, children);
+  const styles = useComponentStyles10("Card", { variant, size });
+  return /* @__PURE__ */ React23.createElement(Box15, { ...props, css: [styles, { p, px, py, pt, pb, pl, pr }] }, children);
 };
 
 // src/Center/Center.tsx
-import React8 from "react";
+import React24 from "react";
 var Center = ({
-  maxWidth,
-  space = "none",
-  children,
-  ...props
-}) => /* @__PURE__ */ React8.createElement(
-  Box,
-  {
-    css: {
-      boxSizing: "content-box",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "center",
-      justifyContent: "center",
-      marginInline: "auto",
-      maxInlineSize: maxWidth,
-      gap: space
-    },
-    ...props
-  },
-  children
-);
-
-// src/Checkbox/Checkbox.tsx
-import React14, { forwardRef as forwardRef2 } from "react";
-import { useCheckbox, useCheckboxGroupItem } from "@react-aria/checkbox";
-import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
-import { useHover as useHover2 } from "@react-aria/interactions";
-import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
-import { useToggleState } from "@react-stately/toggle";
-import {
-  Box as Box9,
-  useComponentStyles as useComponentStyles8,
-  useStateProps as useStateProps3
-} from "@marigold/system";
-
-// src/Checkbox/CheckboxGroup.tsx
-import React13, { createContext as createContext2, useContext as useContext2 } from "react";
-import { useCheckboxGroup } from "@react-aria/checkbox";
-import {
-  useCheckboxGroupState
-} from "@react-stately/checkbox";
-import { Box as Box8, useStateProps as useStateProps2 } from "@marigold/system";
-
-// src/FieldBase/FieldBase.tsx
-import React12 from "react";
-import {
-  Box as Box7,
-  useComponentStyles as useComponentStyles7
-} from "@marigold/system";
-
-// src/Label/Label.tsx
-import React9 from "react";
-import { Box as Box5, SVG, useComponentStyles as useComponentStyles5 } from "@marigold/system";
-var Label = ({
-  as = "label",
-  required,
-  children,
-  variant,
-  size,
-  labelWidth,
-  ...props
-}) => {
-  const styles = useComponentStyles5("Label", { size, variant });
-  return /* @__PURE__ */ React9.createElement(
-    Box5,
-    {
-      ...props,
-      as,
-      "aria-required": required,
-      __baseCSS: {
-        display: "flex",
-        width: labelWidth
-      },
-      css: styles
-    },
-    children,
-    required && /* @__PURE__ */ React9.createElement(SVG, { viewBox: "0 0 24 24", role: "presentation", size: 16, fill: "error" }, /* @__PURE__ */ React9.createElement("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" }))
-  );
-};
-
-// src/HelpText/HelpText.tsx
-import React10 from "react";
-import {
-  Box as Box6,
-  SVG as SVG2,
-  useComponentStyles as useComponentStyles6
-} from "@marigold/system";
-var HelpText = ({
-  variant,
-  size,
-  disabled,
-  description,
-  descriptionProps,
-  error,
-  errorMessage,
-  errorMessageProps,
-  ...props
-}) => {
-  var _a;
-  const hasErrorMessage = errorMessage && error;
-  const styles = useComponentStyles6(
-    "HelpText",
-    { variant, size },
-    { parts: ["container", "icon"] }
-  );
-  return /* @__PURE__ */ React10.createElement(
-    Box6,
-    {
-      ...hasErrorMessage ? errorMessageProps : descriptionProps,
-      ...props,
-      __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
-      css: styles.container
-    },
-    hasErrorMessage ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
-      SVG2,
-      {
-        viewBox: "0 0 24 24",
-        role: "presentation",
-        size: ((_a = styles == null ? void 0 : styles.icon) == null ? void 0 : _a.size) || 16
-      },
-      /* @__PURE__ */ React10.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" })
-    ), errorMessage) : /* @__PURE__ */ React10.createElement(React10.Fragment, null, description)
-  );
-};
-
-// src/FieldBase/FieldGroup.tsx
-import React11 from "react";
-import { createContext, useContext } from "react";
-var FieldGroupContext = createContext({});
-var useFieldGroupContext = () => useContext(FieldGroupContext);
-var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ React11.createElement(FieldGroupContext.Provider, { value: { labelWidth } }, children);
-};
-
-// src/FieldBase/FieldBase.tsx
-var FieldBase = ({
-  children,
-  variant,
-  size,
-  width = "100%",
-  disabled,
-  required,
-  label,
-  labelProps,
-  description,
-  descriptionProps,
-  error,
-  errorMessage,
-  errorMessageProps,
-  stateProps,
+  maxWidth,
+  space = "none",
+  children,
   ...props
-}) => {
-  const hasHelpText = !!description || errorMessage && error;
-  const style = useComponentStyles7("Field", { variant, size });
-  const { labelWidth } = useFieldGroupContext();
-  return /* @__PURE__ */ React12.createElement(
-    Box7,
-    {
-      ...props,
-      __baseCSS: {
-        display: "flex",
-        flexDirection: "column",
-        width,
-        position: "relative"
-      },
-      css: style
+}) => /* @__PURE__ */ React24.createElement(
+  Box,
+  {
+    css: {
+      boxSizing: "content-box",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      marginInline: "auto",
+      maxInlineSize: maxWidth,
+      gap: space
     },
-    label && /* @__PURE__ */ React12.createElement(
-      Label,
-      {
-        required,
-        variant,
-        size,
-        labelWidth,
-        ...labelProps,
-        ...stateProps
-      },
-      label
-    ),
-    /* @__PURE__ */ React12.createElement(Box7, { __baseCSS: { display: "flex", flexDirection: "column" } }, children, hasHelpText && /* @__PURE__ */ React12.createElement(
-      HelpText,
-      {
-        ...stateProps,
-        variant,
-        size,
-        disabled,
-        description,
-        descriptionProps,
-        error,
-        errorMessage,
-        errorMessageProps
-      }
-    ))
-  );
-};
+    ...props
+  },
+  children
+);
+
+// src/Checkbox/Checkbox.tsx
+import React26, { 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
+} from "@marigold/system";
 
 // src/Checkbox/CheckboxGroup.tsx
-var CheckboxGroupContext = createContext2(
+import React25, { 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";
+var CheckboxGroupContext = createContext3(
   null
 );
-var useCheckboxGroupContext = () => useContext2(CheckboxGroupContext);
+var useCheckboxGroupContext = () => useContext3(CheckboxGroupContext);
 var CheckboxGroup = ({
   children,
   required,
@@ -450,12 +975,12 @@ var CheckboxGroup = ({
   };
   const state = useCheckboxGroupState(props);
   const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
-  const stateProps = useStateProps2({
+  const stateProps = useStateProps4({
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React25.createElement(
     FieldBase,
     {
       label: props.label,
@@ -470,8 +995,8 @@ var CheckboxGroup = ({
       required,
       ...groupProps
     },
-    /* @__PURE__ */ React13.createElement(
-      Box8,
+    /* @__PURE__ */ React25.createElement(
+      Box16,
       {
         role: "presentation",
         __baseCSS: {
@@ -480,13 +1005,13 @@ var CheckboxGroup = ({
           alignItems: "start"
         }
       },
-      /* @__PURE__ */ React13.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children)
+      /* @__PURE__ */ React25.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children)
     )
   );
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ React14.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React14.createElement(
+var CheckMark = () => /* @__PURE__ */ React26.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ React26.createElement(
   "path",
   {
     fill: "currentColor",
@@ -494,7 +1019,7 @@ var CheckMark = () => /* @__PURE__ */ React14.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__ */ React14.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React14.createElement(
+var IndeterminateMark = () => /* @__PURE__ */ React26.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ React26.createElement(
   "path",
   {
     fill: "currentColor",
@@ -502,8 +1027,8 @@ var IndeterminateMark = () => /* @__PURE__ */ React14.createElement("svg", { wid
     d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
   }
 ));
-var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React14.createElement(
-  Box9,
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React26.createElement(
+  Box17,
   {
     "aria-hidden": "true",
     __baseCSS: {
@@ -521,9 +1046,9 @@ var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ React1
     css,
     ...props
   },
-  indeterminate ? /* @__PURE__ */ React14.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React14.createElement(CheckMark, null) : null
+  indeterminate ? /* @__PURE__ */ React26.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ React26.createElement(CheckMark, null) : null
 );
-var Checkbox = forwardRef2(
+var Checkbox = forwardRef7(
   ({
     size,
     variant,
@@ -536,7 +1061,7 @@ var Checkbox = forwardRef2(
     error,
     ...props
   }, ref) => {
-    const inputRef = useObjectRef2(ref);
+    const inputRef = useObjectRef5(ref);
     const checkboxProps = {
       isIndeterminate: indeterminate,
       isDisabled: disabled,
@@ -572,7 +1097,7 @@ var Checkbox = forwardRef2(
       }),
       inputRef
     );
-    const styles = useComponentStyles8(
+    const styles = useComponentStyles11(
       "Checkbox",
       {
         variant,
@@ -580,9 +1105,9 @@ var Checkbox = forwardRef2(
       },
       { parts: ["container", "label", "checkbox"] }
     );
-    const { hoverProps, isHovered } = useHover2({});
-    const { isFocusVisible, focusProps } = useFocusRing2();
-    const stateProps = useStateProps3({
+    const { hoverProps, isHovered } = useHover3({});
+    const { isFocusVisible, focusProps } = useFocusRing3();
+    const stateProps = useStateProps5({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -591,8 +1116,8 @@ var Checkbox = forwardRef2(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ React14.createElement(
-      Box9,
+    return /* @__PURE__ */ React26.createElement(
+      Box17,
       {
         as: "label",
         __baseCSS: {
@@ -605,8 +1130,8 @@ var Checkbox = forwardRef2(
         ...hoverProps,
         ...stateProps
       },
-      /* @__PURE__ */ React14.createElement(
-        Box9,
+      /* @__PURE__ */ React26.createElement(
+        Box17,
         {
           as: "input",
           ref: inputRef,
@@ -624,7 +1149,7 @@ var Checkbox = forwardRef2(
           ...focusProps
         }
       ),
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React26.createElement(
         Icon,
         {
           checked: inputProps.checked,
@@ -633,13 +1158,13 @@ var Checkbox = forwardRef2(
           ...stateProps
         }
       ),
-      props.children && /* @__PURE__ */ React14.createElement(Box9, { css: styles.label, ...stateProps }, props.children)
+      props.children && /* @__PURE__ */ React26.createElement(Box17, { css: styles.label, ...stateProps }, props.children)
     );
   }
 );
 
 // src/Columns/Columns.tsx
-import React15, {
+import React27, {
   Children,
   cloneElement,
   isValidElement
@@ -659,7 +1184,7 @@ var Columns = ({
       )}`
     );
   }
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React27.createElement(
     Box,
     {
       css: {
@@ -678,7 +1203,7 @@ var Columns = ({
       },
       ...props
     },
-    Children.map(children, (child, idx) => /* @__PURE__ */ React15.createElement(
+    Children.map(children, (child, idx) => /* @__PURE__ */ React27.createElement(
       Box,
       {
         css: {
@@ -692,7 +1217,7 @@ var Columns = ({
 };
 
 // src/Container/Container.tsx
-import React16 from "react";
+import React28 from "react";
 import { size as tokenSize } from "@marigold/tokens";
 var ALIGN_ITEMS = {
   left: "start",
@@ -723,7 +1248,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = tokenSize[contentType][size];
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React28.createElement(
     Box,
     {
       css: {
@@ -741,29 +1266,29 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-import React26, { useRef as useRef3 } from "react";
-import { useButton as useButton2 } from "@react-aria/button";
+import React33, { useRef as useRef7 } from "react";
+import { useButton as useButton3 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
 import {
-  Box as Box13,
-  useComponentStyles as useComponentStyles12
+  Box as Box19,
+  useComponentStyles as useComponentStyles14
 } from "@marigold/system";
 
 // src/Header/Header.tsx
-import React17 from "react";
+import React29 from "react";
 import {
-  useComponentStyles as useComponentStyles9
+  useComponentStyles as useComponentStyles12
 } from "@marigold/system";
 var Header = ({ children, variant, size, ...props }) => {
-  const styles = useComponentStyles9("Header", { variant, size });
-  return /* @__PURE__ */ React17.createElement(Box, { as: "header", ...props, css: styles }, children);
+  const styles = useComponentStyles12("Header", { variant, size });
+  return /* @__PURE__ */ React29.createElement(Box, { as: "header", ...props, css: styles }, children);
 };
 
 // src/Headline/Headline.tsx
-import React18 from "react";
+import React30 from "react";
 import {
-  Box as Box10,
-  useComponentStyles as useComponentStyles10
+  Box as Box18,
+  useComponentStyles as useComponentStyles13
 } from "@marigold/system";
 var Headline = ({
   children,
@@ -774,12 +1299,12 @@ var Headline = ({
   level = "1",
   ...props
 }) => {
-  const styles = useComponentStyles10("Headline", {
+  const styles = useComponentStyles13("Headline", {
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ React18.createElement(
-    Box10,
+  return /* @__PURE__ */ React30.createElement(
+    Box18,
     {
       as: `h${level}`,
       ...props,
@@ -790,216 +1315,24 @@ var Headline = ({
 };
 
 // src/Dialog/Context.ts
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var DialogContext = createContext3({});
-var useDialogContext = () => useContext3(DialogContext);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var DialogContext = createContext4({});
+var useDialogContext = () => useContext4(DialogContext);
 
 // src/Dialog/DialogTrigger.tsx
-import React24, { useRef as useRef2 } from "react";
+import React31, { useRef as useRef6 } from "react";
 import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState } from "@react-stately/overlays";
-
-// src/Overlay/Modal.tsx
-import React20, { 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 useObjectRef3 } from "@react-aria/utils";
-
-// src/Overlay/Underlay.tsx
-import React19 from "react";
-import { Box as Box11, useComponentStyles as useComponentStyles11 } from "@marigold/system";
-var Underlay = ({ size, variant, ...props }) => {
-  const styles = useComponentStyles11("Underlay", { size, variant });
-  return /* @__PURE__ */ React19.createElement(
-    Box11,
-    {
-      __baseCSS: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 1
-      },
-      css: styles,
-      ...props
-    }
-  );
-};
-
-// src/Overlay/Modal.tsx
-var Modal = forwardRef3(
-  ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
-    const modalRef = useObjectRef3(ref);
-    const { overlayProps, underlayProps } = useOverlay(
-      {
-        isOpen: open,
-        onClose,
-        isDismissable: dismissable,
-        isKeyboardDismissDisabled: !keyboardDismissable
-      },
-      modalRef
-    );
-    usePreventScroll();
-    const { modalProps } = useModal({});
-    return /* @__PURE__ */ React20.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React20.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ React20.createElement(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "fixed",
-          inset: 0,
-          zIndex: 2,
-          pointerEvents: "none"
-        },
-        ref: modalRef,
-        ...mergeProps2(props, overlayProps, modalProps)
-      },
-      /* @__PURE__ */ React20.createElement("div", { style: { pointerEvents: "auto" } }, children)
-    ));
-  }
-);
-
-// src/Overlay/Overlay.tsx
-import React21, { useRef } from "react";
-import { Transition } from "react-transition-group";
-import {
-  Overlay as ReactAriaOverlay
-} from "@react-aria/overlays";
-var duration = 300;
-var defaultStyle = {
-  transition: `opacity ${duration}ms ease-in-out`,
-  opacity: 0
-};
-var transitionStyles = {
-  entering: { opacity: 1 },
-  entered: { opacity: 1 },
-  exiting: { opacity: 0 },
-  exited: { opacity: 0 },
-  unmounted: { opacity: 0 }
-};
-var Overlay = ({ children, container, open }) => {
-  const nodeRef = useRef(null);
-  let mountOverlay = open;
-  if (!mountOverlay) {
-    return null;
-  }
-  return /* @__PURE__ */ React21.createElement(ReactAriaOverlay, { portalContainer: container }, /* @__PURE__ */ React21.createElement(Transition, { nodeRef, timeout: duration, in: open, appear: true }, (state) => /* @__PURE__ */ React21.createElement(
-    "div",
-    {
-      ref: nodeRef,
-      "data-testid": "overlay",
-      style: {
-        ...defaultStyle,
-        ...transitionStyles[state]
-      }
-    },
-    children
-  )));
-};
-
-// src/Overlay/Popover.tsx
-import React22, { forwardRef as forwardRef4 } from "react";
-import {
-  DismissButton,
-  usePopover
-} from "@react-aria/overlays";
-import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
-import { FocusScope as FocusScope2 } from "@react-aria/focus";
-var Popover = forwardRef4(
-  (props, ref) => {
-    const popoverRef = useObjectRef4(ref);
-    let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ React22.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ React22.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
-  }
-);
-var PopoverWrapper = forwardRef4(
-  ({
-    children,
-    isNonModal,
-    state,
-    keyboardDismissDisabled,
-    ...props
-  }, ref) => {
-    const { popoverProps, underlayProps } = usePopover(
-      {
-        ...props,
-        isNonModal,
-        isKeyboardDismissDisabled: keyboardDismissDisabled,
-        popoverRef: ref,
-        placement: "bottom left"
-      },
-      state
-    );
-    return /* @__PURE__ */ React22.createElement(FocusScope2, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ React22.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ React22.createElement(
-      "div",
-      {
-        ...popoverProps,
-        style: {
-          ...popoverProps.style,
-          minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
-        },
-        ref,
-        role: "presentation"
-      },
-      !isNonModal && /* @__PURE__ */ React22.createElement(DismissButton, { onDismiss: state.close }),
-      children,
-      /* @__PURE__ */ React22.createElement(DismissButton, { onDismiss: state.close })
-    ));
-  }
-);
-
-// src/Overlay/Tray.tsx
-import React23 from "react";
-import { Box as Box12 } from "@marigold/system";
-import { FocusScope as FocusScope3 } from "@react-aria/focus";
-import {
-  DismissButton as DismissButton2,
-  useModalOverlay
-} from "@react-aria/overlays";
-import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
-import { forwardRef as forwardRef5 } from "react";
-var Tray = forwardRef5(
-  ({ state, children, ...props }, ref) => {
-    const trayRef = useObjectRef5(ref);
-    return /* @__PURE__ */ React23.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React23.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
-  }
-);
-var TrayWrapper = forwardRef5(
-  ({ children, state, ...props }, ref) => {
-    let { modalProps, underlayProps } = useModalOverlay(
-      {
-        ...props,
-        isDismissable: true
-      },
-      state,
-      ref
-    );
-    return /* @__PURE__ */ React23.createElement(FocusScope3, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React23.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ React23.createElement(
-      Box12,
-      {
-        ...modalProps,
-        ref,
-        __baseCSS: { position: "absolute", width: "100%", bottom: 0 },
-        "data-testid": "tray"
-      },
-      /* @__PURE__ */ React23.createElement(DismissButton2, { onDismiss: state.close }),
-      children,
-      /* @__PURE__ */ React23.createElement(DismissButton2, { onDismiss: state.close })
-    )));
-  }
-);
-
-// src/Dialog/DialogTrigger.tsx
 var DialogTrigger = ({
   children,
   dismissable = true,
   keyboardDismissable = true
 }) => {
-  const [dialogTrigger, dialog] = React24.Children.toArray(children);
-  const dialogTriggerRef = useRef2(null);
+  const [dialogTrigger, dialog] = React31.Children.toArray(children);
+  const dialogTriggerRef = useRef6(null);
   const state = useOverlayTriggerState({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React24.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React31.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React31.createElement(
     PressResponder,
     {
       ref: dialogTriggerRef,
@@ -1007,7 +1340,7 @@ var DialogTrigger = ({
       onPress: state.toggle
     },
     dialogTrigger
-  ), /* @__PURE__ */ React24.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React24.createElement(
+  ), /* @__PURE__ */ React31.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React31.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1021,7 +1354,7 @@ var DialogTrigger = ({
 
 // src/Dialog/DialogController.tsx
 import { useOverlayTriggerState as useOverlayTriggerState2 } from "@react-stately/overlays";
-import React25 from "react";
+import React32 from "react";
 var DialogController = ({
   children,
   dismissable = true,
@@ -1034,7 +1367,7 @@ var DialogController = ({
     onOpenChange
   });
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ React25.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React25.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React32.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ React32.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ React32.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1048,16 +1381,16 @@ var DialogController = ({
 
 // src/Dialog/Dialog.tsx
 var CloseButton = ({ css }) => {
-  const ref = useRef3(null);
+  const ref = useRef7(null);
   const { close } = useDialogContext();
-  const { buttonProps } = useButton2(
+  const { buttonProps } = useButton3(
     {
       onPress: () => close == null ? void 0 : close()
     },
     ref
   );
-  return /* @__PURE__ */ React26.createElement(Box13, { css: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React26.createElement(
-    Box13,
+  return /* @__PURE__ */ React33.createElement(Box19, { css: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React33.createElement(
+    Box19,
     {
       as: "button",
       __baseCSS: {
@@ -1073,7 +1406,7 @@ var CloseButton = ({ css }) => {
       ref,
       ...buttonProps
     },
-    /* @__PURE__ */ React26.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React26.createElement(
+    /* @__PURE__ */ React33.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React33.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -1084,9 +1417,9 @@ var CloseButton = ({ css }) => {
   ));
 };
 var addTitleProps = (children, titleProps) => {
-  const childs = React26.Children.toArray(children);
+  const childs = React33.Children.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => React26.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => React33.isValidElement(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1094,7 +1427,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = React26.cloneElement(
+  const titleChild = React33.cloneElement(
     childs[titleIndex],
     titleProps
   );
@@ -1108,43 +1441,43 @@ var Dialog = ({
   closeButton,
   ...props
 }) => {
-  const ref = useRef3(null);
+  const ref = useRef7(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
-  const styles = useComponentStyles12(
+  const styles = useComponentStyles14(
     "Dialog",
     { variant, size },
     { parts: ["container", "closeButton"] }
   );
-  return /* @__PURE__ */ React26.createElement(Box13, { __baseCSS: { bg: "#fff" }, css: styles.container, ...dialogProps }, closeButton && /* @__PURE__ */ React26.createElement(CloseButton, { css: styles.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
+  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));
 };
 Dialog.Trigger = DialogTrigger;
 Dialog.Controller = DialogController;
 
 // src/Divider/Divider.tsx
-import React27 from "react";
+import React34 from "react";
 import { useSeparator } from "@react-aria/separator";
-import { Box as Box14, useComponentStyles as useComponentStyles13 } from "@marigold/system";
+import { Box as Box20, useComponentStyles as useComponentStyles15 } from "@marigold/system";
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = useSeparator(props);
-  const styles = useComponentStyles13("Divider", { variant });
-  return /* @__PURE__ */ React27.createElement(Box14, { css: styles, ...props, ...separatorProps });
+  const styles = useComponentStyles15("Divider", { variant });
+  return /* @__PURE__ */ React34.createElement(Box20, { css: styles, ...props, ...separatorProps });
 };
 
 // src/Footer/Footer.tsx
-import React28 from "react";
+import React35 from "react";
 import {
-  useComponentStyles as useComponentStyles14
+  useComponentStyles as useComponentStyles16
 } from "@marigold/system";
 var Footer = ({ children, variant, size, ...props }) => {
-  const styles = useComponentStyles14("Footer", { variant, size });
-  return /* @__PURE__ */ React28.createElement(Box, { as: "footer", ...props, css: styles }, children);
+  const styles = useComponentStyles16("Footer", { variant, size });
+  return /* @__PURE__ */ React35.createElement(Box, { as: "footer", ...props, css: styles }, children);
 };
 
 // src/Image/Image.tsx
-import React29 from "react";
-import { Box as Box15 } from "@marigold/system";
-import { useComponentStyles as useComponentStyles15 } from "@marigold/system";
+import React36 from "react";
+import { Box as Box21 } from "@marigold/system";
+import { useComponentStyles as useComponentStyles17 } from "@marigold/system";
 var Image = ({
   variant,
   size,
@@ -1152,14 +1485,14 @@ var Image = ({
   position,
   ...props
 }) => {
-  const styles = useComponentStyles15("Image", { variant, size });
+  const styles = useComponentStyles17("Image", { variant, size });
   const css = {
     ...styles,
     objectFit: fit,
     objectPosition: position
   };
-  return /* @__PURE__ */ React29.createElement(
-    Box15,
+  return /* @__PURE__ */ React36.createElement(
+    Box21,
     {
       ...props,
       as: "img",
@@ -1170,7 +1503,7 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-import React30 from "react";
+import React37 from "react";
 var ALIGNMENT_X = {
   left: "flex-start",
   center: "center",
@@ -1187,7 +1520,7 @@ var Inline = ({
   alignY = "center",
   children,
   ...props
-}) => /* @__PURE__ */ React30.createElement(
+}) => /* @__PURE__ */ React37.createElement(
   Box,
   {
     css: {
@@ -1202,22 +1535,17 @@ var Inline = ({
   children
 );
 
-// src/Input/Input.tsx
-import React31, { forwardRef as forwardRef6 } from "react";
-import { Box as Box16, useComponentStyles as useComponentStyles16 } from "@marigold/system";
-var Input = forwardRef6(
-  ({ variant, size, type = "text", ...props }, ref) => {
-    const styles = useComponentStyles16("Input", { variant, size });
-    return /* @__PURE__ */ React31.createElement(Box16, { ...props, ref, as: "input", type, css: styles });
-  }
-);
+// 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);
 
 // src/Link/Link.tsx
-import React32, { forwardRef as forwardRef7 } from "react";
+import React39, { forwardRef as forwardRef8 } from "react";
 import { useLink } from "@react-aria/link";
-import { useComponentStyles as useComponentStyles17 } from "@marigold/system";
+import { useComponentStyles as useComponentStyles18 } from "@marigold/system";
 import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
-var Link = forwardRef7(
+var Link = forwardRef8(
   ({
     as = "a",
     variant,
@@ -1237,8 +1565,8 @@ var Link = forwardRef7(
       },
       linkRef
     );
-    const styles = useComponentStyles17("Link", { variant, size });
-    return /* @__PURE__ */ React32.createElement(
+    const styles = useComponentStyles18("Link", { variant, size });
+    return /* @__PURE__ */ React39.createElement(
       Box,
       {
         as,
@@ -1254,23 +1582,23 @@ var Link = forwardRef7(
 );
 
 // src/List/List.tsx
-import React34 from "react";
+import React41 from "react";
 import {
-  Box as Box18,
-  useComponentStyles as useComponentStyles18
+  Box as Box24,
+  useComponentStyles as useComponentStyles19
 } from "@marigold/system";
 
 // src/List/Context.ts
-import { createContext as createContext4, useContext as useContext4 } from "react";
-var ListContext = createContext4({});
-var useListContext = () => useContext4(ListContext);
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var ListContext = createContext5({});
+var useListContext = () => useContext5(ListContext);
 
 // src/List/ListItem.tsx
-import React33 from "react";
-import { Box as Box17 } from "@marigold/system";
+import React40 from "react";
+import { Box as Box23 } from "@marigold/system";
 var ListItem = ({ children, ...props }) => {
   const { styles } = useListContext();
-  return /* @__PURE__ */ React33.createElement(Box17, { ...props, as: "li", css: styles }, children);
+  return /* @__PURE__ */ React40.createElement(Box23, { ...props, as: "li", css: styles }, children);
 };
 
 // src/List/List.tsx
@@ -1281,35 +1609,35 @@ var List = ({
   size,
   ...props
 }) => {
-  const styles = useComponentStyles18(
+  const styles = useComponentStyles19(
     "List",
     { variant, size },
     { parts: ["ul", "ol", "item"] }
   );
-  return /* @__PURE__ */ React34.createElement(Box18, { ...props, as, css: styles[as] }, /* @__PURE__ */ React34.createElement(ListContext.Provider, { value: { styles: styles.item } }, children));
+  return /* @__PURE__ */ React41.createElement(Box24, { ...props, as, css: styles[as] }, /* @__PURE__ */ React41.createElement(ListContext.Provider, { value: { styles: styles.item } }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import React37, { useRef as useRef6 } from "react";
+import React44, { useRef as useRef10 } from "react";
 import { useMenu } from "@react-aria/menu";
-import { Item } from "@react-stately/collections";
+import { Item as Item2 } from "@react-stately/collections";
 import { useTreeState } from "@react-stately/tree";
 import {
-  Box as Box20,
-  useComponentStyles as useComponentStyles19
+  Box as Box26,
+  useComponentStyles as useComponentStyles20
 } from "@marigold/system";
 
 // src/Menu/Context.ts
 import {
-  createContext as createContext5,
-  useContext as useContext5
+  createContext as createContext6,
+  useContext as useContext6
 } from "react";
-var MenuContext = createContext5({});
-var useMenuContext = () => useContext5(MenuContext);
+var MenuContext = createContext6({});
+var useMenuContext = () => useContext6(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-import React35, { useRef as useRef4 } from "react";
+import React42, { 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";
@@ -1321,8 +1649,8 @@ var MenuTrigger = ({
   onOpenChange,
   children
 }) => {
-  const [menuTrigger, menu] = React35.Children.toArray(children);
-  const menuTriggerRef = useRef4(null);
+  const [menuTrigger, menu] = React42.Children.toArray(children);
+  const menuTriggerRef = useRef8(null);
   const menuRef = useObjectRef7();
   const state = useMenuTriggerState({
     isOpen: open,
@@ -1341,7 +1669,7 @@ var MenuTrigger = ({
     autoFocus: state.focusStrategy
   };
   const isSmallScreen = useResponsiveValue([true, false, false], 2);
-  return /* @__PURE__ */ React35.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React42.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ React42.createElement(
     PressResponder2,
     {
       ...menuTriggerProps,
@@ -1349,17 +1677,17 @@ var MenuTrigger = ({
       isPressed: state.isOpen
     },
     menuTrigger
-  ), isSmallScreen ? /* @__PURE__ */ React35.createElement(Tray, { state }, menu) : /* @__PURE__ */ React35.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
+  ), isSmallScreen ? /* @__PURE__ */ React42.createElement(Tray, { state }, menu) : /* @__PURE__ */ React42.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
 };
 
 // src/Menu/MenuItem.tsx
-import React36, { useRef as useRef5 } from "react";
-import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
+import React43, { useRef as useRef9 } from "react";
+import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
-import { mergeProps as mergeProps3 } from "@react-aria/utils";
-import { Box as Box19, useStateProps as useStateProps4 } from "@marigold/system";
+import { mergeProps as mergeProps5 } from "@react-aria/utils";
+import { Box as Box25, useStateProps as useStateProps6 } from "@marigold/system";
 var MenuItem = ({ item, state, onAction, css }) => {
-  const ref = useRef5(null);
+  const ref = useRef9(null);
   const { onClose } = useMenuContext();
   const { menuItemProps } = useMenuItem(
     {
@@ -1370,13 +1698,13 @@ var MenuItem = ({ item, state, onAction, css }) => {
     state,
     ref
   );
-  const { isFocusVisible, focusProps } = useFocusRing3();
-  const stateProps = useStateProps4({
+  const { isFocusVisible, focusProps } = useFocusRing4();
+  const stateProps = useStateProps6({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ React36.createElement(
-    Box19,
+  return /* @__PURE__ */ React43.createElement(
+    Box25,
     {
       as: "li",
       ref,
@@ -1386,7 +1714,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
         }
       },
       css,
-      ...mergeProps3(props, { onPointerDown: onPointerUp }, focusProps),
+      ...mergeProps5(props, { onPointerDown: onPointerUp }, focusProps),
       ...stateProps
     },
     item.rendered
@@ -1398,17 +1726,17 @@ import { useSyncRef } from "@react-aria/utils";
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
-  const ref = useRef6(null);
+  const ref = useRef10(null);
   const state = useTreeState({ ...ownProps, selectionMode: "none" });
   const { menuProps } = useMenu(ownProps, state, ref);
   useSyncRef({ ref: scrollRef }, ref);
-  const styles = useComponentStyles19(
+  const styles = useComponentStyles20(
     "Menu",
     { variant, size },
     { parts: ["container", "item"] }
   );
-  return /* @__PURE__ */ React37.createElement(
-    Box20,
+  return /* @__PURE__ */ React44.createElement(
+    Box26,
     {
       as: "ul",
       ref,
@@ -1420,7 +1748,7 @@ var Menu = ({ variant, size, ...props }) => {
       css: styles.container,
       ...menuProps
     },
-    [...state.collection].map((item) => /* @__PURE__ */ React37.createElement(
+    [...state.collection].map((item) => /* @__PURE__ */ React44.createElement(
       MenuItem,
       {
         key: item.key,
@@ -1433,18 +1761,18 @@ var Menu = ({ variant, size, ...props }) => {
   );
 };
 Menu.Trigger = MenuTrigger;
-Menu.Item = Item;
+Menu.Item = Item2;
 
 // src/Menu/ActionMenu.tsx
-import React38 from "react";
-import { SVG as SVG3 } from "@marigold/system";
+import React45 from "react";
+import { SVG as SVG4 } from "@marigold/system";
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ React38.createElement(Menu.Trigger, null, /* @__PURE__ */ React38.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ React38.createElement(SVG3, { viewBox: "0 0 24 24" }, /* @__PURE__ */ React38.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__ */ React38.createElement(Menu, { ...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 }));
 };
 
 // src/Message/Message.tsx
-import React39 from "react";
-import { useComponentStyles as useComponentStyles20 } from "@marigold/system";
+import React46 from "react";
+import { useComponentStyles as useComponentStyles21 } from "@marigold/system";
 var Message = ({
   messageTitle,
   variant = "info",
@@ -1452,7 +1780,7 @@ var Message = ({
   children,
   ...props
 }) => {
-  const styles = useComponentStyles20(
+  const styles = useComponentStyles21(
     "Message",
     {
       variant,
@@ -1460,14 +1788,14 @@ var Message = ({
     },
     { parts: ["container", "icon", "title", "content"] }
   );
-  var icon = /* @__PURE__ */ React39.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React39.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__ */ 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" }));
   if (variant === "warning") {
-    icon = /* @__PURE__ */ React39.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React39.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__ */ 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" }));
   }
   if (variant === "error") {
-    icon = /* @__PURE__ */ React39.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ React39.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__ */ 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" }));
   }
-  return /* @__PURE__ */ React39.createElement(Box, { css: styles.container, ...props }, /* @__PURE__ */ React39.createElement(Box, { __baseCSS: { display: "flex", alignItems: "top", gap: 4 } }, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React46.createElement(Box, { css: styles.container, ...props }, /* @__PURE__ */ React46.createElement(Box, { __baseCSS: { display: "flex", alignItems: "top", gap: 4 } }, /* @__PURE__ */ React46.createElement(
     Box,
     {
       role: "presentation",
@@ -1475,38 +1803,38 @@ var Message = ({
       css: styles.icon
     },
     icon
-  ), /* @__PURE__ */ React39.createElement(Box, { css: styles.title }, messageTitle)), /* @__PURE__ */ React39.createElement(Box, { css: styles.content }, children));
+  ), /* @__PURE__ */ React46.createElement(Box, { css: styles.title }, messageTitle)), /* @__PURE__ */ React46.createElement(Box, { css: styles.content }, children));
 };
 
 // src/NumberField/NumberField.tsx
-import React41, { forwardRef as forwardRef8 } from "react";
-import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
-import { useHover as useHover4 } from "@react-aria/interactions";
+import React48, { 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";
 import { useNumberField } from "@react-aria/numberfield";
-import { mergeProps as mergeProps5, useObjectRef as useObjectRef8 } from "@react-aria/utils";
+import { mergeProps as mergeProps7, useObjectRef as useObjectRef8 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import {
-  Box as Box22,
-  useComponentStyles as useComponentStyles21,
-  useStateProps as useStateProps6
+  Box as Box28,
+  useComponentStyles as useComponentStyles22,
+  useStateProps as useStateProps8
 } from "@marigold/system";
 
 // src/NumberField/StepButton.tsx
-import React40, { useRef as useRef7 } from "react";
-import { useButton as useButton3 } from "@react-aria/button";
-import { useHover as useHover3 } from "@react-aria/interactions";
-import { mergeProps as mergeProps4 } from "@react-aria/utils";
-import { Box as Box21, useStateProps as useStateProps5 } from "@marigold/system";
-var Plus = () => /* @__PURE__ */ React40.createElement(
-  Box21,
+import React47, { 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,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16 },
     viewBox: "0 0 20 20",
     fill: "currentColor"
   },
-  /* @__PURE__ */ React40.createElement(
+  /* @__PURE__ */ React47.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -1515,15 +1843,15 @@ var Plus = () => /* @__PURE__ */ React40.createElement(
     }
   )
 );
-var Minus = () => /* @__PURE__ */ React40.createElement(
-  Box21,
+var Minus = () => /* @__PURE__ */ React47.createElement(
+  Box27,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16 },
     viewBox: "0 0 20 20",
     fill: "currentColor"
   },
-  /* @__PURE__ */ React40.createElement(
+  /* @__PURE__ */ React47.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -1533,20 +1861,20 @@ var Minus = () => /* @__PURE__ */ React40.createElement(
   )
 );
 var StepButton = ({ direction, css, ...props }) => {
-  const ref = useRef7(null);
-  const { buttonProps, isPressed } = useButton3(
+  const ref = useRef11(null);
+  const { buttonProps, isPressed } = useButton4(
     { ...props, elementType: "div" },
     ref
   );
-  const { hoverProps, isHovered } = useHover3(props);
-  const stateProps = useStateProps5({
+  const { hoverProps, isHovered } = useHover4(props);
+  const stateProps = useStateProps7({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ React40.createElement(
-    Box21,
+  return /* @__PURE__ */ React47.createElement(
+    Box27,
     {
       __baseCSS: {
         display: "flex",
@@ -1555,15 +1883,15 @@ var StepButton = ({ direction, css, ...props }) => {
         cursor: props.isDisabled ? "not-allowed" : "pointer"
       },
       css,
-      ...mergeProps4(buttonProps, hoverProps),
+      ...mergeProps6(buttonProps, hoverProps),
       ...stateProps
     },
-    /* @__PURE__ */ React40.createElement(Icon3, null)
+    /* @__PURE__ */ React47.createElement(Icon3, null)
   );
 };
 
 // src/NumberField/NumberField.tsx
-var NumberField = forwardRef8(
+var NumberField = forwardRef9(
   ({
     variant,
     size,
@@ -1595,25 +1923,25 @@ var NumberField = forwardRef8(
       incrementButtonProps,
       decrementButtonProps
     } = useNumberField(props, state, inputRef);
-    const { hoverProps, isHovered } = useHover4({ isDisabled: disabled });
-    const { focusProps, isFocused } = useFocusRing4({
+    const { hoverProps, isHovered } = useHover5({ isDisabled: disabled });
+    const { focusProps, isFocused } = useFocusRing5({
       within: true,
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const styles = useComponentStyles21(
+    const styles = useComponentStyles22(
       "NumberField",
       { variant, size },
       { parts: ["group", "stepper"] }
     );
-    const stateProps = useStateProps6({
+    const stateProps = useStateProps8({
       hover: isHovered,
       focus: isFocused,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ React41.createElement(
+    return /* @__PURE__ */ React48.createElement(
       FieldBase,
       {
         label: props.label,
@@ -1629,8 +1957,8 @@ var NumberField = forwardRef8(
         size,
         width
       },
-      /* @__PURE__ */ React41.createElement(
-        Box22,
+      /* @__PURE__ */ React48.createElement(
+        Box28,
         {
           "data-group": true,
           __baseCSS: {
@@ -1643,10 +1971,10 @@ var NumberField = forwardRef8(
             }
           },
           css: styles.group,
-          ...mergeProps5(groupProps, focusProps, hoverProps),
+          ...mergeProps7(groupProps, focusProps, hoverProps),
           ...stateProps
         },
-        showStepper && /* @__PURE__ */ React41.createElement(
+        showStepper && /* @__PURE__ */ React48.createElement(
           StepButton,
           {
             direction: "down",
@@ -1654,17 +1982,15 @@ var NumberField = forwardRef8(
             ...decrementButtonProps
           }
         ),
-        /* @__PURE__ */ React41.createElement(
-          Input,
+        /* @__PURE__ */ React48.createElement(Input, { variant, size, ...stateProps }, /* @__PURE__ */ React48.createElement(
+          Input.Field,
           {
             ref: inputRef,
-            variant,
-            size,
             ...inputProps,
             ...stateProps
           }
-        ),
-        showStepper && /* @__PURE__ */ React41.createElement(
+        )),
+        showStepper && /* @__PURE__ */ React48.createElement(
           StepButton,
           {
             direction: "up",
@@ -1682,7 +2008,7 @@ import { useTheme as useTheme2, ThemeProvider as ThemeProvider2 } from "@marigol
 import { SSRProvider } from "@react-aria/ssr";
 
 // src/Provider/MarigoldProvider.tsx
-import React42 from "react";
+import React49 from "react";
 import { OverlayProvider } from "@react-aria/overlays";
 import {
   Global,
@@ -1705,41 +2031,41 @@ function MarigoldProvider({
       Nested themes with a "root" property must specify a "selector" to prevent accidentally overriding global CSS`
     );
   }
-  return /* @__PURE__ */ React42.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React49.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React49.createElement(
     Global,
     {
       normalizeDocument: isTopLevel && normalizeDocument,
       selector
     }
-  ), isTopLevel ? /* @__PURE__ */ React42.createElement(OverlayProvider, null, children) : children);
+  ), isTopLevel ? /* @__PURE__ */ React49.createElement(OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-import React44, {
-  forwardRef as forwardRef9
+import React51, {
+  forwardRef as forwardRef10
 } from "react";
-import { useHover as useHover5 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
+import { useHover as useHover6 } from "@react-aria/interactions";
+import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
 import { useRadio } from "@react-aria/radio";
-import { mergeProps as mergeProps6, useObjectRef as useObjectRef9 } from "@react-aria/utils";
+import { mergeProps as mergeProps8, useObjectRef as useObjectRef9 } from "@react-aria/utils";
 import {
-  Box as Box24,
-  useComponentStyles as useComponentStyles22,
-  useStateProps as useStateProps8
+  Box as Box30,
+  useComponentStyles as useComponentStyles23,
+  useStateProps as useStateProps10
 } from "@marigold/system";
 
 // src/Radio/Context.ts
-import { createContext as createContext6, useContext as useContext6 } from "react";
-var RadioGroupContext = createContext6(
+import { createContext as createContext7, useContext as useContext7 } from "react";
+var RadioGroupContext = createContext7(
   null
 );
-var useRadioGroupContext = () => useContext6(RadioGroupContext);
+var useRadioGroupContext = () => useContext7(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-import React43 from "react";
+import React50 from "react";
 import { useRadioGroup } from "@react-aria/radio";
 import { useRadioGroupState } from "@react-stately/radio";
-import { Box as Box23, useStateProps as useStateProps7 } from "@marigold/system";
+import { Box as Box29, useStateProps as useStateProps9 } from "@marigold/system";
 var RadioGroup = ({
   children,
   orientation = "vertical",
@@ -1759,12 +2085,12 @@ var RadioGroup = ({
   };
   const state = useRadioGroupState(props);
   const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup(props, state);
-  const stateProps = useStateProps7({
+  const stateProps = useStateProps9({
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ React43.createElement(
+  return /* @__PURE__ */ React50.createElement(
     FieldBase,
     {
       width,
@@ -1780,8 +2106,8 @@ var RadioGroup = ({
       required,
       ...radioGroupProps
     },
-    /* @__PURE__ */ React43.createElement(
-      Box23,
+    /* @__PURE__ */ React50.createElement(
+      Box29,
       {
         role: "presentation",
         "data-orientation": orientation,
@@ -1792,15 +2118,15 @@ var RadioGroup = ({
           gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
         }
       },
-      /* @__PURE__ */ React43.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
+      /* @__PURE__ */ React50.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
     )
   );
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ React44.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ React44.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
-var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React44.createElement(
-  Box24,
+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,
   {
     "aria-hidden": "true",
     __baseCSS: {
@@ -1817,9 +2143,9 @@ var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ React44.createElemen
     css,
     ...props
   },
-  checked ? /* @__PURE__ */ React44.createElement(Dot, null) : null
+  checked ? /* @__PURE__ */ React51.createElement(Dot, null) : null
 );
-var Radio = forwardRef9(
+var Radio = forwardRef10(
   ({ width, disabled, ...props }, ref) => {
     const {
       variant,
@@ -1834,14 +2160,14 @@ var Radio = forwardRef9(
       state,
       inputRef
     );
-    const styles = useComponentStyles22(
+    const styles = useComponentStyles23(
       "Radio",
       { variant: variant || props.variant, size: size || props.size },
       { parts: ["container", "label", "radio"] }
     );
-    const { hoverProps, isHovered } = useHover5({ isDisabled: disabled });
-    const { isFocusVisible, focusProps } = useFocusRing5();
-    const stateProps = useStateProps8({
+    const { hoverProps, isHovered } = useHover6({ isDisabled: disabled });
+    const { isFocusVisible, focusProps } = useFocusRing6();
+    const stateProps = useStateProps10({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -1849,8 +2175,8 @@ var Radio = forwardRef9(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ React44.createElement(
-      Box24,
+    return /* @__PURE__ */ React51.createElement(
+      Box30,
       {
         as: "label",
         __baseCSS: {
@@ -1861,10 +2187,10 @@ var Radio = forwardRef9(
           width: width || groupWidth || "100%"
         },
         css: styles.container,
-        ...mergeProps6(hoverProps, stateProps)
+        ...mergeProps8(hoverProps, stateProps)
       },
-      /* @__PURE__ */ React44.createElement(
-        Box24,
+      /* @__PURE__ */ React51.createElement(
+        Box30,
         {
           as: "input",
           ref: inputRef,
@@ -1878,131 +2204,34 @@ var Radio = forwardRef9(
             opacity: 1e-4,
             cursor: inputProps.disabled ? "not-allowed" : "pointer"
           },
-          ...mergeProps6(inputProps, focusProps)
+          ...mergeProps8(inputProps, focusProps)
         }
       ),
-      /* @__PURE__ */ React44.createElement(Icon2, { checked: inputProps.checked, css: styles.radio, ...stateProps }),
-      /* @__PURE__ */ React44.createElement(Box24, { css: styles.label, ...stateProps }, props.children)
+      /* @__PURE__ */ React51.createElement(Icon2, { checked: inputProps.checked, css: styles.radio, ...stateProps }),
+      /* @__PURE__ */ React51.createElement(Box30, { css: styles.label, ...stateProps }, props.children)
     );
   }
 );
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-import React48, {
+import React52, {
   forwardRef as forwardRef11,
-  useRef as useRef9
+  useRef as useRef12
 } from "react";
-import { useButton as useButton4 } from "@react-aria/button";
-import { useFocusRing as useFocusRing6 } from "@react-aria/focus";
+import { useButton as useButton5 } from "@react-aria/button";
+import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
 import { useLocalizedStringFormatter } from "@react-aria/i18n";
 import { HiddenSelect, useSelect } from "@react-aria/select";
 import { useSelectState } from "@react-stately/select";
-import { Item as Item2, Section } from "@react-stately/collections";
-import { mergeProps as mergeProps8, useObjectRef as useObjectRef11 } from "@react-aria/utils";
+import { Item as Item3, Section } from "@react-stately/collections";
+import { mergeProps as mergeProps9, useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import {
-  Box as Box28,
+  Box as Box31,
   useComponentStyles as useComponentStyles24,
   useResponsiveValue as useResponsiveValue2,
-  useStateProps as useStateProps10
-} from "@marigold/system";
-
-// src/ListBox/ListBox.tsx
-import React47, { forwardRef as forwardRef10 } from "react";
-import { useObjectRef as useObjectRef10 } from "@react-aria/utils";
-import {
-  Box as Box27,
-  useComponentStyles as useComponentStyles23
+  useStateProps as useStateProps11
 } from "@marigold/system";
-import { useListBox } from "@react-aria/listbox";
-
-// src/ListBox/Context.ts
-import { createContext as createContext7, useContext as useContext7 } from "react";
-var ListBoxContext = createContext7({});
-var useListBoxContext = () => useContext7(ListBoxContext);
-
-// src/ListBox/ListBoxSection.tsx
-import React46 from "react";
-import { useListBoxSection } from "@react-aria/listbox";
-import { Box as Box26 } from "@marigold/system";
-
-// src/ListBox/ListBoxOption.tsx
-import React45, { useRef as useRef8 } from "react";
-import { useOption } from "@react-aria/listbox";
-import { mergeProps as mergeProps7 } from "@react-aria/utils";
-import { Box as Box25, useStateProps as useStateProps9 } from "@marigold/system";
-var ListBoxOption = ({ item, state }) => {
-  const ref = useRef8(null);
-  const { optionProps, isSelected, isDisabled, isFocused } = useOption(
-    {
-      key: item.key
-    },
-    state,
-    ref
-  );
-  const { onPointerUp, ...props } = optionProps;
-  const { styles } = useListBoxContext();
-  const stateProps = useStateProps9({
-    selected: isSelected,
-    disabled: isDisabled,
-    focusVisible: isFocused
-  });
-  return /* @__PURE__ */ React45.createElement(
-    Box25,
-    {
-      as: "li",
-      ref,
-      css: styles.option,
-      ...mergeProps7(props, { onPointerDown: onPointerUp }, { ...stateProps })
-    },
-    item.rendered
-  );
-};
-
-// src/ListBox/ListBoxSection.tsx
-var ListBoxSection = ({ section, state }) => {
-  const { itemProps, headingProps, groupProps } = useListBoxSection({
-    heading: section.rendered,
-    "aria-label": section["aria-label"]
-  });
-  const { styles } = useListBoxContext();
-  return /* @__PURE__ */ React46.createElement(Box26, { as: "li", css: styles.section, ...itemProps }, section.rendered && /* @__PURE__ */ React46.createElement(Box26, { css: styles.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ React46.createElement(
-    Box26,
-    {
-      as: "ul",
-      __baseCSS: { listStyle: "none", p: 0 },
-      css: styles.list,
-      ...groupProps
-    },
-    [...section.childNodes].map((node) => /* @__PURE__ */ React46.createElement(ListBoxOption, { key: node.key, item: node, state }))
-  ));
-};
-
-// src/ListBox/ListBox.tsx
-var ListBox = forwardRef10(
-  ({ state, variant, size, ...props }, ref) => {
-    const innerRef = useObjectRef10(ref);
-    const { listBoxProps } = useListBox(props, state, innerRef);
-    const styles = useComponentStyles23(
-      "ListBox",
-      { variant, size },
-      { parts: ["container", "list", "option", "section", "sectionTitle"] }
-    );
-    return /* @__PURE__ */ React47.createElement(ListBoxContext.Provider, { value: { styles } }, /* @__PURE__ */ React47.createElement(Box27, { css: styles.container }, /* @__PURE__ */ React47.createElement(
-      Box27,
-      {
-        as: "ul",
-        ref: innerRef,
-        __baseCSS: { listStyle: "none", p: 0 },
-        css: styles.list,
-        ...listBoxProps
-      },
-      [...state.collection].map(
-        (item) => item.type === "section" ? /* @__PURE__ */ React47.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ React47.createElement(ListBoxOption, { key: item.key, item, state })
-      )
-    )));
-  }
-);
 
 // src/Select/intl.ts
 var messages = {
@@ -2015,8 +2244,8 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ React48.createElement(
-  Box28,
+var Chevron = ({ css }) => /* @__PURE__ */ React52.createElement(
+  Box31,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16, fill: "none" },
@@ -2025,7 +2254,7 @@ var Chevron = ({ css }) => /* @__PURE__ */ React48.createElement(
     stroke: "currentColor",
     strokeWidth: 2
   },
-  /* @__PURE__ */ React48.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+  /* @__PURE__ */ React52.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
 );
 var Select = forwardRef11(
   ({
@@ -2050,8 +2279,8 @@ var Select = forwardRef11(
       ...rest
     };
     const state = useSelectState(props);
-    const buttonRef = useObjectRef11(ref);
-    const listboxRef = useRef9(null);
+    const buttonRef = useObjectRef10(ref);
+    const listboxRef = useRef12(null);
     const isSmallScreen = useResponsiveValue2([true, false, false], 2);
     const {
       labelProps,
@@ -2061,23 +2290,23 @@ var Select = forwardRef11(
       descriptionProps,
       errorMessageProps
     } = useSelect(props, state, buttonRef);
-    const { buttonProps } = useButton4(
+    const { buttonProps } = useButton5(
       { isDisabled: disabled, ...triggerProps },
       buttonRef
     );
-    const { focusProps, isFocusVisible } = useFocusRing6();
+    const { focusProps, isFocusVisible } = useFocusRing7();
     const styles = useComponentStyles24(
       "Select",
       { variant, size },
       { parts: ["container", "button", "icon"] }
     );
-    const stateProps = useStateProps10({
+    const stateProps = useStateProps11({
       disabled,
       error,
       focusVisible: isFocusVisible,
       expanded: state.isOpen
     });
-    return /* @__PURE__ */ React48.createElement(
+    return /* @__PURE__ */ React52.createElement(
       FieldBase,
       {
         variant,
@@ -2094,7 +2323,7 @@ var Select = forwardRef11(
         disabled,
         required
       },
-      /* @__PURE__ */ React48.createElement(
+      /* @__PURE__ */ React52.createElement(
         HiddenSelect,
         {
           state,
@@ -2104,8 +2333,8 @@ var Select = forwardRef11(
           isDisabled: disabled
         }
       ),
-      /* @__PURE__ */ React48.createElement(
-        Box28,
+      /* @__PURE__ */ React52.createElement(
+        Box31,
         {
           as: "button",
           __baseCSS: {
@@ -2117,11 +2346,11 @@ var Select = forwardRef11(
           },
           css: styles.button,
           ref: buttonRef,
-          ...mergeProps8(buttonProps, focusProps),
+          ...mergeProps9(buttonProps, focusProps),
           ...stateProps
         },
-        /* @__PURE__ */ React48.createElement(
-          Box28,
+        /* @__PURE__ */ React52.createElement(
+          Box31,
           {
             css: {
               overflow: "hidden",
@@ -2131,9 +2360,9 @@ var Select = forwardRef11(
           },
           state.selectedItem ? state.selectedItem.rendered : props.placeholder
         ),
-        /* @__PURE__ */ React48.createElement(Chevron, { css: styles.icon })
+        /* @__PURE__ */ React52.createElement(Chevron, { css: styles.icon })
       ),
-      isSmallScreen ? /* @__PURE__ */ React48.createElement(Tray, { state }, /* @__PURE__ */ React48.createElement(
+      isSmallScreen ? /* @__PURE__ */ React52.createElement(Tray, { state }, /* @__PURE__ */ React52.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2142,7 +2371,7 @@ var Select = forwardRef11(
           size,
           ...menuProps
         }
-      )) : /* @__PURE__ */ React48.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React48.createElement(
+      )) : /* @__PURE__ */ React52.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ React52.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2155,34 +2384,34 @@ var Select = forwardRef11(
     );
   }
 );
-Select.Option = Item2;
+Select.Option = Item3;
 Select.Section = Section;
 
 // src/Slider/Slider.tsx
-import React50, { forwardRef as forwardRef12 } from "react";
+import React54, { 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 useObjectRef12 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
 import { useComponentStyles as useComponentStyles25 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
-import React49, { useEffect } from "react";
+import React53, { useEffect } from "react";
 import { useSliderThumb } from "@react-aria/slider";
-import { mergeProps as mergeProps9 } from "@react-aria/utils";
-import { useStateProps as useStateProps11 } from "@marigold/system";
+import { mergeProps as mergeProps10 } from "@react-aria/utils";
+import { useStateProps as useStateProps12 } from "@marigold/system";
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 import { VisuallyHidden } from "@react-aria/visually-hidden";
 
 // src/Slider/Thumb.tsx
-import { useFocusRing as useFocusRing7 } from "@react-aria/focus";
+import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 var Thumb = ({ state, trackRef, styles, ...props }) => {
   const { disabled } = props;
-  const inputRef = React49.useRef(null);
-  const { isFocusVisible, focusProps, isFocused } = useFocusRing7();
+  const inputRef = React53.useRef(null);
+  const { isFocusVisible, focusProps, isFocused } = useFocusRing8();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
-  const stateProps = useStateProps11({
+  const stateProps = useStateProps12({
     focus: focused,
     disabled
   });
@@ -2198,7 +2427,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
   useEffect(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ React49.createElement(
+  return /* @__PURE__ */ React53.createElement(
     Box,
     {
       __baseCSS: { top: "50%" },
@@ -2206,13 +2435,13 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
       ...thumbProps,
       ...stateProps
     },
-    /* @__PURE__ */ React49.createElement(VisuallyHidden, null, /* @__PURE__ */ React49.createElement(
+    /* @__PURE__ */ React53.createElement(VisuallyHidden, null, /* @__PURE__ */ React53.createElement(
       Box,
       {
         as: "input",
         type: "range",
         ref: inputRef,
-        ...mergeProps9(inputProps, focusProps)
+        ...mergeProps10(inputProps, focusProps)
       }
     ))
   );
@@ -2222,7 +2451,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
 var Slider = forwardRef12(
   ({ variant, size, width = "100%", ...props }, ref) => {
     const { formatOptions } = props;
-    const trackRef = useObjectRef12(ref);
+    const trackRef = useObjectRef11(ref);
     const numberFormatter = useNumberFormatter(formatOptions);
     const state = useSliderState({ ...props, numberFormatter });
     const { groupProps, trackProps, labelProps, outputProps } = useSlider(
@@ -2238,7 +2467,7 @@ var Slider = forwardRef12(
       { variant, size },
       { parts: ["track", "thumb", "label", "output"] }
     );
-    return /* @__PURE__ */ React50.createElement(
+    return /* @__PURE__ */ React54.createElement(
       Box,
       {
         __baseCSS: {
@@ -2249,7 +2478,7 @@ var Slider = forwardRef12(
         },
         ...groupProps
       },
-      /* @__PURE__ */ React50.createElement(Box, { __baseCSS: { display: "flex", alignSelf: "stretch" } }, props.children && /* @__PURE__ */ React50.createElement(Box, { as: "label", __baseCSS: styles.label, ...labelProps }, props.children), /* @__PURE__ */ React50.createElement(
+      /* @__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(
         Box,
         {
           as: "output",
@@ -2259,7 +2488,7 @@ var Slider = forwardRef12(
         },
         state.getThumbValueLabel(0)
       )),
-      /* @__PURE__ */ React50.createElement(
+      /* @__PURE__ */ React54.createElement(
         Box,
         {
           ...trackProps,
@@ -2270,7 +2499,7 @@ var Slider = forwardRef12(
             cursor: props.disabled ? "not-allowed" : "pointer"
           }
         },
-        /* @__PURE__ */ React50.createElement(
+        /* @__PURE__ */ React54.createElement(
           Box,
           {
             __baseCSS: {
@@ -2280,7 +2509,7 @@ var Slider = forwardRef12(
             css: styles.track
           }
         ),
-        /* @__PURE__ */ React50.createElement(
+        /* @__PURE__ */ React54.createElement(
           Thumb,
           {
             state,
@@ -2295,12 +2524,13 @@ var Slider = forwardRef12(
 );
 
 // src/Split/Split.tsx
-import React51 from "react";
-import { Box as Box29 } from "@marigold/system";
-var Split = (props) => /* @__PURE__ */ React51.createElement(Box29, { ...props, role: "separator", css: { flexGrow: 1 } });
+import React55 from "react";
+import { Box as Box32 } from "@marigold/system";
+var Split = (props) => /* @__PURE__ */ React55.createElement(Box32, { ...props, role: "separator", css: { flexGrow: 1 } });
 
 // src/Stack/Stack.tsx
-import React52 from "react";
+import React56 from "react";
+import { Box as Box33 } from "@marigold/system";
 var ALIGNMENT_X2 = {
   none: "initial",
   left: "flex-start",
@@ -2320,8 +2550,8 @@ var Stack = ({
   alignY = "none",
   stretch = false,
   ...props
-}) => /* @__PURE__ */ React52.createElement(
-  Box,
+}) => /* @__PURE__ */ React56.createElement(
+  Box33,
   {
     css: {
       display: "flex",
@@ -2338,14 +2568,14 @@ var Stack = ({
 );
 
 // src/Switch/Switch.tsx
-import React53, { forwardRef as forwardRef13 } from "react";
-import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
+import React57, { forwardRef as forwardRef13 } from "react";
+import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
-import { useObjectRef as useObjectRef13 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
 import {
   useComponentStyles as useComponentStyles26,
-  useStateProps as useStateProps12
+  useStateProps as useStateProps13
 } from "@marigold/system";
 var Switch = forwardRef13(
   ({
@@ -2358,7 +2588,7 @@ var Switch = forwardRef13(
     defaultChecked,
     ...rest
   }, ref) => {
-    const inputRef = useObjectRef13(ref);
+    const inputRef = useObjectRef12(ref);
     const props = {
       isSelected: checked,
       isDisabled: disabled,
@@ -2368,8 +2598,8 @@ var Switch = forwardRef13(
     };
     const state = useToggleState2(props);
     const { inputProps } = useSwitch(props, state, inputRef);
-    const { isFocusVisible, focusProps } = useFocusRing8();
-    const stateProps = useStateProps12({
+    const { isFocusVisible, focusProps } = useFocusRing9();
+    const stateProps = useStateProps13({
       checked: state.isSelected,
       disabled,
       readOnly,
@@ -2380,7 +2610,7 @@ var Switch = forwardRef13(
       { variant, size },
       { parts: ["container", "label", "track", "thumb"] }
     );
-    return /* @__PURE__ */ React53.createElement(
+    return /* @__PURE__ */ React57.createElement(
       Box,
       {
         as: "label",
@@ -2394,7 +2624,7 @@ var Switch = forwardRef13(
         },
         css: styles.container
       },
-      /* @__PURE__ */ React53.createElement(
+      /* @__PURE__ */ React57.createElement(
         Box,
         {
           as: "input",
@@ -2413,8 +2643,8 @@ var Switch = forwardRef13(
           ...focusProps
         }
       ),
-      props.children && /* @__PURE__ */ React53.createElement(Box, { css: styles.label }, props.children),
-      /* @__PURE__ */ React53.createElement(
+      props.children && /* @__PURE__ */ React57.createElement(Box, { css: styles.label }, props.children),
+      /* @__PURE__ */ React57.createElement(
         Box,
         {
           __baseCSS: {
@@ -2428,7 +2658,7 @@ var Switch = forwardRef13(
           css: styles.track,
           ...stateProps
         },
-        /* @__PURE__ */ React53.createElement(
+        /* @__PURE__ */ React57.createElement(
           Box,
           {
             __baseCSS: {
@@ -2457,7 +2687,7 @@ var Switch = forwardRef13(
 );
 
 // src/Table/Table.tsx
-import React62, { useRef as useRef16 } from "react";
+import React66, { useRef as useRef19 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   Cell,
@@ -2468,7 +2698,7 @@ import {
   useTableState
 } from "@react-stately/table";
 import {
-  Box as Box35,
+  Box as Box39,
   useComponentStyles as useComponentStyles28
 } from "@marigold/system";
 
@@ -2478,21 +2708,21 @@ var TableContext = createContext8({});
 var useTableContext = () => useContext8(TableContext);
 
 // src/Table/TableBody.tsx
-import React54 from "react";
+import React58 from "react";
 import { useTableRowGroup } from "@react-aria/table";
 var TableBody = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup();
-  return /* @__PURE__ */ React54.createElement("tbody", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ React58.createElement("tbody", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableCell.tsx
-import React55, { useRef as useRef10 } from "react";
+import React59, { useRef as useRef13 } from "react";
 import { useTableCell } from "@react-aria/table";
-import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
-import { mergeProps as mergeProps10 } from "@react-aria/utils";
-import { Box as Box30, useStateProps as useStateProps13 } from "@marigold/system";
+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";
 var TableCell = ({ cell }) => {
-  const ref = useRef10(null);
+  const ref = useRef13(null);
   const { interactive, state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -2511,15 +2741,15 @@ var TableCell = ({ cell }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = useFocusRing9();
-  const stateProps = useStateProps13({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React55.createElement(
-    Box30,
+  const { focusProps, isFocusVisible } = useFocusRing10();
+  const stateProps = useStateProps14({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ React59.createElement(
+    Box34,
     {
       as: "td",
       ref,
       css: styles.cell,
-      ...mergeProps10(cellProps, focusProps),
+      ...mergeProps11(cellProps, focusProps),
       ...stateProps
     },
     cell.rendered
@@ -2527,11 +2757,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React56, { useRef as useRef11 } from "react";
+import React60, { useRef as useRef14 } from "react";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
-import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
-import { mergeProps as mergeProps11 } from "@react-aria/utils";
-import { Box as Box31, useStateProps as useStateProps14 } from "@marigold/system";
+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";
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2555,7 +2785,7 @@ var mapCheckboxProps = ({
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef11(null);
+  const ref = useRef14(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -2568,10 +2798,10 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     useTableSelectionCheckbox({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = useFocusRing10();
-  const stateProps = useStateProps14({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ React56.createElement(
-    Box31,
+  const { focusProps, isFocusVisible } = useFocusRing11();
+  const stateProps = useStateProps15({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ React60.createElement(
+    Box35,
     {
       as: "td",
       ref,
@@ -2581,25 +2811,25 @@ var TableCheckboxCell = ({ cell }) => {
         lineHeight: 1
       },
       css: styles.cell,
-      ...mergeProps11(gridCellProps, focusProps),
+      ...mergeProps12(gridCellProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ React56.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ React60.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-import React57, { useRef as useRef12 } from "react";
-import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
-import { useHover as useHover6 } from "@react-aria/interactions";
+import React61, { 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 mergeProps12 } from "@react-aria/utils";
-import { Box as Box32, useStateProps as useStateProps15 } from "@marigold/system";
+import { mergeProps as mergeProps13 } from "@react-aria/utils";
+import { Box as Box36, useStateProps as useStateProps16 } from "@marigold/system";
 var SortIndicator = ({
   direction = "ascending",
   visible
-}) => /* @__PURE__ */ React57.createElement(
-  Box32,
+}) => /* @__PURE__ */ React61.createElement(
+  Box36,
   {
     as: "span",
     role: "presentation",
@@ -2614,7 +2844,7 @@ var SortIndicator = ({
 );
 var TableColumnHeader = ({ column }) => {
   var _a, _b;
-  const ref = useRef12(null);
+  const ref = useRef15(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -2623,25 +2853,25 @@ var TableColumnHeader = ({ column }) => {
     state,
     ref
   );
-  const { hoverProps, isHovered } = useHover6({});
-  const { focusProps, isFocusVisible } = useFocusRing11();
-  const stateProps = useStateProps15({
+  const { hoverProps, isHovered } = useHover7({});
+  const { focusProps, isFocusVisible } = useFocusRing12();
+  const stateProps = useStateProps16({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React57.createElement(
-    Box32,
+  return /* @__PURE__ */ React61.createElement(
+    Box36,
     {
       as: "th",
       colSpan: column.colspan,
       ref,
       __baseCSS: { cursor: "default" },
       css: styles.header,
-      ...mergeProps12(columnHeaderProps, hoverProps, focusProps),
+      ...mergeProps13(columnHeaderProps, hoverProps, focusProps),
       ...stateProps
     },
     column.rendered,
-    column.props.allowsSorting && /* @__PURE__ */ React57.createElement(
+    column.props.allowsSorting && /* @__PURE__ */ React61.createElement(
       SortIndicator,
       {
         direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
@@ -2652,32 +2882,32 @@ var TableColumnHeader = ({ column }) => {
 };
 
 // src/Table/TableHeader.tsx
-import React58 from "react";
+import React62 from "react";
 import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = useTableRowGroup2();
-  return /* @__PURE__ */ React58.createElement("thead", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ React62.createElement("thead", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-import React59, { useRef as useRef13 } from "react";
+import React63, { useRef as useRef16 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef13(null);
+  const ref = useRef16(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
-  return /* @__PURE__ */ React59.createElement("tr", { ...rowProps, ref }, children);
+  return /* @__PURE__ */ React63.createElement("tr", { ...rowProps, ref }, children);
 };
 
 // src/Table/TableRow.tsx
-import React60, { useRef as useRef14 } from "react";
-import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
-import { useHover as useHover7 } from "@react-aria/interactions";
+import React64, { 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 mergeProps13 } from "@react-aria/utils";
-import { Box as Box33, useComponentStyles as useComponentStyles27, useStateProps as useStateProps16 } from "@marigold/system";
+import { mergeProps as mergeProps14 } from "@react-aria/utils";
+import { Box as Box37, useComponentStyles as useComponentStyles27, useStateProps as useStateProps17 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
-  const ref = useRef14(null);
+  const ref = useRef17(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
   const { row: styles } = useComponentStyles27(
@@ -2694,19 +2924,19 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = useFocusRing12({ within: true });
-  const { hoverProps, isHovered } = useHover7({
+  const { focusProps, isFocusVisible } = useFocusRing13({ within: true });
+  const { hoverProps, isHovered } = useHover8({
     isDisabled: disabled || !interactive
   });
-  const stateProps = useStateProps16({
+  const stateProps = useStateProps17({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ React60.createElement(
-    Box33,
+  return /* @__PURE__ */ React64.createElement(
+    Box37,
     {
       as: "tr",
       ref,
@@ -2714,7 +2944,7 @@ var TableRow = ({ children, row }) => {
         cursor: !interactive ? "text" : disabled ? "default" : "pointer"
       },
       css: styles,
-      ...mergeProps13(rowProps, focusProps, hoverProps),
+      ...mergeProps14(rowProps, focusProps, hoverProps),
       ...stateProps
     },
     children
@@ -2722,17 +2952,17 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React61, { useRef as useRef15 } from "react";
-import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
-import { useHover as useHover8 } from "@react-aria/interactions";
+import React65, { useRef as useRef18 } from "react";
+import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
+import { useHover as useHover9 } from "@react-aria/interactions";
 import {
   useTableColumnHeader as useTableColumnHeader2,
   useTableSelectAllCheckbox
 } from "@react-aria/table";
-import { mergeProps as mergeProps14 } from "@react-aria/utils";
-import { Box as Box34, useStateProps as useStateProps17 } from "@marigold/system";
+import { mergeProps as mergeProps15 } from "@react-aria/utils";
+import { Box as Box38, useStateProps as useStateProps18 } from "@marigold/system";
 var TableSelectAllCell = ({ column }) => {
-  const ref = useRef15(null);
+  const ref = useRef18(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -2742,14 +2972,14 @@ var TableSelectAllCell = ({ column }) => {
     ref
   );
   const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
-  const { hoverProps, isHovered } = useHover8({});
-  const { focusProps, isFocusVisible } = useFocusRing13();
-  const stateProps = useStateProps17({
+  const { hoverProps, isHovered } = useHover9({});
+  const { focusProps, isFocusVisible } = useFocusRing14();
+  const stateProps = useStateProps18({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ React61.createElement(
-    Box34,
+  return /* @__PURE__ */ React65.createElement(
+    Box38,
     {
       as: "th",
       ref,
@@ -2759,10 +2989,10 @@ var TableSelectAllCell = ({ column }) => {
         lineHeight: 1
       },
       css: styles.header,
-      ...mergeProps14(columnHeaderProps, hoverProps, focusProps),
+      ...mergeProps15(columnHeaderProps, hoverProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ React61.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ React65.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
@@ -2775,7 +3005,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = useRef16(null);
+  const tableRef = useRef19(null);
   const state = useTableState({
     ...props,
     selectionMode,
@@ -2789,8 +3019,8 @@ var Table = ({
     { parts: ["table", "header", "row", "cell"] }
   );
   const { collection } = state;
-  return /* @__PURE__ */ React62.createElement(TableContext.Provider, { value: { state, interactive, styles } }, /* @__PURE__ */ React62.createElement(
-    Box35,
+  return /* @__PURE__ */ React66.createElement(TableContext.Provider, { value: { state, interactive, styles } }, /* @__PURE__ */ React66.createElement(
+    Box39,
     {
       as: "table",
       ref: tableRef,
@@ -2804,16 +3034,16 @@ var Table = ({
       css: styles.table,
       ...gridProps
     },
-    /* @__PURE__ */ React62.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React62.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...headerRow.childNodes].map(
+    /* @__PURE__ */ React66.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ React66.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...headerRow.childNodes].map(
       (column) => {
         var _a;
-        return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React62.createElement(TableSelectAllCell, { key: column.key, column }) : /* @__PURE__ */ React62.createElement(TableColumnHeader, { key: column.key, column });
+        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 });
       }
     )))),
-    /* @__PURE__ */ React62.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React62.createElement(TableRow, { key: row.key, row }, [...row.childNodes].map(
+    /* @__PURE__ */ React66.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ React66.createElement(TableRow, { key: row.key, row }, [...row.childNodes].map(
       (cell) => {
         var _a;
-        return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ React62.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ React62.createElement(TableCell, { key: cell.key, cell });
+        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 });
       }
     ))))
   ));
@@ -2825,11 +3055,11 @@ Table.Header = Header2;
 Table.Row = Row;
 
 // src/Text/Text.tsx
-import React63 from "react";
+import React67 from "react";
 import {
   useComponentStyles as useComponentStyles29
 } from "@marigold/system";
-import { Box as Box36 } from "@marigold/system";
+import { Box as Box40 } from "@marigold/system";
 var Text = ({
   variant,
   size,
@@ -2847,8 +3077,8 @@ var Text = ({
     variant,
     size
   });
-  return /* @__PURE__ */ React63.createElement(
-    Box36,
+  return /* @__PURE__ */ React67.createElement(
+    Box40,
     {
       as: "p",
       ...props,
@@ -2870,15 +3100,15 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-import React64, { forwardRef as forwardRef14 } from "react";
-import { useHover as useHover9 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
+import React68, { 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 useObjectRef14 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef13 } from "@react-aria/utils";
 import {
-  Box as Box37,
+  Box as Box41,
   useComponentStyles as useComponentStyles30,
-  useStateProps as useStateProps18
+  useStateProps as useStateProps19
 } from "@marigold/system";
 var TextArea = forwardRef14(
   ({
@@ -2893,7 +3123,7 @@ var TextArea = forwardRef14(
     ...props
   }, ref) => {
     const { label, description, errorMessage } = props;
-    const textAreaRef = useObjectRef14(ref);
+    const textAreaRef = useObjectRef13(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
       {
         inputElementType: "textarea",
@@ -2905,9 +3135,9 @@ var TextArea = forwardRef14(
       },
       textAreaRef
     );
-    const { hoverProps, isHovered } = useHover9({});
-    const { focusProps, isFocusVisible } = useFocusRing14();
-    const stateProps = useStateProps18({
+    const { hoverProps, isHovered } = useHover10({});
+    const { focusProps, isFocusVisible } = useFocusRing15();
+    const stateProps = useStateProps19({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
@@ -2915,7 +3145,7 @@ var TextArea = forwardRef14(
       error
     });
     const styles = useComponentStyles30("TextArea", { variant, size });
-    return /* @__PURE__ */ React64.createElement(
+    return /* @__PURE__ */ React68.createElement(
       FieldBase,
       {
         label,
@@ -2931,8 +3161,8 @@ var TextArea = forwardRef14(
         size,
         width
       },
-      /* @__PURE__ */ React64.createElement(
-        Box37,
+      /* @__PURE__ */ React68.createElement(
+        Box41,
         {
           as: "textarea",
           css: styles,
@@ -2949,16 +3179,16 @@ var TextArea = forwardRef14(
 );
 
 // src/TextField/TextField.tsx
-import React65, { forwardRef as forwardRef15 } from "react";
-import { useHover as useHover10 } from "@react-aria/interactions";
-import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
+import React69, { 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 useObjectRef15 } from "@react-aria/utils";
-import { useStateProps as useStateProps19 } from "@marigold/system";
+import { useObjectRef as useObjectRef14 } from "@react-aria/utils";
+import { useStateProps as useStateProps20 } from "@marigold/system";
 var TextField = forwardRef15(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = useObjectRef15(ref);
+    const inputRef = useObjectRef14(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField2(
       {
         isDisabled: disabled,
@@ -2969,19 +3199,19 @@ var TextField = forwardRef15(
       },
       inputRef
     );
-    const { hoverProps, isHovered } = useHover10({});
-    const { focusProps, isFocusVisible } = useFocusRing15({
+    const { hoverProps, isHovered } = useHover11({});
+    const { focusProps, isFocused } = useFocusRing16({
       isTextInput: true,
       autoFocus
     });
-    const stateProps = useStateProps19({
+    const stateProps = useStateProps20({
       hover: isHovered,
-      focus: isFocusVisible,
+      focus: isFocused,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ React65.createElement(
+    return /* @__PURE__ */ React69.createElement(
       FieldBase,
       {
         label,
@@ -2997,8 +3227,8 @@ var TextField = forwardRef15(
         size,
         width
       },
-      /* @__PURE__ */ React65.createElement(
-        Input,
+      /* @__PURE__ */ React69.createElement(Input, { ...stateProps }, /* @__PURE__ */ React69.createElement(
+        Input.Field,
         {
           ref: inputRef,
           variant,
@@ -3008,13 +3238,13 @@ var TextField = forwardRef15(
           ...hoverProps,
           ...stateProps
         }
-      )
+      ))
     );
   }
 );
 
 // src/Tiles/Tiles.tsx
-import React66 from "react";
+import React70 from "react";
 import { useTheme as useTheme3 } from "@marigold/system";
 var Tiles = ({
   space = "none",
@@ -3030,7 +3260,7 @@ var Tiles = ({
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ React66.createElement(
+  return /* @__PURE__ */ React70.createElement(
     Box,
     {
       ...props,
@@ -3050,10 +3280,10 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-import React68 from "react";
+import React72 from "react";
 import { useTooltip } from "@react-aria/tooltip";
 import {
-  Box as Box38,
+  Box as Box42,
   useComponentStyles as useComponentStyles31
 } from "@marigold/system";
 
@@ -3063,7 +3293,7 @@ var TooltipContext = createContext9({});
 var useTooltipContext = () => useContext9(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React67, { useRef as useRef17 } from "react";
+import React71, { useRef as useRef20 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
@@ -3076,7 +3306,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = React67.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = React71.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -3084,8 +3314,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = useRef17(null);
-  const overlayRef = useRef17(null);
+  const tooltipTriggerRef = useRef20(null);
+  const overlayRef = useRef20(null);
   const state = useTooltipTriggerState(props);
   const { triggerProps, tooltipProps } = useTooltipTrigger(
     props,
@@ -3104,7 +3334,7 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ React67.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React67.createElement(
+  return /* @__PURE__ */ React71.createElement(FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ React71.createElement(
     TooltipContext.Provider,
     {
       value: {
@@ -3116,7 +3346,7 @@ var TooltipTrigger = ({
         ...positionProps
       }
     },
-    /* @__PURE__ */ React67.createElement(Overlay, { open: state.isOpen }, tooltip)
+    /* @__PURE__ */ React71.createElement(Overlay, { open: state.isOpen }, tooltip)
   ));
 };
 
@@ -3129,8 +3359,8 @@ var Tooltip = ({ children, variant, size }) => {
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ React68.createElement(
-    Box38,
+  return /* @__PURE__ */ React72.createElement(
+    Box42,
     {
       ...tooltipProps,
       ...rest,
@@ -3138,9 +3368,9 @@ var Tooltip = ({ children, variant, size }) => {
       css: styles.container,
       "data-placement": placement
     },
-    /* @__PURE__ */ React68.createElement("div", null, children),
-    /* @__PURE__ */ React68.createElement(
-      Box38,
+    /* @__PURE__ */ React72.createElement("div", null, children),
+    /* @__PURE__ */ React72.createElement(
+      Box42,
       {
         ...arrowProps,
         __baseCSS: {
@@ -3160,10 +3390,10 @@ var Tooltip = ({ children, variant, size }) => {
 Tooltip.Trigger = TooltipTrigger;
 
 // src/XLoader/XLoader.tsx
-import { SVG as SVG4 } from "@marigold/system";
-import React69, { forwardRef as forwardRef16 } from "react";
-var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement(
-  SVG4,
+import { SVG as SVG5 } from "@marigold/system";
+import React73, { forwardRef as forwardRef16 } from "react";
+var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React73.createElement(
+  SVG5,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -3172,14 +3402,14 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement
     ...props,
     ...ref
   },
-  /* @__PURE__ */ React69.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React73.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+  /* @__PURE__ */ React73.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__ */ React69.createElement(
+    /* @__PURE__ */ React73.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3191,13 +3421,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement
       }
     )
   ),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React73.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__ */ React69.createElement(
+    /* @__PURE__ */ React73.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3209,13 +3439,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement
       }
     )
   ),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React73.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__ */ React69.createElement(
+    /* @__PURE__ */ React73.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3227,13 +3457,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement
       }
     )
   ),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React73.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__ */ React69.createElement(
+    /* @__PURE__ */ React73.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3245,13 +3475,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement
       }
     )
   ),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React73.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__ */ React69.createElement(
+    /* @__PURE__ */ React73.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3263,13 +3493,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement
       }
     )
   ),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React73.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__ */ React69.createElement(
+    /* @__PURE__ */ React73.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3281,13 +3511,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement
       }
     )
   ),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React73.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__ */ React69.createElement(
+    /* @__PURE__ */ React73.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3299,13 +3529,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement
       }
     )
   ),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React73.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__ */ React69.createElement(
+    /* @__PURE__ */ React73.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3317,13 +3547,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement
       }
     )
   ),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React73.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__ */ React69.createElement(
+    /* @__PURE__ */ React73.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3335,13 +3565,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement
       }
     )
   ),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React73.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__ */ React69.createElement(
+    /* @__PURE__ */ React73.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3353,13 +3583,13 @@ var XLoader = forwardRef16((props, ref) => /* @__PURE__ */ React69.createElement
       }
     )
   ),
-  /* @__PURE__ */ React69.createElement(
+  /* @__PURE__ */ React73.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__ */ React69.createElement(
+    /* @__PURE__ */ React73.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3376,6 +3606,7 @@ export {
   ActionMenu,
   Aside,
   Aspect,
+  Autocomplete,
   Badge,
   Body,
   Box,
@@ -3399,6 +3630,8 @@ export {
   Image,
   Inline,
   Input,
+  InputField,
+  Inset,
   Label,
   Link,
   List,