@primer/react 38.42.0-rc.68e6f6ecb → 38.42.0-rc.7ee8d8fea

package/CHANGELOG.md

@@ -6,8 +6,16 @@
 
 - [#8513](https://github.com/primer/react/pull/8513) [`1bab81a`](https://github.com/primer/react/commit/1bab81a0eb3f613c8d6b4abd36bd92d0ac6cedc4) Thanks [@tay1orjones](https://github.com/tay1orjones)! - ActionMenu, Overlay: Add `preventFocusOnClose` to let consumers manage focus when an overlay closes.
 
+- [#8525](https://github.com/primer/react/pull/8525) [`013ab30`](https://github.com/primer/react/commit/013ab3078785ee90afe8a7562576fe0a26001b96) Thanks [@tay1orjones](https://github.com/tay1orjones)! - TextInput and Textarea: Deprecate the `contrast` prop. Omit it to use the default background.
+
+- [#8450](https://github.com/primer/react/pull/8450) [`1528a48`](https://github.com/primer/react/commit/1528a483f9efa41fdb4bea7793c49bcde6fb4220) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - IconButton, ActionBar: Accept React nodes and icon components
+
 - [#8415](https://github.com/primer/react/pull/8415) [`66a9f31`](https://github.com/primer/react/commit/66a9f31611c642209f66ed68b7d43712b09dbd88) Thanks [@rickyzhangca](https://github.com/rickyzhangca)! - DataTable: Add controlled and uncontrolled row selection.
 
+### Patch Changes
+
+- [#8508](https://github.com/primer/react/pull/8508) [`f71dce4`](https://github.com/primer/react/commit/f71dce4869dedf4cb8460ed2fa8e18edc0604198) Thanks [@namangoyal176-10](https://github.com/namangoyal176-10)! - FormControl: Prevent duplicate input rendering when layout is horizontal with non-choice inputs
+
 ## 38.41.0
 
 ### Minor Changes

package/dist/ActionBar/ActionBar.js

@@ -11,8 +11,10 @@ import ActionBar_module_css_default from "./ActionBar.module.css.js";
 import React, { forwardRef, useCallback, useContext, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { isValidElementType } from "react-is";
 import { KebabHorizontalIcon } from "@primer/octicons-react";
 //#region src/ActionBar/ActionBar.tsx
+const renderIcon = (icon) => isValidElementType(icon) && typeof icon !== "string" ? /*#__PURE__*/ React.createElement(icon) : icon;
 const ActionBarContext = /*#__PURE__*/ React.createContext({ size: "medium" });
 const ActionBarItemsRegistry = createDescendantRegistry();
 const FOCUSABLE_ITEM_SELECTOR = ":is(button, a, input, [tabindex]):not(:disabled):not([data-overflowing]):not([data-more-button-inactive])";
@@ -23,9 +25,9 @@ const renderMenuItem = (item, index) => {
 		disabled,
 		variant,
 		children: [
-			LeadingIcon ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: /* @__PURE__ */ jsx(LeadingIcon, {}) }) : null,
+			LeadingIcon !== void 0 && LeadingIcon !== null ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: renderIcon(LeadingIcon) }) : null,
 			label,
-			TrailingIcon ? /* @__PURE__ */ jsx(ActionList.TrailingVisual, { children: typeof TrailingIcon === "string" ? /* @__PURE__ */ jsx("span", { children: TrailingIcon }) : /* @__PURE__ */ jsx(TrailingIcon, {}) }) : null
+			TrailingIcon !== void 0 && TrailingIcon !== null ? /* @__PURE__ */ jsx(ActionList.TrailingVisual, { children: typeof TrailingIcon === "string" ? /* @__PURE__ */ jsx("span", { children: TrailingIcon }) : renderIcon(TrailingIcon) }) : null
 		]
 	}) }), /* @__PURE__ */ jsx(ActionMenu.Overlay, { children: /* @__PURE__ */ jsx(ActionList, { children: items.map((subItem, subIndex) => renderMenuItem(subItem, subIndex)) }) })] }, label);
 	return /* @__PURE__ */ jsxs(ActionList.Item, {
@@ -33,9 +35,9 @@ const renderMenuItem = (item, index) => {
 		disabled,
 		variant,
 		children: [
-			LeadingIcon ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: /* @__PURE__ */ jsx(LeadingIcon, {}) }) : null,
+			LeadingIcon !== void 0 && LeadingIcon !== null ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: renderIcon(LeadingIcon) }) : null,
 			label,
-			TrailingIcon ? /* @__PURE__ */ jsx(ActionList.TrailingVisual, { children: typeof TrailingIcon === "string" ? /* @__PURE__ */ jsx("span", { children: TrailingIcon }) : /* @__PURE__ */ jsx(TrailingIcon, {}) }) : null
+			TrailingIcon !== void 0 && TrailingIcon !== null ? /* @__PURE__ */ jsx(ActionList.TrailingVisual, { children: typeof TrailingIcon === "string" ? /* @__PURE__ */ jsx("span", { children: TrailingIcon }) : renderIcon(TrailingIcon) }) : null
 		]
 	}, label);
 };
@@ -87,13 +89,13 @@ const ActionBar = ({ size = "medium", children, "aria-label": ariaLabel, "aria-l
 								typeof onClick === "function" && onClick(event);
 							},
 							disabled,
-							children: [Icon ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: /* @__PURE__ */ jsx(Icon, {}) }) : null, label]
+							children: [Icon !== void 0 && Icon !== null ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: renderIcon(Icon) }) : null, label]
 						}, id);
 					}
 					if (menuItem.type === "menu") {
 						const menuItems = menuItem.items;
 						const { icon: Icon, label, returnFocusRef } = menuItem;
-						return /* @__PURE__ */ jsxs(ActionMenu, { children: [/* @__PURE__ */ jsx(ActionMenu.Anchor, { children: /* @__PURE__ */ jsxs(ActionList.Item, { children: [Icon !== "none" ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: /* @__PURE__ */ jsx(Icon, {}) }) : null, label] }) }), /* @__PURE__ */ jsx(ActionMenu.Overlay, {
+						return /* @__PURE__ */ jsxs(ActionMenu, { children: [/* @__PURE__ */ jsx(ActionMenu.Anchor, { children: /* @__PURE__ */ jsxs(ActionList.Item, { children: [Icon !== "none" ? /* @__PURE__ */ jsx(ActionList.LeadingVisual, { children: renderIcon(Icon) }) : null, label] }) }), /* @__PURE__ */ jsx(ActionMenu.Overlay, {
 							...returnFocusRef && { returnFocusRef },
 							children: /* @__PURE__ */ jsx(ActionList, { children: menuItems.map((item, index) => renderMenuItem(item, index)) })
 						})] }, id);
@@ -199,7 +201,7 @@ const ActionBarMenu = /*#__PURE__*/ forwardRef(({ "aria-label": ariaLabel, icon,
 	const { dataOverflowingAttr } = useActionBarItem(ref, useMemo(() => ({
 		type: "menu",
 		label: ariaLabel,
-		icon: overflowIcon ? overflowIcon : icon,
+		icon: overflowIcon !== void 0 ? overflowIcon : icon,
 		returnFocusRef,
 		items
 	}), [

package/dist/ActionBar/index.d.ts

@@ -8,7 +8,7 @@ declare const ActionBar: import("react").FC<import("react").PropsWithChildren<Ac
     disabled?: boolean;
   } & {
     alignContent?: AlignContent;
-    icon?: React.FunctionComponent<import("@primer/octicons-react").IconProps> | React.ElementType | React.ReactElement<any> | null;
+    icon?: React.ReactNode | React.ComponentType<import("@primer/octicons-react").IconProps> | React.ExoticComponent<import("@primer/octicons-react").IconProps>;
     leadingVisual?: React.ElementType | React.ReactElement<any> | null;
     trailingVisual?: React.ElementType | React.ReactElement<any> | null;
     trailingAction?: React.ElementType | null;
@@ -39,7 +39,7 @@ declare const ActionBar: import("react").FC<import("react").PropsWithChildren<Ac
     'aria-label': string;
     'aria-labelledby'?: undefined;
   } & {
-    icon: React.ElementType;
+    icon: React.ReactNode | React.ComponentType<import("@primer/octicons-react").IconProps> | React.ExoticComponent<import("@primer/octicons-react").IconProps>;
     notificationIndicator?: "button" | "icon";
     unsafeDisableTooltip?: boolean;
     description?: string;

package/dist/ActionList/Group.js

@@ -60,7 +60,7 @@ const HeadingWrap = ({ as = "div", children, className, ...rest }) => {
 	}, children);
 };
 const Group = (t0) => {
-	var _ariaLabel, _title, _slots$groupHeading;
+	var _slots$groupHeading;
 	const $ = c(38);
 	let ariaLabel;
 	let auxiliaryText;
@@ -144,7 +144,7 @@ const Group = (t0) => {
 		$[22] = t7;
 	} else t7 = $[22];
 	const t8 = listRole ? void 0 : groupHeadingId;
-	const t9 = (_ariaLabel = ariaLabel) !== null && _ariaLabel !== void 0 ? _ariaLabel : listRole ? (_title = title) !== null && _title !== void 0 ? _title : (_slots$groupHeading = slots.groupHeading) === null || _slots$groupHeading === void 0 ? void 0 : _slots$groupHeading.props.children : void 0;
+	const t9 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : listRole ? title !== null && title !== void 0 ? title : (_slots$groupHeading = slots.groupHeading) === null || _slots$groupHeading === void 0 ? void 0 : _slots$groupHeading.props.children : void 0;
 	const t10 = role || listRole && "group";
 	const t11 = slots.groupHeading ? childrenWithoutSlots : props.children;
 	let t12;
@@ -254,7 +254,6 @@ const GroupHeadingImpl = (t0) => {
 	unnecessaryAsForListboxOrMenu && invariant(false, `Looks like you are trying to set a heading level to a ${listRole} role. Group headings for ${listRole} type action lists are for representational purposes, and rendered as divs. Therefore they don't need a heading level.`);
 	let t4;
 	if ($[10] !== _internalBackwardCompatibleTitle || $[11] !== as || $[12] !== auxiliaryText || $[13] !== className || $[14] !== groupHeadingId || $[15] !== headingChildren || $[16] !== headingWrapElement || $[17] !== listRole || $[18] !== props || $[19] !== trailingAction || $[20] !== variant) {
-		var _internalBackwardComp, _internalBackwardComp2;
 		t4 = /* @__PURE__ */ jsx(Fragment$1, { children: listRole && listRole !== "list" ? /* @__PURE__ */ jsxs(HeadingWrap, {
 			role: "presentation",
 			className: Group_module_css_default.GroupHeadingWrap,
@@ -266,7 +265,7 @@ const GroupHeadingImpl = (t0) => {
 			children: [/* @__PURE__ */ jsx("span", {
 				className: clsx(className, Group_module_css_default.GroupHeading),
 				id: groupHeadingId,
-				children: (_internalBackwardComp = _internalBackwardCompatibleTitle) !== null && _internalBackwardComp !== void 0 ? _internalBackwardComp : headingChildren
+				children: _internalBackwardCompatibleTitle !== null && _internalBackwardCompatibleTitle !== void 0 ? _internalBackwardCompatibleTitle : headingChildren
 			}), auxiliaryText && /* @__PURE__ */ jsx("div", {
 				className: ActionList_module_css_default.Description,
 				children: auxiliaryText
@@ -283,7 +282,7 @@ const GroupHeadingImpl = (t0) => {
 					as: as || "h3",
 					id: groupHeadingId,
 					...props,
-					children: (_internalBackwardComp2 = _internalBackwardCompatibleTitle) !== null && _internalBackwardComp2 !== void 0 ? _internalBackwardComp2 : headingChildren
+					children: _internalBackwardCompatibleTitle !== null && _internalBackwardCompatibleTitle !== void 0 ? _internalBackwardCompatibleTitle : headingChildren
 				}),
 				auxiliaryText && /* @__PURE__ */ jsx("div", {
 					className: ActionList_module_css_default.Description,

package/dist/ActionList/Item.js

@@ -138,7 +138,7 @@ const listRoleTypes = [
 	"tree"
 ];
 const UnwrappedItem = (t0, forwardedRef) => {
-	var _slots$trailingVisual, _slots$description$pr, _slots$description, _slots$trailingAction, _PrivateTooltipText2;
+	var _slots$trailingVisual, _slots$description$pr, _slots$description, _slots$trailingAction;
 	const $ = c(162);
 	let _PrivateItemWrapper;
 	let _PrivateTooltipText;
@@ -470,7 +470,7 @@ const UnwrappedItem = (t0, forwardedRef) => {
 		$[91] = className;
 		$[92] = t35;
 	} else t35 = $[92];
-	const t36 = (_PrivateTooltipText2 = _PrivateTooltipText) !== null && _PrivateTooltipText2 !== void 0 ? _PrivateTooltipText2 : truncatedText;
+	const t36 = _PrivateTooltipText !== null && _PrivateTooltipText !== void 0 ? _PrivateTooltipText : truncatedText;
 	const t37 = listSemantics ? null : forwardedRef;
 	let t38;
 	let t39;

package/dist/Banner/Banner.js

@@ -20,7 +20,6 @@ const iconForVariant = {
 	warning: /* @__PURE__ */ jsx(AlertIcon, {})
 };
 const Banner = /*#__PURE__*/ React.forwardRef(function Banner(t0, forwardRef) {
-	var _leadingVisual, _labelledBy;
 	const $ = c(64);
 	let children;
 	let className;
@@ -84,7 +83,7 @@ const Banner = /*#__PURE__*/ React.forwardRef(function Banner(t0, forwardRef) {
 	const ref = useMergedRefs(forwardRef, bannerRef);
 	const supportsCustomIcon = variant === "info" || variant === "upsell";
 	const titleId = useId$1();
-	const visual = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : icon;
+	const visual = leadingVisual !== null && leadingVisual !== void 0 ? leadingVisual : icon;
 	let t4;
 	let t5;
 	if ($[17] !== title) {
@@ -109,7 +108,7 @@ const Banner = /*#__PURE__*/ React.forwardRef(function Banner(t0, forwardRef) {
 		$[20] = titleId;
 		$[21] = t6;
 	} else t6 = $[21];
-	const t7 = (_labelledBy = labelledBy) !== null && _labelledBy !== void 0 ? _labelledBy : label ? void 0 : titleId;
+	const t7 = labelledBy !== null && labelledBy !== void 0 ? labelledBy : label ? void 0 : titleId;
 	const t8 = labelledBy ? void 0 : label;
 	let t9;
 	if ($[22] !== className) {
@@ -249,7 +248,6 @@ const Banner = /*#__PURE__*/ React.forwardRef(function Banner(t0, forwardRef) {
 	return t24;
 });
 function BannerTitle(props) {
-	var _id;
 	const $ = c(14);
 	let children;
 	let className;
@@ -273,7 +271,7 @@ function BannerTitle(props) {
 	}
 	const Heading = t0 === void 0 ? "h2" : t0;
 	const context = React.useContext(BannerContext);
-	const titleId = (_id = id) !== null && _id !== void 0 ? _id : context === null || context === void 0 ? void 0 : context.titleId;
+	const titleId = id !== null && id !== void 0 ? id : context === null || context === void 0 ? void 0 : context.titleId;
 	let t1;
 	if ($[6] !== className) {
 		t1 = clsx(className, Banner_module_css_default.BannerTitle);

package/dist/Button/ButtonBase.js

@@ -10,7 +10,7 @@ import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
 import React, { forwardRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { isElement } from "react-is";
+import { isElement, isValidElementType } from "react-is";
 //#region src/Button/ButtonBase.tsx
 const BUTTON_LOADING_DISABLED_STYLES_FEATURE_FLAG = "primer_react_button_loading_disabled_styles";
 const renderModuleVisual = (Visual, loading, visualName, counterLabel) => /* @__PURE__ */ jsx("span", {
@@ -18,6 +18,7 @@ const renderModuleVisual = (Visual, loading, visualName, counterLabel) => /* @__
 	className: clsx(!counterLabel && ButtonBase_module_css_default.Visual, visualName === "leadingVisual" && ButtonBase_module_css_default.LeadingVisual, loading ? ButtonBase_module_css_default.LoadingSpinner : ButtonBase_module_css_default.VisualWrap),
 	children: loading ? /* @__PURE__ */ jsx(Spinner, { size: "small" }) : isElement(Visual) ? Visual : /* @__PURE__ */ jsx(Visual, {})
 });
+const renderIcon = (icon) => isValidElementType(icon) && typeof icon !== "string" ? /*#__PURE__*/ React.createElement(icon) : icon;
 const ButtonBase = /*#__PURE__*/ forwardRef(({ children, as: Component = "button", ...props }, forwardedRef) => {
 	const { leadingVisual: LeadingVisual, trailingVisual: TrailingVisual, trailingAction: TrailingAction, ["aria-describedby"]: ariaDescribedBy, ["aria-labelledby"]: ariaLabelledBy, count, icon: Icon, id, variant = "default", size = "medium", alignContent = "center", block = false, loading, loadingAnnouncement = "Loading", inactive, onClick, labelWrap, notificationIndicator, className, ...rest } = props;
 	const innerRef = React.useRef(null);
@@ -56,7 +57,7 @@ const ButtonBase = /*#__PURE__*/ forwardRef(({ children, as: Component = "button
 			"aria-labelledby": loading ? [`${uuid}-label`, ariaLabelledBy].filter((labelID) => Boolean(labelID)).join(" ") : ariaLabelledBy,
 			id,
 			onClick: loading ? void 0 : onClick,
-			children: Icon ? loading ? /* @__PURE__ */ jsx(Spinner, { size: "small" }) : isElement(Icon) ? Icon : /* @__PURE__ */ jsx(Icon, {}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
+			children: Icon !== void 0 && Icon !== null ? loading ? /* @__PURE__ */ jsx(Spinner, { size: "small" }) : renderIcon(Icon) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("span", {
 				"data-component": "buttonContent",
 				"data-align": alignContent,
 				className: ButtonBase_module_css_default.ButtonContent,

package/dist/Button/IconButton.js

@@ -80,17 +80,16 @@ const IconButton = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 		} else t3 = $[19];
 		return t3;
 	} else {
-		var _description, _keybindingHint, _keyshortcuts;
-		const tooltipText = (_description = description) !== null && _description !== void 0 ? _description : ariaLabel;
+		const tooltipText = description !== null && description !== void 0 ? description : ariaLabel;
 		const t2 = description ? void 0 : "label";
-		const t3 = (_keybindingHint = keybindingHint) !== null && _keybindingHint !== void 0 ? _keybindingHint : keyshortcuts;
+		const t3 = keybindingHint !== null && keybindingHint !== void 0 ? keybindingHint : keyshortcuts;
 		let t4;
 		if ($[20] !== className) {
 			t4 = clsx(className, ButtonBase_module_css_default.IconButton);
 			$[20] = className;
 			$[21] = t4;
 		} else t4 = $[21];
-		const t5 = (_keyshortcuts = keyshortcuts) !== null && _keyshortcuts !== void 0 ? _keyshortcuts : void 0;
+		const t5 = keyshortcuts !== null && keyshortcuts !== void 0 ? keyshortcuts : void 0;
 		const t6 = description ? ariaLabel : void 0;
 		let t7;
 		if ($[22] !== Icon || $[23] !== props || $[24] !== t4 || $[25] !== t5 || $[26] !== t6) {

package/dist/Button/types.d.ts

@@ -56,7 +56,7 @@ type ButtonProps = {
   /**
    * The icon for the IconButton
    */
-  icon?: React.FunctionComponent<IconProps> | React.ElementType | React.ReactElement<any> | null;
+  icon?: React.ReactNode | React.ComponentType<IconProps> | React.ExoticComponent<IconProps>;
   /**
    * The leading visual which comes before the button content
    */
@@ -80,7 +80,7 @@ type ButtonProps = {
   notificationIndicator?: ButtonNotificationIndicatorPlacement;
 } & ButtonBaseProps;
 type IconButtonProps = ButtonA11yProps & {
-  icon: React.ElementType;
+  icon: React.ReactNode | React.ComponentType<IconProps> | React.ExoticComponent<IconProps>;
   /**
    * Displays a visual indicator for new activity on the button boundary or icon. Consumers are
    * responsible for communicating the indicator's meaning through an accessible label or description.

package/dist/Card/Card.js

@@ -343,7 +343,6 @@ CardImage.displayName = "Card.Image";
 * automatically wired to the section's `aria-labelledby`.
 */
 const CardHeading = /*#__PURE__*/ forwardRef(function CardHeading(t0, ref) {
-	var _id;
 	const $ = c(15);
 	let children;
 	let className;
@@ -367,7 +366,7 @@ const CardHeading = /*#__PURE__*/ forwardRef(function CardHeading(t0, ref) {
 	}
 	const Component = t1 === void 0 ? "h3" : t1;
 	const { titleId } = useContext(CardContext);
-	const t2 = (_id = id) !== null && _id !== void 0 ? _id : titleId;
+	const t2 = id !== null && id !== void 0 ? id : titleId;
 	let t3;
 	if ($[6] !== className) {
 		t3 = clsx(Card_module_css_default.CardHeading, className);

package/dist/Details/Details.js

@@ -7,7 +7,6 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/Details/Details.tsx
 const Root = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
-	var _dataComponent;
 	const $ = c(15);
 	let children;
 	let className;
@@ -51,7 +50,7 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 		$[7] = className;
 		$[8] = t3;
 	} else t3 = $[8];
-	const t4 = (_dataComponent = dataComponent) !== null && _dataComponent !== void 0 ? _dataComponent : "Details";
+	const t4 = dataComponent !== null && dataComponent !== void 0 ? dataComponent : "Details";
 	let t5;
 	if ($[9] !== children || $[10] !== ref || $[11] !== rest || $[12] !== t3 || $[13] !== t4) {
 		t5 = /* @__PURE__ */ jsx("details", {
@@ -72,7 +71,6 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
 });
 Root.displayName = "Details";
 function Summary(t0) {
-	var _as;
 	const $ = c(9);
 	let as;
 	let children;
@@ -88,7 +86,7 @@ function Summary(t0) {
 		children = $[2];
 		props = $[3];
 	}
-	const Component = (_as = as) !== null && _as !== void 0 ? _as : "summary";
+	const Component = as !== null && as !== void 0 ? as : "summary";
 	const t1 = Component === "summary" ? null : "summary";
 	let t2;
 	if ($[4] !== Component || $[5] !== children || $[6] !== props || $[7] !== t1) {

package/dist/FeatureFlags/FeatureFlagScope.js

@@ -9,6 +9,7 @@ var FeatureFlagScope = class FeatureFlagScope {
 		for (const [key, value] of b.flags) merged.flags.set(key, value);
 		return merged;
 	}
+	flags;
 	constructor(flags = {}) {
 		this.flags = /* @__PURE__ */ new Map();
 		for (const [key, value] of Object.entries(flags)) this.flags.set(key, value !== null && value !== void 0 ? value : false);

package/dist/FilteredActionList/constants.js

@@ -1,5 +1,7 @@
 //#region src/FilteredActionList/constants.ts
 var FilteredActionListLoadingType = class {
+	name;
+	appearsInBody;
 	constructor(name, appearsInBody) {
 		this.name = name;
 		this.appearsInBody = appearsInBody;

package/dist/FormControl/FormControl.js

@@ -24,7 +24,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 var FormControl_default = Object.assign(/* @__PURE__ */ React.forwardRef((t0, ref) => {
 	var _slots$validation, _slots$label;
-	const $ = c(32);
+	const $ = c(23);
 	const { children, disabled: disabledProp, layout: t1, id: idProp, required, className, style } = t0;
 	const layout = t1 === void 0 ? "vertical" : t1;
 	let t2;
@@ -78,87 +78,65 @@ var FormControl_default = Object.assign(/* @__PURE__ */ React.forwardRef((t0, re
 		warning(isRadioInput && childrenWithoutSlots.find(_temp), "An individual radio cannot be a required field.");
 	} else warning(!!slots.leadingVisual, "A leading visual is only rendered for a checkbox or radio form control. If you want to render a leading visual inside of your input, check if your input supports a leading visual.");
 	const isLabelHidden = (_slots$label = slots.label) === null || _slots$label === void 0 ? void 0 : _slots$label.props.visuallyHidden;
-	const t4 = /*#__PURE__*/ React.isValidElement(InputComponent) ? /*#__PURE__*/ React.cloneElement(InputComponent, {
-		id,
-		disabled,
-		required: required && !isRadioInput,
-		"aria-describedby": captionId
-	}) : null;
-	let t5;
-	if ($[4] !== childrenWithoutSlots) {
-		t5 = childrenWithoutSlots.filter(_temp2);
-		$[4] = childrenWithoutSlots;
-		$[5] = t5;
-	} else t5 = $[5];
-	let t6;
-	if ($[6] !== t4 || $[7] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("div", {
-			className: FormControl_module_css_default.ControlChoiceInputs,
-			children: [t4, t5]
-		});
-		$[6] = t4;
-		$[7] = t5;
-		$[8] = t6;
-	} else t6 = $[8];
-	let t7;
-	if ($[9] !== disabled || $[10] !== slots.caption || $[11] !== slots.leadingVisual) {
-		t7 = slots.leadingVisual ? /* @__PURE__ */ jsx("div", {
+	let t4;
+	if ($[4] !== disabled || $[5] !== slots.caption || $[6] !== slots.leadingVisual) {
+		t4 = slots.leadingVisual ? /* @__PURE__ */ jsx("div", {
 			className: FormControl_module_css_default.LeadingVisual,
 			"data-disabled": disabled ? "" : void 0,
 			"data-has-caption": slots.caption ? "" : void 0,
 			children: slots.leadingVisual
 		}) : null;
-		$[9] = disabled;
-		$[10] = slots.caption;
-		$[11] = slots.leadingVisual;
-		$[12] = t7;
-	} else t7 = $[12];
-	let t8;
-	if ($[13] !== slots.caption || $[14] !== slots.label) {
-		t8 = /* @__PURE__ */ jsxs("div", {
+		$[4] = disabled;
+		$[5] = slots.caption;
+		$[6] = slots.leadingVisual;
+		$[7] = t4;
+	} else t4 = $[7];
+	let t5;
+	if ($[8] !== slots.caption || $[9] !== slots.label) {
+		t5 = /* @__PURE__ */ jsxs("div", {
 			className: FormControl_module_css_default.LabelContainer,
 			children: [slots.label, slots.caption]
 		});
-		$[13] = slots.caption;
-		$[14] = slots.label;
-		$[15] = t8;
-	} else t8 = $[15];
-	let t9;
-	if ($[16] !== t6 || $[17] !== t7 || $[18] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			t6,
-			t7,
-			t8
-		] });
-		$[16] = t6;
-		$[17] = t7;
-		$[18] = t8;
-		$[19] = t9;
-	} else t9 = $[19];
-	const InputChildren = t9;
+		$[8] = slots.caption;
+		$[9] = slots.label;
+		$[10] = t5;
+	} else t5 = $[10];
+	const InputChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: FormControl_module_css_default.ControlChoiceInputs,
+			children: [/*#__PURE__*/ React.isValidElement(InputComponent) ? /*#__PURE__*/ React.cloneElement(InputComponent, {
+				id,
+				disabled,
+				required: required && !isRadioInput,
+				"aria-describedby": captionId
+			}) : null, childrenWithoutSlots.filter((child_1) => /*#__PURE__*/ React.isValidElement(child_1) && !expectedInputComponents.some((inputComponent_0) => child_1.type === inputComponent_0 || isSlot(child_1, inputComponent_0)))]
+		}),
+		t4,
+		t5
+	] });
 	const T0 = FormControlContextProvider;
-	const t10 = !isSelectPanelInput;
-	let t11;
-	if ($[20] !== captionId || $[21] !== disabled || $[22] !== id || $[23] !== labelId || $[24] !== required || $[25] !== t10 || $[26] !== validationMessageId) {
-		t11 = {
+	const t6 = !isSelectPanelInput;
+	let t7;
+	if ($[11] !== captionId || $[12] !== disabled || $[13] !== id || $[14] !== labelId || $[15] !== required || $[16] !== t6 || $[17] !== validationMessageId) {
+		t7 = {
 			captionId,
 			disabled,
 			id,
 			required,
 			validationMessageId,
-			isReferenced: t10,
+			isReferenced: t6,
 			labelId
 		};
-		$[20] = captionId;
-		$[21] = disabled;
-		$[22] = id;
-		$[23] = labelId;
-		$[24] = required;
-		$[25] = t10;
-		$[26] = validationMessageId;
-		$[27] = t11;
-	} else t11 = $[27];
-	const t12 = isChoiceInput || layout === "horizontal" ? /* @__PURE__ */ jsx("div", {
+		$[11] = captionId;
+		$[12] = disabled;
+		$[13] = id;
+		$[14] = labelId;
+		$[15] = required;
+		$[16] = t6;
+		$[17] = validationMessageId;
+		$[18] = t7;
+	} else t7 = $[18];
+	const t8 = isChoiceInput || layout === "horizontal" ? /* @__PURE__ */ jsx("div", {
 		ref,
 		"data-has-leading-visual": slots.leadingVisual ? "" : void 0,
 		className: clsx(className, FormControl_module_css_default.ControlHorizontalLayout),
@@ -188,18 +166,18 @@ var FormControl_default = Object.assign(/* @__PURE__ */ React.forwardRef((t0, re
 			slots.caption
 		]
 	});
-	let t13;
-	if ($[28] !== T0 || $[29] !== t11 || $[30] !== t12) {
-		t13 = /* @__PURE__ */ jsx(T0, {
-			value: t11,
-			children: t12
+	let t9;
+	if ($[19] !== T0 || $[20] !== t7 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsx(T0, {
+			value: t7,
+			children: t8
 		});
-		$[28] = T0;
-		$[29] = t11;
-		$[30] = t12;
-		$[31] = t13;
-	} else t13 = $[31];
-	return t13;
+		$[19] = T0;
+		$[20] = t7;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
 }), {
 	__SLOT__: Symbol("FormControl"),
 	Caption: FormControlCaption,
@@ -211,8 +189,5 @@ function _temp(child_0) {
 	var _child_0$props;
 	return /*#__PURE__*/ React.isValidElement(child_0) && ((_child_0$props = child_0.props) === null || _child_0$props === void 0 ? void 0 : _child_0$props.required);
 }
-function _temp2(child_1) {
-	return /*#__PURE__*/ React.isValidElement(child_1) && ![Checkbox, Radio].some((inputComponent_0) => child_1.type === inputComponent_0 || isSlot(child_1, inputComponent_0));
-}
 //#endregion
 export { FormControl_default as default };

package/dist/FormControl/FormControlLabel.js

@@ -4,7 +4,6 @@ import { InputLabel } from "../internal/components/InputLabel.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/FormControl/FormControlLabel.tsx
 const FormControlLabel = (t0) => {
-	var _id;
 	const $ = c(26);
 	let as;
 	let children;
@@ -40,7 +39,7 @@ const FormControlLabel = (t0) => {
 	}
 	const requiredIndicator = t1 === void 0 ? true : t1;
 	const { disabled, id: formControlId, required, isReferenced, labelId } = useFormControlContext();
-	const resolvedId = (_id = id) !== null && _id !== void 0 ? _id : labelId;
+	const resolvedId = id !== null && id !== void 0 ? id : labelId;
 	let t2;
 	if ($[10] !== as || $[11] !== className || $[12] !== disabled || $[13] !== formControlId || $[14] !== htmlFor || $[15] !== isReferenced || $[16] !== props || $[17] !== required || $[18] !== requiredIndicator || $[19] !== requiredText || $[20] !== resolvedId || $[21] !== visuallyHidden) {
 		t2 = as === "legend" || as === "span" ? {

package/dist/InlineMessage/InlineMessage.js

@@ -30,7 +30,6 @@ const smallIcons = {
 	})
 };
 function InlineMessage(t0) {
-	var _variant;
 	const $ = c(19);
 	let LeadingVisual;
 	let children;
@@ -82,7 +81,7 @@ function InlineMessage(t0) {
 		$[10] = className;
 		$[11] = t2;
 	} else t2 = $[11];
-	const t3 = (_variant = variant) !== null && _variant !== void 0 ? _variant : void 0;
+	const t3 = variant !== null && variant !== void 0 ? variant : void 0;
 	let t4;
 	if ($[12] !== children || $[13] !== icon || $[14] !== rest || $[15] !== size || $[16] !== t2 || $[17] !== t3) {
 		t4 = /* @__PURE__ */ jsxs("div", {

package/dist/NavList/NavList.js

@@ -25,7 +25,7 @@ function levelToHeadingTag(level) {
 	return `h${Math.min(Math.max(level, 1), 4)}`;
 }
 const Root = /*#__PURE__*/ React.forwardRef((t0, ref) => {
-	var _heading$props$id, _ariaLabelledby;
+	var _heading$props$id;
 	const $ = c(26);
 	let ariaLabel;
 	let ariaLabelledby;
@@ -64,7 +64,7 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, ref) => {
 		$[8] = t2;
 	} else t2 = $[8];
 	const headingLevel = t2;
-	const navLabelledby = (_ariaLabelledby = ariaLabelledby) !== null && _ariaLabelledby !== void 0 ? _ariaLabelledby : ariaLabel ? void 0 : headingId;
+	const navLabelledby = ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : ariaLabel ? void 0 : headingId;
 	let t3;
 	if ($[9] !== heading || $[10] !== headingId) {
 		t3 = heading ? /*#__PURE__*/ React.cloneElement(heading, { id: headingId }) : null;
@@ -601,8 +601,7 @@ const GroupHeadingImpl = (t0) => {
 	const headingLevel = React.useContext(NavListHeadingLevelContext);
 	let t1;
 	if ($[4] !== as || $[5] !== headingLevel) {
-		var _as;
-		t1 = (_as = as) !== null && _as !== void 0 ? _as : headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
+		t1 = as !== null && as !== void 0 ? as : headingLevel ? levelToHeadingTag(headingLevel + 1) : "h3";
 		$[4] = as;
 		$[5] = headingLevel;
 		$[6] = t1;

package/dist/PageLayout/usePaneWidth.js

@@ -285,14 +285,14 @@ function usePaneWidth(t0) {
 				if (isResizing) return;
 				isResizing = true;
 				(_paneRef$current4 = paneRef.current) === null || _paneRef$current4 === void 0 || _paneRef$current4.setAttribute("data-dragging", "true");
-				contentWrapperRef === null || contentWrapperRef === void 0 || (_contentWrapperRef$cu = contentWrapperRef.current) == null || _contentWrapperRef$cu.setAttribute("data-dragging", "true");
+				contentWrapperRef === null || contentWrapperRef === void 0 || (_contentWrapperRef$cu = contentWrapperRef.current) === null || _contentWrapperRef$cu === void 0 || _contentWrapperRef$cu.setAttribute("data-dragging", "true");
 			};
 			const endResizeOptimizations = () => {
 				var _paneRef$current5, _contentWrapperRef$cu2;
 				if (!isResizing) return;
 				isResizing = false;
 				(_paneRef$current5 = paneRef.current) === null || _paneRef$current5 === void 0 || _paneRef$current5.removeAttribute("data-dragging");
-				contentWrapperRef === null || contentWrapperRef === void 0 || (_contentWrapperRef$cu2 = contentWrapperRef.current) == null || _contentWrapperRef$cu2.removeAttribute("data-dragging");
+				contentWrapperRef === null || contentWrapperRef === void 0 || (_contentWrapperRef$cu2 = contentWrapperRef.current) === null || _contentWrapperRef$cu2 === void 0 || _contentWrapperRef$cu2.removeAttribute("data-dragging");
 			};
 			const handleResize = () => {
 				startResizeOptimizations();

package/dist/Popover/Popover.js

@@ -9,7 +9,6 @@ import { clsx } from "clsx";
 const EMPTY_IGNORE_CLICK_REFS = [];
 const PopoverContext = /*#__PURE__*/ React.createContext(false);
 const Popover = /*#__PURE__*/ React.forwardRef(function Popover(t0, forwardRef) {
-	var _open;
 	const $ = c(18);
 	let className;
 	let open;
@@ -32,7 +31,7 @@ const Popover = /*#__PURE__*/ React.forwardRef(function Popover(t0, forwardRef)
 		t1 = $[5];
 	}
 	const caret = t1 === void 0 ? "top" : t1;
-	const t2 = (_open = open) !== null && _open !== void 0 ? _open : false;
+	const t2 = open !== null && open !== void 0 ? open : false;
 	const t3 = open ? "" : void 0;
 	const t4 = relative ? "" : void 0;
 	let t5;
@@ -74,7 +73,6 @@ const Popover = /*#__PURE__*/ React.forwardRef(function Popover(t0, forwardRef)
 });
 Popover.displayName = "Popover";
 const PopoverContent = (t0) => {
-	var _onClickOutside, _ignoreClickRefs;
 	const $ = c(22);
 	let className;
 	let ignoreClickRefs;
@@ -106,8 +104,8 @@ const PopoverContent = (t0) => {
 	const height = t2 === void 0 ? "fit-content" : t2;
 	const divRef = useRef(null);
 	const open = React.useContext(PopoverContext);
-	const outsideClickHandler = (_onClickOutside = onClickOutside) !== null && _onClickOutside !== void 0 ? _onClickOutside : _temp;
-	const t3 = (_ignoreClickRefs = ignoreClickRefs) !== null && _ignoreClickRefs !== void 0 ? _ignoreClickRefs : EMPTY_IGNORE_CLICK_REFS;
+	const outsideClickHandler = onClickOutside !== null && onClickOutside !== void 0 ? onClickOutside : _temp;
+	const t3 = ignoreClickRefs !== null && ignoreClickRefs !== void 0 ? ignoreClickRefs : EMPTY_IGNORE_CLICK_REFS;
 	let t4;
 	if ($[8] !== outsideClickHandler || $[9] !== t3) {
 		t4 = {

package/dist/ProgressBar/ProgressBar.js

@@ -38,8 +38,7 @@ const Item = /*#__PURE__*/ forwardRef((t0, forwardRef) => {
 	const progressAsNumber = typeof progress === "string" ? parseInt(progress, 10) : progress;
 	let t1;
 	if ($[9] !== ariaValueNow || $[10] !== progressAsNumber) {
-		var _ariaValueNow;
-		t1 = (_ariaValueNow = ariaValueNow) !== null && _ariaValueNow !== void 0 ? _ariaValueNow : progressAsNumber !== void 0 && progressAsNumber >= 0 ? Math.round(progressAsNumber) : 0;
+		t1 = ariaValueNow !== null && ariaValueNow !== void 0 ? ariaValueNow : progressAsNumber !== void 0 && progressAsNumber >= 0 ? Math.round(progressAsNumber) : 0;
 		$[9] = ariaValueNow;
 		$[10] = progressAsNumber;
 		$[11] = t1;

package/dist/SegmentedControl/SegmentedControlButton.js

@@ -6,7 +6,6 @@ import { clsx } from "clsx";
 import { isElement } from "react-is";
 //#region src/SegmentedControl/SegmentedControlButton.tsx
 const SegmentedControlButton = (t0) => {
-	var _leadingVisual;
 	const $ = c(36);
 	let children;
 	let className;
@@ -56,7 +55,7 @@ const SegmentedControlButton = (t0) => {
 		ariaDisabled = $[10];
 		rest = $[11];
 	}
-	const LeadingVisual = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : leadingIcon;
+	const LeadingVisual = leadingVisual !== null && leadingVisual !== void 0 ? leadingVisual : leadingIcon;
 	let t1;
 	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = clsx(SegmentedControl_module_css_default.Item);

package/dist/Select/Select.js

@@ -47,7 +47,7 @@ const ArrowIndicator = (t0) => {
 	return t2;
 };
 const Select = /*#__PURE__*/ React.forwardRef((t0, ref) => {
-	var _ref, _defaultValue;
+	var _ref;
 	const $ = c(37);
 	let block;
 	let children;
@@ -99,7 +99,7 @@ const Select = /*#__PURE__*/ React.forwardRef((t0, ref) => {
 		$[14] = t4;
 	} else t4 = $[14];
 	const t5 = Boolean(placeholder);
-	const t6 = (_ref = (_defaultValue = defaultValue) !== null && _defaultValue !== void 0 ? _defaultValue : placeholder) !== null && _ref !== void 0 ? _ref : void 0;
+	const t6 = (_ref = defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) !== null && _ref !== void 0 ? _ref : void 0;
 	let t7;
 	if ($[15] !== placeholder || $[16] !== required) {
 		t7 = placeholder && /* @__PURE__ */ jsx("option", {

package/dist/SelectPanel/SelectPanel.d.ts

@@ -112,7 +112,7 @@ declare const SelectPanel: typeof Panel & {
   SecondaryActionButton: React.FC<ButtonProps>;
   SecondaryActionLink: React.FC<LinkButtonProps & {
     alignContent?: AlignContent;
-    icon?: React.FunctionComponent<IconProps> | React.ElementType | React.ReactElement<any> | null;
+    icon?: React.ReactNode | React.ComponentType<IconProps> | React.ExoticComponent<IconProps>;
     leadingVisual?: React.ElementType | React.ReactElement<any> | null;
     trailingVisual?: React.ElementType | React.ReactElement<any> | null;
     trailingAction?: React.ElementType | null;

package/dist/SelectPanel/SelectPanel.js

@@ -427,7 +427,7 @@ function Panel({ open, onOpenChange, renderAnchor = defaultRenderAnchor, anchorR
 	} : void 0, "anchored");
 	const preventBubbling = useCallback((event) => {
 		var _overlayProps$onKeyDo;
-		overlayProps === null || overlayProps === void 0 || (_overlayProps$onKeyDo = overlayProps.onKeyDown) == null || _overlayProps$onKeyDo.call(overlayProps, event);
+		overlayProps === null || overlayProps === void 0 || (_overlayProps$onKeyDo = overlayProps.onKeyDown) === null || _overlayProps$onKeyDo === void 0 || _overlayProps$onKeyDo.call(overlayProps, event);
 		const activeElement = document.activeElement;
 		if (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA") return;
 		if (event.ctrlKey || event.altKey || event.metaKey) return;

package/dist/Spinner/Spinner.js

@@ -14,7 +14,6 @@ const sizeMap = {
 	large: "64px"
 };
 function Spinner(t0) {
-	var _ariaLabel;
 	const $ = c(35);
 	let ariaLabel;
 	let className;
@@ -96,7 +95,7 @@ function Spinner(t0) {
 		$[16] = t8;
 	} else t8 = $[16];
 	const mergedStyle = t8;
-	const t9 = (_ariaLabel = ariaLabel) !== null && _ariaLabel !== void 0 ? _ariaLabel : void 0;
+	const t9 = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : void 0;
 	const t10 = hasHiddenLabel ? labelId : void 0;
 	let t11;
 	if ($[17] !== className) {

package/dist/Textarea/Textarea.d.ts

@@ -25,7 +25,7 @@ type TextareaProps = {
    */
   autoSize?: boolean;
   /**
-   * apply a high contrast color to background
+   * @deprecated Omit this prop to use the default background.
    */
   contrast?: boolean;
   /**
@@ -76,7 +76,7 @@ declare const Textarea: React.ForwardRefExoticComponent<{
    */
   autoSize?: boolean;
   /**
-   * apply a high contrast color to background
+   * @deprecated Omit this prop to use the default background.
    */
   contrast?: boolean;
   /**

package/dist/ToggleSwitch/ToggleSwitch.js

@@ -71,7 +71,6 @@ const LineIcon = (t0) => {
 	return t4;
 };
 const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props, ref) {
-	var _buttonLabelOn, _buttonLabelOff;
 	const $ = c(90);
 	let ariaDescribedby;
 	let ariaLabelledby;
@@ -222,7 +221,7 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
 	} else t11 = $[39];
 	const t12 = !acceptsInteraction;
 	const t13 = !isOn;
-	const t14 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
+	const t14 = buttonLabelOn !== null && buttonLabelOn !== void 0 ? buttonLabelOn : "On";
 	let t15;
 	if ($[40] !== t13 || $[41] !== t14) {
 		t15 = /* @__PURE__ */ jsx("span", {
@@ -234,7 +233,7 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
 		$[41] = t14;
 		$[42] = t15;
 	} else t15 = $[42];
-	const t16 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
+	const t16 = buttonLabelOff !== null && buttonLabelOff !== void 0 ? buttonLabelOff : "Off";
 	let t17;
 	if ($[43] !== isOn || $[44] !== t16) {
 		t17 = /* @__PURE__ */ jsx("span", {

package/dist/TopicTag/TopicTag.js

@@ -4,7 +4,6 @@ import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 //#region src/TopicTag/TopicTag.tsx
 function TopicTag(t0) {
-	var _as;
 	const $ = c(12);
 	let as;
 	let children;
@@ -23,7 +22,7 @@ function TopicTag(t0) {
 		className = $[3];
 		rest = $[4];
 	}
-	const BaseComponent = (_as = as) !== null && _as !== void 0 ? _as : "a";
+	const BaseComponent = as !== null && as !== void 0 ? as : "a";
 	let t1;
 	if ($[5] !== className) {
 		t1 = clsx(className, TopicTag_module_css_default.TopicTag);

package/dist/UnderlineNav/UnderlineNavItem.js

@@ -8,7 +8,6 @@ import { forwardRef, useContext, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/UnderlineNav/UnderlineNavItem.tsx
 const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
-	var _leadingVisual;
 	const $ = c(33);
 	let Icon;
 	let ariaCurrent;
@@ -45,8 +44,7 @@ const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
 	const Component = t0 === void 0 ? "a" : t0;
 	let t1;
 	if ($[10] !== Component || $[11] !== href) {
-		var _href;
-		t1 = Component === "a" ? { href: (_href = href) !== null && _href !== void 0 ? _href : "#" } : href === void 0 ? {} : { href };
+		t1 = Component === "a" ? { href: href !== null && href !== void 0 ? href : "#" } : href === void 0 ? {} : { href };
 		$[10] = Component;
 		$[11] = href;
 		$[12] = t1;
@@ -75,7 +73,7 @@ const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
 	} else t3 = $[16];
 	const clickHandler = t3;
 	const t4 = isOverflowing ? true : allProps["aria-hidden"];
-	const t5 = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : Icon;
+	const t5 = leadingVisual !== null && leadingVisual !== void 0 ? leadingVisual : Icon;
 	const t6 = isOverflowing ? -1 : allProps.tabIndex;
 	let t7;
 	if ($[17] !== Component || $[18] !== ariaCurrent || $[19] !== children || $[20] !== clickHandler || $[21] !== counter || $[22] !== forwardedRef || $[23] !== hrefProps || $[24] !== keyDownHandler || $[25] !== loadingCounters || $[26] !== props || $[27] !== t5 || $[28] !== t6) {

package/dist/deprecated/ActionList/List.js

@@ -86,7 +86,7 @@ const List = /*#__PURE__*/ React.forwardRef((props, forwardedRef) => {
 		for (const itemProps_0 of restProps.items) {
 			var _group$items$length, _group$items, _group$items2;
 			const group = groupMap.get(itemProps_0.groupId);
-			const itemIndex_0 = (_group$items$length = group === null || group === void 0 ? void 0 : (_group$items = group.items) === null || _group$items === void 0 ? void 0 : _group$items.length) !== null && _group$items$length !== void 0 ? _group$items$length : 0;
+			const itemIndex_0 = (_group$items$length = group === null || group === void 0 || (_group$items = group.items) === null || _group$items === void 0 ? void 0 : _group$items.length) !== null && _group$items$length !== void 0 ? _group$items$length : 0;
 			groupMap.set(itemProps_0.groupId, {
 				...group,
 				items: [...(_group$items2 = group === null || group === void 0 ? void 0 : group.items) !== null && _group$items2 !== void 0 ? _group$items2 : [], renderItem({

package/dist/experimental/SelectPanel2/SelectPanel.d.ts

@@ -52,7 +52,7 @@ type SelectPanelMessageProps = {
 declare const SelectPanel: React.FC<SelectPanelProps> & {
   Button: WithSlotMarker<React.ForwardRefExoticComponent<{
     alignContent?: AlignContent;
-    icon?: React.FunctionComponent<import("@primer/octicons-react").IconProps> | React.ElementType | React.ReactElement<any> | null;
+    icon?: React.ReactNode | React.ComponentType<import("@primer/octicons-react").IconProps> | React.ExoticComponent<import("@primer/octicons-react").IconProps>;
     leadingVisual?: React.ElementType | React.ReactElement<any> | null;
     trailingVisual?: React.ElementType | React.ReactElement<any> | null;
     trailingAction?: React.ElementType | null;

package/dist/internal/components/InputLabel.js

@@ -54,12 +54,11 @@ function InputLabel(t0) {
 	} else t4 = $[13];
 	let t5;
 	if ($[14] !== children || $[15] !== required || $[16] !== requiredIndicator || $[17] !== requiredText) {
-		var _requiredText;
 		t5 = required || requiredText ? /* @__PURE__ */ jsxs("span", {
 			className: InputLabel_module_css_default.RequiredText,
 			children: [/* @__PURE__ */ jsx("span", { children }), /* @__PURE__ */ jsx("span", {
 				"aria-hidden": requiredIndicator ? void 0 : true,
-				children: (_requiredText = requiredText) !== null && _requiredText !== void 0 ? _requiredText : "*"
+				children: requiredText !== null && requiredText !== void 0 ? requiredText : "*"
 			})]
 		}) : children;
 		$[14] = children;

package/dist/internal/components/TextInputInnerAction.js

@@ -94,13 +94,12 @@ const TextInputAction = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	} else t6 = $[17];
 	let t7;
 	if ($[18] !== accessibleLabel || $[19] !== ariaLabel || $[20] !== children || $[21] !== forwardedRef || $[22] !== icon || $[23] !== rest || $[24] !== styleProps || $[25] !== tooltipDirection || $[26] !== variant) {
-		var _tooltipDirection;
 		t7 = /* @__PURE__ */ jsx("span", {
 			className: t6,
 			"data-component": "TextInput.Action",
 			children: icon && !children && ariaLabel ? /* @__PURE__ */ jsx(IconButton, {
 				...accessibleLabel,
-				tooltipDirection: (_tooltipDirection = tooltipDirection) !== null && _tooltipDirection !== void 0 ? _tooltipDirection : "s",
+				tooltipDirection: tooltipDirection !== null && tooltipDirection !== void 0 ? tooltipDirection : "s",
 				variant,
 				type: "button",
 				icon,

package/dist/internal/components/TextInputWrapper.d.ts

@@ -5,6 +5,9 @@ import React, { ComponentProps } from "react";
 type TextInputSizes = 'small' | 'medium' | 'large';
 type StyledTextInputBaseWrapperProps = {
   block?: boolean;
+  /**
+   * @deprecated Omit this prop to use the default background.
+   */
   contrast?: boolean;
   disabled?: boolean;
   hasTrailingAction?: boolean;

package/dist/internal/hooks/useThemeProvider.js

@@ -53,7 +53,7 @@ function useThemeProvider(props) {
 }
 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)");
+	const media = (_window = window) === null || _window === 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);
 }
@@ -64,8 +64,8 @@ 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";
+	var _window2, _window2$matchMedia;
+	return (_window2 = window) !== null && _window2 !== void 0 && (_window2$matchMedia = _window2.matchMedia) !== null && _window2$matchMedia !== void 0 && (_window2$matchMedia = _window2$matchMedia.call(_window2, "(prefers-color-scheme: dark)")) !== null && _window2$matchMedia !== void 0 && _window2$matchMedia.matches ? "night" : "day";
 }
 //#endregion
 export { useThemeProvider };

package/generated/components.json

@@ -10,7 +10,7 @@
       "stories": [
         {
           "id": "experimental-components-actionbar--default",
-          "code": "() => (\n  <ActionBar aria-label=\"Toolbar\">\n    <ActionBar.IconButton\n      icon={BoldIcon}\n      aria-label=\"Bold\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={ItalicIcon}\n      aria-label=\"Italic\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={CodeIcon}\n      aria-label=\"Code\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={LinkIcon}\n      aria-label=\"Link\"\n    ></ActionBar.IconButton>\n    <ActionBar.Divider />\n    <ActionBar.IconButton\n      icon={FileAddedIcon}\n      aria-label=\"File Added\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={SearchIcon}\n      aria-label=\"Search\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={QuoteIcon}\n      aria-label=\"Insert Quote\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={ListUnorderedIcon}\n      aria-label=\"Unordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={ListOrderedIcon}\n      aria-label=\"Ordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={TasklistIcon}\n      aria-label=\"Task List\"\n      onClick={() => alert('Task List clicked')}\n    ></ActionBar.IconButton>\n  </ActionBar>\n)"
+          "code": "() => (\n  <ActionBar aria-label=\"Toolbar\">\n    <ActionBar.IconButton\n      icon={<BoldIcon />}\n      aria-label=\"Bold\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<ItalicIcon />}\n      aria-label=\"Italic\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<CodeIcon />}\n      aria-label=\"Code\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<LinkIcon />}\n      aria-label=\"Link\"\n    ></ActionBar.IconButton>\n    <ActionBar.Divider />\n    <ActionBar.IconButton\n      icon={<FileAddedIcon />}\n      aria-label=\"File Added\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<SearchIcon />}\n      aria-label=\"Search\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<QuoteIcon />}\n      aria-label=\"Insert Quote\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<ListUnorderedIcon />}\n      aria-label=\"Unordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<ListOrderedIcon />}\n      aria-label=\"Ordered List\"\n    ></ActionBar.IconButton>\n    <ActionBar.IconButton\n      icon={<TasklistIcon />}\n      aria-label=\"Task List\"\n      onClick={() => alert('Task List clicked')}\n    ></ActionBar.IconButton>\n  </ActionBar>\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -2003,63 +2003,63 @@
       "stories": [
         {
           "id": "components-iconbutton--default",
-          "code": "() => <IconButton icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--primary",
-          "code": "() => <IconButton icon={HeartIcon} variant=\"primary\" aria-label=\"Favorite\" />"
+          "code": "() => (\n  <IconButton icon={<HeartIcon />} variant=\"primary\" aria-label=\"Favorite\" />\n)"
         },
         {
           "id": "components-iconbutton-features--danger",
-          "code": "() => <IconButton icon={HeartIcon} variant=\"danger\" aria-label=\"Favorite\" />"
+          "code": "() => (\n  <IconButton icon={<HeartIcon />} variant=\"danger\" aria-label=\"Favorite\" />\n)"
         },
         {
           "id": "components-iconbutton-features--invisible",
-          "code": "() => <IconButton icon={HeartIcon} variant=\"invisible\" aria-label=\"Favorite\" />"
+          "code": "() => (\n  <IconButton icon={<HeartIcon />} variant=\"invisible\" aria-label=\"Favorite\" />\n)"
         },
         {
           "id": "components-iconbutton-features--disabled",
-          "code": "() => <IconButton disabled icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton disabled icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--small",
-          "code": "() => <IconButton size=\"small\" icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton size=\"small\" icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--medium",
-          "code": "() => <IconButton size=\"medium\" icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton size=\"medium\" icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--large",
-          "code": "() => <IconButton size=\"large\" icon={HeartIcon} aria-label=\"Favorite\" />"
+          "code": "() => <IconButton size=\"large\" icon={<HeartIcon />} aria-label=\"Favorite\" />"
         },
         {
           "id": "components-iconbutton-features--with-description",
-          "code": "() => (\n  <IconButton\n    icon={InboxIcon}\n    aria-label=\"Notifications\"\n    description=\"You have no unread notifications.\"\n  />\n)"
+          "code": "() => (\n  <IconButton\n    icon={<InboxIcon />}\n    aria-label=\"Notifications\"\n    description=\"You have no unread notifications.\"\n  />\n)"
         },
         {
           "id": "components-iconbutton-features--external-tooltip",
-          "code": "() => (\n  <Tooltip\n    text=\"this is a supportive description for icon button\"\n    direction=\"se\"\n  >\n    <IconButton icon={HeartIcon} aria-label=\"HeartIcon\" />\n  </Tooltip>\n)"
+          "code": "() => (\n  <Tooltip\n    text=\"this is a supportive description for icon button\"\n    direction=\"se\"\n  >\n    <IconButton icon={<HeartIcon />} aria-label=\"HeartIcon\" />\n  </Tooltip>\n)"
         },
         {
           "id": "components-iconbutton-features--as-a-menu-anchor",
-          "code": "() => (\n  <ActionMenu>\n    <ActionMenu.Anchor>\n      <IconButton icon={ChevronDownIcon} aria-label=\"Something\" />\n    </ActionMenu.Anchor>\n\n    <ActionMenu.Overlay width=\"medium\">\n      <ActionList>\n        <ActionList.Item onSelect={() => alert('Copy link clicked')}>\n          Copy link\n          <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Quote reply clicked')}>\n          Quote reply\n          <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Edit comment clicked')}>\n          Edit comment\n          <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Divider />\n        <ActionList.Item\n          variant=\"danger\"\n          onSelect={() => alert('Delete file clicked')}\n        >\n          Delete file\n          <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>\n        </ActionList.Item>\n      </ActionList>\n    </ActionMenu.Overlay>\n  </ActionMenu>\n)"
+          "code": "() => (\n  <ActionMenu>\n    <ActionMenu.Anchor>\n      <IconButton icon={<ChevronDownIcon />} aria-label=\"Something\" />\n    </ActionMenu.Anchor>\n\n    <ActionMenu.Overlay width=\"medium\">\n      <ActionList>\n        <ActionList.Item onSelect={() => alert('Copy link clicked')}>\n          Copy link\n          <ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Quote reply clicked')}>\n          Quote reply\n          <ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Item onSelect={() => alert('Edit comment clicked')}>\n          Edit comment\n          <ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>\n        </ActionList.Item>\n        <ActionList.Divider />\n        <ActionList.Item\n          variant=\"danger\"\n          onSelect={() => alert('Delete file clicked')}\n        >\n          Delete file\n          <ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>\n        </ActionList.Item>\n      </ActionList>\n    </ActionMenu.Overlay>\n  </ActionMenu>\n)"
         },
         {
           "id": "components-iconbutton-features--loading",
-          "code": "() => (\n  <IconButton loading icon={HeartIcon} variant=\"primary\" aria-label=\"Primary\" />\n)"
+          "code": "() => (\n  <IconButton\n    loading\n    icon={<HeartIcon />}\n    variant=\"primary\"\n    aria-label=\"Primary\"\n  />\n)"
         },
         {
           "id": "components-iconbutton-features--loading-trigger",
-          "code": "() => {\n  const [isLoading, setIsLoading] = useState(false)\n  const handleClick = () => {\n    setIsLoading(true)\n    setTimeout(() => {\n      setIsLoading(false)\n    }, 3000)\n  }\n  return (\n    <IconButton\n      loading={isLoading}\n      onClick={handleClick}\n      icon={DownloadIcon}\n      aria-label=\"Download\"\n    />\n  )\n}"
+          "code": "() => {\n  const [isLoading, setIsLoading] = useState(false)\n  const handleClick = () => {\n    setIsLoading(true)\n    setTimeout(() => {\n      setIsLoading(false)\n    }, 3000)\n  }\n  return (\n    <IconButton\n      loading={isLoading}\n      onClick={handleClick}\n      icon={<DownloadIcon />}\n      aria-label=\"Download\"\n    />\n  )\n}"
         },
         {
           "id": "components-iconbutton-features--keybinding-hint-on-description",
-          "code": "() => (\n  <IconButton\n    icon={InboxIcon}\n    aria-label=\"Notifications\"\n    description=\"You have unread notifications\"\n    keybindingHint=\"G+N\"\n  />\n)"
+          "code": "() => (\n  <IconButton\n    icon={<InboxIcon />}\n    aria-label=\"Notifications\"\n    description=\"You have unread notifications\"\n    keybindingHint=\"G+N\"\n  />\n)"
         },
         {
           "id": "components-iconbutton-features--keybinding-hint",
-          "code": "() => <IconButton icon={BoldIcon} aria-label=\"Bold\" keybindingHint=\"Mod+B\" />"
+          "code": "() => (\n  <IconButton icon={<BoldIcon />} aria-label=\"Bold\" keybindingHint=\"Mod+B\" />\n)"
         }
       ],
       "importPath": "@primer/react",
@@ -2100,9 +2100,9 @@
         },
         {
           "name": "icon",
-          "type": "Component",
+          "type": "React.ReactNode | React.ComponentType<IconProps> | React.ExoticComponent<IconProps>",
           "defaultValue": "",
-          "description": "provide an octicon. It will be placed in the center of the button"
+          "description": "Provide an icon component or React node. It will be placed in the center of the button. Use a React element when passing an icon from a Server Component."
         },
         {
           "name": "aria-label",
@@ -8048,7 +8048,8 @@
           "name": "contrast",
           "type": "boolean",
           "defaultValue": "false",
-          "description": "Changes background color to a higher contrast color"
+          "deprecated": true,
+          "description": "Deprecated. Omit this prop to use the default background."
         },
         {
           "name": "size",
@@ -8398,7 +8399,8 @@
           "name": "contrast",
           "type": "boolean",
           "defaultValue": "false",
-          "description": "Changes background color to a higher contrast color"
+          "deprecated": true,
+          "description": "Deprecated. Omit this prop to use the default background."
         },
         {
           "name": "validationStatus",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.42.0-rc.68e6f6ecb",
+  "version": "38.42.0-rc.7ee8d8fea",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -94,14 +94,16 @@
   },
   "devDependencies": {
     "@actions/core": "1.11.1",
-    "@babel/cli": "7.28.6",
-    "@babel/core": "7.29.6",
-    "@babel/parser": "7.29.0",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "7.21.0",
-    "@babel/plugin-transform-modules-commonjs": "7.28.6",
-    "@babel/preset-react": "7.28.5",
-    "@babel/preset-typescript": "7.28.5",
+    "@babel/cli": "8.0.6",
+    "@babel/core": "8.0.6",
+    "@babel/generator": "8.0.6",
+    "@babel/parser": "8.0.6",
+    "@babel/plugin-transform-nullish-coalescing-operator": "8.0.1",
+    "@babel/plugin-transform-optional-chaining": "8.0.5",
+    "@babel/plugin-transform-modules-commonjs": "8.0.1",
+    "@babel/preset-react": "8.0.1",
+    "@babel/preset-typescript": "8.0.1",
+    "@babel/types": "8.0.6",
     "@figma/code-connect": "1.3.2",
     "@primer/css": "^21.5.1",
     "@primer/doc-gen": "^0.0.1",
@@ -118,7 +120,6 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/babel__core": "^7.20.5",
     "@types/lodash.groupby": "4.6.9",
     "@types/lodash.isempty": "4.4.9",
     "@types/lodash.isobject": "3.0.9",
@@ -131,13 +132,11 @@
     "afterframe": "^1.0.2",
     "ajv": "8.18.0",
     "axe-core": "4.9.1",
-    "babel-core": "7.0.0-bridge.0",
     "babel-plugin-add-react-displayname": "0.0.5",
     "babel-plugin-dev-expression": "0.2.3",
     "babel-plugin-macros": "3.1.0",
     "babel-plugin-open-source": "1.3.4",
     "babel-plugin-transform-replace-expressions": "0.2.0",
-    "babel-polyfill": "6.26.0",
     "chalk": "^5.4.1",
     "change-case": "5.4.4",
     "concurrently": "9.1.2",