@primer/react 38.42.0-rc.700f75ee0 → 38.42.0-rc.aa567b15e

package/CHANGELOG.md

@@ -4,8 +4,18 @@
 
 ### Minor Changes
 
+- [#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/Overlay/Overlay.d.ts

@@ -54,6 +54,7 @@ type ContainerProps = {
   portalContainerName?: string;
   preventOverflow?: boolean;
   preventFocusOnOpen?: boolean;
+  preventFocusOnClose?: boolean;
   returnFocusRef: React.RefObject<HTMLElement | null>;
 };
 type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
@@ -68,6 +69,7 @@ type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
  * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
  * @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
  * @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
+ * @param preventFocusOnClose Optional. If true, focus will not be returned when the component is unmounted. Consumers must manage focus themselves.
  * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
  * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
  * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.

package/dist/Overlay/Overlay.js

@@ -76,12 +76,13 @@ const BaseOverlay = /*#__PURE__*/ React.forwardRef(({ visibility, height, width,
 * @param portalContainerName Optional. The name of the portal container to render the Overlay into.
 * @param preventOverflow Optional. The Overlay width will be adjusted responsively if there is not enough space to display the Overlay. If `preventOverflow` is `true`, the width of the `Overlay` will not be adjusted.
 * @param preventFocusOnOpen Optional. If 'true', focus will not be applied when the component is first mounted, even if initialFocusRef prop is given.
+* @param preventFocusOnClose Optional. If true, focus will not be returned when the component is unmounted. Consumers must manage focus themselves.
 * @param returnFocusRef Required. Ref for the element to focus when the `Overlay` is closed.
 * @param right Optional. Horizontal right position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
 * @param width Sets the width of the `Overlay`, pick from our set list of widths, or pass `auto` to automatically set the width based on the content of the `Overlay`. `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `480px`, `xlarge` corresponds to `640px`, `xxlarge` corresponds to `960px`.
 
 */
-const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePortal, height = "auto", ignoreClickRefs, initialFocusRef, left, onClickOutside, onEscape, portalContainerName, preventOverflow = true, preventFocusOnOpen, returnFocusRef, right, role = "none", visibility = "visible", width = "auto", responsiveVariant, ...props }, forwardedRef) => {
+const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePortal, height = "auto", ignoreClickRefs, initialFocusRef, left, onClickOutside, onEscape, portalContainerName, preventOverflow = true, preventFocusOnOpen, preventFocusOnClose, returnFocusRef, right, role = "none", visibility = "visible", width = "auto", responsiveVariant, ...props }, forwardedRef) => {
 	const overlayRef = useRef(null);
 	const mergedOverlayRef = useMergedRefs(forwardedRef, overlayRef);
 	const slideAnimationDistance = 8;
@@ -94,7 +95,8 @@ const Overlay = /*#__PURE__*/ React.forwardRef(({ anchorSide, _PrivateDisablePor
 		ignoreClickRefs,
 		onClickOutside,
 		initialFocusRef,
-		preventFocusOnOpen
+		preventFocusOnOpen,
+		preventFocusOnClose
 	});
 	useEffect(() => {
 		var _overlayRef$current;