@primer/react 0.0.0-20260323161815 → 0.0.0-20260323203243

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/react
 
-## 0.0.0-20260323161815
+## 0.0.0-20260323203243
 
 ### Minor Changes
 
@@ -13,8 +13,6 @@
 
 - [#7623](https://github.com/primer/react/pull/7623) [`42847d1`](https://github.com/primer/react/commit/42847d1bb943c2db6d2309dfd604e8d3ab55d387) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - `IconButton`: `keybindingHint` now accepts `string[]` in addition to `string`. Multiple hints are rendered joined with "or".
 
-- [#7677](https://github.com/primer/react/pull/7677) [`2d29a81`](https://github.com/primer/react/commit/2d29a815894fdcf07130567de616f821d872f02e) Thanks [@TylerJDev](https://github.com/TylerJDev)! - AnchoredOverlay: Add Popover API to AnchoredOverlay (behind `primer_react_css_anchor_positioning` feature flag)
-
 ### Patch Changes
 
 - Fake entry to force publishing

package/dist/AnchoredOverlay/AnchoredOverlay-0f6f45b5.css

@@ -0,0 +1,2 @@
+.prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium{position:relative}.prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx{display:none;position:absolute;right:var(--base-size-8,.5rem);top:var(--base-size-8,.5rem)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx{display:inline-grid}}.prc-AnchoredOverlay-Wrapper-w6jU3{anchor-scope:--anchored-overlay-anchor}.prc-AnchoredOverlay-Anchor-DWRfK{anchor-name:--anchored-overlay-anchor}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z{position-anchor:--anchored-overlay-anchor;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;position-visibility:anchors-visible;position:fixed;z-index:100}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-bottom]{left:anchor(left);top:calc(anchor(bottom) + var(--base-size-4,.25rem))}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-top]{bottom:anchor(top);left:anchor(left);margin-bottom:var(--base-size-4,.25rem)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-left]{margin-right:var(--base-size-4,.25rem);right:anchor(left);top:anchor(top)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-right]{left:anchor(right);margin-left:var(--base-size-4,.25rem);top:anchor(top)}
+/*# sourceMappingURL=AnchoredOverlay-0f6f45b5.css.map */

package/dist/AnchoredOverlay/AnchoredOverlay-0f6f45b5.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AnchoredOverlay/AnchoredOverlay.module.css.js"],"names":[],"mappings":"AAAA,0DACE,iBACF,CAEA,iDAIE,YAAa,CAHb,iBAAkB,CAElB,8BAAyB,CADzB,4BAOF,CAHE,mDANF,iDAOI,mBAEJ,CADE,CAGF,mCACE,sCACF,CAEA,kCAEE,qCACF,CAEA,2CAEE,yCAA0C,CAC1C,oEAGwB,CACxB,mCAAoC,CAEpC,cAAe,CADf,WA0BF,CAvBE,qEAGE,iBAAkB,CADlB,oDAEF,CAEA,kEAEE,kBAAmB,CACnB,iBAAkB,CAFlB,uCAGF,CAEA,mEAGE,sCAAgC,CAFhC,kBAAmB,CACnB,eAEF,CAEA,oEACE,kBAAmB,CAEnB,qCAA+B,CAD/B,eAEF","file":"AnchoredOverlay-0f6f45b5.css","sourcesContent":[".ResponsiveCloseButtonContainer {\n  position: relative;\n}\n\n.ResponsiveCloseButton {\n  position: absolute;\n  top: var(--base-size-8);\n  right: var(--base-size-8);\n  display: none;\n\n  @media screen and (--viewportRange-narrow) {\n    display: inline-grid;\n  }\n}\n\n.Wrapper {\n  anchor-scope: --anchored-overlay-anchor;\n}\n\n.Anchor {\n  /* Anchor name, this is currently tied to `renderAnchor` */\n  anchor-name: --anchored-overlay-anchor;\n}\n\n.AnchoredOverlay {\n  /* Anchor position, this is currently tied to `<Overlay>` */\n  position-anchor: --anchored-overlay-anchor;\n  position-try-fallbacks:\n    flip-block,\n    flip-inline,\n    flip-block flip-inline;\n  position-visibility: anchors-visible;\n  z-index: 100;\n  position: fixed;\n\n  &[data-side='outside-bottom'] {\n    /* stylelint-disable primer/spacing */\n    top: calc(anchor(bottom) + var(--base-size-4));\n    left: anchor(left);\n  }\n\n  &[data-side='outside-top'] {\n    margin-bottom: var(--base-size-4);\n    bottom: anchor(top);\n    left: anchor(left);\n  }\n\n  &[data-side='outside-left'] {\n    right: anchor(left);\n    top: anchor(top);\n    margin-right: var(--base-size-4);\n  }\n\n  &[data-side='outside-right'] {\n    left: anchor(right);\n    top: anchor(top);\n    margin-left: var(--base-size-4);\n  }\n}\n"]}

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 { useCallback, useRef, useEffect } from 'react';
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 import { useFocusTrap } from '../hooks/useFocusTrap.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import { useId } from '../hooks/useId.js';
@@ -78,17 +77,12 @@ const AnchoredOverlay = ({
     if (event_0.defaultPrevented || event_0.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();
-    }
     if (!open) {
       onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-click');
     } else {
       onClose === null || onClose === void 0 ? void 0 : onClose('anchor-click');
     }
-  }, [open, onOpen, onClose, cssAnchorPositioning]);
+  }, [open, onOpen, onClose]);
   const positionChange = position => {
     if (onPositionChange && position) {
       onPositionChange({
@@ -130,37 +124,6 @@ const AnchoredOverlay = ({
     disabled: !open || !position_0,
     ...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');
-      }
-    };
-  }, [cssAnchorPositioning, anchorRef, overlayRef, id]);
-
-  // Track the overlay element so we can re-run the effect when it changes.
-  // This is necessary when using a Portal, as React re-renders can replace
-  // the DOM node, causing the popover to lose its :popover-open state.
-  const overlayElement = overlayRef.current;
-  useIsomorphicLayoutEffect(() => {
-    if (!cssAnchorPositioning || !open || !overlayElement) return;
-    overlayElement.style.setProperty('position-anchor', `--anchored-overlay-anchor-${id}`);
-    try {
-      if (!overlayElement.matches(':popover-open')) {
-        overlayElement.showPopover();
-      }
-    } catch {
-      // Ignore if popover is already showing or not supported
-    }
-  }, [cssAnchorPositioning, open, overlayElement, id]);
   const showXIcon = onClose && variant.narrow === 'fullscreen' && displayCloseButton;
   const XButtonAriaLabelledBy = closeButtonProps['aria-labelledby'];
   const XButtonAriaLabel = closeButtonProps['aria-label'];
@@ -168,7 +131,7 @@ const AnchoredOverlay = ({
     className: overlayClassName,
     ...restOverlayProps
   } = overlayProps || {};
-  return /*#__PURE__*/jsxs(Fragment, {
+  const innerContent = /*#__PURE__*/jsxs(Fragment, {
     children: [renderAnchor && renderAnchor({
       ref: anchorRef,
       id: anchorId,
@@ -178,8 +141,7 @@ const AnchoredOverlay = ({
       onClick: onAnchorClick,
       onKeyDown: onAnchorKeyDown,
       ...(cssAnchorPositioning ? {
-        'data-anchor': '',
-        popoverTarget: popoverId
+        className: classes.Anchor
       } : {})
     }), open ? /*#__PURE__*/jsxs(Overlay, {
       returnFocusRef: anchorRef,
@@ -198,7 +160,6 @@ const AnchoredOverlay = ({
       preventOverflow: preventOverflow,
       "data-component": "AnchoredOverlay",
       ...restOverlayProps,
-      id: cssAnchorPositioning ? popoverId : undefined,
       ref: node => {
         if (overlayProps !== null && overlayProps !== void 0 && overlayProps.ref) {
           assignRef(overlayProps.ref, node);
@@ -207,7 +168,6 @@ const AnchoredOverlay = ({
       },
       "data-anchor-position": cssAnchorPositioning,
       "data-side": cssAnchorPositioning ? side : position_0 === null || position_0 === void 0 ? void 0 : position_0.anchorSide,
-      disablePortal: cssAnchorPositioning ? true : false,
       children: [showXIcon ? /*#__PURE__*/jsx("div", {
         className: classes.ResponsiveCloseButtonContainer,
         children: /*#__PURE__*/jsx(IconButton, {
@@ -230,6 +190,13 @@ const AnchoredOverlay = ({
       }) : null, children]
     }) : null]
   });
+  if (cssAnchorPositioning) {
+    return /*#__PURE__*/jsx("div", {
+      className: classes.Wrapper,
+      children: innerContent
+    });
+  }
+  return innerContent;
 };
 function assignRef(ref, value) {
   if (typeof ref === 'function') {

package/dist/AnchoredOverlay/AnchoredOverlay.module.css.js

@@ -1,5 +1,5 @@
-import './AnchoredOverlay-647c7065.css';
+import './AnchoredOverlay-0f6f45b5.css';
 
-var classes = {"ResponsiveCloseButtonContainer":"prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium","ResponsiveCloseButton":"prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx","AnchoredOverlay":"prc-AnchoredOverlay-AnchoredOverlay-fYg9Z"};
+var classes = {"ResponsiveCloseButtonContainer":"prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium","ResponsiveCloseButton":"prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx","Wrapper":"prc-AnchoredOverlay-Wrapper-w6jU3","Anchor":"prc-AnchoredOverlay-Anchor-DWRfK","AnchoredOverlay":"prc-AnchoredOverlay-AnchoredOverlay-fYg9Z"};
 
 export { classes as default };

package/dist/Overlay/Overlay.d.ts

@@ -61,7 +61,6 @@ type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>;
 export declare const BaseOverlay: PolymorphicForwardRefComponent<"div", OwnOverlayProps>;
 type ContainerProps = {
     anchorSide?: AnchorSide;
-    disablePortal?: boolean;
     ignoreClickRefs?: React.RefObject<HTMLElement | null>[];
     initialFocusRef?: React.RefObject<HTMLElement | null>;
     onClickOutside: (e: TouchOrMouseEvent) => void;
@@ -74,7 +73,6 @@ type ContainerProps = {
 type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
 /**
  * @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
- * @param disablePortal Optional. If true, the Overlay will not be rendered in a Portal. Defaults to false. When using CSS anchor positioning, popovers render in the browser's top layer which already escapes stacking contexts, so a Portal is not strictly necessary but still useful for style isolation.
  * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
  * @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
  * @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.

package/dist/Overlay/Overlay.d.ts.map

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

package/dist/Overlay/Overlay.js

@@ -101,7 +101,6 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
 });
 /**
  * @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
- * @param disablePortal Optional. If true, the Overlay will not be rendered in a Portal. Defaults to false. When using CSS anchor positioning, popovers render in the browser's top layer which already escapes stacking contexts, so a Portal is not strictly necessary but still useful for style isolation.
  * @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
  * @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
  * @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.
@@ -117,9 +116,8 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
 
  */
 const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(52);
+  const $ = c(48);
   let anchorSide;
-  let disablePortal;
   let ignoreClickRefs;
   let initialFocusRef;
   let left;
@@ -139,7 +137,6 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   if ($[0] !== t0) {
     ({
       anchorSide,
-      disablePortal,
       height: t1,
       ignoreClickRefs,
       initialFocusRef,
@@ -159,42 +156,40 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
     } = t0);
     $[0] = t0;
     $[1] = anchorSide;
-    $[2] = disablePortal;
-    $[3] = ignoreClickRefs;
-    $[4] = initialFocusRef;
-    $[5] = left;
-    $[6] = onClickOutside;
-    $[7] = onEscape;
-    $[8] = portalContainerName;
-    $[9] = preventFocusOnOpen;
-    $[10] = props;
-    $[11] = responsiveVariant;
-    $[12] = returnFocusRef;
-    $[13] = right;
-    $[14] = t1;
-    $[15] = t2;
-    $[16] = t3;
-    $[17] = t4;
-    $[18] = t5;
+    $[2] = ignoreClickRefs;
+    $[3] = initialFocusRef;
+    $[4] = left;
+    $[5] = onClickOutside;
+    $[6] = onEscape;
+    $[7] = portalContainerName;
+    $[8] = preventFocusOnOpen;
+    $[9] = props;
+    $[10] = responsiveVariant;
+    $[11] = returnFocusRef;
+    $[12] = right;
+    $[13] = t1;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
   } else {
     anchorSide = $[1];
-    disablePortal = $[2];
-    ignoreClickRefs = $[3];
-    initialFocusRef = $[4];
-    left = $[5];
-    onClickOutside = $[6];
-    onEscape = $[7];
-    portalContainerName = $[8];
-    preventFocusOnOpen = $[9];
-    props = $[10];
-    responsiveVariant = $[11];
-    returnFocusRef = $[12];
-    right = $[13];
-    t1 = $[14];
-    t2 = $[15];
-    t3 = $[16];
-    t4 = $[17];
-    t5 = $[18];
+    ignoreClickRefs = $[2];
+    initialFocusRef = $[3];
+    left = $[4];
+    onClickOutside = $[5];
+    onEscape = $[6];
+    portalContainerName = $[7];
+    preventFocusOnOpen = $[8];
+    props = $[9];
+    responsiveVariant = $[10];
+    returnFocusRef = $[11];
+    right = $[12];
+    t1 = $[13];
+    t2 = $[14];
+    t3 = $[15];
+    t4 = $[16];
+    t5 = $[17];
   }
   const height = t1 === undefined ? "auto" : t1;
   const preventOverflow = t2 === undefined ? true : t2;
@@ -206,7 +201,7 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   const overlayRef = useRef(null);
   useRefObjectAsForwardedRef(forwardedRef, overlayRef);
   let t6;
-  if ($[19] !== ignoreClickRefs || $[20] !== initialFocusRef || $[21] !== onClickOutside || $[22] !== onEscape || $[23] !== preventFocusOnOpen || $[24] !== returnFocusRef) {
+  if ($[18] !== ignoreClickRefs || $[19] !== initialFocusRef || $[20] !== onClickOutside || $[21] !== onEscape || $[22] !== preventFocusOnOpen || $[23] !== returnFocusRef) {
     t6 = {
       overlayRef,
       returnFocusRef,
@@ -216,20 +211,20 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       initialFocusRef,
       preventFocusOnOpen
     };
-    $[19] = ignoreClickRefs;
-    $[20] = initialFocusRef;
-    $[21] = onClickOutside;
-    $[22] = onEscape;
-    $[23] = preventFocusOnOpen;
-    $[24] = returnFocusRef;
-    $[25] = t6;
+    $[18] = ignoreClickRefs;
+    $[19] = initialFocusRef;
+    $[20] = onClickOutside;
+    $[21] = onEscape;
+    $[22] = preventFocusOnOpen;
+    $[23] = returnFocusRef;
+    $[24] = t6;
   } else {
-    t6 = $[25];
+    t6 = $[24];
   }
   useOverlay(t6);
   let t7;
   let t8;
-  if ($[26] !== height) {
+  if ($[25] !== height) {
     t7 = () => {
       var _overlayRef$current;
       if (height === "initial" && (_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.clientHeight) {
@@ -237,17 +232,17 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       }
     };
     t8 = [height];
-    $[26] = height;
-    $[27] = t7;
-    $[28] = t8;
+    $[25] = height;
+    $[26] = t7;
+    $[27] = t8;
   } else {
-    t7 = $[27];
-    t8 = $[28];
+    t7 = $[26];
+    t8 = $[27];
   }
   useEffect(t7, t8);
   let t10;
   let t9;
-  if ($[29] !== anchorSide || $[30] !== visibility) {
+  if ($[28] !== anchorSide || $[29] !== visibility) {
     t9 = () => {
       var _overlayRef$current2;
       const {
@@ -265,40 +260,30 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       });
     };
     t10 = [anchorSide, 8, "cubic-bezier(0.33, 1, 0.68, 1)", visibility];
-    $[29] = anchorSide;
-    $[30] = visibility;
-    $[31] = t10;
-    $[32] = t9;
+    $[28] = anchorSide;
+    $[29] = visibility;
+    $[30] = t10;
+    $[31] = t9;
   } else {
-    t10 = $[31];
-    t9 = $[32];
+    t10 = $[30];
+    t9 = $[31];
   }
   useIsomorphicLayoutEffect(t9, t10);
   const leftPosition = left === undefined && right === undefined ? 0 : left;
   const t11 = !preventOverflow ? true : undefined;
   let t12;
-  if ($[33] !== featureFlagMaxHeightClampToViewport) {
+  if ($[32] !== featureFlagMaxHeightClampToViewport) {
     t12 = featureFlagMaxHeightClampToViewport ? {
       "data-max-height-clamp-to-viewport": ""
     } : {};
-    $[33] = featureFlagMaxHeightClampToViewport;
-    $[34] = t12;
+    $[32] = featureFlagMaxHeightClampToViewport;
+    $[33] = t12;
   } else {
-    t12 = $[34];
+    t12 = $[33];
   }
   let t13;
-  if ($[35] !== cssAnchorPositioning) {
-    t13 = cssAnchorPositioning && {
-      popover: "manual"
-    };
-    $[35] = cssAnchorPositioning;
-    $[36] = t13;
-  } else {
-    t13 = $[36];
-  }
-  let t14;
-  if ($[37] !== height || $[38] !== leftPosition || $[39] !== props || $[40] !== responsiveVariant || $[41] !== right || $[42] !== role || $[43] !== t11 || $[44] !== t12 || $[45] !== t13 || $[46] !== visibility || $[47] !== width) {
-    t14 = /*#__PURE__*/jsx(BaseOverlay, {
+  if ($[34] !== height || $[35] !== leftPosition || $[36] !== props || $[37] !== responsiveVariant || $[38] !== right || $[39] !== role || $[40] !== t11 || $[41] !== t12 || $[42] !== visibility || $[43] !== width) {
+    t13 = /*#__PURE__*/jsx(BaseOverlay, {
       role: role,
       width: width,
       "data-reflow-container": t11,
@@ -309,41 +294,39 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       visibility: visibility,
       "data-responsive": responsiveVariant,
       ...t12,
-      ...t13,
       ...props
     });
-    $[37] = height;
-    $[38] = leftPosition;
-    $[39] = props;
-    $[40] = responsiveVariant;
-    $[41] = right;
-    $[42] = role;
-    $[43] = t11;
-    $[44] = t12;
-    $[45] = t13;
-    $[46] = visibility;
-    $[47] = width;
-    $[48] = t14;
+    $[34] = height;
+    $[35] = leftPosition;
+    $[36] = props;
+    $[37] = responsiveVariant;
+    $[38] = right;
+    $[39] = role;
+    $[40] = t11;
+    $[41] = t12;
+    $[42] = visibility;
+    $[43] = width;
+    $[44] = t13;
   } else {
-    t14 = $[48];
+    t13 = $[44];
   }
-  const overlayContent = t14;
-  if (disablePortal) {
+  const overlayContent = t13;
+  if (cssAnchorPositioning) {
     return overlayContent;
   }
-  let t15;
-  if ($[49] !== overlayContent || $[50] !== portalContainerName) {
-    t15 = /*#__PURE__*/jsx(Portal, {
+  let t14;
+  if ($[45] !== overlayContent || $[46] !== portalContainerName) {
+    t14 = /*#__PURE__*/jsx(Portal, {
       containerName: portalContainerName,
       children: overlayContent
     });
-    $[49] = overlayContent;
-    $[50] = portalContainerName;
-    $[51] = t15;
+    $[45] = overlayContent;
+    $[46] = portalContainerName;
+    $[47] = t14;
   } else {
-    t15 = $[51];
+    t14 = $[47];
   }
-  return t15;
+  return t14;
 });
 
 export { BaseOverlay, Overlay as default, heightMap };

package/package.json

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

package/dist/AnchoredOverlay/AnchoredOverlay-647c7065.css

@@ -1,2 +0,0 @@
-.prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium{position:relative}.prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx{display:none;position:absolute;right:var(--base-size-8,.5rem);top:var(--base-size-8,.5rem)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx{display:inline-grid}}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z{position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;position-visibility:anchors-visible;position:fixed!important;z-index:100}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[popover]{border:0;inset:auto;margin:0;max-height:none;max-width:none;padding:0}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-bottom]{left:anchor(left);top:calc(anchor(bottom) + var(--base-size-4,.25rem))}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-top]{bottom:anchor(top);left:anchor(left);margin-bottom:var(--base-size-4,.25rem)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-left]{margin-right:var(--base-size-4,.25rem);right:anchor(left);top:anchor(top)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-right]{left:anchor(right);margin-left:var(--base-size-4,.25rem);top:anchor(top)}
-/*# sourceMappingURL=AnchoredOverlay-647c7065.css.map */

package/dist/AnchoredOverlay/AnchoredOverlay-647c7065.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/AnchoredOverlay/AnchoredOverlay.module.css.js"],"names":[],"mappings":"AAAA,0DACE,iBACF,CAEA,iDAIE,YAAa,CAHb,iBAAkB,CAElB,8BAAyB,CADzB,4BAOF,CAHE,mDANF,iDAOI,mBAEJ,CADE,CAGF,2CACE,oEAGwB,CACxB,mCAAoC,CAEpC,wBAA0B,CAD1B,WAmCF,CAhCE,oDAIE,QAAS,CAHT,UAAW,CACX,QAAS,CAGT,eAAgB,CAChB,cAAe,CAHf,SAIF,CAEA,qEAGE,iBAAkB,CADlB,oDAEF,CAEA,kEAEE,kBAAmB,CACnB,iBAAkB,CAFlB,uCAGF,CAEA,mEAGE,sCAAgC,CAFhC,kBAAmB,CACnB,eAEF,CAEA,oEACE,kBAAmB,CAEnB,qCAA+B,CAD/B,eAEF","file":"AnchoredOverlay-647c7065.css","sourcesContent":[".ResponsiveCloseButtonContainer {\n  position: relative;\n}\n\n.ResponsiveCloseButton {\n  position: absolute;\n  top: var(--base-size-8);\n  right: var(--base-size-8);\n  display: none;\n\n  @media screen and (--viewportRange-narrow) {\n    display: inline-grid;\n  }\n}\n\n.AnchoredOverlay {\n  position-try-fallbacks:\n    flip-block,\n    flip-inline,\n    flip-block flip-inline;\n  position-visibility: anchors-visible;\n  z-index: 100;\n  position: fixed !important;\n\n  &[popover] {\n    inset: auto;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    max-height: none;\n    max-width: none;\n  }\n\n  &[data-side='outside-bottom'] {\n    /* stylelint-disable primer/spacing */\n    top: calc(anchor(bottom) + var(--base-size-4));\n    left: anchor(left);\n  }\n\n  &[data-side='outside-top'] {\n    margin-bottom: var(--base-size-4);\n    bottom: anchor(top);\n    left: anchor(left);\n  }\n\n  &[data-side='outside-left'] {\n    right: anchor(left);\n    top: anchor(top);\n    margin-right: var(--base-size-4);\n  }\n\n  &[data-side='outside-right'] {\n    left: anchor(right);\n    top: anchor(top);\n    margin-left: var(--base-size-4);\n  }\n}\n"]}