@primer/react 38.35.1-rc.f5a561aea → 38.36.0-rc.3fb350b1f

package/CHANGELOG.md

@@ -1,11 +1,20 @@
 # @primer/react
 
+## 38.36.0
+
+### Minor Changes
+
+- [#8212](https://github.com/primer/react/pull/8212) [`9ac9343`](https://github.com/primer/react/commit/9ac9343a70fd0f70413a42cd27baf562a74dd4fc) Thanks [@mattcosta7](https://github.com/mattcosta7)! - ThemeProvider: Add a CSS-variable-based implementation to `@primer/react/next`
+  and deprecate the legacy JavaScript theme implementation.
+
 ## 38.35.1
 
 ### Patch Changes
 
 - [#8258](https://github.com/primer/react/pull/8258) [`edbcd94`](https://github.com/primer/react/commit/edbcd942354ff45148c2623be8b543ef8789a20f) Thanks [@llastflowers](https://github.com/llastflowers)! - Update `AvatarStack` to not reserve space when collapsed
 
+- [#8273](https://github.com/primer/react/pull/8273) [`0c1e401`](https://github.com/primer/react/commit/0c1e401b6b0d57f95f8115ea90af78281751a766) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - NavList: Exclude group headings from navigation list item counts
+
 ## 38.35.0
 
 ### Minor Changes

package/dist/ActionBar/ActionBar.js

@@ -133,14 +133,15 @@ const ActionBarIconButton = /*#__PURE__*/ forwardRef(({ disabled, onClick, ...pr
 		disabled,
 		onClick
 	]));
+	const clickHandler = useCallback((event) => {
+		if (disabled) return;
+		onClick === null || onClick === void 0 || onClick(event);
+	}, [disabled, onClick]);
 	return /*#__PURE__*/ jsx(IconButton, {
 		"aria-disabled": disabled,
 		ref: mergedRef,
 		size,
-		onClick: useCallback((event) => {
-			if (disabled) return;
-			onClick === null || onClick === void 0 || onClick(event);
-		}, [disabled, onClick]),
+		onClick: clickHandler,
 		...props,
 		variant: "invisible",
 		"data-overflowing": dataOverflowingAttr
@@ -163,14 +164,15 @@ const ActionBarButton = /*#__PURE__*/ forwardRef(({ disabled, onClick, ...props
 		disabled,
 		onClick
 	]));
+	const clickHandler = useCallback((event) => {
+		if (disabled) return;
+		onClick === null || onClick === void 0 || onClick(event);
+	}, [disabled, onClick]);
 	return /*#__PURE__*/ jsx(ButtonComponent, {
 		"aria-disabled": disabled,
 		ref: mergedRef,
 		size,
-		onClick: useCallback((event) => {
-			if (disabled) return;
-			onClick === null || onClick === void 0 || onClick(event);
-		}, [disabled, onClick]),
+		onClick: clickHandler,
 		...props,
 		variant: "invisible",
 		"data-overflowing": dataOverflowingAttr

package/dist/ActionList/Group-d89306a8.css

@@ -0,0 +1,2 @@
+.prc-ActionList-Group-lMIPQ{list-style:none}.prc-ActionList-Group-lMIPQ:not(:first-child){margin-block-start:var(--base-size-8,.5rem)}.prc-ActionList-GroupList-V5B3-{padding-inline-start:0}.prc-ActionList-GroupHeadingWrap-laXcX{color:var(--fgColor-muted,#59636e);display:flex;flex-direction:column;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);line-height:18px;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-16,1rem)}.prc-ActionList-GroupHeadingWrap-laXcX:where([data-variant=filled]){background:var(--bgColor-muted,#f6f8fa);border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);border-top:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);margin-block-end:var(--base-size-8,.5rem);margin-block-start:calc(var(--base-size-8,.5rem) - var(--borderWidth-thin,.0625rem));padding-inline:var(--base-size-16,1rem)}.prc-ActionList-GroupHeadingWrap-laXcX:where([data-variant=filled]):first-child{margin-block-start:0}.prc-ActionList-GroupHeading-STzxi{align-self:flex-start;color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-semibold,600);margin:0}.prc-ActionList-GroupHeadingWrap-laXcX[data-has-trailing-action]{align-items:center;flex-direction:row;gap:var(--base-size-8,.5rem);justify-content:space-between}.prc-ActionList-GroupHeadingWrap-laXcX[data-has-trailing-action]>.prc-ActionList-GroupHeading-STzxi{align-self:center}.prc-ActionList-GroupHeadingTrailingAction-jnb64{align-items:center;display:inline-flex;margin-inline-start:auto}
+/*# sourceMappingURL=Group-d89306a8.css.map */

package/dist/ActionList/Group-d89306a8.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ActionList/Group.module.css.js"],"names":[],"mappings":"AAAA,4BACE,eAKF,CAHE,8CACE,2CACF,CAGF,gCACE,sBACF,CAEA,uCAQE,kCAA2B,CAP3B,YAAa,CAQb,qBAAsB,CAPtB,4CAAsC,CACtC,gDAA6C,CAI7C,gBAAiB,CAIjB,wCAAiC,CADjC,uCAoBF,CAjBE,oEAIE,uCAAgC,CAEhC,uFAAqE,CADrE,oFAAkE,CAFlE,yCAAoC,CADpC,oFAAsE,CAKtE,uCAKF,CAHE,gFACE,oBACF,CAQJ,mCAKE,qBAAsB,CADtB,kCAA2B,CAF3B,4CAAsC,CACtC,gDAA6C,CAF7C,QAKF,CAEA,iEAEE,kBAAmB,CADnB,kBAAmB,CAGnB,4BAAuB,CADvB,6BAMF,CAHE,oGACE,iBACF,CAGF,iDAEE,kBAAmB,CADnB,mBAAoB,CAEpB,wBACF","file":"Group-d89306a8.css","sourcesContent":[".Group {\n  list-style: none;\n\n  &:not(:first-child) {\n    margin-block-start: var(--base-size-8);\n  }\n}\n\n.GroupList {\n  padding-inline-start: 0;\n}\n\n.GroupHeadingWrap {\n  display: flex;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-semibold);\n\n  /* line-height: var(--text-body-lineHeight-small); use when FF rolls out */\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 18px;\n  color: var(--fgColor-muted);\n  flex-direction: column;\n  padding-inline: var(--base-size-16);\n  padding-block: var(--base-size-6);\n\n  &:where([data-variant='filled']) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n    margin-block-end: var(--base-size-8);\n    background: var(--bgColor-muted);\n    border-top: solid var(--borderWidth-thin) var(--borderColor-muted);\n    border-bottom: solid var(--borderWidth-thin) var(--borderColor-muted);\n    padding-inline: var(--base-size-16);\n\n    &:first-child {\n      margin-block-start: 0;\n    }\n  }\n\n  /* & + ul:has(.GroupHeadingWrap) {\n    outline: solid 1px red;\n  } */\n}\n\n.GroupHeading {\n  margin: 0;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-muted);\n  align-self: flex-start;\n}\n\n.GroupHeadingWrap[data-has-trailing-action] {\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--base-size-8);\n\n  & > .GroupHeading {\n    align-self: center;\n  }\n}\n\n.GroupHeadingTrailingAction {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-start: auto;\n}\n"]}

package/dist/ActionList/Group.module.css.js

@@ -1,9 +1,9 @@
-import "./Group-efcb39da.css";
+import "./Group-d89306a8.css";
 //#region src/ActionList/Group.module.css.js
 var Group_module_css_default = {
 	"Group": "prc-ActionList-Group-lMIPQ",
-	"GroupHeadingWrap": "prc-ActionList-GroupHeadingWrap-laXcX",
 	"GroupList": "prc-ActionList-GroupList-V5B3-",
+	"GroupHeadingWrap": "prc-ActionList-GroupHeadingWrap-laXcX",
 	"GroupHeading": "prc-ActionList-GroupHeading-STzxi",
 	"GroupHeadingTrailingAction": "prc-ActionList-GroupHeadingTrailingAction-jnb64"
 };

package/dist/ActionList/Heading.js

@@ -37,7 +37,8 @@ const Heading = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 		t1 = $[6];
 	}
 	const visuallyHidden = t1 === void 0 ? false : t1;
-	const mergedRef = useMergedRefs(forwardedRef, React.useRef(null));
+	const innerRef = React.useRef(null);
+	const mergedRef = useMergedRefs(forwardedRef, innerRef);
 	const { headingId, variant: listVariant } = React.useContext(ListContext);
 	const { container } = React.useContext(ActionListContainerContext);
 	!(container !== "ActionMenu") && invariant(false, "ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.");

package/dist/CounterLabel/CounterLabel.js

@@ -11,11 +11,14 @@ const CounterLabel = /*#__PURE__*/ forwardRef(({ variant, scheme, className, chi
 		")"
 	] });
 	const inferredVariant = variant || scheme || "secondary";
-	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx("span", {
+	const counterProps = {
 		ref: forwardedRef,
 		["aria-hidden"]: "true",
 		["data-variant"]: inferredVariant,
-		...rest,
+		...rest
+	};
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx("span", {
+		...counterProps,
 		"data-component": dataComponent !== null && dataComponent !== void 0 ? dataComponent : "CounterLabel",
 		className: clsx(className, CounterLabel_module_css_default.CounterLabel),
 		children

package/dist/Details/Details.js

@@ -34,7 +34,8 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 		t1 = () => {
 			const { current: details } = detailsRef;
 			if (!details) return;
-			warning(details.querySelector("summary:not([data-default-summary])") === null, "The <Details> component must have a <summary> child component. You can either use <Details.Summary> or a native <summary> element.");
+			const summary = details.querySelector("summary:not([data-default-summary])");
+			warning(summary === null, "The <Details> component must have a <summary> child component. You can either use <Details.Summary> or a native <summary> element.");
 		};
 		t2 = [];
 		$[5] = t1;

package/dist/Dialog/Dialog.js

@@ -140,7 +140,7 @@ const _Dialog = /*#__PURE__*/ React.forwardRef((props, forwardedRef) => {
 	});
 	const footer = (_slots$footer = slots.footer) !== null && _slots$footer !== void 0 ? _slots$footer : (renderFooter !== null && renderFooter !== void 0 ? renderFooter : DefaultFooter)(defaultedProps);
 	const hasFooter = footer != null;
-	useResizeObserver(useCallback(() => {
+	const updateFooterButtonLayout = useCallback(() => {
 		if (!hasFooter) return;
 		const dialogElement = dialogRef.current;
 		if (!(dialogElement instanceof HTMLElement)) return;
@@ -150,7 +150,8 @@ const _Dialog = /*#__PURE__*/ React.forwardRef((props, forwardedRef) => {
 		const newLayout = bodyWrapper.clientHeight >= MIN_BODY_HEIGHT ? "wrap" : "scroll";
 		dialogElement.setAttribute("data-footer-button-layout", newLayout);
 		setFooterButtonLayout(newLayout);
-	}, [hasFooter]), backdropRef);
+	}, [hasFooter]);
+	useResizeObserver(updateFooterButtonLayout, backdropRef);
 	const positionDataAttributes = typeof position === "string" ? { "data-position-regular": position } : Object.fromEntries(Object.entries(position).map(([key, value]) => {
 		return [`data-position-${key}`, value];
 	}));

package/dist/NavList/NavList.d.ts

@@ -1,4 +1,4 @@
-import { FCWithSlotMarker } from "../utils/types/Slots.js";
+import { FCWithSlotMarker, WithSlotMarker } from "../utils/types/Slots.js";
 import { ForwardRefComponent } from "../utils/polymorphic.js";
 import { DistributiveOmit, PolymorphicProps } from "../utils/modern-polymorphic.js";
 import { ActionListTrailingActionProps } from "../ActionList/TrailingAction.js";
@@ -71,7 +71,7 @@ declare const NavList: React.ForwardRefExoticComponent<Omit<NavListProps, "ref">
   Divider: FCWithSlotMarker<React.PropsWithChildren<ActionListDividerProps>>;
   Group: React.FC<NavListGroupProps>;
   GroupExpand: React.ForwardRefExoticComponent<NavListGroupExpandProps & React.RefAttributes<HTMLButtonElement>>;
-  GroupHeading: React.FC<ActionListGroupHeadingProps>;
+  GroupHeading: WithSlotMarker<React.FC<ActionListGroupHeadingProps>>;
 };
 //#endregion
 export { NavList, NavListDividerProps, NavListGroupExpandProps, NavListGroupHeadingProps, NavListGroupProps, NavListHeadingProps, NavListItemProps, NavListLeadingVisualProps, NavListProps, NavListSubNavProps, NavListTrailingVisualProps };

package/dist/NavList/NavList.js

@@ -3,6 +3,7 @@ import { useId as useId$1 } from "../hooks/useId.js";
 import { useSlots } from "../hooks/useSlots.js";
 import { fixedForwardRef } from "../utils/modern-polymorphic.js";
 import _VisuallyHidden_module_css_default from "../_VisuallyHidden.module.css.js";
+import { asSlot } from "../utils/as-slot.js";
 import { ActionListContainerContext } from "../ActionList/ActionListContainerContext.js";
 import Heading$1 from "../Heading/Heading.js";
 import ActionList_module_css_default from "../ActionList/ActionList.module.css.js";
@@ -374,8 +375,23 @@ const Divider = ActionList.Divider;
 Divider.displayName = "NavList.Divider";
 const TrailingAction = ActionList.TrailingAction;
 TrailingAction.displayName = "NavList.TrailingAction";
+function flattenFragmentChildren(children) {
+	const flattenedChildren = [];
+	React.Children.forEach(children, (child) => {
+		if (/*#__PURE__*/ React.isValidElement(child) && child.type === React.Fragment) flattenedChildren.push(...flattenFragmentChildren(child.props.children));
+		else flattenedChildren.push(child);
+	});
+	return flattenedChildren;
+}
+function removeChildFromFragments(children, childToRemove) {
+	return React.Children.map(children, (child) => {
+		if (child === childToRemove) return null;
+		if (/*#__PURE__*/ React.isValidElement(child) && child.type === React.Fragment) return /*#__PURE__*/ React.cloneElement(child, void 0, removeChildFromFragments(child.props.children, childToRemove));
+		return child;
+	});
+}
 const Group = (t0) => {
-	const $ = c(19);
+	const $ = c(26);
 	let children;
 	let hideDivider;
 	let props;
@@ -395,48 +411,69 @@ const Group = (t0) => {
 	}
 	const headingLevel = React.useContext(NavListHeadingLevelContext);
 	let t1;
-	if ($[5] !== headingLevel) {
-		t1 = headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
-		$[5] = headingLevel;
+	if ($[5] !== children) {
+		t1 = flattenFragmentChildren(children);
+		$[5] = children;
 		$[6] = t1;
 	} else t1 = $[6];
-	const groupHeadingAs = t1;
 	let t2;
-	if ($[7] !== hideDivider) {
-		t2 = !hideDivider && /*#__PURE__*/ jsx(ActionList.Divider, {});
-		$[7] = hideDivider;
-		$[8] = t2;
-	} else t2 = $[8];
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { groupHeading: GroupHeading };
+		$[7] = t2;
+	} else t2 = $[7];
+	const [slots] = useSlots(t1, t2);
 	let t3;
-	if ($[9] !== groupHeadingAs || $[10] !== title) {
-		t3 = title ? /*#__PURE__*/ jsx(ActionList.GroupHeading, {
+	if ($[8] !== children || $[9] !== slots.groupHeading) {
+		t3 = slots.groupHeading ? removeChildFromFragments(children, slots.groupHeading) : children;
+		$[8] = children;
+		$[9] = slots.groupHeading;
+		$[10] = t3;
+	} else t3 = $[10];
+	const childrenWithoutHeading = t3;
+	let t4;
+	if ($[11] !== headingLevel) {
+		t4 = headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
+		$[11] = headingLevel;
+		$[12] = t4;
+	} else t4 = $[12];
+	const groupHeadingAs = t4;
+	let t5;
+	if ($[13] !== hideDivider) {
+		t5 = !hideDivider && /*#__PURE__*/ jsx(ActionList.Divider, {});
+		$[13] = hideDivider;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== groupHeadingAs || $[16] !== slots.groupHeading || $[17] !== title) {
+		t6 = slots.groupHeading ? /*#__PURE__*/ React.cloneElement(slots.groupHeading, { headingWrapElement: "div" }) : title ? /*#__PURE__*/ jsx(ActionList.GroupHeading, {
 			as: groupHeadingAs,
 			"data-component": "ActionList.GroupHeading",
 			children: title
 		}) : null;
-		$[9] = groupHeadingAs;
-		$[10] = title;
-		$[11] = t3;
-	} else t3 = $[11];
-	let t4;
-	if ($[12] !== children || $[13] !== props || $[14] !== t3) {
-		t4 = /*#__PURE__*/ jsxs(ActionList.Group, {
+		$[15] = groupHeadingAs;
+		$[16] = slots.groupHeading;
+		$[17] = title;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== childrenWithoutHeading || $[20] !== props || $[21] !== t6) {
+		t7 = /*#__PURE__*/ jsxs(ActionList.Group, {
 			...props,
-			children: [t3, children]
+			children: [t6, childrenWithoutHeading]
 		});
-		$[12] = children;
-		$[13] = props;
-		$[14] = t3;
-		$[15] = t4;
-	} else t4 = $[15];
-	let t5;
-	if ($[16] !== t2 || $[17] !== t4) {
-		t5 = /*#__PURE__*/ jsxs(Fragment, { children: [t2, t4] });
-		$[16] = t2;
-		$[17] = t4;
-		$[18] = t5;
-	} else t5 = $[18];
-	return t5;
+		$[19] = childrenWithoutHeading;
+		$[20] = props;
+		$[21] = t6;
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== t5 || $[24] !== t7) {
+		t8 = /*#__PURE__*/ jsxs(Fragment, { children: [t5, t7] });
+		$[23] = t5;
+		$[24] = t7;
+		$[25] = t8;
+	} else t8 = $[25];
+	return t8;
 };
 const GroupExpand = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 	const $ = c(23);
@@ -534,7 +571,7 @@ const GroupExpand = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 * This is an alternative to the `title` prop on `NavList.Group`.
 * It was primarily added to allow links in group headings.
 */
-const GroupHeading = (t0) => {
+const GroupHeadingImpl = (t0) => {
 	const $ = c(13);
 	let as;
 	let className;
@@ -582,6 +619,7 @@ const GroupHeading = (t0) => {
 	} else t3 = $[12];
 	return t3;
 };
+const GroupHeading = asSlot(GroupHeadingImpl, ActionList.GroupHeading);
 const NavList = Object.assign(Root, {
 	Description: ActionList.Description,
 	Heading,

package/dist/PageHeader/PageHeader.js

@@ -72,7 +72,8 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
 				if (/*#__PURE__*/ React.isValidElement(child_1) && (child_1.type === ContextArea || isSlot(child_1, ContextArea))) hasContextArea = true;
 				if (/*#__PURE__*/ React.isValidElement(child_1) && (child_1.type === LeadingAction || isSlot(child_1, LeadingAction))) hasLeadingAction = true;
 			}
-			warning(Array.from(titleArea.childNodes).some((child_2) => child_2 instanceof HTMLElement && isInteractive(child_2) || Array.from(child_2.childNodes).some((child_3) => child_3 instanceof HTMLElement && isInteractive(child_3))) && (hasContextArea || hasLeadingAction), "When PageHeader.ContextArea or PageHeader.LeadingAction is present, we recommended not to include any interactive items in the PageHeader.TitleArea to make sure the focus order is logical.");
+			const hasInteractiveContent = Array.from(titleArea.childNodes).some((child_2) => child_2 instanceof HTMLElement && isInteractive(child_2) || Array.from(child_2.childNodes).some((child_3) => child_3 instanceof HTMLElement && isInteractive(child_3)));
+			warning(hasInteractiveContent && (hasContextArea || hasLeadingAction), "When PageHeader.ContextArea or PageHeader.LeadingAction is present, we recommended not to include any interactive items in the PageHeader.TitleArea to make sure the focus order is logical.");
 		};
 		t3 = [children, readRef];
 		$[0] = children;

package/dist/SelectPanel/SelectPanel.js

@@ -435,6 +435,31 @@ function Panel({ open, onOpenChange, renderAnchor = defaultRenderAnchor, anchorR
 		if (event.key !== "/" && !isAlphabetKey(event.nativeEvent)) return;
 		event.stopPropagation();
 	}, [overlayProps]);
+	const mergedOverlayProps = useMemo(() => ({
+		role: "dialog",
+		"aria-labelledby": titleId,
+		"aria-describedby": subtitle ? subtitleId : void 0,
+		...overlayProps,
+		...variant === "modal" ? {
+			top: "50vh",
+			left: "50vw",
+			anchorSide: void 0
+		} : {},
+		style: {
+			transform: variant === "modal" ? "translate(-50%, -50%)" : void 0,
+			...isKeyboardVisible ? { maxHeight: availablePanelHeight !== void 0 ? `${availablePanelHeight}px` : "auto" } : {}
+		},
+		onKeyDown: preventBubbling
+	}), [
+		titleId,
+		subtitle,
+		subtitleId,
+		overlayProps,
+		variant,
+		isKeyboardVisible,
+		availablePanelHeight,
+		preventBubbling
+	]);
 	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx(AnchoredOverlay, {
 		renderAnchor: renderMenuAnchor,
 		anchorRef,
@@ -442,31 +467,7 @@ function Panel({ open, onOpenChange, renderAnchor = defaultRenderAnchor, anchorR
 		open,
 		onOpen,
 		onClose,
-		overlayProps: useMemo(() => ({
-			role: "dialog",
-			"aria-labelledby": titleId,
-			"aria-describedby": subtitle ? subtitleId : void 0,
-			...overlayProps,
-			...variant === "modal" ? {
-				top: "50vh",
-				left: "50vw",
-				anchorSide: void 0
-			} : {},
-			style: {
-				transform: variant === "modal" ? "translate(-50%, -50%)" : void 0,
-				...isKeyboardVisible ? { maxHeight: availablePanelHeight !== void 0 ? `${availablePanelHeight}px` : "auto" } : {}
-			},
-			onKeyDown: preventBubbling
-		}), [
-			titleId,
-			subtitle,
-			subtitleId,
-			overlayProps,
-			variant,
-			isKeyboardVisible,
-			availablePanelHeight,
-			preventBubbling
-		]),
+		overlayProps: mergedOverlayProps,
 		focusTrapSettings,
 		focusZoneSettings,
 		height,

package/dist/ThemeContext.d.ts

@@ -0,0 +1,20 @@
+import { ColorMode, ColorModeWithAuto, Theme } from "./ThemeProvider.js";
+import React from "react";
+
+//#region src/ThemeContext.d.ts
+interface ThemeContextValue {
+  /** @deprecated Use `ThemeProvider` and `useTheme` from `@primer/react/next` to migrate away from JavaScript theme values. */
+  theme?: Theme;
+  colorScheme?: string;
+  colorMode?: ColorModeWithAuto;
+  resolvedColorMode?: ColorMode;
+  /** @deprecated Use `ThemeProvider` and `useTheme` from `@primer/react/next` to migrate away from JavaScript theme values. */
+  resolvedColorScheme?: string;
+  dayScheme?: string;
+  nightScheme?: string;
+  setColorMode: React.Dispatch<React.SetStateAction<ColorModeWithAuto>>;
+  setDayScheme: React.Dispatch<React.SetStateAction<string>>;
+  setNightScheme: React.Dispatch<React.SetStateAction<string>>;
+}
+//#endregion
+export { ThemeContextValue };

package/dist/ThemeProvider.d.ts

@@ -21,6 +21,9 @@ type ThemeProviderProps = {
    */
   contextOnly?: boolean;
 };
+/**
+ * @deprecated Use `ThemeProvider` from `@primer/react/next` to migrate away from JavaScript theme values.
+ */
 declare const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>>;
 //#endregion
 export { ColorMode, ColorModeWithAuto, Theme, ThemeProvider, ThemeProvider as default, ThemeProviderProps };

package/dist/ThemeProvider.js

@@ -1,16 +1,17 @@
 import theme from "./theme.js";
-import { useSyncedState } from "./hooks/useSyncedState.js";
-import { ThemeContext } from "./ThemeContext.js";
-import { useTheme } from "./useTheme.js";
+import { ThemeProviderBase } from "./internal/components/ThemeProviderBase.js";
+import { useThemeProvider } from "./internal/hooks/useThemeProvider.js";
 import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import "react";
 import deepmerge from "deepmerge";
-const defaultDayScheme = "light";
-const defaultNightScheme = "dark";
+//#region src/ThemeProvider.tsx
+/**
+* @deprecated Use `ThemeProvider` from `@primer/react/next` to migrate away from JavaScript theme values.
+*/
 const ThemeProvider = (t0) => {
-	var _ref, _props$colorMode, _ref2, _props$dayScheme, _ref3, _props$nightScheme;
-	const $ = c(34);
+	var _parentValue$theme;
+	const $ = c(14);
 	let children;
 	let props;
 	if ($[0] !== t0) {
@@ -22,134 +23,43 @@ const ThemeProvider = (t0) => {
 		children = $[1];
 		props = $[2];
 	}
-	const { theme: fallbackTheme, colorMode: fallbackColorMode, dayScheme: fallbackDayScheme, nightScheme: fallbackNightScheme } = useTheme();
-	const theme$1 = fallbackTheme !== null && fallbackTheme !== void 0 ? fallbackTheme : theme;
-	const [colorMode, setColorMode] = useSyncedState((_ref = (_props$colorMode = props.colorMode) !== null && _props$colorMode !== void 0 ? _props$colorMode : fallbackColorMode) !== null && _ref !== void 0 ? _ref : "day");
-	const [dayScheme, setDayScheme] = useSyncedState((_ref2 = (_props$dayScheme = props.dayScheme) !== null && _props$dayScheme !== void 0 ? _props$dayScheme : fallbackDayScheme) !== null && _ref2 !== void 0 ? _ref2 : defaultDayScheme);
-	const [nightScheme, setNightScheme] = useSyncedState((_ref3 = (_props$nightScheme = props.nightScheme) !== null && _props$nightScheme !== void 0 ? _props$nightScheme : fallbackNightScheme) !== null && _ref3 !== void 0 ? _ref3 : defaultNightScheme);
-	const systemColorMode = useSystemColorMode();
-	let resolvedColorMode;
+	const { parentValue, value } = useThemeProvider(props);
+	const theme$1 = (_parentValue$theme = parentValue.theme) !== null && _parentValue$theme !== void 0 ? _parentValue$theme : theme;
 	let t1;
-	if ($[3] !== colorMode || $[4] !== dayScheme || $[5] !== nightScheme || $[6] !== systemColorMode) {
-		resolvedColorMode = resolveColorMode(colorMode, systemColorMode);
-		t1 = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
-		$[3] = colorMode;
-		$[4] = dayScheme;
-		$[5] = nightScheme;
-		$[6] = systemColorMode;
-		$[7] = resolvedColorMode;
-		$[8] = t1;
-	} else {
-		resolvedColorMode = $[7];
-		t1 = $[8];
-	}
-	const colorScheme = t1;
+	if ($[3] !== theme$1 || $[4] !== value.colorScheme) {
+		t1 = applyColorScheme(theme$1, value.colorScheme);
+		$[3] = theme$1;
+		$[4] = value.colorScheme;
+		$[5] = t1;
+	} else t1 = $[5];
+	const { resolvedTheme, resolvedColorScheme } = t1;
 	let t2;
-	if ($[9] !== colorScheme || $[10] !== theme$1) {
-		t2 = applyColorScheme(theme$1, colorScheme);
-		$[9] = colorScheme;
-		$[10] = theme$1;
-		$[11] = t2;
-	} else t2 = $[11];
-	const { resolvedTheme, resolvedColorScheme } = t2;
-	let t3;
-	if ($[12] !== colorMode || $[13] !== colorScheme || $[14] !== dayScheme || $[15] !== nightScheme || $[16] !== resolvedColorMode || $[17] !== resolvedColorScheme || $[18] !== resolvedTheme || $[19] !== setColorMode || $[20] !== setDayScheme || $[21] !== setNightScheme) {
-		t3 = {
+	if ($[6] !== resolvedColorScheme || $[7] !== resolvedTheme || $[8] !== value) {
+		t2 = {
+			...value,
 			theme: resolvedTheme,
-			colorScheme,
-			colorMode,
-			resolvedColorMode,
-			resolvedColorScheme,
-			dayScheme,
-			nightScheme,
-			setColorMode,
-			setDayScheme,
-			setNightScheme
+			resolvedColorScheme
 		};
-		$[12] = colorMode;
-		$[13] = colorScheme;
-		$[14] = dayScheme;
-		$[15] = nightScheme;
-		$[16] = resolvedColorMode;
-		$[17] = resolvedColorScheme;
-		$[18] = resolvedTheme;
-		$[19] = setColorMode;
-		$[20] = setDayScheme;
-		$[21] = setNightScheme;
-		$[22] = t3;
-	} else t3 = $[22];
-	const contextValue = t3;
-	if (props.contextOnly) {
-		let t4;
-		if ($[23] !== children || $[24] !== contextValue) {
-			t4 = /*#__PURE__*/ jsx(ThemeContext.Provider, {
-				value: contextValue,
-				children
-			});
-			$[23] = children;
-			$[24] = contextValue;
-			$[25] = t4;
-		} else t4 = $[25];
-		return t4;
-	}
-	const t4 = colorMode === "auto" ? "auto" : colorScheme.includes("dark") ? "dark" : "light";
-	let t5;
-	if ($[26] !== children || $[27] !== dayScheme || $[28] !== nightScheme || $[29] !== t4) {
-		t5 = /*#__PURE__*/ jsx("div", {
-			"data-component": "ThemeProvider",
-			"data-color-mode": t4,
-			"data-light-theme": dayScheme,
-			"data-dark-theme": nightScheme,
-			children
-		});
-		$[26] = children;
-		$[27] = dayScheme;
-		$[28] = nightScheme;
-		$[29] = t4;
-		$[30] = t5;
-	} else t5 = $[30];
-	let t6;
-	if ($[31] !== contextValue || $[32] !== t5) {
-		t6 = /*#__PURE__*/ jsx(ThemeContext.Provider, {
+		$[6] = resolvedColorScheme;
+		$[7] = resolvedTheme;
+		$[8] = value;
+		$[9] = t2;
+	} else t2 = $[9];
+	const contextValue = t2;
+	let t3;
+	if ($[10] !== children || $[11] !== contextValue || $[12] !== props.contextOnly) {
+		t3 = /*#__PURE__*/ jsx(ThemeProviderBase, {
+			contextOnly: props.contextOnly,
 			value: contextValue,
-			children: t5
+			children
 		});
-		$[31] = contextValue;
-		$[32] = t5;
-		$[33] = t6;
-	} else t6 = $[33];
-	return t6;
+		$[10] = children;
+		$[11] = contextValue;
+		$[12] = props.contextOnly;
+		$[13] = t3;
+	} else t3 = $[13];
+	return t3;
 };
-function subscribeToSystemColorMode(callback) {
-	var _window, _window$matchMedia;
-	const media = (_window = window) === null || _window === void 0 ? void 0 : (_window$matchMedia = _window.matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, "(prefers-color-scheme: dark)");
-	media === null || media === void 0 || media.addEventListener("change", callback);
-	return () => media === null || media === void 0 ? void 0 : media.removeEventListener("change", callback);
-}
-function useSystemColorMode() {
-	return React.useSyncExternalStore(subscribeToSystemColorMode, getSystemColorMode, _temp);
-}
-function _temp() {
-	return "day";
-}
-function getSystemColorMode() {
-	var _window2, _window2$matchMedia, _window2$matchMedia$c;
-	return (_window2 = window) !== null && _window2 !== void 0 && (_window2$matchMedia = _window2.matchMedia) !== null && _window2$matchMedia !== void 0 && (_window2$matchMedia$c = _window2$matchMedia.call(_window2, "(prefers-color-scheme: dark)")) !== null && _window2$matchMedia$c !== void 0 && _window2$matchMedia$c.matches ? "night" : "day";
-}
-function resolveColorMode(colorMode, systemColorMode) {
-	switch (colorMode) {
-		case "auto": return systemColorMode;
-		default: return colorMode;
-	}
-}
-function chooseColorScheme(colorMode, dayScheme, nightScheme) {
-	switch (colorMode) {
-		case "day":
-		case "light": return dayScheme;
-		case "dark":
-		case "night": return nightScheme;
-	}
-}
 function applyColorScheme(theme, colorScheme) {
 	if (!theme.colorSchemes) return {
 		resolvedTheme: theme,

package/dist/TooltipV2/Tooltip.js

@@ -100,10 +100,11 @@ const Tooltip = /*#__PURE__*/ React.forwardRef(({ direction = "s", text, type =
 				const trigger = readTriggerRef.current;
 				tooltip.showPopover();
 				setIsPopoverOpen(true);
-				const { top, left, anchorAlign, anchorSide } = getAnchoredPosition(tooltip, trigger, {
+				const settings = {
 					side: directionToPosition[direction].side,
 					align: directionToPosition[direction].align
-				});
+				};
+				const { top, left, anchorAlign, anchorSide } = getAnchoredPosition(tooltip, trigger, settings);
 				const calculatedDirection = positionToDirection[`${anchorSide}-${anchorAlign}`];
 				setCalculatedDirection(calculatedDirection);
 				tooltip.style.top = `${top}px`;

package/dist/TreeView/TreeView.js

@@ -193,7 +193,6 @@ const ItemImpl = fixedForwardRef(({ id: itemId, containIntrinsicSize, current: i
 			case "u":
 				if (!(event.shiftKey && (event.metaKey || event.ctrlKey))) return;
 				activateActionsDialog();
-				break;
 		}
 	}, [
 		onSelect,

package/dist/deprecated/ActionList/List.js

@@ -59,7 +59,8 @@ const List = /*#__PURE__*/ React.forwardRef((props, forwardedRef) => {
 	const { firstGroupStyle, lastGroupStyle, headerStyle, itemStyle } = useListVariant(restProps.variant);
 	const renderGroup = (groupProps) => {
 		var _ref;
-		return /*#__PURE__*/ createElement(((_ref = "renderGroup" in groupProps && groupProps.renderGroup) !== null && _ref !== void 0 ? _ref : restProps.renderGroup) || Group, {
+		const GroupComponent = ((_ref = "renderGroup" in groupProps && groupProps.renderGroup) !== null && _ref !== void 0 ? _ref : restProps.renderGroup) || Group;
+		return /*#__PURE__*/ createElement(GroupComponent, {
 			...groupProps,
 			key: groupProps.groupId
 		});