@primer/react 38.32.0-rc.7fd08e0cc → 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/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,

package/dist/hooks/useControllableState.js

@@ -21,9 +21,9 @@ function useControllableState({ name = "custom", defaultValue, value, onChange }
 	if (controlled.current === null) controlled.current = value !== void 0;
 	const setState = React.useCallback((stateOrUpdater) => {
 		var _stableOnChange$curre;
-		const value_0 = typeof stateOrUpdater === "function" ? stateOrUpdater(state) : stateOrUpdater;
-		if (controlled.current === false) internalSetState(value_0);
-		(_stableOnChange$curre = stableOnChange.current) === null || _stableOnChange$curre === void 0 || _stableOnChange$curre.call(stableOnChange, value_0);
+		const value = typeof stateOrUpdater === "function" ? stateOrUpdater(state) : stateOrUpdater;
+		if (controlled.current === false) internalSetState(value);
+		(_stableOnChange$curre = stableOnChange.current) === null || _stableOnChange$curre === void 0 || _stableOnChange$curre.call(stableOnChange, value);
 	}, [state]);
 	React.useEffect(() => {
 		const controlledValue = value !== void 0;