@primer/react 0.0.0-20260514153211 → 0.0.0-20260514173510

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/react
 
-## 0.0.0-20260514153211
+## 0.0.0-20260514173510
 
 ### Minor Changes
 
@@ -20,12 +20,12 @@
   </ActionList>
   ```
 
-- [#7838](https://github.com/primer/react/pull/7838) [`3e6bb8a`](https://github.com/primer/react/commit/3e6bb8a9252a5cff12a23a762c25dabc5598c9eb) Thanks [@llastflowers](https://github.com/llastflowers)! - Add data-component attributes and associated tests for Hidden, InlineMessage, KeybindingHint, Label, and LabelGroup
-
 - [#7776](https://github.com/primer/react/pull/7776) [`d6f61c1`](https://github.com/primer/react/commit/d6f61c1e197b52eb75cff97299bfac4caedcc1ac) Thanks [@llastflowers](https://github.com/llastflowers)! - Add `data-component` attributes for Blankslate, BranchName, Breadcrumbs, ButtonGroup, Checkbox, CheckboxGroup, CircleBadge, ConfirmationDialog, CounterLabel, and Dialog to provide stable selectors.
 
 - [#7816](https://github.com/primer/react/pull/7816) [`aef8548`](https://github.com/primer/react/commit/aef85486a77a544ab36fcc18470dc06bf2502b09) Thanks [@iansan5653](https://github.com/iansan5653)! - Replace `ActionBar` overflow calculations with CSS wrapping approach to improve performance and stability
 
+- [#7831](https://github.com/primer/react/pull/7831) [`c0111d7`](https://github.com/primer/react/commit/c0111d7a2f296434cf6ec671defd4f76bf772a8b) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Dialog: Support custom width values.
+
 - [#7819](https://github.com/primer/react/pull/7819) [`8ed6149`](https://github.com/primer/react/commit/8ed6149b45093449c6e12a71a374618fe282d6a1) Thanks [@llastflowers](https://github.com/llastflowers)! - Add `data-component` attributes for Details, Flash, FormControl (+ update InputValidation to forward from FormControl.Validation), Header, and Heading.
 
 ### Patch Changes

package/dist/ActionBar/ActionBar.js

@@ -8,7 +8,7 @@ import styles from './ActionBar.module.css.js';
 import { clsx } from 'clsx';
 import { createDescendantRegistry } from '../utils/descendant-registry.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 import { FocusKeys } from '@primer/behaviors';
 import { ActionMenu } from '../ActionMenu/ActionMenu.js';
 
@@ -328,7 +328,7 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef(({
   ...props
 }, forwardedRef) => {
   const ref = useRef(null);
-  useRefObjectAsForwardedRef(forwardedRef, ref);
+  const mergedRef = useMergedRefs(forwardedRef, ref);
   const {
     size
   } = React.useContext(ActionBarContext);
@@ -351,7 +351,7 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef(({
   }, [disabled, onClick]);
   return /*#__PURE__*/jsx(IconButton, {
     "aria-disabled": disabled,
-    ref: ref,
+    ref: mergedRef,
     size: size,
     onClick: clickHandler,
     ...props,

package/dist/ActionList/Heading.js

@@ -7,12 +7,12 @@ import { invariant } from '../utils/invariant.js';
 import { clsx } from 'clsx';
 import classes from './Heading.module.css.js';
 import { jsx } from 'react/jsx-runtime';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 import Heading$1 from '../Heading/Heading.js';
 
 const Heading = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   var _props$id;
-  const $ = c(20);
+  const $ = c(21);
   let as;
   let children;
   let className;
@@ -45,7 +45,7 @@ const Heading = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   }
   const visuallyHidden = t1 === undefined ? false : t1;
   const innerRef = React.useRef(null);
-  useRefObjectAsForwardedRef(forwardedRef, innerRef);
+  const mergedRef = useMergedRefs(forwardedRef, innerRef);
   const {
     headingId,
     variant: listVariant
@@ -65,11 +65,11 @@ const Heading = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     t4 = $[8];
   }
   let t5;
-  if ($[9] !== as || $[10] !== children || $[11] !== listVariant || $[12] !== props || $[13] !== size || $[14] !== t3 || $[15] !== t4) {
+  if ($[9] !== as || $[10] !== children || $[11] !== listVariant || $[12] !== mergedRef || $[13] !== props || $[14] !== size || $[15] !== t3 || $[16] !== t4) {
     t5 = /*#__PURE__*/jsx(Heading$1, {
       as: as,
       variant: size,
-      ref: innerRef,
+      ref: mergedRef,
       id: t3,
       className: t4,
       "data-component": "ActionList.Heading",
@@ -80,25 +80,26 @@ const Heading = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     $[9] = as;
     $[10] = children;
     $[11] = listVariant;
-    $[12] = props;
-    $[13] = size;
-    $[14] = t3;
-    $[15] = t4;
-    $[16] = t5;
+    $[12] = mergedRef;
+    $[13] = props;
+    $[14] = size;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
   } else {
-    t5 = $[16];
+    t5 = $[17];
   }
   let t6;
-  if ($[17] !== t2 || $[18] !== t5) {
+  if ($[18] !== t2 || $[19] !== t5) {
     t6 = /*#__PURE__*/jsx(VisuallyHidden, {
       isVisible: t2,
       children: t5
     });
-    $[17] = t2;
-    $[18] = t5;
-    $[19] = t6;
+    $[18] = t2;
+    $[19] = t5;
+    $[20] = t6;
   } else {
-    t6 = $[19];
+    t6 = $[20];
   }
   return t6;
 });

package/dist/Autocomplete/AutocompleteInput.js

@@ -1,6 +1,6 @@
 import React, { useContext, useState, useCallback, useEffect } from 'react';
 import { AutocompleteContext, AutocompleteInputContext } from './AutocompleteContext.js';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 import useSafeTimeout from '../hooks/useSafeTimeout.js';
 import { jsx } from 'react/jsx-runtime';
 import TextInput from '../TextInput/TextInput.js';
@@ -36,7 +36,7 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
     inputValue = '',
     isMenuDirectlyActivated
   } = inputContext;
-  useRefObjectAsForwardedRef(forwardedRef, inputRef);
+  const mergedRef = useMergedRefs(forwardedRef, inputRef);
   const [highlightRemainingText, setHighlightRemainingText] = useState(true);
   const {
     safeSetTimeout
@@ -130,7 +130,7 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
     onKeyDown: handleInputKeyDown,
     onKeyPress: onInputKeyPress,
     onKeyUp: handleInputKeyUp,
-    ref: inputRef,
+    ref: mergedRef,
     "aria-controls": `${id}-listbox`,
     "aria-autocomplete": "both",
     role: "combobox",

package/dist/Autocomplete/AutocompleteOverlay.js

@@ -1,6 +1,6 @@
 import { useContext, useRef, useEffect, useCallback } from 'react';
 import { AutocompleteContext } from './AutocompleteContext.js';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 import VisuallyHidden from '../_VisuallyHidden.js';
 import classes from './AutocompleteOverlay.module.css.js';
 import { clsx } from 'clsx';
@@ -48,7 +48,7 @@ function AutocompleteOverlay({
     align: 'start',
     anchorElementRef: computedAnchorRef
   }, [showMenu, selectedItemLength]);
-  useRefObjectAsForwardedRef(scrollContainerRef, floatingElementRef);
+  const mergedScrollContainerRef = useMergedRefs(scrollContainerRef, floatingElementRef);
   const closeOptionList = useCallback(() => {
     setShowMenu(false);
   }, [setShowMenu]);
@@ -60,7 +60,7 @@ function AutocompleteOverlay({
     preventFocusOnOpen: true,
     onClickOutside: closeOptionList,
     onEscape: closeOptionList,
-    ref: floatingElementRef,
+    ref: mergedScrollContainerRef,
     top: position === null || position === void 0 ? void 0 : position.top,
     left: position === null || position === void 0 ? void 0 : position.left,
     className: clsx(classes.Overlay, className),

package/dist/Button/ButtonBase.js

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 import { ConditionalWrapper } from '../internal/components/ConditionalWrapper.js';
 import { clsx } from 'clsx';
 import classes from './ButtonBase.module.css.js';
@@ -46,7 +46,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
     ...rest
   } = props;
   const innerRef = React.useRef(null);
-  useRefObjectAsForwardedRef(forwardedRef, innerRef);
+  const mergedRef = useMergedRefs(forwardedRef, innerRef);
   const uuid = useId(id);
   const loadingAnnouncementID = `${uuid}-loading-announcement`;
 
@@ -76,7 +76,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
       "data-component": "Button",
       ...rest,
       // @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
-      ref: innerRef,
+      ref: mergedRef,
       className: clsx(classes.ButtonBase, className),
       "data-block": block ? 'block' : null,
       "data-inactive": inactive ? true : undefined,

package/dist/Dialog/Dialog-b7da369a.css

@@ -0,0 +1,2 @@
+@property --prc-dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}@keyframes prc-Dialog-dialog-backdrop-appear-tCG2K{0%{opacity:0}to{opacity:1}}@keyframes prc-Dialog-Overlay--motion-scaleFade-mE6-C{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes prc-Dialog-Overlay--motion-slideUp-tPElO{0%{transform:translateY(100%)}}@keyframes prc-Dialog-Overlay--motion-slideInRight-BR-CZ{0%{transform:translateX(-100%)}}@keyframes prc-Dialog-Overlay--motion-slideInLeft-ISmQZ{0%{transform:translateX(100%)}}@keyframes prc-Dialog-detect-scroll-b3i8Q{0%,to{--can-scroll:1}}.prc-Dialog-Backdrop-5Nt2U{animation:prc-Dialog-dialog-backdrop-appear-tCG2K .2s cubic-bezier(.33,1,.68,1);background-color:var(--overlay-backdrop-bgColor,#c8d1da66);bottom:0;display:flex;left:0;position:fixed;right:0;top:0}.prc-Dialog-Backdrop-5Nt2U,.prc-Dialog-Backdrop-5Nt2U[data-position-regular=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=left]{align-items:center;justify-content:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=right]{align-items:center;justify-content:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-align=top]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-align=center]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-align=bottom]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-end}@media (max-width:767px){.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=top]{align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=center]{align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=bottom]{align-items:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=bottom]{align-items:end;justify-content:center}}.prc-Dialog-Dialog-G8cDF{background-color:var(--overlay-bgColor,#fff);border-radius:var(--borderRadius-large,.75rem);border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));box-shadow:var(--shadow-floating-small,0 0 0 1px #d1d9e080,0 6px 12px -3px #25292e0a,0 6px 18px 0 #25292e1f);display:flex;flex-direction:column;height:auto;max-height:calc(100dvh - 64px);max-width:calc(100dvw - 64px);min-width:296px;opacity:1;width:var(--dialog-width,640px)}.prc-Dialog-Dialog-G8cDF:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=large]){height:640px}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem))}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=top]{margin-top:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=bottom]{margin-bottom:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-top-left-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{animation:prc-Dialog-Overlay--motion-slideInRight-BR-CZ .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-right-radius:0;border-top-right-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{animation:prc-Dialog-Overlay--motion-slideInLeft-ISmQZ .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@media (max-width:767px){.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));height:auto;width:var(--dialog-width,640px)}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=large]){height:640px}@media (max-height:280px){.prc-Dialog-Dialog-G8cDF{max-height:calc(100dvh - 12px);max-width:calc(100dvw - 12px)}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100dvh - 64px);max-width:100dvw;width:100dvw}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{animation:prc-Dialog-Overlay--motion-slideUp-tPElO .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{border-radius:unset!important;flex-grow:1;height:100%;max-height:100dvh;max-width:100dvw;width:100%}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}}body[data-dialog-scroll-disabled]{overflow:hidden!important;padding-right:var(--prc-dialog-scrollgutter)!important}.prc-Dialog-DialogOverflowWrapper-JvHzz{flex-grow:1}.prc-Dialog-Dialog-G8cDF[data-has-footer]{--can-scroll:0}.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{animation:prc-Dialog-detect-scroll-b3i8Q;border-bottom:var(--borderWidth-default,.0625rem) solid var(--borderColor-default,#d1d9e0);animation-timeline:scroll(self)}@supports (animation-timeline:scroll(self)){.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{border-bottom:calc(var(--borderWidth-thin,.0625rem)*var(--can-scroll)) solid var(--borderColor-default,#d1d9e0)}}.prc-Dialog-Header-f7Me-{box-shadow:0 1px 0 var(--borderColor-default,#d1d9e0);flex-shrink:0;max-height:35vh;overflow-y:auto;padding:var(--base-size-8,.5rem);z-index:1}.prc-Dialog-HeaderInner-H-fFY{display:flex}.prc-Dialog-HeaderContent-mjAsn{display:flex;flex-direction:column;flex-grow:1;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem)}.prc-Dialog-Title-M-iPn{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--text-title-weight-large,600);margin:0}.prc-Dialog-Subtitle-aBFSq{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0;margin-top:var(--base-size-4,.25rem)}.prc-Dialog-Body-bB903{flex-grow:1;overflow:auto}.prc-Dialog-Body-bB903,.prc-Dialog-Footer-PMeQk{padding:var(--base-size-16,1rem)}.prc-Dialog-Footer-PMeQk{display:flex;flex-flow:wrap;flex-shrink:0;gap:var(--base-size-8,.5rem);justify-content:flex-end;z-index:1}.prc-Dialog-Dialog-G8cDF[data-footer-button-layout=scroll] .prc-Dialog-Footer-PMeQk{flex-direction:row;flex-wrap:nowrap;justify-content:unset;overflow-x:scroll}
+/*# sourceMappingURL=Dialog-b7da369a.css.map */

package/dist/Dialog/Dialog-b7da369a.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Dialog/Dialog.module.css.js"],"names":[],"mappings":"AAOA,oCACE,eAAgB,CAChB,cAAe,CACf,iBACF,CAEA,mDACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,sDACE,GACE,SAAU,CACV,mBACF,CAEA,GACE,SAAU,CACV,kBACF,CACF,CAEA,oDACE,GACE,0BACF,CACF,CAEA,yDACE,GACE,2BACF,CACF,CAEA,wDACE,GACE,0BACF,CACF,CAGA,0CACE,MAEE,cACF,CACF,CAEA,2BAQE,+EAAsE,CADtE,0DAAiD,CAHjD,QAAS,CAET,YAAa,CADb,MAAO,CAJP,cAAe,CAEf,OAAQ,CADR,KAkEF,CAxDE,oFAHA,kBAAmB,CACnB,sBAKA,CAEA,uDACE,kBAAmB,CACnB,0BACF,CAEA,wDACE,kBAAmB,CACnB,wBACF,CAME,wHACE,sBACF,CAEA,2HACE,kBACF,CAEA,2HACE,oBACF,CAGF,yBACE,wDACE,kBAAmB,CACnB,sBAcF,CAXE,wEACE,sBACF,CAEA,2EACE,kBACF,CAEA,2EACE,oBACF,CAGF,wDACE,eAAgB,CAChB,sBACF,CACF,CAGF,yBASE,4CAAwC,CACxC,8CAAwC,CACxC,wEAAmE,CACnE,4GAAwC,CAXxC,YAAa,CAOb,qBAAsB,CAFtB,WAAY,CACZ,8BAA+B,CAF/B,6BAA8B,CAD9B,eAAgB,CAShB,SAAU,CAVV,+BAuJF,CA3IE,mDACE,WACF,CAEA,oDACE,WACF,CAEA,mDAEE,WACF,CAEA,oDACE,YACF,CAEA,oDACE,YACF,CAEA,yDApCF,yBAqCI,4GAqHJ,CApHE,CAEA,uDACE,wEAcF,CAZE,yDAHF,uDAII,4GAWJ,CAVE,CAGA,uEACE,mCACF,CAEA,0EACE,sCACF,CAGF,qDAGE,wEAAmE,CAEnE,2BAA4B,CAD5B,wBAAyB,CAHzB,aAAc,CACd,gBAQF,CAHE,yDAPF,qDAQI,gHAEJ,CADE,CAGF,sDAGE,wEAAmE,CAEnE,4BAA6B,CAD7B,yBAA0B,CAH1B,aAAc,CACd,gBAQF,CAHE,yDAPF,sDAQI,8GAEJ,CADE,CAGF,yBACE,sDAIE,wEAAmE,CADnE,WAAY,CADZ,+BAwBF,CApBE,gFACE,WACF,CAEA,iFACE,WACF,CAEA,gFAEE,WACF,CAEA,iFACE,YACF,CAEA,iFACE,YACF,CAGF,0BA9GJ,yBA+GM,8BAA+B,CAC/B,6BA0CN,CAzCI,CAEA,sDAKE,wEAAmE,CAEnE,2BAA4B,CAD5B,4BAA6B,CAH7B,WAAY,CACZ,8BAA+B,CAF/B,gBAAiB,CADjB,YAiBF,CARE,kEAEE,eAAgB,CADhB,YAEF,CAEA,yDAfF,sDAgBI,2GAEJ,CADE,CAGF,0DAKE,6BAA+B,CAC/B,WAAY,CAHZ,WAAY,CACZ,iBAAkB,CAFlB,gBAAiB,CADjB,UAgBF,CARE,sEAEE,eAAgB,CADhB,YAEF,CAEA,yDAdF,0DAeI,4GAEJ,CADE,CAEJ,CAOF,kCAGE,yBAA2B,CAD3B,sDAEF,CAEA,wCACE,WACF,CAQA,0CACE,cAYF,CAVE,kFAGE,wCAAwB,CADxB,0FAA0E,CAE1E,+BAKF,CAHE,4CANF,kFAOI,+GAEJ,CADE,CAIJ,yBAME,qDAA8C,CAC9C,aAAc,CALd,eAAgB,CAEhB,eAAgB,CADhB,gCAA2B,CAF3B,SAOF,CAEA,8BACE,YACF,CAEA,gCACE,YAAa,CAGb,qBAAsB,CACtB,WAAY,CAFZ,wCAAiC,CADjC,uCAIF,CAEA,wBAEE,8CAAuC,CACvC,8CAA2C,CAF3C,QAGF,CAEA,2BAKE,kCAA2B,CAF3B,4CAAsC,CACtC,8CAA2C,CAH3C,QAAS,CACT,oCAIF,CAEA,uBAGE,WAAY,CADZ,aAEF,CAEA,gDALE,gCAaF,CARA,yBAEE,YAAa,CACb,cAAe,CAIf,aAAc,CADd,4BAAuB,CAFvB,wBAAyB,CAHzB,SAOF,CAEA,oFAGE,kBAAmB,CAFnB,gBAAiB,CAGjB,qBAAsB,CAFtB,iBAGF","file":"Dialog-b7da369a.css","sourcesContent":["/* The --prc-dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --prc-dialog-scrollgutter {\n  initial-value: 0;\n  inherits: false;\n  syntax: '<length>';\n}\n\n@keyframes dialog-backdrop-appear {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes Overlay--motion-scaleFade {\n  0% {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes Overlay--motion-slideUp {\n  from {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInRight {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n  from {\n    transform: translateX(100%);\n  }\n}\n\n/* Used to determine whether there should be a border between the body and footer */\n@keyframes detect-scroll {\n  from,\n  to {\n    --can-scroll: 1;\n  }\n}\n\n.Backdrop {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  background-color: var(--overlay-backdrop-bgColor);\n  animation: dialog-backdrop-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n  align-items: center;\n  justify-content: center;\n\n  &[data-position-regular='center'] {\n    align-items: center;\n    justify-content: center;\n  }\n\n  &[data-position-regular='left'] {\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  &[data-position-regular='right'] {\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n  /* align only applies when regular position is center (or absent).\n   * :where() zeroes out the :not() specificity so narrow-position rules (coming later)\n   * always win when data-position-narrow is bottom or fullscreen. */\n  &:where(:not([data-position-regular='left']):not([data-position-regular='right'])) {\n    &[data-align='top'] {\n      align-items: flex-start;\n    }\n\n    &[data-align='center'] {\n      align-items: center;\n    }\n\n    &[data-align='bottom'] {\n      align-items: flex-end;\n    }\n  }\n\n  @media (max-width: 767px) {\n    &[data-position-narrow='center'] {\n      align-items: center;\n      justify-content: center;\n\n      /* align still applies when narrow position is center */\n      &[data-align='top'] {\n        align-items: flex-start;\n      }\n\n      &[data-align='center'] {\n        align-items: center;\n      }\n\n      &[data-align='bottom'] {\n        align-items: flex-end;\n      }\n    }\n\n    &[data-position-narrow='bottom'] {\n      align-items: end;\n      justify-content: center;\n    }\n  }\n}\n\n.Dialog {\n  display: flex;\n  /* stylelint-disable-next-line primer/responsive-widths */\n  width: var(--dialog-width, 640px);\n  min-width: 296px;\n  max-width: calc(100dvw - 64px);\n  height: auto;\n  max-height: calc(100dvh - 64px);\n  flex-direction: column;\n  background-color: var(--overlay-bgColor);\n  border-radius: var(--borderRadius-large);\n  border-radius: var(--borderRadius-large, var(--borderRadius-large));\n  box-shadow: var(--shadow-floating-small);\n  opacity: 1;\n\n  &:where([data-width='small']) {\n    width: 296px;\n  }\n\n  &:where([data-width='medium']) {\n    width: 320px;\n  }\n\n  &:where([data-width='large']) {\n    /* stylelint-disable-next-line primer/responsive-widths */\n    width: 480px;\n  }\n\n  &:where([data-height='small']) {\n    height: 480px;\n  }\n\n  &:where([data-height='large']) {\n    height: 640px;\n  }\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n  }\n\n  &[data-position-regular='center'] {\n    border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n    }\n\n    /* align margins only apply when regular position is center */\n    &[data-align='top'] {\n      margin-top: var(--base-size-64);\n    }\n\n    &[data-align='bottom'] {\n      margin-bottom: var(--base-size-64);\n    }\n  }\n\n  &[data-position-regular='left'] {\n    height: 100dvh;\n    max-height: unset;\n    border-radius: var(--borderRadius-large, var(--borderRadius-large));\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n    }\n  }\n\n  &[data-position-regular='right'] {\n    height: 100dvh;\n    max-height: unset;\n    border-radius: var(--borderRadius-large, var(--borderRadius-large));\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;\n    }\n  }\n\n  @media (max-width: 767px) {\n    &[data-position-narrow='center'] {\n      /* stylelint-disable-next-line primer/responsive-widths */\n      width: var(--dialog-width, 640px);\n      height: auto;\n      border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n      &:where([data-width='small']) {\n        width: 296px;\n      }\n\n      &:where([data-width='medium']) {\n        width: 320px;\n      }\n\n      &:where([data-width='large']) {\n        /* stylelint-disable-next-line primer/responsive-widths */\n        width: 480px;\n      }\n\n      &:where([data-height='small']) {\n        height: 480px;\n      }\n\n      &:where([data-height='large']) {\n        height: 640px;\n      }\n    }\n\n    @media (max-height: 280px) {\n      max-height: calc(100dvh - 12px);\n      max-width: calc(100dvw - 12px);\n    }\n\n    &[data-position-narrow='bottom'] {\n      width: 100dvw;\n      max-width: 100dvw;\n      height: auto;\n      max-height: calc(100dvh - 64px);\n      border-radius: var(--borderRadius-large, var(--borderRadius-large));\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n\n      /* reset align margins since position wins at narrow */\n      &[data-align] {\n        margin-top: 0;\n        margin-bottom: 0;\n      }\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n      }\n    }\n\n    &[data-position-narrow='fullscreen'] {\n      width: 100%;\n      max-width: 100dvw;\n      height: 100%;\n      max-height: 100dvh;\n      border-radius: unset !important;\n      flex-grow: 1;\n\n      /* reset align margins since fullscreen wins at narrow */\n      &[data-align] {\n        margin-top: 0;\n        margin-bottom: 0;\n      }\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n      }\n    }\n  }\n}\n\n/*\n * PERFORMANCE OPTIMIZATION: Direct attribute on body - O(1) lookup\n */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-dialog-scroll-disabled] {\n  /* stylelint-disable-next-line primer/spacing */\n  padding-right: var(--prc-dialog-scrollgutter) !important;\n  overflow: hidden !important;\n}\n\n.DialogOverflowWrapper {\n  flex-grow: 1;\n}\n\n/*\nAdd a border between the body and footer if:\n- the dialog has a footer\n- the dialog has a body that can scroll\n- the browser supports the `animation-timeline` property and its `scroll()` function\n*/\n.Dialog[data-has-footer] {\n  --can-scroll: 0;\n\n  .DialogOverflowWrapper {\n    /* If the browser does not support the `animation-timeline` property, always show a border */\n    border-bottom: var(--borderWidth-default) solid var(--borderColor-default);\n    animation: detect-scroll;\n    animation-timeline: scroll(self);\n\n    @supports (animation-timeline: scroll(self)) {\n      border-bottom: calc(var(--borderWidth-thin) * var(--can-scroll)) solid var(--borderColor-default);\n    }\n  }\n}\n\n.Header {\n  z-index: 1;\n  max-height: 35vh;\n  padding: var(--base-size-8);\n  overflow-y: auto;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: 0 1px 0 var(--borderColor-default);\n  flex-shrink: 0;\n}\n\n.HeaderInner {\n  display: flex;\n}\n\n.HeaderContent {\n  display: flex;\n  padding-inline: var(--base-size-8);\n  padding-block: var(--base-size-6);\n  flex-direction: column;\n  flex-grow: 1;\n}\n\n.Title {\n  margin: 0; /* override default margin */\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--text-title-weight-large);\n}\n\n.Subtitle {\n  margin: 0; /* override default margin */\n  margin-top: var(--base-size-4);\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  color: var(--fgColor-muted);\n}\n\n.Body {\n  padding: var(--base-size-16);\n  overflow: auto;\n  flex-grow: 1;\n}\n\n.Footer {\n  z-index: 1;\n  display: flex;\n  flex-flow: wrap;\n  justify-content: flex-end;\n  padding: var(--base-size-16);\n  gap: var(--base-size-8);\n  flex-shrink: 0;\n}\n\n.Dialog[data-footer-button-layout='scroll'] .Footer {\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  flex-direction: row;\n  justify-content: unset;\n}\n"]}

package/dist/Dialog/Dialog.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 import type { ButtonProps } from '../Button';
 import type { ResponsiveValue } from '../hooks/useResponsiveValue';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
@@ -88,6 +88,8 @@ export interface DialogProps {
      * medium: 320px
      * large: 480px
      * xlarge: 640px
+     *
+     * Also accepts any valid CSS width value (e.g. '400px', '80rem').
      */
     width?: DialogWidth;
     /**
@@ -152,7 +154,7 @@ declare const widthMap: {
     readonly large: "480px";
     readonly xlarge: "640px";
 };
-export type DialogWidth = keyof typeof widthMap;
+export type DialogWidth = keyof typeof widthMap | Exclude<CSSProperties['width'], undefined>;
 export type DialogHeight = keyof typeof heightMap;
 export declare const DialogContext: React.Context<object | undefined>;
 export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {

package/dist/Dialog/Dialog.d.ts.map

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

package/dist/Dialog/Dialog.js

@@ -6,18 +6,26 @@ import { XIcon } from '@primer/octicons-react';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import { FocusKeys } from '@primer/behaviors';
 import { Portal } from '../Portal/Portal.js';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import { useId } from '../hooks/useId.js';
 import classes from './Dialog.module.css.js';
 import { clsx } from 'clsx';
 import { useSlots } from '../hooks/useSlots.js';
 import { useResizeObserver } from '../hooks/useResizeObserver.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 import { useOnEscapePress } from '../hooks/useOnEscapePress.js';
 import { ScrollableRegion } from '../ScrollableRegion/ScrollableRegion.js';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
 
 let dialogScrollDisabledCount = 0;
+const widthMap = {
+  small: '296px',
+  medium: '320px',
+  large: '480px',
+  xlarge: '640px'
+};
+const isWidthMapKey = width => typeof width === 'string' && Object.hasOwn(widthMap, width);
+const normalizeWidth = width => typeof width === 'number' ? `${width}px` : width;
 const DefaultHeader = ({
   dialogLabelId,
   title,
@@ -133,7 +141,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
     footer: Dialog.Footer
   });
   const dialogRef = useRef(null);
-  useRefObjectAsForwardedRef(forwardedRef, dialogRef);
+  const mergedDialogRef = useMergedRefs(forwardedRef, dialogRef);
   const backdropRef = useRef(null);
   useFocusTrap({
     containerRef: dialogRef,
@@ -209,7 +217,7 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
           setLastMouseDownIsBackdrop(e.target === e.currentTarget);
         },
         children: /*#__PURE__*/jsxs("div", {
-          ref: dialogRef,
+          ref: mergedDialogRef,
           role: role,
           "aria-labelledby": dialogLabelId,
           "aria-describedby": dialogDescriptionId,
@@ -218,12 +226,17 @@ const _Dialog = /*#__PURE__*/React.forwardRef((props, forwardedRef) => {
           ...(align && {
             'data-align': align
           }),
-          "data-width": width,
+          "data-width": isWidthMapKey(width) ? width : undefined,
           "data-height": height,
           "data-has-footer": hasFooter ? '' : undefined,
           "data-footer-button-layout": hasFooter ? footerButtonLayout : undefined,
           className: clsx(className, classes.Dialog),
-          style: style,
+          style: {
+            ...style,
+            ...(!isWidthMapKey(width) ? {
+              '--dialog-width': normalizeWidth(width)
+            } : {})
+          },
           "data-component": dataComponent,
           children: [header, /*#__PURE__*/jsx(ScrollableRegion, {
             "aria-labelledby": dialogLabelId,

package/dist/Dialog/Dialog.module.css.js

@@ -1,4 +1,4 @@
-import './Dialog-f9bb927a.css';
+import './Dialog-b7da369a.css';
 
 var classes = {"Backdrop":"prc-Dialog-Backdrop-5Nt2U","dialog-backdrop-appear":"prc-Dialog-dialog-backdrop-appear-tCG2K","Dialog":"prc-Dialog-Dialog-G8cDF","Overlay--motion-scaleFade":"prc-Dialog-Overlay--motion-scaleFade-mE6-C","Overlay--motion-slideInRight":"prc-Dialog-Overlay--motion-slideInRight-BR-CZ","Overlay--motion-slideInLeft":"prc-Dialog-Overlay--motion-slideInLeft-ISmQZ","Overlay--motion-slideUp":"prc-Dialog-Overlay--motion-slideUp-tPElO","DialogOverflowWrapper":"prc-Dialog-DialogOverflowWrapper-JvHzz","detect-scroll":"prc-Dialog-detect-scroll-b3i8Q","Header":"prc-Dialog-Header-f7Me-","HeaderInner":"prc-Dialog-HeaderInner-H-fFY","HeaderContent":"prc-Dialog-HeaderContent-mjAsn","Title":"prc-Dialog-Title-M-iPn","Subtitle":"prc-Dialog-Subtitle-aBFSq","Body":"prc-Dialog-Body-bB903","Footer":"prc-Dialog-Footer-PMeQk"};
 

package/dist/Heading/Heading.js

@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
 import React, { forwardRef, useEffect } from 'react';
 import classes from './Heading.module.css.js';
 import { jsx } from 'react/jsx-runtime';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 
 const Heading = /*#__PURE__*/forwardRef(({
   as: Component = 'h2',
@@ -11,7 +11,7 @@ const Heading = /*#__PURE__*/forwardRef(({
   ...props
 }, forwardedRef) => {
   const innerRef = React.useRef(null);
-  useRefObjectAsForwardedRef(forwardedRef, innerRef);
+  const mergedRef = useMergedRefs(forwardedRef, innerRef);
   if (process.env.NODE_ENV !== "production") {
     /**
      * The Linter yells because it thinks this conditionally calls an effect,
@@ -32,7 +32,7 @@ const Heading = /*#__PURE__*/forwardRef(({
     "data-variant": variant,
     "data-component": "Heading",
     ...props,
-    ref: innerRef
+    ref: mergedRef
   });
 });
 Heading.displayName = 'Heading';

package/dist/Hidden/Hidden.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Hidden.d.ts","sourceRoot":"","sources":["../../src/Hidden/Hidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAKxC,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAA;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAuBD,eAAO,MAAM,MAAM;2CAAwC,WAAW;;CAmBrE,CAAA"}
+{"version":3,"file":"Hidden.d.ts","sourceRoot":"","sources":["../../src/Hidden/Hidden.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAC,KAAK,aAAa,EAAC,MAAM,OAAO,CAAA;AAKxC,KAAK,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;AAE7C,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAAA;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAuBD,eAAO,MAAM,MAAM;2CAAwC,WAAW;;CAkBrE,CAAA"}

package/dist/Hidden/Hidden.js

@@ -65,7 +65,6 @@ const Hidden = t0 => {
     t7 = /*#__PURE__*/jsx("div", {
       className: t1,
       style: t6,
-      "data-component": "Hidden",
       children: children
     });
     $[7] = children;

package/dist/InlineMessage/InlineMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.d.ts","sourceRoot":"","sources":["../../src/InlineMessage/InlineMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;AAExE,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACvE;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAEzB;;OAEG;IACH,OAAO,EAAE,cAAc,CAAA;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;CACpD,CAAA;AAgBD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,IAAe,EACf,OAAO,EACP,aAAa,EAAE,aAAa,EAC5B,GAAG,IAAI,EACR,EAAE,kBAAkB,qBA0BpB"}
+{"version":3,"file":"InlineMessage.d.ts","sourceRoot":"","sources":["../../src/InlineMessage/InlineMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,KAAK,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;AAExE,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACvE;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAEzB;;OAEG;IACH,OAAO,EAAE,cAAc,CAAA;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAA;CACpD,CAAA;AAgBD,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,IAAe,EACf,OAAO,EACP,aAAa,EAAE,aAAa,EAC5B,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAoBpB"}

package/dist/InlineMessage/InlineMessage.js

@@ -105,7 +105,6 @@ function InlineMessage(t0) {
       className: t2,
       "data-size": size,
       "data-variant": variant,
-      "data-component": "InlineMessage",
       children: [icon, children]
     });
     $[11] = children;

package/dist/KeybindingHint/KeybindingHint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KeybindingHint.d.ts","sourceRoot":"","sources":["../../src/KeybindingHint/KeybindingHint.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAA;AAoBhD,yDAAyD;AAEzD,eAAO,MAAM,cAAc,gEAAgC,mBAAmB,iCAI5E,CAAA;AAGF;;;;;;;GAOG;AACH,eAAO,MAAM,iCAAiC,gDAA2B,CAAA"}
+{"version":3,"file":"KeybindingHint.d.ts","sourceRoot":"","sources":["../../src/KeybindingHint/KeybindingHint.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,SAAS,CAAA;AAehD,yDAAyD;AAEzD,eAAO,MAAM,cAAc,gEAAgC,mBAAmB,iCAI5E,CAAA;AAGF;;;;;;;GAOG;AACH,eAAO,MAAM,iCAAiC,gDAA2B,CAAA"}

package/dist/KeybindingHint/KeybindingHint.js

@@ -26,7 +26,6 @@ const Kbd = t0 => {
       as: "kbd",
       className: t1,
       "data-testid": "keybinding-hint",
-      "data-component": "KeybindingHint",
       children: children
     });
     $[2] = children;

package/dist/Label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,UAAU,GAAG;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,UAAU,CAAA;AAEd,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;AAEtC,QAAA,MAAM,KAAK,EAcL,8BAA8B,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAExD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,UAAU,GAAG;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,CAAA;AAED,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,UAAU,CAAA;AAEd,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;AAEtC,QAAA,MAAM,KAAK,EAOL,8BAA8B,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAExD,eAAe,KAAK,CAAA"}

package/dist/Label/Label.js

@@ -50,8 +50,7 @@ const Label = /*#__PURE__*/React.forwardRef(function Label(t0, ref) {
       "data-size": size,
       "data-variant": variant,
       ref: ref,
-      ...rest,
-      "data-component": "Label"
+      ...rest
     });
     $[8] = Component;
     $[9] = ref;

package/dist/LabelGroup/LabelGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelGroup.d.ts","sourceRoot":"","sources":["../../src/LabelGroup/LabelGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,MAAM,eAAe,GAAG;IAC5B,2DAA2D;IAC3D,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,4LAA4L;IAC5L,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACpC,4MAA4M;IAC5M,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA6FD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAmPlE,CAAA;AAID,eAAe,UAAU,CAAA"}
+{"version":3,"file":"LabelGroup.d.ts","sourceRoot":"","sources":["../../src/LabelGroup/LabelGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,MAAM,eAAe,GAAG;IAC5B,2DAA2D;IAC3D,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,4LAA4L;IAC5L,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACpC,4MAA4M;IAC5M,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA6FD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA6OlE,CAAA;AAID,eAAe,UAAU,CAAA"}

package/dist/LabelGroup/LabelGroup.js

@@ -305,7 +305,6 @@ const LabelGroup = ({
     "data-overflow": overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined,
     "data-list": isList || undefined,
     className: clsx(className, classes.Container),
-    "data-component": "LabelGroup",
     children: [React.Children.map(children, (child_0, index) => /*#__PURE__*/jsx(ItemWrapperComponent
     // data-index is used as an identifier we can use in the IntersectionObserver
     , {
@@ -339,7 +338,6 @@ const LabelGroup = ({
     "data-overflow": "inline",
     "data-list": isList || undefined,
     className: clsx(className, classes.Container),
-    "data-component": "LabelGroup",
     children: isList ? React.Children.map(children, (child_1, index_0) => {
       return /*#__PURE__*/jsx("li", {
         children: child_1

package/dist/Link/Link.js

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
 import classes from './Link.module.css.js';
 import { fixedForwardRef } from '../utils/modern-polymorphic.js';
 import { jsx } from 'react/jsx-runtime';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 
 const UnwrappedLink = (props, ref) => {
   const {
@@ -15,7 +15,7 @@ const UnwrappedLink = (props, ref) => {
     ...restProps
   } = props;
   const innerRef = React.useRef(null);
-  useRefObjectAsForwardedRef(ref, innerRef);
+  const mergedRef = useMergedRefs(ref, innerRef);
   if (process.env.NODE_ENV !== "production") {
     /**
      * The Linter yells because it thinks this conditionally calls an effect,
@@ -39,7 +39,7 @@ const UnwrappedLink = (props, ref) => {
     "data-hover-color": hoverColor,
     ...restProps,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ref: innerRef
+    ref: mergedRef
   });
 };
 UnwrappedLink.displayName = "UnwrappedLink";

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":"AAAA,OAAO,KAAK,EAAC,qBAAqB,EAAe,MAAM,OAAO,CAAA;AAC9D,OAAO,KAA0B,MAAM,OAAO,CAAA;AAE9C,OAAO,KAAK,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,gBAAgB,CAAA;AACnD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAA;AAG/C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,mBAAmB,CAAA;AACjD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,OAAO,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC9C,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;CASrB,CAAA;AAED,eAAO,MAAM,QAAQ;;;;;;;CAOpB,CAAA;AAiBD,KAAK,gBAAgB,GAAG;IACtB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,YAAY,CAAA;CACjC,CAAA;AAED,KAAK,eAAe,GAAG,KAAK,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAA;AAElE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,EA+CnB,8BAA8B,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;AAE3D,KAAK,cAAc,GAAG;IACpB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAA;IACvD,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IACrD,cAAc,EAAE,CAAC,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC9C,QAAQ,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;IACpC,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CACpD,CAAA;AAED,KAAK,oBAAoB,GAAG,KAAK,CAAC,eAAe,EAAE,cAAc,CAAC,CAAA;AAElE;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,OAAO,EA6FR,8BAA8B,CAAC,KAAK,EAAE,oBAAoB,CAAC,CAAA;AAEhE,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,OAAO,OAAO,CAAC,CAAA;AAEhE,eAAe,OAAO,CAAA"}

package/dist/Overlay/Overlay.js

@@ -2,10 +2,10 @@ import { c } from 'react-compiler-runtime';
 import React, { useRef, useEffect } from 'react';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 import { Portal } from '../Portal/Portal.js';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import classes from './Overlay.module.css.js';
 import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
 import { useOverlay } from '../hooks/useOverlay.js';
 
@@ -124,7 +124,7 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
 
  */
 const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(46);
+  const $ = c(47);
   let _PrivateDisablePortal;
   let anchorSide;
   let ignoreClickRefs;
@@ -209,7 +209,7 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   const visibility = t4 === undefined ? "visible" : t4;
   const width = t5 === undefined ? "auto" : t5;
   const overlayRef = useRef(null);
-  useRefObjectAsForwardedRef(forwardedRef, overlayRef);
+  const mergedOverlayRef = useMergedRefs(forwardedRef, overlayRef);
   const cssAnchorPositioning = useFeatureFlag("primer_react_css_anchor_positioning");
   let t6;
   if ($[19] !== ignoreClickRefs || $[20] !== initialFocusRef || $[21] !== onClickOutside || $[22] !== onEscape || $[23] !== preventFocusOnOpen || $[24] !== returnFocusRef) {
@@ -283,12 +283,12 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   const leftPosition = left === undefined && right === undefined ? 0 : left;
   const t11 = !preventOverflow ? true : undefined;
   let t12;
-  if ($[33] !== height || $[34] !== leftPosition || $[35] !== props || $[36] !== responsiveVariant || $[37] !== right || $[38] !== role || $[39] !== t11 || $[40] !== visibility || $[41] !== width) {
+  if ($[33] !== height || $[34] !== leftPosition || $[35] !== mergedOverlayRef || $[36] !== props || $[37] !== responsiveVariant || $[38] !== right || $[39] !== role || $[40] !== t11 || $[41] !== visibility || $[42] !== width) {
     t12 = /*#__PURE__*/jsx(BaseOverlay, {
       role: role,
       width: width,
       "data-reflow-container": t11,
-      ref: overlayRef,
+      ref: mergedOverlayRef,
       left: leftPosition,
       right: right,
       height: height,
@@ -298,32 +298,33 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
     });
     $[33] = height;
     $[34] = leftPosition;
-    $[35] = props;
-    $[36] = responsiveVariant;
-    $[37] = right;
-    $[38] = role;
-    $[39] = t11;
-    $[40] = visibility;
-    $[41] = width;
-    $[42] = t12;
+    $[35] = mergedOverlayRef;
+    $[36] = props;
+    $[37] = responsiveVariant;
+    $[38] = right;
+    $[39] = role;
+    $[40] = t11;
+    $[41] = visibility;
+    $[42] = width;
+    $[43] = t12;
   } else {
-    t12 = $[42];
+    t12 = $[43];
   }
   const overlayContent = t12;
   if (_PrivateDisablePortal && cssAnchorPositioning) {
     return overlayContent;
   }
   let t13;
-  if ($[43] !== overlayContent || $[44] !== portalContainerName) {
+  if ($[44] !== overlayContent || $[45] !== portalContainerName) {
     t13 = /*#__PURE__*/jsx(Portal, {
       containerName: portalContainerName,
       children: overlayContent
     });
-    $[43] = overlayContent;
-    $[44] = portalContainerName;
-    $[45] = t13;
+    $[44] = overlayContent;
+    $[45] = portalContainerName;
+    $[46] = t13;
   } else {
-    t13 = $[45];
+    t13 = $[46];
   }
   return t13;
 });

package/dist/PageLayout/PageLayout.js

@@ -1,7 +1,6 @@
 import React, { useRef, memo } from 'react';
 import { clsx } from 'clsx';
 import { useId } from '../hooks/useId.js';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
 import { useSlots } from '../hooks/useSlots.js';
 import { useOverflow } from '../hooks/useOverflow.js';
@@ -11,6 +10,7 @@ import classes from './PageLayout.module.css.js';
 import { usePaneWidth, isPaneWidth, isCustomWidthOptions, updateAriaValues, ARROW_KEY_STEP } from './usePaneWidth.js';
 import { setDraggingStyles, removeDraggingStyles } from './paneUtils.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 
 const isArrowKey = key => key === 'ArrowLeft' || key === 'ArrowRight' || key === 'ArrowUp' || key === 'ArrowDown';
 const isShrinkKey = key => key === 'ArrowLeft' || key === 'ArrowDown';
@@ -581,7 +581,7 @@ const Pane = /*#__PURE__*/React.forwardRef(({
     onResizeEnd,
     currentWidth: controlledWidth
   });
-  useRefObjectAsForwardedRef(forwardRef, paneRef);
+  const mergedPaneRef = useMergedRefs(forwardRef, paneRef);
   const hasOverflow = useOverflow(paneRef);
   const paneId = useId(id);
   const labelProp = {};
@@ -615,7 +615,7 @@ const Pane = /*#__PURE__*/React.forwardRef(({
       },
       position: positionProp
     }), /*#__PURE__*/jsx("div", {
-      ref: paneRef
+      ref: mergedPaneRef
       // Suppress hydration mismatch for --pane-width when localStorage
       // provides a width that differs from the server-rendered default.
       // Not needed when onResizeEnd is provided (localStorage isn't read).
@@ -785,7 +785,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
     contentWrapperRef: sidebarContentWrapperRef,
     constrainToViewport: true
   });
-  useRefObjectAsForwardedRef(forwardRef, sidebarRef);
+  const mergedSidebarRef = useMergedRefs(forwardRef, sidebarRef);
   const hasOverflow = useOverflow(sidebarRef);
   const sidebarId = useId(id);
   const labelProp = {};
@@ -824,7 +824,7 @@ const Sidebar = /*#__PURE__*/React.forwardRef(({
       getDefaultWidth: getDefaultWidth,
       saveWidth: saveWidth
     }), /*#__PURE__*/jsx("div", {
-      ref: sidebarRef
+      ref: mergedSidebarRef
       // Suppress hydration mismatch for --pane-width when localStorage
       // provides a width that differs from the server-rendered default.
       ,

package/dist/TextInputWithTokens/TextInputWithTokens.js

@@ -3,7 +3,7 @@ import { FocusKeys } from '@primer/behaviors';
 import { isFocusable } from '@primer/behaviors/utils';
 import React, { useRef, useState } from 'react';
 import { isValidElementType } from 'react-is';
-import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
+import { useMergedRefs } from '../hooks/useMergedRefs.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import { useId } from '../hooks/useId.js';
 import Token from '../Token/Token.js';
@@ -25,7 +25,7 @@ const overflowCountClassMap = {
 
 // using forwardRef is important so that other components (ex. Autocomplete) can use the ref
 function TextInputWithTokensInnerComponent(t0, forwardedRef) {
-  const $ = c(151);
+  const $ = c(152);
   let IconComponent;
   let LeadingVisual;
   let TrailingVisual;
@@ -164,8 +164,8 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
     role = $[31];
   }
   const ref = useRef(null);
+  const mergedRef = useMergedRefs(forwardedRef, ref);
   const selectedValuesDescriptionId = useId();
-  useRefObjectAsForwardedRef(forwardedRef, ref);
   const [selectedTokenIndex, setSelectedTokenIndex] = useState();
   const [tokensAreTruncated, setTokensAreTruncated] = useState(Boolean(visibleTokenCount));
   let t6;
@@ -457,9 +457,9 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
   const t32 = validationStatus === "error" ? "true" : "false";
   const t33 = ariaDescribedBy || undefined;
   let t34;
-  if ($[80] !== disabled || $[81] !== handleInputBlur || $[82] !== handleInputFocus || $[83] !== handleInputKeyDown || $[84] !== inputPropsRest || $[85] !== role || $[86] !== t32 || $[87] !== t33) {
+  if ($[80] !== disabled || $[81] !== handleInputBlur || $[82] !== handleInputFocus || $[83] !== handleInputKeyDown || $[84] !== inputPropsRest || $[85] !== mergedRef || $[86] !== role || $[87] !== t32 || $[88] !== t33) {
     t34 = /*#__PURE__*/jsx(UnstyledTextInput, {
-      ref: ref,
+      ref: mergedRef,
       disabled: disabled,
       onFocus: handleInputFocus,
       onBlur: handleInputBlur,
@@ -477,42 +477,43 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
     $[82] = handleInputFocus;
     $[83] = handleInputKeyDown;
     $[84] = inputPropsRest;
-    $[85] = role;
-    $[86] = t32;
-    $[87] = t33;
-    $[88] = t34;
+    $[85] = mergedRef;
+    $[86] = role;
+    $[87] = t32;
+    $[88] = t33;
+    $[89] = t34;
   } else {
-    t34 = $[88];
+    t34 = $[89];
   }
   let t35;
-  if ($[89] !== selectedValuesDescription || $[90] !== selectedValuesDescriptionId || $[91] !== shouldExposeSelectedValuesDescription) {
+  if ($[90] !== selectedValuesDescription || $[91] !== selectedValuesDescriptionId || $[92] !== shouldExposeSelectedValuesDescription) {
     t35 = shouldExposeSelectedValuesDescription ? /*#__PURE__*/jsx(VisuallyHidden, {
       id: selectedValuesDescriptionId,
       children: selectedValuesDescription
     }) : null;
-    $[89] = selectedValuesDescription;
-    $[90] = selectedValuesDescriptionId;
-    $[91] = shouldExposeSelectedValuesDescription;
-    $[92] = t35;
+    $[90] = selectedValuesDescription;
+    $[91] = selectedValuesDescriptionId;
+    $[92] = shouldExposeSelectedValuesDescription;
+    $[93] = t35;
   } else {
-    t35 = $[92];
+    t35 = $[93];
   }
   let t36;
-  if ($[93] !== t34 || $[94] !== t35) {
+  if ($[94] !== t34 || $[95] !== t35) {
     t36 = /*#__PURE__*/jsxs("div", {
       className: styles.InputWrapper,
       children: [t34, t35]
     });
-    $[93] = t34;
-    $[94] = t35;
-    $[95] = t36;
+    $[94] = t34;
+    $[95] = t35;
+    $[96] = t36;
   } else {
-    t36 = $[95];
+    t36 = $[96];
   }
   let t37;
-  if ($[96] !== TokenComponent || $[97] !== disabled || $[98] !== handleTokenBlur || $[99] !== handleTokenFocus || $[100] !== handleTokenRemove || $[101] !== hideTokenRemoveButtons || $[102] !== selectedTokenIndex || $[103] !== size || $[104] !== visibleTokens) {
+  if ($[97] !== TokenComponent || $[98] !== disabled || $[99] !== handleTokenBlur || $[100] !== handleTokenFocus || $[101] !== handleTokenRemove || $[102] !== hideTokenRemoveButtons || $[103] !== selectedTokenIndex || $[104] !== size || $[105] !== visibleTokens) {
     let t38;
-    if ($[106] !== TokenComponent || $[107] !== disabled || $[108] !== handleTokenBlur || $[109] !== handleTokenFocus || $[110] !== handleTokenRemove || $[111] !== hideTokenRemoveButtons || $[112] !== selectedTokenIndex || $[113] !== size) {
+    if ($[107] !== TokenComponent || $[108] !== disabled || $[109] !== handleTokenBlur || $[110] !== handleTokenFocus || $[111] !== handleTokenRemove || $[112] !== hideTokenRemoveButtons || $[113] !== selectedTokenIndex || $[114] !== size) {
       t38 = (t39, i) => {
         const {
           id,
@@ -535,75 +536,75 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
           ...tokenRest
         }, id);
       };
-      $[106] = TokenComponent;
-      $[107] = disabled;
-      $[108] = handleTokenBlur;
-      $[109] = handleTokenFocus;
-      $[110] = handleTokenRemove;
-      $[111] = hideTokenRemoveButtons;
-      $[112] = selectedTokenIndex;
-      $[113] = size;
-      $[114] = t38;
+      $[107] = TokenComponent;
+      $[108] = disabled;
+      $[109] = handleTokenBlur;
+      $[110] = handleTokenFocus;
+      $[111] = handleTokenRemove;
+      $[112] = hideTokenRemoveButtons;
+      $[113] = selectedTokenIndex;
+      $[114] = size;
+      $[115] = t38;
     } else {
-      t38 = $[114];
+      t38 = $[115];
     }
     t37 = visibleTokens.map(t38);
-    $[96] = TokenComponent;
-    $[97] = disabled;
-    $[98] = handleTokenBlur;
-    $[99] = handleTokenFocus;
-    $[100] = handleTokenRemove;
-    $[101] = hideTokenRemoveButtons;
-    $[102] = selectedTokenIndex;
-    $[103] = size;
-    $[104] = visibleTokens;
-    $[105] = t37;
+    $[97] = TokenComponent;
+    $[98] = disabled;
+    $[99] = handleTokenBlur;
+    $[100] = handleTokenFocus;
+    $[101] = handleTokenRemove;
+    $[102] = hideTokenRemoveButtons;
+    $[103] = selectedTokenIndex;
+    $[104] = size;
+    $[105] = visibleTokens;
+    $[106] = t37;
   } else {
-    t37 = $[105];
+    t37 = $[106];
   }
   let t38;
-  if ($[115] !== size || $[116] !== tokens.length || $[117] !== tokensAreTruncated || $[118] !== visibleTokens.length) {
+  if ($[116] !== size || $[117] !== tokens.length || $[118] !== tokensAreTruncated || $[119] !== visibleTokens.length) {
     t38 = tokensAreTruncated && tokens.length - visibleTokens.length ? /*#__PURE__*/jsxs(Text, {
       className: overflowCountClassMap[size],
       "data-component": "TextInputWithTokens.OverflowCount",
       children: ["+", tokens.length - visibleTokens.length]
     }) : null;
-    $[115] = size;
-    $[116] = tokens.length;
-    $[117] = tokensAreTruncated;
-    $[118] = visibleTokens.length;
-    $[119] = t38;
+    $[116] = size;
+    $[117] = tokens.length;
+    $[118] = tokensAreTruncated;
+    $[119] = visibleTokens.length;
+    $[120] = t38;
   } else {
-    t38 = $[119];
+    t38 = $[120];
   }
   let t39;
-  if ($[120] !== preventTokenWrapping || $[121] !== t31 || $[122] !== t36 || $[123] !== t37 || $[124] !== t38) {
+  if ($[121] !== preventTokenWrapping || $[122] !== t31 || $[123] !== t36 || $[124] !== t37 || $[125] !== t38) {
     t39 = /*#__PURE__*/jsxs("div", {
       ref: t31,
       className: styles.Container,
       "data-prevent-token-wrapping": preventTokenWrapping,
       children: [t36, t37, t38]
     });
-    $[120] = preventTokenWrapping;
-    $[121] = t31;
-    $[122] = t36;
-    $[123] = t37;
-    $[124] = t38;
-    $[125] = t39;
+    $[121] = preventTokenWrapping;
+    $[122] = t31;
+    $[123] = t36;
+    $[124] = t37;
+    $[125] = t38;
+    $[126] = t39;
   } else {
-    t39 = $[125];
+    t39 = $[126];
   }
   const t40 = typeof loading === "boolean";
   let t41;
-  if ($[126] !== TrailingVisual) {
+  if ($[127] !== TrailingVisual) {
     t41 = typeof TrailingVisual !== "string" && isValidElementType(TrailingVisual) ? /*#__PURE__*/jsx(TrailingVisual, {}) : TrailingVisual;
-    $[126] = TrailingVisual;
-    $[127] = t41;
+    $[127] = TrailingVisual;
+    $[128] = t41;
   } else {
-    t41 = $[127];
+    t41 = $[128];
   }
   let t42;
-  if ($[128] !== showTrailingLoadingIndicator || $[129] !== t40 || $[130] !== t41) {
+  if ($[129] !== showTrailingLoadingIndicator || $[130] !== t40 || $[131] !== t41) {
     t42 = /*#__PURE__*/jsx(TextInputInnerVisualSlot, {
       hasLoadingIndicator: t40,
       visualPosition: "trailing",
@@ -611,15 +612,15 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
       componentPrefix: "TextInputWithTokens",
       children: t41
     });
-    $[128] = showTrailingLoadingIndicator;
-    $[129] = t40;
-    $[130] = t41;
-    $[131] = t42;
+    $[129] = showTrailingLoadingIndicator;
+    $[130] = t40;
+    $[131] = t41;
+    $[132] = t42;
   } else {
-    t42 = $[131];
+    t42 = $[132];
   }
   let t43;
-  if ($[132] !== block || $[133] !== contrast || $[134] !== disabled || $[135] !== maxWidthProp || $[136] !== minWidthProp || $[137] !== t21 || $[138] !== t22 || $[139] !== t23 || $[140] !== t24 || $[141] !== t25 || $[142] !== t26 || $[143] !== t27 || $[144] !== t30 || $[145] !== t39 || $[146] !== t42 || $[147] !== validationStatus || $[148] !== variantProp || $[149] !== widthProp) {
+  if ($[133] !== block || $[134] !== contrast || $[135] !== disabled || $[136] !== maxWidthProp || $[137] !== minWidthProp || $[138] !== t21 || $[139] !== t22 || $[140] !== t23 || $[141] !== t24 || $[142] !== t25 || $[143] !== t26 || $[144] !== t27 || $[145] !== t30 || $[146] !== t39 || $[147] !== t42 || $[148] !== validationStatus || $[149] !== variantProp || $[150] !== widthProp) {
     t43 = /*#__PURE__*/jsxs(TextInputWrapper, {
       block: block,
       contrast: contrast,
@@ -639,27 +640,27 @@ function TextInputWithTokensInnerComponent(t0, forwardedRef) {
       "data-component": "TextInputWithTokens",
       children: [t27, t30, t39, t42]
     });
-    $[132] = block;
-    $[133] = contrast;
-    $[134] = disabled;
-    $[135] = maxWidthProp;
-    $[136] = minWidthProp;
-    $[137] = t21;
-    $[138] = t22;
-    $[139] = t23;
-    $[140] = t24;
-    $[141] = t25;
-    $[142] = t26;
-    $[143] = t27;
-    $[144] = t30;
-    $[145] = t39;
-    $[146] = t42;
-    $[147] = validationStatus;
-    $[148] = variantProp;
-    $[149] = widthProp;
-    $[150] = t43;
+    $[133] = block;
+    $[134] = contrast;
+    $[135] = disabled;
+    $[136] = maxWidthProp;
+    $[137] = minWidthProp;
+    $[138] = t21;
+    $[139] = t22;
+    $[140] = t23;
+    $[141] = t24;
+    $[142] = t25;
+    $[143] = t26;
+    $[144] = t27;
+    $[145] = t30;
+    $[146] = t39;
+    $[147] = t42;
+    $[148] = validationStatus;
+    $[149] = variantProp;
+    $[150] = widthProp;
+    $[151] = t43;
   } else {
-    t43 = $[150];
+    t43 = $[151];
   }
   return t43;
 }

package/dist/deprecated/DialogV1/Dialog.js

@@ -2,7 +2,7 @@ import { c } from 'react-compiler-runtime';
 import React, { forwardRef, useRef } from 'react';
 import { IconButton } from '../../Button/IconButton.js';
 import useDialog from '../../hooks/useDialog.js';
-import { useRefObjectAsForwardedRef } from '../../hooks/useRefObjectAsForwardedRef.js';
+import { useMergedRefs } from '../../hooks/useMergedRefs.js';
 import { XIcon } from '@primer/octicons-react';
 import { clsx } from 'clsx';
 import classes from './Dialog.module.css.js';
@@ -78,7 +78,7 @@ function _temp(ch) {
   return typeof ch === "string";
 }
 const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(25);
+  const $ = c(26);
   let children;
   let className;
   let initialFocusRef;
@@ -121,7 +121,7 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const Component = t2 === undefined ? "div" : t2;
   const overlayRef = useRef(null);
   const modalRef = useRef(null);
-  useRefObjectAsForwardedRef(forwardedRef, modalRef);
+  const mergedRef = useMergedRefs(forwardedRef, modalRef);
   const closeButtonRef = useRef(null);
   let t3;
   if ($[9] !== onDismiss || $[10] !== returnFocusRef) {
@@ -161,14 +161,14 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     getDialogProps
   } = useDialog(t4);
   let t5;
-  if ($[17] !== Component || $[18] !== children || $[19] !== className || $[20] !== getDialogProps || $[21] !== isOpen || $[22] !== onCloseClick || $[23] !== props) {
+  if ($[17] !== Component || $[18] !== children || $[19] !== className || $[20] !== getDialogProps || $[21] !== isOpen || $[22] !== mergedRef || $[23] !== onCloseClick || $[24] !== props) {
     t5 = isOpen ? /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx("span", {
         className: classes.Overlay,
         ref: overlayRef
       }), /*#__PURE__*/jsxs(Component, {
         tabIndex: -1,
-        ref: modalRef,
+        ref: mergedRef,
         role: "dialog",
         "aria-modal": "true",
         ...props,
@@ -190,11 +190,12 @@ const Dialog = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
     $[19] = className;
     $[20] = getDialogProps;
     $[21] = isOpen;
-    $[22] = onCloseClick;
-    $[23] = props;
-    $[24] = t5;
+    $[22] = mergedRef;
+    $[23] = onCloseClick;
+    $[24] = props;
+    $[25] = t5;
   } else {
-    t5 = $[24];
+    t5 = $[25];
   }
   return t5;
 });

package/generated/components.json

@@ -3170,8 +3170,8 @@
         },
         {
           "name": "width",
-          "type": "'small' | 'medium' | 'large' | 'xlarge'",
-          "description": "The width of the dialog.\nsmall: 296px\nmedium: 320px\nlarge: 480px\nxlarge: 640px"
+          "type": "'small' | 'medium' | 'large' | 'xlarge' | string | number",
+          "description": "The width of the dialog.\nsmall: 296px\nmedium: 320px\nlarge: 480px\nxlarge: 640px\n\nAlso accepts any valid CSS width value (e.g. '400px', '80rem') or a number, which is interpreted as a pixel width."
         },
         {
           "name": "height",

package/package.json

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

package/dist/Dialog/Dialog-f9bb927a.css

@@ -1,2 +0,0 @@
-@property --prc-dialog-scrollgutter{initial-value:0;inherits:false;syntax:"<length>"}@keyframes prc-Dialog-dialog-backdrop-appear-tCG2K{0%{opacity:0}to{opacity:1}}@keyframes prc-Dialog-Overlay--motion-scaleFade-mE6-C{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes prc-Dialog-Overlay--motion-slideUp-tPElO{0%{transform:translateY(100%)}}@keyframes prc-Dialog-Overlay--motion-slideInRight-BR-CZ{0%{transform:translateX(-100%)}}@keyframes prc-Dialog-Overlay--motion-slideInLeft-ISmQZ{0%{transform:translateX(100%)}}@keyframes prc-Dialog-detect-scroll-b3i8Q{0%,to{--can-scroll:1}}.prc-Dialog-Backdrop-5Nt2U{animation:prc-Dialog-dialog-backdrop-appear-tCG2K .2s cubic-bezier(.33,1,.68,1);background-color:var(--overlay-backdrop-bgColor,#c8d1da66);bottom:0;display:flex;left:0;position:fixed;right:0;top:0}.prc-Dialog-Backdrop-5Nt2U,.prc-Dialog-Backdrop-5Nt2U[data-position-regular=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=left]{align-items:center;justify-content:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-regular=right]{align-items:center;justify-content:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-align=top]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-align=center]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-align=bottom]:where(:not([data-position-regular=left]):not([data-position-regular=right])){align-items:flex-end}@media (max-width:767px){.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center]{align-items:center;justify-content:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=top]{align-items:flex-start}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=center]{align-items:center}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=center][data-align=bottom]{align-items:flex-end}.prc-Dialog-Backdrop-5Nt2U[data-position-narrow=bottom]{align-items:end;justify-content:center}}.prc-Dialog-Dialog-G8cDF{background-color:var(--overlay-bgColor,#fff);border-radius:var(--borderRadius-large,.75rem);border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));box-shadow:var(--shadow-floating-small,0 0 0 1px #d1d9e080,0 6px 12px -3px #25292e0a,0 6px 18px 0 #25292e1f);display:flex;flex-direction:column;height:auto;max-height:calc(100dvh - 64px);max-width:calc(100dvw - 64px);min-width:296px;opacity:1;width:640px}.prc-Dialog-Dialog-G8cDF:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF:where([data-height=large]){height:640px}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem))}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=center]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=top]{margin-top:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=center][data-align=bottom]{margin-bottom:var(--base-size-64,4rem)}.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-top-left-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=left]{animation:prc-Dialog-Overlay--motion-slideInRight-BR-CZ .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-right-radius:0;border-top-right-radius:0;height:100dvh;max-height:unset}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-regular=right]{animation:prc-Dialog-Overlay--motion-slideInLeft-ISmQZ .25s cubic-bezier(.33,1,.68,1) 0s 1 normal none running}}@media (max-width:767px){.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));height:auto;width:640px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=small]){width:296px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=medium]){width:320px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-width=large]){width:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=small]){height:480px}.prc-Dialog-Dialog-G8cDF[data-position-narrow=center]:where([data-height=large]){height:640px}@media (max-height:280px){.prc-Dialog-Dialog-G8cDF{max-height:calc(100dvh - 12px);max-width:calc(100dvw - 12px)}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{border-radius:var(--borderRadius-large,var(--borderRadius-large,.75rem));border-bottom-left-radius:0;border-bottom-right-radius:0;height:auto;max-height:calc(100dvh - 64px);max-width:100dvw;width:100dvw}.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=bottom]{animation:prc-Dialog-Overlay--motion-slideUp-tPElO .25s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{border-radius:unset!important;flex-grow:1;height:100%;max-height:100dvh;max-width:100dvw;width:100%}.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen][data-align]{margin-bottom:0;margin-top:0}@media screen and (prefers-reduced-motion:no-preference){.prc-Dialog-Dialog-G8cDF[data-position-narrow=fullscreen]{animation:prc-Dialog-Overlay--motion-scaleFade-mE6-C .2s cubic-bezier(.33,1,.68,1) 1ms 1 normal none running}}}body[data-dialog-scroll-disabled]{overflow:hidden!important;padding-right:var(--prc-dialog-scrollgutter)!important}.prc-Dialog-DialogOverflowWrapper-JvHzz{flex-grow:1}.prc-Dialog-Dialog-G8cDF[data-has-footer]{--can-scroll:0}.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{animation:prc-Dialog-detect-scroll-b3i8Q;border-bottom:var(--borderWidth-default,.0625rem) solid var(--borderColor-default,#d1d9e0);animation-timeline:scroll(self)}@supports (animation-timeline:scroll(self)){.prc-Dialog-Dialog-G8cDF[data-has-footer] .prc-Dialog-DialogOverflowWrapper-JvHzz{border-bottom:calc(var(--borderWidth-thin,.0625rem)*var(--can-scroll)) solid var(--borderColor-default,#d1d9e0)}}.prc-Dialog-Header-f7Me-{box-shadow:0 1px 0 var(--borderColor-default,#d1d9e0);flex-shrink:0;max-height:35vh;overflow-y:auto;padding:var(--base-size-8,.5rem);z-index:1}.prc-Dialog-HeaderInner-H-fFY{display:flex}.prc-Dialog-HeaderContent-mjAsn{display:flex;flex-direction:column;flex-grow:1;padding-block:var(--base-size-6,.375rem);padding-inline:var(--base-size-8,.5rem)}.prc-Dialog-Title-M-iPn{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--text-title-weight-large,600);margin:0}.prc-Dialog-Subtitle-aBFSq{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);margin:0;margin-top:var(--base-size-4,.25rem)}.prc-Dialog-Body-bB903{flex-grow:1;overflow:auto}.prc-Dialog-Body-bB903,.prc-Dialog-Footer-PMeQk{padding:var(--base-size-16,1rem)}.prc-Dialog-Footer-PMeQk{display:flex;flex-flow:wrap;flex-shrink:0;gap:var(--base-size-8,.5rem);justify-content:flex-end;z-index:1}.prc-Dialog-Dialog-G8cDF[data-footer-button-layout=scroll] .prc-Dialog-Footer-PMeQk{flex-direction:row;flex-wrap:nowrap;justify-content:unset;overflow-x:scroll}
-/*# sourceMappingURL=Dialog-f9bb927a.css.map */

package/dist/Dialog/Dialog-f9bb927a.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/Dialog/Dialog.module.css.js"],"names":[],"mappings":"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","file":"Dialog-f9bb927a.css","sourcesContent":["/* The --prc-dialog-scrollgutter property is used only on the body element to\n * simulate scrollbar-gutter:stable. This property is not and should not\n * be used elsewhere in the DOM. There is a performance penalty to\n * setting inherited properties which can cause a large style recalc to\n * occur, so it benefits us to prevent inheritance for this property.\n * See https://web.dev/blog/at-property-performance\n */\n@property --prc-dialog-scrollgutter {\n  initial-value: 0;\n  inherits: false;\n  syntax: '<length>';\n}\n\n@keyframes dialog-backdrop-appear {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes Overlay--motion-scaleFade {\n  0% {\n    opacity: 0;\n    transform: scale(0.5);\n  }\n\n  100% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes Overlay--motion-slideUp {\n  from {\n    transform: translateY(100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInRight {\n  from {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n  from {\n    transform: translateX(100%);\n  }\n}\n\n/* Used to determine whether there should be a border between the body and footer */\n@keyframes detect-scroll {\n  from,\n  to {\n    --can-scroll: 1;\n  }\n}\n\n.Backdrop {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  background-color: var(--overlay-backdrop-bgColor);\n  animation: dialog-backdrop-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n  align-items: center;\n  justify-content: center;\n\n  &[data-position-regular='center'] {\n    align-items: center;\n    justify-content: center;\n  }\n\n  &[data-position-regular='left'] {\n    align-items: center;\n    justify-content: flex-start;\n  }\n\n  &[data-position-regular='right'] {\n    align-items: center;\n    justify-content: flex-end;\n  }\n\n  /* align only applies when regular position is center (or absent).\n   * :where() zeroes out the :not() specificity so narrow-position rules (coming later)\n   * always win when data-position-narrow is bottom or fullscreen. */\n  &:where(:not([data-position-regular='left']):not([data-position-regular='right'])) {\n    &[data-align='top'] {\n      align-items: flex-start;\n    }\n\n    &[data-align='center'] {\n      align-items: center;\n    }\n\n    &[data-align='bottom'] {\n      align-items: flex-end;\n    }\n  }\n\n  @media (max-width: 767px) {\n    &[data-position-narrow='center'] {\n      align-items: center;\n      justify-content: center;\n\n      /* align still applies when narrow position is center */\n      &[data-align='top'] {\n        align-items: flex-start;\n      }\n\n      &[data-align='center'] {\n        align-items: center;\n      }\n\n      &[data-align='bottom'] {\n        align-items: flex-end;\n      }\n    }\n\n    &[data-position-narrow='bottom'] {\n      align-items: end;\n      justify-content: center;\n    }\n  }\n}\n\n.Dialog {\n  display: flex;\n  /* stylelint-disable-next-line primer/responsive-widths */\n  width: 640px;\n  min-width: 296px;\n  max-width: calc(100dvw - 64px);\n  height: auto;\n  max-height: calc(100dvh - 64px);\n  flex-direction: column;\n  background-color: var(--overlay-bgColor);\n  border-radius: var(--borderRadius-large);\n  border-radius: var(--borderRadius-large, var(--borderRadius-large));\n  box-shadow: var(--shadow-floating-small);\n  opacity: 1;\n\n  &:where([data-width='small']) {\n    width: 296px;\n  }\n\n  &:where([data-width='medium']) {\n    width: 320px;\n  }\n\n  &:where([data-width='large']) {\n    /* stylelint-disable-next-line primer/responsive-widths */\n    width: 480px;\n  }\n\n  &:where([data-height='small']) {\n    height: 480px;\n  }\n\n  &:where([data-height='large']) {\n    height: 640px;\n  }\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n  }\n\n  &[data-position-regular='center'] {\n    border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n    }\n\n    /* align margins only apply when regular position is center */\n    &[data-align='top'] {\n      margin-top: var(--base-size-64);\n    }\n\n    &[data-align='bottom'] {\n      margin-bottom: var(--base-size-64);\n    }\n  }\n\n  &[data-position-regular='left'] {\n    height: 100dvh;\n    max-height: unset;\n    border-radius: var(--borderRadius-large, var(--borderRadius-large));\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n    }\n  }\n\n  &[data-position-regular='right'] {\n    height: 100dvh;\n    max-height: unset;\n    border-radius: var(--borderRadius-large, var(--borderRadius-large));\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n\n    @media screen and (prefers-reduced-motion: no-preference) {\n      animation: Overlay--motion-slideInLeft 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;\n    }\n  }\n\n  @media (max-width: 767px) {\n    &[data-position-narrow='center'] {\n      /* stylelint-disable-next-line primer/responsive-widths */\n      width: 640px;\n      height: auto;\n      border-radius: var(--borderRadius-large, var(--borderRadius-large));\n\n      &:where([data-width='small']) {\n        width: 296px;\n      }\n\n      &:where([data-width='medium']) {\n        width: 320px;\n      }\n\n      &:where([data-width='large']) {\n        /* stylelint-disable-next-line primer/responsive-widths */\n        width: 480px;\n      }\n\n      &:where([data-height='small']) {\n        height: 480px;\n      }\n\n      &:where([data-height='large']) {\n        height: 640px;\n      }\n    }\n\n    @media (max-height: 280px) {\n      max-height: calc(100dvh - 12px);\n      max-width: calc(100dvw - 12px);\n    }\n\n    &[data-position-narrow='bottom'] {\n      width: 100dvw;\n      max-width: 100dvw;\n      height: auto;\n      max-height: calc(100dvh - 64px);\n      border-radius: var(--borderRadius-large, var(--borderRadius-large));\n      border-bottom-right-radius: 0;\n      border-bottom-left-radius: 0;\n\n      /* reset align margins since position wins at narrow */\n      &[data-align] {\n        margin-top: 0;\n        margin-bottom: 0;\n      }\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n      }\n    }\n\n    &[data-position-narrow='fullscreen'] {\n      width: 100%;\n      max-width: 100dvw;\n      height: 100%;\n      max-height: 100dvh;\n      border-radius: unset !important;\n      flex-grow: 1;\n\n      /* reset align margins since fullscreen wins at narrow */\n      &[data-align] {\n        margin-top: 0;\n        margin-bottom: 0;\n      }\n\n      @media screen and (prefers-reduced-motion: no-preference) {\n        animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;\n      }\n    }\n  }\n}\n\n/*\n * PERFORMANCE OPTIMIZATION: Direct attribute on body - O(1) lookup\n */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-dialog-scroll-disabled] {\n  /* stylelint-disable-next-line primer/spacing */\n  padding-right: var(--prc-dialog-scrollgutter) !important;\n  overflow: hidden !important;\n}\n\n.DialogOverflowWrapper {\n  flex-grow: 1;\n}\n\n/*\nAdd a border between the body and footer if:\n- the dialog has a footer\n- the dialog has a body that can scroll\n- the browser supports the `animation-timeline` property and its `scroll()` function\n*/\n.Dialog[data-has-footer] {\n  --can-scroll: 0;\n\n  .DialogOverflowWrapper {\n    /* If the browser does not support the `animation-timeline` property, always show a border */\n    border-bottom: var(--borderWidth-default) solid var(--borderColor-default);\n    animation: detect-scroll;\n    animation-timeline: scroll(self);\n\n    @supports (animation-timeline: scroll(self)) {\n      border-bottom: calc(var(--borderWidth-thin) * var(--can-scroll)) solid var(--borderColor-default);\n    }\n  }\n}\n\n.Header {\n  z-index: 1;\n  max-height: 35vh;\n  padding: var(--base-size-8);\n  overflow-y: auto;\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: 0 1px 0 var(--borderColor-default);\n  flex-shrink: 0;\n}\n\n.HeaderInner {\n  display: flex;\n}\n\n.HeaderContent {\n  display: flex;\n  padding-inline: var(--base-size-8);\n  padding-block: var(--base-size-6);\n  flex-direction: column;\n  flex-grow: 1;\n}\n\n.Title {\n  margin: 0; /* override default margin */\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--text-title-weight-large);\n}\n\n.Subtitle {\n  margin: 0; /* override default margin */\n  margin-top: var(--base-size-4);\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  color: var(--fgColor-muted);\n}\n\n.Body {\n  padding: var(--base-size-16);\n  overflow: auto;\n  flex-grow: 1;\n}\n\n.Footer {\n  z-index: 1;\n  display: flex;\n  flex-flow: wrap;\n  justify-content: flex-end;\n  padding: var(--base-size-16);\n  gap: var(--base-size-8);\n  flex-shrink: 0;\n}\n\n.Dialog[data-footer-button-layout='scroll'] .Footer {\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  flex-direction: row;\n  justify-content: unset;\n}\n"]}