@octanejs/base-ui 0.1.53 → 0.1.55

package/src/menu/radio-group/MenuRadioGroup.tsrx

@@ -75,9 +75,9 @@ export const MenuRadioGroup = React.memo(function MenuRadioGroup(
 	);
 
 	return (
-		<MenuGroupContext.Provider value={setLabelId}>
-			<MenuRadioGroupContext.Provider value={context}>{element}</MenuRadioGroupContext.Provider>
-		</MenuGroupContext.Provider>
+		<MenuGroupContext value={setLabelId}>
+			<MenuRadioGroupContext value={context}>{element}</MenuRadioGroupContext>
+		</MenuGroupContext>
 	);
 });
 

package/src/menu/radio-item/MenuRadioItem.tsrx

@@ -101,7 +101,7 @@ export const MenuRadioItem = function MenuRadioItem(
 		ref: [itemRef, forwardedRef, listItem.ref],
 	});
 
-	return <MenuRadioItemContext.Provider value={state}>{element}</MenuRadioItemContext.Provider>;
+	return <MenuRadioItemContext value={state}>{element}</MenuRadioItemContext>;
 };
 
 export interface MenuRadioItemState {

package/src/menu/root/MenuRoot.tsrx

@@ -93,7 +93,7 @@ export const MenuRoot = fastComponent(function MenuRoot<Payload>(props: MenuRoot
 
 		// Ensure this is not a Menu nested inside ContextMenu.Trigger.
 		// ContextMenu parentContext is always undefined as ContextMenu.Root is instantiated with
-		// <MenuRootContext.Provider value={undefined}>
+		// <MenuRootContext value={undefined}>
 		if (contextMenuContext && !parentMenuRootContext) {
 			return {
 				type: 'context-menu',
@@ -632,12 +632,12 @@ export const MenuRoot = fastComponent(function MenuRoot<Payload>(props: MenuRoot
 	);
 
 	const content = (
-		<MenuRootContext.Provider value={context as MenuRootContext}>
+		<MenuRootContext value={context as MenuRootContext}>
 			{handle && <PopupHandleAttachment handle={handle} store={store} />}
 			{typeof children === 'function' && !React.isChildrenBlock(children)
 				? children({ payload })
 				: children}
-		</MenuRootContext.Provider>
+		</MenuRootContext>
 	);
 
 	if (parent.type === undefined || parent.type === 'context-menu') {

package/src/menu/submenu-root/MenuSubmenuRoot.tsrx

@@ -18,9 +18,9 @@ export function MenuSubmenuRoot(props: MenuSubmenuRoot.Props) {
 	const contextValue = React.useMemo(() => ({ parentMenu }), [parentMenu]);
 
 	return (
-		<MenuSubmenuRootContext.Provider value={contextValue}>
+		<MenuSubmenuRootContext value={contextValue}>
 			<MenuRoot {...props} />
-		</MenuSubmenuRootContext.Provider>
+		</MenuSubmenuRootContext>
 	);
 }
 

package/src/menubar/Menubar.tsrx

@@ -73,7 +73,7 @@ export const Menubar = function Menubar(
 	);
 
 	return (
-		<MenubarContext.Provider value={context}>
+		<MenubarContext value={context}>
 			<FloatingTree>
 				<MenubarContent>
 					<CompositeRoot
@@ -91,7 +91,7 @@ export const Menubar = function Menubar(
 					/>
 				</MenubarContent>
 			</FloatingTree>
-		</MenubarContext.Provider>
+		</MenubarContext>
 	);
 };
 

package/src/meter/root/MeterRoot.tsrx

@@ -84,7 +84,7 @@ export const MeterRoot = function MeterRoot(
 		props: [defaultProps, elementProps],
 	});
 
-	return <MeterRootContext.Provider value={contextValue}>{element}</MeterRootContext.Provider>;
+	return <MeterRootContext value={contextValue}>{element}</MeterRootContext>;
 };
 
 export interface MeterRootState {}

package/src/navigation-menu/item/NavigationMenuItem.tsrx

@@ -32,11 +32,7 @@ export const NavigationMenuItem = function NavigationMenuItem(
 
 	const contextValue: NavigationMenuItemContextValue = React.useMemo(() => ({ value }), [value]);
 
-	return (
-		<NavigationMenuItemContext.Provider value={contextValue}>
-			{element}
-		</NavigationMenuItemContext.Provider>
-	);
+	return <NavigationMenuItemContext value={contextValue}>{element}</NavigationMenuItemContext>;
 };
 
 export interface NavigationMenuItemState {}

package/src/navigation-menu/list/NavigationMenuList.tsrx

@@ -103,14 +103,12 @@ export const NavigationMenuList = function NavigationMenuList(
 
 	if (nested) {
 		return (
-			<NavigationMenuDismissContext.Provider value={dismissProps}>
-				{element}
-			</NavigationMenuDismissContext.Provider>
+			<NavigationMenuDismissContext value={dismissProps}>{element}</NavigationMenuDismissContext>
 		);
 	}
 
 	return (
-		<NavigationMenuDismissContext.Provider value={dismissProps}>
+		<NavigationMenuDismissContext value={dismissProps}>
 			<CompositeRoot
 				render={render}
 				className={className}
@@ -122,7 +120,7 @@ export const NavigationMenuList = function NavigationMenuList(
 				orientation={orientation}
 				tag="ul"
 			/>
-		</NavigationMenuDismissContext.Provider>
+		</NavigationMenuDismissContext>
 	);
 };
 

package/src/navigation-menu/portal/NavigationMenuPortal.tsrx

@@ -28,9 +28,9 @@ export const NavigationMenuPortal = function NavigationMenuPortal(
 	}
 
 	return (
-		<NavigationMenuPortalContext.Provider value={keepMounted}>
+		<NavigationMenuPortalContext value={keepMounted}>
 			<FloatingPortal ref={forwardedRef} {...portalProps} />
-		</NavigationMenuPortalContext.Provider>
+		</NavigationMenuPortalContext>
 	);
 };
 

package/src/navigation-menu/positioner/NavigationMenuPositioner.tsrx

@@ -179,9 +179,7 @@ export const NavigationMenuPositioner = function NavigationMenuPositioner(
 	});
 
 	return (
-		<NavigationMenuPositionerContext.Provider value={positioning}>
-			{element}
-		</NavigationMenuPositionerContext.Provider>
+		<NavigationMenuPositionerContext value={positioning}>{element}</NavigationMenuPositionerContext>
 	);
 };
 

package/src/navigation-menu/root/NavigationMenuRoot.tsrx

@@ -295,11 +295,11 @@ export const NavigationMenuRoot = function NavigationMenuRoot<Value = any>(
 	);
 
 	const jsx = (
-		<NavigationMenuRootContext.Provider value={contextValue}>
+		<NavigationMenuRootContext value={contextValue}>
 			<TreeContext componentProps={componentProps} forwardedRef={forwardedRef}>
 				{componentProps.children}
 			</TreeContext>
-		</NavigationMenuRootContext.Provider>
+		</NavigationMenuRootContext>
 	);
 
 	if (!nested) {
@@ -345,9 +345,9 @@ function TreeContext<Value>(props: {
 	});
 
 	return (
-		<NavigationMenuTreeContext.Provider value={nodeId}>
+		<NavigationMenuTreeContext value={nodeId}>
 			<FloatingNode id={nodeId}>{element}</FloatingNode>
-		</NavigationMenuTreeContext.Provider>
+		</NavigationMenuTreeContext>
 	);
 }
 

package/src/number-field/root/NumberFieldRoot.tsrx

@@ -491,7 +491,7 @@ export const NumberFieldRoot = function NumberFieldRoot(
 	});
 
 	return (
-		<NumberFieldRootContext.Provider value={contextValue}>
+		<NumberFieldRootContext value={contextValue}>
 			{element}
 			<input
 				{...validation.getValidationProps(disabled, {
@@ -534,7 +534,7 @@ export const NumberFieldRoot = function NumberFieldRoot(
 				style={name ? visuallyHiddenInput : visuallyHidden}
 				suppressHydrationWarning
 			/>
-		</NumberFieldRootContext.Provider>
+		</NumberFieldRootContext>
 	);
 };
 

package/src/number-field/scrub-area/NumberFieldScrubArea.tsrx

@@ -358,11 +358,7 @@ export const NumberFieldScrubArea = function NumberFieldScrubArea(
 		[isScrubbing, isTouchInput, isPointerLockDenied],
 	);
 
-	return (
-		<NumberFieldScrubAreaContext.Provider value={contextValue}>
-			{element}
-		</NumberFieldScrubAreaContext.Provider>
-	);
+	return <NumberFieldScrubAreaContext value={contextValue}>{element}</NumberFieldScrubAreaContext>;
 };
 
 export interface NumberFieldScrubAreaState extends NumberFieldRootState {}

package/src/otp-field/root/OTPFieldRoot.tsrx

@@ -399,7 +399,7 @@ export const OTPFieldRoot = function OTPFieldRoot(
 				setInputCount(newMap.size);
 			}}
 		>
-			<OTPFieldRootContext.Provider value={contextValue}>
+			<OTPFieldRootContext value={contextValue}>
 				{element}
 				{hasValidLength && (
 					<input
@@ -456,7 +456,7 @@ export const OTPFieldRoot = function OTPFieldRoot(
 						style={name ? visuallyHiddenInput : visuallyHidden}
 					/>
 				)}
-			</OTPFieldRootContext.Provider>
+			</OTPFieldRootContext>
 		</CompositeList>
 	);
 };

package/src/popover/popup/PopoverPopup.tsrx

@@ -121,7 +121,7 @@ export const PopoverPopup = function PopoverPopup(
 			nextFocusableElement={store.context.triggerFocusTargetRef}
 			beforeContentFocusGuardRef={store.context.beforeContentFocusGuardRef}
 		>
-			<ClosePartContext.Provider value={closePartContext}>{element}</ClosePartContext.Provider>
+			<ClosePartContext value={closePartContext}>{element}</ClosePartContext>
 		</FloatingFocusManager>
 	);
 };

package/src/popover/portal/PopoverPortal.tsrx

@@ -27,9 +27,9 @@ export const PopoverPortal = function PopoverPortal(
 	}
 
 	return (
-		<PopoverPortalContext.Provider value={keepMounted}>
+		<PopoverPortalContext value={keepMounted}>
 			<FloatingPortal ref={forwardedRef} {...portalProps} />
-		</PopoverPortalContext.Provider>
+		</PopoverPortalContext>
 	);
 };
 

package/src/popover/positioner/PopoverPositioner.tsrx

@@ -153,12 +153,12 @@ export const PopoverPositioner = function PopoverPositioner(
 	});
 
 	return (
-		<PopoverPositionerContext.Provider value={positioning}>
+		<PopoverPositionerContext value={positioning}>
 			{mounted && trueModalNonHover && (
 				<InternalBackdrop inert={inertValue(!open)} cutout={triggerElement} />
 			)}
 			<FloatingNode id={nodeId}>{element}</FloatingNode>
-		</PopoverPositionerContext.Provider>
+		</PopoverPositionerContext>
 	);
 };
 

package/src/popover/root/PopoverRoot.tsrx

@@ -83,13 +83,13 @@ const PopoverRootComponent = fastComponent(function PopoverRootComponent<Payload
 	const shouldRenderInteractions = open || mounted;
 
 	return (
-		<PopoverRootContext.Provider value={store as PopoverRootContext<unknown>}>
+		<PopoverRootContext value={store as PopoverRootContext<unknown>}>
 			{handle && <PopupHandleAttachment handle={handle} store={store} />}
 			{shouldRenderInteractions && <PopoverInteractions store={store} modal={modal} />}
 			{typeof children === 'function' && !React.isChildrenBlock(children)
 				? children({ payload })
 				: children}
-		</PopoverRootContext.Provider>
+		</PopoverRootContext>
 	);
 });
 

package/src/preview-card/portal/PreviewCardPortal.tsrx

@@ -29,9 +29,9 @@ export const PreviewCardPortal = function PreviewCardPortal(
 	}
 
 	return (
-		<PreviewCardPortalContext.Provider value={keepMounted}>
+		<PreviewCardPortalContext value={keepMounted}>
 			<FloatingPortalLite ref={forwardedRef} {...portalProps} />
-		</PreviewCardPortalContext.Provider>
+		</PreviewCardPortalContext>
 	);
 };
 

package/src/preview-card/positioner/PreviewCardPositioner.tsrx

@@ -105,9 +105,9 @@ export const PreviewCardPositioner = function PreviewCardPositioner(
 	});
 
 	return (
-		<PreviewCardPositionerContext.Provider value={positioning}>
+		<PreviewCardPositionerContext value={positioning}>
 			<FloatingNode id={nodeId}>{element}</FloatingNode>
-		</PreviewCardPositionerContext.Provider>
+		</PreviewCardPositionerContext>
 	);
 };
 

package/src/preview-card/root/PreviewCardRoot.tsrx

@@ -83,13 +83,13 @@ function PreviewCardRootComponent<Payload>(props: PreviewCardRoot.Props<Payload>
 	const shouldRenderInteractions = open || mounted;
 
 	return (
-		<PreviewCardRootContext.Provider value={store as PreviewCardRootContext}>
+		<PreviewCardRootContext value={store as PreviewCardRootContext}>
 			{handle && <PopupHandleAttachment handle={handle} store={store} />}
 			{shouldRenderInteractions && <PreviewCardInteractions store={store} />}
 			{typeof children === 'function' && !React.isChildrenBlock(children)
 				? children({ payload })
 				: children}
-		</PreviewCardRootContext.Provider>
+		</PreviewCardRootContext>
 	);
 }
 

package/src/progress/root/ProgressRoot.tsrx

@@ -100,9 +100,7 @@ export const ProgressRoot = function ProgressRoot(
 		stateAttributesMapping: progressStateAttributesMapping,
 	});
 
-	return (
-		<ProgressRootContext.Provider value={contextValue}>{element}</ProgressRootContext.Provider>
-	);
+	return <ProgressRootContext value={contextValue}>{element}</ProgressRootContext>;
 };
 
 export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete';

package/src/radio/root/RadioRoot.tsrx

@@ -248,7 +248,7 @@ export const RadioRoot = function RadioRoot<Value>(
 	});
 
 	return (
-		<RadioRootContext.Provider value={contextValue}>
+		<RadioRootContext value={contextValue}>
 			{isRadioGroup ? (
 				<CompositeItem
 					tag="span"
@@ -264,7 +264,7 @@ export const RadioRoot = function RadioRoot<Value>(
 				element
 			)}
 			<input {...inputProps} suppressHydrationWarning />
-		</RadioRootContext.Provider>
+		</RadioRootContext>
 	);
 };
 

package/src/radio-group/RadioGroup.tsrx

@@ -244,7 +244,7 @@ export const RadioGroup = function RadioGroup<Value>(
 	};
 
 	return (
-		<RadioGroupContext.Provider value={contextValue}>
+		<RadioGroupContext value={contextValue}>
 			<CompositeRoot
 				render={render}
 				className={className}
@@ -260,7 +260,7 @@ export const RadioGroup = function RadioGroup<Value>(
 				enableHomeAndEndKeys={false}
 				modifierKeys={MODIFIER_KEYS}
 			/>
-		</RadioGroupContext.Provider>
+		</RadioGroupContext>
 	);
 };
 

package/src/scroll-area/content/ScrollAreaContent.tsrx

@@ -23,32 +23,18 @@ export const ScrollAreaContent = function ScrollAreaContent(
 	const { render, className, style, ...elementProps } = componentProps;
 
 	const { computeThumbPosition } = useScrollAreaViewportContext();
-	const { hasMeasuredScrollbar, viewportState } = useScrollAreaRootContext();
+	const { viewportState } = useScrollAreaRootContext();
 
 	const contentWrapperRef = React.useRef<HTMLDivElement | null>(null);
-	const computeOnInitialResizeRef = React.useRef(hasMeasuredScrollbar);
 
 	useIsoLayoutEffect(() => {
 		if (typeof ResizeObserver === 'undefined') {
 			return undefined;
 		}
 
-		let hasInitialized = false;
-		const resizeObserver = new ResizeObserver(() => {
-			if (!hasInitialized) {
-				hasInitialized = true;
-
-				// ResizeObserver fires once upon observing. Skip that initial call to avoid
-				// double-calculating the thumb position on mount, unless the content mounted
-				// after the viewport's initial measurement (in which case this fire is what
-				// brings the overflow state in sync).
-				if (!computeOnInitialResizeRef.current) {
-					return;
-				}
-			}
-
-			computeThumbPosition();
-		});
+		// Deferred notifications can include a resize that happened after the mount
+		// measurement, so the first delivery must also recompute the current geometry.
+		const resizeObserver = React.createResizeObserver(computeThumbPosition);
 
 		if (contentWrapperRef.current) {
 			resizeObserver.observe(contentWrapperRef.current);

package/src/scroll-area/root/ScrollAreaRoot.tsrx

@@ -343,10 +343,10 @@ export const ScrollAreaRoot = function ScrollAreaRoot(
 	);
 
 	return (
-		<ScrollAreaRootContext.Provider value={contextValue}>
+		<ScrollAreaRootContext value={contextValue}>
 			{!disableStyleElements && styleDisableScrollbar.getElement(nonce)}
 			{element}
-		</ScrollAreaRootContext.Provider>
+		</ScrollAreaRootContext>
 	);
 };
 

package/src/scroll-area/scrollbar/ScrollAreaScrollbar.tsrx

@@ -231,11 +231,7 @@ export const ScrollAreaScrollbar = function ScrollAreaScrollbar(
 		return null;
 	}
 
-	return (
-		<ScrollAreaScrollbarContext.Provider value={orientation}>
-			{element}
-		</ScrollAreaScrollbarContext.Provider>
-	);
+	return <ScrollAreaScrollbarContext value={orientation}>{element}</ScrollAreaScrollbarContext>;
 };
 
 export interface ScrollAreaScrollbarState extends ScrollAreaRootState {

package/src/scroll-area/viewport/ScrollAreaViewport.tsrx

@@ -313,7 +313,7 @@ export const ScrollAreaViewport = function ScrollAreaViewport(
 		}
 
 		let hasInitialized = false;
-		const resizeObserver = new ResizeObserver(() => {
+		const resizeObserver = React.createResizeObserver(() => {
 			// Avoid duplicate mount-time recompute when observer data matches what the mount
 			// scheduling pass already measured. If dimensions changed before the first observer
 			// delivery, keep the recompute so overflow transitions stay in sync.
@@ -420,11 +420,7 @@ export const ScrollAreaViewport = function ScrollAreaViewport(
 		[computeThumbPosition],
 	);
 
-	return (
-		<ScrollAreaViewportContext.Provider value={contextValue}>
-			{element}
-		</ScrollAreaViewportContext.Provider>
-	);
+	return <ScrollAreaViewportContext value={contextValue}>{element}</ScrollAreaViewportContext>;
 };
 
 export interface ScrollAreaViewportProps extends BaseUIComponentProps<

package/src/select/group/SelectGroup.tsrx

@@ -39,7 +39,7 @@ export const SelectGroup = function SelectGroup(
 		],
 	});
 
-	return <SelectGroupContext.Provider value={contextValue}>{element}</SelectGroupContext.Provider>;
+	return <SelectGroupContext value={contextValue}>{element}</SelectGroupContext>;
 };
 
 export interface SelectGroupState {}

package/src/select/item/SelectItem.tsrx

@@ -246,7 +246,7 @@ export const SelectItem = React.memo(function SelectItem(
 		[selected, index, textRef, selectedByFocus],
 	);
 
-	return <SelectItemContext.Provider value={contextValue}>{element}</SelectItemContext.Provider>;
+	return <SelectItemContext value={contextValue}>{element}</SelectItemContext>;
 });
 
 export interface SelectItemState {

package/src/select/positioner/SelectPositioner.tsrx

@@ -226,10 +226,10 @@ export const SelectPositioner = function SelectPositioner(
 			labelsRef={store.context.labelsRef}
 			onMapChange={onMapChange}
 		>
-			<SelectPositionerContext.Provider value={contextValue}>
+			<SelectPositionerContext value={contextValue}>
 				{mounted && modal && <InternalBackdrop inert={inertValue(!open)} cutout={triggerElement} />}
 				{element}
-			</SelectPositionerContext.Provider>
+			</SelectPositionerContext>
 		</CompositeList>
 	);
 };

package/src/select/root/SelectRoot.tsrx

@@ -499,12 +499,10 @@ export function SelectRoot<Value, Multiple extends boolean | undefined = false>(
 	}, [multiple, value, form, name, itemToStringValue, disabled]);
 
 	return (
-		<SelectRootContext.Provider value={store}>
-			<SelectRootPropsContext.Provider value={rootPropsContextValue}>
-				<SelectFloatingContext.Provider value={floatingContext}>
-					{children}
-				</SelectFloatingContext.Provider>
-			</SelectRootPropsContext.Provider>
+		<SelectRootContext value={store}>
+			<SelectRootPropsContext value={rootPropsContextValue}>
+				<SelectFloatingContext value={floatingContext}>{children}</SelectFloatingContext>
+			</SelectRootPropsContext>
 			<input
 				{...validation.getValidationProps(disabled, {
 					onFocus() {
@@ -574,7 +572,7 @@ export function SelectRoot<Value, Multiple extends boolean | undefined = false>(
 				suppressHydrationWarning
 			/>
 			{hiddenInputs}
-		</SelectRootContext.Provider>
+		</SelectRootContext>
 	);
 }
 

package/src/select/value/SelectValue.tsrx

@@ -49,7 +49,7 @@ export const SelectValue = function SelectValue(
 		placeholder: !hasSelectedValue,
 	};
 
-	let children = null;
+	let children: React.OctaneNode = null;
 	if (typeof childrenProp === 'function' && !React.isChildrenBlock(childrenProp)) {
 		children = childrenProp(value);
 	} else if (childrenProp != null) {

package/src/slider/root/SliderRoot.tsrx

@@ -390,11 +390,11 @@ export const SliderRoot = function SliderRoot<Value extends number | readonly nu
 	});
 
 	return (
-		<SliderRootContext.Provider value={contextValue}>
+		<SliderRootContext value={contextValue}>
 			<CompositeList elementsRef={thumbRefs} onMapChange={setThumbMap}>
 				{element}
 			</CompositeList>
-		</SliderRootContext.Provider>
+		</SliderRootContext>
 	);
 };
 

package/src/slider/thumb/SliderThumb.tsrx

@@ -259,7 +259,7 @@ export const SliderThumb = function SliderThumb(
 			return undefined;
 		}
 
-		const resizeObserver = new ResizeObserverCtor(getInsetPosition);
+		const resizeObserver = React.createResizeObserver(getInsetPosition, ResizeObserverCtor);
 
 		resizeObserver.observe(control);
 		resizeObserver.observe(thumb);
@@ -375,7 +375,7 @@ export const SliderThumb = function SliderThumb(
 					event.stopPropagation();
 				}
 
-				let newValue = null;
+				let newValue: number | null = null;
 				let direction = 0;
 				let increment = event.shiftKey ? largeStep : step;
 				const roundedValue = roundValueToStep(thumbValue, step, min);

package/src/switch/root/SwitchRoot.tsrx

@@ -229,13 +229,13 @@ export const SwitchRoot = function SwitchRoot(
 	});
 
 	return (
-		<SwitchRootContext.Provider value={state}>
+		<SwitchRootContext value={state}>
 			{element}
 			{!checked && name && uncheckedValue !== undefined && (
 				<input type="hidden" form={form} name={name} value={uncheckedValue} disabled={disabled} />
 			)}
 			<input {...inputProps} suppressHydrationWarning />
-		</SwitchRootContext.Provider>
+		</SwitchRootContext>
 	);
 };
 

package/src/tabs/list/TabsList.tsrx

@@ -45,7 +45,7 @@ export const TabsList = function TabsList(
 			return undefined;
 		}
 
-		const resizeObserver = new ResizeObserver(() => {
+		const resizeObserver = React.createResizeObserver(() => {
 			indicatorUpdateListenersRef.current.forEach((listener) => {
 				listener();
 			});
@@ -109,7 +109,7 @@ export const TabsList = function TabsList(
 	);
 
 	return (
-		<TabsListContext.Provider value={tabsListContextValue}>
+		<TabsListContext value={tabsListContextValue}>
 			<CompositeRoot
 				render={render}
 				className={className}
@@ -126,7 +126,7 @@ export const TabsList = function TabsList(
 				onMapChange={setTabMap}
 				disabledIndices={EMPTY_ARRAY}
 			/>
-		</TabsListContext.Provider>
+		</TabsListContext>
 	);
 };
 

package/src/tabs/root/TabsRoot.tsrx

@@ -345,9 +345,9 @@ export const TabsRoot = function TabsRoot(
 	});
 
 	return (
-		<TabsRootContext.Provider value={tabsContextValue}>
+		<TabsRootContext value={tabsContextValue}>
 			<CompositeList<TabsPanel.Metadata> elementsRef={tabPanelRefs}>{element}</CompositeList>
-		</TabsRootContext.Provider>
+		</TabsRootContext>
 	);
 };
 

package/src/toast/content/ToastContent.tsrx

@@ -31,7 +31,7 @@ export const ToastContent = function ToastContent(
 			return undefined;
 		}
 
-		const resizeObserver = new ResizeObserver(() => recalculateHeight(true));
+		const resizeObserver = React.createResizeObserver(() => recalculateHeight(true));
 		const mutationObserver = new MutationObserver(() => recalculateHeight(true));
 
 		resizeObserver.observe(node);