@marigold/components 1.3.0 → 2.0.0

package/dist/index.d.ts

@@ -1,6 +1,7 @@
+export { useAsyncList, useListData } from '@react-stately/data';
 import { ThemeExtension, ThemeComponentProps, ThemeExtensionsWithParts, BoxOwnProps, StateAttrProps, CSSObject, Theme as Theme$1, ResponsiveStyleValue, ThemeProviderProps, GlobalProps } from '@marigold/system';
 export { Box, BoxOwnProps, BoxProps, StyleProps, ThemeProvider, useTheme } from '@marigold/system';
-import React, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ForwardRefExoticComponent, RefAttributes, ReactElement, ReactChild } from 'react';
+import React, { ReactNode, HTMLAttributes, Key, LabelHTMLAttributes, ForwardRefExoticComponent, RefAttributes, ReactElement } from 'react';
 import { ComponentProps, PolymorphicPropsWithRef, PolymorphicComponentWithRef, NonZeroPercentage } from '@marigold/types';
 import * as _react_types_shared from '@react-types/shared';
 import { PressEvents, CollectionElement } from '@react-types/shared';
@@ -14,13 +15,13 @@ import { Item, Section } from '@react-stately/collections';
 import { AriaSelectProps } from '@react-types/select';
 import { AriaSliderProps } from '@react-types/slider';
 import { AriaSwitchProps } from '@react-types/switch';
-import { TableProps as TableProps$1 } from '@react-aria/table';
+import { AriaTableProps } from '@react-aria/table';
 import { TableStateProps, TableBody, Cell, Column, TableHeader, Row } from '@react-stately/table';
 import { AriaTextFieldProps } from '@react-types/textfield';
 import { PositionProps } from '@react-types/overlays';
 import { TooltipTriggerProps as TooltipTriggerProps$1 } from '@react-types/tooltip';
 import { aspect, size } from '@marigold/tokens';
-import { OverlayProps as OverlayProps$1 } from '@react-aria/overlays';
+import { AriaOverlayProps } from '@react-aria/overlays';
 export { SSRProvider } from '@react-aria/ssr';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
 
@@ -35,10 +36,11 @@ declare const Badge: ({ variant, size, children, ...props }: BadgeProps) => JSX.
 
 interface ButtonThemeExtension extends ThemeExtension<'Button'> {
 }
-interface ButtonOwnProps extends PressEvents {
+interface ButtonOwnProps extends PressEvents, ComponentProps<'button'> {
     children?: ReactNode;
     variant?: string;
     size?: string;
+    fullWidth?: boolean;
 }
 interface ButtonProps extends PolymorphicPropsWithRef<ButtonOwnProps, 'button'> {
 }
@@ -303,7 +305,7 @@ interface OverlayProps extends ComponentProps<'div'> {
 }
 declare const Overlay: ({ children, open, container, ...props }: OverlayProps) => JSX.Element | null;
 
-interface PopoverProps extends Omit<OverlayProps$1, 'isOpen' | 'isDismissable' | 'isKeyboardDismissDisabled'> {
+interface PopoverProps extends Omit<AriaOverlayProps, 'isOpen' | 'isDismissable' | 'isKeyboardDismissDisabled'> {
     children?: ReactNode;
     open?: boolean;
     dismissable?: boolean;
@@ -428,7 +430,7 @@ interface TableThemeExtension extends ThemeExtensionsWithParts<'Table', [
     'cell'
 ]> {
 }
-interface TableProps extends Pick<TableProps$1<object>, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
+interface TableProps extends Pick<AriaTableProps<object>, 'focusMode' | 'onRowAction' | 'onCellAction'>, Omit<TableStateProps<object>, 'showSelectionCheckboxes'> {
     variant?: string;
     size?: string;
     stretch?: boolean;
@@ -500,7 +502,7 @@ interface Theme extends Theme$1 {
 }
 
 interface AsideProps {
-    children: [ReactChild, ReactChild];
+    children: [ReactElement, ReactElement];
     side?: 'left' | 'right';
     sideWidth?: ResponsiveStyleValue<string>;
     space?: ResponsiveStyleValue<string>;

package/dist/index.js

@@ -73,11 +73,16 @@ __export(src_exports, {
   Tooltip: () => Tooltip,
   Underlay: () => Underlay,
   VisuallyHidden: () => import_visually_hidden.VisuallyHidden,
+  useAsyncList: () => import_data.useAsyncList,
   useCheckboxGroupContext: () => useCheckboxGroupContext,
+  useListData: () => import_data.useListData,
   useTheme: () => import_system28.useTheme
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/hooks.ts
+var import_data = require("@react-stately/data");
+
 // src/Aside/Aside.tsx
 var import_react = __toESM(require("react"));
 
@@ -180,6 +185,7 @@ var Breakout = ({
 var import_react5 = __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_system3 = require("@marigold/system");
 var Button = (0, import_react5.forwardRef)(
@@ -189,26 +195,42 @@ var Button = (0, import_react5.forwardRef)(
     variant,
     size,
     disabled,
+    onClick,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    fullWidth,
     ...props
   }, ref) => {
-    const buttonRef = (0, import_react5.useRef)(null);
-    (0, import_react5.useImperativeHandle)(ref, () => buttonRef.current);
+    const buttonRef = (0, import_utils.useObjectRef)(ref);
+    const { hoverProps, isHovered } = (0, import_interactions.useHover)({ isDisabled: disabled });
+    const { isFocusVisible, focusProps } = (0, import_focus.useFocusRing)({
+      autoFocus: props.autoFocus
+    });
     const { buttonProps, isPressed } = (0, import_button.useButton)(
       {
         ...props,
+        onClick,
+        onPress,
+        onPressStart,
+        onPressEnd,
+        onPressChange,
+        onPressUp,
         elementType: typeof as === "string" ? as : "span",
         isDisabled: disabled
       },
       buttonRef
     );
-    const { isFocusVisible, focusProps } = (0, import_focus.useFocusRing)();
     const styles = (0, import_system3.useComponentStyles)("Button", { variant, size });
     const stateProps = (0, import_system3.useStateProps)({
       active: isPressed,
-      focus: isFocusVisible
+      focusVisible: isFocusVisible,
+      hover: isHovered
     });
     return /* @__PURE__ */ import_react5.default.createElement(import_system3.Box, {
-      ...(0, import_utils.mergeProps)(buttonProps, focusProps),
+      ...(0, import_utils.mergeProps)(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       as,
       ref: buttonRef,
@@ -216,7 +238,11 @@ var Button = (0, import_react5.forwardRef)(
         display: "inline-flex",
         alignItems: "center",
         gap: "0.5ch",
-        cursor: disabled ? "not-allowed" : "pointer"
+        cursor: disabled ? "not-allowed" : "pointer",
+        width: fullWidth ? "100%" : void 0,
+        "&:focus": {
+          outline: 0
+        }
       },
       css: styles
     }, children);
@@ -259,7 +285,7 @@ var Center = ({
 var import_react10 = __toESM(require("react"));
 var import_checkbox3 = require("@react-aria/checkbox");
 var import_focus2 = require("@react-aria/focus");
-var import_interactions = require("@react-aria/interactions");
+var import_interactions2 = require("@react-aria/interactions");
 var import_utils2 = require("@react-aria/utils");
 var import_toggle = require("@react-stately/toggle");
 var import_system7 = require("@marigold/system");
@@ -429,7 +455,7 @@ var Checkbox = (0, import_react10.forwardRef)(
       },
       { parts: ["container", "label", "checkbox"] }
     );
-    const { hoverProps, isHovered } = (0, import_interactions.useHover)({});
+    const { hoverProps, isHovered } = (0, import_interactions2.useHover)({});
     const { isFocusVisible, focusProps } = (0, import_focus2.useFocusRing)();
     const stateProps = (0, import_system7.useStateProps)({
       hover: isHovered,
@@ -620,7 +646,7 @@ var useDialogContext = () => (0, import_react16.useContext)(DialogContext);
 
 // src/Dialog/DialogTrigger.tsx
 var import_react21 = __toESM(require("react"));
-var import_interactions2 = require("@react-aria/interactions");
+var import_interactions3 = require("@react-aria/interactions");
 var import_overlays4 = require("@react-stately/overlays");
 
 // src/Overlay/Modal.tsx
@@ -753,7 +779,7 @@ var DialogTrigger = ({
   const ctx = { open: state.isOpen, close: state.close };
   return /* @__PURE__ */ import_react21.default.createElement(DialogContext.Provider, {
     value: ctx
-  }, /* @__PURE__ */ import_react21.default.createElement(import_interactions2.PressResponder, {
+  }, /* @__PURE__ */ import_react21.default.createElement(import_interactions3.PressResponder, {
     ref: dialogTriggerRef,
     isPressed: state.isOpen,
     onPress: state.toggle
@@ -1027,7 +1053,7 @@ var import_react33 = __toESM(require("react"));
 var import_menu = require("@react-stately/menu");
 var import_menu2 = require("@react-aria/menu");
 var import_overlays5 = require("@react-aria/overlays");
-var import_interactions3 = require("@react-aria/interactions");
+var import_interactions4 = require("@react-aria/interactions");
 var MenuTrigger = ({ disabled, children }) => {
   const [menuTrigger, menu] = import_react33.default.Children.toArray(children);
   const menuTriggerRef = (0, import_react33.useRef)(null);
@@ -1052,7 +1078,7 @@ var MenuTrigger = ({ disabled, children }) => {
   };
   return /* @__PURE__ */ import_react33.default.createElement(MenuContext.Provider, {
     value: menuContext
-  }, /* @__PURE__ */ import_react33.default.createElement(import_interactions3.PressResponder, {
+  }, /* @__PURE__ */ import_react33.default.createElement(import_interactions4.PressResponder, {
     ...menuTriggerProps,
     ref: menuTriggerRef,
     isPressed: state.isOpen
@@ -1186,7 +1212,7 @@ var Message = ({
 // src/NumberField/NumberField.tsx
 var import_react40 = __toESM(require("react"));
 var import_focus6 = require("@react-aria/focus");
-var import_interactions5 = require("@react-aria/interactions");
+var import_interactions6 = require("@react-aria/interactions");
 var import_i18n = require("@react-aria/i18n");
 var import_numberfield = require("@react-aria/numberfield");
 var import_utils8 = require("@react-aria/utils");
@@ -1272,7 +1298,7 @@ var FieldBase = ({
 // src/NumberField/StepButton.tsx
 var import_react39 = __toESM(require("react"));
 var import_button3 = require("@react-aria/button");
-var import_interactions4 = require("@react-aria/interactions");
+var import_interactions5 = require("@react-aria/interactions");
 var import_utils7 = require("@react-aria/utils");
 var import_system25 = require("@marigold/system");
 var Plus = () => /* @__PURE__ */ import_react39.default.createElement(import_system25.Box, {
@@ -1301,7 +1327,7 @@ var StepButton = ({ direction, css, ...props }) => {
     { ...props, elementType: "div" },
     ref
   );
-  const { hoverProps, isHovered } = (0, import_interactions4.useHover)(props);
+  const { hoverProps, isHovered } = (0, import_interactions5.useHover)(props);
   const stateProps = (0, import_system25.useStateProps)({
     active: isPressed,
     hover: isHovered,
@@ -1354,7 +1380,7 @@ var NumberField = (0, import_react40.forwardRef)(
       incrementButtonProps,
       decrementButtonProps
     } = (0, import_numberfield.useNumberField)(props, state, inputRef);
-    const { hoverProps, isHovered } = (0, import_interactions5.useHover)({ isDisabled: disabled });
+    const { hoverProps, isHovered } = (0, import_interactions6.useHover)({ isDisabled: disabled });
     const { focusProps, isFocused } = (0, import_focus6.useFocusRing)({
       within: true,
       isTextInput: true,
@@ -1448,7 +1474,7 @@ function MarigoldProvider({
 
 // src/Radio/Radio.tsx
 var import_react44 = __toESM(require("react"));
-var import_interactions6 = require("@react-aria/interactions");
+var import_interactions7 = require("@react-aria/interactions");
 var import_focus7 = require("@react-aria/focus");
 var import_radio3 = require("@react-aria/radio");
 var import_utils9 = require("@react-aria/utils");
@@ -1559,7 +1585,7 @@ var Radio = (0, import_react44.forwardRef)(
       { variant: variant || props.variant, size: size || props.size },
       { parts: ["container", "label", "radio"] }
     );
-    const { hoverProps, isHovered } = (0, import_interactions6.useHover)({});
+    const { hoverProps, isHovered } = (0, import_interactions7.useHover)({});
     const { isFocusVisible, focusProps } = (0, import_focus7.useFocusRing)();
     const stateProps = (0, import_system30.useStateProps)({
       hover: isHovered,
@@ -1899,22 +1925,16 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
   return /* @__PURE__ */ import_react50.default.createElement(import_system.Box, {
-    __baseCSS: {
-      position: "absolute",
-      top: 16,
-      transform: "translateX(-50%)",
-      left: `${state.getThumbPercent(0) * 100}%`
-    }
-  }, /* @__PURE__ */ import_react50.default.createElement(import_system.Box, {
+    __baseCSS: { top: "50%" },
+    css: styles,
     ...thumbProps,
-    __baseCSS: styles,
     ...stateProps
   }, /* @__PURE__ */ import_react50.default.createElement(import_visually_hidden.VisuallyHidden, null, /* @__PURE__ */ import_react50.default.createElement(import_system.Box, {
     as: "input",
     type: "range",
     ref: inputRef,
     ...(0, import_utils12.mergeProps)(inputProps, focusProps)
-  }))));
+  })));
 };
 
 // src/Slider/Slider.tsx
@@ -1960,13 +1980,16 @@ var Slider = (0, import_react51.forwardRef)(
       ...trackProps,
       ref: trackRef,
       __baseCSS: {
-        position: "relative",
         height: 32,
         width: "100%",
         cursor: props.disabled ? "not-allowed" : "pointer"
       }
     }, /* @__PURE__ */ import_react51.default.createElement(import_system.Box, {
-      __baseCSS: styles.track
+      __baseCSS: {
+        top: "50%",
+        transform: "translateY(-50%)"
+      },
+      css: styles.track
     }), /* @__PURE__ */ import_react51.default.createElement(Thumb, {
       state,
       trackRef,
@@ -2230,7 +2253,7 @@ var TableCheckboxCell = ({ cell }) => {
 // src/Table/TableColumnHeader.tsx
 var import_react59 = __toESM(require("react"));
 var import_focus13 = require("@react-aria/focus");
-var import_interactions7 = require("@react-aria/interactions");
+var import_interactions8 = require("@react-aria/interactions");
 var import_table4 = require("@react-aria/table");
 var import_utils18 = require("@react-aria/utils");
 var import_system41 = require("@marigold/system");
@@ -2258,7 +2281,7 @@ var TableColumnHeader = ({ column }) => {
     state,
     ref
   );
-  const { hoverProps, isHovered } = (0, import_interactions7.useHover)({});
+  const { hoverProps, isHovered } = (0, import_interactions8.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus13.useFocusRing)();
   const stateProps = (0, import_system41.useStateProps)({
     hover: isHovered,
@@ -2303,7 +2326,7 @@ var TableHeaderRow = ({ item, children }) => {
 // src/Table/TableRow.tsx
 var import_react62 = __toESM(require("react"));
 var import_focus14 = require("@react-aria/focus");
-var import_interactions8 = require("@react-aria/interactions");
+var import_interactions9 = require("@react-aria/interactions");
 var import_table7 = require("@react-aria/table");
 var import_utils19 = require("@react-aria/utils");
 var import_system42 = require("@marigold/system");
@@ -2320,7 +2343,7 @@ var TableRow = ({ children, row }) => {
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
   const { focusProps, isFocusVisible } = (0, import_focus14.useFocusRing)({ within: true });
-  const { hoverProps, isHovered } = (0, import_interactions8.useHover)({ isDisabled: disabled });
+  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({ isDisabled: disabled });
   const stateProps = (0, import_system42.useStateProps)({
     disabled,
     selected,
@@ -2340,7 +2363,7 @@ var TableRow = ({ children, row }) => {
 // src/Table/TableSelectAllCell.tsx
 var import_react63 = __toESM(require("react"));
 var import_focus15 = require("@react-aria/focus");
-var import_interactions9 = require("@react-aria/interactions");
+var import_interactions10 = require("@react-aria/interactions");
 var import_table8 = require("@react-aria/table");
 var import_utils20 = require("@react-aria/utils");
 var import_system43 = require("@marigold/system");
@@ -2355,7 +2378,7 @@ var TableSelectAllCell = ({ column }) => {
     ref
   );
   const { checkboxProps } = mapCheckboxProps((0, import_table8.useTableSelectAllCheckbox)(state));
-  const { hoverProps, isHovered } = (0, import_interactions9.useHover)({});
+  const { hoverProps, isHovered } = (0, import_interactions10.useHover)({});
   const { focusProps, isFocusVisible } = (0, import_focus15.useFocusRing)();
   const stateProps = (0, import_system43.useStateProps)({
     hover: isHovered,
@@ -2471,7 +2494,7 @@ var Text = ({
 
 // src/TextArea/TextArea.tsx
 var import_react66 = __toESM(require("react"));
-var import_interactions10 = require("@react-aria/interactions");
+var import_interactions11 = require("@react-aria/interactions");
 var import_focus16 = require("@react-aria/focus");
 var import_textfield = require("@react-aria/textfield");
 var import_utils22 = require("@react-aria/utils");
@@ -2501,7 +2524,7 @@ var TextArea = (0, import_react66.forwardRef)(
       },
       textAreaRef
     );
-    const { hoverProps, isHovered } = (0, import_interactions10.useHover)({});
+    const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
     const { focusProps, isFocusVisible } = (0, import_focus16.useFocusRing)();
     const stateProps = (0, import_system47.useStateProps)({
       hover: isHovered,
@@ -2539,7 +2562,7 @@ var TextArea = (0, import_react66.forwardRef)(
 
 // src/TextField/TextField.tsx
 var import_react67 = __toESM(require("react"));
-var import_interactions11 = require("@react-aria/interactions");
+var import_interactions12 = require("@react-aria/interactions");
 var import_focus17 = require("@react-aria/focus");
 var import_textfield2 = require("@react-aria/textfield");
 var import_utils23 = require("@react-aria/utils");
@@ -2558,7 +2581,7 @@ var TextField = (0, import_react67.forwardRef)(
       },
       inputRef
     );
-    const { hoverProps, isHovered } = (0, import_interactions11.useHover)({});
+    const { hoverProps, isHovered } = (0, import_interactions12.useHover)({});
     const { focusProps, isFocusVisible } = (0, import_focus17.useFocusRing)({
       isTextInput: true,
       autoFocus
@@ -2757,6 +2780,8 @@ Tooltip.Trigger = TooltipTrigger;
   Tooltip,
   Underlay,
   VisuallyHidden,
+  useAsyncList,
   useCheckboxGroupContext,
+  useListData,
   useTheme
 });

package/dist/index.mjs

@@ -1,3 +1,6 @@
+// src/hooks.ts
+import { useAsyncList, useListData } from "@react-stately/data";
+
 // src/Aside/Aside.tsx
 import React from "react";
 
@@ -97,14 +100,11 @@ var Breakout = ({
 };
 
 // src/Button/Button.tsx
-import React5, {
-  forwardRef,
-  useImperativeHandle,
-  useRef
-} from "react";
+import React5, { forwardRef } from "react";
 import { useButton } from "@react-aria/button";
 import { useFocusRing } from "@react-aria/focus";
-import { mergeProps } from "@react-aria/utils";
+import { useHover } from "@react-aria/interactions";
+import { mergeProps, useObjectRef } from "@react-aria/utils";
 import {
   Box as Box2,
   useComponentStyles as useComponentStyles2,
@@ -117,26 +117,42 @@ var Button = forwardRef(
     variant,
     size,
     disabled,
+    onClick,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    fullWidth,
     ...props
   }, ref) => {
-    const buttonRef = useRef(null);
-    useImperativeHandle(ref, () => buttonRef.current);
+    const buttonRef = useObjectRef(ref);
+    const { hoverProps, isHovered } = useHover({ isDisabled: disabled });
+    const { isFocusVisible, focusProps } = useFocusRing({
+      autoFocus: props.autoFocus
+    });
     const { buttonProps, isPressed } = useButton(
       {
         ...props,
+        onClick,
+        onPress,
+        onPressStart,
+        onPressEnd,
+        onPressChange,
+        onPressUp,
         elementType: typeof as === "string" ? as : "span",
         isDisabled: disabled
       },
       buttonRef
     );
-    const { isFocusVisible, focusProps } = useFocusRing();
     const styles = useComponentStyles2("Button", { variant, size });
     const stateProps = useStateProps({
       active: isPressed,
-      focus: isFocusVisible
+      focusVisible: isFocusVisible,
+      hover: isHovered
     });
     return /* @__PURE__ */ React5.createElement(Box2, {
-      ...mergeProps(buttonProps, focusProps),
+      ...mergeProps(buttonProps, focusProps, hoverProps, props),
       ...stateProps,
       as,
       ref: buttonRef,
@@ -144,7 +160,11 @@ var Button = forwardRef(
         display: "inline-flex",
         alignItems: "center",
         gap: "0.5ch",
-        cursor: disabled ? "not-allowed" : "pointer"
+        cursor: disabled ? "not-allowed" : "pointer",
+        width: fullWidth ? "100%" : void 0,
+        "&:focus": {
+          outline: 0
+        }
       },
       css: styles
     }, children);
@@ -190,8 +210,8 @@ var Center = ({
 import React10, { forwardRef as forwardRef2 } from "react";
 import { useCheckbox, useCheckboxGroupItem } from "@react-aria/checkbox";
 import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
-import { useHover } from "@react-aria/interactions";
-import { useObjectRef } from "@react-aria/utils";
+import { useHover as useHover2 } from "@react-aria/interactions";
+import { useObjectRef as useObjectRef2 } from "@react-aria/utils";
 import { useToggleState } from "@react-stately/toggle";
 import {
   Box as Box6,
@@ -330,7 +350,7 @@ var Checkbox = forwardRef2(
     error,
     ...props
   }, ref) => {
-    const inputRef = useObjectRef(ref);
+    const inputRef = useObjectRef2(ref);
     const checkboxProps = {
       isIndeterminate: indeterminate,
       isDisabled: disabled,
@@ -369,7 +389,7 @@ var Checkbox = forwardRef2(
       },
       { parts: ["container", "label", "checkbox"] }
     );
-    const { hoverProps, isHovered } = useHover({});
+    const { hoverProps, isHovered } = useHover2({});
     const { isFocusVisible, focusProps } = useFocusRing2();
     const stateProps = useStateProps2({
       hover: isHovered,
@@ -518,7 +538,7 @@ var Content = ({
 };
 
 // src/Dialog/Dialog.tsx
-import React21, { useRef as useRef4 } from "react";
+import React21, { useRef as useRef3 } from "react";
 import { useButton as useButton2 } from "@react-aria/button";
 import { useDialog } from "@react-aria/dialog";
 import {
@@ -570,7 +590,7 @@ var DialogContext = createContext2({});
 var useDialogContext = () => useContext2(DialogContext);
 
 // src/Dialog/DialogTrigger.tsx
-import React20, { useRef as useRef3 } from "react";
+import React20, { useRef as useRef2 } from "react";
 import { PressResponder } from "@react-aria/interactions";
 import { useOverlayTriggerState } from "@react-stately/overlays";
 
@@ -578,7 +598,7 @@ import { useOverlayTriggerState } from "@react-stately/overlays";
 import React17, { forwardRef as forwardRef3 } from "react";
 import { FocusScope } from "@react-aria/focus";
 import { useModal, useOverlay, usePreventScroll } from "@react-aria/overlays";
-import { mergeProps as mergeProps2, useObjectRef as useObjectRef2 } from "@react-aria/utils";
+import { mergeProps as mergeProps2, useObjectRef as useObjectRef3 } from "@react-aria/utils";
 
 // src/Overlay/Underlay.tsx
 import React16 from "react";
@@ -599,7 +619,7 @@ var Underlay = ({ size, variant, ...props }) => {
 // src/Overlay/Modal.tsx
 var Modal = forwardRef3(
   ({ children, open, dismissable, keyboardDismissable, onClose, ...props }, ref) => {
-    const modalRef = useObjectRef2(ref);
+    const modalRef = useObjectRef3(ref);
     const { overlayProps, underlayProps } = useOverlay(
       {
         isOpen: open,
@@ -655,7 +675,7 @@ var Overlay = ({
 };
 
 // src/Overlay/Popover.tsx
-import React19, { forwardRef as forwardRef4, useRef as useRef2 } from "react";
+import React19, { forwardRef as forwardRef4, useRef } from "react";
 import { useModal as useModal2, useOverlay as useOverlay2 } from "@react-aria/overlays";
 import { mergeProps as mergeProps3 } from "@react-aria/utils";
 var Popover = forwardRef4(
@@ -668,7 +688,7 @@ var Popover = forwardRef4(
     minWidth = 0,
     ...props
   }, ref) => {
-    const fallbackRef = useRef2(null);
+    const fallbackRef = useRef(null);
     const popoverRef = ref || fallbackRef;
     const { overlayProps } = useOverlay2(
       {
@@ -699,7 +719,7 @@ var DialogTrigger = ({
   keyboardDismissable = true
 }) => {
   const [dialogTrigger, dialog] = React20.Children.toArray(children);
-  const dialogTriggerRef = useRef3(null);
+  const dialogTriggerRef = useRef2(null);
   const state = useOverlayTriggerState({});
   const ctx = { open: state.isOpen, close: state.close };
   return /* @__PURE__ */ React20.createElement(DialogContext.Provider, {
@@ -720,7 +740,7 @@ var DialogTrigger = ({
 
 // src/Dialog/Dialog.tsx
 var CloseButton = ({ css }) => {
-  const ref = useRef4(null);
+  const ref = useRef3(null);
   const { close } = useDialogContext();
   const { buttonProps } = useButton2(
     {
@@ -778,7 +798,7 @@ var Dialog = ({
   closeButton,
   ...props
 }) => {
-  const ref = useRef4(null);
+  const ref = useRef3(null);
   const { close } = useDialogContext();
   const { dialogProps, titleProps } = useDialog(props, ref);
   const styles = useComponentStyles11(
@@ -885,7 +905,7 @@ var Input = forwardRef5(
 import React27, { forwardRef as forwardRef6 } from "react";
 import { useLink } from "@react-aria/link";
 import { useComponentStyles as useComponentStyles16 } from "@marigold/system";
-import { useObjectRef as useObjectRef3 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef4 } from "@react-aria/utils";
 var Link = forwardRef6(
   ({
     as = "a",
@@ -897,7 +917,7 @@ var Link = forwardRef6(
     onPressStart,
     ...props
   }, ref) => {
-    const linkRef = useObjectRef3(ref);
+    const linkRef = useObjectRef4(ref);
     const { linkProps } = useLink(
       {
         ...props,
@@ -965,7 +985,7 @@ var List = ({
 List.Item = ListItem;
 
 // src/Menu/Menu.tsx
-import React32, { useRef as useRef7 } from "react";
+import React32, { useRef as useRef6 } from "react";
 import { FocusScope as FocusScope2 } from "@react-aria/focus";
 import { useMenu } from "@react-aria/menu";
 import { DismissButton } from "@react-aria/overlays";
@@ -982,15 +1002,15 @@ var MenuContext = createContext4({});
 var useMenuContext = () => useContext4(MenuContext);
 
 // src/Menu/MenuTrigger.tsx
-import React30, { useRef as useRef5 } from "react";
+import React30, { useRef as useRef4 } from "react";
 import { useMenuTriggerState } from "@react-stately/menu";
 import { useMenuTrigger } from "@react-aria/menu";
 import { useOverlayPosition } from "@react-aria/overlays";
 import { PressResponder as PressResponder2 } from "@react-aria/interactions";
 var MenuTrigger = ({ disabled, children }) => {
   const [menuTrigger, menu] = React30.Children.toArray(children);
-  const menuTriggerRef = useRef5(null);
-  const overlayRef = useRef5(null);
+  const menuTriggerRef = useRef4(null);
+  const overlayRef = useRef4(null);
   const state = useMenuTriggerState({});
   const { menuTriggerProps, menuProps } = useMenuTrigger(
     { trigger: "press", isDisabled: disabled },
@@ -1026,13 +1046,13 @@ var MenuTrigger = ({ disabled, children }) => {
 };
 
 // src/Menu/MenuItem.tsx
-import React31, { useRef as useRef6 } from "react";
+import React31, { useRef as useRef5 } from "react";
 import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
 import { useMenuItem } from "@react-aria/menu";
 import { mergeProps as mergeProps4 } from "@react-aria/utils";
 import { Box as Box15, useStateProps as useStateProps3 } from "@marigold/system";
 var MenuItem = ({ item, state, onAction, css }) => {
-  const ref = useRef6(null);
+  const ref = useRef5(null);
   const { onClose } = useMenuContext();
   const { menuItemProps } = useMenuItem(
     {
@@ -1065,7 +1085,7 @@ var MenuItem = ({ item, state, onAction, css }) => {
 var Menu = ({ variant, size, ...props }) => {
   const { triggerWidth, ...menuContext } = useMenuContext();
   const ownProps = { ...props, ...menuContext };
-  const ref = useRef7(null);
+  const ref = useRef6(null);
   const state = useTreeState({ ...ownProps, selectionMode: "none" });
   const { menuProps } = useMenu(ownProps, state, ref);
   const styles = useComponentStyles18(
@@ -1145,10 +1165,10 @@ var Message = ({
 // src/NumberField/NumberField.tsx
 import React37, { forwardRef as forwardRef7 } from "react";
 import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
-import { useHover as useHover3 } from "@react-aria/interactions";
+import { useHover as useHover4 } from "@react-aria/interactions";
 import { useLocale } from "@react-aria/i18n";
 import { useNumberField } from "@react-aria/numberfield";
-import { mergeProps as mergeProps6, useObjectRef as useObjectRef4 } from "@react-aria/utils";
+import { mergeProps as mergeProps6, useObjectRef as useObjectRef5 } from "@react-aria/utils";
 import { useNumberFieldState } from "@react-stately/numberfield";
 import {
   Box as Box20,
@@ -1236,9 +1256,9 @@ var FieldBase = ({
 };
 
 // src/NumberField/StepButton.tsx
-import React36, { useRef as useRef8 } from "react";
+import React36, { useRef as useRef7 } from "react";
 import { useButton as useButton3 } from "@react-aria/button";
-import { useHover as useHover2 } from "@react-aria/interactions";
+import { useHover as useHover3 } from "@react-aria/interactions";
 import { mergeProps as mergeProps5 } from "@react-aria/utils";
 import { Box as Box19, useStateProps as useStateProps4 } from "@marigold/system";
 var Plus = () => /* @__PURE__ */ React36.createElement(Box19, {
@@ -1262,12 +1282,12 @@ var Minus = () => /* @__PURE__ */ React36.createElement(Box19, {
   d: "M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
 }));
 var StepButton = ({ direction, css, ...props }) => {
-  const ref = useRef8(null);
+  const ref = useRef7(null);
   const { buttonProps, isPressed } = useButton3(
     { ...props, elementType: "div" },
     ref
   );
-  const { hoverProps, isHovered } = useHover2(props);
+  const { hoverProps, isHovered } = useHover3(props);
   const stateProps = useStateProps4({
     active: isPressed,
     hover: isHovered,
@@ -1309,7 +1329,7 @@ var NumberField = forwardRef7(
     };
     const showStepper = !hideStepper;
     const { locale } = useLocale();
-    const inputRef = useObjectRef4(ref);
+    const inputRef = useObjectRef5(ref);
     const state = useNumberFieldState({ ...props, locale });
     const {
       labelProps,
@@ -1320,7 +1340,7 @@ var NumberField = forwardRef7(
       incrementButtonProps,
       decrementButtonProps
     } = useNumberField(props, state, inputRef);
-    const { hoverProps, isHovered } = useHover3({ isDisabled: disabled });
+    const { hoverProps, isHovered } = useHover4({ isDisabled: disabled });
     const { focusProps, isFocused } = useFocusRing4({
       within: true,
       isTextInput: true,
@@ -1421,10 +1441,10 @@ function MarigoldProvider({
 import React40, {
   forwardRef as forwardRef8
 } from "react";
-import { useHover as useHover4 } from "@react-aria/interactions";
+import { useHover as useHover5 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
 import { useRadio } from "@react-aria/radio";
-import { useObjectRef as useObjectRef5 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
 import {
   Box as Box22,
   useComponentStyles as useComponentStyles23,
@@ -1528,7 +1548,7 @@ var Radio = forwardRef8(
       width: groupWidth,
       ...state
     } = useRadioGroupContext();
-    const inputRef = useObjectRef5(ref);
+    const inputRef = useObjectRef6(ref);
     const { inputProps } = useRadio(
       { isDisabled: disabled, ...props },
       state,
@@ -1539,7 +1559,7 @@ var Radio = forwardRef8(
       { variant: variant || props.variant, size: size || props.size },
       { parts: ["container", "label", "radio"] }
     );
-    const { hoverProps, isHovered } = useHover4({});
+    const { hoverProps, isHovered } = useHover5({});
     const { isFocusVisible, focusProps } = useFocusRing5();
     const stateProps = useStateProps6({
       hover: isHovered,
@@ -1591,7 +1611,7 @@ Radio.Group = RadioGroup;
 // src/Select/Select.tsx
 import React44, {
   forwardRef as forwardRef10,
-  useRef as useRef10
+  useRef as useRef9
 } from "react";
 import { useButton as useButton4 } from "@react-aria/button";
 import { FocusScope as FocusScope3, useFocusRing as useFocusRing6 } from "@react-aria/focus";
@@ -1600,7 +1620,7 @@ import { DismissButton as DismissButton2, useOverlayPosition as useOverlayPositi
 import { HiddenSelect, useSelect } from "@react-aria/select";
 import { useSelectState } from "@react-stately/select";
 import { Item as Item2, Section } from "@react-stately/collections";
-import { mergeProps as mergeProps7, useObjectRef as useObjectRef7 } from "@react-aria/utils";
+import { mergeProps as mergeProps7, useObjectRef as useObjectRef8 } from "@react-aria/utils";
 import {
   Box as Box26,
   useComponentStyles as useComponentStyles25,
@@ -1609,7 +1629,7 @@ import {
 
 // src/ListBox/ListBox.tsx
 import React43, { forwardRef as forwardRef9 } from "react";
-import { useObjectRef as useObjectRef6 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef7 } from "@react-aria/utils";
 import {
   Box as Box25,
   useComponentStyles as useComponentStyles24
@@ -1627,11 +1647,11 @@ import { useListBoxSection } from "@react-aria/listbox";
 import { Box as Box24 } from "@marigold/system";
 
 // src/ListBox/ListBoxOption.tsx
-import React41, { useRef as useRef9 } from "react";
+import React41, { useRef as useRef8 } from "react";
 import { useOption } from "@react-aria/listbox";
 import { Box as Box23, useStateProps as useStateProps7 } from "@marigold/system";
 var ListBoxOption = ({ item, state }) => {
-  const ref = useRef9(null);
+  const ref = useRef8(null);
   const { optionProps, isSelected, isDisabled, isFocused } = useOption(
     {
       key: item.key
@@ -1683,7 +1703,7 @@ var ListBoxSection = ({ section, state }) => {
 // src/ListBox/ListBox.tsx
 var ListBox = forwardRef9(
   ({ state, variant, size, ...props }, ref) => {
-    const innerRef = useObjectRef6(ref);
+    const innerRef = useObjectRef7(ref);
     const { listBoxProps } = useListBox(props, state, innerRef);
     const styles = useComponentStyles24(
       "ListBox",
@@ -1741,7 +1761,7 @@ var Chevron = ({ css }) => /* @__PURE__ */ React44.createElement(Box26, {
 var Select = forwardRef10(
   ({ variant, size, width, open, disabled, required, error, ...rest }, ref) => {
     const formatMessage = useMessageFormatter(messages);
-    const buttonRef = useObjectRef7(ref);
+    const buttonRef = useObjectRef8(ref);
     const props = {
       isOpen: open,
       isDisabled: disabled,
@@ -1764,7 +1784,7 @@ var Select = forwardRef10(
       buttonRef
     );
     const { focusProps, isFocusVisible } = useFocusRing6();
-    const overlayRef = useRef10(null);
+    const overlayRef = useRef9(null);
     const { overlayProps: positionProps } = useOverlayPosition2({
       targetRef: buttonRef,
       overlayRef,
@@ -1853,7 +1873,7 @@ import React46, { forwardRef as forwardRef11 } from "react";
 import { useSlider } from "@react-aria/slider";
 import { useSliderState } from "@react-stately/slider";
 import { useNumberFormatter } from "@react-aria/i18n";
-import { useObjectRef as useObjectRef8 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef9 } from "@react-aria/utils";
 import { useComponentStyles as useComponentStyles26 } from "@marigold/system";
 
 // src/Slider/Thumb.tsx
@@ -1889,29 +1909,23 @@ var Thumb = ({ state, trackRef, styles, ...props }) => {
     state.setThumbEditable(0, !disabled);
   }, [disabled, state]);
   return /* @__PURE__ */ React45.createElement(Box, {
-    __baseCSS: {
-      position: "absolute",
-      top: 16,
-      transform: "translateX(-50%)",
-      left: `${state.getThumbPercent(0) * 100}%`
-    }
-  }, /* @__PURE__ */ React45.createElement(Box, {
+    __baseCSS: { top: "50%" },
+    css: styles,
     ...thumbProps,
-    __baseCSS: styles,
     ...stateProps
   }, /* @__PURE__ */ React45.createElement(VisuallyHidden, null, /* @__PURE__ */ React45.createElement(Box, {
     as: "input",
     type: "range",
     ref: inputRef,
     ...mergeProps8(inputProps, focusProps)
-  }))));
+  })));
 };
 
 // src/Slider/Slider.tsx
 var Slider = forwardRef11(
   ({ variant, size, width = "100%", ...props }, ref) => {
     const { formatOptions } = props;
-    const trackRef = useObjectRef8(ref);
+    const trackRef = useObjectRef9(ref);
     const numberFormatter = useNumberFormatter(formatOptions);
     const state = useSliderState({ ...props, numberFormatter });
     const { groupProps, trackProps, labelProps, outputProps } = useSlider(
@@ -1950,13 +1964,16 @@ var Slider = forwardRef11(
       ...trackProps,
       ref: trackRef,
       __baseCSS: {
-        position: "relative",
         height: 32,
         width: "100%",
         cursor: props.disabled ? "not-allowed" : "pointer"
       }
     }, /* @__PURE__ */ React46.createElement(Box, {
-      __baseCSS: styles.track
+      __baseCSS: {
+        top: "50%",
+        transform: "translateY(-50%)"
+      },
+      css: styles.track
     }), /* @__PURE__ */ React46.createElement(Thumb, {
       state,
       trackRef,
@@ -2011,7 +2028,7 @@ var Stack = ({
 import React49, { forwardRef as forwardRef12 } from "react";
 import { useFocusRing as useFocusRing8 } from "@react-aria/focus";
 import { useSwitch } from "@react-aria/switch";
-import { useObjectRef as useObjectRef9 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef10 } from "@react-aria/utils";
 import { useToggleState as useToggleState2 } from "@react-stately/toggle";
 import {
   useComponentStyles as useComponentStyles27,
@@ -2028,7 +2045,7 @@ var Switch = forwardRef12(
     defaultChecked,
     ...rest
   }, ref) => {
-    const inputRef = useObjectRef9(ref);
+    const inputRef = useObjectRef10(ref);
     const props = {
       isSelected: checked,
       isDisabled: disabled,
@@ -2112,7 +2129,7 @@ var Switch = forwardRef12(
 );
 
 // src/Table/Table.tsx
-import React58, { useRef as useRef17 } from "react";
+import React58, { useRef as useRef16 } from "react";
 import { useTable } from "@react-aria/table";
 import {
   Cell,
@@ -2143,13 +2160,13 @@ var TableBody = ({ children }) => {
 };
 
 // src/Table/TableCell.tsx
-import React51, { useRef as useRef11 } from "react";
+import React51, { useRef as useRef10 } from "react";
 import { useTableCell } from "@react-aria/table";
 import { useFocusRing as useFocusRing9 } from "@react-aria/focus";
 import { mergeProps as mergeProps9 } from "@react-aria/utils";
 import { Box as Box28, useStateProps as useStateProps11 } from "@marigold/system";
 var TableCell = ({ cell }) => {
-  const ref = useRef11(null);
+  const ref = useRef10(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell(
@@ -2171,7 +2188,7 @@ var TableCell = ({ cell }) => {
 };
 
 // src/Table/TableCheckboxCell.tsx
-import React52, { useRef as useRef12 } from "react";
+import React52, { useRef as useRef11 } from "react";
 import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
 import { useFocusRing as useFocusRing10 } from "@react-aria/focus";
 import { mergeProps as mergeProps10 } from "@react-aria/utils";
@@ -2199,7 +2216,7 @@ var mapCheckboxProps = ({
 
 // src/Table/TableCheckboxCell.tsx
 var TableCheckboxCell = ({ cell }) => {
-  const ref = useRef12(null);
+  const ref = useRef11(null);
   const { state, styles } = useTableContext();
   const disabled = state.disabledKeys.has(cell.parentKey);
   const { gridCellProps } = useTableCell2(
@@ -2231,9 +2248,9 @@ var TableCheckboxCell = ({ cell }) => {
 };
 
 // src/Table/TableColumnHeader.tsx
-import React53, { useRef as useRef13 } from "react";
+import React53, { useRef as useRef12 } from "react";
 import { useFocusRing as useFocusRing11 } from "@react-aria/focus";
-import { useHover as useHover5 } from "@react-aria/interactions";
+import { useHover as useHover6 } from "@react-aria/interactions";
 import { useTableColumnHeader } from "@react-aria/table";
 import { mergeProps as mergeProps11 } from "@react-aria/utils";
 import { Box as Box30, useStateProps as useStateProps13 } from "@marigold/system";
@@ -2252,7 +2269,7 @@ var SortIndicator = ({
 }, direction === "ascending" ? "\u25B2" : "\u25BC");
 var TableColumnHeader = ({ column }) => {
   var _a, _b;
-  const ref = useRef13(null);
+  const ref = useRef12(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader(
     {
@@ -2261,7 +2278,7 @@ var TableColumnHeader = ({ column }) => {
     state,
     ref
   );
-  const { hoverProps, isHovered } = useHover5({});
+  const { hoverProps, isHovered } = useHover6({});
   const { focusProps, isFocusVisible } = useFocusRing11();
   const stateProps = useStateProps13({
     hover: isHovered,
@@ -2291,11 +2308,11 @@ var TableHeader = ({ children }) => {
 };
 
 // src/Table/TableHeaderRow.tsx
-import React55, { useRef as useRef14 } from "react";
+import React55, { useRef as useRef13 } from "react";
 import { useTableHeaderRow } from "@react-aria/table";
 var TableHeaderRow = ({ item, children }) => {
   const { state } = useTableContext();
-  const ref = useRef14(null);
+  const ref = useRef13(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
   return /* @__PURE__ */ React55.createElement("tr", {
     ...rowProps,
@@ -2304,14 +2321,14 @@ var TableHeaderRow = ({ item, children }) => {
 };
 
 // src/Table/TableRow.tsx
-import React56, { useRef as useRef15 } from "react";
+import React56, { useRef as useRef14 } from "react";
 import { useFocusRing as useFocusRing12 } from "@react-aria/focus";
-import { useHover as useHover6 } from "@react-aria/interactions";
+import { useHover as useHover7 } from "@react-aria/interactions";
 import { useTableRow } from "@react-aria/table";
 import { mergeProps as mergeProps12 } from "@react-aria/utils";
 import { Box as Box31, useStateProps as useStateProps14 } from "@marigold/system";
 var TableRow = ({ children, row }) => {
-  const ref = useRef15(null);
+  const ref = useRef14(null);
   const { state, styles } = useTableContext();
   const { rowProps, isPressed } = useTableRow(
     {
@@ -2323,7 +2340,7 @@ var TableRow = ({ children, row }) => {
   const disabled = state.disabledKeys.has(row.key);
   const selected = state.selectionManager.isSelected(row.key);
   const { focusProps, isFocusVisible } = useFocusRing12({ within: true });
-  const { hoverProps, isHovered } = useHover6({ isDisabled: disabled });
+  const { hoverProps, isHovered } = useHover7({ isDisabled: disabled });
   const stateProps = useStateProps14({
     disabled,
     selected,
@@ -2341,9 +2358,9 @@ var TableRow = ({ children, row }) => {
 };
 
 // src/Table/TableSelectAllCell.tsx
-import React57, { useRef as useRef16 } from "react";
+import React57, { useRef as useRef15 } from "react";
 import { useFocusRing as useFocusRing13 } from "@react-aria/focus";
-import { useHover as useHover7 } from "@react-aria/interactions";
+import { useHover as useHover8 } from "@react-aria/interactions";
 import {
   useTableColumnHeader as useTableColumnHeader2,
   useTableSelectAllCheckbox
@@ -2351,7 +2368,7 @@ import {
 import { mergeProps as mergeProps13 } from "@react-aria/utils";
 import { Box as Box32, useStateProps as useStateProps15 } from "@marigold/system";
 var TableSelectAllCell = ({ column }) => {
-  const ref = useRef16(null);
+  const ref = useRef15(null);
   const { state, styles } = useTableContext();
   const { columnHeaderProps } = useTableColumnHeader2(
     {
@@ -2361,7 +2378,7 @@ var TableSelectAllCell = ({ column }) => {
     ref
   );
   const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
-  const { hoverProps, isHovered } = useHover7({});
+  const { hoverProps, isHovered } = useHover8({});
   const { focusProps, isFocusVisible } = useFocusRing13();
   const stateProps = useStateProps15({
     hover: isHovered,
@@ -2390,7 +2407,7 @@ var Table = ({
   stretch,
   ...props
 }) => {
-  const tableRef = useRef17(null);
+  const tableRef = useRef16(null);
   const state = useTableState({
     ...props,
     showSelectionCheckboxes: props.selectionMode === "multiple" && props.selectionBehavior !== "replace"
@@ -2479,10 +2496,10 @@ var Text = ({
 
 // src/TextArea/TextArea.tsx
 import React60, { forwardRef as forwardRef13 } from "react";
-import { useHover as useHover8 } from "@react-aria/interactions";
+import { useHover as useHover9 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing14 } from "@react-aria/focus";
 import { useTextField } from "@react-aria/textfield";
-import { useObjectRef as useObjectRef10 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
 import {
   Box as Box35,
   useComponentStyles as useComponentStyles30,
@@ -2501,7 +2518,7 @@ var TextArea = forwardRef13(
     ...props
   }, ref) => {
     const { label, description, errorMessage } = props;
-    const textAreaRef = useObjectRef10(ref);
+    const textAreaRef = useObjectRef11(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField(
       {
         inputElementType: "textarea",
@@ -2513,7 +2530,7 @@ var TextArea = forwardRef13(
       },
       textAreaRef
     );
-    const { hoverProps, isHovered } = useHover8({});
+    const { hoverProps, isHovered } = useHover9({});
     const { focusProps, isFocusVisible } = useFocusRing14();
     const stateProps = useStateProps16({
       hover: isHovered,
@@ -2551,15 +2568,15 @@ var TextArea = forwardRef13(
 
 // src/TextField/TextField.tsx
 import React61, { forwardRef as forwardRef14 } from "react";
-import { useHover as useHover9 } from "@react-aria/interactions";
+import { useHover as useHover10 } from "@react-aria/interactions";
 import { useFocusRing as useFocusRing15 } from "@react-aria/focus";
 import { useTextField as useTextField2 } from "@react-aria/textfield";
-import { useObjectRef as useObjectRef11 } from "@react-aria/utils";
+import { useObjectRef as useObjectRef12 } from "@react-aria/utils";
 import { useStateProps as useStateProps17 } from "@marigold/system";
 var TextField = forwardRef14(
   ({ variant, size, width, disabled, required, readOnly, error, ...props }, ref) => {
     const { label, description, errorMessage, autoFocus } = props;
-    const inputRef = useObjectRef11(ref);
+    const inputRef = useObjectRef12(ref);
     const { labelProps, inputProps, descriptionProps, errorMessageProps } = useTextField2(
       {
         isDisabled: disabled,
@@ -2570,7 +2587,7 @@ var TextField = forwardRef14(
       },
       inputRef
     );
-    const { hoverProps, isHovered } = useHover9({});
+    const { hoverProps, isHovered } = useHover10({});
     const { focusProps, isFocusVisible } = useFocusRing15({
       isTextInput: true,
       autoFocus
@@ -2635,7 +2652,7 @@ var TooltipContext = createContext8({});
 var useTooltipContext = () => useContext8(TooltipContext);
 
 // src/Tooltip/TooltipTrigger.tsx
-import React63, { useRef as useRef18 } from "react";
+import React63, { useRef as useRef17 } from "react";
 import { FocusableProvider } from "@react-aria/focus";
 import { useOverlayPosition as useOverlayPosition3 } from "@react-aria/overlays";
 import { useTooltipTrigger } from "@react-aria/tooltip";
@@ -2656,8 +2673,8 @@ var TooltipTrigger = ({
     delay,
     placement
   };
-  const tooltipTriggerRef = useRef18(null);
-  const overlayRef = useRef18(null);
+  const tooltipTriggerRef = useRef17(null);
+  const overlayRef = useRef17(null);
   const state = useTooltipTriggerState(props);
   const { triggerProps, tooltipProps } = useTooltipTrigger(
     props,
@@ -2771,6 +2788,8 @@ export {
   Tooltip,
   Underlay,
   VisuallyHidden,
+  useAsyncList,
   useCheckboxGroupContext,
+  useListData,
   useTheme2 as useTheme
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/components",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "Components for the Marigold Design System",
   "license": "MIT",
   "keywords": [
@@ -23,51 +23,52 @@
     "directory": "packages/components"
   },
   "dependencies": {
-    "@marigold/icons": "0.7.7",
-    "@marigold/system": "1.3.0",
-    "@marigold/tokens": "3.0.0",
+    "@marigold/icons": "1.0.0",
+    "@marigold/system": "2.0.0",
+    "@marigold/tokens": "3.1.0",
     "@marigold/types": "0.5.2",
-    "@react-aria/button": "3.5.1",
-    "@react-aria/checkbox": "3.4.1",
-    "@react-aria/dialog": "3.2.1",
-    "@react-aria/focus": "3.6.1",
-    "@react-aria/i18n": "3.4.1",
-    "@react-aria/interactions": "3.9.1",
-    "@react-aria/link": "3.3.1",
-    "@react-aria/listbox": "3.5.1",
-    "@react-aria/menu": "3.5.1",
-    "@react-aria/numberfield": "3.2.1",
-    "@react-aria/overlays": "3.9.1",
-    "@react-aria/radio": "3.2.1",
-    "@react-aria/select": "3.7.1",
-    "@react-aria/separator": "3.2.1",
-    "@react-aria/slider": "3.1.1",
-    "@react-aria/ssr": "3.2.0",
-    "@react-aria/switch": "3.2.1",
-    "@react-aria/table": "3.3.0",
-    "@react-aria/textfield": "3.6.1",
-    "@react-aria/tooltip": "3.2.1",
-    "@react-aria/utils": "3.13.1",
-    "@react-aria/visually-hidden": "3.3.1",
-    "@react-stately/checkbox": "3.1.1",
-    "@react-stately/collections": "3.4.1",
-    "@react-stately/list": "3.5.1",
-    "@react-stately/menu": "3.3.1",
-    "@react-stately/numberfield": "3.1.1",
-    "@react-stately/overlays": "3.3.1",
-    "@react-stately/radio": "3.4.1",
-    "@react-stately/select": "3.2.1",
-    "@react-stately/slider": "3.1.1",
-    "@react-stately/table": "3.2.0",
-    "@react-stately/toggle": "3.3.1",
-    "@react-stately/tooltip": "3.1.1",
-    "@react-stately/tree": "3.3.1",
-    "@react-types/checkbox": "3.3.1",
-    "@react-types/dialog": "3.4.1",
-    "@react-types/numberfield": "3.3.1",
-    "@react-types/radio": "3.2.1",
-    "@react-types/shared": "3.13.1",
-    "@react-types/tooltip": "3.2.1",
+    "@react-aria/button": "3.6.0",
+    "@react-aria/checkbox": "3.5.0",
+    "@react-aria/dialog": "3.3.0",
+    "@react-aria/focus": "3.7.0",
+    "@react-aria/i18n": "3.5.1",
+    "@react-aria/interactions": "3.10.0",
+    "@react-aria/link": "3.3.2",
+    "@react-aria/listbox": "3.6.0",
+    "@react-aria/menu": "3.6.0",
+    "@react-aria/numberfield": "3.3.0",
+    "@react-aria/overlays": "3.10.0",
+    "@react-aria/radio": "3.3.0",
+    "@react-aria/select": "3.8.0",
+    "@react-aria/separator": "3.2.2",
+    "@react-aria/slider": "3.2.0",
+    "@react-aria/ssr": "3.3.0",
+    "@react-aria/switch": "3.2.2",
+    "@react-aria/table": "3.4.0",
+    "@react-aria/textfield": "3.7.0",
+    "@react-aria/tooltip": "3.3.0",
+    "@react-aria/utils": "3.13.2",
+    "@react-aria/visually-hidden": "3.4.0",
+    "@react-stately/checkbox": "3.2.0",
+    "@react-stately/collections": "3.4.2",
+    "@react-stately/data": "^3.6.0",
+    "@react-stately/list": "3.5.2",
+    "@react-stately/menu": "3.4.0",
+    "@react-stately/numberfield": "3.2.0",
+    "@react-stately/overlays": "3.4.0",
+    "@react-stately/radio": "3.5.0",
+    "@react-stately/select": "3.3.0",
+    "@react-stately/slider": "3.2.0",
+    "@react-stately/table": "3.3.0",
+    "@react-stately/toggle": "3.4.0",
+    "@react-stately/tooltip": "3.2.0",
+    "@react-stately/tree": "3.3.2",
+    "@react-types/checkbox": "3.3.2",
+    "@react-types/dialog": "3.4.2",
+    "@react-types/numberfield": "3.3.2",
+    "@react-types/radio": "3.2.2",
+    "@react-types/shared": "3.14.0",
+    "@react-types/tooltip": "3.2.2",
     "react-is": "18.2.0"
   },
   "peerDependencies": {
@@ -78,7 +79,7 @@
     "@marigold/tsconfig": "0.3.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tsup": "6.1.3"
+    "tsup": "6.2.2"
   },
   "scripts": {
     "build": "tsup src/index.ts",