npm - react-aria-components - Versions diffs - 1.0.0-alpha.2 → 1.0.0-alpha.4 - Mend

react-aria-components 1.0.0-alpha.2 → 1.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (32) hide show

package/dist/import.mjs CHANGED Viewed

@@ -1,8 +1,8 @@
 import {DIRECTORY_DRAG_TYPE as $67da31f5140672c4$re_export$DIRECTORY_DRAG_TYPE, isDirectoryDropItem as $67da31f5140672c4$re_export$isDirectoryDropItem, isFileDropItem as $67da31f5140672c4$re_export$isFileDropItem, isTextDropItem as $67da31f5140672c4$re_export$isTextDropItem, SSRProvider as $67da31f5140672c4$re_export$SSRProvider, useBreadcrumbs as $dGqE5$useBreadcrumbs, useIsSSR as $dGqE5$useIsSSR, mergeProps as $dGqE5$mergeProps, useLink as $dGqE5$useLink, useHover as $dGqE5$useHover, useFocusRing as $dGqE5$useFocusRing, useButton as $dGqE5$useButton, useLocale as $dGqE5$useLocale, useCalendar as $dGqE5$useCalendar, VisuallyHidden as $dGqE5$VisuallyHidden, useRangeCalendar as $dGqE5$useRangeCalendar, useCalendarGrid as $dGqE5$useCalendarGrid, useCalendarCell as $dGqE5$useCalendarCell, useCheckboxGroup as $dGqE5$useCheckboxGroup, useCheckboxGroupItem as $dGqE5$useCheckboxGroupItem, useCheckbox as $dGqE5$useCheckbox, usePress as $dGqE5$usePress, useFilter as $dGqE5$useFilter, useComboBox as $dGqE5$useComboBox, useListBox as $dGqE5$useListBox, ListKeyboardDelegate as $dGqE5$ListKeyboardDelegate, FocusScope as $dGqE5$FocusScope, useListBoxSection as $dGqE5$useListBoxSection, useOption as $dGqE5$useOption, useDraggableCollection as $dGqE5$useDraggableCollection, useDraggableItem as $dGqE5$useDraggableItem, DragPreview as $dGqE5$DragPreview, useDroppableItem as $dGqE5$useDroppableItem, useDroppableCollection as $dGqE5$useDroppableCollection, useDropIndicator as $dGqE5$useDropIndicator, ListDropTargetDelegate as $dGqE5$ListDropTargetDelegate, useSeparator as $dGqE5$useSeparator, usePopover as $dGqE5$usePopover, Overlay as $dGqE5$Overlay, DismissButton as $dGqE5$DismissButton, useDateField as $dGqE5$useDateField, useTimeField as $dGqE5$useTimeField, useDateSegment as $dGqE5$useDateSegment, useDatePicker as $dGqE5$useDatePicker, useDateRangePicker as $dGqE5$useDateRangePicker, useOverlayTrigger as $dGqE5$useOverlayTrigger, useDialog as $dGqE5$useDialog, useModalOverlay as $dGqE5$useModalOverlay, useGridList as $dGqE5$useGridList, useGridListItem as $dGqE5$useGridListItem, useGridListSelectionCheckbox as $dGqE5$useGridListSelectionCheckbox, useVisuallyHidden as $dGqE5$useVisuallyHidden, useMenuTrigger as $dGqE5$useMenuTrigger, useMenu as $dGqE5$useMenu, useMenuSection as $dGqE5$useMenuSection, useMenuItem as $dGqE5$useMenuItem, useMeter as $dGqE5$useMeter, useNumberField as $dGqE5$useNumberField, useProgressBar as $dGqE5$useProgressBar, useRadioGroup as $dGqE5$useRadioGroup, useRadio as $dGqE5$useRadio, useSearchField as $dGqE5$useSearchField, useSelect as $dGqE5$useSelect, HiddenSelect as $dGqE5$HiddenSelect, useNumberFormatter as $dGqE5$useNumberFormatter, useSlider as $dGqE5$useSlider, useSliderThumb as $dGqE5$useSliderThumb, useSwitch as $dGqE5$useSwitch, useTable as $dGqE5$useTable, useTableRowGroup as $dGqE5$useTableRowGroup, useTableHeaderRow as $dGqE5$useTableHeaderRow, useTableSelectAllCheckbox as $dGqE5$useTableSelectAllCheckbox, useTableColumnHeader as $dGqE5$useTableColumnHeader, useTableRow as $dGqE5$useTableRow, useTableSelectionCheckbox as $dGqE5$useTableSelectionCheckbox, useTableCell as $dGqE5$useTableCell, useTabList as $dGqE5$useTabList, useTab as $dGqE5$useTab, useTabPanel as $dGqE5$useTabPanel, useTextField as $dGqE5$useTextField, useToggleButton as $dGqE5$useToggleButton, useTooltipTrigger as $dGqE5$useTooltipTrigger, OverlayContainer as $dGqE5$OverlayContainer, useOverlayPosition as $dGqE5$useOverlayPosition, useTooltip as $dGqE5$useTooltip} from "react-aria";
-import {filterDOMProps as $dGqE5$filterDOMProps, useLayoutEffect as $dGqE5$useLayoutEffect, useObjectRef as $dGqE5$useObjectRef, mergeRefs as $dGqE5$mergeRefs, mergeProps as $dGqE5$mergeProps1, useResizeObserver as $dGqE5$useResizeObserver, useViewportSize as $dGqE5$useViewportSize, isWebKit as $dGqE5$isWebKit, isIOS as $dGqE5$isIOS} from "@react-aria/utils";
+import {filterDOMProps as $dGqE5$filterDOMProps, useObjectRef as $dGqE5$useObjectRef, mergeRefs as $dGqE5$mergeRefs, mergeProps as $dGqE5$mergeProps1, useLayoutEffect as $dGqE5$useLayoutEffect, useResizeObserver as $dGqE5$useResizeObserver, useViewportSize as $dGqE5$useViewportSize, isWebKit as $dGqE5$isWebKit, isIOS as $dGqE5$isIOS} from "@react-aria/utils";
 import $dGqE5$react, {createContext as $dGqE5$createContext, forwardRef as $dGqE5$forwardRef, useMemo as $dGqE5$useMemo, cloneElement as $dGqE5$cloneElement, useCallback as $dGqE5$useCallback, useContext as $dGqE5$useContext, useEffect as $dGqE5$useEffect, useState as $dGqE5$useState, useRef as $dGqE5$useRef} from "react";
 import $dGqE5$swchelperssrc_define_propertymjs from "@swc/helpers/src/_define_property.mjs";
-import {createPortal as $dGqE5$createPortal} from "react-dom";
+import $dGqE5$reactdom, {createPortal as $dGqE5$createPortal} from "react-dom";
 import {useSyncExternalStore as $dGqE5$useSyncExternalStore} from "use-sync-external-store/shim/index.js";
 import {createCalendar as $dGqE5$createCalendar, endOfMonth as $dGqE5$endOfMonth, getWeeksInMonth as $dGqE5$getWeeksInMonth, isSameMonth as $dGqE5$isSameMonth, isSameDay as $dGqE5$isSameDay} from "@internationalized/date";
 import {useCalendarState as $dGqE5$useCalendarState, useRangeCalendarState as $dGqE5$useRangeCalendarState, useCheckboxGroupState as $dGqE5$useCheckboxGroupState, useToggleState as $dGqE5$useToggleState, useComboBoxState as $dGqE5$useComboBoxState, useListState as $dGqE5$useListState, useDraggableCollectionState as $dGqE5$useDraggableCollectionState, useDroppableCollectionState as $dGqE5$useDroppableCollectionState, useDateFieldState as $dGqE5$useDateFieldState, useTimeFieldState as $dGqE5$useTimeFieldState, useDatePickerState as $dGqE5$useDatePickerState, useDateRangePickerState as $dGqE5$useDateRangePickerState, useOverlayTriggerState as $dGqE5$useOverlayTriggerState, useMenuTriggerState as $dGqE5$useMenuTriggerState, useTreeState as $dGqE5$useTreeState, useNumberFieldState as $dGqE5$useNumberFieldState, useRadioGroupState as $dGqE5$useRadioGroupState, useSearchFieldState as $dGqE5$useSearchFieldState, useSelectState as $dGqE5$useSelectState, useSliderState as $dGqE5$useSliderState, useTableState as $dGqE5$useTableState, useTabListState as $dGqE5$useTabListState, useTooltipTriggerState as $dGqE5$useTooltipTriggerState} from "react-stately";
@@ -45,7 +45,6 @@ import {FocusableProvider as $dGqE5$FocusableProvider} from "@react-aria/focus";
 class $7135fc7d473fd974$export$f5d856d854e74713 {
     get childNodes() {
         throw new Error("childNodes is not supported");
@@ -102,37 +101,38 @@ let $7135fc7d473fd974$var$_Symbol_iterator = Symbol.iterator;
     }
     set firstChild(firstChild) {
         this._firstChild = firstChild;
-        this.ownerDocument.dirtyNodes.add(this);
+        this.ownerDocument.markDirty(this);
     }
     get lastChild() {
         return this._lastChild;
     }
     set lastChild(lastChild) {
         this._lastChild = lastChild;
-        this.ownerDocument.dirtyNodes.add(this);
+        this.ownerDocument.markDirty(this);
     }
     get previousSibling() {
         return this._previousSibling;
     }
     set previousSibling(previousSibling) {
         this._previousSibling = previousSibling;
-        this.ownerDocument.dirtyNodes.add(this);
+        this.ownerDocument.markDirty(this);
     }
     get nextSibling() {
         return this._nextSibling;
     }
     set nextSibling(nextSibling) {
         this._nextSibling = nextSibling;
-        this.ownerDocument.dirtyNodes.add(this);
+        this.ownerDocument.markDirty(this);
     }
     get parentNode() {
         return this._parentNode;
     }
     set parentNode(parentNode) {
         this._parentNode = parentNode;
-        this.ownerDocument.dirtyNodes.add(this);
+        this.ownerDocument.markDirty(this);
     }
     appendChild(child) {
+        this.ownerDocument.startTransaction();
         if (child.parentNode) child.parentNode.removeChild(child);
         if (this.firstChild == null) this.firstChild = child;
         if (this.lastChild) {
@@ -146,11 +146,16 @@ let $7135fc7d473fd974$var$_Symbol_iterator = Symbol.iterator;
         child.parentNode = this;
         child.nextSibling = null;
         this.lastChild = child;
-        this.ownerDocument.dirtyNodes.add(this);
+        this.ownerDocument.markDirty(this);
+        if (child.hasSetProps) // Only add the node to the collection if we already received props for it.
+        // Otherwise wait until then so we have the correct id for the node.
         this.ownerDocument.addNode(child);
+        this.ownerDocument.endTransaction();
+        this.ownerDocument.queueUpdate();
     }
     insertBefore(newNode, referenceNode) {
         if (referenceNode == null) return this.appendChild(newNode);
+        this.ownerDocument.startTransaction();
         if (newNode.parentNode) newNode.parentNode.removeChild(newNode);
         newNode.nextSibling = referenceNode;
         newNode.previousSibling = referenceNode.previousSibling;
@@ -164,10 +169,13 @@ let $7135fc7d473fd974$var$_Symbol_iterator = Symbol.iterator;
             node.index++;
             node = node.nextSibling;
         }
-        this.ownerDocument.addNode(newNode);
+        if (newNode.hasSetProps) this.ownerDocument.addNode(newNode);
+        this.ownerDocument.endTransaction();
+        this.ownerDocument.queueUpdate();
     }
     removeChild(child) {
         if (child.parentNode !== this) return;
+        this.ownerDocument.startTransaction();
         let node = child.nextSibling;
         while(node){
             node.index--;
@@ -182,6 +190,8 @@ let $7135fc7d473fd974$var$_Symbol_iterator = Symbol.iterator;
         child.previousSibling = null;
         child.index = 0;
         this.ownerDocument.removeNode(child);
+        this.ownerDocument.endTransaction();
+        this.ownerDocument.queueUpdate();
     }
     addEventListener() {}
     removeEventListener() {}
@@ -195,18 +205,13 @@ let $7135fc7d473fd974$var$_Symbol_iterator = Symbol.iterator;
     }
 }
 let $7135fc7d473fd974$var$id = 0;
-const $7135fc7d473fd974$var$TYPE_MAP = {
-    hr: "separator",
-    optgroup: "section",
-    option: "item"
-};
 class $7135fc7d473fd974$export$dc064fe9e59310fd extends $7135fc7d473fd974$var$BaseNode {
     get index() {
         return this._index;
     }
     set index(index) {
         this._index = index;
-        this.ownerDocument.dirtyNodes.add(this);
+        this.ownerDocument.markDirty(this);
     }
     get level() {
         if (this.parentNode instanceof $7135fc7d473fd974$export$dc064fe9e59310fd) return this.parentNode.level + (this.node.type === "item" ? 1 : 0);
@@ -228,30 +233,32 @@ class $7135fc7d473fd974$export$dc064fe9e59310fd extends $7135fc7d473fd974$var$Ba
         var _this_lastChild_node_key;
         node.lastChildKey = (_this_lastChild_node_key = (_this_lastChild = this.lastChild) === null || _this_lastChild === void 0 ? void 0 : _this_lastChild.node.key) !== null && _this_lastChild_node_key !== void 0 ? _this_lastChild_node_key : null;
     }
-    // Special property that React passes through as an object rather than a string via setAttribute.
-    // See below for details.
-    set multiple(obj) {
+    setProps(obj, ref, rendered) {
         let node = this.ownerDocument.getMutableNode(this);
-        let { rendered: rendered , value: value , textValue: textValue , id: id , ...props } = obj;
+        let { value: value , textValue: textValue , id: id , ...props } = obj;
+        props.ref = ref;
         node.props = props;
         node.rendered = rendered;
         node.value = value;
         node.textValue = textValue || (typeof rendered === "string" ? rendered : "") || obj["aria-label"] || "";
         if (id != null && id !== node.key) {
-            if (this.parentNode) throw new Error("Cannot change the id of an item");
+            if (this.hasSetProps) throw new Error("Cannot change the id of an item");
             node.key = id;
         }
+        // If this is the first time props have been set, end the transaction started in the constructor
+        // so this node can be emitted.
+        if (!this.hasSetProps) {
+            this.ownerDocument.addNode(this);
+            this.ownerDocument.endTransaction();
+            this.hasSetProps = true;
+        }
+        this.ownerDocument.queueUpdate();
     }
     get style() {
-        let node = this.ownerDocument.getMutableNode(this);
-        if (!node.props.style) node.props.style = {};
-        return node.props.style;
+        return {};
     }
     hasAttribute() {}
-    setAttribute(key, value) {
-        let node = this.ownerDocument.getMutableNode(this);
-        if (key in node) node[key] = value;
-    }
+    setAttribute() {}
     setAttributeNS() {}
     removeAttribute() {}
     constructor(type, ownerDocument){
@@ -259,7 +266,12 @@ class $7135fc7d473fd974$export$dc064fe9e59310fd extends $7135fc7d473fd974$var$Ba
         (0, $dGqE5$swchelperssrc_define_propertymjs)(this, "nodeType", 8) // COMMENT_NODE (we'd use ELEMENT_NODE but React DevTools will fail to get its dimensions)
         ;
         (0, $dGqE5$swchelperssrc_define_propertymjs)(this, "_index", 0);
-        this.node = new $7135fc7d473fd974$export$f5d856d854e74713($7135fc7d473fd974$var$TYPE_MAP[type] || type, `react-aria-${++$7135fc7d473fd974$var$id}`);
+        (0, $dGqE5$swchelperssrc_define_propertymjs)(this, "hasSetProps", false);
+        this.node = new $7135fc7d473fd974$export$f5d856d854e74713(type, `react-aria-${++$7135fc7d473fd974$var$id}`);
+        // Start a transaction so that no updates are emitted from the collection
+        // until the props for this node are set. We don't know the real id for the
+        // node until then, so we need to avoid emitting collections in an inconsistent state.
+        this.ownerDocument.startTransaction();
     }
 }
 let $7135fc7d473fd974$var$_Symbol_iterator1 = Symbol.iterator;
@@ -374,7 +386,7 @@ class $7135fc7d473fd974$export$b34a105447964f9f extends $7135fc7d473fd974$var$Ba
             this.mutatedNodes.add(element);
             element.node = node;
         }
-        this.dirtyNodes.add(element);
+        this.markDirty(element);
         return node;
     }
     getMutableCollection() {
@@ -384,13 +396,22 @@ class $7135fc7d473fd974$export$b34a105447964f9f extends $7135fc7d473fd974$var$Ba
         }
         return this.collection;
     }
+    markDirty(node) {
+        this.dirtyNodes.add(node);
+    }
+    startTransaction() {
+        this.transactionCount++;
+    }
+    endTransaction() {
+        this.transactionCount--;
+    }
     addNode(element) {
         let collection = this.getMutableCollection();
         if (!collection.getItem(element.node.key)) {
             collection.addNode(element.node);
             for (let child of element)this.addNode(child);
         }
-        this.dirtyNodes.add(element);
+        this.markDirty(element);
     }
     removeNode(node) {
         for (let child of node){
@@ -399,9 +420,10 @@ class $7135fc7d473fd974$export$b34a105447964f9f extends $7135fc7d473fd974$var$Ba
         }
         let collection = this.getMutableCollection();
         collection.removeNode(node.node.key);
-        this.dirtyNodes.add(node);
+        this.markDirty(node);
     }
     /** Finalizes the collection update, updating all nodes and freezing the collection. */ getCollection() {
+        if (this.transactionCount > 0) return this.collection;
         for (let element of this.dirtyNodes)if (element instanceof $7135fc7d473fd974$export$dc064fe9e59310fd && element.parentNode) element.updateNode();
         this.dirtyNodes.clear();
         if (this.mutatedNodes.size) {
@@ -416,6 +438,9 @@ class $7135fc7d473fd974$export$b34a105447964f9f extends $7135fc7d473fd974$var$Ba
         return this.collection;
     }
     queueUpdate() {
+        // Don't emit any updates if there is a transaction in progress.
+        // queueUpdate should be called again after the transaction.
+        if (this.dirtyNodes.size === 0 || this.transactionCount > 0) return;
         for (let fn of this.subscriptions)fn();
     }
     subscribe(fn) {
@@ -431,6 +456,7 @@ class $7135fc7d473fd974$export$b34a105447964f9f extends $7135fc7d473fd974$var$Ba
         (0, $dGqE5$swchelperssrc_define_propertymjs)(this, "dirtyNodes", new Set());
         (0, $dGqE5$swchelperssrc_define_propertymjs)(this, "mutatedNodes", new Set());
         (0, $dGqE5$swchelperssrc_define_propertymjs)(this, "subscriptions", new Set());
+        (0, $dGqE5$swchelperssrc_define_propertymjs)(this, "transactionCount", 0);
         this.collection = collection;
         this.collectionMutated = true;
     }
@@ -503,9 +529,6 @@ function $7135fc7d473fd974$export$6cd28814d92fa9c9(props, initialCollection) {
         children
     ]);
     let portal = (0, $dGqE5$useIsSSR)() ? null : /*#__PURE__*/ (0, $dGqE5$createPortal)(wrappedChildren, document);
-    (0, $dGqE5$useLayoutEffect)(()=>{
-        if (document.dirtyNodes.size > 0) document.queueUpdate();
-    });
     return {
         portal: portal,
         collection: collection
@@ -513,40 +536,38 @@ function $7135fc7d473fd974$export$6cd28814d92fa9c9(props, initialCollection) {
 }
 function $7135fc7d473fd974$export$aeba0b1fb3dcd8b8(Element, props, ref) {
     let isShallow = (0, $dGqE5$useContext)($7135fc7d473fd974$var$ShallowRenderContext);
+    ref = $7135fc7d473fd974$export$636783d3732b5559(props, ref, props.children);
     if (isShallow) // @ts-ignore
     return /*#__PURE__*/ (0, $dGqE5$react).createElement(Element, {
-        multiple: {
-            ...props,
-            ref: ref,
-            rendered: props.children
-        }
+        ref: ref
     });
     return null;
 }
-function $7135fc7d473fd974$export$6d08773d2e66f8f2(props) {
-    // HACK: the `multiple` prop is special in that React will pass it through as a property rather
-    // than converting to a string and using setAttribute. This allows our custom fake DOM to receive
-    // the props as an object. Once React supports custom elements, we can switch to that instead.
-    // https://github.com/facebook/react/issues/11347
-    // https://github.com/facebook/react/blob/82c64e1a49239158c0daa7f0d603d2ad2ee667a9/packages/react-dom/src/shared/DOMProperty.js#L386
+function $7135fc7d473fd974$export$636783d3732b5559(props, ref, rendered) {
+    // Return a callback ref that sets the props object on the fake DOM node.
+    return (0, $dGqE5$useCallback)((element)=>{
+        element === null || element === void 0 ? void 0 : element.setProps(props, ref, rendered);
+    }, [
+        props,
+        ref,
+        rendered
+    ]);
+}
+function $7135fc7d473fd974$var$Item(props, ref) {
     // @ts-ignore
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("item", {
-        multiple: {
-            ...props,
-            rendered: props.children
-        }
+        ref: $7135fc7d473fd974$export$636783d3732b5559(props, ref, props.children)
     });
 }
-function $7135fc7d473fd974$export$6e2c8f0811a474ce(props) {
+const $7135fc7d473fd974$export$6d08773d2e66f8f2 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($7135fc7d473fd974$var$Item);
+function $7135fc7d473fd974$var$Section(props, ref) {
     let children = $7135fc7d473fd974$export$901dbff4e54a6dd0(props);
     // @ts-ignore
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("section", {
-        multiple: {
-            ...props,
-            rendered: props.title
-        }
+        ref: $7135fc7d473fd974$export$636783d3732b5559(props, ref)
     }, children);
 }
+const $7135fc7d473fd974$export$6e2c8f0811a474ce = /*#__PURE__*/ (0, $dGqE5$forwardRef)($7135fc7d473fd974$var$Section);
 const $7135fc7d473fd974$export$db36075d98ba73d3 = /*#__PURE__*/ (0, $dGqE5$createContext)(null);
 const $7135fc7d473fd974$export$4feb769f8ddf26c5 = /*#__PURE__*/ (0, $dGqE5$createContext)(null);
 function $7135fc7d473fd974$export$fb8073518f34e6ec(props) {
@@ -571,6 +592,7 @@ function $7135fc7d473fd974$export$fb8073518f34e6ec(props) {
  * governing permissions and limitations under the License.
  */
 const $64fa3d84918910a7$export$91172ebb93c441a2 = Symbol("callback");
 const $64fa3d84918910a7$export$8e0ef2c5844bfb6b = Symbol("default");
 function $64fa3d84918910a7$export$2881499e37b75b9a({ values: values , children: children  }) {
@@ -580,18 +602,32 @@ function $64fa3d84918910a7$export$2881499e37b75b9a({ values: values , children:
     }, children);
     return children;
 }
-function $64fa3d84918910a7$export$4d86445c2cf5e3({ className: className , style: style , children: children , defaultClassName: defaultClassName , defaultChildren: defaultChildren , values: values , ...otherProps }) {
-    if (typeof className === "function") className = className(values);
-    if (typeof style === "function") style = style(values);
-    if (typeof children === "function") children = children(values);
-    else if (children == null) children = defaultChildren;
-    delete otherProps.id;
-    return {
-        ...(0, $dGqE5$filterDOMProps)(otherProps),
-        className: className !== null && className !== void 0 ? className : defaultClassName,
-        style: style,
-        children: children
-    };
+function $64fa3d84918910a7$export$4d86445c2cf5e3(props) {
+    let { className: className , style: style , children: children , defaultClassName: defaultClassName , defaultChildren: defaultChildren , values: values  } = props;
+    return (0, $dGqE5$useMemo)(()=>{
+        let computedClassName;
+        let computedStyle;
+        let computedChildren;
+        if (typeof className === "function") computedClassName = className(values);
+        else computedClassName = className;
+        if (typeof style === "function") computedStyle = style(values);
+        else computedStyle = style;
+        if (typeof children === "function") computedChildren = children(values);
+        else if (children == null) computedChildren = defaultChildren;
+        else computedChildren = children;
+        return {
+            className: computedClassName !== null && computedClassName !== void 0 ? computedClassName : defaultClassName,
+            style: computedStyle,
+            children: computedChildren
+        };
+    }, [
+        className,
+        style,
+        children,
+        defaultClassName,
+        defaultChildren,
+        values
+    ]);
 }
 function $64fa3d84918910a7$export$29f1550f4b0d4415(props, ref, context) {
     let ctx = (0, $dGqE5$useContext)(context) || {};
@@ -672,7 +708,9 @@ function $64fa3d84918910a7$var$useAnimation(ref, isActive, onEnd) {
                 let onAnimationEnd = (e)=>{
                     if (e.target === ref.current) {
                         element.removeEventListener("animationend", onAnimationEnd);
-                        onEnd();
+                        (0, $dGqE5$reactdom).flushSync(()=>{
+                            onEnd();
+                        });
                     }
                 };
                 let element = ref.current;
@@ -734,7 +772,7 @@ const $5cb03073d3f54797$export$a8a3e93435678ff9 = /*#__PURE__*/ (0, $dGqE5$forwa
 const $4f118338184dc1d9$export$e2509388b49734e7 = /*#__PURE__*/ (0, $dGqE5$createContext)(null);
 function $4f118338184dc1d9$var$Link(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $4f118338184dc1d9$export$e2509388b49734e7);
-    let elementType = typeof props.children === "string" ? "span" : "a";
+    let elementType = typeof props.children === "string" || typeof props.children === "function" ? "span" : "a";
     let { linkProps: linkProps , isPressed: isPressed  } = (0, $dGqE5$useLink)({
         ...props,
         elementType: elementType
@@ -753,6 +791,8 @@ function $4f118338184dc1d9$var$Link(props, ref) {
             isFocusVisible: isFocusVisible
         }
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     let element = typeof renderProps.children === "string" ? /*#__PURE__*/ (0, $dGqE5$react).createElement("span", null, renderProps.children) : (0, $dGqE5$react).Children.only(renderProps.children);
     return /*#__PURE__*/ (0, $dGqE5$react).cloneElement(element, {
         ref: (0, $dGqE5$useMemo)(()=>element.ref ? (0, $dGqE5$mergeRefs)(element.ref, ref) : ref, [
@@ -760,7 +800,7 @@ function $4f118338184dc1d9$var$Link(props, ref) {
             ref
         ]),
         slot: props.slot,
-        ...(0, $dGqE5$mergeProps)(renderProps, linkProps, hoverProps, focusProps, {
+        ...(0, $dGqE5$mergeProps)(DOMProps, renderProps, linkProps, hoverProps, focusProps, {
             children: element.props.children,
             "data-hovered": isHovered || undefined,
             "data-pressed": isPressed || undefined,
@@ -799,7 +839,7 @@ function $778035c5624f61e7$var$Breadcrumbs(props, ref) {
 }
 /**
  * Breadcrumbs display a heirarchy of links to the current page or resource in an application.
- */ const $778035c5624f61e7$export$2dc68d50d56fbbd = (0, $dGqE5$forwardRef)($778035c5624f61e7$var$Breadcrumbs);
+ */ const $778035c5624f61e7$export$2dc68d50d56fbbd = /*#__PURE__*/ (0, $dGqE5$forwardRef)($778035c5624f61e7$var$Breadcrumbs);
 function $778035c5624f61e7$var$BreadcrumbItem({ node: node , isCurrent: isCurrent , isDisabled: isDisabled  }) {
     // Recreating useBreadcrumbItem because we want to use composition instead of having the link builtin.
     let headingProps = isCurrent ? {
@@ -842,6 +882,17 @@ function $778035c5624f61e7$var$BreadcrumbItem({ node: node , isCurrent: isCurren
  */
+const $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes = new Set([
+    "form",
+    "formAction",
+    "formEncType",
+    "formMethod",
+    "formNoValidate",
+    "formTarget",
+    "name",
+    "value"
+]);
 const $d2b4bc8c273e7be6$export$24d547caef80ccd1 = /*#__PURE__*/ (0, $dGqE5$createContext)({});
 function $d2b4bc8c273e7be6$var$Button(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $d2b4bc8c273e7be6$export$24d547caef80ccd1);
@@ -861,6 +912,9 @@ function $d2b4bc8c273e7be6$var$Button(props, ref) {
         defaultClassName: "react-aria-Button"
     });
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("button", {
+        ...(0, $dGqE5$filterDOMProps)(props, {
+            propNames: $d2b4bc8c273e7be6$var$additionalButtonHTMLAttributes
+        }),
         ...(0, $dGqE5$mergeProps)(buttonProps, focusProps, hoverProps),
         ...renderProps,
         ref: ref,
@@ -982,7 +1036,7 @@ function $dfd62f934fc76fed$var$Calendar(props, ref) {
 }
 /**
  * A calendar displays one or more date grids and allows users to select a single date.
- */ const $dfd62f934fc76fed$export$e1aef45b828286de = (0, $dGqE5$forwardRef)($dfd62f934fc76fed$var$Calendar);
+ */ const $dfd62f934fc76fed$export$e1aef45b828286de = /*#__PURE__*/ (0, $dGqE5$forwardRef)($dfd62f934fc76fed$var$Calendar);
 function $dfd62f934fc76fed$var$RangeCalendar(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $dfd62f934fc76fed$export$233dd9682e1ad64b);
     let { locale: locale  } = (0, $dGqE5$useLocale)();
@@ -1043,7 +1097,7 @@ function $dfd62f934fc76fed$var$RangeCalendar(props, ref) {
 }
 /**
  * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
- */ const $dfd62f934fc76fed$export$a4f5c8b89d277a8d = (0, $dGqE5$forwardRef)($dfd62f934fc76fed$var$RangeCalendar);
+ */ const $dfd62f934fc76fed$export$a4f5c8b89d277a8d = /*#__PURE__*/ (0, $dGqE5$forwardRef)($dfd62f934fc76fed$var$RangeCalendar);
 const $dfd62f934fc76fed$var$InternalCalendarGridContext = /*#__PURE__*/ (0, $dGqE5$createContext)(null);
 function $dfd62f934fc76fed$var$CalendarGrid(props, ref) {
     let state = (0, $dGqE5$useContext)($dfd62f934fc76fed$var$InternalCalendarContext);
@@ -1051,7 +1105,8 @@ function $dfd62f934fc76fed$var$CalendarGrid(props, ref) {
     if (props.offset) startDate = startDate.add(props.offset);
     let { gridProps: gridProps , headerProps: headerProps , weekDays: weekDays  } = (0, $dGqE5$useCalendarGrid)({
         startDate: startDate,
-        endDate: (0, $dGqE5$endOfMonth)(startDate)
+        endDate: (0, $dGqE5$endOfMonth)(startDate),
+        weekdayStyle: props.weekdayStyle
     }, state);
     var _props_className;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement($dfd62f934fc76fed$var$InternalCalendarGridContext.Provider, {
@@ -1169,7 +1224,7 @@ function $dfd62f934fc76fed$var$CalendarCell({ date: date , ...otherProps }, ref)
         "data-selection-end": isSelectionEnd || undefined
     };
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("td", cellProps, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...(0, $dGqE5$mergeProps)(buttonProps, focusProps, hoverProps, dataAttrs, renderProps),
+        ...(0, $dGqE5$mergeProps)((0, $dGqE5$filterDOMProps)(otherProps), buttonProps, focusProps, hoverProps, dataAttrs, renderProps),
         ref: objectRef
     }));
 }
@@ -1191,6 +1246,7 @@ function $dfd62f934fc76fed$var$CalendarCell({ date: date , ...otherProps }, ref)
  */
 /*
  * Copyright 2022 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -1318,8 +1374,10 @@ function $bc237834342dbd75$var$Checkbox(props, ref) {
             isRequired: props.isRequired || false
         }
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("label", {
-        ...(0, $dGqE5$mergeProps)(pressProps, hoverProps, renderProps),
+        ...(0, $dGqE5$mergeProps)(DOMProps, pressProps, hoverProps, renderProps),
         slot: props.slot,
         "data-selected": isSelected || undefined,
         "data-indeterminate": props.isIndeterminate || undefined,
@@ -1588,7 +1646,7 @@ function $eed445e0843c11d0$var$ListBoxPortal({ props: props , listBoxRef: listBo
 }
 /**
  * A listbox displays a list of options and allows a user to select one or more of them.
- */ const $eed445e0843c11d0$export$41f133550aa26f48 = (0, $dGqE5$forwardRef)($eed445e0843c11d0$var$ListBox);
+ */ const $eed445e0843c11d0$export$41f133550aa26f48 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($eed445e0843c11d0$var$ListBox);
 function $eed445e0843c11d0$var$ListBoxInner({ state: state , props: props , listBoxRef: listBoxRef  }) {
     let { dragAndDropHooks: dragAndDropHooks  } = props;
     let { collection: collection , selectionManager: selectionManager  } = state;
@@ -1705,7 +1763,7 @@ function $eed445e0843c11d0$var$ListBoxInner({ state: state , props: props , list
             [
                 (0, $d8f176866e6dc039$export$f55761759794cf55),
                 {
-                    render: $eed445e0843c11d0$var$ListBoxDropIndicator
+                    render: $eed445e0843c11d0$var$ListBoxDropIndicatorWrapper
                 }
             ]
         ]
@@ -1746,11 +1804,12 @@ function $eed445e0843c11d0$var$ListBoxSection({ section: section , className: cl
         ...(0, $dGqE5$filterDOMProps)(otherProps),
         ...groupProps,
         className: className || ((_section_props = section.props) === null || _section_props === void 0 ? void 0 : _section_props.className) || "react-aria-Section",
-        style: style || ((_section_props1 = section.props) === null || _section_props1 === void 0 ? void 0 : _section_props1.style)
+        style: style || ((_section_props1 = section.props) === null || _section_props1 === void 0 ? void 0 : _section_props1.style),
+        ref: section.props.ref
     }, children);
 }
 function $eed445e0843c11d0$var$Option({ item: item  }) {
-    let ref = (0, $dGqE5$useRef)(null);
+    let ref = (0, $dGqE5$useObjectRef)(item.props.ref);
     let { state: state , shouldFocusOnHover: shouldFocusOnHover , dragAndDropHooks: dragAndDropHooks , dragState: dragState , dropState: dropState  } = (0, $dGqE5$useContext)($eed445e0843c11d0$var$InternalListBoxContext);
     let { optionProps: optionProps , labelProps: labelProps , descriptionProps: descriptionProps , ...states } = (0, $dGqE5$useOption)({
         key: item.key
@@ -1804,7 +1863,7 @@ function $eed445e0843c11d0$var$Option({ item: item  }) {
         key: item.key,
         dropPosition: "before"
     }), /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...(0, $dGqE5$mergeProps)(optionProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, droppableItem === null || droppableItem === void 0 ? void 0 : droppableItem.dropProps),
+        ...(0, $dGqE5$mergeProps)((0, $dGqE5$filterDOMProps)(props), optionProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps, droppableItem === null || droppableItem === void 0 ? void 0 : droppableItem.dropProps),
         ...renderProps,
         ref: ref,
         "data-hovered": isHovered || undefined,
@@ -1831,14 +1890,22 @@ function $eed445e0843c11d0$var$Option({ item: item  }) {
         dropPosition: "after"
     }));
 }
-function $eed445e0843c11d0$var$ListBoxDropIndicator(props, ref) {
+function $eed445e0843c11d0$var$ListBoxDropIndicatorWrapper(props, ref) {
     ref = (0, $dGqE5$useObjectRef)(ref);
     let { dragAndDropHooks: dragAndDropHooks , dropState: dropState  } = (0, $dGqE5$useContext)($eed445e0843c11d0$var$InternalListBoxContext);
     let { dropIndicatorProps: dropIndicatorProps , isHidden: isHidden , isDropTarget: isDropTarget  } = dragAndDropHooks.useDropIndicator(props, dropState, ref);
     if (isHidden) return null;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+    return /*#__PURE__*/ (0, $dGqE5$react).createElement($eed445e0843c11d0$var$ListBoxtDropIndicatorForwardRef, {
         ...props,
+        dropIndicatorProps: dropIndicatorProps,
+        isDropTarget: isDropTarget,
+        ref: ref
+    });
+}
+function $eed445e0843c11d0$var$ListBoxtDropIndicator(props, ref) {
+    let { dropIndicatorProps: dropIndicatorProps , isDropTarget: isDropTarget , ...otherProps } = props;
+    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+        ...otherProps,
         defaultClassName: "react-aria-DropIndicator",
         values: {
             isDropTarget: isDropTarget
@@ -1853,6 +1920,7 @@ function $eed445e0843c11d0$var$ListBoxDropIndicator(props, ref) {
         "data-drop-target": isDropTarget || undefined
     });
 }
+const $eed445e0843c11d0$var$ListBoxtDropIndicatorForwardRef = /*#__PURE__*/ (0, $dGqE5$forwardRef)($eed445e0843c11d0$var$ListBoxtDropIndicator);
 /*
@@ -1867,6 +1935,7 @@ function $eed445e0843c11d0$var$ListBoxDropIndicator(props, ref) {
  * governing permissions and limitations under the License.
  */
 /*
  * Copyright 2022 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -1933,7 +2002,7 @@ function $07b14b47974efb58$var$Popover(props, ref) {
 /**
  * A popover is an overlay element positioned relative to a trigger.
  */ const $07b14b47974efb58$export$5b6b19405a83ff9d = /*#__PURE__*/ (0, $dGqE5$forwardRef)($07b14b47974efb58$var$Popover);
-function $07b14b47974efb58$var$PopoverInner({ children: children , state: state , isExiting: isExiting , ...props }) {
+function $07b14b47974efb58$var$PopoverInner({ state: state , isExiting: isExiting , ...props }) {
     var _props_offset;
     let { popoverProps: popoverProps , underlayProps: underlayProps , arrowProps: arrowProps , placement: placement  } = (0, $dGqE5$usePopover)({
         ...props,
@@ -1961,7 +2030,7 @@ function $07b14b47974efb58$var$PopoverInner({ children: children , state: state
             inset: 0
         }
     }), /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...popoverProps,
+        ...(0, $dGqE5$mergeProps1)((0, $dGqE5$filterDOMProps)(props), popoverProps),
         ...renderProps,
         ref: ref,
         slot: props.slot,
@@ -1976,7 +2045,7 @@ function $07b14b47974efb58$var$PopoverInner({ children: children , state: state
             arrowProps: arrowProps,
             placement: placement
         }
-    }, children), /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $dGqE5$DismissButton), {
+    }, renderProps.children), /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $dGqE5$DismissButton), {
         onDismiss: state.close
     })));
 }
@@ -2000,14 +2069,22 @@ function $d01f2c01039c0eec$var$ComboBox(props, ref) {
         items: (_ref = (_props_items = props.items) !== null && _props_items !== void 0 ? _props_items : props.defaultItems) !== null && _ref !== void 0 ? _ref : propsFromListBox.items,
         children: propsFromListBox.children
     });
-    var _props_items1;
     let state = (0, $dGqE5$useComboBoxState)({
         defaultFilter: props.defaultFilter || contains,
         ...props,
-        items: propsFromListBox ? (_props_items1 = props.items) !== null && _props_items1 !== void 0 ? _props_items1 : propsFromListBox.items : [],
+        // If props.items isn't provided, rely on collection filtering (aka listbox.items is provided or defaultItems provided to Combobox)
+        items: props.items,
         children: undefined,
         collection: collection
     });
+    // Only expose a subset of state to renderProps function to avoid infinite render loop
+    let renderPropsState = (0, $dGqE5$useMemo)(()=>({
+            isOpen: state.isOpen,
+            isFocused: state.isFocused
+        }), [
+        state.isOpen,
+        state.isFocused
+    ]);
     let buttonRef = (0, $dGqE5$useRef)(null);
     let inputRef = (0, $dGqE5$useRef)(null);
     let listBoxRef = (0, $dGqE5$useRef)(null);
@@ -2043,9 +2120,11 @@ function $d01f2c01039c0eec$var$ComboBox(props, ref) {
     });
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         ...props,
-        values: state,
+        values: renderPropsState,
         defaultClassName: "react-aria-ComboBox"
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [
             [
@@ -2104,14 +2183,17 @@ function $d01f2c01039c0eec$var$ComboBox(props, ref) {
             ]
         ]
     }, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
+        ...DOMProps,
         ...renderProps,
         ref: ref,
-        slot: props.slot
-    }, props.children), portal);
+        slot: props.slot,
+        "data-focused": state.isFocused || undefined,
+        "data-open": state.isOpen || undefined
+    }), portal);
 }
 /**
  * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
- */ const $d01f2c01039c0eec$export$72b9695b8216309a = (0, $dGqE5$forwardRef)($d01f2c01039c0eec$var$ComboBox);
+ */ const $d01f2c01039c0eec$export$72b9695b8216309a = /*#__PURE__*/ (0, $dGqE5$forwardRef)($d01f2c01039c0eec$var$ComboBox);
 /*
@@ -2154,6 +2236,8 @@ function $40825cdb76e74f70$var$DateField(props, ref) {
         values: state,
         defaultClassName: "react-aria-DateField"
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [
             [
@@ -2182,15 +2266,16 @@ function $40825cdb76e74f70$var$DateField(props, ref) {
             ]
         ]
     }, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
+        ...DOMProps,
         ...renderProps,
         ref: ref,
         slot: props.slot
-    }, props.children));
+    }));
 }
 /**
  * A date field allows users to enter and edit date and time values using a keyboard.
  * Each part of a date value is displayed in an individually editable segment.
- */ const $40825cdb76e74f70$export$d9781c7894a82487 = (0, $dGqE5$forwardRef)($40825cdb76e74f70$var$DateField);
+ */ const $40825cdb76e74f70$export$d9781c7894a82487 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($40825cdb76e74f70$var$DateField);
 function $40825cdb76e74f70$var$TimeField(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $40825cdb76e74f70$export$8e17ddc448e87c1e);
     let { locale: locale  } = (0, $dGqE5$useLocale)();
@@ -2209,6 +2294,8 @@ function $40825cdb76e74f70$var$TimeField(props, ref) {
         values: state,
         defaultClassName: "react-aria-TimeField"
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [
             [
@@ -2238,15 +2325,16 @@ function $40825cdb76e74f70$var$TimeField(props, ref) {
             ]
         ]
     }, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
+        ...DOMProps,
         ...renderProps,
         ref: ref,
         slot: props.slot
-    }, props.children));
+    }));
 }
 /**
  * A time field allows users to enter and edit time values using a keyboard.
  * Each part of a time value is displayed in an individually editable segment.
- */ const $40825cdb76e74f70$export$5eaee2322dd727eb = (0, $dGqE5$forwardRef)($40825cdb76e74f70$var$TimeField);
+ */ const $40825cdb76e74f70$export$5eaee2322dd727eb = /*#__PURE__*/ (0, $dGqE5$forwardRef)($40825cdb76e74f70$var$TimeField);
 const $40825cdb76e74f70$var$InternalDateInputContext = /*#__PURE__*/ (0, $dGqE5$createContext)(null);
 function $40825cdb76e74f70$var$DateInput({ children: children , slot: slot , ...otherProps }, ref) {
     let [{ state: state , fieldProps: fieldProps  }, fieldRef] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)({
@@ -2270,7 +2358,7 @@ function $40825cdb76e74f70$var$DateInput({ children: children , slot: slot , ...
     return /*#__PURE__*/ (0, $dGqE5$react).createElement($40825cdb76e74f70$var$InternalDateInputContext.Provider, {
         value: state
     }, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...(0, $dGqE5$mergeProps)(fieldProps, focusProps, hoverProps),
+        ...(0, $dGqE5$mergeProps)((0, $dGqE5$filterDOMProps)(otherProps), fieldProps, focusProps, hoverProps),
         ...renderProps,
         ref: fieldRef,
         slot: slot,
@@ -2299,7 +2387,7 @@ function $40825cdb76e74f70$var$DateSegment({ segment: segment , ...otherProps },
         defaultClassName: "react-aria-DateSegment"
     });
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...segmentProps,
+        ...(0, $dGqE5$mergeProps)((0, $dGqE5$filterDOMProps)(otherProps), segmentProps),
         ...renderProps,
         ref: domRef,
         "data-type": segment.type
@@ -2358,6 +2446,7 @@ function $40825cdb76e74f70$var$DateSegment({ segment: segment , ...otherProps },
 const $f3f84453ead64de5$export$ab57792b9b6974a6 = /*#__PURE__*/ (0, $dGqE5$createContext)(null);
 const $f3f84453ead64de5$var$InternalModalContext = /*#__PURE__*/ (0, $dGqE5$createContext)(null);
 function $f3f84453ead64de5$var$Modal(props, ref) {
@@ -2419,7 +2508,7 @@ function $f3f84453ead64de5$var$ModalOverlayInner(props) {
         "--visual-viewport-height": viewport.height + "px"
     };
     return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $dGqE5$Overlay), null, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...underlayProps,
+        ...(0, $dGqE5$mergeProps1)((0, $dGqE5$filterDOMProps)(props), underlayProps),
         ...renderProps,
         style: style,
         ref: props.overlayRef,
@@ -2452,7 +2541,7 @@ function $f3f84453ead64de5$var$ModalContent(props) {
         }
     });
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...modalProps,
+        ...(0, $dGqE5$mergeProps1)((0, $dGqE5$filterDOMProps)(props), modalProps),
         ...renderProps,
         ref: ref,
         "data-entering": entering || undefined,
@@ -2543,6 +2632,7 @@ function $de32f1b87079253c$var$Dialog(props, ref) {
  */ const $de32f1b87079253c$export$3ddf2d174ce01153 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($de32f1b87079253c$var$Dialog);
 /*
  * Copyright 2022 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -2616,6 +2706,8 @@ function $06d5b8ec9ee5d538$var$DatePicker(props, ref) {
         values: state,
         defaultClassName: "react-aria-DatePicker"
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [
             [
@@ -2675,14 +2767,15 @@ function $06d5b8ec9ee5d538$var$DatePicker(props, ref) {
             ]
         ]
     }, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
+        ...DOMProps,
         ...renderProps,
         ref: ref,
         slot: props.slot
-    }, props.children));
+    }));
 }
 /**
  * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
- */ const $06d5b8ec9ee5d538$export$5109c6dd95d8fb00 = (0, $dGqE5$forwardRef)($06d5b8ec9ee5d538$var$DatePicker);
+ */ const $06d5b8ec9ee5d538$export$5109c6dd95d8fb00 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($06d5b8ec9ee5d538$var$DatePicker);
 function $06d5b8ec9ee5d538$var$DateRangePicker(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $06d5b8ec9ee5d538$export$8282edba42ee28a);
     let state = (0, $dGqE5$useDateRangePickerState)(props);
@@ -2718,6 +2811,8 @@ function $06d5b8ec9ee5d538$var$DateRangePicker(props, ref) {
         values: state,
         defaultClassName: "react-aria-DateRangePicker"
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [
             [
@@ -2786,15 +2881,16 @@ function $06d5b8ec9ee5d538$var$DateRangePicker(props, ref) {
             ]
         ]
     }, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
+        ...DOMProps,
         ...renderProps,
         ref: ref,
         slot: props.slot
-    }, props.children));
+    }));
 }
 /**
  * A date range picker combines two DateFields and a RangeCalendar popover to allow
  * users to enter or select a date and time range.
- */ const $06d5b8ec9ee5d538$export$17334619f3ac2224 = (0, $dGqE5$forwardRef)($06d5b8ec9ee5d538$var$DateRangePicker);
+ */ const $06d5b8ec9ee5d538$export$17334619f3ac2224 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($06d5b8ec9ee5d538$var$DateRangePicker);
@@ -2949,7 +3045,7 @@ function $72e60046c03fbe42$var$GridList(props, ref) {
             [
                 (0, $d8f176866e6dc039$export$f55761759794cf55),
                 {
-                    render: $72e60046c03fbe42$var$GridListDropIndicator
+                    render: $72e60046c03fbe42$var$GridListDropIndicatorWrapper
                 }
             ]
         ]
@@ -2958,10 +3054,10 @@ function $72e60046c03fbe42$var$GridList(props, ref) {
 /**
  * A grid list displays a list of interactive items, with support for keyboard navigation,
  * single or multiple selection, and row actions.
- */ const $72e60046c03fbe42$export$a7bfbda1311ca015 = (0, $dGqE5$forwardRef)($72e60046c03fbe42$var$GridList);
+ */ const $72e60046c03fbe42$export$a7bfbda1311ca015 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($72e60046c03fbe42$var$GridList);
 function $72e60046c03fbe42$var$GridListItem({ item: item  }) {
     let { state: state , dragAndDropHooks: dragAndDropHooks , dragState: dragState , dropState: dropState  } = (0, $dGqE5$useContext)($72e60046c03fbe42$var$InternalGridListContext);
-    let ref = (0, $dGqE5$react).useRef(null);
+    let ref = (0, $dGqE5$useObjectRef)(item.props.ref);
     let { rowProps: rowProps , gridCellProps: gridCellProps , descriptionProps: descriptionProps , ...states } = (0, $dGqE5$useGridListItem)({
         node: item,
         shouldSelectOnPressUp: !!dragState
@@ -3036,7 +3132,7 @@ function $72e60046c03fbe42$var$GridListItem({ item: item  }) {
         ...dropIndicator === null || dropIndicator === void 0 ? void 0 : dropIndicator.dropIndicatorProps,
         ref: dropIndicatorRef
     }))), /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...(0, $dGqE5$mergeProps)(rowProps, focusProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
+        ...(0, $dGqE5$mergeProps)((0, $dGqE5$filterDOMProps)(props), rowProps, focusProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
         ...renderProps,
         ref: ref,
         "data-hovered": isHovered || undefined,
@@ -3081,16 +3177,25 @@ function $72e60046c03fbe42$var$GridListItem({ item: item  }) {
         dropPosition: "after"
     }));
 }
-function $72e60046c03fbe42$var$GridListDropIndicator(props, ref) {
+function $72e60046c03fbe42$var$GridListDropIndicatorWrapper(props, ref) {
     ref = (0, $dGqE5$useObjectRef)(ref);
     let { dragAndDropHooks: dragAndDropHooks , dropState: dropState  } = (0, $dGqE5$useContext)($72e60046c03fbe42$var$InternalGridListContext);
     let buttonRef = (0, $dGqE5$useRef)(null);
     let { dropIndicatorProps: dropIndicatorProps , isHidden: isHidden , isDropTarget: isDropTarget  } = dragAndDropHooks.useDropIndicator(props, dropState, buttonRef);
-    let { visuallyHiddenProps: visuallyHiddenProps  } = (0, $dGqE5$useVisuallyHidden)();
     if (isHidden) return null;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+    return /*#__PURE__*/ (0, $dGqE5$react).createElement($72e60046c03fbe42$var$GridListDropIndicatorForwardRef, {
         ...props,
+        dropIndicatorProps: dropIndicatorProps,
+        isDropTarget: isDropTarget,
+        buttonRef: buttonRef,
+        ref: ref
+    });
+}
+function $72e60046c03fbe42$var$GridListDropIndicator(props, ref) {
+    let { dropIndicatorProps: dropIndicatorProps , isDropTarget: isDropTarget , buttonRef: buttonRef , ...otherProps } = props;
+    let { visuallyHiddenProps: visuallyHiddenProps  } = (0, $dGqE5$useVisuallyHidden)();
+    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+        ...otherProps,
         defaultClassName: "react-aria-DropIndicator",
         values: {
             isDropTarget: isDropTarget
@@ -3110,6 +3215,7 @@ function $72e60046c03fbe42$var$GridListDropIndicator(props, ref) {
         ref: buttonRef
     })));
 }
+const $72e60046c03fbe42$var$GridListDropIndicatorForwardRef = /*#__PURE__*/ (0, $dGqE5$forwardRef)($72e60046c03fbe42$var$GridListDropIndicator);
 function $72e60046c03fbe42$var$RootDropIndicator() {
     let { dragAndDropHooks: dragAndDropHooks , dropState: dropState  } = (0, $dGqE5$useContext)($72e60046c03fbe42$var$InternalGridListContext);
     let ref = (0, $dGqE5$useRef)(null);
@@ -3289,7 +3395,7 @@ function $3674c52c6b3c5bce$var$MenuInner({ props: props , collection: collection
 }
 /**
  * A menu displays a list of actions or options that a user can choose.
- */ const $3674c52c6b3c5bce$export$d9b273488cd8ce6f = (0, $dGqE5$forwardRef)($3674c52c6b3c5bce$var$Menu);
+ */ const $3674c52c6b3c5bce$export$d9b273488cd8ce6f = /*#__PURE__*/ (0, $dGqE5$forwardRef)($3674c52c6b3c5bce$var$Menu);
 function $3674c52c6b3c5bce$var$MenuSection({ section: section , className: className , style: style , ...otherProps }) {
     var _section_props, _section_props1;
     let state = (0, $dGqE5$useContext)($3674c52c6b3c5bce$var$InternalMenuContext);
@@ -3325,12 +3431,13 @@ function $3674c52c6b3c5bce$var$MenuSection({ section: section , className: class
         ...(0, $dGqE5$filterDOMProps)(otherProps),
         ...groupProps,
         className: className || ((_section_props = section.props) === null || _section_props === void 0 ? void 0 : _section_props.className) || "react-aria-Section",
-        style: style || ((_section_props1 = section.props) === null || _section_props1 === void 0 ? void 0 : _section_props1.style)
+        style: style || ((_section_props1 = section.props) === null || _section_props1 === void 0 ? void 0 : _section_props1.style),
+        ref: section.props.ref
     }, children);
 }
 function $3674c52c6b3c5bce$var$MenuItem({ item: item  }) {
     let state = (0, $dGqE5$useContext)($3674c52c6b3c5bce$var$InternalMenuContext);
-    let ref = (0, $dGqE5$useRef)(null);
+    let ref = (0, $dGqE5$useObjectRef)(item.props.ref);
     let { menuItemProps: menuItemProps , labelProps: labelProps , descriptionProps: descriptionProps , keyboardShortcutProps: keyboardShortcutProps , ...states } = (0, $dGqE5$useMenuItem)({
         key: item.key
     }, state, ref);
@@ -3349,8 +3456,10 @@ function $3674c52c6b3c5bce$var$MenuItem({ item: item  }) {
             selectionBehavior: state.selectionManager.selectionBehavior
         }
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...(0, $dGqE5$mergeProps)(menuItemProps, focusProps),
+        ...(0, $dGqE5$mergeProps)(DOMProps, menuItemProps, focusProps),
         ...renderProps,
         ref: ref,
         "data-hovered": states.isFocused || undefined,
@@ -3448,6 +3557,7 @@ function $c0c9ced265f3594c$var$Meter(props, ref) {
 const $b91743d66a0ed188$export$b414a48cf5dcbc11 = /*#__PURE__*/ (0, $dGqE5$createContext)(null);
 function $b91743d66a0ed188$var$NumberField(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $b91743d66a0ed188$export$b414a48cf5dcbc11);
@@ -3467,6 +3577,8 @@ function $b91743d66a0ed188$var$NumberField(props, ref) {
         values: state,
         defaultClassName: "react-aria-NumberField"
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [
             [
@@ -3507,10 +3619,11 @@ function $b91743d66a0ed188$var$NumberField(props, ref) {
             ]
         ]
     }, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
+        ...DOMProps,
         ...renderProps,
         ref: ref,
         slot: props.slot
-    }, props.children));
+    }));
 }
 /**
  * A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
@@ -3678,8 +3791,10 @@ function $b6c3ddc6086f204d$var$Radio(props, ref) {
             isRequired: state.isRequired
         }
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("label", {
-        ...(0, $dGqE5$mergeProps1)(pressProps, hoverProps, renderProps),
+        ...(0, $dGqE5$mergeProps1)(DOMProps, pressProps, hoverProps, renderProps),
         "data-selected": isSelected || undefined,
         "data-pressed": pressed || undefined,
         "data-hovered": isHovered || undefined,
@@ -3721,6 +3836,7 @@ function $b6c3ddc6086f204d$var$Radio(props, ref) {
 const $440f4836bcb56932$export$d1c4e4c63cb03a11 = /*#__PURE__*/ (0, $dGqE5$createContext)(null);
 function $440f4836bcb56932$var$SearchField(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $440f4836bcb56932$export$d1c4e4c63cb03a11);
@@ -3736,7 +3852,10 @@ function $440f4836bcb56932$var$SearchField(props, ref) {
         values: state,
         defaultClassName: "react-aria-SearchField"
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
+        ...DOMProps,
         ...renderProps,
         ref: ref,
         slot: props.slot,
@@ -3817,6 +3936,14 @@ function $82d7e5349645de74$var$Select(props, ref) {
         collection: collection,
         children: undefined
     });
+    // Only expose a subset of state to renderProps function to avoid infinite render loop
+    let renderPropsState = (0, $dGqE5$useMemo)(()=>({
+            isOpen: state.isOpen,
+            isFocused: state.isFocused
+        }), [
+        state.isOpen,
+        state.isFocused
+    ]);
     // Get props for child elements from useSelect
     let buttonRef = (0, $dGqE5$useRef)(null);
     let [labelRef, label] = (0, $64fa3d84918910a7$export$9d4c57ee4c6ffdd8)();
@@ -3837,16 +3964,19 @@ function $82d7e5349645de74$var$Select(props, ref) {
     });
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         ...props,
-        values: state,
+        values: renderPropsState,
         defaultClassName: "react-aria-Select"
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [
             [
                 $82d7e5349645de74$var$InternalSelectContext,
                 {
                     state: state,
-                    valueProps: valueProps
+                    valueProps: valueProps,
+                    placeholder: props.placeholder
                 }
             ],
             [
@@ -3896,10 +4026,13 @@ function $82d7e5349645de74$var$Select(props, ref) {
             ]
         ]
     }, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
+        ...DOMProps,
         ...renderProps,
         ref: ref,
-        slot: props.slot
-    }, props.children), portal, /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $dGqE5$HiddenSelect), {
+        slot: props.slot,
+        "data-focused": state.isFocused || undefined,
+        "data-open": state.isOpen || undefined
+    }), portal, /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $dGqE5$HiddenSelect), {
         state: state,
         triggerRef: buttonRef,
         label: label,
@@ -3908,10 +4041,10 @@ function $82d7e5349645de74$var$Select(props, ref) {
 }
 /**
  * A select displays a collapsible list of options and allows a user to select one of them.
- */ const $82d7e5349645de74$export$ef9b1a59e592288f = (0, $dGqE5$forwardRef)($82d7e5349645de74$var$Select);
+ */ const $82d7e5349645de74$export$ef9b1a59e592288f = /*#__PURE__*/ (0, $dGqE5$forwardRef)($82d7e5349645de74$var$Select);
 function $82d7e5349645de74$var$SelectValue(props, ref) {
     var _state_selectedItem, _state_selectedItem1, _state_selectedItem2;
-    let { state: state , valueProps: valueProps  } = (0, $dGqE5$useContext)($82d7e5349645de74$var$InternalSelectContext);
+    let { state: state , valueProps: valueProps , placeholder: placeholder  } = (0, $dGqE5$useContext)($82d7e5349645de74$var$InternalSelectContext);
     let rendered = (_state_selectedItem = state.selectedItem) === null || _state_selectedItem === void 0 ? void 0 : _state_selectedItem.rendered;
     if (typeof rendered === "function") {
         // If the selected item has a function as a child, we need to call it to render to JSX.
@@ -3931,7 +4064,7 @@ function $82d7e5349645de74$var$SelectValue(props, ref) {
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         ...props,
         // TODO: localize this.
-        defaultChildren: rendered || "Select an item",
+        defaultChildren: rendered || placeholder || "Select an item",
         defaultClassName: "react-aria-SelectValue",
         values: {
             selectedItem: (_state_selectedItem_value = (_state_selectedItem1 = state.selectedItem) === null || _state_selectedItem1 === void 0 ? void 0 : _state_selectedItem1.value) !== null && _state_selectedItem_value !== void 0 ? _state_selectedItem_value : null,
@@ -3939,8 +4072,11 @@ function $82d7e5349645de74$var$SelectValue(props, ref) {
             isPlaceholder: !state.selectedItem
         }
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("span", {
         ref: ref,
+        ...DOMProps,
         ...valueProps,
         ...renderProps,
         "data-placeholder": !state.selectedItem || undefined
@@ -3951,7 +4087,7 @@ function $82d7e5349645de74$var$SelectValue(props, ref) {
 /**
  * SelectValue renders the current value of a Select, or a placeholder if no value is selected.
  * It is usually placed within the button element.
- */ const $82d7e5349645de74$export$e288731fd71264f0 = (0, $dGqE5$forwardRef)($82d7e5349645de74$var$SelectValue);
+ */ const $82d7e5349645de74$export$e288731fd71264f0 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($82d7e5349645de74$var$SelectValue);
@@ -3991,6 +4127,8 @@ function $6f909507e6374d18$var$Slider(props, ref) {
         values: state,
         defaultClassName: "react-aria-Slider"
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
         values: [
             [
@@ -4011,6 +4149,7 @@ function $6f909507e6374d18$var$Slider(props, ref) {
             ]
         ]
     }, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
+        ...DOMProps,
         ...groupProps,
         ...renderProps,
         ref: ref,
@@ -4021,8 +4160,8 @@ function $6f909507e6374d18$var$Slider(props, ref) {
 }
 /**
  * A slider allows a user to select one or more values within a range.
- */ const $6f909507e6374d18$export$472062a354075cee = (0, $dGqE5$forwardRef)($6f909507e6374d18$var$Slider);
-function $6f909507e6374d18$var$SliderOutput({ children: children , style: style , className: className  }, ref) {
+ */ const $6f909507e6374d18$export$472062a354075cee = /*#__PURE__*/ (0, $dGqE5$forwardRef)($6f909507e6374d18$var$Slider);
+function $6f909507e6374d18$var$SliderOutput({ children: children , style: style , className: className , ...otherProps }, ref) {
     let { state: state , outputProps: outputProps  } = (0, $dGqE5$useContext)($6f909507e6374d18$var$InternalSliderContext);
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         className: className,
@@ -4033,7 +4172,7 @@ function $6f909507e6374d18$var$SliderOutput({ children: children , style: style
         values: state
     });
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("output", {
-        ...outputProps,
+        ...(0, $dGqE5$mergeProps)((0, $dGqE5$filterDOMProps)(otherProps), outputProps),
         ...renderProps,
         ref: ref
     });
@@ -4050,7 +4189,7 @@ function $6f909507e6374d18$var$SliderTrack(props, ref) {
         values: state
     });
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...trackProps,
+        ...(0, $dGqE5$mergeProps)((0, $dGqE5$filterDOMProps)(props), trackProps),
         ...renderProps,
         ref: domRef
     });
@@ -4084,8 +4223,10 @@ function $6f909507e6374d18$var$SliderThumb(props, ref) {
             isDisabled: isDisabled
         }
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...(0, $dGqE5$mergeProps)(thumbProps, hoverProps),
+        ...(0, $dGqE5$mergeProps)(DOMProps, thumbProps, hoverProps),
         ...renderProps,
         ref: ref,
         style: {
@@ -4131,6 +4272,7 @@ function $6f909507e6374d18$var$SliderThumb(props, ref) {
 const $8e59e948500a8fe1$export$8699e3b644d5a28a = /*#__PURE__*/ (0, $dGqE5$createContext)(null);
 function $8e59e948500a8fe1$var$Switch(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $8e59e948500a8fe1$export$8699e3b644d5a28a);
@@ -4167,8 +4309,10 @@ function $8e59e948500a8fe1$var$Switch(props, ref) {
             isReadOnly: isReadOnly
         }
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("label", {
-        ...(0, $dGqE5$mergeProps)(pressProps, hoverProps, renderProps),
+        ...(0, $dGqE5$mergeProps)(DOMProps, pressProps, hoverProps, renderProps),
         slot: props.slot,
         "data-selected": isSelected || undefined,
         "data-pressed": pressed || undefined,
@@ -4408,7 +4552,7 @@ function $1910c06f0ca9905e$var$Table(props, ref) {
             [
                 (0, $d8f176866e6dc039$export$f55761759794cf55),
                 {
-                    render: $1910c06f0ca9905e$var$TableDropIndicator
+                    render: $1910c06f0ca9905e$var$TableDropIndicatorWrapper
                 }
             ]
         ]
@@ -4438,7 +4582,7 @@ const $1910c06f0ca9905e$var$TableOptionsContext = /*#__PURE__*/ (0, $dGqE5$creat
 function $1910c06f0ca9905e$export$fddc468cd8cb4db9() {
     return (0, $dGqE5$useContext)($1910c06f0ca9905e$var$TableOptionsContext);
 }
-function $1910c06f0ca9905e$export$f850895b287ef28e(props) {
+function $1910c06f0ca9905e$var$TableHeader(props, ref) {
     let children = (0, $7135fc7d473fd974$export$901dbff4e54a6dd0)({
         children: props.children,
         items: props.columns
@@ -4447,10 +4591,13 @@ function $1910c06f0ca9905e$export$f850895b287ef28e(props) {
     return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $7135fc7d473fd974$export$4feb769f8ddf26c5).Provider, {
         value: renderer
     }, /*#__PURE__*/ (0, $dGqE5$react).createElement("tableheader", {
-        multiple: props
+        ref: (0, $7135fc7d473fd974$export$636783d3732b5559)(props, ref)
     }, children));
 }
-function $1910c06f0ca9905e$export$816b5d811295e6bc(props) {
+/**
+ * A header within a `<Table>`, containing the table columns.
+ */ const $1910c06f0ca9905e$export$f850895b287ef28e = /*#__PURE__*/ (0, $dGqE5$forwardRef)($1910c06f0ca9905e$var$TableHeader);
+function $1910c06f0ca9905e$var$Column(props, ref) {
     let render = (0, $dGqE5$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
     let childColumns = typeof render === "function" ? render : props.children;
     let children = (0, $7135fc7d473fd974$export$901dbff4e54a6dd0)({
@@ -4460,20 +4607,23 @@ function $1910c06f0ca9905e$export$816b5d811295e6bc(props) {
     var _props_title;
     // @ts-ignore
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("column", {
-        multiple: {
-            ...props,
-            rendered: (_props_title = props.title) !== null && _props_title !== void 0 ? _props_title : props.children
-        }
+        ref: (0, $7135fc7d473fd974$export$636783d3732b5559)(props, ref, (_props_title = props.title) !== null && _props_title !== void 0 ? _props_title : props.children)
     }, children);
 }
-function $1910c06f0ca9905e$export$76ccd210b9029917(props) {
+/**
+ * A column within a `<Table>`.
+ */ const $1910c06f0ca9905e$export$816b5d811295e6bc = /*#__PURE__*/ (0, $dGqE5$forwardRef)($1910c06f0ca9905e$var$Column);
+function $1910c06f0ca9905e$var$TableBody(props, ref) {
     let children = (0, $7135fc7d473fd974$export$901dbff4e54a6dd0)(props);
     // @ts-ignore
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("tablebody", {
-        multiple: props
+        ref: (0, $7135fc7d473fd974$export$636783d3732b5559)(props, ref)
     }, children);
 }
-function $1910c06f0ca9905e$export$b59bdbef9ce70de2(props) {
+/**
+ * The body of a `<Table>`, containing the table rows.
+ */ const $1910c06f0ca9905e$export$76ccd210b9029917 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($1910c06f0ca9905e$var$TableBody);
+function $1910c06f0ca9905e$var$Row(props, ref) {
     let children = (0, $7135fc7d473fd974$export$901dbff4e54a6dd0)({
         children: props.children,
         items: props.columns,
@@ -4486,20 +4636,23 @@ function $1910c06f0ca9905e$export$b59bdbef9ce70de2(props) {
     ]);
     return(// @ts-ignore
     /*#__PURE__*/ (0, $dGqE5$react).createElement("item", {
-        multiple: props
+        ref: (0, $7135fc7d473fd974$export$636783d3732b5559)(props, ref)
     }, /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $7135fc7d473fd974$export$db36075d98ba73d3).Provider, {
         value: ctx
     }, children)));
 }
-function $1910c06f0ca9905e$export$f6f0c3fe4ec306ea(props) {
+/**
+ * A row within a `<Table>`.
+ */ const $1910c06f0ca9905e$export$b59bdbef9ce70de2 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($1910c06f0ca9905e$var$Row);
+function $1910c06f0ca9905e$var$Cell(props, ref) {
     // @ts-ignore
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("cell", {
-        multiple: {
-            ...props,
-            rendered: props.children
-        }
+        ref: (0, $7135fc7d473fd974$export$636783d3732b5559)(props, ref, props.children)
     });
 }
+/**
+ * A cell within a table row.
+ */ const $1910c06f0ca9905e$export$f6f0c3fe4ec306ea = /*#__PURE__*/ (0, $dGqE5$forwardRef)($1910c06f0ca9905e$var$Cell);
 function $1910c06f0ca9905e$var$TableHeaderRowGroup({ collection: collection  }) {
     let headerRows = (0, $7135fc7d473fd974$export$727c8fc270210f13)({
         items: collection.headerRows,
@@ -4519,6 +4672,7 @@ function $1910c06f0ca9905e$var$TableHeaderRowGroup({ collection: collection  })
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("thead", {
         ...(0, $dGqE5$filterDOMProps)(collection.head.props),
         ...rowGroupProps,
+        ref: collection.head.props.ref,
         className: (_collection_head_props_className = collection.head.props.className) !== null && _collection_head_props_className !== void 0 ? _collection_head_props_className : "react-aria-TableHeader",
         style: collection.head.props.style
     }, headerRows);
@@ -4556,8 +4710,9 @@ function $1910c06f0ca9905e$var$TableBodyRowGroup({ collection: collection , isDr
     }, props.renderEmptyState()));
     let { rowGroupProps: rowGroupProps  } = (0, $dGqE5$useTableRowGroup)();
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("tbody", {
+        ...(0, $dGqE5$mergeProps)((0, $dGqE5$filterDOMProps)(props), rowGroupProps),
         ...renderProps,
-        ...rowGroupProps,
+        ref: collection.body.props.ref,
         "data-empty": collection.size === 0 || undefined
     }, isDroppable && /*#__PURE__*/ (0, $dGqE5$react).createElement($1910c06f0ca9905e$var$RootDropIndicator, null), bodyRows, emptyState);
 }
@@ -4599,7 +4754,7 @@ function $1910c06f0ca9905e$var$TableHeaderRow({ item: item  }) {
 }
 function $1910c06f0ca9905e$var$TableColumnHeader({ column: column  }) {
     var _state_sortDescriptor;
-    let ref = (0, $dGqE5$useRef)(null);
+    let ref = (0, $dGqE5$useObjectRef)(column.props.ref);
     let { state: state  } = (0, $dGqE5$useContext)($1910c06f0ca9905e$var$InternalTableContext);
     let { columnHeaderProps: columnHeaderProps  } = (0, $dGqE5$useTableColumnHeader)({
         node: column
@@ -4619,7 +4774,7 @@ function $1910c06f0ca9905e$var$TableColumnHeader({ column: column  }) {
         }
     });
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("th", {
-        ...(0, $dGqE5$mergeProps)(columnHeaderProps, focusProps),
+        ...(0, $dGqE5$mergeProps)((0, $dGqE5$filterDOMProps)(props), columnHeaderProps, focusProps),
         ...renderProps,
         colSpan: column.colspan,
         ref: ref,
@@ -4628,7 +4783,7 @@ function $1910c06f0ca9905e$var$TableColumnHeader({ column: column  }) {
     }, renderProps.children);
 }
 function $1910c06f0ca9905e$var$TableRow({ item: item  }) {
-    let ref = (0, $dGqE5$useRef)(null);
+    let ref = (0, $dGqE5$useObjectRef)(item.props.ref);
     let { state: state , dragAndDropHooks: dragAndDropHooks , dragState: dragState , dropState: dropState  } = (0, $dGqE5$useContext)($1910c06f0ca9905e$var$InternalTableContext);
     let { rowProps: rowProps , ...states } = (0, $dGqE5$useTableRow)({
         node: item,
@@ -4715,7 +4870,7 @@ function $1910c06f0ca9905e$var$TableRow({ item: item  }) {
         ...dropIndicator.dropIndicatorProps,
         ref: dropIndicatorRef
     }))), /*#__PURE__*/ (0, $dGqE5$react).createElement("tr", {
-        ...(0, $dGqE5$mergeProps)(rowProps, focusProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
+        ...(0, $dGqE5$mergeProps)((0, $dGqE5$filterDOMProps)(props), rowProps, focusProps, hoverProps, draggableItem === null || draggableItem === void 0 ? void 0 : draggableItem.dragProps),
         ...renderProps,
         ref: ref,
         "data-hovered": isHovered || undefined,
@@ -4757,7 +4912,7 @@ function $1910c06f0ca9905e$var$TableRow({ item: item  }) {
     }));
 }
 function $1910c06f0ca9905e$var$TableCell({ cell: cell  }) {
-    let ref = (0, $dGqE5$useRef)(null);
+    let ref = (0, $dGqE5$useObjectRef)(cell.props.ref);
     let { state: state , dragState: dragState  } = (0, $dGqE5$useContext)($1910c06f0ca9905e$var$InternalTableContext);
     // @ts-ignore
     cell.column = state.collection.columns[cell.index];
@@ -4778,30 +4933,41 @@ function $1910c06f0ca9905e$var$TableCell({ cell: cell  }) {
         }
     });
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("td", {
-        ...(0, $dGqE5$mergeProps)(gridCellProps, focusProps),
+        ...(0, $dGqE5$mergeProps)((0, $dGqE5$filterDOMProps)(props), gridCellProps, focusProps),
         ...renderProps,
         ref: ref,
         "data-focused": isFocused || undefined,
         "data-focus-visible": isFocusVisible || undefined,
         "data-pressed": isPressed || undefined
-    }, cell.rendered);
+    }, renderProps.children);
 }
-function $1910c06f0ca9905e$var$TableDropIndicator(props, ref) {
+function $1910c06f0ca9905e$var$TableDropIndicatorWrapper(props, ref) {
     ref = (0, $dGqE5$useObjectRef)(ref);
-    let { state: state , dragAndDropHooks: dragAndDropHooks , dropState: dropState  } = (0, $dGqE5$useContext)($1910c06f0ca9905e$var$InternalTableContext);
+    let { dragAndDropHooks: dragAndDropHooks , dropState: dropState  } = (0, $dGqE5$useContext)($1910c06f0ca9905e$var$InternalTableContext);
     let buttonRef = (0, $dGqE5$useRef)(null);
     let { dropIndicatorProps: dropIndicatorProps , isHidden: isHidden , isDropTarget: isDropTarget  } = dragAndDropHooks.useDropIndicator(props, dropState, buttonRef);
-    let { visuallyHiddenProps: visuallyHiddenProps  } = (0, $dGqE5$useVisuallyHidden)();
     if (isHidden) return null;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+    return /*#__PURE__*/ (0, $dGqE5$react).createElement($1910c06f0ca9905e$var$TableDropIndicatorForwardRef, {
         ...props,
+        dropIndicatorProps: dropIndicatorProps,
+        isDropTarget: isDropTarget,
+        buttonRef: buttonRef,
+        ref: ref
+    });
+}
+function $1910c06f0ca9905e$var$TableDropIndicator(props, ref) {
+    let { dropIndicatorProps: dropIndicatorProps , isDropTarget: isDropTarget , buttonRef: buttonRef , ...otherProps } = props;
+    let { state: state  } = (0, $dGqE5$useContext)($1910c06f0ca9905e$var$InternalTableContext);
+    let { visuallyHiddenProps: visuallyHiddenProps  } = (0, $dGqE5$useVisuallyHidden)();
+    let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
+        ...otherProps,
         defaultClassName: "react-aria-DropIndicator",
         values: {
             isDropTarget: isDropTarget
         }
     });
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("tr", {
+        ...(0, $dGqE5$filterDOMProps)(props),
         ...renderProps,
         role: "row",
         ref: ref,
@@ -4819,6 +4985,7 @@ function $1910c06f0ca9905e$var$TableDropIndicator(props, ref) {
         ref: buttonRef
     })));
 }
+const $1910c06f0ca9905e$var$TableDropIndicatorForwardRef = /*#__PURE__*/ (0, $dGqE5$forwardRef)($1910c06f0ca9905e$var$TableDropIndicator);
 function $1910c06f0ca9905e$var$RootDropIndicator() {
     let { state: state , dragAndDropHooks: dragAndDropHooks , dropState: dropState  } = (0, $dGqE5$useContext)($1910c06f0ca9905e$var$InternalTableContext);
     let ref = (0, $dGqE5$useRef)(null);
@@ -4874,15 +5041,19 @@ const $5e8ad37a45e1c704$var$InternalTabsContext = /*#__PURE__*/ (0, $dGqE5$creat
 function $5e8ad37a45e1c704$var$Tabs(props, ref) {
     [props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f);
     let { orientation: orientation = "horizontal"  } = props;
+    let values = (0, $dGqE5$useMemo)(()=>({
+            orientation: orientation
+        }), [
+        orientation
+    ]);
     let [state, setState] = (0, $dGqE5$useState)(null);
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
         ...props,
         defaultClassName: "react-aria-Tabs",
-        values: {
-            orientation: orientation
-        }
+        values: values
     });
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
+        ...(0, $dGqE5$filterDOMProps)(props),
         ...renderProps,
         ref: ref,
         slot: props.slot,
@@ -4893,7 +5064,7 @@ function $5e8ad37a45e1c704$var$Tabs(props, ref) {
             setState: setState,
             orientation: orientation
         }
-    }, props.children));
+    }, renderProps.children));
 }
 /**
  * Tabs organize content into multiple sections and allow users to navigate between them.
@@ -4926,7 +5097,10 @@ function $5e8ad37a45e1c704$var$TabList(props, ref) {
             orientation: orientation
         }
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $dGqE5$react).Fragment, null, /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
+        ...DOMProps,
         ...tabListProps,
         ref: objectRef,
         ...renderProps
@@ -4941,14 +5115,20 @@ function $5e8ad37a45e1c704$var$TabList(props, ref) {
 /**
  * A TabList is used within Tabs to group tabs that a user can switch between.
  * The ids of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.
- */ const $5e8ad37a45e1c704$export$e51a686c67fdaa2d = (0, $dGqE5$forwardRef)($5e8ad37a45e1c704$var$TabList);
-function $5e8ad37a45e1c704$export$3e41faf802a29e71(props) {
+ */ const $5e8ad37a45e1c704$export$e51a686c67fdaa2d = /*#__PURE__*/ (0, $dGqE5$forwardRef)($5e8ad37a45e1c704$var$TabList);
+function $5e8ad37a45e1c704$var$Tab(props, ref) {
     // @ts-ignore
-    return (0, $7135fc7d473fd974$export$6d08773d2e66f8f2)(props);
+    return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $7135fc7d473fd974$export$6d08773d2e66f8f2), {
+        ...props,
+        ref: ref
+    });
 }
+/**
+ * A Tab provides a title for an individual item within a TabList.
+ */ const $5e8ad37a45e1c704$export$3e41faf802a29e71 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($5e8ad37a45e1c704$var$Tab);
 function $5e8ad37a45e1c704$var$TabInner({ item: item , state: state  }) {
     let { key: key  } = item;
-    let ref = (0, $dGqE5$react).useRef(null);
+    let ref = (0, $dGqE5$useObjectRef)(item.props.ref);
     let { tabProps: tabProps , isSelected: isSelected , isDisabled: isDisabled , isPressed: isPressed  } = (0, $dGqE5$useTab)({
         key: key
     }, state, ref);
@@ -4969,8 +5149,10 @@ function $5e8ad37a45e1c704$var$TabInner({ item: item , state: state  }) {
             isHovered: isHovered
         }
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(item.props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...(0, $dGqE5$mergeProps)(tabProps, focusProps, hoverProps, renderProps),
+        ...(0, $dGqE5$mergeProps)(DOMProps, tabProps, focusProps, hoverProps, renderProps),
         ref: ref,
         "data-focus-visible": isFocusVisible || undefined,
         "data-pressed": isPressed || undefined,
@@ -4985,12 +5167,18 @@ function $5e8ad37a45e1c704$export$5dae8d435677f210(props) {
         item: selectedItem
     }), portal);
 }
-function $5e8ad37a45e1c704$export$3d96ec278d3efce4(props) {
-    return (0, $7135fc7d473fd974$export$6d08773d2e66f8f2)(props);
+function $5e8ad37a45e1c704$var$TabPanel(props, ref) {
+    return /*#__PURE__*/ (0, $dGqE5$react).createElement((0, $7135fc7d473fd974$export$6d08773d2e66f8f2), {
+        ...props,
+        ref: ref
+    });
 }
+/**
+ * A TabPanel provides the content for a tab.
+ */ const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /*#__PURE__*/ (0, $dGqE5$forwardRef)($5e8ad37a45e1c704$var$TabPanel);
 function $5e8ad37a45e1c704$var$SelectedTabPanel({ item: item  }) {
     const { state: state  } = (0, $dGqE5$useContext)($5e8ad37a45e1c704$var$InternalTabsContext);
-    let ref = (0, $dGqE5$react).useRef(null);
+    let ref = (0, $dGqE5$useObjectRef)(item.props.ref);
     let { tabPanelProps: tabPanelProps  } = (0, $dGqE5$useTabPanel)(item.props, state, ref);
     let { focusProps: focusProps , isFocused: isFocused , isFocusVisible: isFocusVisible  } = (0, $dGqE5$useFocusRing)();
     let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
@@ -5002,8 +5190,10 @@ function $5e8ad37a45e1c704$var$SelectedTabPanel({ item: item  }) {
             isFocusVisible: isFocusVisible
         }
     });
+    let DOMProps = (0, $dGqE5$filterDOMProps)(item.props);
+    delete DOMProps.id;
     return /*#__PURE__*/ (0, $dGqE5$react).createElement("div", {
-        ...(0, $dGqE5$mergeProps)(tabPanelProps, focusProps, renderProps),
+        ...(0, $dGqE5$mergeProps)(DOMProps, tabPanelProps, focusProps, renderProps),
         ref: ref,
         "data-focus-visible": isFocusVisible || undefined
     });