@primer/react 38.42.0-rc.ebd425836 → 38.42.0

package/dist/Overlay/Overlay.js

@@ -1,3 +1,4 @@
+import { c } from "../utils/react-compiler-runtime.js";
 import { useMergedRefs } from "../hooks/useMergedRefs.js";
 import useIsomorphicLayoutEffect from "../utils/useIsomorphicLayoutEffect.js";
 import { useOverlay } from "../hooks/useOverlay.js";
@@ -44,26 +45,133 @@ function getSlideAnimationStartingVector(anchorSide) {
 * @param bottom Optional. Vertical bottom position of the overlay, relative to its closest positioned ancestor (often its `Portal`).
 * @param position Optional. Sets how an element is positioned in a document. Defaults to `absolute` positioning.
 */
-const BaseOverlay = /*#__PURE__*/ React.forwardRef(({ visibility, height, width, top, left, right, bottom, position, style: styleFromProps, className, maxHeight, maxWidth, as: Component = "div", ...rest }, forwardedRef) => {
-	return /* @__PURE__ */ jsx(Component, {
-		...rest,
-		ref: forwardedRef,
-		style: {
-			"--top": typeof top === "number" ? `${top}px` : top,
-			"--left": typeof left === "number" ? `${left}px` : left,
-			"--right": typeof right === "number" ? `${right}px` : right,
-			"--bottom": typeof bottom === "number" ? `${bottom}px` : bottom,
+const BaseOverlay = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
+	const $ = c(41);
+	let bottom;
+	let className;
+	let height;
+	let left;
+	let maxHeight;
+	let maxWidth;
+	let position;
+	let rest;
+	let right;
+	let styleFromProps;
+	let t1;
+	let top;
+	let visibility;
+	let width;
+	if ($[0] !== t0) {
+		({visibility, height, width, top, left, right, bottom, position, style: styleFromProps, className, maxHeight, maxWidth, as: t1, ...rest} = t0);
+		$[0] = t0;
+		$[1] = bottom;
+		$[2] = className;
+		$[3] = height;
+		$[4] = left;
+		$[5] = maxHeight;
+		$[6] = maxWidth;
+		$[7] = position;
+		$[8] = rest;
+		$[9] = right;
+		$[10] = styleFromProps;
+		$[11] = t1;
+		$[12] = top;
+		$[13] = visibility;
+		$[14] = width;
+	} else {
+		bottom = $[1];
+		className = $[2];
+		height = $[3];
+		left = $[4];
+		maxHeight = $[5];
+		maxWidth = $[6];
+		position = $[7];
+		rest = $[8];
+		right = $[9];
+		styleFromProps = $[10];
+		t1 = $[11];
+		top = $[12];
+		visibility = $[13];
+		width = $[14];
+	}
+	const Component = t1 === void 0 ? "div" : t1;
+	const t2 = typeof top === "number" ? `${top}px` : top;
+	const t3 = typeof left === "number" ? `${left}px` : left;
+	const t4 = typeof right === "number" ? `${right}px` : right;
+	const t5 = typeof bottom === "number" ? `${bottom}px` : bottom;
+	let t6;
+	if ($[15] !== position || $[16] !== styleFromProps || $[17] !== t2 || $[18] !== t3 || $[19] !== t4 || $[20] !== t5) {
+		t6 = {
+			"--top": t2,
+			"--left": t3,
+			"--right": t4,
+			"--bottom": t5,
 			position,
 			...styleFromProps
-		},
-		[`data-width-${width}`]: "",
-		[`data-max-width-${maxWidth}`]: maxWidth ? "" : void 0,
-		[`data-height-${height}`]: "",
-		[`data-max-height-${maxHeight}`]: maxHeight ? "" : void 0,
-		[`data-visibility-${visibility}`]: "",
-		[`data-overflow-${rest.overflow}`]: rest.overflow ? "" : void 0,
-		className: clsx(className, Overlay_module_css_default.Overlay)
-	});
+		};
+		$[15] = position;
+		$[16] = styleFromProps;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	const t7 = t6;
+	const t8 = `data-width-${width}`;
+	const t9 = `data-max-width-${maxWidth}`;
+	const t10 = maxWidth ? "" : void 0;
+	const t11 = `data-height-${height}`;
+	const t12 = `data-max-height-${maxHeight}`;
+	const t13 = maxHeight ? "" : void 0;
+	const t14 = `data-visibility-${visibility}`;
+	const t15 = `data-overflow-${rest.overflow}`;
+	const t16 = rest.overflow ? "" : void 0;
+	let t17;
+	if ($[22] !== t10 || $[23] !== t11 || $[24] !== t12 || $[25] !== t13 || $[26] !== t14 || $[27] !== t15 || $[28] !== t16 || $[29] !== t8 || $[30] !== t9) {
+		t17 = {
+			[t8]: "",
+			[t9]: t10,
+			[t11]: "",
+			[t12]: t13,
+			[t14]: "",
+			[t15]: t16
+		};
+		$[22] = t10;
+		$[23] = t11;
+		$[24] = t12;
+		$[25] = t13;
+		$[26] = t14;
+		$[27] = t15;
+		$[28] = t16;
+		$[29] = t8;
+		$[30] = t9;
+		$[31] = t17;
+	} else t17 = $[31];
+	let t18;
+	if ($[32] !== className) {
+		t18 = clsx(className, Overlay_module_css_default.Overlay);
+		$[32] = className;
+		$[33] = t18;
+	} else t18 = $[33];
+	let t19;
+	if ($[34] !== Component || $[35] !== forwardedRef || $[36] !== rest || $[37] !== t17 || $[38] !== t18 || $[39] !== t7) {
+		t19 = /* @__PURE__ */ jsx(Component, {
+			...rest,
+			ref: forwardedRef,
+			style: t7,
+			...t17,
+			className: t18
+		});
+		$[34] = Component;
+		$[35] = forwardedRef;
+		$[36] = rest;
+		$[37] = t17;
+		$[38] = t18;
+		$[39] = t7;
+		$[40] = t19;
+	} else t19 = $[40];
+	return t19;
 });
 /**
 * @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
@@ -82,57 +190,184 @@ const BaseOverlay = /*#__PURE__*/ React.forwardRef(({ visibility, height, width,
 * @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, preventFocusOnClose, returnFocusRef, right, role = "none", visibility = "visible", width = "auto", responsiveVariant, ...props }, forwardedRef) => {
+const Overlay = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
+	const $ = c(49);
+	let _PrivateDisablePortal;
+	let anchorSide;
+	let ignoreClickRefs;
+	let initialFocusRef;
+	let left;
+	let onClickOutside;
+	let onEscape;
+	let portalContainerName;
+	let preventFocusOnClose;
+	let preventFocusOnOpen;
+	let props;
+	let responsiveVariant;
+	let returnFocusRef;
+	let right;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== t0) {
+		({anchorSide, _PrivateDisablePortal, height: t1, ignoreClickRefs, initialFocusRef, left, onClickOutside, onEscape, portalContainerName, preventOverflow: t2, preventFocusOnOpen, preventFocusOnClose, returnFocusRef, right, role: t3, visibility: t4, width: t5, responsiveVariant, ...props} = t0);
+		$[0] = t0;
+		$[1] = _PrivateDisablePortal;
+		$[2] = anchorSide;
+		$[3] = ignoreClickRefs;
+		$[4] = initialFocusRef;
+		$[5] = left;
+		$[6] = onClickOutside;
+		$[7] = onEscape;
+		$[8] = portalContainerName;
+		$[9] = preventFocusOnClose;
+		$[10] = preventFocusOnOpen;
+		$[11] = props;
+		$[12] = responsiveVariant;
+		$[13] = returnFocusRef;
+		$[14] = right;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+	} else {
+		_PrivateDisablePortal = $[1];
+		anchorSide = $[2];
+		ignoreClickRefs = $[3];
+		initialFocusRef = $[4];
+		left = $[5];
+		onClickOutside = $[6];
+		onEscape = $[7];
+		portalContainerName = $[8];
+		preventFocusOnClose = $[9];
+		preventFocusOnOpen = $[10];
+		props = $[11];
+		responsiveVariant = $[12];
+		returnFocusRef = $[13];
+		right = $[14];
+		t1 = $[15];
+		t2 = $[16];
+		t3 = $[17];
+		t4 = $[18];
+		t5 = $[19];
+	}
+	const height = t1 === void 0 ? "auto" : t1;
+	const preventOverflow = t2 === void 0 ? true : t2;
+	const role = t3 === void 0 ? "none" : t3;
+	const visibility = t4 === void 0 ? "visible" : t4;
+	const width = t5 === void 0 ? "auto" : t5;
 	const overlayRef = useRef(null);
 	const mergedOverlayRef = useMergedRefs(forwardedRef, overlayRef);
-	const slideAnimationDistance = 8;
-	const slideAnimationEasing = "cubic-bezier(0.33, 1, 0.68, 1)";
 	const cssAnchorPositioning = useFeatureFlag("primer_react_css_anchor_positioning");
-	useOverlay({
-		overlayRef,
-		returnFocusRef,
-		onEscape,
-		ignoreClickRefs,
-		onClickOutside,
-		initialFocusRef,
-		preventFocusOnOpen,
-		preventFocusOnClose
-	});
-	useEffect(() => {
-		var _overlayRef$current;
-		if (height === "initial" && (_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.clientHeight) overlayRef.current.style.height = `${overlayRef.current.clientHeight}px`;
-	}, [height]);
-	useIsomorphicLayoutEffect(() => {
-		var _overlayRef$current2;
-		const { x, y } = getSlideAnimationStartingVector(anchorSide);
-		if (!x && !y || !((_overlayRef$current2 = overlayRef.current) !== null && _overlayRef$current2 !== void 0 && _overlayRef$current2.animate) || visibility === "hidden") return;
-		overlayRef.current.animate({ transform: [`translate(${slideAnimationDistance * x}px, ${slideAnimationDistance * y}px)`, `translate(0, 0)`] }, {
-			duration: animationDuration,
-			easing: slideAnimationEasing
+	let t6;
+	if ($[20] !== ignoreClickRefs || $[21] !== initialFocusRef || $[22] !== onClickOutside || $[23] !== onEscape || $[24] !== preventFocusOnClose || $[25] !== preventFocusOnOpen || $[26] !== returnFocusRef) {
+		t6 = {
+			overlayRef,
+			returnFocusRef,
+			onEscape,
+			ignoreClickRefs,
+			onClickOutside,
+			initialFocusRef,
+			preventFocusOnOpen,
+			preventFocusOnClose
+		};
+		$[20] = ignoreClickRefs;
+		$[21] = initialFocusRef;
+		$[22] = onClickOutside;
+		$[23] = onEscape;
+		$[24] = preventFocusOnClose;
+		$[25] = preventFocusOnOpen;
+		$[26] = returnFocusRef;
+		$[27] = t6;
+	} else t6 = $[27];
+	useOverlay(t6);
+	let t7;
+	let t8;
+	if ($[28] !== height) {
+		t7 = () => {
+			var _overlayRef$current;
+			if (height === "initial" && (_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.clientHeight) overlayRef.current.style.height = `${overlayRef.current.clientHeight}px`;
+		};
+		t8 = [height];
+		$[28] = height;
+		$[29] = t7;
+		$[30] = t8;
+	} else {
+		t7 = $[29];
+		t8 = $[30];
+	}
+	useEffect(t7, t8);
+	let t10;
+	let t9;
+	if ($[31] !== anchorSide || $[32] !== visibility) {
+		t9 = () => {
+			var _overlayRef$current2;
+			const { x, y } = getSlideAnimationStartingVector(anchorSide);
+			if (!x && !y || !((_overlayRef$current2 = overlayRef.current) !== null && _overlayRef$current2 !== void 0 && _overlayRef$current2.animate) || visibility === "hidden") return;
+			overlayRef.current.animate({ transform: [`translate(${8 * x}px, ${8 * y}px)`, "translate(0, 0)"] }, {
+				duration: animationDuration,
+				easing: "cubic-bezier(0.33, 1, 0.68, 1)"
+			});
+		};
+		t10 = [
+			anchorSide,
+			8,
+			"cubic-bezier(0.33, 1, 0.68, 1)",
+			visibility
+		];
+		$[31] = anchorSide;
+		$[32] = visibility;
+		$[33] = t10;
+		$[34] = t9;
+	} else {
+		t10 = $[33];
+		t9 = $[34];
+	}
+	useIsomorphicLayoutEffect(t9, t10);
+	const leftPosition = left === void 0 && right === void 0 ? 0 : left;
+	const t11 = !preventOverflow ? true : void 0;
+	let t12;
+	if ($[35] !== height || $[36] !== leftPosition || $[37] !== mergedOverlayRef || $[38] !== props || $[39] !== responsiveVariant || $[40] !== right || $[41] !== role || $[42] !== t11 || $[43] !== visibility || $[44] !== width) {
+		t12 = /* @__PURE__ */ jsx(BaseOverlay, {
+			role,
+			width,
+			"data-reflow-container": t11,
+			ref: mergedOverlayRef,
+			left: leftPosition,
+			right,
+			height,
+			visibility,
+			"data-responsive": responsiveVariant,
+			...props
 		});
-	}, [
-		anchorSide,
-		slideAnimationDistance,
-		slideAnimationEasing,
-		visibility
-	]);
-	const overlayContent = /* @__PURE__ */ jsx(BaseOverlay, {
-		role,
-		width,
-		"data-reflow-container": !preventOverflow ? true : void 0,
-		ref: mergedOverlayRef,
-		left: left === void 0 && right === void 0 ? 0 : left,
-		right,
-		height,
-		visibility,
-		"data-responsive": responsiveVariant,
-		...props
-	});
+		$[35] = height;
+		$[36] = leftPosition;
+		$[37] = mergedOverlayRef;
+		$[38] = props;
+		$[39] = responsiveVariant;
+		$[40] = right;
+		$[41] = role;
+		$[42] = t11;
+		$[43] = visibility;
+		$[44] = width;
+		$[45] = t12;
+	} else t12 = $[45];
+	const overlayContent = t12;
 	if (_PrivateDisablePortal && cssAnchorPositioning) return overlayContent;
-	return /* @__PURE__ */ jsx(Portal_default, {
-		containerName: portalContainerName,
-		children: overlayContent
-	});
+	let t13;
+	if ($[46] !== overlayContent || $[47] !== portalContainerName) {
+		t13 = /* @__PURE__ */ jsx(Portal_default, {
+			containerName: portalContainerName,
+			children: overlayContent
+		});
+		$[46] = overlayContent;
+		$[47] = portalContainerName;
+		$[48] = t13;
+	} else t13 = $[48];
+	return t13;
 });
 //#endregion
 export { BaseOverlay, Overlay as default };

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) {