@primer/react 38.32.0-rc.5a40d42f8 → 38.32.0-rc.7fd08e0cc

package/CHANGELOG.md

@@ -21,14 +21,8 @@
 
 - [#8115](https://github.com/primer/react/pull/8115) [`07c530a`](https://github.com/primer/react/commit/07c530a1686ef16b68b2f2fe692b7a3327bdc02b) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Improve rendering performance in Safari by removing expensive `:has()` selectors from ActionList/NavList, Breadcrumbs, SelectPanel, and SegmentedControl. No visual or API changes.
 
-- [#8024](https://github.com/primer/react/pull/8024) [`18e3b7d`](https://github.com/primer/react/commit/18e3b7d7a7b54275b99d2562eb279722f5cdd60e) Thanks [@mattcosta7](https://github.com/mattcosta7)! - ToggleSwitch: Fire `onChange` from the user interaction instead of an effect, so it no longer fires on mount or when a controlled `checked` value changes externally.
-
 - [#8035](https://github.com/primer/react/pull/8035) [`723f4d6`](https://github.com/primer/react/commit/723f4d6db12710e2b94f56b945a937158fcbb127) Thanks [@mattcosta7](https://github.com/mattcosta7)! - UnderlineNav, ActionBar: Detect item overflow with a single shared IntersectionObserver per component instead of one observer per item, reducing observer churn during resize. No public API changes.
 
-- [#8001](https://github.com/primer/react/pull/8001) [`4edc824`](https://github.com/primer/react/commit/4edc8242da557eedd41d71b242674b33254029ec) Thanks [@mattcosta7](https://github.com/mattcosta7)! - `useMedia` now reads the live `matchMedia` value on the first client render instead of after an effect, removing a redundant render pass. `defaultState` is only used for the SSR/hydration snapshot (no public API changes).
-
-- [#8023](https://github.com/primer/react/pull/8023) [`71fa75c`](https://github.com/primer/react/commit/71fa75c861c55bf29dd30ddf4a83549bf81369f8) Thanks [@mattcosta7](https://github.com/mattcosta7)! - FormControl: Avoid an extra re-render when showing a validation message.
-
 ## 38.31.0
 
 ### Minor Changes

package/dist/ToggleSwitch/ToggleSwitch.js

@@ -72,7 +72,7 @@ const LineIcon = (t0) => {
 };
 const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props, ref) {
 	var _buttonLabelOn, _buttonLabelOff;
-	const $ = c(90);
+	const $ = c(95);
 	let ariaDescribedby;
 	let ariaLabelledby;
 	let buttonLabelOff;
@@ -141,74 +141,93 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
 	const loadingLabelId = useId$1("loadingLabel");
 	const { safeSetTimeout } = useSafeTimeout();
 	let t5;
-	if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onChange || $[23] !== onClick || $[24] !== setIsOn) {
+	if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onClick || $[23] !== setIsOn) {
 		t5 = (e) => {
 			if (disabled || loading) return;
-			if (isControlled) {
-				var _onChange;
-				(_onChange = onChange) === null || _onChange === void 0 || _onChange(!isOn);
-			} else setIsOn(!isOn);
+			if (!isControlled) setIsOn(!isOn);
 			onClick && onClick(e);
 		};
 		$[18] = disabled;
 		$[19] = isControlled;
 		$[20] = isOn;
 		$[21] = loading;
-		$[22] = onChange;
-		$[23] = onClick;
-		$[24] = setIsOn;
-		$[25] = t5;
-	} else t5 = $[25];
+		$[22] = onClick;
+		$[23] = setIsOn;
+		$[24] = t5;
+	} else t5 = $[24];
 	const handleToggleClick = t5;
 	let t6;
 	let t7;
-	if ($[26] !== isLoadingLabelVisible || $[27] !== loading || $[28] !== loadingLabelDelay || $[29] !== safeSetTimeout) {
+	if ($[25] !== checked || $[26] !== disabled || $[27] !== isControlled || $[28] !== onChange) {
 		t6 = () => {
+			if (onChange && isControlled && !disabled) onChange(Boolean(checked));
+		};
+		t7 = [
+			onChange,
+			checked,
+			isControlled,
+			disabled
+		];
+		$[25] = checked;
+		$[26] = disabled;
+		$[27] = isControlled;
+		$[28] = onChange;
+		$[29] = t6;
+		$[30] = t7;
+	} else {
+		t6 = $[29];
+		t7 = $[30];
+	}
+	useEffect(t6, t7);
+	let t8;
+	let t9;
+	if ($[31] !== isLoadingLabelVisible || $[32] !== loading || $[33] !== loadingLabelDelay || $[34] !== safeSetTimeout) {
+		t8 = () => {
 			if (!loading && isLoadingLabelVisible) setIsLoadingLabelVisible(false);
 			else if (loading && !isLoadingLabelVisible) safeSetTimeout(() => {
 				setIsLoadingLabelVisible(true);
 			}, loadingLabelDelay);
 		};
-		t7 = [
+		t9 = [
 			loading,
 			isLoadingLabelVisible,
 			loadingLabelDelay,
 			safeSetTimeout
 		];
-		$[26] = isLoadingLabelVisible;
-		$[27] = loading;
-		$[28] = loadingLabelDelay;
-		$[29] = safeSetTimeout;
-		$[30] = t6;
-		$[31] = t7;
+		$[31] = isLoadingLabelVisible;
+		$[32] = loading;
+		$[33] = loadingLabelDelay;
+		$[34] = safeSetTimeout;
+		$[35] = t8;
+		$[36] = t9;
 	} else {
-		t6 = $[30];
-		t7 = $[31];
+		t8 = $[35];
+		t9 = $[36];
 	}
-	useEffect(t6, t7);
+	useEffect(t8, t9);
 	let switchButtonDescribedBy = loadingLabelId;
 	if (ariaDescribedby) switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`;
-	let t8;
-	if ($[32] !== className) {
-		t8 = clsx(ToggleSwitch_module_css_default.ToggleSwitch, className);
-		$[32] = className;
-		$[33] = t8;
-	} else t8 = $[33];
-	const t9 = isLoadingLabelVisible && loadingLabel;
 	let t10;
-	if ($[34] !== loadingLabelId || $[35] !== t9) {
-		t10 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
+	if ($[37] !== className) {
+		t10 = clsx(ToggleSwitch_module_css_default.ToggleSwitch, className);
+		$[37] = className;
+		$[38] = t10;
+	} else t10 = $[38];
+	const t11 = isLoadingLabelVisible && loadingLabel;
+	let t12;
+	if ($[39] !== loadingLabelId || $[40] !== t11) {
+		t12 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
 			announceOnShow: true,
 			id: loadingLabelId,
-			children: t9
+			children: t11
 		}) });
-		$[34] = loadingLabelId;
-		$[35] = t9;
-		$[36] = t10;
-	} else t10 = $[36];
-	let t11;
-	if ($[37] !== loading || $[38] !== statusLabelPosition) {
-		t11 = loading ? /*#__PURE__*/ jsx("div", {
+		$[39] = loadingLabelId;
+		$[40] = t11;
+		$[41] = t12;
+	} else t12 = $[41];
+	let t13;
+	if ($[42] !== loading || $[43] !== statusLabelPosition) {
+		t13 = loading ? /*#__PURE__*/ jsx("div", {
 			className: ToggleSwitch_module_css_default.LoadingSpinner,
 			"data-status-label-position": statusLabelPosition,
 			children: /*#__PURE__*/ jsx(Spinner, {
@@ -216,172 +235,172 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
 				srText: null
 			})
 		}) : null;
-		$[37] = loading;
-		$[38] = statusLabelPosition;
-		$[39] = t11;
-	} else t11 = $[39];
-	const t12 = !acceptsInteraction;
-	const t13 = !isOn;
-	const t14 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
-	let t15;
-	if ($[40] !== t13 || $[41] !== t14) {
-		t15 = /*#__PURE__*/ jsx("span", {
-			className: ToggleSwitch_module_css_default.StatusTextItem,
-			"data-hidden": t13,
-			children: t14
-		});
-		$[40] = t13;
-		$[41] = t14;
-		$[42] = t15;
-	} else t15 = $[42];
-	const t16 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
+		$[42] = loading;
+		$[43] = statusLabelPosition;
+		$[44] = t13;
+	} else t13 = $[44];
+	const t14 = !acceptsInteraction;
+	const t15 = !isOn;
+	const t16 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
 	let t17;
-	if ($[43] !== isOn || $[44] !== t16) {
+	if ($[45] !== t15 || $[46] !== t16) {
 		t17 = /*#__PURE__*/ jsx("span", {
 			className: ToggleSwitch_module_css_default.StatusTextItem,
-			"data-hidden": isOn,
+			"data-hidden": t15,
 			children: t16
 		});
-		$[43] = isOn;
-		$[44] = t16;
-		$[45] = t17;
-	} else t17 = $[45];
-	let t18;
-	if ($[46] !== handleToggleClick || $[47] !== size || $[48] !== t12 || $[49] !== t15 || $[50] !== t17) {
-		t18 = /*#__PURE__*/ jsxs("span", {
+		$[45] = t15;
+		$[46] = t16;
+		$[47] = t17;
+	} else t17 = $[47];
+	const t18 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
+	let t19;
+	if ($[48] !== isOn || $[49] !== t18) {
+		t19 = /*#__PURE__*/ jsx("span", {
+			className: ToggleSwitch_module_css_default.StatusTextItem,
+			"data-hidden": isOn,
+			children: t18
+		});
+		$[48] = isOn;
+		$[49] = t18;
+		$[50] = t19;
+	} else t19 = $[50];
+	let t20;
+	if ($[51] !== handleToggleClick || $[52] !== size || $[53] !== t14 || $[54] !== t17 || $[55] !== t19) {
+		t20 = /*#__PURE__*/ jsxs("span", {
 			className: ToggleSwitch_module_css_default.StatusText,
 			"data-size": size,
-			"data-disabled": t12,
+			"data-disabled": t14,
 			"aria-hidden": "true",
 			onClick: handleToggleClick,
-			children: [t15, t17]
+			children: [t17, t19]
 		});
-		$[46] = handleToggleClick;
-		$[47] = size;
-		$[48] = t12;
-		$[49] = t15;
-		$[50] = t17;
-		$[51] = t18;
-	} else t18 = $[51];
-	const t19 = !acceptsInteraction;
-	const t20 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : void 0;
-	const t21 = !acceptsInteraction;
-	const t22 = !acceptsInteraction;
-	let t23;
-	if ($[52] !== size) {
-		t23 = /*#__PURE__*/ jsx(LineIcon, { size });
+		$[51] = handleToggleClick;
 		$[52] = size;
-		$[53] = t23;
-	} else t23 = $[53];
-	let t24;
-	if ($[54] !== isOn || $[55] !== t22 || $[56] !== t23) {
-		t24 = /*#__PURE__*/ jsx("div", {
-			className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.LineIconContainer}`,
-			"data-checked": isOn,
-			"data-disabled": t22,
-			children: t23
-		});
-		$[54] = isOn;
-		$[55] = t22;
-		$[56] = t23;
-		$[57] = t24;
-	} else t24 = $[57];
-	const t25 = !acceptsInteraction;
+		$[53] = t14;
+		$[54] = t17;
+		$[55] = t19;
+		$[56] = t20;
+	} else t20 = $[56];
+	const t21 = !acceptsInteraction;
+	const t22 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : void 0;
+	const t23 = !acceptsInteraction;
+	const t24 = !acceptsInteraction;
+	let t25;
+	if ($[57] !== size) {
+		t25 = /*#__PURE__*/ jsx(LineIcon, { size });
+		$[57] = size;
+		$[58] = t25;
+	} else t25 = $[58];
 	let t26;
-	if ($[58] !== size) {
-		t26 = /*#__PURE__*/ jsx(CircleIcon, { size });
-		$[58] = size;
-		$[59] = t26;
-	} else t26 = $[59];
-	let t27;
-	if ($[60] !== isOn || $[61] !== t25 || $[62] !== t26) {
-		t27 = /*#__PURE__*/ jsx("div", {
-			className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.CircleIconContainer}`,
+	if ($[59] !== isOn || $[60] !== t24 || $[61] !== t25) {
+		t26 = /*#__PURE__*/ jsx("div", {
+			className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.LineIconContainer}`,
 			"data-checked": isOn,
-			"data-disabled": t25,
-			children: t26
+			"data-disabled": t24,
+			children: t25
 		});
-		$[60] = isOn;
+		$[59] = isOn;
+		$[60] = t24;
 		$[61] = t25;
 		$[62] = t26;
-		$[63] = t27;
-	} else t27 = $[63];
+	} else t26 = $[62];
+	const t27 = !acceptsInteraction;
 	let t28;
-	if ($[64] !== t24 || $[65] !== t27) {
-		t28 = /*#__PURE__*/ jsxs("div", {
+	if ($[63] !== size) {
+		t28 = /*#__PURE__*/ jsx(CircleIcon, { size });
+		$[63] = size;
+		$[64] = t28;
+	} else t28 = $[64];
+	let t29;
+	if ($[65] !== isOn || $[66] !== t27 || $[67] !== t28) {
+		t29 = /*#__PURE__*/ jsx("div", {
+			className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.CircleIconContainer}`,
+			"data-checked": isOn,
+			"data-disabled": t27,
+			children: t28
+		});
+		$[65] = isOn;
+		$[66] = t27;
+		$[67] = t28;
+		$[68] = t29;
+	} else t29 = $[68];
+	let t30;
+	if ($[69] !== t26 || $[70] !== t29) {
+		t30 = /*#__PURE__*/ jsxs("div", {
 			className: ToggleSwitch_module_css_default.SwitchButtonContent,
 			"aria-hidden": "true",
-			children: [t24, t27]
+			children: [t26, t29]
 		});
-		$[64] = t24;
-		$[65] = t27;
-		$[66] = t28;
-	} else t28 = $[66];
-	const t29 = !acceptsInteraction;
-	let t30;
-	if ($[67] !== isOn || $[68] !== t29) {
-		t30 = /*#__PURE__*/ jsx("div", {
+		$[69] = t26;
+		$[70] = t29;
+		$[71] = t30;
+	} else t30 = $[71];
+	const t31 = !acceptsInteraction;
+	let t32;
+	if ($[72] !== isOn || $[73] !== t31) {
+		t32 = /*#__PURE__*/ jsx("div", {
 			className: ToggleSwitch_module_css_default.ToggleKnob,
 			"data-checked": isOn,
-			"data-disabled": t29,
+			"data-disabled": t31,
 			"aria-hidden": "true"
 		});
-		$[67] = isOn;
-		$[68] = t29;
-		$[69] = t30;
-	} else t30 = $[69];
-	let t31;
-	if ($[70] !== ariaLabelledby || $[71] !== buttonType || $[72] !== handleToggleClick || $[73] !== isOn || $[74] !== ref || $[75] !== size || $[76] !== t19 || $[77] !== t20 || $[78] !== t21 || $[79] !== t28 || $[80] !== t30) {
-		t31 = /*#__PURE__*/ jsxs("button", {
+		$[72] = isOn;
+		$[73] = t31;
+		$[74] = t32;
+	} else t32 = $[74];
+	let t33;
+	if ($[75] !== ariaLabelledby || $[76] !== buttonType || $[77] !== handleToggleClick || $[78] !== isOn || $[79] !== ref || $[80] !== size || $[81] !== t21 || $[82] !== t22 || $[83] !== t23 || $[84] !== t30 || $[85] !== t32) {
+		t33 = /*#__PURE__*/ jsxs("button", {
 			ref,
 			type: buttonType,
 			className: ToggleSwitch_module_css_default.SwitchButton,
 			"data-size": size,
 			"data-checked": isOn,
-			"data-disabled": t19,
+			"data-disabled": t21,
 			onClick: handleToggleClick,
 			"aria-labelledby": ariaLabelledby,
-			"aria-describedby": t20,
+			"aria-describedby": t22,
 			"aria-pressed": isOn,
-			"aria-disabled": t21,
-			children: [t28, t30]
+			"aria-disabled": t23,
+			children: [t30, t32]
 		});
-		$[70] = ariaLabelledby;
-		$[71] = buttonType;
-		$[72] = handleToggleClick;
-		$[73] = isOn;
-		$[74] = ref;
-		$[75] = size;
-		$[76] = t19;
-		$[77] = t20;
-		$[78] = t21;
-		$[79] = t28;
-		$[80] = t30;
-		$[81] = t31;
-	} else t31 = $[81];
-	let t32;
-	if ($[82] !== rest || $[83] !== statusLabelPosition || $[84] !== t10 || $[85] !== t11 || $[86] !== t18 || $[87] !== t31 || $[88] !== t8) {
-		t32 = /*#__PURE__*/ jsxs("div", {
-			className: t8,
+		$[75] = ariaLabelledby;
+		$[76] = buttonType;
+		$[77] = handleToggleClick;
+		$[78] = isOn;
+		$[79] = ref;
+		$[80] = size;
+		$[81] = t21;
+		$[82] = t22;
+		$[83] = t23;
+		$[84] = t30;
+		$[85] = t32;
+		$[86] = t33;
+	} else t33 = $[86];
+	let t34;
+	if ($[87] !== rest || $[88] !== statusLabelPosition || $[89] !== t10 || $[90] !== t12 || $[91] !== t13 || $[92] !== t20 || $[93] !== t33) {
+		t34 = /*#__PURE__*/ jsxs("div", {
+			className: t10,
 			"data-status-label-position": statusLabelPosition,
 			...rest,
 			children: [
-				t10,
-				t11,
-				t18,
-				t31
+				t12,
+				t13,
+				t20,
+				t33
 			]
 		});
-		$[82] = rest;
-		$[83] = statusLabelPosition;
-		$[84] = t10;
-		$[85] = t11;
-		$[86] = t18;
-		$[87] = t31;
-		$[88] = t8;
-		$[89] = t32;
-	} else t32 = $[89];
-	return t32;
+		$[87] = rest;
+		$[88] = statusLabelPosition;
+		$[89] = t10;
+		$[90] = t12;
+		$[91] = t13;
+		$[92] = t20;
+		$[93] = t33;
+		$[94] = t34;
+	} else t34 = $[94];
+	return t34;
 });
 ToggleSwitch.displayName = "ToggleSwitch";
 //#endregion

package/dist/hooks/useMedia.js

@@ -1,7 +1,8 @@
+import { canUseDOM } from "../utils/environment.js";
 import { warning } from "../utils/warning.js";
 import { MatchMediaContext } from "./MatchMediaContext.js";
 import { c } from "react-compiler-runtime";
-import { useContext, useSyncExternalStore } from "react";
+import React, { useContext, useEffect } from "react";
 //#region src/hooks/useMedia.ts
 /**
 * `useMedia` will use the given `mediaQueryString` with `matchMedia` to
@@ -17,54 +18,52 @@ import { useContext, useSyncExternalStore } from "react";
 * }
 */
 function useMedia(mediaQueryString, defaultState) {
-	const $ = c(9);
-	const contextValue = useContext(MatchMediaContext)[mediaQueryString];
+	const $ = c(8);
+	const features = useContext(MatchMediaContext);
 	let t0;
-	if ($[0] !== contextValue || $[1] !== mediaQueryString) {
-		t0 = (onStoreChange) => {
-			if (contextValue !== void 0) return _temp;
-			const mediaQueryList = window.matchMedia(mediaQueryString);
-			if (mediaQueryList.addEventListener) {
-				mediaQueryList.addEventListener("change", onStoreChange);
-				return () => {
-					mediaQueryList.removeEventListener("change", onStoreChange);
-				};
-			}
-			mediaQueryList.addListener(onStoreChange);
-			return () => {
-				mediaQueryList.removeListener(onStoreChange);
-			};
+	if ($[0] !== defaultState || $[1] !== features || $[2] !== mediaQueryString) {
+		t0 = () => {
+			if (features[mediaQueryString] !== void 0) return features[mediaQueryString];
+			if (defaultState !== void 0) return defaultState;
+			if (canUseDOM) return window.matchMedia(mediaQueryString).matches;
+			warning(true, "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
+			return false;
 		};
-		$[0] = contextValue;
-		$[1] = mediaQueryString;
-		$[2] = t0;
-	} else t0 = $[2];
-	const subscribe = t0;
+		$[0] = defaultState;
+		$[1] = features;
+		$[2] = mediaQueryString;
+		$[3] = t0;
+	} else t0 = $[3];
+	const [matches, setMatches] = React.useState(t0);
+	if (features[mediaQueryString] !== void 0 && matches !== features[mediaQueryString]) setMatches(features[mediaQueryString]);
 	let t1;
-	if ($[3] !== contextValue || $[4] !== mediaQueryString) {
-		t1 = () => {
-			if (contextValue !== void 0) return contextValue;
-			return window.matchMedia(mediaQueryString).matches;
-		};
-		$[3] = contextValue;
-		$[4] = mediaQueryString;
-		$[5] = t1;
-	} else t1 = $[5];
-	const getSnapshot = t1;
 	let t2;
-	if ($[6] !== contextValue || $[7] !== defaultState) {
-		t2 = () => {
-			if (contextValue !== void 0) return contextValue;
-			if (defaultState !== void 0) return defaultState;
-			warning(typeof window === "undefined", "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
-			return false;
+	if ($[4] !== features || $[5] !== mediaQueryString) {
+		t1 = () => {
+			if (features[mediaQueryString] !== void 0) return;
+			const listener = function listener(event) {
+				setMatches(event.matches);
+			};
+			const mediaQueryList = window.matchMedia(mediaQueryString);
+			if (mediaQueryList.addEventListener) mediaQueryList.addEventListener("change", listener);
+			else mediaQueryList.addListener(listener);
+			setMatches(mediaQueryList.matches);
+			return () => {
+				if (mediaQueryList.addEventListener) mediaQueryList.removeEventListener("change", listener);
+				else mediaQueryList.removeListener(listener);
+			};
 		};
-		$[6] = contextValue;
-		$[7] = defaultState;
-		$[8] = t2;
-	} else t2 = $[8];
-	return useSyncExternalStore(subscribe, getSnapshot, t2);
+		t2 = [features, mediaQueryString];
+		$[4] = features;
+		$[5] = mediaQueryString;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t1 = $[6];
+		t2 = $[7];
+	}
+	useEffect(t1, t2);
+	return matches;
 }
-function _temp() {}
 //#endregion
 export { useMedia };

package/dist/internal/components/ValidationAnimationContainer.js

@@ -1,44 +1,40 @@
 import ValidationAnimationContainer_module_css_default from "./ValidationAnimationContainer.module.css.js";
 import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 //#region src/internal/components/ValidationAnimationContainer.tsx
 const ValidationAnimationContainer = (t0) => {
-	const $ = c(14);
-	let children;
-	let rest;
-	let show;
-	let style;
-	if ($[0] !== t0) {
-		({show, children, style, ...rest} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = rest;
-		$[3] = show;
-		$[4] = style;
-	} else {
-		children = $[1];
-		rest = $[2];
-		show = $[3];
-		style = $[4];
-	}
-	const [shouldRender, setRender] = useState(Boolean(show));
-	if (show && !shouldRender) setRender(true);
+	const $ = c(10);
+	const { show, children } = t0;
+	const [shouldRender, setRender] = useState(show);
 	let t1;
-	if ($[5] !== show) {
+	let t2;
+	if ($[0] !== show) {
 		t1 = () => {
+			if (show) setRender(true);
+		};
+		t2 = [show];
+		$[0] = show;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] !== show) {
+		t3 = () => {
 			if (!show) setRender(false);
 		};
-		$[5] = show;
-		$[6] = t1;
-	} else t1 = $[6];
-	const onAnimationEnd = t1;
-	let t2;
-	if ($[7] !== children || $[8] !== onAnimationEnd || $[9] !== rest || $[10] !== shouldRender || $[11] !== show || $[12] !== style) {
-		t2 = shouldRender ? /*#__PURE__*/ jsx("div", {
-			...rest,
+		$[3] = show;
+		$[4] = t3;
+	} else t3 = $[4];
+	const onAnimationEnd = t3;
+	let t4;
+	if ($[5] !== children || $[6] !== onAnimationEnd || $[7] !== shouldRender || $[8] !== show) {
+		t4 = shouldRender ? /*#__PURE__*/ jsx("div", {
 			style: {
-				...style,
 				height: show ? "auto" : 0,
 				overflow: "hidden"
 			},
@@ -49,15 +45,13 @@ const ValidationAnimationContainer = (t0) => {
 				children
 			})
 		}) : null;
-		$[7] = children;
-		$[8] = onAnimationEnd;
-		$[9] = rest;
-		$[10] = shouldRender;
-		$[11] = show;
-		$[12] = style;
-		$[13] = t2;
-	} else t2 = $[13];
-	return t2;
+		$[5] = children;
+		$[6] = onAnimationEnd;
+		$[7] = shouldRender;
+		$[8] = show;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
 };
 //#endregion
 export { ValidationAnimationContainer as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.32.0-rc.5a40d42f8",
+  "version": "38.32.0-rc.7fd08e0cc",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",