@primer/react 38.32.0-rc.68e0ffa22 → 38.32.0-rc.85de10233

package/dist/UnderlineNav/UnderlineNav-a06bbc74.css

@@ -0,0 +1,2 @@
+.prc-UnderlineNav-UnderlineWrapper-GWONT{animation:prc-UnderlineNav-detect-overflow-6HuSH linear;animation-timeline:scroll(self block);container-type:inline-size;--UnderlineNav_moreButton-display:none}.prc-UnderlineNav-UnderlineWrapper-GWONT[data-has-overflow=true]{--UnderlineNav_moreButton-display:flex}@keyframes prc-UnderlineNav-detect-overflow-6HuSH{0%,to{--UnderlineNav_moreButton-display:flex}}@container (width < 20rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=xsmall] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}@container (width < 34rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=small] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}@container (width < 48rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=medium] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}@container (width < 63.25rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=large] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}@container (width < 80rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=xlarge] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}@container (width < 87.5rem){.prc-UnderlineNav-UnderlineWrapper-GWONT[data-hide-icons-breakpoint=xxlarge] .prc-UnderlineNav-ItemsList-oj8gN [data-component=icon]{display:none}}.prc-UnderlineNav-WrapSpacer--aLgz{margin-inline-end:calc(var(--stack-gap-condensed,.5rem)*-1)}.prc-UnderlineNav-MoreButtonContainer-Dnrq6{align-items:center;display:var(--UnderlineNav_moreButton-display,flex)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]{position:relative}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current] .prc-UnderlineNav-OverflowMenuItemLabel-F80v6{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-OverflowMenuItem-7SG7M [aria-current]:after{background:var(--underlineNav-borderColor-active,#fd8c73);content:"";inset:var(--base-size-2,.125rem) auto var(--base-size-2,.125rem) 0;position:absolute;width:var(--base-size-2,.125rem)}.prc-UnderlineNav-MoreButtonDivider-dN0a-{border-left:var(--borderWidth-thin,.0625rem) solid var(--borderColor-muted,#d1d9e0b3);display:inline-block;height:var(--base-size-24,1.5rem);margin-inline:var(--base-size-4,.25rem);width:0}.prc-UnderlineNav-MoreButton-Y8soj{font-weight:var(--base-text-weight-normal,400);margin:0;position:relative}.prc-UnderlineNav-MoreButton-Y8soj>[data-component=trailingVisual]{margin-left:0}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]{font-weight:var(--base-text-weight-semibold,600)}.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));content:"";height:2px;inset:auto 0 0;margin-bottom:calc((var(--base-size-8,.5rem) + var(--borderWidth-thin,.0625rem))*-1);pointer-events:none;position:absolute}@media (forced-colors:active){.prc-UnderlineNav-MoreButton-Y8soj[data-current=true]:after{background-color:LinkText}}
+/*# sourceMappingURL=UnderlineNav-a06bbc74.css.map */

package/dist/UnderlineNav/UnderlineNav-a06bbc74.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/UnderlineNav/UnderlineNav.module.css.js"],"names":[],"mappings":"AAAA,yCAIE,uDAAiC,CACjC,qCAAsC,CACtC,0BAA2B,CAE3B,sCAKF,CAHE,iEACE,sCACF,CAIF,kDACE,MAEE,sCACF,CACF,CAGE,2BACE,oIACE,YACF,CACF,CAIA,2BACE,mIACE,YACF,CACF,CAIA,2BACE,oIACE,YACF,CACF,CAIA,8BACE,mIACE,YACF,CACF,CAIA,2BACE,oIACE,YACF,CACF,CAIA,6BACE,qIACE,YACF,CACF,CAGF,mCAGE,2DACF,CAEA,4CAEE,kBAAmB,CADnB,mDAEF,CAEA,wDACE,iBAcF,CAZE,sGACE,gDACF,CAEA,8DAME,yDAAkD,CALlD,UAAW,CAGX,kEAAmD,CADnD,iBAAkB,CADlB,gCAKF,CAGF,0CAEE,qFAAmE,CADnE,oBAAqB,CAIrB,iCAA2B,CAD3B,uCAAiC,CADjC,OAGF,CAEA,mCAEE,8CAA2C,CAD3C,QAAS,CAET,iBA6BF,CA3BE,mEACE,aACF,CAIA,sDACE,gDAmBF,CAjBE,4DAUE,iGAAoG,CAFpG,UAAW,CAFX,UAAW,CAJX,cAAe,CAGf,oFAAwE,CAExE,mBAAoB,CANpB,iBAeF,CAJE,8BAZF,4DAcI,yBAEJ,CADE","file":"UnderlineNav-a06bbc74.css","sourcesContent":[".UnderlineWrapper {\n  /* Progressive enhancement: Detect overflow using scroll-based animations.\n  The idiomatic way would be a scroll-state container query but browser support\n  is slightly better for animations. */\n  animation: detect-overflow linear;\n  animation-timeline: scroll(self block);\n  container-type: inline-size;\n\n  --UnderlineNav_moreButton-display: none;\n\n  &[data-has-overflow='true'] {\n    --UnderlineNav_moreButton-display: flex;\n  }\n}\n\n/* Set overflow button visibility with pure CSS to avoid a layout shift on hydration */\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --UnderlineNav_moreButton-display: flex;\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='xsmall'] {\n  @container (width < 20rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='small'] {\n  @container (width < 34rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='medium'] {\n  @container (width < 48rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='large'] {\n  @container (width < 63.25rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='xlarge'] {\n  @container (width < 80rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.UnderlineWrapper[data-hide-icons-breakpoint='xxlarge'] {\n  @container (width < 87.5rem) {\n    .ItemsList [data-component='icon'] {\n      display: none;\n    }\n  }\n}\n\n.WrapSpacer {\n  /* Cancel out the flex gap so the first real item has no leading gap */\n  /* stylelint-disable-next-line primer/spacing -- negative margin required to cancel the flex gap from the list */\n  margin-inline-end: calc(-1 * var(--stack-gap-condensed));\n}\n\n.MoreButtonContainer {\n  display: var(--UnderlineNav_moreButton-display, flex);\n  align-items: center;\n}\n\n.OverflowMenuItem [aria-current] {\n  position: relative;\n\n  .OverflowMenuItemLabel {\n    font-weight: var(--base-text-weight-semibold);\n  }\n\n  &::after {\n    content: '';\n    width: var(--base-size-2);\n    position: absolute;\n    inset: var(--base-size-2) auto var(--base-size-2) 0;\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--underlineNav-borderColor-active);\n  }\n}\n\n.MoreButtonDivider {\n  display: inline-block;\n  border-left: var(--borderWidth-thin) solid var(--borderColor-muted);\n  width: 0;\n  margin-inline: var(--base-size-4);\n  height: var(--base-size-24);\n}\n\n.MoreButton {\n  margin: 0; /* reset Safari extra margin */\n  font-weight: var(--base-text-weight-normal);\n  position: relative;\n\n  & > [data-component='trailingVisual'] {\n    margin-left: 0;\n  }\n\n  /* When the current item has overflowed into the menu, style the overflow\n   anchor so it looks like the current item (semibold text + active underline). */\n  &[data-current='true'] {\n    font-weight: var(--base-text-weight-semibold);\n\n    &::after {\n      position: absolute;\n      inset: auto 0 0;\n      /* Pull down same amount as the item-level decoration, plus the border width of the button */\n      /* stylelint-disable-next-line primer/spacing */\n      margin-bottom: calc(-1 * (var(--base-size-8) + var(--borderWidth-thin)));\n      height: 2px;\n      pointer-events: none;\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--underlineNav-borderColor-active, var(--color-primer-border-active, #fd8c73));\n\n      @media (forced-colors: active) {\n        /* Support for Windows Forced Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n        background-color: LinkText;\n      }\n    }\n  }\n}\n"]}

package/dist/UnderlineNav/UnderlineNav.d.ts

@@ -16,6 +16,11 @@ type UnderlineNavProps = {
    * Setting this to `flush` will remove the horizontal padding on the items.
    */
   variant?: 'inset' | 'flush';
+  /**
+   * Customize when the icons are hidden to save space. Set to `null` to always show icons.
+   * Defaults to `xxlarge`; if you know there won't be very many tabs you might set this to a smaller value.
+   */
+  hideIconsBreakpoint?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | null;
 };
 //#endregion
 export { UnderlineNavProps };

package/dist/UnderlineNav/UnderlineNav.js

@@ -18,143 +18,150 @@ import { forwardRef, useRef, useState } from "react";
 //#region src/UnderlineNav/UnderlineNav.tsx
 const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 	const $ = c(52);
-	const { as: t1, "aria-label": ariaLabel, loadingCounters: t2, variant: t3, className, children } = t0;
+	const { as: t1, "aria-label": ariaLabel, loadingCounters: t2, variant: t3, className, children, hideIconsBreakpoint: t4 } = t0;
 	const as = t1 === void 0 ? "nav" : t1;
 	const loadingCounters = t2 === void 0 ? false : t2;
 	const variant = t3 === void 0 ? "inset" : t3;
+	const hideIconsBreakpoint = t4 === void 0 ? "xxlarge" : t4;
 	const backupRef = useRef(null);
 	const navRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
 	const listRef = useRef(null);
-	const [hasEverOverflowed, setHasOverflowed] = useState(false);
 	const [registeredItems, setRegisteredItems] = UnderlineNavItemsRegistry.useRegistryState();
 	let isOverflowing;
 	let overflowMenuItems;
-	let t4;
-	if ($[0] !== hasEverOverflowed || $[1] !== registeredItems) {
+	let t5;
+	if ($[0] !== registeredItems) {
 		var _registeredItems$entr;
 		overflowMenuItems = Array.from((_registeredItems$entr = registeredItems === null || registeredItems === void 0 ? void 0 : registeredItems.entries()) !== null && _registeredItems$entr !== void 0 ? _registeredItems$entr : []).filter(_temp);
 		isOverflowing = overflowMenuItems.length > 0;
-		if (isOverflowing && !hasEverOverflowed) setHasOverflowed(true);
-		t4 = overflowMenuItems.some(_temp2);
-		$[0] = hasEverOverflowed;
-		$[1] = registeredItems;
-		$[2] = isOverflowing;
-		$[3] = overflowMenuItems;
-		$[4] = t4;
+		t5 = overflowMenuItems.some(_temp2);
+		$[0] = registeredItems;
+		$[1] = isOverflowing;
+		$[2] = overflowMenuItems;
+		$[3] = t5;
 	} else {
-		isOverflowing = $[2];
-		overflowMenuItems = $[3];
-		t4 = $[4];
+		isOverflowing = $[1];
+		overflowMenuItems = $[2];
+		t5 = $[3];
 	}
-	const overflowingCurrentItem = t4;
-	let t5;
-	if ($[5] !== children) {
-		t5 = getValidChildren(children);
-		$[5] = children;
-		$[6] = t5;
-	} else t5 = $[6];
-	const validChildren = t5;
+	const overflowingCurrentItem = t5;
 	let t6;
+	if ($[4] !== children) {
+		t6 = getValidChildren(children);
+		$[4] = children;
+		$[5] = t6;
+	} else t6 = $[5];
+	const validChildren = t6;
 	let t7;
-	if ($[7] !== ariaLabel || $[8] !== validChildren) {
-		t6 = () => {
+	let t8;
+	if ($[6] !== ariaLabel || $[7] !== validChildren) {
+		t7 = () => {
 			!(validChildren.filter(_temp3).length <= 1) && invariant(false, "Only one current element is allowed");
 			!ariaLabel && invariant(false, "Use the `aria-label` prop to provide an accessible label for assistive technology");
 		};
-		t7 = [validChildren, ariaLabel];
-		$[7] = ariaLabel;
-		$[8] = validChildren;
-		$[9] = t6;
-		$[10] = t7;
+		t8 = [validChildren, ariaLabel];
+		$[6] = ariaLabel;
+		$[7] = validChildren;
+		$[8] = t7;
+		$[9] = t8;
 	} else {
-		t6 = $[9];
-		t7 = $[10];
+		t7 = $[8];
+		t8 = $[9];
 	}
-	useDevOnlyEffect(t6, t7);
-	let t8;
-	if ($[11] !== loadingCounters) {
-		t8 = { loadingCounters };
-		$[11] = loadingCounters;
-		$[12] = t8;
-	} else t8 = $[12];
-	const contextValue = t8;
+	useDevOnlyEffect(t7, t8);
+	let t9;
+	if ($[10] !== loadingCounters) {
+		t9 = { loadingCounters };
+		$[10] = loadingCounters;
+		$[11] = t9;
+	} else t9 = $[11];
+	const contextValue = t9;
 	const [menuOpen, setMenuOpen] = useState(false);
 	if (menuOpen && !isOverflowing) setMenuOpen(false);
-	let t9;
-	if ($[13] !== ariaLabel) {
-		t9 = ariaLabel && /*#__PURE__*/ jsx(VisuallyHidden, {
+	let t10;
+	if ($[12] !== ariaLabel) {
+		t10 = ariaLabel && /*#__PURE__*/ jsx(VisuallyHidden, {
 			as: "h2",
 			children: `${ariaLabel} navigation`
 		});
-		$[13] = ariaLabel;
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== className) {
-		t10 = clsx(UnderlineNav_module_css_default.UnderlineWrapper, className);
-		$[15] = className;
-		$[16] = t10;
-	} else t10 = $[16];
-	const t11 = hasEverOverflowed ? "true" : void 0;
-	const t12 = isOverflowing ? "true" : void 0;
-	let t13;
+		$[12] = ariaLabel;
+		$[13] = t10;
+	} else t10 = $[13];
+	let t11;
+	if ($[14] !== className) {
+		t11 = clsx(UnderlineNav_module_css_default.UnderlineWrapper, className);
+		$[14] = className;
+		$[15] = t11;
+	} else t11 = $[15];
+	const t12 = hideIconsBreakpoint !== null && hideIconsBreakpoint !== void 0 ? hideIconsBreakpoint : void 0;
+	const t13 = isOverflowing ? "true" : void 0;
+	let t14;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /*#__PURE__*/ jsx("li", {
+			role: "presentation",
+			"aria-hidden": true,
+			className: UnderlineNav_module_css_default.WrapSpacer
+		});
+		$[16] = t14;
+	} else t14 = $[16];
+	let t15;
 	if ($[17] !== children || $[18] !== setRegisteredItems) {
-		t13 = /*#__PURE__*/ jsx(UnderlineNavItemsRegistry.Provider, {
+		t15 = /*#__PURE__*/ jsx(UnderlineNavItemsRegistry.Provider, {
 			setRegistry: setRegisteredItems,
 			children
 		});
 		$[17] = children;
 		$[18] = setRegisteredItems;
-		$[19] = t13;
-	} else t13 = $[19];
-	let t14;
-	if ($[20] !== navRef || $[21] !== t13) {
-		t14 = /*#__PURE__*/ jsx(UnderlineItemList, {
+		$[19] = t15;
+	} else t15 = $[19];
+	let t16;
+	if ($[20] !== navRef || $[21] !== t15) {
+		t16 = /*#__PURE__*/ jsxs(UnderlineItemList, {
 			ref: listRef,
 			role: "list",
 			className: UnderlineNav_module_css_default.ItemsList,
-			children: /*#__PURE__*/ jsx(OverflowObserverProvider, {
+			children: [t14, /*#__PURE__*/ jsx(OverflowObserverProvider, {
 				rootRef: navRef,
-				children: t13
-			})
+				children: t15
+			})]
 		});
 		$[20] = navRef;
-		$[21] = t13;
-		$[22] = t14;
-	} else t14 = $[22];
-	let t15;
+		$[21] = t15;
+		$[22] = t16;
+	} else t16 = $[22];
+	let t17;
 	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-		t15 = /*#__PURE__*/ jsx("div", { className: UnderlineNav_module_css_default.MoreButtonDivider });
-		$[23] = t15;
-	} else t15 = $[23];
-	const t16 = overflowingCurrentItem ? "true" : void 0;
-	const t17 = overflowingCurrentItem ? "More items, including current item" : void 0;
-	let t18;
+		t17 = /*#__PURE__*/ jsx("div", { className: UnderlineNav_module_css_default.MoreButtonDivider });
+		$[23] = t17;
+	} else t17 = $[23];
+	const t18 = overflowingCurrentItem ? "true" : void 0;
+	const t19 = overflowingCurrentItem ? "More items, including current item" : void 0;
+	let t20;
 	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = /*#__PURE__*/ jsxs("span", { children: ["More", /*#__PURE__*/ jsx(VisuallyHidden, {
+		t20 = /*#__PURE__*/ jsxs("span", { children: ["More", /*#__PURE__*/ jsx(VisuallyHidden, {
 			as: "span",
 			children: " items"
 		})] });
-		$[24] = t18;
-	} else t18 = $[24];
-	let t19;
-	if ($[25] !== t16 || $[26] !== t17) {
-		t19 = /*#__PURE__*/ jsx(ActionMenu.Button, {
+		$[24] = t20;
+	} else t20 = $[24];
+	let t21;
+	if ($[25] !== t18 || $[26] !== t19) {
+		t21 = /*#__PURE__*/ jsx(ActionMenu.Button, {
 			className: UnderlineNav_module_css_default.MoreButton,
 			variant: "invisible",
 			"data-component": "overflow-menu-button",
-			"data-current": t16,
-			"aria-label": t17,
-			children: t18
+			"data-current": t18,
+			"aria-label": t19,
+			children: t20
 		});
-		$[25] = t16;
-		$[26] = t17;
-		$[27] = t19;
-	} else t19 = $[27];
-	let t20;
+		$[25] = t18;
+		$[26] = t19;
+		$[27] = t21;
+	} else t21 = $[27];
+	let t22;
 	if ($[28] !== loadingCounters || $[29] !== overflowMenuItems || $[30] !== registeredItems) {
-		t20 = registeredItems === void 0 ? /*#__PURE__*/ jsx(ActionList.Item, { children: /*#__PURE__*/ jsx(SkeletonText, {}) }) : overflowMenuItems.map((t21) => {
-			const [key, allProps] = t21;
+		t22 = registeredItems === void 0 ? /*#__PURE__*/ jsx(ActionList.Item, { children: /*#__PURE__*/ jsx(SkeletonText, {}) }) : overflowMenuItems.map((t23) => {
+			const [key, allProps] = t23;
 			const { children: menuItemChildren, counter, onSelect, ...menuItemProps } = allProps;
 			return /*#__PURE__*/ jsxs(ActionList.LinkItem, {
 				onClick: (event) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(event),
@@ -172,65 +179,65 @@ const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
 		$[28] = loadingCounters;
 		$[29] = overflowMenuItems;
 		$[30] = registeredItems;
-		$[31] = t20;
-	} else t20 = $[31];
-	let t21;
-	if ($[32] !== t20) {
-		t21 = /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: t20 }) });
-		$[32] = t20;
-		$[33] = t21;
-	} else t21 = $[33];
-	let t22;
-	if ($[34] !== menuOpen || $[35] !== t19 || $[36] !== t21) {
-		t22 = /*#__PURE__*/ jsxs("div", {
+		$[31] = t22;
+	} else t22 = $[31];
+	let t23;
+	if ($[32] !== t22) {
+		t23 = /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: t22 }) });
+		$[32] = t22;
+		$[33] = t23;
+	} else t23 = $[33];
+	let t24;
+	if ($[34] !== menuOpen || $[35] !== t21 || $[36] !== t23) {
+		t24 = /*#__PURE__*/ jsxs("div", {
 			className: UnderlineNav_module_css_default.MoreButtonContainer,
-			children: [t15, /*#__PURE__*/ jsxs(ActionMenu, {
+			children: [t17, /*#__PURE__*/ jsxs(ActionMenu, {
 				open: menuOpen,
 				onOpenChange: setMenuOpen,
-				children: [t19, t21]
+				children: [t21, t23]
 			})]
 		});
 		$[34] = menuOpen;
-		$[35] = t19;
-		$[36] = t21;
-		$[37] = t22;
-	} else t22 = $[37];
-	let t23;
-	if ($[38] !== ariaLabel || $[39] !== as || $[40] !== navRef || $[41] !== t10 || $[42] !== t11 || $[43] !== t12 || $[44] !== t14 || $[45] !== t22 || $[46] !== variant) {
-		t23 = /*#__PURE__*/ jsxs(UnderlineWrapper, {
+		$[35] = t21;
+		$[36] = t23;
+		$[37] = t24;
+	} else t24 = $[37];
+	let t25;
+	if ($[38] !== ariaLabel || $[39] !== as || $[40] !== navRef || $[41] !== t11 || $[42] !== t12 || $[43] !== t13 || $[44] !== t16 || $[45] !== t24 || $[46] !== variant) {
+		t25 = /*#__PURE__*/ jsxs(UnderlineWrapper, {
 			as,
 			"aria-label": ariaLabel,
-			className: t10,
+			className: t11,
 			ref: navRef,
 			"data-variant": variant,
 			"data-overflow-mode": "wrap",
-			"data-hide-icons": t11,
-			"data-has-overflow": t12,
-			children: [t14, t22]
+			"data-hide-icons-breakpoint": t12,
+			"data-has-overflow": t13,
+			children: [t16, t24]
 		});
 		$[38] = ariaLabel;
 		$[39] = as;
 		$[40] = navRef;
-		$[41] = t10;
-		$[42] = t11;
-		$[43] = t12;
-		$[44] = t14;
-		$[45] = t22;
+		$[41] = t11;
+		$[42] = t12;
+		$[43] = t13;
+		$[44] = t16;
+		$[45] = t24;
 		$[46] = variant;
-		$[47] = t23;
-	} else t23 = $[47];
-	let t24;
-	if ($[48] !== contextValue || $[49] !== t23 || $[50] !== t9) {
-		t24 = /*#__PURE__*/ jsxs(UnderlineNavContext.Provider, {
+		$[47] = t25;
+	} else t25 = $[47];
+	let t26;
+	if ($[48] !== contextValue || $[49] !== t10 || $[50] !== t25) {
+		t26 = /*#__PURE__*/ jsxs(UnderlineNavContext.Provider, {
 			value: contextValue,
-			children: [t9, t23]
+			children: [t10, t25]
 		});
 		$[48] = contextValue;
-		$[49] = t23;
-		$[50] = t9;
-		$[51] = t24;
-	} else t24 = $[51];
-	return t24;
+		$[49] = t10;
+		$[50] = t25;
+		$[51] = t26;
+	} else t26 = $[51];
+	return t26;
 });
 UnderlineNav.displayName = "UnderlineNav";
 function _temp(entry) {

package/dist/UnderlineNav/UnderlineNav.module.css.js

@@ -1,9 +1,10 @@
-import "./UnderlineNav-47547980.css";
+import "./UnderlineNav-a06bbc74.css";
 //#region src/UnderlineNav/UnderlineNav.module.css.js
 var UnderlineNav_module_css_default = {
 	"UnderlineWrapper": "prc-UnderlineNav-UnderlineWrapper-GWONT",
 	"detect-overflow": "prc-UnderlineNav-detect-overflow-6HuSH",
 	"ItemsList": "prc-UnderlineNav-ItemsList-oj8gN",
+	"WrapSpacer": "prc-UnderlineNav-WrapSpacer--aLgz",
 	"MoreButtonContainer": "prc-UnderlineNav-MoreButtonContainer-Dnrq6",
 	"OverflowMenuItem": "prc-UnderlineNav-OverflowMenuItem-7SG7M",
 	"OverflowMenuItemLabel": "prc-UnderlineNav-OverflowMenuItemLabel-F80v6",

package/dist/experimental/SelectPanel2/SelectPanel-917fdaef.css

@@ -0,0 +1,2 @@
+.prc-SelectPanel2-Overlay--Q-FI{border:none;color:var(--fgColor-default,#1f2328);padding:0;--max-height:0;--position-top:0;--position-left:0}.prc-SelectPanel2-Overlay--Q-FI:where([open]){display:flex}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=anchored]),.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen]){left:var(--position-left);margin:0;top:var(--position-top)}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=anchored])::backdrop{background-color:transparent}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen])::backdrop{background-color:transparent}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=modal]){bottom:0;left:0;right:0;top:0}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=modal])::backdrop{background-color:var(--overlay-backdrop-bgColor,#c8d1da66)}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen]){border-radius:unset;height:100%;left:0;margin:0;max-height:100vh;max-width:100vw;top:0;width:100%}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=bottom-sheet]){border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;left:0;margin:0;max-height:calc(100vh - 64px);max-width:100vw;top:auto;width:100%}.prc-SelectPanel2-Form-bZ9HS{width:100%}.prc-SelectPanel2-Container-e5e6-,.prc-SelectPanel2-Form-bZ9HS{display:flex;flex-direction:column}.prc-SelectPanel2-Container-e5e6-{flex-grow:1;flex-shrink:1;justify-content:space-between;overflow:hidden}.prc-SelectPanel2-Container-e5e6- ul{flex-grow:1;overflow-y:auto}.prc-SelectPanel2-Container-e5e6- li:not(:focus,[data-is-active-descendant],[data-active]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-SelectPanel2-HeaderContent-MsaAS{align-items:center;display:flex;justify-content:space-between;margin-bottom:0}.prc-SelectPanel2-HeaderContent-MsaAS:where([data-description]){align-items:flex-start}.prc-SelectPanel2-HeaderContent-MsaAS:where([data-search-input]){margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel2-TitleWrapper-HzPu3{margin-left:var(--base-size-8,.5rem);margin-top:0}.prc-SelectPanel2-TitleWrapper-HzPu3:where([data-description]){margin-top:2px}.prc-SelectPanel2-TitleWrapper-HzPu3:where([data-on-back]){margin-left:var(--base-size-4,.25rem)}.prc-SelectPanel2-TextInput-lHH1n{padding-left:var(--base-size-8,.5rem)!important}.prc-SelectPanel2-TextInput-lHH1n input:placeholder-shown~.TextInput-action{display:none}.prc-SelectPanel2-Checkbox-AYR38{margin-top:0}.prc-SelectPanel2-FlexBox-gWPRg{display:flex}.prc-SelectPanel2-Title-T-h3f{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.prc-SelectPanel2-Description-qTXfi{display:block;font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel2-ClearAction-tQj-f,.prc-SelectPanel2-Description-qTXfi{color:var(--fgColor-muted,#59636e)}.prc-SelectPanel2-ClearAction-tQj-f{background:none}.prc-SelectPanel2-Footer-TibV0{align-items:center;border-top:var(--borderWidth-thin,.0625rem) solid;border-top-color:var(--borderColor-default,#d1d9e0);display:flex;flex-shrink:0;justify-content:space-between;min-height:44px;padding:var(--base-size-16,1rem)}.prc-SelectPanel2-Footer-TibV0:where([data-hide-primary-actions]){padding:var(--base-size-8,.5rem)}.prc-SelectPanel2-FooterContent-UjAOM{flex-grow:0}.prc-SelectPanel2-FooterContent-UjAOM:where([data-hide-primary-actions]){flex-grow:1}.prc-SelectPanel2-FooterActions-T6yQR,.prc-SelectPanel2-SecondaryCheckbox-omkf-{display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel2-SecondaryCheckbox-omkf-{align-items:center}.prc-SelectPanel2-SmallText-c42ay{font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel2-SelectPanelLoading-mtyhD{align-items:center;display:flex;flex-direction:column;gap:var(--stack-gap-normal,1rem);height:100%;justify-content:center;min-height:min(calc(var(--max-height) - 150px),324px)}.prc-SelectPanel2-LoadingText-DB0wN{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-medium,.875rem)}.prc-SelectPanel2-MessageFull-nY-qF{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--base-size-4,.25rem);height:100%;justify-content:center;min-height:min(calc(var(--max-height) - 150px),324px);padding-left:var(--base-size-24,1.5rem);padding-right:var(--base-size-24,1.5rem);text-align:center}.prc-SelectPanel2-MessageFull-nY-qF a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel2-Octicon-zt-zU{margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel2-Octicon-zt-zU.prc-SelectPanel2-Error-ZrZQQ{color:var(--fgColor-danger,#d1242f)}.prc-SelectPanel2-Octicon-zt-zU.prc-SelectPanel2-Warning-PDsVF{color:var(--fgColor-attention,#9a6700)}.prc-SelectPanel2-MessageTitle-T7v9d{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500)}.prc-SelectPanel2-MessageContent-UZ9vY{align-items:center;color:var(--fgColor-muted,#59636e);flex-direction:column;font-size:var(--text-body-size-medium,.875rem)}.prc-SelectPanel2-MessageContent-UZ9vY,.prc-SelectPanel2-MessageInline-sErQf{display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel2-MessageInline-sErQf{border-bottom:var(--borderWidth-thin,.0625rem) solid;font-size:var(--text-body-size-small,.75rem);padding:var(--base-size-12,.75rem) var(--base-size-16,1rem)}.prc-SelectPanel2-MessageInline-sErQf a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel2-MessageInline-sErQf:where([data-variant=error]){background-color:var(--bgColor-danger-muted,#ffebe9);border-color:var(--borderColor-danger-muted,#ff818266);color:var(--fgColor-danger,#d1242f)}.prc-SelectPanel2-MessageInline-sErQf:where([data-variant=warning]){background-color:var(--bgColor-attention-muted,#fff8c5);border-color:var(--borderColor-attention-muted,#d4a72c66);color:var(--fgColor-attention,#9a6700)}.prc-SelectPanel2-Header-LKyEJ{border-bottom:var(--borderWidth-thin,.0625rem) solid;border-bottom-color:var(--borderColor-default,#d1d9e0);display:flex;flex-direction:column;padding:var(--base-size-8,.5rem)}
+/*# sourceMappingURL=SelectPanel-917fdaef.css.map */

package/dist/experimental/SelectPanel2/{SelectPanel-608e207e.css.map → SelectPanel-917fdaef.css.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/experimental/SelectPanel2/SelectPanel.module.css.js"],"names":[],"mappings":"AAAA,gCAGE,WAAY,CADZ,oCAA6B,CAD7B,SAAU,CAKV,cAAe,CACf,gBAAiB,CACjB,iBAoDF,CAlDE,8CACE,YACF,CAEA,iIAKE,yBAA0B,CAC1B,QAAS,CAHT,uBAQF,CAHE,yEACE,4BACF,CAFA,4EACE,4BACF,CAGF,4DAIE,QAAS,CAFT,MAAO,CACP,OAAQ,CAFR,KAIF,CAEA,sEACE,0DACF,CAEA,kEAQE,mBAAoB,CAHpB,WAAY,CAHZ,MAAO,CAKP,QAAS,CADT,gBAAiB,CAFjB,eAAgB,CAHhB,KAAM,CAEN,UAMF,CAEA,mEASE,2BAA4B,CAD5B,4BAA6B,CAN7B,QAAS,CACT,MAAO,CAIP,QAAS,CADT,6BAA8B,CAD9B,eAAgB,CAJhB,QAAS,CAGT,UAMF,CAGF,6BAEE,UAEF,CAEA,+DALE,YAAa,CAEb,qBAwBF,CArBA,kCAKE,WAAY,CADZ,aAAc,CAEd,6BAA8B,CAJ9B,eAmBF,CAbE,qCAEE,WAAY,CADZ,eAEF,CAMA,2FAEE,gCAAiC,CADjC,uBAEF,CAGF,sCAGE,kBAAmB,CAFnB,YAAa,CACb,6BAA8B,CAE9B,eASF,CAPE,gEACE,sBACF,CAEA,iEACE,sCACF,CAGF,qCAEE,oCAA+B,CAD/B,YAWF,CARE,+DAEE,cACF,CAEA,2DACE,qCACF,CAGF,kCACE,+CAMF,CAHE,iFACE,YACF,CAGF,iCACE,YACF,CAEA,gCACE,YACF,CAEA,8BACE,8CAAuC,CACvC,gDACF,CAEA,oCACE,aAAc,CACd,4CAEF,CAEA,wEAHE,kCAMF,CAHA,oCAEE,eACF,CAEA,+BAOE,kBAAmB,CAHnB,iDAAyC,CACzC,mDAA4C,CAJ5C,YAAa,CAOb,aAAc,CAFd,6BAA8B,CAJ9B,eAAgB,CAChB,gCAUF,CAHE,kEACE,gCACF,CAGF,sCACE,WAKF,CAHE,yEACE,WACF,CAQF,gFAJE,YAAa,CACb,oCAOF,CAJA,0CAEE,kBAEF,CAEA,kCACE,4CACF,CAEA,2CAQE,kBAAmB,CAPnB,YAAa,CAKb,qBAAsB,CAGtB,gCAA4B,CAP5B,WAAY,CAKZ,sBAAuB,CAFvB,qDAKF,CAEA,oCAEE,kCAA2B,CAD3B,8CAEF,CAEA,oCAWE,kBAAmB,CAVnB,YAAa,CAQb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAXvB,WAAY,CAQZ,sBAAuB,CALvB,qDAAuD,CAEvD,uCAAiC,CADjC,wCAAkC,CAElC,iBAWF,CAJE,sCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,gCACE,sCASF,CAPE,6DACE,mCACF,CAEA,+DACE,sCACF,CAGF,qCACE,8CAAuC,CACvC,8CACF,CAEA,uCAME,kBAAmB,CAHnB,kCAA2B,CAC3B,qBAAsB,CAFtB,8CAKF,CAEA,6EARE,YAAa,CAIb,oCA8BF,CA1BA,sCAOE,oDAA4C,CAD5C,4CAAsC,CADtC,2DAqBF,CAhBE,wCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,kEAEE,oDAA6C,CAC7C,sDAA6C,CAF7C,mCAGF,CAEA,oEAEE,uDAAgD,CAChD,yDAAgD,CAFhD,sCAGF,CAGF,+BAIE,oDAA4C,CAC5C,sDAA+C,CAJ/C,YAAa,CAEb,qBAAsB,CADtB,gCAIF","file":"SelectPanel-608e207e.css","sourcesContent":[".Overlay {\n  padding: 0;\n  color: var(--fgColor-default);\n  border: none;\n\n  /* CSS variables values are passed in via styles */\n  --max-height: 0;\n  --position-top: 0;\n  --position-left: 0;\n\n  &:where([open]) {\n    display: flex; /* to fit children */\n  }\n\n  &:where([data-variant='anchored']),\n  &:where([data-variant='full-screen']) {\n    /* stylelint-disable-next-line primer/spacing */\n    top: var(--position-top);\n    /* stylelint-disable-next-line primer/spacing */\n    left: var(--position-left);\n    margin: 0;\n\n    &::backdrop {\n      background-color: transparent;\n    }\n  }\n\n  &:where([data-variant='modal']) {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  &:where([data-variant='modal'])::backdrop {\n    background-color: var(--overlay-backdrop-bgColor);\n  }\n\n  &:where([data-variant='full-screen']) {\n    top: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    margin: 0;\n    border-radius: unset;\n  }\n\n  &:where([data-variant='bottom-sheet']) {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: calc(100vh - 64px);\n    margin: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n\n.Form {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.Container {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  flex-shrink: 1;\n  flex-grow: 1;\n  justify-content: space-between;\n\n  ul {\n    overflow-y: auto;\n    flex-grow: 1;\n  }\n\n  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  li:not(:focus, [data-is-active-descendant], [data-active]) {\n    content-visibility: auto;\n    contain-intrinsic-size: auto 32px;\n  }\n}\n\n.HeaderContent {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0;\n\n  &:where([data-description]) {\n    align-items: flex-start;\n  }\n\n  &:where([data-search-input]) {\n    margin-bottom: var(--base-size-8);\n  }\n}\n\n.TitleWrapper {\n  margin-top: 0;\n  margin-left: var(--base-size-8);\n\n  &:where([data-description]) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: 2px;\n  }\n\n  &:where([data-on-back]) {\n    margin-left: var(--base-size-4);\n  }\n}\n\n.TextInput {\n  padding-left: var(--base-size-8) !important;\n\n  /* stylelint-disable-next-line selector-class-pattern, selector-no-qualifying-type, selector-pseudo-class-disallowed-list -- :has() scoped to CSS Module, audited (github/github-ui#17224) */\n  &:has(input:placeholder-shown) :global(.TextInput-action) {\n    display: none;\n  }\n}\n\n.Checkbox {\n  margin-top: 0;\n}\n\n.FlexBox {\n  display: flex;\n}\n\n.Title {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.Description {\n  display: block;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.ClearAction {\n  color: var(--fgColor-muted);\n  background: none;\n}\n\n.Footer {\n  display: flex;\n  min-height: 44px;\n  padding: var(--base-size-16);\n  border-top: var(--borderWidth-thin) solid;\n  border-top-color: var(--borderColor-default);\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n\n  &:where([data-hide-primary-actions]) {\n    padding: var(--base-size-8);\n  }\n}\n\n.FooterContent {\n  flex-grow: 0;\n\n  &:where([data-hide-primary-actions]) {\n    flex-grow: 1;\n  }\n}\n\n.FooterActions {\n  display: flex;\n  gap: var(--stack-gap-condensed);\n}\n\n.SecondaryCheckbox {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.SmallText {\n  font-size: var(--text-body-size-small);\n}\n\n.SelectPanelLoading {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--stack-gap-normal);\n}\n\n.LoadingText {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n\n.MessageFull {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  padding-right: var(--base-size-24);\n  padding-left: var(--base-size-24);\n  text-align: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex-grow: 1;\n  gap: var(--base-size-4);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n}\n\n.Octicon {\n  margin-bottom: var(--base-size-8);\n\n  &.Error {\n    color: var(--fgColor-danger);\n  }\n\n  &.Warning {\n    color: var(--fgColor-attention);\n  }\n}\n\n.MessageTitle {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n}\n\n.MessageContent {\n  display: flex;\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex-direction: column;\n  gap: var(--stack-gap-condensed);\n  align-items: center;\n}\n\n.MessageInline {\n  display: flex;\n  padding-top: var(--base-size-12);\n  padding-right: var(--base-size-16);\n  padding-bottom: var(--base-size-12);\n  padding-left: var(--base-size-16);\n  font-size: var(--text-body-size-small);\n  border-bottom: var(--borderWidth-thin) solid;\n  gap: var(--stack-gap-condensed);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n\n  &:where([data-variant='error']) {\n    color: var(--fgColor-danger);\n    background-color: var(--bgColor-danger-muted);\n    border-color: var(--borderColor-danger-muted);\n  }\n\n  &:where([data-variant='warning']) {\n    color: var(--fgColor-attention);\n    background-color: var(--bgColor-attention-muted);\n    border-color: var(--borderColor-attention-muted);\n  }\n}\n\n.Header {\n  display: flex;\n  padding: var(--base-size-8);\n  flex-direction: column;\n  border-bottom: var(--borderWidth-thin) solid;\n  border-bottom-color: var(--borderColor-default);\n}\n"]}
+{"version":3,"sources":["../../src/experimental/SelectPanel2/SelectPanel.module.css.js"],"names":[],"mappings":"AAAA,gCAGE,WAAY,CADZ,oCAA6B,CAD7B,SAAU,CAKV,cAAe,CACf,gBAAiB,CACjB,iBAoDF,CAlDE,8CACE,YACF,CAEA,iIAKE,yBAA0B,CAC1B,QAAS,CAHT,uBAQF,CAHE,yEACE,4BACF,CAFA,4EACE,4BACF,CAGF,4DAIE,QAAS,CAFT,MAAO,CACP,OAAQ,CAFR,KAIF,CAEA,sEACE,0DACF,CAEA,kEAQE,mBAAoB,CAHpB,WAAY,CAHZ,MAAO,CAKP,QAAS,CADT,gBAAiB,CAFjB,eAAgB,CAHhB,KAAM,CAEN,UAMF,CAEA,mEASE,2BAA4B,CAD5B,4BAA6B,CAN7B,QAAS,CACT,MAAO,CAIP,QAAS,CADT,6BAA8B,CAD9B,eAAgB,CAJhB,QAAS,CAGT,UAMF,CAGF,6BAEE,UAEF,CAEA,+DALE,YAAa,CAEb,qBAwBF,CArBA,kCAKE,WAAY,CADZ,aAAc,CAEd,6BAA8B,CAJ9B,eAmBF,CAbE,qCAEE,WAAY,CADZ,eAEF,CAMA,2FAEE,gCAAiC,CADjC,uBAEF,CAGF,sCAGE,kBAAmB,CAFnB,YAAa,CACb,6BAA8B,CAE9B,eASF,CAPE,gEACE,sBACF,CAEA,iEACE,sCACF,CAGF,qCAEE,oCAA+B,CAD/B,YAWF,CARE,+DAEE,cACF,CAEA,2DACE,qCACF,CAGF,kCACE,+CASF,CAHE,4EACE,YACF,CAGF,iCACE,YACF,CAEA,gCACE,YACF,CAEA,8BACE,8CAAuC,CACvC,gDACF,CAEA,oCACE,aAAc,CACd,4CAEF,CAEA,wEAHE,kCAMF,CAHA,oCAEE,eACF,CAEA,+BAOE,kBAAmB,CAHnB,iDAAyC,CACzC,mDAA4C,CAJ5C,YAAa,CAOb,aAAc,CAFd,6BAA8B,CAJ9B,eAAgB,CAChB,gCAUF,CAHE,kEACE,gCACF,CAGF,sCACE,WAKF,CAHE,yEACE,WACF,CAQF,gFAJE,YAAa,CACb,oCAOF,CAJA,0CAEE,kBAEF,CAEA,kCACE,4CACF,CAEA,2CAQE,kBAAmB,CAPnB,YAAa,CAKb,qBAAsB,CAGtB,gCAA4B,CAP5B,WAAY,CAKZ,sBAAuB,CAFvB,qDAKF,CAEA,oCAEE,kCAA2B,CAD3B,8CAEF,CAEA,oCAWE,kBAAmB,CAVnB,YAAa,CAQb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAXvB,WAAY,CAQZ,sBAAuB,CALvB,qDAAuD,CAEvD,uCAAiC,CADjC,wCAAkC,CAElC,iBAWF,CAJE,sCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,gCACE,sCASF,CAPE,6DACE,mCACF,CAEA,+DACE,sCACF,CAGF,qCACE,8CAAuC,CACvC,8CACF,CAEA,uCAME,kBAAmB,CAHnB,kCAA2B,CAC3B,qBAAsB,CAFtB,8CAKF,CAEA,6EARE,YAAa,CAIb,oCA8BF,CA1BA,sCAOE,oDAA4C,CAD5C,4CAAsC,CADtC,2DAqBF,CAhBE,wCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,kEAEE,oDAA6C,CAC7C,sDAA6C,CAF7C,mCAGF,CAEA,oEAEE,uDAAgD,CAChD,yDAAgD,CAFhD,sCAGF,CAGF,+BAIE,oDAA4C,CAC5C,sDAA+C,CAJ/C,YAAa,CAEb,qBAAsB,CADtB,gCAIF","file":"SelectPanel-917fdaef.css","sourcesContent":[".Overlay {\n  padding: 0;\n  color: var(--fgColor-default);\n  border: none;\n\n  /* CSS variables values are passed in via styles */\n  --max-height: 0;\n  --position-top: 0;\n  --position-left: 0;\n\n  &:where([open]) {\n    display: flex; /* to fit children */\n  }\n\n  &:where([data-variant='anchored']),\n  &:where([data-variant='full-screen']) {\n    /* stylelint-disable-next-line primer/spacing */\n    top: var(--position-top);\n    /* stylelint-disable-next-line primer/spacing */\n    left: var(--position-left);\n    margin: 0;\n\n    &::backdrop {\n      background-color: transparent;\n    }\n  }\n\n  &:where([data-variant='modal']) {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  &:where([data-variant='modal'])::backdrop {\n    background-color: var(--overlay-backdrop-bgColor);\n  }\n\n  &:where([data-variant='full-screen']) {\n    top: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    margin: 0;\n    border-radius: unset;\n  }\n\n  &:where([data-variant='bottom-sheet']) {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: calc(100vh - 64px);\n    margin: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n\n.Form {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.Container {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  flex-shrink: 1;\n  flex-grow: 1;\n  justify-content: space-between;\n\n  ul {\n    overflow-y: auto;\n    flex-grow: 1;\n  }\n\n  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  li:not(:focus, [data-is-active-descendant], [data-active]) {\n    content-visibility: auto;\n    contain-intrinsic-size: auto 32px;\n  }\n}\n\n.HeaderContent {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0;\n\n  &:where([data-description]) {\n    align-items: flex-start;\n  }\n\n  &:where([data-search-input]) {\n    margin-bottom: var(--base-size-8);\n  }\n}\n\n.TitleWrapper {\n  margin-top: 0;\n  margin-left: var(--base-size-8);\n\n  &:where([data-description]) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: 2px;\n  }\n\n  &:where([data-on-back]) {\n    margin-left: var(--base-size-4);\n  }\n}\n\n.TextInput {\n  padding-left: var(--base-size-8) !important;\n\n  /* Hide the trailing action while the input is empty (showing its placeholder). Uses a\n     forward sibling selector on the input instead of `:has()` to avoid Safari's `:has()`\n     invalidation cost; `input` and `.TextInput-action` are siblings inside the wrapper. */\n  /* stylelint-disable-next-line selector-class-pattern */\n  & input:placeholder-shown ~ :global(.TextInput-action) {\n    display: none;\n  }\n}\n\n.Checkbox {\n  margin-top: 0;\n}\n\n.FlexBox {\n  display: flex;\n}\n\n.Title {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.Description {\n  display: block;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.ClearAction {\n  color: var(--fgColor-muted);\n  background: none;\n}\n\n.Footer {\n  display: flex;\n  min-height: 44px;\n  padding: var(--base-size-16);\n  border-top: var(--borderWidth-thin) solid;\n  border-top-color: var(--borderColor-default);\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n\n  &:where([data-hide-primary-actions]) {\n    padding: var(--base-size-8);\n  }\n}\n\n.FooterContent {\n  flex-grow: 0;\n\n  &:where([data-hide-primary-actions]) {\n    flex-grow: 1;\n  }\n}\n\n.FooterActions {\n  display: flex;\n  gap: var(--stack-gap-condensed);\n}\n\n.SecondaryCheckbox {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.SmallText {\n  font-size: var(--text-body-size-small);\n}\n\n.SelectPanelLoading {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--stack-gap-normal);\n}\n\n.LoadingText {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n\n.MessageFull {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  padding-right: var(--base-size-24);\n  padding-left: var(--base-size-24);\n  text-align: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex-grow: 1;\n  gap: var(--base-size-4);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n}\n\n.Octicon {\n  margin-bottom: var(--base-size-8);\n\n  &.Error {\n    color: var(--fgColor-danger);\n  }\n\n  &.Warning {\n    color: var(--fgColor-attention);\n  }\n}\n\n.MessageTitle {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n}\n\n.MessageContent {\n  display: flex;\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex-direction: column;\n  gap: var(--stack-gap-condensed);\n  align-items: center;\n}\n\n.MessageInline {\n  display: flex;\n  padding-top: var(--base-size-12);\n  padding-right: var(--base-size-16);\n  padding-bottom: var(--base-size-12);\n  padding-left: var(--base-size-16);\n  font-size: var(--text-body-size-small);\n  border-bottom: var(--borderWidth-thin) solid;\n  gap: var(--stack-gap-condensed);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n\n  &:where([data-variant='error']) {\n    color: var(--fgColor-danger);\n    background-color: var(--bgColor-danger-muted);\n    border-color: var(--borderColor-danger-muted);\n  }\n\n  &:where([data-variant='warning']) {\n    color: var(--fgColor-attention);\n    background-color: var(--bgColor-attention-muted);\n    border-color: var(--borderColor-attention-muted);\n  }\n}\n\n.Header {\n  display: flex;\n  padding: var(--base-size-8);\n  flex-direction: column;\n  border-bottom: var(--borderWidth-thin) solid;\n  border-bottom-color: var(--borderColor-default);\n}\n"]}

package/dist/experimental/SelectPanel2/SelectPanel.module.css.js

@@ -1,4 +1,4 @@
-import "./SelectPanel-608e207e.css";
+import "./SelectPanel-917fdaef.css";
 //#region src/experimental/SelectPanel2/SelectPanel.module.css.js
 var SelectPanel_module_css_default = {
 	"Overlay": "prc-SelectPanel2-Overlay--Q-FI",

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -6,7 +6,6 @@ import { isSlot } from "../../utils/is-slot.js";
 import { createComponent } from "../../utils/create-component.js";
 import { UnderlineItem, UnderlineItemList, UnderlineWrapper } from "../../internal/components/UnderlineTabbedInterface.js";
 import UnderlinePanels_module_css_default from "./UnderlinePanels.module.css.js";
-import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { Children, cloneElement, createContext, isValidElement, useContext, useMemo, useRef, useState } from "react";
@@ -22,7 +21,7 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 	const wrapperRef = useRef(null);
 	const listRef = useRef(null);
 	const parentId = useId$1(props.id);
-	const [tabs_0, tabPanels_0, tabsHaveIcons_0] = useMemo(() => {
+	const [tabs, tabPanels, tabsHaveIcons] = useMemo(() => {
 		let tabIndex = 0;
 		let panelIndex = 0;
 		const childrenWithProps = Children.map(children, (child) => {
@@ -32,10 +31,10 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 		});
 		const tabs = [];
 		const tabPanels = [];
-		for (const child_0 of Children.toArray(childrenWithProps)) {
-			if (!/*#__PURE__*/ isValidElement(child_0)) continue;
-			if (child_0.type === Tab || isSlot(child_0, Tab)) tabs.push(child_0);
-			else if (child_0.type === Panel || isSlot(child_0, Panel)) tabPanels.push(child_0);
+		for (const child of Children.toArray(childrenWithProps)) {
+			if (!/*#__PURE__*/ isValidElement(child)) continue;
+			if (child.type === Tab || isSlot(child, Tab)) tabs.push(child);
+			else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
 		}
 		return [
 			tabs,
@@ -53,20 +52,20 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 	}, [iconsVisible]);
 	const listWidthRef = useRef(0);
 	useResizeObserver((entries) => {
-		if (!tabsHaveIcons_0) return;
+		if (!tabsHaveIcons) return;
 		if (!iconsVisibleRef.current) return;
 		listWidthRef.current = entries[0].contentRect.width;
 	}, listRef, []);
 	useResizeObserver((resizeObserverEntries) => {
-		if (!tabsHaveIcons_0) return;
+		if (!tabsHaveIcons) return;
 		const wrapperWidth = resizeObserverEntries[0].contentRect.width;
 		setIconsVisible(wrapperWidth > listWidthRef.current);
 	}, wrapperRef, []);
-	!(tabs_0.filter((tab_0) => {
-		const ariaSelected = /*#__PURE__*/ React.isValidElement(tab_0) && tab_0.props["aria-selected"];
+	!(tabs.filter((tab) => {
+		const ariaSelected = /*#__PURE__*/ React.isValidElement(tab) && tab.props["aria-selected"];
 		return ariaSelected === true || ariaSelected === "true";
 	}).length <= 1) && invariant(false, "Only one tab can be selected at a time.");
-	!(tabs_0.length === tabPanels_0.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs_0.length} tabs and ${tabPanels_0.length} panels.`);
+	!(tabs.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
 	return /*#__PURE__*/ jsx(UnderlinePanelsContext.Provider, {
 		value: contextValue,
 		children: /*#__PURE__*/ jsxs(TabContainerComponent, { children: [/*#__PURE__*/ jsx(UnderlineWrapper, {
@@ -80,100 +79,44 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledBy,
 				role: "tablist",
-				children: tabs_0
+				children: tabs
 			})
-		}), tabPanels_0] })
+		}), tabPanels] })
 	});
 };
 UnderlinePanels.displayName = "UnderlinePanels";
-const TabImpl = (t0) => {
-	const $ = c(15);
-	let ariaSelected;
-	let onSelect;
-	let props;
-	if ($[0] !== t0) {
-		({"aria-selected": ariaSelected, onSelect, ...props} = t0);
-		$[0] = t0;
-		$[1] = ariaSelected;
-		$[2] = onSelect;
-		$[3] = props;
-	} else {
-		ariaSelected = $[1];
-		onSelect = $[2];
-		props = $[3];
-	}
+const TabImpl = ({ "aria-selected": ariaSelected, onSelect, ...props }) => {
 	const { loadingCounters } = useContext(UnderlinePanelsContext);
-	let t1;
-	if ($[4] !== onSelect) {
-		t1 = (event) => {
-			if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-		};
-		$[4] = onSelect;
-		$[5] = t1;
-	} else t1 = $[5];
-	const clickHandler = t1;
-	let t2;
-	if ($[6] !== onSelect) {
-		t2 = (event_0) => {
-			if ((event_0.key === " " || event_0.key === "Enter") && !event_0.defaultPrevented && typeof onSelect === "function") onSelect(event_0);
-		};
-		$[6] = onSelect;
-		$[7] = t2;
-	} else t2 = $[7];
-	const keyDownHandler = t2;
-	const t3 = ariaSelected ? 0 : -1;
-	let t4;
-	if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== keyDownHandler || $[11] !== loadingCounters || $[12] !== props || $[13] !== t3) {
-		t4 = /*#__PURE__*/ jsx(UnderlineItem, {
-			as: "button",
-			role: "tab",
-			tabIndex: t3,
-			"aria-selected": ariaSelected,
-			type: "button",
-			onClick: clickHandler,
-			onKeyDown: keyDownHandler,
-			loadingCounters,
-			...props
-		});
-		$[8] = ariaSelected;
-		$[9] = clickHandler;
-		$[10] = keyDownHandler;
-		$[11] = loadingCounters;
-		$[12] = props;
-		$[13] = t3;
-		$[14] = t4;
-	} else t4 = $[14];
-	return t4;
+	const clickHandler = React.useCallback((event) => {
+		if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
+	}, [onSelect]);
+	const keyDownHandler = React.useCallback((event) => {
+		if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
+	}, [onSelect]);
+	return /*#__PURE__*/ jsx(UnderlineItem, {
+		as: "button",
+		role: "tab",
+		tabIndex: ariaSelected ? 0 : -1,
+		"aria-selected": ariaSelected,
+		type: "button",
+		onClick: clickHandler,
+		onKeyDown: keyDownHandler,
+		loadingCounters,
+		...props
+	});
 };
+TabImpl.displayName = "TabImpl";
 TabImpl.displayName = "UnderlinePanels.Tab";
 const Tab = /*#__PURE__*/ React.memo(TabImpl);
 Tab.displayName = "UnderlinePanels.Tab";
-const Panel = (t0) => {
-	const $ = c(6);
-	let children;
-	let rest;
-	if ($[0] !== t0) {
-		({children, ...rest} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = rest;
-	} else {
-		children = $[1];
-		rest = $[2];
-	}
-	let t1;
-	if ($[3] !== children || $[4] !== rest) {
-		t1 = /*#__PURE__*/ jsx("div", {
-			role: "tabpanel",
-			...rest,
-			children
-		});
-		$[3] = children;
-		$[4] = rest;
-		$[5] = t1;
-	} else t1 = $[5];
-	return t1;
+const Panel = ({ children, ...rest }) => {
+	return /*#__PURE__*/ jsx("div", {
+		role: "tabpanel",
+		...rest,
+		children
+	});
 };
+Panel.displayName = "Panel";
 Panel.displayName = "UnderlinePanels.Panel";
 var UnderlinePanels_default = Object.assign(UnderlinePanels, {
 	Panel,