@primer/react 38.19.0-rc.0b59e8271 → 38.19.0-rc.c09ee891a

package/CHANGELOG.md

@@ -6,6 +6,8 @@
 
 - [#7686](https://github.com/primer/react/pull/7686) [`6cd13c0`](https://github.com/primer/react/commit/6cd13c03a0293732af6d9499f1f925bf7d95d82b) Thanks [@JelloBagel](https://github.com/JelloBagel)! - StateLabel: Add new type: `archived`
 
+- [#7677](https://github.com/primer/react/pull/7677) [`c1a81b1`](https://github.com/primer/react/commit/c1a81b178742ba547b85a3df3ed3c27bcff6b7c5) Thanks [@TylerJDev](https://github.com/TylerJDev)! - AnchoredOverlay: Add Popover API to AnchoredOverlay (behind `primer_react_css_anchor_positioning` feature flag)
+
 ## 38.18.0
 
 ### Minor Changes

package/dist/AnchoredOverlay/AnchoredOverlay-647c7065.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-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

@@ -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,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"]}

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,4 +1,5 @@
 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';
@@ -77,12 +78,17 @@ 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]);
+  }, [open, onOpen, onClose, cssAnchorPositioning]);
   const positionChange = position => {
     if (onPositionChange && position) {
       onPositionChange({
@@ -124,14 +130,48 @@ 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.
+  // The overlay unmounts when closed, so each open creates a new DOM node -
+  // that needs showPopover() called.
+  const overlayElement = overlayRef.current;
+  useIsomorphicLayoutEffect(() => {
+    // Read ref inside effect to get the value after child refs are attached
+    const currentOverlay = overlayRef.current;
+    if (!cssAnchorPositioning || !open || !currentOverlay) return;
+    currentOverlay.style.setProperty('position-anchor', `--anchored-overlay-anchor-${id}`);
+    try {
+      if (!currentOverlay.matches(':popover-open')) {
+        currentOverlay.showPopover();
+      }
+    } catch {
+      // Ignore if popover is already showing or not supported
+    }
+  }, [cssAnchorPositioning, open, overlayElement, id, overlayRef]);
   const showXIcon = onClose && variant.narrow === 'fullscreen' && displayCloseButton;
   const XButtonAriaLabelledBy = closeButtonProps['aria-labelledby'];
   const XButtonAriaLabel = closeButtonProps['aria-label'];
   const {
     className: overlayClassName,
+    _PrivateDisablePortal,
     ...restOverlayProps
   } = overlayProps || {};
-  const innerContent = /*#__PURE__*/jsxs(Fragment, {
+  return /*#__PURE__*/jsxs(Fragment, {
     children: [renderAnchor && renderAnchor({
       ref: anchorRef,
       id: anchorId,
@@ -141,7 +181,7 @@ const AnchoredOverlay = ({
       onClick: onAnchorClick,
       onKeyDown: onAnchorKeyDown,
       ...(cssAnchorPositioning ? {
-        className: classes.Anchor
+        popoverTarget: popoverId
       } : {})
     }), open ? /*#__PURE__*/jsxs(Overlay, {
       returnFocusRef: anchorRef,
@@ -159,7 +199,14 @@ const AnchoredOverlay = ({
       className: clsx(className, overlayClassName, cssAnchorPositioning ? classes.AnchoredOverlay : undefined),
       preventOverflow: preventOverflow,
       "data-component": "AnchoredOverlay",
+      _PrivateDisablePortal: _PrivateDisablePortal,
+      ...(cssAnchorPositioning ? {
+        popover: 'manual'
+      } : {}),
       ...restOverlayProps,
+      ...(cssAnchorPositioning ? {
+        id: popoverId
+      } : {}),
       ref: node => {
         if (overlayProps !== null && overlayProps !== void 0 && overlayProps.ref) {
           assignRef(overlayProps.ref, node);
@@ -190,13 +237,6 @@ 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-0f6f45b5.css';
+import './AnchoredOverlay-647c7065.css';
 
-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"};
+var classes = {"ResponsiveCloseButtonContainer":"prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium","ResponsiveCloseButton":"prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx","AnchoredOverlay":"prc-AnchoredOverlay-AnchoredOverlay-fYg9Z"};
 
 export { classes as default };

package/dist/Overlay/Overlay.d.ts

@@ -61,6 +61,7 @@ type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>;
 export declare const BaseOverlay: PolymorphicForwardRefComponent<"div", OwnOverlayProps>;
 type ContainerProps = {
     anchorSide?: AnchorSide;
+    _PrivateDisablePortal?: boolean;
     ignoreClickRefs?: React.RefObject<HTMLElement | null>[];
     initialFocusRef?: React.RefObject<HTMLElement | null>;
     onClickOutside: (e: TouchOrMouseEvent) => void;

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

@@ -116,7 +116,8 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
 
  */
 const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(48);
+  const $ = c(49);
+  let _PrivateDisablePortal;
   let anchorSide;
   let ignoreClickRefs;
   let initialFocusRef;
@@ -137,6 +138,7 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   if ($[0] !== t0) {
     ({
       anchorSide,
+      _PrivateDisablePortal,
       height: t1,
       ignoreClickRefs,
       initialFocusRef,
@@ -155,53 +157,55 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       ...props
     } = t0);
     $[0] = t0;
-    $[1] = anchorSide;
-    $[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;
+    $[1] = _PrivateDisablePortal;
+    $[2] = anchorSide;
+    $[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;
   } else {
-    anchorSide = $[1];
-    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];
+    _PrivateDisablePortal = $[1];
+    anchorSide = $[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];
   }
   const height = t1 === undefined ? "auto" : t1;
   const preventOverflow = t2 === undefined ? true : t2;
   const role = t3 === undefined ? "none" : t3;
   const visibility = t4 === undefined ? "visible" : t4;
   const width = t5 === undefined ? "auto" : t5;
-  const cssAnchorPositioning = useFeatureFlag("primer_react_css_anchor_positioning");
   const featureFlagMaxHeightClampToViewport = useFeatureFlag("primer_react_overlay_max_height_clamp_to_viewport");
   const overlayRef = useRef(null);
   useRefObjectAsForwardedRef(forwardedRef, overlayRef);
+  const cssAnchorPositioning = useFeatureFlag("primer_react_css_anchor_positioning");
   let t6;
-  if ($[18] !== ignoreClickRefs || $[19] !== initialFocusRef || $[20] !== onClickOutside || $[21] !== onEscape || $[22] !== preventFocusOnOpen || $[23] !== returnFocusRef) {
+  if ($[19] !== ignoreClickRefs || $[20] !== initialFocusRef || $[21] !== onClickOutside || $[22] !== onEscape || $[23] !== preventFocusOnOpen || $[24] !== returnFocusRef) {
     t6 = {
       overlayRef,
       returnFocusRef,
@@ -211,20 +215,20 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       initialFocusRef,
       preventFocusOnOpen
     };
-    $[18] = ignoreClickRefs;
-    $[19] = initialFocusRef;
-    $[20] = onClickOutside;
-    $[21] = onEscape;
-    $[22] = preventFocusOnOpen;
-    $[23] = returnFocusRef;
-    $[24] = t6;
+    $[19] = ignoreClickRefs;
+    $[20] = initialFocusRef;
+    $[21] = onClickOutside;
+    $[22] = onEscape;
+    $[23] = preventFocusOnOpen;
+    $[24] = returnFocusRef;
+    $[25] = t6;
   } else {
-    t6 = $[24];
+    t6 = $[25];
   }
   useOverlay(t6);
   let t7;
   let t8;
-  if ($[25] !== height) {
+  if ($[26] !== height) {
     t7 = () => {
       var _overlayRef$current;
       if (height === "initial" && (_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.clientHeight) {
@@ -232,17 +236,17 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       }
     };
     t8 = [height];
-    $[25] = height;
-    $[26] = t7;
-    $[27] = t8;
+    $[26] = height;
+    $[27] = t7;
+    $[28] = t8;
   } else {
-    t7 = $[26];
-    t8 = $[27];
+    t7 = $[27];
+    t8 = $[28];
   }
   useEffect(t7, t8);
   let t10;
   let t9;
-  if ($[28] !== anchorSide || $[29] !== visibility) {
+  if ($[29] !== anchorSide || $[30] !== visibility) {
     t9 = () => {
       var _overlayRef$current2;
       const {
@@ -260,29 +264,29 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       });
     };
     t10 = [anchorSide, 8, "cubic-bezier(0.33, 1, 0.68, 1)", visibility];
-    $[28] = anchorSide;
-    $[29] = visibility;
-    $[30] = t10;
-    $[31] = t9;
+    $[29] = anchorSide;
+    $[30] = visibility;
+    $[31] = t10;
+    $[32] = t9;
   } else {
-    t10 = $[30];
-    t9 = $[31];
+    t10 = $[31];
+    t9 = $[32];
   }
   useIsomorphicLayoutEffect(t9, t10);
   const leftPosition = left === undefined && right === undefined ? 0 : left;
   const t11 = !preventOverflow ? true : undefined;
   let t12;
-  if ($[32] !== featureFlagMaxHeightClampToViewport) {
+  if ($[33] !== featureFlagMaxHeightClampToViewport) {
     t12 = featureFlagMaxHeightClampToViewport ? {
       "data-max-height-clamp-to-viewport": ""
     } : {};
-    $[32] = featureFlagMaxHeightClampToViewport;
-    $[33] = t12;
+    $[33] = featureFlagMaxHeightClampToViewport;
+    $[34] = t12;
   } else {
-    t12 = $[33];
+    t12 = $[34];
   }
   let t13;
-  if ($[34] !== height || $[35] !== leftPosition || $[36] !== props || $[37] !== responsiveVariant || $[38] !== right || $[39] !== role || $[40] !== t11 || $[41] !== t12 || $[42] !== visibility || $[43] !== width) {
+  if ($[35] !== height || $[36] !== leftPosition || $[37] !== props || $[38] !== responsiveVariant || $[39] !== right || $[40] !== role || $[41] !== t11 || $[42] !== t12 || $[43] !== visibility || $[44] !== width) {
     t13 = /*#__PURE__*/jsx(BaseOverlay, {
       role: role,
       width: width,
@@ -296,35 +300,35 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       ...t12,
       ...props
     });
-    $[34] = height;
-    $[35] = leftPosition;
-    $[36] = props;
-    $[37] = responsiveVariant;
-    $[38] = right;
-    $[39] = role;
-    $[40] = t11;
-    $[41] = t12;
-    $[42] = visibility;
-    $[43] = width;
-    $[44] = t13;
+    $[35] = height;
+    $[36] = leftPosition;
+    $[37] = props;
+    $[38] = responsiveVariant;
+    $[39] = right;
+    $[40] = role;
+    $[41] = t11;
+    $[42] = t12;
+    $[43] = visibility;
+    $[44] = width;
+    $[45] = t13;
   } else {
-    t13 = $[44];
+    t13 = $[45];
   }
   const overlayContent = t13;
-  if (cssAnchorPositioning) {
+  if (_PrivateDisablePortal && cssAnchorPositioning) {
     return overlayContent;
   }
   let t14;
-  if ($[45] !== overlayContent || $[46] !== portalContainerName) {
+  if ($[46] !== overlayContent || $[47] !== portalContainerName) {
     t14 = /*#__PURE__*/jsx(Portal, {
       containerName: portalContainerName,
       children: overlayContent
     });
-    $[45] = overlayContent;
-    $[46] = portalContainerName;
-    $[47] = t14;
+    $[46] = overlayContent;
+    $[47] = portalContainerName;
+    $[48] = t14;
   } else {
-    t14 = $[47];
+    t14 = $[48];
   }
   return t14;
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.19.0-rc.0b59e8271",
+  "version": "38.19.0-rc.c09ee891a",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -39,7 +39,7 @@
     "build": "./script/build",
     "clean": "rimraf dist generated",
     "start": "concurrently npm:start:*",
-    "start:storybook": "STORYBOOK=true storybook dev -p 6006",
+    "start:storybook": "STORYBOOK=true storybook dev -p 6006 --no-open",
     "build:storybook": "storybook build",
     "build:docs": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs",
     "build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
@@ -115,11 +115,12 @@
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-typescript": "12.3.0",
     "@rollup/plugin-virtual": "3.0.2",
-    "@storybook/addon-a11y": "^10.1.11",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
+    "@storybook/addon-a11y": "^10.3.3",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-links": "^10.3.3",
+    "@storybook/addon-mcp": "^0.4.2",
     "@storybook/icons": "^2.0.1",
-    "@storybook/react-vite": "^10.1.11",
+    "@storybook/react-vite": "^10.3.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^16.3.0",
@@ -173,7 +174,7 @@
     "rimraf": "5.0.5",
     "rollup": "4.59.0",
     "rollup-plugin-import-css": "^0.0.0",
-    "storybook": "^10.1.11",
+    "storybook": "^10.3.3",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",
     "tsx": "4.20.3",

package/dist/AnchoredOverlay/AnchoredOverlay-0f6f45b5.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-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

@@ -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,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"]}