@primer/react 38.37.0-rc.7ab3f8b3e → 38.37.1-rc.166760c53

package/dist/experimental/Tabs/useTabList.js

@@ -5,20 +5,29 @@ import { c } from "react-compiler-runtime";
 import { useRef } from "react";
 //#region src/experimental/Tabs/useTabList.ts
 function useTabList(props) {
-	const $ = c(9);
+	const $ = c(10);
 	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": ariaOrientation } = props;
 	const mergedRefEnabled = useFeatureFlag("primer_react_merged_forwarded_refs");
+	const controlledApiEnabled = useFeatureFlag("primer_react_underline_panels_controlled");
 	const tabListRef = useRef(null);
 	const mergedRef = useMergedRefs(tabListRef, props.ref);
 	const providedOrCreatedRef = useProvidedRefOrCreate(props.ref);
 	const readRef = mergedRefEnabled ? tabListRef : providedOrCreatedRef;
 	const appliedRef = mergedRefEnabled ? mergedRef : providedOrCreatedRef;
 	let t0;
-	if ($[0] !== ariaOrientation || $[1] !== readRef) {
+	if ($[0] !== ariaOrientation || $[1] !== controlledApiEnabled || $[2] !== readRef) {
 		t0 = (event) => {
 			const { current: tablist } = readRef;
 			if (tablist === null) return;
 			const tabs = getFocusableTabs(tablist);
+			const getCurrentIndex = () => {
+				if (controlledApiEnabled) {
+					const activeElement = tablist.ownerDocument.activeElement;
+					const focusedIndex = activeElement instanceof HTMLElement ? tabs.indexOf(activeElement) : -1;
+					if (focusedIndex !== -1) return focusedIndex;
+				}
+				return tabs.findIndex(_temp);
+			};
 			const isVertical = ariaOrientation === "vertical";
 			const nextKey = isVertical ? "ArrowDown" : "ArrowRight";
 			const prevKey = isVertical ? "ArrowUp" : "ArrowLeft";
@@ -27,13 +36,13 @@ function useTabList(props) {
 				event.stopPropagation();
 			}
 			if (event.key === nextKey) {
-				const selectedTabIndex = tabs.findIndex(_temp);
-				if (selectedTabIndex === -1) return;
-				tabs[(selectedTabIndex + 1) % tabs.length].focus();
+				const currentTabIndex = getCurrentIndex();
+				if (currentTabIndex === -1) return;
+				tabs[(currentTabIndex + 1) % tabs.length].focus();
 			} else if (event.key === prevKey) {
-				const selectedTabIndex_0 = tabs.findIndex(_temp2);
-				if (selectedTabIndex_0 === -1) return;
-				tabs[(tabs.length + selectedTabIndex_0 - 1) % tabs.length].focus();
+				const currentTabIndex_0 = getCurrentIndex();
+				if (currentTabIndex_0 === -1) return;
+				tabs[(tabs.length + currentTabIndex_0 - 1) % tabs.length].focus();
 			} else if (event.key === "Home") {
 				if (tabs[0]) tabs[0].focus();
 			} else if (event.key === "End") {
@@ -41,13 +50,14 @@ function useTabList(props) {
 			}
 		};
 		$[0] = ariaOrientation;
-		$[1] = readRef;
-		$[2] = t0;
-	} else t0 = $[2];
+		$[1] = controlledApiEnabled;
+		$[2] = readRef;
+		$[3] = t0;
+	} else t0 = $[3];
 	const onKeyDown = t0;
 	const t1 = ariaOrientation !== null && ariaOrientation !== void 0 ? ariaOrientation : "horizontal";
 	let t2;
-	if ($[3] !== appliedRef || $[4] !== ariaLabel || $[5] !== ariaLabelledby || $[6] !== onKeyDown || $[7] !== t1) {
+	if ($[4] !== appliedRef || $[5] !== ariaLabel || $[6] !== ariaLabelledby || $[7] !== onKeyDown || $[8] !== t1) {
 		t2 = { tabListProps: {
 			ref: appliedRef,
 			"aria-label": ariaLabel,
@@ -56,18 +66,15 @@ function useTabList(props) {
 			role: "tablist",
 			onKeyDown
 		} };
-		$[3] = appliedRef;
-		$[4] = ariaLabel;
-		$[5] = ariaLabelledby;
-		$[6] = onKeyDown;
-		$[7] = t1;
-		$[8] = t2;
-	} else t2 = $[8];
+		$[4] = appliedRef;
+		$[5] = ariaLabel;
+		$[6] = ariaLabelledby;
+		$[7] = onKeyDown;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
 	return t2;
 }
-function _temp2(tab_0) {
-	return tab_0.getAttribute("aria-selected") === "true";
-}
 function _temp(tab) {
 	return tab.getAttribute("aria-selected") === "true";
 }

package/dist/experimental/UnderlinePanels/UnderlinePanels.d.ts

@@ -16,6 +16,31 @@ type UnderlinePanelsProps = {
    * ID of the element containing the name for the tab list
    */
   'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+  /**
+   * The value of the selected tab, keyed to each `UnderlinePanels.Tab`/`UnderlinePanels.Panel`
+   * `value`. Provide this (with `onChange`) for a controlled component where the selected tab is
+   * the single source of truth.
+   */
+  value?: string;
+  /**
+   * The value of the tab that should be selected by default, keyed to each tab's `value`. Use this
+   * for an uncontrolled component. Cannot be combined with `value`.
+   */
+  defaultValue?: string;
+  /**
+   * Fires whenever the selected tab changes, for every selection method including arrow keys.
+   * Unlike `UnderlinePanels.Tab`'s `onSelect`, which only fires on click and Enter/Space.
+   */
+  onChange?: ({
+    value
+  }: {
+    value: string;
+  }) => void;
+  /**
+   * `'automatic'` (default) selects on focus/arrow keys; `'manual'` only moves focus until
+   * Enter/Space/click. Prefer `'manual'` when displaying a panel is not instant.
+   */
+  activationMode?: 'automatic' | 'manual';
   /**
    * Custom string to use when generating the IDs of tabs and `aria-labelledby` for the panels
    */
@@ -34,6 +59,12 @@ type UnderlinePanelsProps = {
   as?: React.ElementType;
 };
 type TabProps = PropsWithChildren<{
+  /**
+   * A value that uniquely identifies this tab, paired with the `UnderlinePanels.Panel` of the same
+   * `value`. Provide this to use domain values (e.g. `'branch'`) with the container's controlled
+   * `value`/`onChange` API. When omitted, tabs and panels are paired by their DOM order.
+   */
+  value?: string;
   /**
    * Whether this is the selected tab
    */
@@ -51,7 +82,13 @@ type TabProps = PropsWithChildren<{
    */
   icon?: FC<IconProps>;
 }>;
-type PanelProps = React.HTMLAttributes<HTMLDivElement>;
+type PanelProps = React.HTMLAttributes<HTMLDivElement> & {
+  /**
+   * A value that uniquely identifies this panel, paired with the `UnderlinePanels.Tab` of the same
+   * `value`. When omitted, tabs and panels are paired by their DOM order.
+   */
+  value?: string;
+};
 declare const _default: React.FC<UnderlinePanelsProps> & SlotMarker & {
   Panel: FCWithSlotMarker<PanelProps>;
   Tab: FCWithSlotMarker<TabProps>;

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -1,7 +1,9 @@
 import useIsomorphicLayoutEffect from "../../utils/useIsomorphicLayoutEffect.js";
 import { useResizeObserver } from "../../hooks/useResizeObserver.js";
 import { useId as useId$1 } from "../../hooks/useId.js";
+import { warning } from "../../utils/warning.js";
 import { isSlot } from "../../utils/is-slot.js";
+import { useFeatureFlag } from "../../FeatureFlags/useFeatureFlag.js";
 import { invariant } from "../../utils/invariant.js";
 import { UnderlineItem, UnderlineItemList, UnderlineWrapper } from "../../internal/components/UnderlineTabbedInterface.js";
 import UnderlinePanels_module_css_default from "./UnderlinePanels.module.css.js";
@@ -17,43 +19,78 @@ const UnderlinePanelsContext = /*#__PURE__*/ createContext({
 	iconsVisible: true,
 	loadingCounters: void 0
 });
-const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, loadingCounters, className, ...props }) => {
+const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, loadingCounters, className, value: valueProp, defaultValue: defaultValueProp, onChange: onChangeProp, activationMode = "automatic", ...props }) => {
+	var _tabValues$;
+	const controlledApiEnabled = useFeatureFlag("primer_react_underline_panels_controlled");
+	const controlledValue = controlledApiEnabled ? valueProp : void 0;
+	const defaultValue = controlledApiEnabled ? defaultValueProp : void 0;
+	const onChange = controlledApiEnabled ? onChangeProp : void 0;
 	const [iconsVisible, setIconsVisible] = useState(true);
 	const wrapperRef = useRef(null);
 	const listRef = useRef(null);
 	const parentId = useId$1(props.id);
-	const [tabs, tabPanels, tabsHaveIcons, selectedFromProps] = useMemo(() => {
+	const [tabs, tabPanels, tabsHaveIcons, selectedFromProps, tabValues, panelValues] = useMemo(() => {
 		let tabIndex = 0;
 		let panelIndex = 0;
 		const childrenWithProps = Children.map(children, (child) => {
-			if (/*#__PURE__*/ isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) return /*#__PURE__*/ cloneElement(child, { value: `${tabIndex++}` });
-			if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) return /*#__PURE__*/ cloneElement(child, { value: `${panelIndex++}` });
+			if (/*#__PURE__*/ isValidElement(child) && (child.type === Tab || isSlot(child, Tab))) {
+				var _ref;
+				const value = (_ref = controlledApiEnabled ? child.props.value : void 0) !== null && _ref !== void 0 ? _ref : `${tabIndex}`;
+				tabIndex++;
+				return /*#__PURE__*/ cloneElement(child, { value });
+			}
+			if (/*#__PURE__*/ isValidElement(child) && (child.type === Panel || isSlot(child, Panel))) {
+				var _ref2;
+				const value = (_ref2 = controlledApiEnabled ? child.props.value : void 0) !== null && _ref2 !== void 0 ? _ref2 : `${panelIndex}`;
+				panelIndex++;
+				return /*#__PURE__*/ cloneElement(child, { value });
+			}
 			return child;
 		});
 		const tabs = [];
 		const tabPanels = [];
+		const tabValues = [];
+		const panelValues = [];
 		let selectedFromProps;
 		for (const child of Children.toArray(childrenWithProps)) {
 			if (!/*#__PURE__*/ isValidElement(child)) continue;
 			if (child.type === Tab || isSlot(child, Tab)) {
+				const value = child.props.value;
+				if (value !== void 0) tabValues.push(value);
 				const ariaSelected = child.props["aria-selected"];
-				if (ariaSelected === true || ariaSelected === "true") selectedFromProps = `${tabs.length}`;
+				if (ariaSelected === true || ariaSelected === "true") selectedFromProps = value;
 				tabs.push(child);
-			} else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
+			} else if (child.type === Panel || isSlot(child, Panel)) {
+				const value = child.props.value;
+				if (value !== void 0) panelValues.push(value);
+				tabPanels.push(child);
+			}
 		}
 		return [
 			tabs,
 			tabPanels,
 			tabs.some((tab) => /*#__PURE__*/ React.isValidElement(tab) && tab.props.icon),
-			selectedFromProps
+			selectedFromProps,
+			tabValues,
+			panelValues
 		];
-	}, [children]);
-	const [selectedValue, setSelectedValue] = useState(() => selectedFromProps !== null && selectedFromProps !== void 0 ? selectedFromProps : "0");
+	}, [children, controlledApiEnabled]);
+	const isControlled = controlledValue !== void 0;
+	const [uncontrolledValue, setUncontrolledValue] = useState(() => {
+		var _ref3;
+		return (_ref3 = defaultValue !== null && defaultValue !== void 0 ? defaultValue : selectedFromProps) !== null && _ref3 !== void 0 ? _ref3 : "0";
+	});
 	const [prevSelectedFromProps, setPrevSelectedFromProps] = useState(selectedFromProps);
-	if (selectedFromProps !== prevSelectedFromProps) {
+	if (!isControlled && selectedFromProps !== prevSelectedFromProps) {
 		setPrevSelectedFromProps(selectedFromProps);
-		if (selectedFromProps !== void 0 && selectedFromProps !== selectedValue) setSelectedValue(selectedFromProps);
+		if (selectedFromProps !== void 0 && selectedFromProps !== uncontrolledValue) setUncontrolledValue(selectedFromProps);
 	}
+	const selectedValue = isControlled ? controlledValue : uncontrolledValue;
+	const effectiveValue = tabValues.includes(selectedValue) ? selectedValue : (_tabValues$ = tabValues[0]) !== null && _tabValues$ !== void 0 ? _tabValues$ : selectedValue;
+	const handleValueChange = (value) => {
+		if (!isControlled) setUncontrolledValue(value);
+		onChange === null || onChange === void 0 || onChange({ value });
+	};
 	const { tabListProps } = useTabList({
 		"aria-label": ariaLabel,
 		"aria-labelledby": ariaLabelledBy,
@@ -78,17 +115,31 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 		const wrapperWidth = resizeObserverEntries[0].contentRect.width;
 		setIconsVisible(wrapperWidth > listWidthRef.current);
 	}, wrapperRef, []);
-	!(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.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
+	{
+		const selectedTabs = tabs.filter((tab) => {
+			const ariaSelected = /*#__PURE__*/ React.isValidElement(tab) && tab.props["aria-selected"];
+			return ariaSelected === true || ariaSelected === "true";
+		});
+		!(selectedTabs.length <= 1) && invariant(false, "Only one tab can be selected at a time.");
+		!(tabs.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
+		const duplicateTabValue = tabValues.find((value, index) => tabValues.indexOf(value) !== index);
+		!(duplicateTabValue === void 0) && invariant(false, `Every tab must have a unique \`value\`. Found duplicate "${duplicateTabValue}".`);
+		const duplicatePanelValue = panelValues.find((value, index) => panelValues.indexOf(value) !== index);
+		!(duplicatePanelValue === void 0) && invariant(false, `Every panel must have a unique \`value\`. Found duplicate "${duplicatePanelValue}".`);
+		const unmatchedTabValue = tabValues.find((value) => !panelValues.includes(value));
+		!(unmatchedTabValue === void 0) && invariant(false, `Tab with \`value\` "${unmatchedTabValue}" has no matching panel. Give a \`UnderlinePanels.Panel\` the same \`value\`.`);
+		warning(isControlled && selectedTabs.length > 0, "UnderlinePanels: do not combine the controlled `value` prop with `aria-selected` on a tab. `value` takes precedence; use `value`/`onChange` (or `defaultValue`) to drive selection.");
+		warning(controlledValue !== void 0 && defaultValue !== void 0, "UnderlinePanels: do not combine the controlled `value` prop with `defaultValue`. `value` takes precedence; use one or the other.");
+		const providedValue = controlledValue !== null && controlledValue !== void 0 ? controlledValue : defaultValue;
+		warning(providedValue !== void 0 && tabValues.length > 0 && !tabValues.includes(providedValue), `UnderlinePanels: the selected value "${providedValue}" does not match any tab, so the first tab is selected instead. Provide a \`value\`/\`defaultValue\` that matches a \`UnderlinePanels.Tab\` \`value\`.`);
+	}
 	return /*#__PURE__*/ jsx(UnderlinePanelsContext.Provider, {
 		value: contextValue,
 		children: /*#__PURE__*/ jsxs(Tabs, {
 			id: parentId,
-			value: selectedValue,
-			onValueChange: ({ value }) => setSelectedValue(value),
+			value: effectiveValue,
+			activationMode,
+			onValueChange: ({ value }) => handleValueChange(value),
 			children: [/*#__PURE__*/ jsx(UnderlineWrapper, {
 				ref: wrapperRef,
 				"data-icons-visible": iconsVisible,

package/dist/internal/components/UnderlineTabbedInterface-8a52007f.css

@@ -0,0 +1,2 @@
+.prc-components-UnderlineWrapper-eT-Yj{align-items:flex-start;box-shadow:inset 0 -1px var(--borderColor-muted,#d1d9e0b3);display:flex;justify-content:flex-start;min-height:var(--control-xlarge-size,3rem);padding-top:var(--base-size-8,.5rem);padding-inline:var(--stack-padding-normal,1rem)}.prc-components-UnderlineWrapper-eT-Yj[data-variant=flush]{padding-inline:unset}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap]{border-block:0!important;box-sizing:border-box!important;max-height:var(--control-xlarge-size,3rem);overflow:hidden;padding-block:var(--base-size-8,.5rem) 0!important}.prc-components-UnderlineWrapper-eT-Yj[data-overflow-mode=wrap] .prc-components-UnderlineItemList-xKlKC{flex-grow:1;flex-wrap:wrap;overflow:hidden}.prc-components-UnderlineItemList-xKlKC{contain:layout;display:flex;gap:var(--stack-gap-condensed,.5rem);list-style:none;margin:0;padding:0;white-space:nowrap}.prc-components-UnderlineItem-7fP-n,.prc-components-UnderlineItemList-xKlKC{align-items:center;position:relative}.prc-components-UnderlineItem-7fP-n{appearance:none;background-color:transparent;border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,#1f2328);cursor:pointer;display:inline-flex;font:inherit;font-size:var(--text-body-size-medium,.875rem);height:var(--base-size-32,2rem);line-height:var(--text-body-lineHeight-medium,1.4285);margin-bottom:var(--base-size-8,.5rem);max-width:100%;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem);text-align:center;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.prc-components-UnderlineItem-7fP-n:hover{background-color:var(--bgColor-neutral-muted,#818b981f);-webkit-text-decoration:none;text-decoration:none;transition:background-color .12s ease-out}}.prc-components-UnderlineItem-7fP-n:focus{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n:focus:not(:focus-visible){box-shadow:none}.prc-components-UnderlineItem-7fP-n:focus-visible{box-shadow:inset 0 0 0 2px var(--fgColor-accent,#0969da);outline:2px solid transparent}.prc-components-UnderlineItem-7fP-n [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=icon]{align-items:center;color:var(--fgColor-muted,#59636e);display:inline-flex;margin-inline-end:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n [data-component=text]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-components-UnderlineItem-7fP-n [data-component=counter]{align-items:center;display:flex;margin-inline-start:var(--base-size-8,.5rem)}.prc-components-UnderlineItem-7fP-n:after{background-color:transparent;content:"";height:2px;inset:auto 0 0;margin-bottom:calc(var(--base-size-8,.5rem)*-1);pointer-events:none;position:absolute}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]) [data-component=text],.prc-components-UnderlineItem-7fP-n[aria-selected=true] [data-component=text]{font-weight:var(--base-text-weight-semibold,600)}.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73))}@media (forced-colors:active){.prc-components-UnderlineItem-7fP-n[aria-current]:not([aria-current=false]):after,.prc-components-UnderlineItem-7fP-n[aria-selected=true]:after{background-color:LinkText}}.prc-components-LoadingCounter-dBuLy{animation:prc-components-loadingCounterKeyFrames-8tMlf 1.2s ease-in-out infinite alternate;background-color:var(--bgColor-neutral-muted,#818b981f);border-color:var(--borderColor-default,#d1d9e0);border-radius:20px;display:inline-block;height:1rem;width:1.5rem}@keyframes prc-components-loadingCounterKeyFrames-8tMlf{0%{opacity:1}to{opacity:.2}}
+/*# sourceMappingURL=UnderlineTabbedInterface-8a52007f.css.map */

package/dist/internal/components/UnderlineTabbedInterface-8a52007f.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/internal/components/UnderlineTabbedInterface.module.css.js"],"names":[],"mappings":"AAAA,uCAME,sBAAuB,CAOvB,0DAAiD,CAZjD,YAAa,CAIb,0BAA2B,CAI3B,0CAAsC,CAPtC,oCAA+B,CAE/B,+CAgCF,CArBE,2DAEE,oBACF,CAEA,gEAOE,wBAA0B,CAD1B,+BAAiC,CAHjC,0CAAsC,CADtC,eAAgB,CAMhB,kDAOF,CALE,wGACE,WAAY,CACZ,cAAe,CACf,eACF,CAIJ,wCAaE,cAAe,CAXf,YAAa,CAMb,oCAA+B,CAF/B,eAAgB,CAFhB,QAAS,CADT,SAAU,CAEV,kBASF,CAEA,4EATE,kBAAmB,CANnB,iBA8CF,CA/BA,oCAmBE,eAAgB,CARhB,4BAA6B,CAC7B,QAAS,CACT,gDAAyC,CANzC,oCAA6B,CAG7B,cAAe,CAPf,mBAAoB,CACpB,YAAa,CACb,8CAAuC,CAWvC,+BAA2B,CAV3B,qDAAuD,CASvD,sCAAiC,CADjC,cAAe,CAOf,wCAAiC,CADjC,uCAAkC,CAZlC,iBAAkB,CAClB,4BAAqB,CAArB,oBAsBF,CAPE,qBACE,0CAEE,uDAA8C,CAD9C,4BAAqB,CAArB,oBAAqB,CAErB,yCACF,CACF,CAGF,0CAGE,wDAAiD,CAFjD,6BAQF,CAHE,8DACE,eACF,CAGF,kDAGE,wDAAiD,CAFjD,6BAGF,CAGA,0DAME,0BAA2B,CAL3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAGT,iBAAkB,CADlB,kBAGF,CAEA,0DAGE,kBAAmB,CADnB,kCAA2B,CAD3B,mBAAoB,CAGpB,0CACF,CAGA,0DACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,6DAGE,kBAAmB,CADnB,YAAa,CADb,4CAGF,CAEA,0CAOE,4BAA6B,CAD7B,UAAW,CAFX,UAAW,CAFX,cAAe,CACf,+CAA4C,CAE5C,mBAAoB,CAJpB,iBAOF,CAEA,gLAEE,gDACF,CAEA,gJAGE,iGAMF,CAJE,8BALF,gJAOI,yBAEJ,CADE,CAGF,qCASE,0FAAsE,CAJtE,uDAA8C,CAC9C,+CAAwC,CAExC,kBAAmB,CAPnB,oBAAqB,CAErB,WAAY,CADZ,YAQF,CAEA,wDACE,GACE,SACF,CAEA,GACE,UACF,CACF","file":"UnderlineTabbedInterface-8a52007f.css","sourcesContent":[".UnderlineWrapper {\n  display: flex;\n  padding-top: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--stack-padding-normal);\n  justify-content: flex-start;\n  align-items: flex-start;\n\n  /* make space for the underline */\n  min-height: var(--control-xlarge-size);\n\n  /* using a box-shadow instead of a border to accommodate 'overflow-y: hidden' on UnderlinePanels */\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 -1px var(--borderColor-muted);\n\n  &[data-variant='flush'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-inline: unset;\n  }\n\n  &[data-overflow-mode='wrap'] {\n    /* Wrap items onto hidden next lines */\n    overflow: hidden;\n    max-height: var(--control-xlarge-size);\n\n    /* Pin the vertical box model so external box-sizing/border/padding overrides can't change the height budget and incorrectly trigger the overflow \"more\" menu */\n    box-sizing: border-box !important;\n    border-block: 0 !important;\n    padding-block: var(--base-size-8) 0 !important;\n\n    .UnderlineItemList {\n      flex-grow: 1;\n      flex-wrap: wrap;\n      overflow: hidden;\n    }\n  }\n}\n\n.UnderlineItemList {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  white-space: nowrap;\n  list-style: none;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n\n  /* Isolate the ResizeObserver-driven item swapping (UnderlineNav overflow menu / UnderlinePanels)\n  so it can't invalidate ancestor layout. Safe because UnderlineNav's overflow menu is rendered via ActionMenu.Overlay\n  (portal by default), and layout containment does not clip. */\n  contain: layout;\n}\n\n.UnderlineItem {\n  /* underline tab specific styles */\n  position: relative;\n  display: inline-flex;\n  font: inherit;\n  font-size: var(--text-body-size-medium);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  color: var(--fgColor-default);\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  max-width: 100%;\n  margin-bottom: var(--base-size-8);\n  height: var(--base-size-32);\n\n  /* button resets */\n  appearance: none;\n  padding-inline: var(--base-size-8);\n  padding-block: var(--base-size-6);\n  align-items: center;\n\n  @media (hover: hover) {\n    &:hover {\n      text-decoration: none;\n      background-color: var(--bgColor-neutral-muted);\n      transition: background-color 0.12s ease-out;\n    }\n  }\n}\n\n.UnderlineItem:focus {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n\n  /* where focus-visible is supported, remove the focus box-shadow */\n  &:not(:focus-visible) {\n    box-shadow: none;\n  }\n}\n\n.UnderlineItem:focus-visible {\n  outline: 2px solid transparent;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: inset 0 0 0 2px var(--fgColor-accent);\n}\n\n/* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n.UnderlineItem [data-content]::before {\n  display: block;\n  height: 0;\n  font-weight: var(--base-text-weight-semibold);\n  white-space: nowrap;\n  visibility: hidden;\n  content: attr(data-content);\n}\n\n.UnderlineItem [data-component='icon'] {\n  display: inline-flex;\n  color: var(--fgColor-muted);\n  align-items: center;\n  margin-inline-end: var(--base-size-8);\n}\n\n/* Truncate items if necessary (should only ever apply to the last item after everything else overflows) */\n.UnderlineItem [data-component='text'] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.UnderlineItem [data-component='counter'] {\n  margin-inline-start: var(--base-size-8);\n  display: flex;\n  align-items: center;\n}\n\n.UnderlineItem::after {\n  position: absolute;\n  inset: auto 0 0;\n  margin-bottom: calc(-1 * var(--base-size-8));\n  height: 2px;\n  pointer-events: none;\n  content: '';\n  background-color: transparent;\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false']) [data-component='text'],\n.UnderlineItem[aria-selected='true'] [data-component='text'] {\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.UnderlineItem[aria-current]:not([aria-current='false'])::after,\n.UnderlineItem[aria-selected='true']::after {\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 Window Force Color Mode https://learn.microsoft.com/en-us/fluent-ui/web-components/design-system/high-contrast */\n    background-color: LinkText;\n  }\n}\n\n.LoadingCounter {\n  display: inline-block;\n  width: 1.5rem;\n  height: 1rem;\n  /* 16px */\n  background-color: var(--bgColor-neutral-muted);\n  border-color: var(--borderColor-default);\n  /* stylelint-disable-next-line primer/borders */\n  border-radius: 20px;\n  animation: loadingCounterKeyFrames 1.2s ease-in-out infinite alternate;\n}\n\n@keyframes loadingCounterKeyFrames {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0.2;\n  }\n}\n"]}

package/dist/internal/components/UnderlineTabbedInterface.module.css.js

@@ -1,4 +1,4 @@
-import "./UnderlineTabbedInterface-798ef3cb.css";
+import "./UnderlineTabbedInterface-8a52007f.css";
 //#region src/internal/components/UnderlineTabbedInterface.module.css.js
 var UnderlineTabbedInterface_module_css_default = {
 	"UnderlineWrapper": "prc-components-UnderlineWrapper-eT-Yj",

package/generated/components.json

@@ -3394,39 +3394,39 @@
       "source": "https://github.com/primer/react/tree/main/packages/react/src/Flash",
       "id": "flash",
       "name": "Flash",
-      "status": "alpha",
+      "status": "deprecated",
       "a11yReviewed": "2025-01-08",
       "stories": [
         {
-          "id": "components-flash--default",
+          "id": "deprecated-components-flash--default",
           "code": "() => <Flash>Default</Flash>"
         },
         {
-          "id": "components-flash-features--success",
+          "id": "deprecated-components-flash-features--success",
           "code": "() => (\n  <Flash\n    variant=\"success\"\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <CheckCircleIcon aria-label=\"Success\" />\n    </div>\n    <div className={classes.Message}>Success</div>\n  </Flash>\n)"
         },
         {
-          "id": "components-flash-features--danger",
+          "id": "deprecated-components-flash-features--danger",
           "code": "() => (\n  <Flash\n    variant=\"danger\"\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Danger\" />\n    </div>\n    <div className={classes.Message}>Danger</div>\n  </Flash>\n)"
         },
         {
-          "id": "components-flash-features--warning",
+          "id": "deprecated-components-flash-features--warning",
           "code": "() => (\n  <Flash\n    variant=\"warning\"\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <AlertIcon aria-label=\"Warning\" />\n    </div>\n    <div className={classes.Message}>Warning</div>\n  </Flash>\n)"
         },
         {
-          "id": "components-flash-features--full",
+          "id": "deprecated-components-flash-features--full",
           "code": "() => (\n  <Flash\n    full\n    style={{\n      display: 'grid',\n      gridTemplateColumns: 'min-content 1fr minmax(0, auto)',\n      gridTemplateAreas: `'visual message actions'`,\n    }}\n  >\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>Full</div>\n  </Flash>\n)"
         },
         {
-          "id": "components-flash-features--with-icon-and-action",
+          "id": "deprecated-components-flash-features--with-icon-and-action",
           "code": "() => (\n  <Flash className={classes.WithIconAndAction}>\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </div>\n    <div className={classes.ActionsResponsive}>\n      <Button>Join waitlist</Button>\n    </div>\n  </Flash>\n)"
         },
         {
-          "id": "components-flash-features--with-icon-action-dismiss",
+          "id": "deprecated-components-flash-features--with-icon-action-dismiss",
           "code": "() => (\n  <Flash className={classes.WithIconActionDismiss}>\n    <div className={classes.Visual}>\n      <InfoIcon aria-label=\"Info\" />\n    </div>\n    <div className={classes.Message}>\n      This is a flash message with an icon and an action.\n      <Link href=\"/\"> Learn more.</Link>\n    </div>\n    <div className={classes.ActionsResponsive}>\n      <Button>Join waitlist</Button>\n    </div>\n    <div className={classes.Close}>\n      <IconButton variant=\"invisible\" icon={XIcon} aria-label=\"Dismiss\" />\n    </div>\n  </Flash>\n)"
         }
       ],
-      "importPath": "@primer/react",
+      "importPath": "@primer/react/deprecated",
       "props": [
         {
           "name": "full",
@@ -9605,6 +9605,22 @@
         {
           "id": "experimental-components-underlinepanels-features--with-icons-hidden-on-narrow-screen",
           "code": "() => (\n  <UnderlinePanels aria-label=\"Tabs with icons\">\n    <UnderlinePanels.Tab icon={CodeIcon}>Tab 1</UnderlinePanels.Tab>\n    <UnderlinePanels.Tab icon={EyeIcon}>Tab 2</UnderlinePanels.Tab>\n    <UnderlinePanels.Tab icon={GitPullRequestIcon}>Tab 3</UnderlinePanels.Tab>\n    <UnderlinePanels.Tab icon={CommentDiscussionIcon}>\n      Tab 4\n    </UnderlinePanels.Tab>\n    <UnderlinePanels.Tab icon={PlayIcon}>Tab 5</UnderlinePanels.Tab>\n    <UnderlinePanels.Tab icon={ProjectIcon}>Tab 6</UnderlinePanels.Tab>\n    <UnderlinePanels.Tab icon={GraphIcon}>Tab 7</UnderlinePanels.Tab>\n    <UnderlinePanels.Tab icon={GearIcon}>Tab 8</UnderlinePanels.Tab>\n    <UnderlinePanels.Tab icon={ShieldLockIcon}>Tab 9</UnderlinePanels.Tab>\n    <UnderlinePanels.Panel>Panel 1</UnderlinePanels.Panel>\n    <UnderlinePanels.Panel>Panel 2</UnderlinePanels.Panel>\n    <UnderlinePanels.Panel>Panel 3</UnderlinePanels.Panel>\n    <UnderlinePanels.Panel>Panel 4</UnderlinePanels.Panel>\n    <UnderlinePanels.Panel>Panel 5</UnderlinePanels.Panel>\n    <UnderlinePanels.Panel>Panel 6</UnderlinePanels.Panel>\n    <UnderlinePanels.Panel>Panel 7</UnderlinePanels.Panel>\n    <UnderlinePanels.Panel>Panel 8</UnderlinePanels.Panel>\n    <UnderlinePanels.Panel>Panel 9</UnderlinePanels.Panel>\n  </UnderlinePanels>\n)"
+        },
+        {
+          "id": "experimental-components-underlinepanels-features--controlled",
+          "code": "() => {\n  const [refType, setRefType] = useState('branch')\n  return (\n    <>\n      <FlagState />\n      <UnderlinePanels\n        aria-label=\"Ref type\"\n        value={refType}\n        onChange={({ value }) => {\n          action('onChange')({\n            value,\n          })\n          setRefType(value)\n        }}\n      >\n        <UnderlinePanels.Tab value=\"branch\" icon={GitBranchIcon}>\n          Branches\n        </UnderlinePanels.Tab>\n        <UnderlinePanels.Tab value=\"tag\" icon={TagIcon}>\n          Tags\n        </UnderlinePanels.Tab>\n        <UnderlinePanels.Panel value=\"branch\">\n          Find or create a branch…\n        </UnderlinePanels.Panel>\n        <UnderlinePanels.Panel value=\"tag\">\n          Search or create a new tag…\n        </UnderlinePanels.Panel>\n      </UnderlinePanels>\n      <p>\n        Selected ref type: <strong>{refType}</strong>\n      </p>\n    </>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-underlinepanels-features--uncontrolled",
+          "code": "() => (\n  <>\n    <FlagState />\n    <UnderlinePanels\n      aria-label=\"Ref type\"\n      defaultValue=\"tag\"\n      onChange={({ value }) => {\n        action('onChange')({\n          value,\n        })\n      }}\n    >\n      <UnderlinePanels.Tab value=\"branch\">Branches</UnderlinePanels.Tab>\n      <UnderlinePanels.Tab value=\"tag\">Tags</UnderlinePanels.Tab>\n      <UnderlinePanels.Panel value=\"branch\">\n        Find or create a branch…\n      </UnderlinePanels.Panel>\n      <UnderlinePanels.Panel value=\"tag\">\n        Search or create a new tag…\n      </UnderlinePanels.Panel>\n    </UnderlinePanels>\n  </>\n)"
+        },
+        {
+          "id": "experimental-components-underlinepanels-features--manual-activation",
+          "code": "() => {\n  const [refType, setRefType] = useState('branch')\n  return (\n    <>\n      <FlagState />\n      <p>\n        With <code>activationMode=&quot;manual&quot;</code>, arrow keys only\n        move focus; press Enter or Space (or click) to commit selection. Prefer\n        this when switching tabs triggers async work like a fetch.\n      </p>\n      <UnderlinePanels\n        aria-label=\"Ref type\"\n        value={refType}\n        activationMode=\"manual\"\n        onChange={({ value }) => {\n          action('onChange')({\n            value,\n          })\n          setRefType(value)\n        }}\n      >\n        <UnderlinePanels.Tab value=\"branch\">Branches</UnderlinePanels.Tab>\n        <UnderlinePanels.Tab value=\"tag\">Tags</UnderlinePanels.Tab>\n        <UnderlinePanels.Panel value=\"branch\">\n          Find or create a branch…\n        </UnderlinePanels.Panel>\n        <UnderlinePanels.Panel value=\"tag\">\n          Search or create a new tag…\n        </UnderlinePanels.Panel>\n      </UnderlinePanels>\n    </>\n  )\n}"
+        },
+        {
+          "id": "experimental-components-underlinepanels-features--in-overlay",
+          "code": "() => {\n  const [open, setOpen] = useState(false)\n  const [refType, setRefType] = useState('branch')\n  return (\n    <>\n      <FlagState />\n      <AnchoredOverlay\n        open={open}\n        onOpen={() => setOpen(true)}\n        onClose={() => setOpen(false)}\n        renderAnchor={(props) => <Button {...props}>Select ref type</Button>}\n        overlayProps={{\n          role: 'dialog',\n          'aria-modal': true,\n          'aria-label': 'Select a ref type',\n          style: {\n            width: '320px',\n          },\n        }}\n        focusZoneSettings={{\n          disabled: true,\n        }}\n      >\n        <UnderlinePanels\n          aria-label=\"Ref type\"\n          value={refType}\n          onChange={({ value }) => {\n            action('onChange')({\n              value,\n            })\n            setRefType(value)\n          }}\n        >\n          <UnderlinePanels.Tab value=\"branch\">Branches</UnderlinePanels.Tab>\n          <UnderlinePanels.Tab value=\"tag\">Tags</UnderlinePanels.Tab>\n          <UnderlinePanels.Panel value=\"branch\">\n            Find or create a branch…\n          </UnderlinePanels.Panel>\n          <UnderlinePanels.Panel value=\"tag\">\n            Search or create a new tag…\n          </UnderlinePanels.Panel>\n        </UnderlinePanels>\n      </AnchoredOverlay>\n    </>\n  )\n}"
         }
       ],
       "importPath": "@primer/react/experimental",
@@ -9621,6 +9637,30 @@
           "defaultValue": "",
           "description": "ID of the element containing the name for the tab list"
         },
+        {
+          "name": "value",
+          "type": "string",
+          "defaultValue": "",
+          "description": "The value of the selected tab, keyed to each `UnderlinePanels.Tab`/`UnderlinePanels.Panel` `value`. Provide this (with `onChange`) for a controlled component where the selected tab is the single source of truth. Requires the `primer_react_underline_panels_controlled` feature flag."
+        },
+        {
+          "name": "defaultValue",
+          "type": "string",
+          "defaultValue": "",
+          "description": "The value of the tab selected by default, for an uncontrolled component. Cannot be combined with `value`."
+        },
+        {
+          "name": "onChange",
+          "type": "({value}: {value: string}) => void",
+          "defaultValue": "",
+          "description": "Callback fired whenever the selected tab changes, for every selection method — pointer, Enter/Space, and Arrow/Home/End keys. Unlike `UnderlinePanels.Tab`'s `onSelect` (which only fires on click and Enter/Space), this makes the selected value usable as a single source of truth for data-driven tabs."
+        },
+        {
+          "name": "activationMode",
+          "type": "'automatic' | 'manual'",
+          "defaultValue": "'automatic'",
+          "description": "Controls how tabs are activated with the keyboard. `'automatic'` selects on focus (Arrow/Home/End select immediately); `'manual'` moves focus only and commits selection on Enter, Space, or click. Prefer `'manual'` when displaying a panel is not instant (e.g. it triggers a network request). Requires the `primer_react_underline_panels_controlled` feature flag."
+        },
         {
           "name": "children",
           "type": "Array<UnderlinePanels.Tab | UnderlinePanels.Panel>",
@@ -9651,6 +9691,12 @@
         {
           "name": "UnderlinePanels.Tab",
           "props": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": "A value that uniquely identifies this tab, paired with the `UnderlinePanels.Panel` of the same `value`. Provide this to use domain values (e.g. `'branch'`) with the container's controlled `value`/`onChange` API. When omitted, tabs and panels are paired by DOM order."
+            },
             {
               "name": "aria-selected",
               "type": "| boolean | 'true' | 'false'",
@@ -9661,7 +9707,7 @@
               "name": "onSelect",
               "type": "(event) => void",
               "defaultValue": "",
-              "description": "The handler that gets called when the tab is selected"
+              "description": "The handler that gets called when the tab is selected. Note: this fires only on click and Enter/Space — not on arrow-key navigation. For a callback that fires for every selection method, use the container's `onChange` prop instead."
             },
             {
               "name": "counter",
@@ -9679,7 +9725,14 @@
         },
         {
           "name": "UnderlinePanels.Panel",
-          "props": [],
+          "props": [
+            {
+              "name": "value",
+              "type": "string",
+              "defaultValue": "",
+              "description": "A value that uniquely identifies this panel, paired with the `UnderlinePanels.Tab` of the same `value`. When omitted, tabs and panels are paired by DOM order."
+            }
+          ],
           "passthrough": {
             "element": "div",
             "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#Attributes"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.37.0-rc.7ab3f8b3e",
+  "version": "38.37.1-rc.166760c53",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -108,12 +108,12 @@
     "@primer/doc-gen": "^0.0.1",
     "@primer/react-compiler-check": "^0.0.0",
     "@rolldown/plugin-babel": "^0.2.3",
-    "@storybook/addon-a11y": "10.5.7",
-    "@storybook/addon-docs": "10.5.7",
-    "@storybook/addon-links": "10.5.7",
+    "@storybook/addon-a11y": "10.5.8",
+    "@storybook/addon-docs": "10.5.8",
+    "@storybook/addon-links": "10.5.8",
     "@storybook/addon-mcp": "^0.7.0",
     "@storybook/icons": "^2.1.0",
-    "@storybook/react-vite": "10.5.7",
+    "@storybook/react-vite": "10.5.8",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.3.0",
@@ -170,7 +170,7 @@
     "rolldown-plugin-dts": "^0.26.0",
     "rolldown-plugin-import-css": "^0.0.0",
     "rolldown-plugin-preserve-directives": "^0.0.0",
-    "storybook": "10.5.7",
+    "storybook": "10.5.8",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.20.3",

package/dist/Button/ButtonBase-311501b9.css

@@ -1,2 +0,0 @@
-.prc-Button-ButtonBase-9n-Xk{align-items:center;appearance:none;background-color:transparent;border:var(--borderWidth-thin,.0625rem) solid;border-color:var(--button-default-borderColor-rest,#d1d9e0);border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,#25292e);cursor:pointer;display:flex;font-family:inherit;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-8,.5rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:80ms cubic-bezier(.65,0,.35,1);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}.prc-Button-ButtonBase-9n-Xk:has([data-kbd-chord]){padding-inline-end:var(--base-size-6,.375rem)}.prc-Button-ButtonBase-9n-Xk:hover{transition-duration:80ms}.prc-Button-ButtonBase-9n-Xk:focus-visible{box-shadow:none;outline:2px solid var(--focus-outline-color,var(--focus-outlineColor,#0969da));outline-offset:-2px}.prc-Button-ButtonBase-9n-Xk:active{transition:none}.prc-Button-ButtonBase-9n-Xk:disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:not([data-loading=true]){box-shadow:none;cursor:not-allowed}.prc-Button-ButtonBase-9n-Xk:disabled:not(.prc-Button-does-not-exist-3ns8K) .prc-Button-CounterLabel-5hAs4,.prc-Button-ButtonBase-9n-Xk:disabled:not(.prc-Button-does-not-exist-3ns8K) .prc-Button-Visual-YNt2F,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:not([data-loading=true]) .prc-Button-CounterLabel-5hAs4,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:not([data-loading=true]) .prc-Button-Visual-YNt2F{color:inherit}@media (forced-colors:active){.prc-Button-ButtonBase-9n-Xk:focus{outline:1px solid transparent}}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-Visual-YNt2F){color:var(--fgColor-muted,#59636e);display:flex;pointer-events:none}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-VisualWrap-E4cnq){display:flex;pointer-events:none}.prc-Button-ButtonBase-9n-Xk:where(.prc-Button-IconButton-fyge7){display:inline-grid;flex-shrink:0;min-width:unset;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.prc-Button-ButtonBase-9n-Xk:where(.prc-Button-IconButton-fyge7):where([data-size=small]){width:var(--control-small-size,1.75rem)}.prc-Button-ButtonBase-9n-Xk:where(.prc-Button-IconButton-fyge7):where([data-size=large]){width:var(--control-large-size,2.5rem)}.prc-Button-ButtonBase-9n-Xk:where([href]){display:inline-flex}.prc-Button-ButtonBase-9n-Xk:where([href]):hover{-webkit-text-decoration:none;text-decoration:none}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5){align-content:center;align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5)>:not(:last-child){margin-right:var(--base-size-8,.5rem)}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5):where([data-align=center]){justify-content:center}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-ButtonContent-Iohp5):where([data-align=start]){justify-content:flex-start}.prc-Button-ButtonBase-9n-Xk :where([data-component=leadingVisual]){grid-area:leadingVisual}.prc-Button-ButtonBase-9n-Xk :where(.prc-Button-Label-FWkx3){grid-area:text;line-height:var(--text-body-lineHeight-medium,1.5);white-space:nowrap}.prc-Button-ButtonBase-9n-Xk :where([data-component=trailingVisual]){grid-area:trailingVisual}.prc-Button-ButtonBase-9n-Xk :where([data-component=trailingAction]){margin-right:calc(var(--base-size-4,.25rem)*-1)}.prc-Button-ButtonBase-9n-Xk:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=small]) .prc-Button-ButtonContent-Iohp5>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=small]) .prc-Button-Label-FWkx3{line-height:var(--text-body-lineHeight-small,1.625)}.prc-Button-ButtonBase-9n-Xk:where([data-size=large]){gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=large]) .prc-Button-ButtonContent-Iohp5>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-size=large]):has([data-kbd-chord]){padding-inline-end:var(--base-size-8,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-block=block]){width:100%}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]){height:unset;min-height:var(--control-medium-size,2rem);min-width:-moz-fit-content;min-width:fit-content}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]) .prc-Button-ButtonContent-Iohp5{align-self:stretch;flex:1 1 auto;padding-block:calc(var(--control-medium-paddingBlock,.375rem) - var(--base-size-2,.125rem))}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]) .prc-Button-Label-FWkx3{white-space:unset;word-break:break-word}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=small]){height:unset;min-height:var(--control-small-size,1.75rem)}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=small]) .prc-Button-ButtonContent-Iohp5{padding-block:calc(var(--control-small-paddingBlock,.25rem) - var(--base-size-2,.125rem))}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=large]){height:unset;min-height:var(--control-large-size,2.5rem);padding-inline:var(--control-large-paddingInline-spacious,1rem)}.prc-Button-ButtonBase-9n-Xk:where([data-label-wrap=true]):where([data-size=large]) .prc-Button-ButtonContent-Iohp5{padding-block:calc(var(--control-large-paddingBlock,.625rem) - var(--base-size-2,.125rem))}.prc-Button-ButtonBase-9n-Xk:where([data-loading=true]) .prc-Button-LoadingSpinner-6KfaT:not([data-component=leadingVisual],[data-component=trailingVisual],[data-component=trailingAction]){grid-area:text;margin-right:0!important;place-self:center}.prc-Button-ButtonBase-9n-Xk:where([data-loading=true]) .prc-Button-LoadingSpinner-6KfaT:not([data-component=leadingVisual],[data-component=trailingVisual],[data-component=trailingAction])+.prc-Button-Label-FWkx3{visibility:hidden}.prc-Button-ButtonBase-9n-Xk .prc-Button-LoadingSpinner-6KfaT{align-items:center;display:flex;justify-content:center}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]){background-color:var(--button-default-bgColor-rest,#f6f8fa);box-shadow:var(--button-default-shadow-resting,0 1px 0 0 #1f23280a);color:var(--button-default-fgColor-rest,#25292e)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=default]){background-color:var(--button-default-bgColor-active,#e6eaef);border-color:var(--button-default-borderColor-active,#d1d9e0)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):hover{background-color:var(--button-default-bgColor-hover,#eff2f5);border-color:var(--button-default-borderColor-hover,#d1d9e0)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):active{background-color:var(--button-default-bgColor-active,#e6eaef);border-color:var(--button-default-borderColor-active,#d1d9e0)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=default]):not([data-loading=true]){background-color:var(--button-default-bgColor-disabled,#eff2f5);border-color:var(--button-default-borderColor-disabled,#818b981a);box-shadow:none;color:var(--control-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-default-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-default-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-default-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=default]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-default-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-default-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-default-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-default-bgColor-rest,#818b981f)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]) [data-kbd-chord]{background:var(--buttonKeybindingHint-default-bgColor-rest,#eff2f5);border-color:var(--buttonKeybindingHint-default-borderColor-rest,#d1d9e0b3);color:var(--buttonKeybindingHint-default-fgColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=default]):where(.prc-Button-IconButton-fyge7){color:var(--fgColor-muted,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]){background-color:var(--button-primary-bgColor-rest,#1f883d);border-color:var(--button-primary-borderColor-rest,#1f232826);box-shadow:var(--shadow-resting-small,0 1px 1px 0 #1f23280a,0 1px 2px 0 #1f232808);color:var(--button-primary-fgColor-rest,#fff)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=primary]){background-color:var(--button-primary-bgColor-active,#197935);box-shadow:var(--button-primary-shadow-selected,inset 0 1px 0 0 #002d114d)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):hover{background-color:var(--button-primary-bgColor-hover,#1c8139);border-color:var(--button-primary-borderColor-hover,#1f232826)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,#fff);outline:2px solid var(--focus-outline-color,var(--focus-outlineColor,#0969da));outline-offset:-2px}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):active{background-color:var(--button-primary-bgColor-active,#197935);box-shadow:var(--button-primary-shadow-selected,inset 0 1px 0 0 #002d114d)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=primary]):not([data-loading=true]){background-color:var(--button-primary-bgColor-disabled,#95d8a6);border-color:var(--button-primary-borderColor-disabled,#95d8a6);box-shadow:none;color:var(--button-primary-fgColor-disabled,#ffffffcc)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-primary-bgColor-disabled,#002d111a);border-color:var(--buttonKeybindingHint-primary-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-primary-fgColor-disabled,#ffffffcc)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=primary]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-primary-bgColor-disabled,#002d111a);border-color:var(--buttonKeybindingHint-primary-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-primary-fgColor-disabled,#ffffffcc)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-primary-bgColor-rest,#002d1133)!important;color:var(--button-primary-fgColor-rest,#fff)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]) [data-kbd-chord]{background:var(--buttonKeybindingHint-primary-bgColor-rest,#002d1133);border-color:var(--buttonKeybindingHint-primary-borderColor-rest,#1f232826);color:var(--buttonKeybindingHint-primary-fgColor-rest,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=primary]) .prc-Button-Visual-YNt2F{color:var(--button-primary-fgColor-rest,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]){background-color:var(--button-danger-bgColor-rest,#f6f8fa);box-shadow:var(--button-default-shadow-resting,0 1px 0 0 #1f23280a);color:var(--button-danger-fgColor-rest,#d1242f)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=danger]){background-color:var(--button-danger-bgColor-active,#a40e26);border-color:var(--button-danger-borderColor-active,#1f232826);box-shadow:var(--button-danger-shadow-selected,inset 0 1px 0 0 #4c001433);color:var(--button-danger-fgColor-active,#fff)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=danger]) .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover{background-color:var(--button-danger-bgColor-hover,#cf222e);border-color:var(--button-danger-borderColor-hover,#1f232826);box-shadow:var(--shadow-resting-small,0 1px 1px 0 #1f23280a,0 1px 2px 0 #1f232808);color:var(--button-danger-fgColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-hover,#ffffff33)!important;color:var(--buttonCounter-danger-fgColor-hover,#fff)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-hover,#1f232833);border-color:var(--buttonKeybindingHint-danger-borderColor-hover,#1f232826);color:var(--buttonKeybindingHint-danger-fgColor-hover,#fff);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):hover .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active{background-color:var(--button-danger-bgColor-active,#a40e26);border-color:var(--button-danger-borderColor-active,#1f232826);box-shadow:var(--button-danger-shadow-selected,inset 0 1px 0 0 #4c001433);color:var(--button-danger-fgColor-active,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-hover,#ffffff33)!important;color:var(--buttonCounter-danger-fgColor-hover,#fff)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-active,#1f232866);border-color:var(--buttonKeybindingHint-danger-borderColor-active,#1f232826);color:var(--buttonKeybindingHint-danger-fgColor-active,#fff);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):active .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-hover,#fff)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=danger]):not([data-loading=true]){background-color:var(--button-danger-bgColor-disabled,#eff2f5);border-color:var(--button-default-borderColor-disabled,#818b981a);box-shadow:none;color:var(--button-danger-fgColor-disabled,#d1242f80)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):disabled:not(.prc-Button-does-not-exist-3ns8K) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-disabled,#cf222e0d)!important;color:var(--buttonCounter-danger-fgColor-disabled,#d1242f80)!important}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=danger]):not([data-loading=true]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-disabled,#cf222e0d)!important;color:var(--buttonCounter-danger-fgColor-disabled,#d1242f80)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-danger-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-danger-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=danger]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-disabled,#eff2f5);border-color:var(--buttonKeybindingHint-danger-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-danger-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-danger-bgColor-rest,#cf222e1a)!important;color:var(--buttonCounter-danger-fgColor-rest,#c21c2c)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]) [data-kbd-chord]{background:var(--buttonKeybindingHint-danger-bgColor-rest,#eff2f5);border-color:var(--buttonKeybindingHint-danger-borderColor-rest,#d1d9e0b3);color:var(--buttonKeybindingHint-danger-fgColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=danger]) .prc-Button-Visual-YNt2F{color:var(--button-danger-iconColor-rest,#d1242f)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]){border-color:var(--button-invisible-borderColor-rest,#ffffff00);box-shadow:none;color:var(--button-default-fgColor-rest,#25292e)}.prc-Button-ButtonBase-9n-Xk[aria-expanded=true]:where([data-variant=invisible]){background-color:var(--button-invisible-bgColor-active,#818b9826)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):hover{background-color:var(--button-invisible-bgColor-hover,#818b981a);border-color:var(--button-invisible-borderColor-hover,#ffffff00)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):hover .prc-Button-Visual-YNt2F{color:var(--button-invisible-iconColor-hover,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):hover [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-hover,#818b981a);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):active{background-color:var(--button-invisible-bgColor-active,#818b9826)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):active .prc-Button-Visual-YNt2F{color:var(--button-invisible-iconColor-hover,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):active [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-active,#818b9826);transition:80ms ease-out}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=invisible]):not([data-loading=true]){background-color:var(--button-invisible-bgColor-disabled,#ffffff00);border-color:var(--button-invisible-borderColor-disabled,#ffffff00);box-shadow:none;color:var(--button-invisible-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):disabled:not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-disabled,#ffffff00);border-color:var(--buttonKeybindingHint-invisible-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-invisible-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=invisible]):not([data-loading=true]) [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-disabled,#ffffff00);border-color:var(--buttonKeybindingHint-invisible-borderColor-disabled,#818b981a);color:var(--buttonKeybindingHint-invisible-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]) .prc-Button-Visual-YNt2F{color:var(--button-invisible-iconColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]) .prc-Button-CounterLabel-5hAs4{background-color:var(--buttonCounter-invisible-bgColor-rest,#818b981f)!important}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]) [data-kbd-chord]{background:var(--buttonKeybindingHint-invisible-bgColor-rest,#eff2f5);border-color:var(--buttonKeybindingHint-invisible-borderColor-rest,#ffffff00);color:var(--buttonKeybindingHint-invisible-fgColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=invisible]):where(.prc-Button-IconButton-fyge7){color:var(--button-invisible-iconColor-rest,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]){border:unset;border-radius:0;color:var(--fgColor-link,#0969da);display:inline-flex;font-size:inherit;height:unset;min-width:-moz-fit-content;min-width:fit-content;padding:0;text-align:left}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):hover:not(:disabled,[data-inactive]){-webkit-text-decoration:underline;text-decoration:underline}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):focus,.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):focus-visible{outline-offset:2px}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):disabled,.prc-Button-ButtonBase-9n-Xk[aria-disabled=true]:where([data-variant=link]):not([data-loading=true]){background-color:transparent;border-color:transparent;color:var(--control-fgColor-disabled,#818b98)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]) .prc-Button-Label-FWkx3{white-space:unset}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):where([data-inactive]){background:transparent!important;color:var(--button-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-variant=link]) .prc-Button-Visual-YNt2F{color:var(--fgColor-link,#0969da)}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk[data-no-visuals]:where([data-variant=link]){-webkit-text-decoration:underline;text-decoration:underline}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk[data-no-visuals]:where([data-variant=link]):hover{-webkit-text-decoration:none;text-decoration:none}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]){background-image:linear-gradient(90deg,currentColor,currentColor);background-position:0 calc(100% - 2px);background-repeat:no-repeat;background-size:100% 1.5px}[data-a11y-link-underlines=true] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]):hover{-webkit-text-decoration:none;text-decoration:none}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk[data-no-visuals]:where([data-variant=link]){background-image:none;-webkit-text-decoration:none;text-decoration:none}[data-a11y-link-underlines=false] .prc-Button-ButtonBase-9n-Xk:where([data-variant=link]):not([data-no-visuals]){background-image:none}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]),.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active,.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover{background-color:var(--button-inactive-bgColor,#e6eaef);border-color:var(--button-inactive-bgColor,#e6eaef);box-shadow:none;color:var(--button-inactive-fgColor,#59636e);cursor:auto}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):not(.prc-Button-does-not-exist-3ns8K) .prc-Button-Visual-YNt2F{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover .prc-Button-Visual-YNt2F{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active .prc-Button-Visual-YNt2F{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):not(.prc-Button-does-not-exist-3ns8K) .prc-Button-CounterLabel-5hAs4{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover .prc-Button-CounterLabel-5hAs4{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active .prc-Button-CounterLabel-5hAs4{color:inherit!important}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):not(.prc-Button-does-not-exist-3ns8K) [data-kbd-chord]{background:var(--buttonKeybindingHint-inactive-bgColor,#eff2f5);border-color:var(--buttonKeybindingHint-inactive-borderColor,#d1d9e0b3);color:var(--buttonKeybindingHint-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):hover [data-kbd-chord]{background:var(--buttonKeybindingHint-inactive-bgColor,#eff2f5);border-color:var(--buttonKeybindingHint-inactive-borderColor,#d1d9e0b3);color:var(--buttonKeybindingHint-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-inactive]):active [data-kbd-chord]{background:var(--buttonKeybindingHint-inactive-bgColor,#eff2f5);border-color:var(--buttonKeybindingHint-inactive-borderColor,#d1d9e0b3);color:var(--buttonKeybindingHint-inactive-fgColor,#59636e)}.prc-Button-ButtonBase-9n-Xk:where([data-icon-only-counter]){padding-inline:var(--control-medium-paddingInline-condensed,.5rem)}.prc-Button-ButtonBase-9n-Xk:where([data-icon-only-counter]):where([data-size=small]){padding-inline:var(--control-xsmall-paddingInline-condensed,.25rem)}.prc-Button-ButtonBase-9n-Xk:where([data-icon-only-counter]):where([data-size=large]){padding-inline:var(--control-large-paddingInline-normal,.75rem)}.prc-Button-ConditionalWrapper-Rvbgb{display:block}.prc-Button-ConditionalWrapperLink-d0qv7{display:inline-flex}[data-kbd-chord]{transition:80ms ease-in;transition-property:color,background-color,border-color}
-/*# sourceMappingURL=ButtonBase-311501b9.css.map */