@primer/react 38.22.0-rc.1be1d855e → 38.22.0-rc.5cc83d1b1

package/dist/ActionBar/ActionBar.module.css.js

@@ -1,5 +1,5 @@
-import './ActionBar-3f7b52a3.css';
+import './ActionBar-a41224b2.css';
 
-var styles = {"List":"prc-ActionBar-List-9uz46","detect-overflow":"prc-ActionBar-detect-overflow-mAuJu","Divider":"prc-ActionBar-Divider-6V8yH","Nav":"prc-ActionBar-Nav-9spON","Group":"prc-ActionBar-Group-peNCk","OverflowContainer":"prc-ActionBar-OverflowContainer-AkYZs","MoreButton":"prc-ActionBar-MoreButton-RHqpx"};
+var styles = {"List":"prc-ActionBar-List-9uz46","Divider":"prc-ActionBar-Divider-6V8yH","Nav":"prc-ActionBar-Nav-9spON","Group":"prc-ActionBar-Group-peNCk"};
 
 export { styles as default };

package/dist/ActionBar/index.d.ts

@@ -1,7 +1,7 @@
 export type { ActionBarProps, ActionBarMenuProps, ActionBarMenuItemProps } from './ActionBar';
 declare const ActionBar: import("react").FC<import("react").PropsWithChildren<import("./ActionBar").ActionBarProps>> & {
     IconButton: import("react").ForwardRefExoticComponent<import("./ActionBar").ActionBarIconButtonProps & import("react").RefAttributes<unknown>>;
-    Divider: () => import("react").JSX.Element;
+    Divider: () => import("react").JSX.Element | null;
     Group: import("react").ForwardRefExoticComponent<{
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<unknown>>;

package/dist/AnchoredOverlay/AnchoredOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/AnchoredOverlay/AnchoredOverlay.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/AnchoredOverlay/AnchoredOverlay.tsx"],"names":[],"mappings":"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"}

package/dist/AnchoredOverlay/AnchoredOverlay.js

@@ -1,5 +1,4 @@
-import { useRef, useCallback, useEffect } from 'react';
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
+import { useState, useCallback, useEffect } from 'react';
 import { useFocusTrap } from '../hooks/useFocusTrap.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import { useId } from '../hooks/useId.js';
@@ -52,13 +51,20 @@ const AnchoredOverlay = ({
   renderAs = 'portal'
 }) => {
   const cssAnchorPositioningFlag = useFeatureFlag('primer_react_css_anchor_positioning');
-  const supportsNativeCSSAnchorPositioning = useRef(false);
-  // eslint-disable-next-line react-hooks/refs
-  const cssAnchorPositioning = cssAnchorPositioningFlag && supportsNativeCSSAnchorPositioning.current;
+  // Lazy initial state so feature detection runs once per mount on the client.
+  // Guarded for SSR where `document` is undefined.
+  const [supportsNativeCSSAnchorPositioning] = useState(() => typeof document !== 'undefined' && 'anchorName' in document.documentElement.style);
+  const cssAnchorPositioning = cssAnchorPositioningFlag && supportsNativeCSSAnchorPositioning;
   // Only use Popover API when both CSS anchor positioning is enabled AND renderAs is true
   const shouldRenderAsPopover = cssAnchorPositioning && renderAs === 'popover';
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
+  const [anchorElement, setAnchorElement] = useState(null);
+  // eslint-disable-next-line react-hooks/refs
+  if (anchorRef.current !== anchorElement) {
+    setAnchorElement(anchorRef.current);
+  }
   const [overlayRef, updateOverlayRef] = useRenderForcingRef();
+  const [overlayElement, setOverlayElement] = useState(null);
   const anchorId = useId(externalAnchorId);
   const onClickOutside = useCallback(() => onClose === null || onClose === void 0 ? void 0 : onClose('click-outside'), [onClose]);
   const onEscape = useCallback(() => onClose === null || onClose === void 0 ? void 0 : onClose('escape'), [onClose]);
@@ -70,14 +76,14 @@ const AnchoredOverlay = ({
       }
     }
   }, [open, onOpen]);
-  const onAnchorClick = useCallback(event_0 => {
-    if (event_0.defaultPrevented || event_0.button !== 0) {
+  const onAnchorClick = useCallback(event => {
+    if (event.defaultPrevented || event.button !== 0) {
       return;
     }
     // Prevent the browser's native popovertarget toggle so React
     // stays the single source of truth for popover visibility.
     if (cssAnchorPositioning) {
-      event_0.preventDefault();
+      event.preventDefault();
     }
     if (!open) {
       onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-click');
@@ -93,7 +99,7 @@ const AnchoredOverlay = ({
     }
   };
   const {
-    position: position_0
+    position
   } = useAnchoredPosition({
     anchorElementRef: anchorRef,
     floatingElementRef: overlayRef,
@@ -103,13 +109,13 @@ const AnchoredOverlay = ({
     alignmentOffset,
     anchorOffset,
     displayInViewport,
-    onPositionChange: positionChange
-  },
-  // eslint-disable-next-line react-hooks/refs
-  [overlayRef.current]);
+    onPositionChange: positionChange,
+    // When native CSS anchor positioning is active, skip JS-based position
+    // computation, scroll listeners, and resize observers since the browser
+    // handles repositioning natively.
+    enabled: !cssAnchorPositioning
+  }, [overlayElement]);
   useEffect(() => {
-    supportsNativeCSSAnchorPositioning.current = 'anchorName' in document.documentElement.style;
-
     // ensure overlay ref gets cleared when closed, so position can reset between closing/re-opening
     if (!open && overlayRef.current) {
       updateOverlayRef(null);
@@ -117,64 +123,62 @@ const AnchoredOverlay = ({
   }, [open, overlayRef, updateOverlayRef]);
   useFocusZone({
     containerRef: overlayRef,
-    disabled: !open || !position_0,
+    disabled: !open || !position && !cssAnchorPositioning,
     ...focusZoneSettings
   });
   useFocusTrap({
     containerRef: overlayRef,
-    disabled: !open || !position_0,
+    disabled: !open || !position && !cssAnchorPositioning,
     ...focusTrapSettings
   });
   const popoverId = useId();
   const id = popoverId.replaceAll(':', '_'); // popoverId can contain colons which are invalid in CSS custom property names, so we replace them with underscores
 
   useEffect(() => {
-    if (!cssAnchorPositioning || !anchorRef.current) return;
-    const anchor = anchorRef.current;
-    const overlay = overlayRef.current;
-    anchor.style.setProperty('anchor-name', `--anchored-overlay-anchor-${id}`);
-    return () => {
-      anchor.style.removeProperty('anchor-name');
-      if (overlay) {
-        overlay.style.removeProperty('position-anchor');
-      }
-    };
-    // eslint-disable-next-line react-hooks/refs
-  }, [cssAnchorPositioning, anchorRef, overlayRef, id, open]);
-
-  // Track the overlay element so we can re-run the effect when it changes.
-  // The overlay unmounts when closed, so each open creates a new DOM node -
-  // that needs showPopover() called.
-  // eslint-disable-next-line react-hooks/refs
-  const overlayElement = overlayRef.current;
-  useIsomorphicLayoutEffect(() => {
-    // Read ref inside effect to get the value after child refs are attached
+    if (!cssAnchorPositioning || !anchorElement) return;
     const currentOverlay = overlayRef.current;
-    if (!cssAnchorPositioning || !open || !currentOverlay) return;
-    currentOverlay.style.setProperty('position-anchor', `--anchored-overlay-anchor-${id}`);
-    const anchorElement = anchorRef.current;
-    if (anchorElement) {
-      const overlayWidth = width ? parseInt(widthMap[width]) : null;
-      const result = getDefaultPosition(anchorElement, overlayWidth);
-      currentOverlay.setAttribute('data-align', result.horizontal);
 
-      // Apply offset only when viewport is too narrow
-      const offset = result.horizontal === 'left' ? result.leftOffset : result.rightOffset;
-      currentOverlay.style.setProperty(`--anchored-overlay-anchor-offset-${result.horizontal}`, `${offset || 0}px`);
-    }
+    // Link the anchor and the overlay (when present) via CSS anchor positioning.
+    anchorElement.style.setProperty('anchor-name', `--anchored-overlay-anchor-${id}`);
+    let pendingPositionFrame = null;
+    if (open && currentOverlay) {
+      currentOverlay.style.setProperty('position-anchor', `--anchored-overlay-anchor-${id}`);
+
+      // Defer the getBoundingClientRect read into a `requestAnimationFrame` so the style write above
+      // does not force a synchronous layout.
+      pendingPositionFrame = requestAnimationFrame(() => {
+        pendingPositionFrame = null;
+        const overlayWidth = width ? parseInt(widthMap[width]) : null;
+        const result = getDefaultPosition(anchorElement, overlayWidth);
+        currentOverlay.setAttribute('data-align', result.horizontal);
+
+        // Apply offset only when viewport is too narrow
+        const offset = result.horizontal === 'left' ? result.leftOffset : result.rightOffset;
+        currentOverlay.style.setProperty(`--anchored-overlay-anchor-offset-${result.horizontal}`, `${offset || 0}px`);
+      });
 
-    // Only call showPopover when renderAs is enabled
-    if (shouldRenderAsPopover) {
-      try {
-        if (!currentOverlay.matches(':popover-open')) {
-          currentOverlay.showPopover();
+      // Only call showPopover when shouldRenderAsPopover is enabled
+      if (shouldRenderAsPopover) {
+        try {
+          if (!currentOverlay.matches(':popover-open')) {
+            currentOverlay.showPopover();
+          }
+        } catch {
+          // Ignore if popover is already showing or not supported
         }
-      } catch {
-        // Ignore if popover is already showing or not supported
       }
     }
-    // eslint-disable-next-line react-hooks/refs
-  }, [cssAnchorPositioning, shouldRenderAsPopover, open, overlayElement, id, overlayRef, anchorRef, width]);
+    return () => {
+      if (pendingPositionFrame !== null) cancelAnimationFrame(pendingPositionFrame);
+      anchorElement.style.removeProperty('anchor-name');
+      // The overlay may no longer be in the DOM at this point, so we need to check for its presence before trying to update it.
+      if (currentOverlay) {
+        currentOverlay.style.removeProperty('position-anchor');
+      }
+    };
+    // overlayRef is a stable ref object; including it in deps is unnecessary.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cssAnchorPositioning, shouldRenderAsPopover, open, anchorElement, overlayElement, id, width]);
   const showXIcon = onClose && variant.narrow === 'fullscreen' && displayCloseButton;
   const XButtonAriaLabelledBy = closeButtonProps['aria-labelledby'];
   const XButtonAriaLabel = closeButtonProps['aria-label'];
@@ -203,13 +207,13 @@ const AnchoredOverlay = ({
       ignoreClickRefs: [anchorRef],
       onEscape: onEscape,
       role: "none",
-      visibility: cssAnchorPositioning || position_0 ? 'visible' : 'hidden',
+      visibility: cssAnchorPositioning || position ? 'visible' : 'hidden',
       height: height,
       width: width,
-      top: cssAnchorPositioning ? undefined : (position_0 === null || position_0 === void 0 ? void 0 : position_0.top) || 0,
-      left: cssAnchorPositioning ? undefined : (position_0 === null || position_0 === void 0 ? void 0 : position_0.left) || 0,
+      top: cssAnchorPositioning ? undefined : (position === null || position === void 0 ? void 0 : position.top) || 0,
+      left: cssAnchorPositioning ? undefined : (position === null || position === void 0 ? void 0 : position.left) || 0,
       responsiveVariant: variant.narrow === 'fullscreen' ? 'fullscreen' : undefined,
-      anchorSide: cssAnchorPositioning ? undefined : position_0 === null || position_0 === void 0 ? void 0 : position_0.anchorSide,
+      anchorSide: cssAnchorPositioning ? undefined : position === null || position === void 0 ? void 0 : position.anchorSide,
       className: clsx(className, overlayClassName, cssAnchorPositioning ? classes.AnchoredOverlay : undefined),
       preventOverflow: preventOverflow,
       "data-component": "AnchoredOverlay",
@@ -226,9 +230,10 @@ const AnchoredOverlay = ({
           assignRef(overlayProps.ref, node);
         }
         updateOverlayRef(node);
+        setOverlayElement(node);
       },
       "data-anchor-position": cssAnchorPositioning,
-      "data-side": cssAnchorPositioning ? side : position_0 === null || position_0 === void 0 ? void 0 : position_0.anchorSide,
+      "data-side": cssAnchorPositioning ? side : position === null || position === void 0 ? void 0 : position.anchorSide,
       children: [showXIcon ? /*#__PURE__*/jsx("div", {
         className: classes.ResponsiveCloseButtonContainer,
         children: /*#__PURE__*/jsx(IconButton, {

package/dist/hooks/useAnchoredPosition.d.ts

@@ -5,6 +5,7 @@ export interface AnchoredPositionHookSettings extends Partial<PositionSettings>
     anchorElementRef?: React.RefObject<Element | null>;
     pinPosition?: boolean;
     onPositionChange?: (position: AnchorPosition | undefined) => void;
+    enabled?: boolean;
 }
 /**
  * Calculates the top and left values for an absolutely-positioned floating element

package/dist/hooks/useAnchoredPosition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnchoredPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AA0BvE,MAAM,WAAW,4BAA6B,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC7E,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAA;CAClE;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,CAAC,EAAE,4BAA4B,EACvC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACnD,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CA8HA"}
+{"version":3,"file":"useAnchoredPosition.d.ts","sourceRoot":"","sources":["../../src/hooks/useAnchoredPosition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAA;AA0BvE,MAAM,WAAW,4BAA6B,SAAQ,OAAO,CAAC,gBAAgB,CAAC;IAC7E,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,GAAG,SAAS,KAAK,IAAI,CAAA;IACjE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,CAAC,EAAE,4BAA4B,EACvC,YAAY,GAAE,KAAK,CAAC,cAAmB,GACtC;IACD,kBAAkB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACnD,gBAAgB,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACjD,QAAQ,EAAE,cAAc,GAAG,SAAS,CAAA;CACrC,CAiIA"}

package/dist/hooks/useAnchoredPosition.js

@@ -34,8 +34,10 @@ function getScrollableAncestors(element) {
  * floating element.
  */
 function useAnchoredPosition(settings, dependencies = []) {
+  var _settings$enabled;
   const floatingElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.floatingElementRef);
   const anchorElementRef = useProvidedRefOrCreate(settings === null || settings === void 0 ? void 0 : settings.anchorElementRef);
+  const enabled = (_settings$enabled = settings === null || settings === void 0 ? void 0 : settings.enabled) !== null && _settings$enabled !== void 0 ? _settings$enabled : true;
   const savedOnPositionChange = React.useRef(settings === null || settings === void 0 ? void 0 : settings.onPositionChange);
   const [position, setPosition] = React.useState(undefined);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -62,6 +64,7 @@ function useAnchoredPosition(settings, dependencies = []) {
   };
   const updatePosition = React.useCallback(() => {
     var _floatingElementRef$c5;
+    if (!enabled) return;
     if (floatingElementRef.current instanceof Element && anchorElementRef.current instanceof Element) {
       const newPosition = getAnchoredPosition(floatingElementRef.current, anchorElementRef.current, settings);
       setPosition(prev => {
@@ -88,7 +91,7 @@ function useAnchoredPosition(settings, dependencies = []) {
     setPrevHeight((_floatingElementRef$c5 = floatingElementRef.current) === null || _floatingElementRef$c5 === void 0 ? void 0 : _floatingElementRef$c5.clientHeight);
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps, react-hooks/use-memo
-  [floatingElementRef, anchorElementRef, ...dependencies]);
+  [floatingElementRef, anchorElementRef, enabled, ...dependencies]);
   useIsomorphicLayoutEffect(() => {
     savedOnPositionChange.current = settings === null || settings === void 0 ? void 0 : settings.onPositionChange;
   }, [settings === null || settings === void 0 ? void 0 : settings.onPositionChange]);
@@ -111,12 +114,13 @@ function useAnchoredPosition(settings, dependencies = []) {
       updatePosition();
     }
   }, [updatePosition]);
-  useResizeObserver(updatePosition); // watches for changes in window size
-  useResizeObserver(updatePosition, floatingElementRef); // watches for changes in floating element size
+  useResizeObserver(updatePosition, undefined, [], enabled); // watches for changes in window size
+  useResizeObserver(updatePosition, floatingElementRef, [], enabled); // watches for changes in floating element size
 
   // Recalculate position when any scrollable ancestor of the anchor scrolls.
   // Uses requestAnimationFrame to avoid layout thrashing during scroll.
   React.useEffect(() => {
+    if (!enabled) return;
     const anchorEl = anchorElementRef.current;
     if (!anchorEl) return;
     let rafId = null;
@@ -140,7 +144,7 @@ function useAnchoredPosition(settings, dependencies = []) {
         cancelAnimationFrame(rafId);
       }
     };
-  }, [anchorElementRef, updatePosition]);
+  }, [anchorElementRef, updatePosition, enabled]);
   return {
     floatingElementRef,
     anchorElementRef,

package/dist/hooks/useResizeObserver.d.ts

@@ -3,5 +3,5 @@ export type ResizeObserverCallback = (entries: ResizeObserverEntry[]) => void;
 export interface ResizeObserverEntry {
     contentRect: DOMRectReadOnly;
 }
-export declare function useResizeObserver<T extends HTMLElement>(callback: ResizeObserverCallback, target?: RefObject<T | null>, depsArray?: unknown[]): void;
+export declare function useResizeObserver<T extends HTMLElement>(callback: ResizeObserverCallback, target?: RefObject<T | null>, depsArray?: unknown[], enabled?: boolean): void;
 //# sourceMappingURL=useResizeObserver.d.ts.map

package/dist/hooks/useResizeObserver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AAKpC,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAA;AAE7E,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,eAAe,CAAA;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EACrD,QAAQ,EAAE,sBAAsB,EAChC,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EAC5B,SAAS,GAAE,OAAO,EAAO,QAgD1B"}
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../src/hooks/useResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AAKpC,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,IAAI,CAAA;AAE7E,MAAM,WAAW,mBAAmB;IAClC,WAAW,EAAE,eAAe,CAAA;CAC7B;AAED,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,WAAW,EACrD,QAAQ,EAAE,sBAAsB,EAChC,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,GAAG,IAAI,CAAC,EAC5B,SAAS,GAAE,OAAO,EAAO,EACzB,OAAO,GAAE,OAAc,QAmDxB"}

package/dist/hooks/useResizeObserver.js

@@ -3,13 +3,16 @@ import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 
 // https://gist.github.com/strothj/708afcf4f01dd04de8f49c92e88093c3
 
-function useResizeObserver(callback, target, depsArray = []) {
+function useResizeObserver(callback, target, depsArray = [], enabled = true) {
   const [targetClientRect, setTargetClientRect] = useState(null);
   const savedCallback = useRef(callback);
   useIsomorphicLayoutEffect(() => {
     savedCallback.current = callback;
   });
   useIsomorphicLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
     const targetEl = target && 'current' in target ? target.current : document.documentElement;
     if (!targetEl) {
       return;
@@ -40,7 +43,7 @@ function useResizeObserver(callback, target, depsArray = []) {
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [target === null || target === void 0 ? void 0 : target.current, ...depsArray]);
+  }, [target === null || target === void 0 ? void 0 : target.current, enabled, ...depsArray]);
 }
 
 export { useResizeObserver };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.22.0-rc.1be1d855e",
+  "version": "38.22.0-rc.5cc83d1b1",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/ActionBar/ActionBar-3f7b52a3.css

@@ -1,2 +0,0 @@
-.prc-ActionBar-List-9uz46{align-items:flex-start;display:flex;gap:var(--actionbar-gap,var(--stack-gap-condensed,.5rem));height:var(--actionbar-height,var(--control-small-size,1.75rem));list-style:none;margin-bottom:-1px;min-width:0;overflow:hidden;position:relative}.prc-ActionBar-List-9uz46:not([data-has-overflow]){animation:prc-ActionBar-detect-overflow-mAuJu linear;animation-timeline:scroll(self block)}.prc-ActionBar-List-9uz46[data-has-overflow=true]{--morebutton-display:flex}.prc-ActionBar-List-9uz46:where([data-size=small]){--actionbar-height:var(--control-small-size,1.75rem)}.prc-ActionBar-List-9uz46:where([data-size=medium]){--actionbar-height:var(--control-medium-size,2rem)}.prc-ActionBar-List-9uz46:where([data-size=large]){--actionbar-height:var(--control-large-size,2.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=none]){--actionbar-gap:0}.prc-ActionBar-List-9uz46:where([data-gap=none]) .prc-ActionBar-Divider-6V8yH{padding:0 var(--base-size-8,.5rem)}.prc-ActionBar-List-9uz46:where([data-gap=condensed]){--actionbar-gap:var(--stack-gap-condensed,0.5rem)}.prc-ActionBar-List-9uz46 [data-overflowing]{visibility:hidden!important}@keyframes prc-ActionBar-detect-overflow-mAuJu{0%,to{--morebutton-display:flex}}.prc-ActionBar-Nav-9spON{align-items:center;display:flex;justify-content:flex-end;padding-inline:var(--base-size-16,1rem)}.prc-ActionBar-Nav-9spON:where([data-flush=true]){padding-inline:0}.prc-ActionBar-Divider-6V8yH:before{background:var(--borderColor-muted,#d1d9e0b3);content:"";display:block;height:var(--base-size-20,1.25rem);margin-top:calc((var(--actionbar-height) - var(--base-size-20,1.25rem))/2);width:var(--borderWidth-thin,.0625rem)}.prc-ActionBar-Group-peNCk,.prc-ActionBar-OverflowContainer-AkYZs{display:flex;gap:inherit}.prc-ActionBar-OverflowContainer-AkYZs{flex-wrap:wrap;justify-content:flex-end;overflow:hidden}.prc-ActionBar-MoreButton-RHqpx{display:var(--morebutton-display,none)}
-/*# sourceMappingURL=ActionBar-3f7b52a3.css.map */

package/dist/ActionBar/ActionBar-3f7b52a3.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ActionBar/ActionBar.module.css.js"],"names":[],"mappings":"AAAA,0BASE,sBAAuB,CAPvB,YAAa,CAQb,yDAAqD,CAGrD,gEAA0D,CAL1D,eAAgB,CADhB,kBAAmB,CAJnB,WAAY,CAQZ,eAAgB,CAVhB,iBA2DF,CA5CE,mDAIE,oDAAiC,CACjC,qCACF,CAGA,kDACE,yBACF,CAEA,mDACE,oDACF,CAEA,oDACE,kDACF,CAEA,mDACE,mDACF,CAGA,iDACE,iBAKF,CAHE,8EACE,kCACF,CAGF,sDACE,iDACF,CAEA,6CAIE,2BACF,CAGF,+CACE,MAEE,yBACF,CACF,CAEA,yBAIE,kBAAmB,CAHnB,YAAa,CAEb,wBAAyB,CADzB,uCAOF,CAHE,kDACE,gBACF,CAIA,oCAME,6CAAoC,CAFpC,UAAW,CAHX,aAAc,CAEd,kCAA2B,CAK3B,0EAAqE,CANrE,sCAOF,CAQF,kEAJE,YAAa,CACb,WASF,CANA,uCAEE,cAAe,CAEf,wBAAyB,CACzB,eACF,CAEA,gCACE,sCACF","file":"ActionBar-3f7b52a3.css","sourcesContent":[".List {\n  position: relative;\n  display: flex;\n  min-width: 0;\n\n  /* wonder why this is here */\n  /* stylelint-disable-next-line primer/spacing */\n  margin-bottom: -1px;\n  list-style: none;\n  align-items: flex-start;\n  gap: var(--actionbar-gap, var(--stack-gap-condensed));\n  overflow: hidden;\n  /* Explicit height is required to clip wrapped items */\n  height: var(--actionbar-height, var(--control-small-size));\n\n  /* Only apply scroll animation before overflow is calculated (for SSR/initial render) */\n  &:not([data-has-overflow]) {\n    /* Scroll-based animations have no effect unless the container is scrollable (has overflow, even with overflow:hidden)\n    so we can use them to detect overflow. It would be cleaner to use scroll-state container queries for this, but\n    browser support for scroll-driven animations is slightly better. */\n    animation: detect-overflow linear;\n    animation-timeline: scroll(self block);\n  }\n\n  /* After initial render, JS is used to control visibility which provides progressive enhancement for unsupported browsers */\n  &[data-has-overflow='true'] {\n    --morebutton-display: flex;\n  }\n\n  &:where([data-size='small']) {\n    --actionbar-height: var(--control-small-size);\n  }\n\n  &:where([data-size='medium']) {\n    --actionbar-height: var(--control-medium-size);\n  }\n\n  &:where([data-size='large']) {\n    --actionbar-height: var(--control-large-size);\n  }\n\n  /* Gap scale (mirrors Stack) */\n  &:where([data-gap='none']) {\n    --actionbar-gap: 0;\n\n    .Divider {\n      padding: 0 var(--base-size-8);\n    }\n  }\n\n  &:where([data-gap='condensed']) {\n    --actionbar-gap: var(--stack-gap-condensed);\n  }\n\n  & [data-overflowing] {\n    /* Hide overflowing items. Even though they are clipped by `overflow: hidden`, setting `visibility: hidden` ensures\n    they can't accidentally be shown and also hides them from screen readers / keyboard nav. `!important` prevents\n    consumers from unintentionally overriding this and breaking accessibility. */\n    visibility: hidden !important;\n  }\n}\n\n@keyframes detect-overflow {\n  0%,\n  100% {\n    --morebutton-display: flex;\n  }\n}\n\n.Nav {\n  display: flex;\n  padding-inline: var(--base-size-16);\n  justify-content: flex-end;\n  align-items: center;\n\n  &:where([data-flush='true']) {\n    padding-inline: 0;\n  }\n}\n\n.Divider {\n  &::before {\n    display: block;\n    width: var(--borderWidth-thin);\n    height: var(--base-size-20);\n    content: '';\n    /* stylelint-disable-next-line primer/colors */\n    background: var(--borderColor-muted);\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: calc((var(--actionbar-height) - var(--base-size-20)) / 2);\n  }\n}\n\n.Group {\n  display: flex;\n  gap: inherit;\n}\n\n.OverflowContainer {\n  display: flex;\n  flex-wrap: wrap;\n  gap: inherit;\n  justify-content: flex-end;\n  overflow: hidden;\n}\n\n.MoreButton {\n  display: var(--morebutton-display, none);\n}\n"]}