@marigold/components 5.1.0 → 5.2.0

package/dist/index.js

@@ -33,6 +33,7 @@ __export(src_exports, {
   ActionMenu: () => ActionMenu,
   Aside: () => Aside,
   Aspect: () => Aspect,
+  Autocomplete: () => Autocomplete,
   Badge: () => Badge,
   Body: () => Body,
   Box: () => import_system.Box,
@@ -56,6 +57,8 @@ __export(src_exports, {
   Image: () => Image,
   Inline: () => Inline,
   Input: () => Input,
+  InputField: () => InputField,
+  Inset: () => Inset,
   Label: () => Label,
   Link: () => Link,
   List: () => List,
@@ -77,7 +80,7 @@ __export(src_exports, {
   Text: () => Text,
   TextArea: () => TextArea,
   TextField: () => TextField,
-  ThemeProvider: () => import_system32.ThemeProvider,
+  ThemeProvider: () => import_system39.ThemeProvider,
   Tiles: () => Tiles,
   Tooltip: () => Tooltip,
   Tray: () => Tray,
@@ -90,7 +93,7 @@ __export(src_exports, {
   useCheckboxGroupContext: () => useCheckboxGroupContext,
   useFieldGroupContext: () => useFieldGroupContext,
   useListData: () => import_data.useListData,
-  useTheme: () => import_system32.useTheme
+  useTheme: () => import_system39.useTheme
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -163,16 +166,675 @@ var Aspect = ({
   children
 );
 
+// src/Autocomplete/Autocomplete.tsx
+var import_react21 = __toESM(require("react"));
+var import_autocomplete = require("@react-aria/autocomplete");
+var import_i18n = require("@react-aria/i18n");
+var import_combobox = require("@react-stately/combobox");
+var import_collections = require("@react-stately/collections");
+var import_system13 = require("@marigold/system");
+
+// src/FieldBase/FieldBase.tsx
+var import_react7 = __toESM(require("react"));
+var import_system4 = require("@marigold/system");
+
+// src/Label/Label.tsx
+var import_react3 = __toESM(require("react"));
+var import_system2 = require("@marigold/system");
+var Label = ({
+  as = "label",
+  required,
+  children,
+  variant,
+  size,
+  labelWidth,
+  ...props
+}) => {
+  const styles = (0, import_system2.useComponentStyles)("Label", { size, variant });
+  return /* @__PURE__ */ import_react3.default.createElement(
+    import_system2.Box,
+    {
+      ...props,
+      as,
+      "aria-required": required,
+      __baseCSS: {
+        display: "flex",
+        width: labelWidth
+      },
+      css: styles
+    },
+    children,
+    required && /* @__PURE__ */ import_react3.default.createElement(import_system2.SVG, { viewBox: "0 0 24 24", role: "presentation", size: 16, fill: "error" }, /* @__PURE__ */ import_react3.default.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
+var import_react4 = __toESM(require("react"));
+var import_system3 = require("@marigold/system");
+var HelpText = ({
+  variant,
+  size,
+  disabled,
+  description,
+  descriptionProps,
+  error,
+  errorMessage,
+  errorMessageProps,
+  ...props
+}) => {
+  var _a;
+  const hasErrorMessage = errorMessage && error;
+  const styles = (0, import_system3.useComponentStyles)(
+    "HelpText",
+    { variant, size },
+    { parts: ["container", "icon"] }
+  );
+  return /* @__PURE__ */ import_react4.default.createElement(
+    import_system3.Box,
+    {
+      ...hasErrorMessage ? errorMessageProps : descriptionProps,
+      ...props,
+      __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
+      css: styles.container
+    },
+    hasErrorMessage ? /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(
+      import_system3.SVG,
+      {
+        viewBox: "0 0 24 24",
+        role: "presentation",
+        size: ((_a = styles == null ? void 0 : styles.icon) == null ? void 0 : _a.size) || 16
+      },
+      /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.createElement(import_react4.default.Fragment, null, description)
+  );
+};
+
+// src/FieldBase/FieldGroup.tsx
+var import_react5 = __toESM(require("react"));
+var import_react6 = require("react");
+var FieldGroupContext = (0, import_react6.createContext)({});
+var useFieldGroupContext = () => (0, import_react6.useContext)(FieldGroupContext);
+var FieldGroup = ({ labelWidth, children }) => {
+  return /* @__PURE__ */ import_react5.default.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 = (0, import_system4.useComponentStyles)("Field", { variant, size });
+  const { labelWidth } = useFieldGroupContext();
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_system4.Box,
+    {
+      ...props,
+      __baseCSS: {
+        display: "flex",
+        flexDirection: "column",
+        width,
+        position: "relative"
+      },
+      css: style
+    },
+    label && /* @__PURE__ */ import_react7.default.createElement(
+      Label,
+      {
+        required,
+        variant,
+        size,
+        labelWidth,
+        ...labelProps,
+        ...stateProps
+      },
+      label
+    ),
+    /* @__PURE__ */ import_react7.default.createElement(import_system4.Box, { __baseCSS: { display: "flex", flexDirection: "column" } }, children, hasHelpText && /* @__PURE__ */ import_react7.default.createElement(
+      HelpText,
+      {
+        ...stateProps,
+        variant,
+        size,
+        disabled,
+        description,
+        descriptionProps,
+        error,
+        errorMessage,
+        errorMessageProps
+      }
+    ))
+  );
+};
+
+// src/Input/InputField.tsx
+var import_react8 = __toESM(require("react"));
+var import_system5 = require("@marigold/system");
+var InputField = (0, import_react8.forwardRef)(
+  ({ type = "text", ...props }, ref) => {
+    return /* @__PURE__ */ import_react8.default.createElement(
+      import_system5.Box,
+      {
+        __baseCSS: { border: 0, width: "100%", outline: "none" },
+        ...props,
+        ref,
+        as: "input",
+        type
+      }
+    );
+  }
+);
+
+// src/Input/Input.tsx
+var import_system6 = require("@marigold/system");
+var import_react9 = __toESM(require("react"));
+var Input = ({
+  space = "xsmall",
+  children,
+  variant,
+  size,
+  ...props
+}) => {
+  const [leading, input, trailing] = import_react9.default.Children.toArray(children);
+  const styles = (0, import_system6.useComponentStyles)("Input", { variant, size });
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_system6.Box,
+    {
+      __baseCSS: {
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        gap: space
+      },
+      css: styles,
+      ...props
+    },
+    leading,
+    input,
+    trailing
+  );
+};
+Input.Field = InputField;
+
+// src/ListBox/ListBox.tsx
+var import_react13 = __toESM(require("react"));
+var import_utils2 = require("@react-aria/utils");
+var import_system9 = require("@marigold/system");
+var import_listbox3 = require("@react-aria/listbox");
+
+// src/ListBox/Context.ts
+var import_react10 = require("react");
+var ListBoxContext = (0, import_react10.createContext)({});
+var useListBoxContext = () => (0, import_react10.useContext)(ListBoxContext);
+
+// src/ListBox/ListBoxSection.tsx
+var import_react12 = __toESM(require("react"));
+var import_listbox2 = require("@react-aria/listbox");
+var import_system8 = require("@marigold/system");
+
+// src/ListBox/ListBoxOption.tsx
+var import_react11 = __toESM(require("react"));
+var import_listbox = require("@react-aria/listbox");
+var import_utils = require("@react-aria/utils");
+var import_system7 = require("@marigold/system");
+var ListBoxOption = ({ item, state }) => {
+  const ref = (0, import_react11.useRef)(null);
+  const { optionProps, isSelected, isDisabled, isFocused } = (0, import_listbox.useOption)(
+    {
+      key: item.key
+    },
+    state,
+    ref
+  );
+  const { onPointerUp, ...props } = optionProps;
+  const { styles } = useListBoxContext();
+  const stateProps = (0, import_system7.useStateProps)({
+    selected: isSelected,
+    disabled: isDisabled,
+    focusVisible: isFocused
+  });
+  return /* @__PURE__ */ import_react11.default.createElement(
+    import_system7.Box,
+    {
+      as: "li",
+      ref,
+      css: styles.option,
+      ...(0, import_utils.mergeProps)(props, { onPointerDown: onPointerUp }, { ...stateProps })
+    },
+    item.rendered
+  );
+};
+
+// src/ListBox/ListBoxSection.tsx
+var ListBoxSection = ({ section, state }) => {
+  const { itemProps, headingProps, groupProps } = (0, import_listbox2.useListBoxSection)({
+    heading: section.rendered,
+    "aria-label": section["aria-label"]
+  });
+  const { styles } = useListBoxContext();
+  return /* @__PURE__ */ import_react12.default.createElement(import_system8.Box, { as: "li", css: styles.section, ...itemProps }, section.rendered && /* @__PURE__ */ import_react12.default.createElement(import_system8.Box, { css: styles.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ import_react12.default.createElement(
+    import_system8.Box,
+    {
+      as: "ul",
+      __baseCSS: { listStyle: "none", p: 0 },
+      css: styles.list,
+      ...groupProps
+    },
+    [...section.childNodes].map((node) => /* @__PURE__ */ import_react12.default.createElement(ListBoxOption, { key: node.key, item: node, state }))
+  ));
+};
+
+// src/ListBox/ListBox.tsx
+var ListBox = (0, import_react13.forwardRef)(
+  ({ state, variant, size, ...props }, ref) => {
+    const innerRef = (0, import_utils2.useObjectRef)(ref);
+    const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, innerRef);
+    const styles = (0, import_system9.useComponentStyles)(
+      "ListBox",
+      { variant, size },
+      { parts: ["container", "list", "option", "section", "sectionTitle"] }
+    );
+    return /* @__PURE__ */ import_react13.default.createElement(ListBoxContext.Provider, { value: { styles } }, /* @__PURE__ */ import_react13.default.createElement(import_system9.Box, { css: styles.container }, /* @__PURE__ */ import_react13.default.createElement(
+      import_system9.Box,
+      {
+        as: "ul",
+        ref: innerRef,
+        __baseCSS: { listStyle: "none", p: 0 },
+        css: styles.list,
+        ...listBoxProps
+      },
+      [...state.collection].map(
+        (item) => item.type === "section" ? /* @__PURE__ */ import_react13.default.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ import_react13.default.createElement(ListBoxOption, { key: item.key, item, state })
+      )
+    )));
+  }
+);
+
+// src/Overlay/Modal.tsx
+var import_react15 = __toESM(require("react"));
+var import_focus = require("@react-aria/focus");
+var import_overlays = require("@react-aria/overlays");
+var import_utils3 = require("@react-aria/utils");
+
+// src/Overlay/Underlay.tsx
+var import_react14 = __toESM(require("react"));
+var import_system10 = require("@marigold/system");
+var Underlay = ({ size, variant, ...props }) => {
+  const styles = (0, import_system10.useComponentStyles)("Underlay", { size, variant });
+  return /* @__PURE__ */ import_react14.default.createElement(
+    import_system10.Box,
+    {
+      __baseCSS: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 1
+      },
+      css: styles,
+      ...props
+    }
+  );
+};
+
+// src/Overlay/Modal.tsx
+var Modal = (0, import_react15.forwardRef)(
+  ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
+    const modalRef = (0, import_utils3.useObjectRef)(ref);
+    const { overlayProps, underlayProps } = (0, import_overlays.useOverlay)(
+      {
+        isOpen: open,
+        onClose,
+        isDismissable: dismissable,
+        isKeyboardDismissDisabled: !keyboardDismissable
+      },
+      modalRef
+    );
+    (0, import_overlays.usePreventScroll)();
+    const { modalProps } = (0, import_overlays.useModal)({});
+    return /* @__PURE__ */ import_react15.default.createElement(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react15.default.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ import_react15.default.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          position: "fixed",
+          inset: 0,
+          zIndex: 2,
+          pointerEvents: "none"
+        },
+        ref: modalRef,
+        ...(0, import_utils3.mergeProps)(props, overlayProps, modalProps)
+      },
+      /* @__PURE__ */ import_react15.default.createElement("div", { style: { pointerEvents: "auto" } }, children)
+    ));
+  }
+);
+
+// src/Overlay/Overlay.tsx
+var import_react16 = __toESM(require("react"));
+var import_react_transition_group = require("react-transition-group");
+var import_overlays2 = require("@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 = (0, import_react16.useRef)(null);
+  let mountOverlay = open;
+  if (!mountOverlay) {
+    return null;
+  }
+  return /* @__PURE__ */ import_react16.default.createElement(import_overlays2.Overlay, { portalContainer: container }, /* @__PURE__ */ import_react16.default.createElement(import_react_transition_group.Transition, { nodeRef, timeout: duration, in: open, appear: true }, (state) => /* @__PURE__ */ import_react16.default.createElement(
+    "div",
+    {
+      ref: nodeRef,
+      "data-testid": "overlay",
+      style: {
+        ...defaultStyle,
+        ...transitionStyles[state]
+      }
+    },
+    children
+  )));
+};
+
+// src/Overlay/Popover.tsx
+var import_react17 = __toESM(require("react"));
+var import_overlays3 = require("@react-aria/overlays");
+var import_focus2 = require("@react-aria/focus");
+var Popover = (0, import_react17.forwardRef)(
+  (props, ref) => {
+    const fallbackRef = (0, import_react17.useRef)(null);
+    const popoverRef = ref || fallbackRef;
+    let { children, state, ...otherProps } = props;
+    return /* @__PURE__ */ import_react17.default.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ import_react17.default.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
+  }
+);
+var PopoverWrapper = (0, import_react17.forwardRef)(
+  ({
+    children,
+    isNonModal,
+    state,
+    keyboardDismissDisabled,
+    ...props
+  }, ref) => {
+    const { popoverProps, underlayProps } = (0, import_overlays3.usePopover)(
+      {
+        ...props,
+        isNonModal,
+        isKeyboardDismissDisabled: keyboardDismissDisabled,
+        popoverRef: ref,
+        placement: "bottom left"
+      },
+      state
+    );
+    return /* @__PURE__ */ import_react17.default.createElement(import_focus2.FocusScope, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ import_react17.default.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ import_react17.default.createElement(
+      "div",
+      {
+        ...popoverProps,
+        style: {
+          ...popoverProps.style,
+          minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
+        },
+        ref,
+        role: "presentation"
+      },
+      !isNonModal && /* @__PURE__ */ import_react17.default.createElement(import_overlays3.DismissButton, { onDismiss: state.close }),
+      children,
+      /* @__PURE__ */ import_react17.default.createElement(import_overlays3.DismissButton, { onDismiss: state.close })
+    ));
+  }
+);
+
+// src/Overlay/Tray.tsx
+var import_react18 = __toESM(require("react"));
+var import_system11 = require("@marigold/system");
+var import_focus3 = require("@react-aria/focus");
+var import_overlays4 = require("@react-aria/overlays");
+var import_utils4 = require("@react-aria/utils");
+var import_react19 = require("react");
+var Tray = (0, import_react19.forwardRef)(
+  ({ state, children, ...props }, ref) => {
+    const trayRef = (0, import_utils4.useObjectRef)(ref);
+    return /* @__PURE__ */ import_react18.default.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ import_react18.default.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
+  }
+);
+var TrayWrapper = (0, import_react19.forwardRef)(
+  ({ children, state, ...props }, ref) => {
+    let { modalProps, underlayProps } = (0, import_overlays4.useModalOverlay)(
+      {
+        ...props,
+        isDismissable: true
+      },
+      state,
+      ref
+    );
+    return /* @__PURE__ */ import_react18.default.createElement(import_focus3.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react18.default.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ import_react18.default.createElement(
+      import_system11.Box,
+      {
+        ...modalProps,
+        ref,
+        __baseCSS: { position: "absolute", width: "100%", bottom: 0 },
+        "data-testid": "tray"
+      },
+      /* @__PURE__ */ import_react18.default.createElement(import_overlays4.DismissButton, { onDismiss: state.close }),
+      children,
+      /* @__PURE__ */ import_react18.default.createElement(import_overlays4.DismissButton, { onDismiss: state.close })
+    )));
+  }
+);
+
+// src/Autocomplete/ClearButton.tsx
+var import_react20 = __toESM(require("react"));
+var import_interactions = require("@react-aria/interactions");
+var import_focus4 = require("@react-aria/focus");
+var import_button = require("@react-aria/button");
+var import_utils5 = require("@react-aria/utils");
+var import_system12 = require("@marigold/system");
+var ClearButton = ({
+  preventFocus,
+  disabled,
+  onClick,
+  onPress,
+  onPressStart,
+  onPressEnd,
+  onPressChange,
+  onPressUp,
+  excludeFromTabOrder,
+  preventFocusOnPress,
+  ...props
+}) => {
+  const buttonRef = (0, import_react20.useRef)(null);
+  const { hoverProps, isHovered } = (0, import_interactions.useHover)({ isDisabled: disabled });
+  const { isFocusVisible, focusProps } = (0, import_focus4.useFocusRing)({
+    autoFocus: props.autoFocus
+  });
+  const { buttonProps, isPressed } = (0, import_button.useButton)(
+    {
+      ...props,
+      onClick,
+      onPress,
+      onPressStart,
+      onPressEnd,
+      onPressChange,
+      onPressUp,
+      excludeFromTabOrder,
+      preventFocusOnPress,
+      isDisabled: disabled
+    },
+    buttonRef
+  );
+  if (preventFocus) {
+    delete buttonProps.tabIndex;
+  }
+  const stateProps = (0, import_system12.useStateProps)({
+    active: isPressed,
+    focusVisible: isFocusVisible,
+    hover: isHovered
+  });
+  return /* @__PURE__ */ import_react20.default.createElement(
+    import_system12.Box,
+    {
+      ...(0, import_utils5.mergeProps)(buttonProps, focusProps, hoverProps, props),
+      ...stateProps,
+      as: "button",
+      ref: buttonRef,
+      css: {
+        appearance: "none",
+        border: "none",
+        p: 0,
+        cursor: "pointer"
+      }
+    },
+    /* @__PURE__ */ import_react20.default.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        height: 20,
+        width: 20
+      },
+      /* @__PURE__ */ import_react20.default.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__ */ import_react21.default.createElement(
+  import_system13.SVG,
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    height: 16,
+    width: 16
+  },
+  /* @__PURE__ */ import_react21.default.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 } = (0, import_i18n.useFilter)({ sensitivity: "base" });
+  const props = {
+    ...rest,
+    onInputChange: onChange,
+    inputValue: value,
+    defaultInputValue: defaultValue,
+    isDisabled: disabled,
+    isRequired: required,
+    isReadOnly: readOnly,
+    validationState: error ? "invalid" : "valid"
+  };
+  const state = (0, import_combobox.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 = (0, import_react21.useRef)(null);
+  const listBoxRef = (0, import_react21.useRef)(null);
+  const popoverRef = (0, import_react21.useRef)(null);
+  const { inputProps, listBoxProps, labelProps, clearButtonProps } = (0, import_autocomplete.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__ */ import_react21.default.createElement(import_react21.default.Fragment, null, /* @__PURE__ */ import_react21.default.createElement(
+    FieldBase,
+    {
+      label: props.label,
+      labelProps,
+      description: props.description,
+      error,
+      errorMessage: props.errorMessage,
+      errorMessageProps,
+      disabled,
+      width
+    },
+    /* @__PURE__ */ import_react21.default.createElement(Input, null, /* @__PURE__ */ import_react21.default.createElement(SearchIcon, null), /* @__PURE__ */ import_react21.default.createElement(Input.Field, { ...inputProps, ref: inputRef }), state.inputValue !== "" && /* @__PURE__ */ import_react21.default.createElement(
+      ClearButton,
+      {
+        preventFocus: true,
+        disabled: isDisabled,
+        ...restClearButtonProps
+      }
+    ))
+  ), /* @__PURE__ */ import_react21.default.createElement(
+    Popover,
+    {
+      state,
+      ref: popoverRef,
+      triggerRef: inputRef,
+      scrollRef: listBoxRef,
+      isNonModal: true
+    },
+    /* @__PURE__ */ import_react21.default.createElement(ListBox, { ref: listBoxRef, state, ...listBoxProps })
+  ));
+};
+Autocomplete.Item = import_collections.Item;
+
 // src/Badge/Badge.tsx
-var import_react3 = __toESM(require("react"));
-var import_system2 = require("@marigold/system");
+var import_react22 = __toESM(require("react"));
+var import_system14 = require("@marigold/system");
 var Badge = ({ variant, size, children, ...props }) => {
-  const styles = (0, import_system2.useComponentStyles)("Badge", { variant, size });
-  return /* @__PURE__ */ import_react3.default.createElement(import_system.Box, { ...props, css: styles }, children);
+  const styles = (0, import_system14.useComponentStyles)("Badge", { variant, size });
+  return /* @__PURE__ */ import_react22.default.createElement(import_system.Box, { ...props, css: styles }, children);
 };
 
 // src/Breakout/Breakout.tsx
-var import_react4 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var useAlignment = (direction) => {
   switch (direction) {
     case "right":
@@ -193,7 +855,7 @@ var Breakout = ({
 }) => {
   const alignItems = useAlignment(alignY);
   const justifyContent = useAlignment(alignX);
-  return /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react23.default.createElement(
     import_system.Box,
     {
       css: {
@@ -211,21 +873,21 @@ var Breakout = ({
 };
 
 // src/Body/Body.tsx
-var import_react5 = __toESM(require("react"));
-var import_system3 = require("@marigold/system");
+var import_react24 = __toESM(require("react"));
+var import_system15 = require("@marigold/system");
 var Body = ({ children, variant, size, ...props }) => {
-  const styles = (0, import_system3.useComponentStyles)("Body", { variant, size });
-  return /* @__PURE__ */ import_react5.default.createElement(import_system3.Box, { as: "section", ...props, css: styles }, children);
+  const styles = (0, import_system15.useComponentStyles)("Body", { variant, size });
+  return /* @__PURE__ */ import_react24.default.createElement(import_system15.Box, { as: "section", ...props, css: styles }, children);
 };
 
 // src/Button/Button.tsx
-var import_react6 = __toESM(require("react"));
-var import_button = require("@react-aria/button");
-var import_focus = require("@react-aria/focus");
-var import_interactions = require("@react-aria/interactions");
-var import_utils = require("@react-aria/utils");
-var import_system4 = require("@marigold/system");
-var Button = (0, import_react6.forwardRef)(
+var import_react25 = __toESM(require("react"));
+var import_button2 = require("@react-aria/button");
+var import_focus5 = require("@react-aria/focus");
+var import_interactions2 = require("@react-aria/interactions");
+var import_utils6 = require("@react-aria/utils");
+var import_system16 = require("@marigold/system");
+var Button = (0, import_react25.forwardRef)(
   ({
     as = "button",
     children,
@@ -241,12 +903,12 @@ var Button = (0, import_react6.forwardRef)(
     fullWidth,
     ...props
   }, ref) => {
-    const buttonRef = (0, import_utils.useObjectRef)(ref);
-    const { hoverProps, isHovered } = (0, import_interactions.useHover)({ isDisabled: disabled });
-    const { isFocusVisible, focusProps } = (0, import_focus.useFocusRing)({
+    const buttonRef = (0, import_utils6.useObjectRef)(ref);
+    const { hoverProps, isHovered } = (0, import_interactions2.useHover)({ isDisabled: disabled });
+    const { isFocusVisible, focusProps } = (0, import_focus5.useFocusRing)({
       autoFocus: props.autoFocus
     });
-    const { buttonProps, isPressed } = (0, import_button.useButton)(
+    const { buttonProps, isPressed } = (0, import_button2.useButton)(
       {
         /**
          * `react-aria` only expected `Element` but we casted
@@ -264,16 +926,16 @@ var Button = (0, import_react6.forwardRef)(
       },
       buttonRef
     );
-    const styles = (0, import_system4.useComponentStyles)("Button", { variant, size });
-    const stateProps = (0, import_system4.useStateProps)({
+    const styles = (0, import_system16.useComponentStyles)("Button", { variant, size });
+    const stateProps = (0, import_system16.useStateProps)({
       active: isPressed,
       focusVisible: isFocusVisible,
       hover: isHovered
     });
-    return /* @__PURE__ */ import_react6.default.createElement(
-      import_system4.Box,
+    return /* @__PURE__ */ import_react25.default.createElement(
+      import_system16.Box,
       {
-        ...(0, import_utils.mergeProps)(buttonProps, focusProps, hoverProps, props),
+        ...(0, import_utils6.mergeProps)(buttonProps, focusProps, hoverProps, props),
         ...stateProps,
         as,
         ref: buttonRef,
@@ -296,8 +958,8 @@ var Button = (0, import_react6.forwardRef)(
 );
 
 // src/Card/Card.tsx
-var import_react7 = __toESM(require("react"));
-var import_system5 = require("@marigold/system");
+var import_react26 = __toESM(require("react"));
+var import_system17 = require("@marigold/system");
 var Card = ({
   children,
   variant,
@@ -311,18 +973,18 @@ var Card = ({
   pr,
   ...props
 }) => {
-  const styles = (0, import_system5.useComponentStyles)("Card", { variant, size });
-  return /* @__PURE__ */ import_react7.default.createElement(import_system5.Box, { ...props, css: [styles, { p, px, py, pt, pb, pl, pr }] }, children);
+  const styles = (0, import_system17.useComponentStyles)("Card", { variant, size });
+  return /* @__PURE__ */ import_react26.default.createElement(import_system17.Box, { ...props, css: [styles, { p, px, py, pt, pb, pl, pr }] }, children);
 };
 
 // src/Center/Center.tsx
-var import_react8 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var Center = ({
   maxWidth,
   space = "none",
   children,
   ...props
-}) => /* @__PURE__ */ import_react8.default.createElement(
+}) => /* @__PURE__ */ import_react27.default.createElement(
   import_system.Box,
   {
     css: {
@@ -341,171 +1003,23 @@ var Center = ({
 );
 
 // src/Checkbox/Checkbox.tsx
-var import_react15 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_checkbox3 = require("@react-aria/checkbox");
-var import_focus2 = require("@react-aria/focus");
-var import_interactions2 = require("@react-aria/interactions");
-var import_utils2 = require("@react-aria/utils");
+var import_focus6 = require("@react-aria/focus");
+var import_interactions3 = require("@react-aria/interactions");
+var import_utils7 = require("@react-aria/utils");
 var import_toggle = require("@react-stately/toggle");
-var import_system10 = require("@marigold/system");
+var import_system19 = require("@marigold/system");
 
 // src/Checkbox/CheckboxGroup.tsx
-var import_react14 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var import_checkbox = require("@react-aria/checkbox");
 var import_checkbox2 = require("@react-stately/checkbox");
-var import_system9 = require("@marigold/system");
-
-// src/FieldBase/FieldBase.tsx
-var import_react13 = __toESM(require("react"));
-var import_system8 = require("@marigold/system");
-
-// src/Label/Label.tsx
-var import_react9 = __toESM(require("react"));
-var import_system6 = require("@marigold/system");
-var Label = ({
-  as = "label",
-  required,
-  children,
-  variant,
-  size,
-  labelWidth,
-  ...props
-}) => {
-  const styles = (0, import_system6.useComponentStyles)("Label", { size, variant });
-  return /* @__PURE__ */ import_react9.default.createElement(
-    import_system6.Box,
-    {
-      ...props,
-      as,
-      "aria-required": required,
-      __baseCSS: {
-        display: "flex",
-        width: labelWidth
-      },
-      css: styles
-    },
-    children,
-    required && /* @__PURE__ */ import_react9.default.createElement(import_system6.SVG, { viewBox: "0 0 24 24", role: "presentation", size: 16, fill: "error" }, /* @__PURE__ */ import_react9.default.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
-var import_react10 = __toESM(require("react"));
-var import_system7 = require("@marigold/system");
-var HelpText = ({
-  variant,
-  size,
-  disabled,
-  description,
-  descriptionProps,
-  error,
-  errorMessage,
-  errorMessageProps,
-  ...props
-}) => {
-  var _a;
-  const hasErrorMessage = errorMessage && error;
-  const styles = (0, import_system7.useComponentStyles)(
-    "HelpText",
-    { variant, size },
-    { parts: ["container", "icon"] }
-  );
-  return /* @__PURE__ */ import_react10.default.createElement(
-    import_system7.Box,
-    {
-      ...hasErrorMessage ? errorMessageProps : descriptionProps,
-      ...props,
-      __baseCSS: { display: "flex", alignItems: "center", gap: 4 },
-      css: styles.container
-    },
-    hasErrorMessage ? /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.default.createElement(
-      import_system7.SVG,
-      {
-        viewBox: "0 0 24 24",
-        role: "presentation",
-        size: ((_a = styles == null ? void 0 : styles.icon) == null ? void 0 : _a.size) || 16
-      },
-      /* @__PURE__ */ import_react10.default.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__ */ import_react10.default.createElement(import_react10.default.Fragment, null, description)
-  );
-};
-
-// src/FieldBase/FieldGroup.tsx
-var import_react11 = __toESM(require("react"));
-var import_react12 = require("react");
-var FieldGroupContext = (0, import_react12.createContext)({});
-var useFieldGroupContext = () => (0, import_react12.useContext)(FieldGroupContext);
-var FieldGroup = ({ labelWidth, children }) => {
-  return /* @__PURE__ */ import_react11.default.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 = (0, import_system8.useComponentStyles)("Field", { variant, size });
-  const { labelWidth } = useFieldGroupContext();
-  return /* @__PURE__ */ import_react13.default.createElement(
-    import_system8.Box,
-    {
-      ...props,
-      __baseCSS: {
-        display: "flex",
-        flexDirection: "column",
-        width,
-        position: "relative"
-      },
-      css: style
-    },
-    label && /* @__PURE__ */ import_react13.default.createElement(
-      Label,
-      {
-        required,
-        variant,
-        size,
-        labelWidth,
-        ...labelProps,
-        ...stateProps
-      },
-      label
-    ),
-    /* @__PURE__ */ import_react13.default.createElement(import_system8.Box, { __baseCSS: { display: "flex", flexDirection: "column" } }, children, hasHelpText && /* @__PURE__ */ import_react13.default.createElement(
-      HelpText,
-      {
-        ...stateProps,
-        variant,
-        size,
-        disabled,
-        description,
-        descriptionProps,
-        error,
-        errorMessage,
-        errorMessageProps
-      }
-    ))
-  );
-};
-
-// src/Checkbox/CheckboxGroup.tsx
-var CheckboxGroupContext = (0, import_react14.createContext)(
+var import_system18 = require("@marigold/system");
+var CheckboxGroupContext = (0, import_react28.createContext)(
   null
 );
-var useCheckboxGroupContext = () => (0, import_react14.useContext)(CheckboxGroupContext);
+var useCheckboxGroupContext = () => (0, import_react28.useContext)(CheckboxGroupContext);
 var CheckboxGroup = ({
   children,
   required,
@@ -523,12 +1037,12 @@ var CheckboxGroup = ({
   };
   const state = (0, import_checkbox2.useCheckboxGroupState)(props);
   const { groupProps, labelProps, descriptionProps, errorMessageProps } = (0, import_checkbox.useCheckboxGroup)(props, state);
-  const stateProps = (0, import_system9.useStateProps)({
+  const stateProps = (0, import_system18.useStateProps)({
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react28.default.createElement(
     FieldBase,
     {
       label: props.label,
@@ -543,8 +1057,8 @@ var CheckboxGroup = ({
       required,
       ...groupProps
     },
-    /* @__PURE__ */ import_react14.default.createElement(
-      import_system9.Box,
+    /* @__PURE__ */ import_react28.default.createElement(
+      import_system18.Box,
       {
         role: "presentation",
         __baseCSS: {
@@ -553,13 +1067,13 @@ var CheckboxGroup = ({
           alignItems: "start"
         }
       },
-      /* @__PURE__ */ import_react14.default.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children)
+      /* @__PURE__ */ import_react28.default.createElement(CheckboxGroupContext.Provider, { value: { error, ...state } }, children)
     )
   );
 };
 
 // src/Checkbox/Checkbox.tsx
-var CheckMark = () => /* @__PURE__ */ import_react15.default.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ import_react15.default.createElement(
+var CheckMark = () => /* @__PURE__ */ import_react29.default.createElement("svg", { viewBox: "0 0 12 10" }, /* @__PURE__ */ import_react29.default.createElement(
   "path",
   {
     fill: "currentColor",
@@ -567,7 +1081,7 @@ var CheckMark = () => /* @__PURE__ */ import_react15.default.createElement("svg"
     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__ */ import_react15.default.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ import_react15.default.createElement(
+var IndeterminateMark = () => /* @__PURE__ */ import_react29.default.createElement("svg", { width: "12", height: "3", viewBox: "0 0 12 3" }, /* @__PURE__ */ import_react29.default.createElement(
   "path",
   {
     fill: "currentColor",
@@ -575,8 +1089,8 @@ var IndeterminateMark = () => /* @__PURE__ */ import_react15.default.createEleme
     d: "M11.5 2.04018H0.5V0.46875H11.5V2.04018Z"
   }
 ));
-var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import_react15.default.createElement(
-  import_system10.Box,
+var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import_react29.default.createElement(
+  import_system19.Box,
   {
     "aria-hidden": "true",
     __baseCSS: {
@@ -594,9 +1108,9 @@ var Icon = ({ css, checked, indeterminate, ...props }) => /* @__PURE__ */ import
     css,
     ...props
   },
-  indeterminate ? /* @__PURE__ */ import_react15.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react15.default.createElement(CheckMark, null) : null
+  indeterminate ? /* @__PURE__ */ import_react29.default.createElement(IndeterminateMark, null) : checked ? /* @__PURE__ */ import_react29.default.createElement(CheckMark, null) : null
 );
-var Checkbox = (0, import_react15.forwardRef)(
+var Checkbox = (0, import_react29.forwardRef)(
   ({
     size,
     variant,
@@ -609,7 +1123,7 @@ var Checkbox = (0, import_react15.forwardRef)(
     error,
     ...props
   }, ref) => {
-    const inputRef = (0, import_utils2.useObjectRef)(ref);
+    const inputRef = (0, import_utils7.useObjectRef)(ref);
     const checkboxProps = {
       isIndeterminate: indeterminate,
       isDisabled: disabled,
@@ -645,7 +1159,7 @@ var Checkbox = (0, import_react15.forwardRef)(
       }),
       inputRef
     );
-    const styles = (0, import_system10.useComponentStyles)(
+    const styles = (0, import_system19.useComponentStyles)(
       "Checkbox",
       {
         variant,
@@ -653,9 +1167,9 @@ var Checkbox = (0, import_react15.forwardRef)(
       },
       { parts: ["container", "label", "checkbox"] }
     );
-    const { hoverProps, isHovered } = (0, import_interactions2.useHover)({});
-    const { isFocusVisible, focusProps } = (0, import_focus2.useFocusRing)();
-    const stateProps = (0, import_system10.useStateProps)({
+    const { hoverProps, isHovered } = (0, import_interactions3.useHover)({});
+    const { isFocusVisible, focusProps } = (0, import_focus6.useFocusRing)();
+    const stateProps = (0, import_system19.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -664,8 +1178,8 @@ var Checkbox = (0, import_react15.forwardRef)(
       readOnly,
       indeterminate
     });
-    return /* @__PURE__ */ import_react15.default.createElement(
-      import_system10.Box,
+    return /* @__PURE__ */ import_react29.default.createElement(
+      import_system19.Box,
       {
         as: "label",
         __baseCSS: {
@@ -678,8 +1192,8 @@ var Checkbox = (0, import_react15.forwardRef)(
         ...hoverProps,
         ...stateProps
       },
-      /* @__PURE__ */ import_react15.default.createElement(
-        import_system10.Box,
+      /* @__PURE__ */ import_react29.default.createElement(
+        import_system19.Box,
         {
           as: "input",
           ref: inputRef,
@@ -697,7 +1211,7 @@ var Checkbox = (0, import_react15.forwardRef)(
           ...focusProps
         }
       ),
-      /* @__PURE__ */ import_react15.default.createElement(
+      /* @__PURE__ */ import_react29.default.createElement(
         Icon,
         {
           checked: inputProps.checked,
@@ -706,13 +1220,13 @@ var Checkbox = (0, import_react15.forwardRef)(
           ...stateProps
         }
       ),
-      props.children && /* @__PURE__ */ import_react15.default.createElement(import_system10.Box, { css: styles.label, ...stateProps }, props.children)
+      props.children && /* @__PURE__ */ import_react29.default.createElement(import_system19.Box, { css: styles.label, ...stateProps }, props.children)
     );
   }
 );
 
 // src/Columns/Columns.tsx
-var import_react16 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var Columns = ({
   space = "none",
   columns,
@@ -721,14 +1235,14 @@ var Columns = ({
   children,
   ...props
 }) => {
-  if (import_react16.Children.count(children) !== columns.length) {
+  if (import_react30.Children.count(children) !== columns.length) {
     throw new Error(
-      `Columns: expected ${columns.length} children, got ${import_react16.Children.count(
+      `Columns: expected ${columns.length} children, got ${import_react30.Children.count(
         children
       )}`
     );
   }
-  return /* @__PURE__ */ import_react16.default.createElement(
+  return /* @__PURE__ */ import_react30.default.createElement(
     import_system.Box,
     {
       css: {
@@ -747,7 +1261,7 @@ var Columns = ({
       },
       ...props
     },
-    import_react16.Children.map(children, (child, idx) => /* @__PURE__ */ import_react16.default.createElement(
+    import_react30.Children.map(children, (child, idx) => /* @__PURE__ */ import_react30.default.createElement(
       import_system.Box,
       {
         css: {
@@ -755,13 +1269,13 @@ var Columns = ({
           flexGrow: columns[idx]
         }
       },
-      (0, import_react16.isValidElement)(child) ? (0, import_react16.cloneElement)(child) : child
+      (0, import_react30.isValidElement)(child) ? (0, import_react30.cloneElement)(child) : child
     ))
   );
 };
 
 // src/Container/Container.tsx
-var import_react17 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var import_tokens2 = require("@marigold/tokens");
 var ALIGN_ITEMS = {
   left: "start",
@@ -792,7 +1306,7 @@ var Container = ({
   ...props
 }) => {
   const maxWidth = import_tokens2.size[contentType][size];
-  return /* @__PURE__ */ import_react17.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement(
     import_system.Box,
     {
       css: {
@@ -810,22 +1324,22 @@ var Container = ({
 };
 
 // src/Dialog/Dialog.tsx
-var import_react29 = __toESM(require("react"));
-var import_button2 = require("@react-aria/button");
+var import_react37 = __toESM(require("react"));
+var import_button3 = require("@react-aria/button");
 var import_dialog = require("@react-aria/dialog");
-var import_system15 = require("@marigold/system");
+var import_system22 = require("@marigold/system");
 
 // src/Header/Header.tsx
-var import_react18 = __toESM(require("react"));
-var import_system11 = require("@marigold/system");
+var import_react32 = __toESM(require("react"));
+var import_system20 = require("@marigold/system");
 var Header = ({ children, variant, size, ...props }) => {
-  const styles = (0, import_system11.useComponentStyles)("Header", { variant, size });
-  return /* @__PURE__ */ import_react18.default.createElement(import_system.Box, { as: "header", ...props, css: styles }, children);
+  const styles = (0, import_system20.useComponentStyles)("Header", { variant, size });
+  return /* @__PURE__ */ import_react32.default.createElement(import_system.Box, { as: "header", ...props, css: styles }, children);
 };
 
 // src/Headline/Headline.tsx
-var import_react19 = __toESM(require("react"));
-var import_system12 = require("@marigold/system");
+var import_react33 = __toESM(require("react"));
+var import_system21 = require("@marigold/system");
 var Headline = ({
   children,
   variant,
@@ -835,12 +1349,12 @@ var Headline = ({
   level = "1",
   ...props
 }) => {
-  const styles = (0, import_system12.useComponentStyles)("Headline", {
+  const styles = (0, import_system21.useComponentStyles)("Headline", {
     variant,
     size: size != null ? size : `level-${level}`
   });
-  return /* @__PURE__ */ import_react19.default.createElement(
-    import_system12.Box,
+  return /* @__PURE__ */ import_react33.default.createElement(
+    import_system21.Box,
     {
       as: `h${level}`,
       ...props,
@@ -851,216 +1365,32 @@ var Headline = ({
 };
 
 // src/Dialog/Context.ts
-var import_react20 = require("react");
-var DialogContext = (0, import_react20.createContext)({});
-var useDialogContext = () => (0, import_react20.useContext)(DialogContext);
+var import_react34 = require("react");
+var DialogContext = (0, import_react34.createContext)({});
+var useDialogContext = () => (0, import_react34.useContext)(DialogContext);
 
 // src/Dialog/DialogTrigger.tsx
-var import_react27 = __toESM(require("react"));
-var import_interactions3 = require("@react-aria/interactions");
+var import_react35 = __toESM(require("react"));
+var import_interactions4 = require("@react-aria/interactions");
 var import_overlays5 = require("@react-stately/overlays");
-
-// src/Overlay/Modal.tsx
-var import_react22 = __toESM(require("react"));
-var import_focus3 = require("@react-aria/focus");
-var import_overlays = require("@react-aria/overlays");
-var import_utils3 = require("@react-aria/utils");
-
-// src/Overlay/Underlay.tsx
-var import_react21 = __toESM(require("react"));
-var import_system13 = require("@marigold/system");
-var Underlay = ({ size, variant, ...props }) => {
-  const styles = (0, import_system13.useComponentStyles)("Underlay", { size, variant });
-  return /* @__PURE__ */ import_react21.default.createElement(
-    import_system13.Box,
-    {
-      __baseCSS: {
-        position: "fixed",
-        inset: 0,
-        zIndex: 1
-      },
-      css: styles,
-      ...props
-    }
-  );
-};
-
-// src/Overlay/Modal.tsx
-var Modal = (0, import_react22.forwardRef)(
-  ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
-    const modalRef = (0, import_utils3.useObjectRef)(ref);
-    const { overlayProps, underlayProps } = (0, import_overlays.useOverlay)(
-      {
-        isOpen: open,
-        onClose,
-        isDismissable: dismissable,
-        isKeyboardDismissDisabled: !keyboardDismissable
-      },
-      modalRef
-    );
-    (0, import_overlays.usePreventScroll)();
-    const { modalProps } = (0, import_overlays.useModal)({});
-    return /* @__PURE__ */ import_react22.default.createElement(import_focus3.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react22.default.createElement(Underlay, { ...underlayProps, variant: "modal" }), /* @__PURE__ */ import_react22.default.createElement(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          position: "fixed",
-          inset: 0,
-          zIndex: 2,
-          pointerEvents: "none"
-        },
-        ref: modalRef,
-        ...(0, import_utils3.mergeProps)(props, overlayProps, modalProps)
-      },
-      /* @__PURE__ */ import_react22.default.createElement("div", { style: { pointerEvents: "auto" } }, children)
-    ));
-  }
-);
-
-// src/Overlay/Overlay.tsx
-var import_react23 = __toESM(require("react"));
-var import_react_transition_group = require("react-transition-group");
-var import_overlays2 = require("@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 = (0, import_react23.useRef)(null);
-  let mountOverlay = open;
-  if (!mountOverlay) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react23.default.createElement(import_overlays2.Overlay, { portalContainer: container }, /* @__PURE__ */ import_react23.default.createElement(import_react_transition_group.Transition, { nodeRef, timeout: duration, in: open, appear: true }, (state) => /* @__PURE__ */ import_react23.default.createElement(
-    "div",
-    {
-      ref: nodeRef,
-      "data-testid": "overlay",
-      style: {
-        ...defaultStyle,
-        ...transitionStyles[state]
-      }
-    },
-    children
-  )));
-};
-
-// src/Overlay/Popover.tsx
-var import_react24 = __toESM(require("react"));
-var import_overlays3 = require("@react-aria/overlays");
-var import_utils4 = require("@react-aria/utils");
-var import_focus4 = require("@react-aria/focus");
-var Popover = (0, import_react24.forwardRef)(
-  (props, ref) => {
-    const popoverRef = (0, import_utils4.useObjectRef)(ref);
-    let { children, state, ...otherProps } = props;
-    return /* @__PURE__ */ import_react24.default.createElement(Overlay, { open: state.isOpen, ...otherProps }, /* @__PURE__ */ import_react24.default.createElement(PopoverWrapper, { ref: popoverRef, ...props }, children));
-  }
-);
-var PopoverWrapper = (0, import_react24.forwardRef)(
-  ({
-    children,
-    isNonModal,
-    state,
-    keyboardDismissDisabled,
-    ...props
-  }, ref) => {
-    const { popoverProps, underlayProps } = (0, import_overlays3.usePopover)(
-      {
-        ...props,
-        isNonModal,
-        isKeyboardDismissDisabled: keyboardDismissDisabled,
-        popoverRef: ref,
-        placement: "bottom left"
-      },
-      state
-    );
-    return /* @__PURE__ */ import_react24.default.createElement(import_focus4.FocusScope, { restoreFocus: true }, !isNonModal && /* @__PURE__ */ import_react24.default.createElement(Underlay, { ...underlayProps }), /* @__PURE__ */ import_react24.default.createElement(
-      "div",
-      {
-        ...popoverProps,
-        style: {
-          ...popoverProps.style,
-          minWidth: props.triggerRef.current ? props.triggerRef.current.offsetWidth : void 0
-        },
-        ref,
-        role: "presentation"
-      },
-      !isNonModal && /* @__PURE__ */ import_react24.default.createElement(import_overlays3.DismissButton, { onDismiss: state.close }),
-      children,
-      /* @__PURE__ */ import_react24.default.createElement(import_overlays3.DismissButton, { onDismiss: state.close })
-    ));
-  }
-);
-
-// src/Overlay/Tray.tsx
-var import_react25 = __toESM(require("react"));
-var import_system14 = require("@marigold/system");
-var import_focus5 = require("@react-aria/focus");
-var import_overlays4 = require("@react-aria/overlays");
-var import_utils5 = require("@react-aria/utils");
-var import_react26 = require("react");
-var Tray = (0, import_react26.forwardRef)(
-  ({ state, children, ...props }, ref) => {
-    const trayRef = (0, import_utils5.useObjectRef)(ref);
-    return /* @__PURE__ */ import_react25.default.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ import_react25.default.createElement(TrayWrapper, { state, ...props, ref: trayRef }, children));
-  }
-);
-var TrayWrapper = (0, import_react26.forwardRef)(
-  ({ children, state, ...props }, ref) => {
-    let { modalProps, underlayProps } = (0, import_overlays4.useModalOverlay)(
-      {
-        ...props,
-        isDismissable: true
-      },
-      state,
-      ref
-    );
-    return /* @__PURE__ */ import_react25.default.createElement(import_focus5.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react25.default.createElement(Underlay, { ...underlayProps, variant: "modal" }, /* @__PURE__ */ import_react25.default.createElement(
-      import_system14.Box,
-      {
-        ...modalProps,
-        ref,
-        __baseCSS: { position: "absolute", width: "100%", bottom: 0 },
-        "data-testid": "tray"
-      },
-      /* @__PURE__ */ import_react25.default.createElement(import_overlays4.DismissButton, { onDismiss: state.close }),
-      children,
-      /* @__PURE__ */ import_react25.default.createElement(import_overlays4.DismissButton, { onDismiss: state.close })
-    )));
-  }
-);
-
-// src/Dialog/DialogTrigger.tsx
 var DialogTrigger = ({
   children,
   dismissable = true,
   keyboardDismissable = true
 }) => {
-  const [dialogTrigger, dialog] = import_react27.default.Children.toArray(children);
-  const dialogTriggerRef = (0, import_react27.useRef)(null);
+  const [dialogTrigger, dialog] = import_react35.default.Children.toArray(children);
+  const dialogTriggerRef = (0, import_react35.useRef)(null);
   const state = (0, import_overlays5.useOverlayTriggerState)({});
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ import_react27.default.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ import_react27.default.createElement(
-    import_interactions3.PressResponder,
+  return /* @__PURE__ */ import_react35.default.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ import_react35.default.createElement(
+    import_interactions4.PressResponder,
     {
       ref: dialogTriggerRef,
       isPressed: state.isOpen,
       onPress: state.toggle
     },
     dialogTrigger
-  ), /* @__PURE__ */ import_react27.default.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ import_react27.default.createElement(
+  ), /* @__PURE__ */ import_react35.default.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ import_react35.default.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1074,7 +1404,7 @@ var DialogTrigger = ({
 
 // src/Dialog/DialogController.tsx
 var import_overlays6 = require("@react-stately/overlays");
-var import_react28 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var DialogController = ({
   children,
   dismissable = true,
@@ -1087,7 +1417,7 @@ var DialogController = ({
     onOpenChange
   });
   const ctx = { open: state.isOpen, close: state.close };
-  return /* @__PURE__ */ import_react28.default.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ import_react28.default.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ import_react28.default.createElement(
+  return /* @__PURE__ */ import_react36.default.createElement(DialogContext.Provider, { value: ctx }, /* @__PURE__ */ import_react36.default.createElement(Overlay, { open: state.isOpen }, /* @__PURE__ */ import_react36.default.createElement(
     Modal,
     {
       open: state.isOpen,
@@ -1101,16 +1431,16 @@ var DialogController = ({
 
 // src/Dialog/Dialog.tsx
 var CloseButton = ({ css }) => {
-  const ref = (0, import_react29.useRef)(null);
+  const ref = (0, import_react37.useRef)(null);
   const { close } = useDialogContext();
-  const { buttonProps } = (0, import_button2.useButton)(
+  const { buttonProps } = (0, import_button3.useButton)(
     {
       onPress: () => close == null ? void 0 : close()
     },
     ref
   );
-  return /* @__PURE__ */ import_react29.default.createElement(import_system15.Box, { css: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ import_react29.default.createElement(
-    import_system15.Box,
+  return /* @__PURE__ */ import_react37.default.createElement(import_system22.Box, { css: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ import_react37.default.createElement(
+    import_system22.Box,
     {
       as: "button",
       __baseCSS: {
@@ -1126,7 +1456,7 @@ var CloseButton = ({ css }) => {
       ref,
       ...buttonProps
     },
-    /* @__PURE__ */ import_react29.default.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react29.default.createElement(
+    /* @__PURE__ */ import_react37.default.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ import_react37.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -1137,9 +1467,9 @@ var CloseButton = ({ css }) => {
   ));
 };
 var addTitleProps = (children, titleProps) => {
-  const childs = import_react29.default.Children.toArray(children);
+  const childs = import_react37.default.Children.toArray(children);
   const titleIndex = childs.findIndex(
-    (child) => import_react29.default.isValidElement(child) && (child.type === Header || child.type === Headline)
+    (child) => import_react37.default.isValidElement(child) && (child.type === Header || child.type === Headline)
   );
   if (titleIndex < 0) {
     console.warn(
@@ -1147,7 +1477,7 @@ var addTitleProps = (children, titleProps) => {
     );
     return children;
   }
-  const titleChild = import_react29.default.cloneElement(
+  const titleChild = import_react37.default.cloneElement(
     childs[titleIndex],
     titleProps
   );
@@ -1161,41 +1491,41 @@ var Dialog = ({
   closeButton,
   ...props
 }) => {
-  const ref = (0, import_react29.useRef)(null);
+  const ref = (0, import_react37.useRef)(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = (0, import_dialog.useDialog)(props, ref);
-  const styles = (0, import_system15.useComponentStyles)(
+  const styles = (0, import_system22.useComponentStyles)(
     "Dialog",
     { variant, size },
     { parts: ["container", "closeButton"] }
   );
-  return /* @__PURE__ */ import_react29.default.createElement(import_system15.Box, { __baseCSS: { bg: "#fff" }, css: styles.container, ...dialogProps }, closeButton && /* @__PURE__ */ import_react29.default.createElement(CloseButton, { css: styles.closeButton }), typeof children === "function" ? children({ close, titleProps }) : props["aria-labelledby"] ? children : addTitleProps(children, titleProps));
+  return /* @__PURE__ */ import_react37.default.createElement(import_system22.Box, { __baseCSS: { bg: "#fff" }, css: styles.container, ...dialogProps }, closeButton && /* @__PURE__ */ import_react37.default.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
-var import_react30 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var import_separator = require("@react-aria/separator");
-var import_system16 = require("@marigold/system");
+var import_system23 = require("@marigold/system");
 var Divider = ({ variant, ...props }) => {
   const { separatorProps } = (0, import_separator.useSeparator)(props);
-  const styles = (0, import_system16.useComponentStyles)("Divider", { variant });
-  return /* @__PURE__ */ import_react30.default.createElement(import_system16.Box, { css: styles, ...props, ...separatorProps });
+  const styles = (0, import_system23.useComponentStyles)("Divider", { variant });
+  return /* @__PURE__ */ import_react38.default.createElement(import_system23.Box, { css: styles, ...props, ...separatorProps });
 };
 
 // src/Footer/Footer.tsx
-var import_react31 = __toESM(require("react"));
-var import_system17 = require("@marigold/system");
+var import_react39 = __toESM(require("react"));
+var import_system24 = require("@marigold/system");
 var Footer = ({ children, variant, size, ...props }) => {
-  const styles = (0, import_system17.useComponentStyles)("Footer", { variant, size });
-  return /* @__PURE__ */ import_react31.default.createElement(import_system.Box, { as: "footer", ...props, css: styles }, children);
+  const styles = (0, import_system24.useComponentStyles)("Footer", { variant, size });
+  return /* @__PURE__ */ import_react39.default.createElement(import_system.Box, { as: "footer", ...props, css: styles }, children);
 };
 
 // src/Image/Image.tsx
-var import_react32 = __toESM(require("react"));
-var import_system18 = require("@marigold/system");
-var import_system19 = require("@marigold/system");
+var import_react40 = __toESM(require("react"));
+var import_system25 = require("@marigold/system");
+var import_system26 = require("@marigold/system");
 var Image = ({
   variant,
   size,
@@ -1203,14 +1533,14 @@ var Image = ({
   position,
   ...props
 }) => {
-  const styles = (0, import_system19.useComponentStyles)("Image", { variant, size });
+  const styles = (0, import_system26.useComponentStyles)("Image", { variant, size });
   const css = {
     ...styles,
     objectFit: fit,
     objectPosition: position
   };
-  return /* @__PURE__ */ import_react32.default.createElement(
-    import_system18.Box,
+  return /* @__PURE__ */ import_react40.default.createElement(
+    import_system25.Box,
     {
       ...props,
       as: "img",
@@ -1221,7 +1551,7 @@ var Image = ({
 };
 
 // src/Inline/Inline.tsx
-var import_react33 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var ALIGNMENT_X = {
   left: "flex-start",
   center: "center",
@@ -1238,7 +1568,7 @@ var Inline = ({
   alignY = "center",
   children,
   ...props
-}) => /* @__PURE__ */ import_react33.default.createElement(
+}) => /* @__PURE__ */ import_react41.default.createElement(
   import_system.Box,
   {
     css: {
@@ -1253,22 +1583,17 @@ var Inline = ({
   children
 );
 
-// src/Input/Input.tsx
-var import_react34 = __toESM(require("react"));
-var import_system20 = require("@marigold/system");
-var Input = (0, import_react34.forwardRef)(
-  ({ variant, size, type = "text", ...props }, ref) => {
-    const styles = (0, import_system20.useComponentStyles)("Input", { variant, size });
-    return /* @__PURE__ */ import_react34.default.createElement(import_system20.Box, { ...props, ref, as: "input", type, css: styles });
-  }
-);
+// src/Inset/Inset.tsx
+var import_react42 = __toESM(require("react"));
+var import_system27 = require("@marigold/system");
+var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ import_react42.default.createElement(import_system27.Box, { css: space ? { p: space } : { px: spaceX, py: spaceY } }, children);
 
 // src/Link/Link.tsx
-var import_react35 = __toESM(require("react"));
+var import_react43 = __toESM(require("react"));
 var import_link = require("@react-aria/link");
-var import_system21 = require("@marigold/system");
-var import_utils6 = require("@react-aria/utils");
-var Link = (0, import_react35.forwardRef)(
+var import_system28 = require("@marigold/system");
+var import_utils8 = require("@react-aria/utils");
+var Link = (0, import_react43.forwardRef)(
   ({
     as = "a",
     variant,
@@ -1279,7 +1604,7 @@ var Link = (0, import_react35.forwardRef)(
     onPressStart,
     ...props
   }, ref) => {
-    const linkRef = (0, import_utils6.useObjectRef)(ref);
+    const linkRef = (0, import_utils8.useObjectRef)(ref);
     const { linkProps } = (0, import_link.useLink)(
       {
         ...props,
@@ -1288,8 +1613,8 @@ var Link = (0, import_react35.forwardRef)(
       },
       linkRef
     );
-    const styles = (0, import_system21.useComponentStyles)("Link", { variant, size });
-    return /* @__PURE__ */ import_react35.default.createElement(
+    const styles = (0, import_system28.useComponentStyles)("Link", { variant, size });
+    return /* @__PURE__ */ import_react43.default.createElement(
       import_system.Box,
       {
         as,
@@ -1305,20 +1630,20 @@ var Link = (0, import_react35.forwardRef)(
 );
 
 // src/List/List.tsx
-var import_react38 = __toESM(require("react"));
-var import_system23 = require("@marigold/system");
+var import_react46 = __toESM(require("react"));
+var import_system30 = require("@marigold/system");
 
 // src/List/Context.ts
-var import_react36 = require("react");
-var ListContext = (0, import_react36.createContext)({});
-var useListContext = () => (0, import_react36.useContext)(ListContext);
+var import_react44 = require("react");
+var ListContext = (0, import_react44.createContext)({});
+var useListContext = () => (0, import_react44.useContext)(ListContext);
 
 // src/List/ListItem.tsx
-var import_react37 = __toESM(require("react"));
-var import_system22 = require("@marigold/system");
+var import_react45 = __toESM(require("react"));
+var import_system29 = require("@marigold/system");
 var ListItem = ({ children, ...props }) => {
   const { styles } = useListContext();
-  return /* @__PURE__ */ import_react37.default.createElement(import_system22.Box, { ...props, as: "li", css: styles }, children);
+  return /* @__PURE__ */ import_react45.default.createElement(import_system29.Box, { ...props, as: "li", css: styles }, children);
 };
 
 // src/List/List.tsx
@@ -1329,43 +1654,43 @@ var List = ({
   size,
   ...props
 }) => {
-  const styles = (0, import_system23.useComponentStyles)(
+  const styles = (0, import_system30.useComponentStyles)(
     "List",
     { variant, size },
     { parts: ["ul", "ol", "item"] }
   );
-  return /* @__PURE__ */ import_react38.default.createElement(import_system23.Box, { ...props, as, css: styles[as] }, /* @__PURE__ */ import_react38.default.createElement(ListContext.Provider, { value: { styles: styles.item } }, children));
+  return /* @__PURE__ */ import_react46.default.createElement(import_system30.Box, { ...props, as, css: styles[as] }, /* @__PURE__ */ import_react46.default.createElement(ListContext.Provider, { value: { styles: styles.item } }, children));
 };
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-var import_react42 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_menu4 = require("@react-aria/menu");
-var import_collections = require("@react-stately/collections");
+var import_collections2 = require("@react-stately/collections");
 var import_tree = require("@react-stately/tree");
-var import_system26 = require("@marigold/system");
+var import_system33 = require("@marigold/system");
 
 // src/Menu/Context.ts
-var import_react39 = require("react");
-var MenuContext = (0, import_react39.createContext)({});
-var useMenuContext = () => (0, import_react39.useContext)(MenuContext);
+var import_react47 = require("react");
+var MenuContext = (0, import_react47.createContext)({});
+var useMenuContext = () => (0, import_react47.useContext)(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-var import_react40 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var import_menu = require("@react-stately/menu");
-var import_interactions4 = require("@react-aria/interactions");
+var import_interactions5 = require("@react-aria/interactions");
 var import_menu2 = require("@react-aria/menu");
-var import_utils7 = require("@react-aria/utils");
-var import_system24 = require("@marigold/system");
+var import_utils9 = require("@react-aria/utils");
+var import_system31 = require("@marigold/system");
 var MenuTrigger = ({
   disabled,
   open,
   onOpenChange,
   children
 }) => {
-  const [menuTrigger, menu] = import_react40.default.Children.toArray(children);
-  const menuTriggerRef = (0, import_react40.useRef)(null);
-  const menuRef = (0, import_utils7.useObjectRef)();
+  const [menuTrigger, menu] = import_react48.default.Children.toArray(children);
+  const menuTriggerRef = (0, import_react48.useRef)(null);
+  const menuRef = (0, import_utils9.useObjectRef)();
   const state = (0, import_menu.useMenuTriggerState)({
     isOpen: open,
     onOpenChange
@@ -1382,26 +1707,26 @@ var MenuTrigger = ({
     onClose: state.close,
     autoFocus: state.focusStrategy
   };
-  const isSmallScreen = (0, import_system24.useResponsiveValue)([true, false, false], 2);
-  return /* @__PURE__ */ import_react40.default.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ import_react40.default.createElement(
-    import_interactions4.PressResponder,
+  const isSmallScreen = (0, import_system31.useResponsiveValue)([true, false, false], 2);
+  return /* @__PURE__ */ import_react48.default.createElement(MenuContext.Provider, { value: menuContext }, /* @__PURE__ */ import_react48.default.createElement(
+    import_interactions5.PressResponder,
     {
       ...menuTriggerProps,
       ref: menuTriggerRef,
       isPressed: state.isOpen
     },
     menuTrigger
-  ), isSmallScreen ? /* @__PURE__ */ import_react40.default.createElement(Tray, { state }, menu) : /* @__PURE__ */ import_react40.default.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
+  ), isSmallScreen ? /* @__PURE__ */ import_react48.default.createElement(Tray, { state }, menu) : /* @__PURE__ */ import_react48.default.createElement(Popover, { triggerRef: menuTriggerRef, scrollRef: menuRef, state }, menu));
 };
 
 // src/Menu/MenuItem.tsx
-var import_react41 = __toESM(require("react"));
-var import_focus6 = require("@react-aria/focus");
+var import_react49 = __toESM(require("react"));
+var import_focus7 = require("@react-aria/focus");
 var import_menu3 = require("@react-aria/menu");
-var import_utils8 = require("@react-aria/utils");
-var import_system25 = require("@marigold/system");
+var import_utils10 = require("@react-aria/utils");
+var import_system32 = require("@marigold/system");
 var MenuItem = ({ item, state, onAction, css }) => {
-  const ref = (0, import_react41.useRef)(null);
+  const ref = (0, import_react49.useRef)(null);
   const { onClose } = useMenuContext();
   const { menuItemProps } = (0, import_menu3.useMenuItem)(
     {
@@ -1412,13 +1737,13 @@ var MenuItem = ({ item, state, onAction, css }) => {
     state,
     ref
   );
-  const { isFocusVisible, focusProps } = (0, import_focus6.useFocusRing)();
-  const stateProps = (0, import_system25.useStateProps)({
+  const { isFocusVisible, focusProps } = (0, import_focus7.useFocusRing)();
+  const stateProps = (0, import_system32.useStateProps)({
     focus: isFocusVisible
   });
   const { onPointerUp, ...props } = menuItemProps;
-  return /* @__PURE__ */ import_react41.default.createElement(
-    import_system25.Box,
+  return /* @__PURE__ */ import_react49.default.createElement(
+    import_system32.Box,
     {
       as: "li",
       ref,
@@ -1428,7 +1753,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
         }
       },
       css,
-      ...(0, import_utils8.mergeProps)(props, { onPointerDown: onPointerUp }, focusProps),
+      ...(0, import_utils10.mergeProps)(props, { onPointerDown: onPointerUp }, focusProps),
       ...stateProps
     },
     item.rendered
@@ -1436,21 +1761,21 @@ var MenuItem = ({ item, state, onAction, css }) => {
 };
 
 // src/Menu/Menu.tsx
-var import_utils9 = require("@react-aria/utils");
+var import_utils11 = require("@react-aria/utils");
 var Menu = ({ variant, size, ...props }) => {
   const { ref: scrollRef, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
-  const ref = (0, import_react42.useRef)(null);
+  const ref = (0, import_react50.useRef)(null);
   const state = (0, import_tree.useTreeState)({ ...ownProps, selectionMode: "none" });
   const { menuProps } = (0, import_menu4.useMenu)(ownProps, state, ref);
-  (0, import_utils9.useSyncRef)({ ref: scrollRef }, ref);
-  const styles = (0, import_system26.useComponentStyles)(
+  (0, import_utils11.useSyncRef)({ ref: scrollRef }, ref);
+  const styles = (0, import_system33.useComponentStyles)(
     "Menu",
     { variant, size },
     { parts: ["container", "item"] }
   );
-  return /* @__PURE__ */ import_react42.default.createElement(
-    import_system26.Box,
+  return /* @__PURE__ */ import_react50.default.createElement(
+    import_system33.Box,
     {
       as: "ul",
       ref,
@@ -1462,7 +1787,7 @@ var Menu = ({ variant, size, ...props }) => {
       css: styles.container,
       ...menuProps
     },
-    [...state.collection].map((item) => /* @__PURE__ */ import_react42.default.createElement(
+    [...state.collection].map((item) => /* @__PURE__ */ import_react50.default.createElement(
       MenuItem,
       {
         key: item.key,
@@ -1475,18 +1800,18 @@ var Menu = ({ variant, size, ...props }) => {
   );
 };
 Menu.Trigger = MenuTrigger;
-Menu.Item = import_collections.Item;
+Menu.Item = import_collections2.Item;
 
 // src/Menu/ActionMenu.tsx
-var import_react43 = __toESM(require("react"));
-var import_system27 = require("@marigold/system");
+var import_react51 = __toESM(require("react"));
+var import_system34 = require("@marigold/system");
 var ActionMenu = (props) => {
-  return /* @__PURE__ */ import_react43.default.createElement(Menu.Trigger, null, /* @__PURE__ */ import_react43.default.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ import_react43.default.createElement(import_system27.SVG, { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react43.default.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__ */ import_react43.default.createElement(Menu, { ...props }));
+  return /* @__PURE__ */ import_react51.default.createElement(Menu.Trigger, null, /* @__PURE__ */ import_react51.default.createElement(Button, { variant: "menu", size: "small" }, /* @__PURE__ */ import_react51.default.createElement(import_system34.SVG, { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react51.default.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__ */ import_react51.default.createElement(Menu, { ...props }));
 };
 
 // src/Message/Message.tsx
-var import_react44 = __toESM(require("react"));
-var import_system28 = require("@marigold/system");
+var import_react52 = __toESM(require("react"));
+var import_system35 = require("@marigold/system");
 var Message = ({
   messageTitle,
   variant = "info",
@@ -1494,7 +1819,7 @@ var Message = ({
   children,
   ...props
 }) => {
-  const styles = (0, import_system28.useComponentStyles)(
+  const styles = (0, import_system35.useComponentStyles)(
     "Message",
     {
       variant,
@@ -1502,14 +1827,14 @@ var Message = ({
     },
     { parts: ["container", "icon", "title", "content"] }
   );
-  var icon = /* @__PURE__ */ import_react44.default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react44.default.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__ */ import_react52.default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react52.default.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__ */ import_react44.default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react44.default.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__ */ import_react52.default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react52.default.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__ */ import_react44.default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react44.default.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__ */ import_react52.default.createElement("svg", { viewBox: "0 0 24 24" }, /* @__PURE__ */ import_react52.default.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__ */ import_react44.default.createElement(import_system.Box, { css: styles.container, ...props }, /* @__PURE__ */ import_react44.default.createElement(import_system.Box, { __baseCSS: { display: "flex", alignItems: "top", gap: 4 } }, /* @__PURE__ */ import_react44.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { css: styles.container, ...props }, /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { __baseCSS: { display: "flex", alignItems: "top", gap: 4 } }, /* @__PURE__ */ import_react52.default.createElement(
     import_system.Box,
     {
       role: "presentation",
@@ -1517,34 +1842,34 @@ var Message = ({
       css: styles.icon
     },
     icon
-  ), /* @__PURE__ */ import_react44.default.createElement(import_system.Box, { css: styles.title }, messageTitle)), /* @__PURE__ */ import_react44.default.createElement(import_system.Box, { css: styles.content }, children));
+  ), /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { css: styles.title }, messageTitle)), /* @__PURE__ */ import_react52.default.createElement(import_system.Box, { css: styles.content }, children));
 };
 
-// src/NumberField/NumberField.tsx
-var import_react46 = __toESM(require("react"));
-var import_focus7 = require("@react-aria/focus");
-var import_interactions6 = require("@react-aria/interactions");
-var import_i18n = require("@react-aria/i18n");
+// src/NumberField/NumberField.tsx
+var import_react54 = __toESM(require("react"));
+var import_focus8 = require("@react-aria/focus");
+var import_interactions7 = require("@react-aria/interactions");
+var import_i18n2 = require("@react-aria/i18n");
 var import_numberfield = require("@react-aria/numberfield");
-var import_utils11 = require("@react-aria/utils");
+var import_utils13 = require("@react-aria/utils");
 var import_numberfield2 = require("@react-stately/numberfield");
-var import_system30 = require("@marigold/system");
+var import_system37 = require("@marigold/system");
 
 // src/NumberField/StepButton.tsx
-var import_react45 = __toESM(require("react"));
-var import_button3 = require("@react-aria/button");
-var import_interactions5 = require("@react-aria/interactions");
-var import_utils10 = require("@react-aria/utils");
-var import_system29 = require("@marigold/system");
-var Plus = () => /* @__PURE__ */ import_react45.default.createElement(
-  import_system29.Box,
+var import_react53 = __toESM(require("react"));
+var import_button4 = require("@react-aria/button");
+var import_interactions6 = require("@react-aria/interactions");
+var import_utils12 = require("@react-aria/utils");
+var import_system36 = require("@marigold/system");
+var Plus = () => /* @__PURE__ */ import_react53.default.createElement(
+  import_system36.Box,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16 },
     viewBox: "0 0 20 20",
     fill: "currentColor"
   },
-  /* @__PURE__ */ import_react45.default.createElement(
+  /* @__PURE__ */ import_react53.default.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -1553,15 +1878,15 @@ var Plus = () => /* @__PURE__ */ import_react45.default.createElement(
     }
   )
 );
-var Minus = () => /* @__PURE__ */ import_react45.default.createElement(
-  import_system29.Box,
+var Minus = () => /* @__PURE__ */ import_react53.default.createElement(
+  import_system36.Box,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16 },
     viewBox: "0 0 20 20",
     fill: "currentColor"
   },
-  /* @__PURE__ */ import_react45.default.createElement(
+  /* @__PURE__ */ import_react53.default.createElement(
     "path",
     {
       fillRule: "evenodd",
@@ -1571,20 +1896,20 @@ var Minus = () => /* @__PURE__ */ import_react45.default.createElement(
   )
 );
 var StepButton = ({ direction, css, ...props }) => {
-  const ref = (0, import_react45.useRef)(null);
-  const { buttonProps, isPressed } = (0, import_button3.useButton)(
+  const ref = (0, import_react53.useRef)(null);
+  const { buttonProps, isPressed } = (0, import_button4.useButton)(
     { ...props, elementType: "div" },
     ref
   );
-  const { hoverProps, isHovered } = (0, import_interactions5.useHover)(props);
-  const stateProps = (0, import_system29.useStateProps)({
+  const { hoverProps, isHovered } = (0, import_interactions6.useHover)(props);
+  const stateProps = (0, import_system36.useStateProps)({
     active: isPressed,
     hover: isHovered,
     disabled: props.isDisabled
   });
   const Icon3 = direction === "up" ? Plus : Minus;
-  return /* @__PURE__ */ import_react45.default.createElement(
-    import_system29.Box,
+  return /* @__PURE__ */ import_react53.default.createElement(
+    import_system36.Box,
     {
       __baseCSS: {
         display: "flex",
@@ -1593,15 +1918,15 @@ var StepButton = ({ direction, css, ...props }) => {
         cursor: props.isDisabled ? "not-allowed" : "pointer"
       },
       css,
-      ...(0, import_utils10.mergeProps)(buttonProps, hoverProps),
+      ...(0, import_utils12.mergeProps)(buttonProps, hoverProps),
       ...stateProps
     },
-    /* @__PURE__ */ import_react45.default.createElement(Icon3, null)
+    /* @__PURE__ */ import_react53.default.createElement(Icon3, null)
   );
 };
 
 // src/NumberField/NumberField.tsx
-var NumberField = (0, import_react46.forwardRef)(
+var NumberField = (0, import_react54.forwardRef)(
   ({
     variant,
     size,
@@ -1621,8 +1946,8 @@ var NumberField = (0, import_react46.forwardRef)(
       ...rest
     };
     const showStepper = !hideStepper;
-    const { locale } = (0, import_i18n.useLocale)();
-    const inputRef = (0, import_utils11.useObjectRef)(ref);
+    const { locale } = (0, import_i18n2.useLocale)();
+    const inputRef = (0, import_utils13.useObjectRef)(ref);
     const state = (0, import_numberfield2.useNumberFieldState)({ ...props, locale });
     const {
       labelProps,
@@ -1633,25 +1958,25 @@ var NumberField = (0, import_react46.forwardRef)(
       incrementButtonProps,
       decrementButtonProps
     } = (0, import_numberfield.useNumberField)(props, state, inputRef);
-    const { hoverProps, isHovered } = (0, import_interactions6.useHover)({ isDisabled: disabled });
-    const { focusProps, isFocused } = (0, import_focus7.useFocusRing)({
+    const { hoverProps, isHovered } = (0, import_interactions7.useHover)({ isDisabled: disabled });
+    const { focusProps, isFocused } = (0, import_focus8.useFocusRing)({
       within: true,
       isTextInput: true,
       autoFocus: props.autoFocus
     });
-    const styles = (0, import_system30.useComponentStyles)(
+    const styles = (0, import_system37.useComponentStyles)(
       "NumberField",
       { variant, size },
       { parts: ["group", "stepper"] }
     );
-    const stateProps = (0, import_system30.useStateProps)({
+    const stateProps = (0, import_system37.useStateProps)({
       hover: isHovered,
       focus: isFocused,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ import_react46.default.createElement(
+    return /* @__PURE__ */ import_react54.default.createElement(
       FieldBase,
       {
         label: props.label,
@@ -1667,8 +1992,8 @@ var NumberField = (0, import_react46.forwardRef)(
         size,
         width
       },
-      /* @__PURE__ */ import_react46.default.createElement(
-        import_system30.Box,
+      /* @__PURE__ */ import_react54.default.createElement(
+        import_system37.Box,
         {
           "data-group": true,
           __baseCSS: {
@@ -1681,10 +2006,10 @@ var NumberField = (0, import_react46.forwardRef)(
             }
           },
           css: styles.group,
-          ...(0, import_utils11.mergeProps)(groupProps, focusProps, hoverProps),
+          ...(0, import_utils13.mergeProps)(groupProps, focusProps, hoverProps),
           ...stateProps
         },
-        showStepper && /* @__PURE__ */ import_react46.default.createElement(
+        showStepper && /* @__PURE__ */ import_react54.default.createElement(
           StepButton,
           {
             direction: "down",
@@ -1692,17 +2017,15 @@ var NumberField = (0, import_react46.forwardRef)(
             ...decrementButtonProps
           }
         ),
-        /* @__PURE__ */ import_react46.default.createElement(
-          Input,
+        /* @__PURE__ */ import_react54.default.createElement(Input, { variant, size, ...stateProps }, /* @__PURE__ */ import_react54.default.createElement(
+          Input.Field,
           {
             ref: inputRef,
-            variant,
-            size,
             ...inputProps,
             ...stateProps
           }
-        ),
-        showStepper && /* @__PURE__ */ import_react46.default.createElement(
+        )),
+        showStepper && /* @__PURE__ */ import_react54.default.createElement(
           StepButton,
           {
             direction: "up",
@@ -1716,13 +2039,13 @@ var NumberField = (0, import_react46.forwardRef)(
 );
 
 // src/Provider/index.ts
-var import_system32 = require("@marigold/system");
+var import_system39 = require("@marigold/system");
 var import_ssr = require("@react-aria/ssr");
 
 // src/Provider/MarigoldProvider.tsx
-var import_react47 = __toESM(require("react"));
+var import_react55 = __toESM(require("react"));
 var import_overlays7 = require("@react-aria/overlays");
-var import_system31 = require("@marigold/system");
+var import_system38 = require("@marigold/system");
 function MarigoldProvider({
   children,
   theme,
@@ -1730,43 +2053,43 @@ function MarigoldProvider({
   normalizeDocument = true
 }) {
   var _a;
-  const outer = (0, import_system31.useTheme)();
-  const isTopLevel = outer.theme === import_system31.__defaultTheme;
+  const outer = (0, import_system38.useTheme)();
+  const isTopLevel = outer.theme === import_system38.__defaultTheme;
   if (((_a = outer.theme) == null ? void 0 : _a.root) && !isTopLevel && !selector) {
     throw new Error(
       `[MarigoldProvider] You cannot nest a MarigoldProvider inside another MarigoldProvider without a "selector"! 
       Nested themes with a "root" property must specify a "selector" to prevent accidentally overriding global CSS`
     );
   }
-  return /* @__PURE__ */ import_react47.default.createElement(import_system31.ThemeProvider, { theme }, /* @__PURE__ */ import_react47.default.createElement(
-    import_system31.Global,
+  return /* @__PURE__ */ import_react55.default.createElement(import_system38.ThemeProvider, { theme }, /* @__PURE__ */ import_react55.default.createElement(
+    import_system38.Global,
     {
       normalizeDocument: isTopLevel && normalizeDocument,
       selector
     }
-  ), isTopLevel ? /* @__PURE__ */ import_react47.default.createElement(import_overlays7.OverlayProvider, null, children) : children);
+  ), isTopLevel ? /* @__PURE__ */ import_react55.default.createElement(import_overlays7.OverlayProvider, null, children) : children);
 }
 
 // src/Radio/Radio.tsx
-var import_react50 = __toESM(require("react"));
-var import_interactions7 = require("@react-aria/interactions");
-var import_focus8 = require("@react-aria/focus");
+var import_react58 = __toESM(require("react"));
+var import_interactions8 = require("@react-aria/interactions");
+var import_focus9 = require("@react-aria/focus");
 var import_radio3 = require("@react-aria/radio");
-var import_utils12 = require("@react-aria/utils");
-var import_system34 = require("@marigold/system");
+var import_utils14 = require("@react-aria/utils");
+var import_system41 = require("@marigold/system");
 
 // src/Radio/Context.ts
-var import_react48 = require("react");
-var RadioGroupContext = (0, import_react48.createContext)(
+var import_react56 = require("react");
+var RadioGroupContext = (0, import_react56.createContext)(
   null
 );
-var useRadioGroupContext = () => (0, import_react48.useContext)(RadioGroupContext);
+var useRadioGroupContext = () => (0, import_react56.useContext)(RadioGroupContext);
 
 // src/Radio/RadioGroup.tsx
-var import_react49 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 var import_radio = require("@react-aria/radio");
 var import_radio2 = require("@react-stately/radio");
-var import_system33 = require("@marigold/system");
+var import_system40 = require("@marigold/system");
 var RadioGroup = ({
   children,
   orientation = "vertical",
@@ -1786,12 +2109,12 @@ var RadioGroup = ({
   };
   const state = (0, import_radio2.useRadioGroupState)(props);
   const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = (0, import_radio.useRadioGroup)(props, state);
-  const stateProps = (0, import_system33.useStateProps)({
+  const stateProps = (0, import_system40.useStateProps)({
     disabled,
     readOnly,
     error
   });
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react57.default.createElement(
     FieldBase,
     {
       width,
@@ -1807,8 +2130,8 @@ var RadioGroup = ({
       required,
       ...radioGroupProps
     },
-    /* @__PURE__ */ import_react49.default.createElement(
-      import_system33.Box,
+    /* @__PURE__ */ import_react57.default.createElement(
+      import_system40.Box,
       {
         role: "presentation",
         "data-orientation": orientation,
@@ -1819,15 +2142,15 @@ var RadioGroup = ({
           gap: orientation === "vertical" ? "0.5ch" : "1.5ch"
         }
       },
-      /* @__PURE__ */ import_react49.default.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
+      /* @__PURE__ */ import_react57.default.createElement(RadioGroupContext.Provider, { value: { width, error, state } }, children)
     )
   );
 };
 
 // src/Radio/Radio.tsx
-var Dot = () => /* @__PURE__ */ import_react50.default.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ import_react50.default.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
-var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ import_react50.default.createElement(
-  import_system34.Box,
+var Dot = () => /* @__PURE__ */ import_react58.default.createElement("svg", { viewBox: "0 0 6 6" }, /* @__PURE__ */ import_react58.default.createElement("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }));
+var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ import_react58.default.createElement(
+  import_system41.Box,
   {
     "aria-hidden": "true",
     __baseCSS: {
@@ -1844,9 +2167,9 @@ var Icon2 = ({ checked, css, ...props }) => /* @__PURE__ */ import_react50.defau
     css,
     ...props
   },
-  checked ? /* @__PURE__ */ import_react50.default.createElement(Dot, null) : null
+  checked ? /* @__PURE__ */ import_react58.default.createElement(Dot, null) : null
 );
-var Radio = (0, import_react50.forwardRef)(
+var Radio = (0, import_react58.forwardRef)(
   ({ width, disabled, ...props }, ref) => {
     const {
       variant,
@@ -1855,20 +2178,20 @@ var Radio = (0, import_react50.forwardRef)(
       width: groupWidth,
       state
     } = useRadioGroupContext();
-    const inputRef = (0, import_utils12.useObjectRef)(ref);
+    const inputRef = (0, import_utils14.useObjectRef)(ref);
     const { inputProps } = (0, import_radio3.useRadio)(
       { isDisabled: disabled, ...props },
       state,
       inputRef
     );
-    const styles = (0, import_system34.useComponentStyles)(
+    const styles = (0, import_system41.useComponentStyles)(
       "Radio",
       { variant: variant || props.variant, size: size || props.size },
       { parts: ["container", "label", "radio"] }
     );
-    const { hoverProps, isHovered } = (0, import_interactions7.useHover)({ isDisabled: disabled });
-    const { isFocusVisible, focusProps } = (0, import_focus8.useFocusRing)();
-    const stateProps = (0, import_system34.useStateProps)({
+    const { hoverProps, isHovered } = (0, import_interactions8.useHover)({ isDisabled: disabled });
+    const { isFocusVisible, focusProps } = (0, import_focus9.useFocusRing)();
+    const stateProps = (0, import_system41.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       checked: inputProps.checked,
@@ -1876,8 +2199,8 @@ var Radio = (0, import_react50.forwardRef)(
       readOnly: props.readOnly,
       error
     });
-    return /* @__PURE__ */ import_react50.default.createElement(
-      import_system34.Box,
+    return /* @__PURE__ */ import_react58.default.createElement(
+      import_system41.Box,
       {
         as: "label",
         __baseCSS: {
@@ -1888,10 +2211,10 @@ var Radio = (0, import_react50.forwardRef)(
           width: width || groupWidth || "100%"
         },
         css: styles.container,
-        ...(0, import_utils12.mergeProps)(hoverProps, stateProps)
+        ...(0, import_utils14.mergeProps)(hoverProps, stateProps)
       },
-      /* @__PURE__ */ import_react50.default.createElement(
-        import_system34.Box,
+      /* @__PURE__ */ import_react58.default.createElement(
+        import_system41.Box,
         {
           as: "input",
           ref: inputRef,
@@ -1905,120 +2228,26 @@ var Radio = (0, import_react50.forwardRef)(
             opacity: 1e-4,
             cursor: inputProps.disabled ? "not-allowed" : "pointer"
           },
-          ...(0, import_utils12.mergeProps)(inputProps, focusProps)
+          ...(0, import_utils14.mergeProps)(inputProps, focusProps)
         }
       ),
-      /* @__PURE__ */ import_react50.default.createElement(Icon2, { checked: inputProps.checked, css: styles.radio, ...stateProps }),
-      /* @__PURE__ */ import_react50.default.createElement(import_system34.Box, { css: styles.label, ...stateProps }, props.children)
+      /* @__PURE__ */ import_react58.default.createElement(Icon2, { checked: inputProps.checked, css: styles.radio, ...stateProps }),
+      /* @__PURE__ */ import_react58.default.createElement(import_system41.Box, { css: styles.label, ...stateProps }, props.children)
     );
   }
 );
 Radio.Group = RadioGroup;
 
 // src/Select/Select.tsx
-var import_react55 = __toESM(require("react"));
-var import_button4 = require("@react-aria/button");
-var import_focus9 = require("@react-aria/focus");
-var import_i18n2 = require("@react-aria/i18n");
+var import_react59 = __toESM(require("react"));
+var import_button5 = require("@react-aria/button");
+var import_focus10 = require("@react-aria/focus");
+var import_i18n3 = require("@react-aria/i18n");
 var import_select = require("@react-aria/select");
 var import_select2 = require("@react-stately/select");
-var import_collections2 = require("@react-stately/collections");
+var import_collections3 = require("@react-stately/collections");
 var import_utils15 = require("@react-aria/utils");
-var import_system38 = require("@marigold/system");
-
-// src/ListBox/ListBox.tsx
-var import_react54 = __toESM(require("react"));
-var import_utils14 = require("@react-aria/utils");
-var import_system37 = require("@marigold/system");
-var import_listbox3 = require("@react-aria/listbox");
-
-// src/ListBox/Context.ts
-var import_react51 = require("react");
-var ListBoxContext = (0, import_react51.createContext)({});
-var useListBoxContext = () => (0, import_react51.useContext)(ListBoxContext);
-
-// src/ListBox/ListBoxSection.tsx
-var import_react53 = __toESM(require("react"));
-var import_listbox2 = require("@react-aria/listbox");
-var import_system36 = require("@marigold/system");
-
-// src/ListBox/ListBoxOption.tsx
-var import_react52 = __toESM(require("react"));
-var import_listbox = require("@react-aria/listbox");
-var import_utils13 = require("@react-aria/utils");
-var import_system35 = require("@marigold/system");
-var ListBoxOption = ({ item, state }) => {
-  const ref = (0, import_react52.useRef)(null);
-  const { optionProps, isSelected, isDisabled, isFocused } = (0, import_listbox.useOption)(
-    {
-      key: item.key
-    },
-    state,
-    ref
-  );
-  const { onPointerUp, ...props } = optionProps;
-  const { styles } = useListBoxContext();
-  const stateProps = (0, import_system35.useStateProps)({
-    selected: isSelected,
-    disabled: isDisabled,
-    focusVisible: isFocused
-  });
-  return /* @__PURE__ */ import_react52.default.createElement(
-    import_system35.Box,
-    {
-      as: "li",
-      ref,
-      css: styles.option,
-      ...(0, import_utils13.mergeProps)(props, { onPointerDown: onPointerUp }, { ...stateProps })
-    },
-    item.rendered
-  );
-};
-
-// src/ListBox/ListBoxSection.tsx
-var ListBoxSection = ({ section, state }) => {
-  const { itemProps, headingProps, groupProps } = (0, import_listbox2.useListBoxSection)({
-    heading: section.rendered,
-    "aria-label": section["aria-label"]
-  });
-  const { styles } = useListBoxContext();
-  return /* @__PURE__ */ import_react53.default.createElement(import_system36.Box, { as: "li", css: styles.section, ...itemProps }, section.rendered && /* @__PURE__ */ import_react53.default.createElement(import_system36.Box, { css: styles.sectionTitle, ...headingProps }, section.rendered), /* @__PURE__ */ import_react53.default.createElement(
-    import_system36.Box,
-    {
-      as: "ul",
-      __baseCSS: { listStyle: "none", p: 0 },
-      css: styles.list,
-      ...groupProps
-    },
-    [...section.childNodes].map((node) => /* @__PURE__ */ import_react53.default.createElement(ListBoxOption, { key: node.key, item: node, state }))
-  ));
-};
-
-// src/ListBox/ListBox.tsx
-var ListBox = (0, import_react54.forwardRef)(
-  ({ state, variant, size, ...props }, ref) => {
-    const innerRef = (0, import_utils14.useObjectRef)(ref);
-    const { listBoxProps } = (0, import_listbox3.useListBox)(props, state, innerRef);
-    const styles = (0, import_system37.useComponentStyles)(
-      "ListBox",
-      { variant, size },
-      { parts: ["container", "list", "option", "section", "sectionTitle"] }
-    );
-    return /* @__PURE__ */ import_react54.default.createElement(ListBoxContext.Provider, { value: { styles } }, /* @__PURE__ */ import_react54.default.createElement(import_system37.Box, { css: styles.container }, /* @__PURE__ */ import_react54.default.createElement(
-      import_system37.Box,
-      {
-        as: "ul",
-        ref: innerRef,
-        __baseCSS: { listStyle: "none", p: 0 },
-        css: styles.list,
-        ...listBoxProps
-      },
-      [...state.collection].map(
-        (item) => item.type === "section" ? /* @__PURE__ */ import_react54.default.createElement(ListBoxSection, { key: item.key, section: item, state }) : /* @__PURE__ */ import_react54.default.createElement(ListBoxOption, { key: item.key, item, state })
-      )
-    )));
-  }
-);
+var import_system42 = require("@marigold/system");
 
 // src/Select/intl.ts
 var messages = {
@@ -2031,8 +2260,8 @@ var messages = {
 };
 
 // src/Select/Select.tsx
-var Chevron = ({ css }) => /* @__PURE__ */ import_react55.default.createElement(
-  import_system38.Box,
+var Chevron = ({ css }) => /* @__PURE__ */ import_react59.default.createElement(
+  import_system42.Box,
   {
     as: "svg",
     __baseCSS: { width: 16, height: 16, fill: "none" },
@@ -2041,9 +2270,9 @@ var Chevron = ({ css }) => /* @__PURE__ */ import_react55.default.createElement(
     stroke: "currentColor",
     strokeWidth: 2
   },
-  /* @__PURE__ */ import_react55.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+  /* @__PURE__ */ import_react59.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
 );
-var Select = (0, import_react55.forwardRef)(
+var Select = (0, import_react59.forwardRef)(
   ({
     variant,
     size,
@@ -2055,7 +2284,7 @@ var Select = (0, import_react55.forwardRef)(
     onChange,
     ...rest
   }, ref) => {
-    const formatMessage = (0, import_i18n2.useLocalizedStringFormatter)(messages);
+    const formatMessage = (0, import_i18n3.useLocalizedStringFormatter)(messages);
     const props = {
       isOpen: open,
       isDisabled: disabled,
@@ -2067,8 +2296,8 @@ var Select = (0, import_react55.forwardRef)(
     };
     const state = (0, import_select2.useSelectState)(props);
     const buttonRef = (0, import_utils15.useObjectRef)(ref);
-    const listboxRef = (0, import_react55.useRef)(null);
-    const isSmallScreen = (0, import_system38.useResponsiveValue)([true, false, false], 2);
+    const listboxRef = (0, import_react59.useRef)(null);
+    const isSmallScreen = (0, import_system42.useResponsiveValue)([true, false, false], 2);
     const {
       labelProps,
       triggerProps,
@@ -2077,23 +2306,23 @@ var Select = (0, import_react55.forwardRef)(
       descriptionProps,
       errorMessageProps
     } = (0, import_select.useSelect)(props, state, buttonRef);
-    const { buttonProps } = (0, import_button4.useButton)(
+    const { buttonProps } = (0, import_button5.useButton)(
       { isDisabled: disabled, ...triggerProps },
       buttonRef
     );
-    const { focusProps, isFocusVisible } = (0, import_focus9.useFocusRing)();
-    const styles = (0, import_system38.useComponentStyles)(
+    const { focusProps, isFocusVisible } = (0, import_focus10.useFocusRing)();
+    const styles = (0, import_system42.useComponentStyles)(
       "Select",
       { variant, size },
       { parts: ["container", "button", "icon"] }
     );
-    const stateProps = (0, import_system38.useStateProps)({
+    const stateProps = (0, import_system42.useStateProps)({
       disabled,
       error,
       focusVisible: isFocusVisible,
       expanded: state.isOpen
     });
-    return /* @__PURE__ */ import_react55.default.createElement(
+    return /* @__PURE__ */ import_react59.default.createElement(
       FieldBase,
       {
         variant,
@@ -2110,7 +2339,7 @@ var Select = (0, import_react55.forwardRef)(
         disabled,
         required
       },
-      /* @__PURE__ */ import_react55.default.createElement(
+      /* @__PURE__ */ import_react59.default.createElement(
         import_select.HiddenSelect,
         {
           state,
@@ -2120,8 +2349,8 @@ var Select = (0, import_react55.forwardRef)(
           isDisabled: disabled
         }
       ),
-      /* @__PURE__ */ import_react55.default.createElement(
-        import_system38.Box,
+      /* @__PURE__ */ import_react59.default.createElement(
+        import_system42.Box,
         {
           as: "button",
           __baseCSS: {
@@ -2136,8 +2365,8 @@ var Select = (0, import_react55.forwardRef)(
           ...(0, import_utils15.mergeProps)(buttonProps, focusProps),
           ...stateProps
         },
-        /* @__PURE__ */ import_react55.default.createElement(
-          import_system38.Box,
+        /* @__PURE__ */ import_react59.default.createElement(
+          import_system42.Box,
           {
             css: {
               overflow: "hidden",
@@ -2147,9 +2376,9 @@ var Select = (0, import_react55.forwardRef)(
           },
           state.selectedItem ? state.selectedItem.rendered : props.placeholder
         ),
-        /* @__PURE__ */ import_react55.default.createElement(Chevron, { css: styles.icon })
+        /* @__PURE__ */ import_react59.default.createElement(Chevron, { css: styles.icon })
       ),
-      isSmallScreen ? /* @__PURE__ */ import_react55.default.createElement(Tray, { state }, /* @__PURE__ */ import_react55.default.createElement(
+      isSmallScreen ? /* @__PURE__ */ import_react59.default.createElement(Tray, { state }, /* @__PURE__ */ import_react59.default.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2158,7 +2387,7 @@ var Select = (0, import_react55.forwardRef)(
           size,
           ...menuProps
         }
-      )) : /* @__PURE__ */ import_react55.default.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ import_react55.default.createElement(
+      )) : /* @__PURE__ */ import_react59.default.createElement(Popover, { state, triggerRef: buttonRef, scrollRef: listboxRef }, /* @__PURE__ */ import_react59.default.createElement(
         ListBox,
         {
           ref: listboxRef,
@@ -2171,34 +2400,34 @@ var Select = (0, import_react55.forwardRef)(
     );
   }
 );
-Select.Option = import_collections2.Item;
-Select.Section = import_collections2.Section;
+Select.Option = import_collections3.Item;
+Select.Section = import_collections3.Section;
 
 // src/Slider/Slider.tsx
-var import_react57 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 var import_slider2 = require("@react-aria/slider");
 var import_slider3 = require("@react-stately/slider");
-var import_i18n3 = require("@react-aria/i18n");
+var import_i18n4 = require("@react-aria/i18n");
 var import_utils17 = require("@react-aria/utils");
-var import_system40 = require("@marigold/system");
+var import_system44 = require("@marigold/system");
 
 // src/Slider/Thumb.tsx
-var import_react56 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 var import_slider = require("@react-aria/slider");
 var import_utils16 = require("@react-aria/utils");
-var import_system39 = require("@marigold/system");
+var import_system43 = require("@marigold/system");
 
 // src/VisuallyHidden/VisuallyHidden.tsx
 var import_visually_hidden = require("@react-aria/visually-hidden");
 
 // src/Slider/Thumb.tsx
-var import_focus10 = require("@react-aria/focus");
+var import_focus11 = require("@react-aria/focus");
 var Thumb = ({ state, trackRef, styles, ...props }) => {
   const { disabled } = props;
-  const inputRef = import_react56.default.useRef(null);
-  const { isFocusVisible, focusProps, isFocused } = (0, import_focus10.useFocusRing)();
+  const inputRef = import_react60.default.useRef(null);
+  const { isFocusVisible, focusProps, isFocused } = (0, import_focus11.useFocusRing)();
   const focused = isFocused || isFocusVisible || state.isThumbDragging(0);
-  const stateProps = (0, import_system39.useStateProps)({
+  const stateProps = (0, import_system43.useStateProps)({
     focus: focused,
     disabled
   });
@@ -2211,10 +2440,10 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
     },
     state
   );
-  (0, import_react56.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
-  return /* @__PURE__ */ import_react56.default.createElement(
+  return /* @__PURE__ */ import_react60.default.createElement(
     import_system.Box,
     {
       __baseCSS: { top: "50%" },
@@ -2222,7 +2451,7 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
       ...thumbProps,
       ...stateProps
     },
-    /* @__PURE__ */ import_react56.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react56.default.createElement(
+    /* @__PURE__ */ import_react60.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react60.default.createElement(
       import_system.Box,
       {
         as: "input",
@@ -2235,11 +2464,11 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
 };
 
 // src/Slider/Slider.tsx
-var Slider = (0, import_react57.forwardRef)(
+var Slider = (0, import_react61.forwardRef)(
   ({ variant, size, width = "100%", ...props }, ref) => {
     const { formatOptions } = props;
     const trackRef = (0, import_utils17.useObjectRef)(ref);
-    const numberFormatter = (0, import_i18n3.useNumberFormatter)(formatOptions);
+    const numberFormatter = (0, import_i18n4.useNumberFormatter)(formatOptions);
     const state = (0, import_slider3.useSliderState)({ ...props, numberFormatter });
     const { groupProps, trackProps, labelProps, outputProps } = (0, import_slider2.useSlider)(
       {
@@ -2249,12 +2478,12 @@ var Slider = (0, import_react57.forwardRef)(
       state,
       trackRef
     );
-    const styles = (0, import_system40.useComponentStyles)(
+    const styles = (0, import_system44.useComponentStyles)(
       "Slider",
       { variant, size },
       { parts: ["track", "thumb", "label", "output"] }
     );
-    return /* @__PURE__ */ import_react57.default.createElement(
+    return /* @__PURE__ */ import_react61.default.createElement(
       import_system.Box,
       {
         __baseCSS: {
@@ -2265,7 +2494,7 @@ var Slider = (0, import_react57.forwardRef)(
         },
         ...groupProps
       },
-      /* @__PURE__ */ import_react57.default.createElement(import_system.Box, { __baseCSS: { display: "flex", alignSelf: "stretch" } }, props.children && /* @__PURE__ */ import_react57.default.createElement(import_system.Box, { as: "label", __baseCSS: styles.label, ...labelProps }, props.children), /* @__PURE__ */ import_react57.default.createElement(
+      /* @__PURE__ */ import_react61.default.createElement(import_system.Box, { __baseCSS: { display: "flex", alignSelf: "stretch" } }, props.children && /* @__PURE__ */ import_react61.default.createElement(import_system.Box, { as: "label", __baseCSS: styles.label, ...labelProps }, props.children), /* @__PURE__ */ import_react61.default.createElement(
         import_system.Box,
         {
           as: "output",
@@ -2275,7 +2504,7 @@ var Slider = (0, import_react57.forwardRef)(
         },
         state.getThumbValueLabel(0)
       )),
-      /* @__PURE__ */ import_react57.default.createElement(
+      /* @__PURE__ */ import_react61.default.createElement(
         import_system.Box,
         {
           ...trackProps,
@@ -2286,7 +2515,7 @@ var Slider = (0, import_react57.forwardRef)(
             cursor: props.disabled ? "not-allowed" : "pointer"
           }
         },
-        /* @__PURE__ */ import_react57.default.createElement(
+        /* @__PURE__ */ import_react61.default.createElement(
           import_system.Box,
           {
             __baseCSS: {
@@ -2296,7 +2525,7 @@ var Slider = (0, import_react57.forwardRef)(
             css: styles.track
           }
         ),
-        /* @__PURE__ */ import_react57.default.createElement(
+        /* @__PURE__ */ import_react61.default.createElement(
           Thumb,
           {
             state,
@@ -2311,12 +2540,13 @@ var Slider = (0, import_react57.forwardRef)(
 );
 
 // src/Split/Split.tsx
-var import_react58 = __toESM(require("react"));
-var import_system41 = require("@marigold/system");
-var Split = (props) => /* @__PURE__ */ import_react58.default.createElement(import_system41.Box, { ...props, role: "separator", css: { flexGrow: 1 } });
+var import_react62 = __toESM(require("react"));
+var import_system45 = require("@marigold/system");
+var Split = (props) => /* @__PURE__ */ import_react62.default.createElement(import_system45.Box, { ...props, role: "separator", css: { flexGrow: 1 } });
 
 // src/Stack/Stack.tsx
-var import_react59 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
+var import_system46 = require("@marigold/system");
 var ALIGNMENT_X2 = {
   none: "initial",
   left: "flex-start",
@@ -2336,8 +2566,8 @@ var Stack = ({
   alignY = "none",
   stretch = false,
   ...props
-}) => /* @__PURE__ */ import_react59.default.createElement(
-  import_system.Box,
+}) => /* @__PURE__ */ import_react63.default.createElement(
+  import_system46.Box,
   {
     css: {
       display: "flex",
@@ -2354,13 +2584,13 @@ var Stack = ({
 );
 
 // src/Switch/Switch.tsx
-var import_react60 = __toESM(require("react"));
-var import_focus11 = require("@react-aria/focus");
+var import_react64 = __toESM(require("react"));
+var import_focus12 = require("@react-aria/focus");
 var import_switch = require("@react-aria/switch");
 var import_utils18 = require("@react-aria/utils");
 var import_toggle2 = require("@react-stately/toggle");
-var import_system42 = require("@marigold/system");
-var Switch = (0, import_react60.forwardRef)(
+var import_system47 = require("@marigold/system");
+var Switch = (0, import_react64.forwardRef)(
   ({
     variant,
     size,
@@ -2381,19 +2611,19 @@ var Switch = (0, import_react60.forwardRef)(
     };
     const state = (0, import_toggle2.useToggleState)(props);
     const { inputProps } = (0, import_switch.useSwitch)(props, state, inputRef);
-    const { isFocusVisible, focusProps } = (0, import_focus11.useFocusRing)();
-    const stateProps = (0, import_system42.useStateProps)({
+    const { isFocusVisible, focusProps } = (0, import_focus12.useFocusRing)();
+    const stateProps = (0, import_system47.useStateProps)({
       checked: state.isSelected,
       disabled,
       readOnly,
       focus: isFocusVisible
     });
-    const styles = (0, import_system42.useComponentStyles)(
+    const styles = (0, import_system47.useComponentStyles)(
       "Switch",
       { variant, size },
       { parts: ["container", "label", "track", "thumb"] }
     );
-    return /* @__PURE__ */ import_react60.default.createElement(
+    return /* @__PURE__ */ import_react64.default.createElement(
       import_system.Box,
       {
         as: "label",
@@ -2407,7 +2637,7 @@ var Switch = (0, import_react60.forwardRef)(
         },
         css: styles.container
       },
-      /* @__PURE__ */ import_react60.default.createElement(
+      /* @__PURE__ */ import_react64.default.createElement(
         import_system.Box,
         {
           as: "input",
@@ -2426,8 +2656,8 @@ var Switch = (0, import_react60.forwardRef)(
           ...focusProps
         }
       ),
-      props.children && /* @__PURE__ */ import_react60.default.createElement(import_system.Box, { css: styles.label }, props.children),
-      /* @__PURE__ */ import_react60.default.createElement(
+      props.children && /* @__PURE__ */ import_react64.default.createElement(import_system.Box, { css: styles.label }, props.children),
+      /* @__PURE__ */ import_react64.default.createElement(
         import_system.Box,
         {
           __baseCSS: {
@@ -2441,7 +2671,7 @@ var Switch = (0, import_react60.forwardRef)(
           css: styles.track,
           ...stateProps
         },
-        /* @__PURE__ */ import_react60.default.createElement(
+        /* @__PURE__ */ import_react64.default.createElement(
           import_system.Box,
           {
             __baseCSS: {
@@ -2470,32 +2700,32 @@ var Switch = (0, import_react60.forwardRef)(
 );
 
 // src/Table/Table.tsx
-var import_react70 = __toESM(require("react"));
+var import_react74 = __toESM(require("react"));
 var import_table9 = require("@react-aria/table");
 var import_table10 = require("@react-stately/table");
-var import_system48 = require("@marigold/system");
+var import_system53 = require("@marigold/system");
 
 // src/Table/Context.tsx
-var import_react61 = require("react");
-var TableContext = (0, import_react61.createContext)({});
-var useTableContext = () => (0, import_react61.useContext)(TableContext);
+var import_react65 = require("react");
+var TableContext = (0, import_react65.createContext)({});
+var useTableContext = () => (0, import_react65.useContext)(TableContext);
 
 // src/Table/TableBody.tsx
-var import_react62 = __toESM(require("react"));
+var import_react66 = __toESM(require("react"));
 var import_table = require("@react-aria/table");
 var TableBody = ({ children }) => {
   const { rowGroupProps } = (0, import_table.useTableRowGroup)();
-  return /* @__PURE__ */ import_react62.default.createElement("tbody", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ import_react66.default.createElement("tbody", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableCell.tsx
-var import_react63 = __toESM(require("react"));
+var import_react67 = __toESM(require("react"));
 var import_table2 = require("@react-aria/table");
-var import_focus12 = require("@react-aria/focus");
+var import_focus13 = require("@react-aria/focus");
 var import_utils19 = require("@react-aria/utils");
-var import_system43 = require("@marigold/system");
+var import_system48 = require("@marigold/system");
 var TableCell = ({ cell }) => {
-  const ref = (0, import_react63.useRef)(null);
+  const ref = (0, import_react67.useRef)(null);
   const { interactive, state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table2.useTableCell)(
@@ -2514,10 +2744,10 @@ var TableCell = ({ cell }) => {
     onMouseDown: (e) => e.stopPropagation(),
     onPointerDown: (e) => e.stopPropagation()
   };
-  const { focusProps, isFocusVisible } = (0, import_focus12.useFocusRing)();
-  const stateProps = (0, import_system43.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react63.default.createElement(
-    import_system43.Box,
+  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
+  const stateProps = (0, import_system48.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ import_react67.default.createElement(
+    import_system48.Box,
     {
       as: "td",
       ref,
@@ -2530,11 +2760,11 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-var import_react64 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 var import_table3 = require("@react-aria/table");
-var import_focus13 = require("@react-aria/focus");
+var import_focus14 = require("@react-aria/focus");
 var import_utils20 = require("@react-aria/utils");
-var import_system44 = require("@marigold/system");
+var import_system49 = require("@marigold/system");
 
 // src/Table/utils.ts
 var mapCheckboxProps = ({
@@ -2558,7 +2788,7 @@ var mapCheckboxProps = ({
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = (0, import_react64.useRef)(null);
+  const ref = (0, import_react68.useRef)(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = (0, import_table3.useTableCell)(
@@ -2571,10 +2801,10 @@ var TableCheckboxCell = ({ cell }) => {
   const { checkboxProps } = mapCheckboxProps(
     (0, import_table3.useTableSelectionCheckbox)({ key: cell.parentKey }, state)
   );
-  const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
-  const stateProps = (0, import_system44.useStateProps)({ disabled, focusVisible: isFocusVisible });
-  return /* @__PURE__ */ import_react64.default.createElement(
-    import_system44.Box,
+  const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)();
+  const stateProps = (0, import_system49.useStateProps)({ disabled, focusVisible: isFocusVisible });
+  return /* @__PURE__ */ import_react68.default.createElement(
+    import_system49.Box,
     {
       as: "td",
       ref,
@@ -2587,22 +2817,22 @@ var TableCheckboxCell = ({ cell }) => {
       ...(0, import_utils20.mergeProps)(gridCellProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ import_react64.default.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ import_react68.default.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
 // src/Table/TableColumnHeader.tsx
-var import_react65 = __toESM(require("react"));
-var import_focus14 = require("@react-aria/focus");
-var import_interactions8 = require("@react-aria/interactions");
+var import_react69 = __toESM(require("react"));
+var import_focus15 = require("@react-aria/focus");
+var import_interactions9 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils22 = require("@react-aria/utils");
-var import_system45 = require("@marigold/system");
+var import_system50 = require("@marigold/system");
 var SortIndicator = ({
   direction = "ascending",
   visible
-}) => /* @__PURE__ */ import_react65.default.createElement(
-  import_system45.Box,
+}) => /* @__PURE__ */ import_react69.default.createElement(
+  import_system50.Box,
   {
     as: "span",
     role: "presentation",
@@ -2617,7 +2847,7 @@ var SortIndicator = ({
 );
 var TableColumnHeader = ({ column }) => {
   var _a, _b;
-  const ref = (0, import_react65.useRef)(null);
+  const ref = (0, import_react69.useRef)(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = (0, import_table4.useTableColumnHeader)(
     {
@@ -2626,14 +2856,14 @@ var TableColumnHeader = ({ column }) => {
     state,
     ref
   );
-  const { hoverProps, isHovered } = (0, import_interactions8.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)();
-  const stateProps = (0, import_system45.useStateProps)({
+  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)();
+  const stateProps = (0, import_system50.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react65.default.createElement(
-    import_system45.Box,
+  return /* @__PURE__ */ import_react69.default.createElement(
+    import_system50.Box,
     {
       as: "th",
       colSpan: column.colspan,
@@ -2644,7 +2874,7 @@ var TableColumnHeader = ({ column }) => {
       ...stateProps
     },
     column.rendered,
-    column.props.allowsSorting && /* @__PURE__ */ import_react65.default.createElement(
+    column.props.allowsSorting && /* @__PURE__ */ import_react69.default.createElement(
       SortIndicator,
       {
         direction: (_a = state.sortDescriptor) == null ? void 0 : _a.direction,
@@ -2655,35 +2885,35 @@ var TableColumnHeader = ({ column }) => {
 };
 
 // src/Table/TableHeader.tsx
-var import_react66 = __toESM(require("react"));
+var import_react70 = __toESM(require("react"));
 var import_table5 = require("@react-aria/table");
 var TableHeader = ({ children }) => {
   const { rowGroupProps } = (0, import_table5.useTableRowGroup)();
-  return /* @__PURE__ */ import_react66.default.createElement("thead", { ...rowGroupProps }, children);
+  return /* @__PURE__ */ import_react70.default.createElement("thead", { ...rowGroupProps }, children);
 };
 
 // src/Table/TableHeaderRow.tsx
-var import_react67 = __toESM(require("react"));
+var import_react71 = __toESM(require("react"));
 var import_table6 = require("@react-aria/table");
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = (0, import_react67.useRef)(null);
+  const ref = (0, import_react71.useRef)(null);
   const { rowProps } = (0, import_table6.useTableHeaderRow)({ node: item }, state, ref);
-  return /* @__PURE__ */ import_react67.default.createElement("tr", { ...rowProps, ref }, children);
+  return /* @__PURE__ */ import_react71.default.createElement("tr", { ...rowProps, ref }, children);
 };
 
 // src/Table/TableRow.tsx
-var import_react68 = __toESM(require("react"));
-var import_focus15 = require("@react-aria/focus");
-var import_interactions9 = require("@react-aria/interactions");
+var import_react72 = __toESM(require("react"));
+var import_focus16 = require("@react-aria/focus");
+var import_interactions10 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils23 = require("@react-aria/utils");
-var import_system46 = require("@marigold/system");
+var import_system51 = require("@marigold/system");
 var TableRow = ({ children, row }) => {
-  const ref = (0, import_react68.useRef)(null);
+  const ref = (0, import_react72.useRef)(null);
   const { interactive, state, ...ctx } = useTableContext();
   const { variant, size } = row.props;
-  const { row: styles } = (0, import_system46.useComponentStyles)(
+  const { row: styles } = (0, import_system51.useComponentStyles)(
     "Table",
     { variant: variant || ctx.variant, size: size || ctx.size },
     { parts: ["row"] }
@@ -2697,19 +2927,19 @@ var TableRow = ({ children, row }) => {
   );
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
-  const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)({ within: true });
-  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({
+  const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)({ within: true });
+  const { hoverProps, isHovered } = (0, import_interactions10.useHover)({
     isDisabled: disabled || !interactive
   });
-  const stateProps = (0, import_system46.useStateProps)({
+  const stateProps = (0, import_system51.useStateProps)({
     disabled,
     selected,
     hover: isHovered,
     focusVisible: isFocusVisible,
     active: isPressed
   });
-  return /* @__PURE__ */ import_react68.default.createElement(
-    import_system46.Box,
+  return /* @__PURE__ */ import_react72.default.createElement(
+    import_system51.Box,
     {
       as: "tr",
       ref,
@@ -2725,14 +2955,14 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-var import_react69 = __toESM(require("react"));
-var import_focus16 = require("@react-aria/focus");
-var import_interactions10 = require("@react-aria/interactions");
+var import_react73 = __toESM(require("react"));
+var import_focus17 = require("@react-aria/focus");
+var import_interactions11 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils24 = require("@react-aria/utils");
-var import_system47 = require("@marigold/system");
+var import_system52 = require("@marigold/system");
 var TableSelectAllCell = ({ column }) => {
-  const ref = (0, import_react69.useRef)(null);
+  const ref = (0, import_react73.useRef)(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = (0, import_table8.useTableColumnHeader)(
     {
@@ -2742,14 +2972,14 @@ var TableSelectAllCell = ({ column }) => {
     ref
   );
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
-  const { hoverProps, isHovered } = (0, import_interactions10.useHover)({});
-  const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
-  const stateProps = (0, import_system47.useStateProps)({
+  const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
+  const { focusProps, isFocusVisible } = (0, import_focus17.useFocusRing)();
+  const stateProps = (0, import_system52.useStateProps)({
     hover: isHovered,
     focusVisible: isFocusVisible
   });
-  return /* @__PURE__ */ import_react69.default.createElement(
-    import_system47.Box,
+  return /* @__PURE__ */ import_react73.default.createElement(
+    import_system52.Box,
     {
       as: "th",
       ref,
@@ -2762,7 +2992,7 @@ var TableSelectAllCell = ({ column }) => {
       ...(0, import_utils24.mergeProps)(columnHeaderProps, hoverProps, focusProps),
       ...stateProps
     },
-    /* @__PURE__ */ import_react69.default.createElement(Checkbox, { ...checkboxProps })
+    /* @__PURE__ */ import_react73.default.createElement(Checkbox, { ...checkboxProps })
   );
 };
 
@@ -2775,7 +3005,7 @@ var Table = ({
   ...props
 }) => {
   const interactive = selectionMode !== "none";
-  const tableRef = (0, import_react70.useRef)(null);
+  const tableRef = (0, import_react74.useRef)(null);
   const state = (0, import_table10.useTableState)({
     ...props,
     selectionMode,
@@ -2783,14 +3013,14 @@ var Table = ({
     props.selectionBehavior !== "replace"
   });
   const { gridProps } = (0, import_table9.useTable)(props, state, tableRef);
-  const styles = (0, import_system48.useComponentStyles)(
+  const styles = (0, import_system53.useComponentStyles)(
     "Table",
     { variant, size },
     { parts: ["table", "header", "row", "cell"] }
   );
   const { collection } = state;
-  return /* @__PURE__ */ import_react70.default.createElement(TableContext.Provider, { value: { state, interactive, styles } }, /* @__PURE__ */ import_react70.default.createElement(
-    import_system48.Box,
+  return /* @__PURE__ */ import_react74.default.createElement(TableContext.Provider, { value: { state, interactive, styles } }, /* @__PURE__ */ import_react74.default.createElement(
+    import_system53.Box,
     {
       as: "table",
       ref: tableRef,
@@ -2804,16 +3034,16 @@ var Table = ({
       css: styles.table,
       ...gridProps
     },
-    /* @__PURE__ */ import_react70.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react70.default.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...headerRow.childNodes].map(
+    /* @__PURE__ */ import_react74.default.createElement(TableHeader, null, collection.headerRows.map((headerRow) => /* @__PURE__ */ import_react74.default.createElement(TableHeaderRow, { key: headerRow.key, item: headerRow }, [...headerRow.childNodes].map(
       (column) => {
         var _a;
-        return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react70.default.createElement(TableSelectAllCell, { key: column.key, column }) : /* @__PURE__ */ import_react70.default.createElement(TableColumnHeader, { key: column.key, column });
+        return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react74.default.createElement(TableSelectAllCell, { key: column.key, column }) : /* @__PURE__ */ import_react74.default.createElement(TableColumnHeader, { key: column.key, column });
       }
     )))),
-    /* @__PURE__ */ import_react70.default.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ import_react70.default.createElement(TableRow, { key: row.key, row }, [...row.childNodes].map(
+    /* @__PURE__ */ import_react74.default.createElement(TableBody, null, [...collection.body.childNodes].map((row) => /* @__PURE__ */ import_react74.default.createElement(TableRow, { key: row.key, row }, [...row.childNodes].map(
       (cell) => {
         var _a;
-        return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react70.default.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ import_react70.default.createElement(TableCell, { key: cell.key, cell });
+        return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ import_react74.default.createElement(TableCheckboxCell, { key: cell.key, cell }) : /* @__PURE__ */ import_react74.default.createElement(TableCell, { key: cell.key, cell });
       }
     ))))
   ));
@@ -2825,9 +3055,9 @@ Table.Header = import_table10.TableHeader;
 Table.Row = import_table10.Row;
 
 // src/Text/Text.tsx
-var import_react71 = __toESM(require("react"));
-var import_system49 = require("@marigold/system");
-var import_system50 = require("@marigold/system");
+var import_react75 = __toESM(require("react"));
+var import_system54 = require("@marigold/system");
+var import_system55 = require("@marigold/system");
 var Text = ({
   variant,
   size,
@@ -2841,12 +3071,12 @@ var Text = ({
   children,
   ...props
 }) => {
-  const styles = (0, import_system49.useComponentStyles)("Text", {
+  const styles = (0, import_system54.useComponentStyles)("Text", {
     variant,
     size
   });
-  return /* @__PURE__ */ import_react71.default.createElement(
-    import_system50.Box,
+  return /* @__PURE__ */ import_react75.default.createElement(
+    import_system55.Box,
     {
       as: "p",
       ...props,
@@ -2868,13 +3098,13 @@ var Text = ({
 };
 
 // src/TextArea/TextArea.tsx
-var import_react72 = __toESM(require("react"));
-var import_interactions11 = require("@react-aria/interactions");
-var import_focus17 = require("@react-aria/focus");
+var import_react76 = __toESM(require("react"));
+var import_interactions12 = require("@react-aria/interactions");
+var import_focus18 = require("@react-aria/focus");
 var import_textfield = require("@react-aria/textfield");
 var import_utils26 = require("@react-aria/utils");
-var import_system51 = require("@marigold/system");
-var TextArea = (0, import_react72.forwardRef)(
+var import_system56 = require("@marigold/system");
+var TextArea = (0, import_react76.forwardRef)(
   ({
     variant,
     size,
@@ -2899,17 +3129,17 @@ var TextArea = (0, import_react72.forwardRef)(
       },
       textAreaRef
     );
-    const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
-    const { focusProps, isFocusVisible } = (0, import_focus17.useFocusRing)();
-    const stateProps = (0, import_system51.useStateProps)({
+    const { hoverProps, isHovered } = (0, import_interactions12.useHover)({});
+    const { focusProps, isFocusVisible } = (0, import_focus18.useFocusRing)();
+    const stateProps = (0, import_system56.useStateProps)({
       hover: isHovered,
       focus: isFocusVisible,
       disabled,
       readOnly,
       error
     });
-    const styles = (0, import_system51.useComponentStyles)("TextArea", { variant, size });
-    return /* @__PURE__ */ import_react72.default.createElement(
+    const styles = (0, import_system56.useComponentStyles)("TextArea", { variant, size });
+    return /* @__PURE__ */ import_react76.default.createElement(
       FieldBase,
       {
         label,
@@ -2925,8 +3155,8 @@ var TextArea = (0, import_react72.forwardRef)(
         size,
         width
       },
-      /* @__PURE__ */ import_react72.default.createElement(
-        import_system51.Box,
+      /* @__PURE__ */ import_react76.default.createElement(
+        import_system56.Box,
         {
           as: "textarea",
           css: styles,
@@ -2943,13 +3173,13 @@ var TextArea = (0, import_react72.forwardRef)(
 );
 
 // src/TextField/TextField.tsx
-var import_react73 = __toESM(require("react"));
-var import_interactions12 = require("@react-aria/interactions");
-var import_focus18 = require("@react-aria/focus");
+var import_react77 = __toESM(require("react"));
+var import_interactions13 = require("@react-aria/interactions");
+var import_focus19 = require("@react-aria/focus");
 var import_textfield2 = require("@react-aria/textfield");
 var import_utils27 = require("@react-aria/utils");
-var import_system52 = require("@marigold/system");
-var TextField = (0, import_react73.forwardRef)(
+var import_system57 = require("@marigold/system");
+var TextField = (0, import_react77.forwardRef)(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
     const inputRef = (0, import_utils27.useObjectRef)(ref);
@@ -2963,19 +3193,19 @@ var TextField = (0, import_react73.forwardRef)(
       },
       inputRef
     );
-    const { hoverProps, isHovered } = (0, import_interactions12.useHover)({});
-    const { focusProps, isFocusVisible } = (0, import_focus18.useFocusRing)({
+    const { hoverProps, isHovered } = (0, import_interactions13.useHover)({});
+    const { focusProps, isFocused } = (0, import_focus19.useFocusRing)({
       isTextInput: true,
       autoFocus
     });
-    const stateProps = (0, import_system52.useStateProps)({
+    const stateProps = (0, import_system57.useStateProps)({
       hover: isHovered,
-      focus: isFocusVisible,
+      focus: isFocused,
       disabled,
       readOnly,
       error
     });
-    return /* @__PURE__ */ import_react73.default.createElement(
+    return /* @__PURE__ */ import_react77.default.createElement(
       FieldBase,
       {
         label,
@@ -2991,8 +3221,8 @@ var TextField = (0, import_react73.forwardRef)(
         size,
         width
       },
-      /* @__PURE__ */ import_react73.default.createElement(
-        Input,
+      /* @__PURE__ */ import_react77.default.createElement(Input, { ...stateProps }, /* @__PURE__ */ import_react77.default.createElement(
+        Input.Field,
         {
           ref: inputRef,
           variant,
@@ -3002,14 +3232,14 @@ var TextField = (0, import_react73.forwardRef)(
           ...hoverProps,
           ...stateProps
         }
-      )
+      ))
     );
   }
 );
 
 // src/Tiles/Tiles.tsx
-var import_react74 = __toESM(require("react"));
-var import_system53 = require("@marigold/system");
+var import_react78 = __toESM(require("react"));
+var import_system58 = require("@marigold/system");
 var Tiles = ({
   space = "none",
   stretch = false,
@@ -3018,13 +3248,13 @@ var Tiles = ({
   children,
   ...props
 }) => {
-  const { css } = (0, import_system53.useTheme)();
+  const { css } = (0, import_system58.useTheme)();
   const { width } = css({ width: tilesWidth });
   let column = `min(${typeof width === "number" ? `${width}px` : width}, 100%)`;
   if (stretch) {
     column = `minmax(${column}, 1fr)`;
   }
-  return /* @__PURE__ */ import_react74.default.createElement(
+  return /* @__PURE__ */ import_react78.default.createElement(
     import_system.Box,
     {
       ...props,
@@ -3044,18 +3274,18 @@ var Tiles = ({
 };
 
 // src/Tooltip/Tooltip.tsx
-var import_react77 = __toESM(require("react"));
+var import_react81 = __toESM(require("react"));
 var import_tooltip3 = require("@react-aria/tooltip");
-var import_system54 = require("@marigold/system");
+var import_system59 = require("@marigold/system");
 
 // src/Tooltip/Context.ts
-var import_react75 = require("react");
-var TooltipContext = (0, import_react75.createContext)({});
-var useTooltipContext = () => (0, import_react75.useContext)(TooltipContext);
+var import_react79 = require("react");
+var TooltipContext = (0, import_react79.createContext)({});
+var useTooltipContext = () => (0, import_react79.useContext)(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-var import_react76 = __toESM(require("react"));
-var import_focus19 = require("@react-aria/focus");
+var import_react80 = __toESM(require("react"));
+var import_focus20 = require("@react-aria/focus");
 var import_overlays8 = require("@react-aria/overlays");
 var import_tooltip = require("@react-aria/tooltip");
 var import_tooltip2 = require("@react-stately/tooltip");
@@ -3067,7 +3297,7 @@ var TooltipTrigger = ({
   children,
   ...rest
 }) => {
-  const [tooltipTrigger, tooltip] = import_react76.default.Children.toArray(children);
+  const [tooltipTrigger, tooltip] = import_react80.default.Children.toArray(children);
   const props = {
     ...rest,
     isDisabled: disabled,
@@ -3075,8 +3305,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = (0, import_react76.useRef)(null);
-  const overlayRef = (0, import_react76.useRef)(null);
+  const tooltipTriggerRef = (0, import_react80.useRef)(null);
+  const overlayRef = (0, import_react80.useRef)(null);
   const state = (0, import_tooltip2.useTooltipTriggerState)(props);
   const { triggerProps, tooltipProps } = (0, import_tooltip.useTooltipTrigger)(
     props,
@@ -3095,7 +3325,7 @@ var TooltipTrigger = ({
     isOpen: state.isOpen,
     overlayRef
   });
-  return /* @__PURE__ */ import_react76.default.createElement(import_focus19.FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ import_react76.default.createElement(
+  return /* @__PURE__ */ import_react80.default.createElement(import_focus20.FocusableProvider, { ref: tooltipTriggerRef, ...triggerProps }, tooltipTrigger, /* @__PURE__ */ import_react80.default.createElement(
     TooltipContext.Provider,
     {
       value: {
@@ -3107,7 +3337,7 @@ var TooltipTrigger = ({
         ...positionProps
       }
     },
-    /* @__PURE__ */ import_react76.default.createElement(Overlay, { open: state.isOpen }, tooltip)
+    /* @__PURE__ */ import_react80.default.createElement(Overlay, { open: state.isOpen }, tooltip)
   ));
 };
 
@@ -3115,13 +3345,13 @@ var TooltipTrigger = ({
 var Tooltip = ({ children, variant, size }) => {
   const { arrowProps, state, overlayRef, placement, ...rest } = useTooltipContext();
   const { tooltipProps } = (0, import_tooltip3.useTooltip)({}, state);
-  const styles = (0, import_system54.useComponentStyles)(
+  const styles = (0, import_system59.useComponentStyles)(
     "Tooltip",
     { variant, size },
     { parts: ["container", "arrow"] }
   );
-  return /* @__PURE__ */ import_react77.default.createElement(
-    import_system54.Box,
+  return /* @__PURE__ */ import_react81.default.createElement(
+    import_system59.Box,
     {
       ...tooltipProps,
       ...rest,
@@ -3129,9 +3359,9 @@ var Tooltip = ({ children, variant, size }) => {
       css: styles.container,
       "data-placement": placement
     },
-    /* @__PURE__ */ import_react77.default.createElement("div", null, children),
-    /* @__PURE__ */ import_react77.default.createElement(
-      import_system54.Box,
+    /* @__PURE__ */ import_react81.default.createElement("div", null, children),
+    /* @__PURE__ */ import_react81.default.createElement(
+      import_system59.Box,
       {
         ...arrowProps,
         __baseCSS: {
@@ -3151,10 +3381,10 @@ var Tooltip = ({ children, variant, size }) => {
 Tooltip.Trigger = TooltipTrigger;
 
 // src/XLoader/XLoader.tsx
-var import_system55 = require("@marigold/system");
-var import_react78 = __toESM(require("react"));
-var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ import_react78.default.createElement(
-  import_system55.SVG,
+var import_system60 = require("@marigold/system");
+var import_react82 = __toESM(require("react"));
+var XLoader = (0, import_react82.forwardRef)((props, ref) => /* @__PURE__ */ import_react82.default.createElement(
+  import_system60.SVG,
   {
     id: "XLoader",
     xmlns: "http://www.w3.org/2000/svg",
@@ -3163,14 +3393,14 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
     ...props,
     ...ref
   },
-  /* @__PURE__ */ import_react78.default.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
-  /* @__PURE__ */ import_react78.default.createElement(
+  /* @__PURE__ */ import_react82.default.createElement("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
+  /* @__PURE__ */ import_react82.default.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__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3182,13 +3412,13 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
       }
     )
   ),
-  /* @__PURE__ */ import_react78.default.createElement(
+  /* @__PURE__ */ import_react82.default.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__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3200,13 +3430,13 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
       }
     )
   ),
-  /* @__PURE__ */ import_react78.default.createElement(
+  /* @__PURE__ */ import_react82.default.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__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3218,13 +3448,13 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
       }
     )
   ),
-  /* @__PURE__ */ import_react78.default.createElement(
+  /* @__PURE__ */ import_react82.default.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__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3236,13 +3466,13 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
       }
     )
   ),
-  /* @__PURE__ */ import_react78.default.createElement(
+  /* @__PURE__ */ import_react82.default.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__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3254,13 +3484,13 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
       }
     )
   ),
-  /* @__PURE__ */ import_react78.default.createElement(
+  /* @__PURE__ */ import_react82.default.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__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3272,13 +3502,13 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
       }
     )
   ),
-  /* @__PURE__ */ import_react78.default.createElement(
+  /* @__PURE__ */ import_react82.default.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__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3290,13 +3520,13 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
       }
     )
   ),
-  /* @__PURE__ */ import_react78.default.createElement(
+  /* @__PURE__ */ import_react82.default.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__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3308,13 +3538,13 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
       }
     )
   ),
-  /* @__PURE__ */ import_react78.default.createElement(
+  /* @__PURE__ */ import_react82.default.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__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3326,13 +3556,13 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
       }
     )
   ),
-  /* @__PURE__ */ import_react78.default.createElement(
+  /* @__PURE__ */ import_react82.default.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__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3344,13 +3574,13 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
       }
     )
   ),
-  /* @__PURE__ */ import_react78.default.createElement(
+  /* @__PURE__ */ import_react82.default.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__ */ import_react78.default.createElement(
+    /* @__PURE__ */ import_react82.default.createElement(
       "animate",
       {
         attributeName: "opacity",
@@ -3368,6 +3598,7 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
   ActionMenu,
   Aside,
   Aspect,
+  Autocomplete,
   Badge,
   Body,
   Box,
@@ -3391,6 +3622,8 @@ var XLoader = (0, import_react78.forwardRef)((props, ref) => /* @__PURE__ */ imp
   Image,
   Inline,
   Input,
+  InputField,
+  Inset,
   Label,
   Link,
   List,