@primer/react 38.32.0-rc.57a990042 → 38.32.0-rc.68e0ffa22

package/dist/experimental/SelectPanel2/SelectPanel-608e207e.css

@@ -0,0 +1,2 @@
+.prc-SelectPanel2-Overlay--Q-FI{border:none;color:var(--fgColor-default,#1f2328);padding:0;--max-height:0;--position-top:0;--position-left:0}.prc-SelectPanel2-Overlay--Q-FI:where([open]){display:flex}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=anchored]),.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen]){left:var(--position-left);margin:0;top:var(--position-top)}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=anchored])::backdrop{background-color:transparent}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen])::backdrop{background-color:transparent}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=modal]){bottom:0;left:0;right:0;top:0}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=modal])::backdrop{background-color:var(--overlay-backdrop-bgColor,#c8d1da66)}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=full-screen]){border-radius:unset;height:100%;left:0;margin:0;max-height:100vh;max-width:100vw;top:0;width:100%}.prc-SelectPanel2-Overlay--Q-FI:where([data-variant=bottom-sheet]){border-bottom-left-radius:0;border-bottom-right-radius:0;bottom:0;left:0;margin:0;max-height:calc(100vh - 64px);max-width:100vw;top:auto;width:100%}.prc-SelectPanel2-Form-bZ9HS{width:100%}.prc-SelectPanel2-Container-e5e6-,.prc-SelectPanel2-Form-bZ9HS{display:flex;flex-direction:column}.prc-SelectPanel2-Container-e5e6-{flex-grow:1;flex-shrink:1;justify-content:space-between;overflow:hidden}.prc-SelectPanel2-Container-e5e6- ul{flex-grow:1;overflow-y:auto}.prc-SelectPanel2-Container-e5e6- li:not(:focus,[data-is-active-descendant],[data-active]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-SelectPanel2-HeaderContent-MsaAS{align-items:center;display:flex;justify-content:space-between;margin-bottom:0}.prc-SelectPanel2-HeaderContent-MsaAS:where([data-description]){align-items:flex-start}.prc-SelectPanel2-HeaderContent-MsaAS:where([data-search-input]){margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel2-TitleWrapper-HzPu3{margin-left:var(--base-size-8,.5rem);margin-top:0}.prc-SelectPanel2-TitleWrapper-HzPu3:where([data-description]){margin-top:2px}.prc-SelectPanel2-TitleWrapper-HzPu3:where([data-on-back]){margin-left:var(--base-size-4,.25rem)}.prc-SelectPanel2-TextInput-lHH1n{padding-left:var(--base-size-8,.5rem)!important}.prc-SelectPanel2-TextInput-lHH1n:has(input:placeholder-shown) .TextInput-action{display:none}.prc-SelectPanel2-Checkbox-AYR38{margin-top:0}.prc-SelectPanel2-FlexBox-gWPRg{display:flex}.prc-SelectPanel2-Title-T-h3f{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.prc-SelectPanel2-Description-qTXfi{display:block;font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel2-ClearAction-tQj-f,.prc-SelectPanel2-Description-qTXfi{color:var(--fgColor-muted,#59636e)}.prc-SelectPanel2-ClearAction-tQj-f{background:none}.prc-SelectPanel2-Footer-TibV0{align-items:center;border-top:var(--borderWidth-thin,.0625rem) solid;border-top-color:var(--borderColor-default,#d1d9e0);display:flex;flex-shrink:0;justify-content:space-between;min-height:44px;padding:var(--base-size-16,1rem)}.prc-SelectPanel2-Footer-TibV0:where([data-hide-primary-actions]){padding:var(--base-size-8,.5rem)}.prc-SelectPanel2-FooterContent-UjAOM{flex-grow:0}.prc-SelectPanel2-FooterContent-UjAOM:where([data-hide-primary-actions]){flex-grow:1}.prc-SelectPanel2-FooterActions-T6yQR,.prc-SelectPanel2-SecondaryCheckbox-omkf-{display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel2-SecondaryCheckbox-omkf-{align-items:center}.prc-SelectPanel2-SmallText-c42ay{font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel2-SelectPanelLoading-mtyhD{align-items:center;display:flex;flex-direction:column;gap:var(--stack-gap-normal,1rem);height:100%;justify-content:center;min-height:min(calc(var(--max-height) - 150px),324px)}.prc-SelectPanel2-LoadingText-DB0wN{color:var(--fgColor-muted,#59636e);font-size:var(--text-body-size-medium,.875rem)}.prc-SelectPanel2-MessageFull-nY-qF{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--base-size-4,.25rem);height:100%;justify-content:center;min-height:min(calc(var(--max-height) - 150px),324px);padding-left:var(--base-size-24,1.5rem);padding-right:var(--base-size-24,1.5rem);text-align:center}.prc-SelectPanel2-MessageFull-nY-qF a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel2-Octicon-zt-zU{margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel2-Octicon-zt-zU.prc-SelectPanel2-Error-ZrZQQ{color:var(--fgColor-danger,#d1242f)}.prc-SelectPanel2-Octicon-zt-zU.prc-SelectPanel2-Warning-PDsVF{color:var(--fgColor-attention,#9a6700)}.prc-SelectPanel2-MessageTitle-T7v9d{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500)}.prc-SelectPanel2-MessageContent-UZ9vY{align-items:center;color:var(--fgColor-muted,#59636e);flex-direction:column;font-size:var(--text-body-size-medium,.875rem)}.prc-SelectPanel2-MessageContent-UZ9vY,.prc-SelectPanel2-MessageInline-sErQf{display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel2-MessageInline-sErQf{border-bottom:var(--borderWidth-thin,.0625rem) solid;font-size:var(--text-body-size-small,.75rem);padding:var(--base-size-12,.75rem) var(--base-size-16,1rem)}.prc-SelectPanel2-MessageInline-sErQf a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel2-MessageInline-sErQf:where([data-variant=error]){background-color:var(--bgColor-danger-muted,#ffebe9);border-color:var(--borderColor-danger-muted,#ff818266);color:var(--fgColor-danger,#d1242f)}.prc-SelectPanel2-MessageInline-sErQf:where([data-variant=warning]){background-color:var(--bgColor-attention-muted,#fff8c5);border-color:var(--borderColor-attention-muted,#d4a72c66);color:var(--fgColor-attention,#9a6700)}.prc-SelectPanel2-Header-LKyEJ{border-bottom:var(--borderWidth-thin,.0625rem) solid;border-bottom-color:var(--borderColor-default,#d1d9e0);display:flex;flex-direction:column;padding:var(--base-size-8,.5rem)}
+/*# sourceMappingURL=SelectPanel-608e207e.css.map */

package/dist/experimental/SelectPanel2/{SelectPanel-917fdaef.css.map → SelectPanel-608e207e.css.map}

@@ -1 +1 @@
-{"version":3,"sources":["../../src/experimental/SelectPanel2/SelectPanel.module.css.js"],"names":[],"mappings":"AAAA,gCAGE,WAAY,CADZ,oCAA6B,CAD7B,SAAU,CAKV,cAAe,CACf,gBAAiB,CACjB,iBAoDF,CAlDE,8CACE,YACF,CAEA,iIAKE,yBAA0B,CAC1B,QAAS,CAHT,uBAQF,CAHE,yEACE,4BACF,CAFA,4EACE,4BACF,CAGF,4DAIE,QAAS,CAFT,MAAO,CACP,OAAQ,CAFR,KAIF,CAEA,sEACE,0DACF,CAEA,kEAQE,mBAAoB,CAHpB,WAAY,CAHZ,MAAO,CAKP,QAAS,CADT,gBAAiB,CAFjB,eAAgB,CAHhB,KAAM,CAEN,UAMF,CAEA,mEASE,2BAA4B,CAD5B,4BAA6B,CAN7B,QAAS,CACT,MAAO,CAIP,QAAS,CADT,6BAA8B,CAD9B,eAAgB,CAJhB,QAAS,CAGT,UAMF,CAGF,6BAEE,UAEF,CAEA,+DALE,YAAa,CAEb,qBAwBF,CArBA,kCAKE,WAAY,CADZ,aAAc,CAEd,6BAA8B,CAJ9B,eAmBF,CAbE,qCAEE,WAAY,CADZ,eAEF,CAMA,2FAEE,gCAAiC,CADjC,uBAEF,CAGF,sCAGE,kBAAmB,CAFnB,YAAa,CACb,6BAA8B,CAE9B,eASF,CAPE,gEACE,sBACF,CAEA,iEACE,sCACF,CAGF,qCAEE,oCAA+B,CAD/B,YAWF,CARE,+DAEE,cACF,CAEA,2DACE,qCACF,CAGF,kCACE,+CASF,CAHE,4EACE,YACF,CAGF,iCACE,YACF,CAEA,gCACE,YACF,CAEA,8BACE,8CAAuC,CACvC,gDACF,CAEA,oCACE,aAAc,CACd,4CAEF,CAEA,wEAHE,kCAMF,CAHA,oCAEE,eACF,CAEA,+BAOE,kBAAmB,CAHnB,iDAAyC,CACzC,mDAA4C,CAJ5C,YAAa,CAOb,aAAc,CAFd,6BAA8B,CAJ9B,eAAgB,CAChB,gCAUF,CAHE,kEACE,gCACF,CAGF,sCACE,WAKF,CAHE,yEACE,WACF,CAQF,gFAJE,YAAa,CACb,oCAOF,CAJA,0CAEE,kBAEF,CAEA,kCACE,4CACF,CAEA,2CAQE,kBAAmB,CAPnB,YAAa,CAKb,qBAAsB,CAGtB,gCAA4B,CAP5B,WAAY,CAKZ,sBAAuB,CAFvB,qDAKF,CAEA,oCAEE,kCAA2B,CAD3B,8CAEF,CAEA,oCAWE,kBAAmB,CAVnB,YAAa,CAQb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAXvB,WAAY,CAQZ,sBAAuB,CALvB,qDAAuD,CAEvD,uCAAiC,CADjC,wCAAkC,CAElC,iBAWF,CAJE,sCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,gCACE,sCASF,CAPE,6DACE,mCACF,CAEA,+DACE,sCACF,CAGF,qCACE,8CAAuC,CACvC,8CACF,CAEA,uCAME,kBAAmB,CAHnB,kCAA2B,CAC3B,qBAAsB,CAFtB,8CAKF,CAEA,6EARE,YAAa,CAIb,oCA8BF,CA1BA,sCAOE,oDAA4C,CAD5C,4CAAsC,CADtC,2DAqBF,CAhBE,wCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,kEAEE,oDAA6C,CAC7C,sDAA6C,CAF7C,mCAGF,CAEA,oEAEE,uDAAgD,CAChD,yDAAgD,CAFhD,sCAGF,CAGF,+BAIE,oDAA4C,CAC5C,sDAA+C,CAJ/C,YAAa,CAEb,qBAAsB,CADtB,gCAIF","file":"SelectPanel-917fdaef.css","sourcesContent":[".Overlay {\n  padding: 0;\n  color: var(--fgColor-default);\n  border: none;\n\n  /* CSS variables values are passed in via styles */\n  --max-height: 0;\n  --position-top: 0;\n  --position-left: 0;\n\n  &:where([open]) {\n    display: flex; /* to fit children */\n  }\n\n  &:where([data-variant='anchored']),\n  &:where([data-variant='full-screen']) {\n    /* stylelint-disable-next-line primer/spacing */\n    top: var(--position-top);\n    /* stylelint-disable-next-line primer/spacing */\n    left: var(--position-left);\n    margin: 0;\n\n    &::backdrop {\n      background-color: transparent;\n    }\n  }\n\n  &:where([data-variant='modal']) {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  &:where([data-variant='modal'])::backdrop {\n    background-color: var(--overlay-backdrop-bgColor);\n  }\n\n  &:where([data-variant='full-screen']) {\n    top: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    margin: 0;\n    border-radius: unset;\n  }\n\n  &:where([data-variant='bottom-sheet']) {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: calc(100vh - 64px);\n    margin: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n\n.Form {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.Container {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  flex-shrink: 1;\n  flex-grow: 1;\n  justify-content: space-between;\n\n  ul {\n    overflow-y: auto;\n    flex-grow: 1;\n  }\n\n  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  li:not(:focus, [data-is-active-descendant], [data-active]) {\n    content-visibility: auto;\n    contain-intrinsic-size: auto 32px;\n  }\n}\n\n.HeaderContent {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0;\n\n  &:where([data-description]) {\n    align-items: flex-start;\n  }\n\n  &:where([data-search-input]) {\n    margin-bottom: var(--base-size-8);\n  }\n}\n\n.TitleWrapper {\n  margin-top: 0;\n  margin-left: var(--base-size-8);\n\n  &:where([data-description]) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: 2px;\n  }\n\n  &:where([data-on-back]) {\n    margin-left: var(--base-size-4);\n  }\n}\n\n.TextInput {\n  padding-left: var(--base-size-8) !important;\n\n  /* Hide the trailing action while the input is empty (showing its placeholder). Uses a\n     forward sibling selector on the input instead of `:has()` to avoid Safari's `:has()`\n     invalidation cost; `input` and `.TextInput-action` are siblings inside the wrapper. */\n  /* stylelint-disable-next-line selector-class-pattern */\n  & input:placeholder-shown ~ :global(.TextInput-action) {\n    display: none;\n  }\n}\n\n.Checkbox {\n  margin-top: 0;\n}\n\n.FlexBox {\n  display: flex;\n}\n\n.Title {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.Description {\n  display: block;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.ClearAction {\n  color: var(--fgColor-muted);\n  background: none;\n}\n\n.Footer {\n  display: flex;\n  min-height: 44px;\n  padding: var(--base-size-16);\n  border-top: var(--borderWidth-thin) solid;\n  border-top-color: var(--borderColor-default);\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n\n  &:where([data-hide-primary-actions]) {\n    padding: var(--base-size-8);\n  }\n}\n\n.FooterContent {\n  flex-grow: 0;\n\n  &:where([data-hide-primary-actions]) {\n    flex-grow: 1;\n  }\n}\n\n.FooterActions {\n  display: flex;\n  gap: var(--stack-gap-condensed);\n}\n\n.SecondaryCheckbox {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.SmallText {\n  font-size: var(--text-body-size-small);\n}\n\n.SelectPanelLoading {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--stack-gap-normal);\n}\n\n.LoadingText {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n\n.MessageFull {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  padding-right: var(--base-size-24);\n  padding-left: var(--base-size-24);\n  text-align: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex-grow: 1;\n  gap: var(--base-size-4);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n}\n\n.Octicon {\n  margin-bottom: var(--base-size-8);\n\n  &.Error {\n    color: var(--fgColor-danger);\n  }\n\n  &.Warning {\n    color: var(--fgColor-attention);\n  }\n}\n\n.MessageTitle {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n}\n\n.MessageContent {\n  display: flex;\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex-direction: column;\n  gap: var(--stack-gap-condensed);\n  align-items: center;\n}\n\n.MessageInline {\n  display: flex;\n  padding-top: var(--base-size-12);\n  padding-right: var(--base-size-16);\n  padding-bottom: var(--base-size-12);\n  padding-left: var(--base-size-16);\n  font-size: var(--text-body-size-small);\n  border-bottom: var(--borderWidth-thin) solid;\n  gap: var(--stack-gap-condensed);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n\n  &:where([data-variant='error']) {\n    color: var(--fgColor-danger);\n    background-color: var(--bgColor-danger-muted);\n    border-color: var(--borderColor-danger-muted);\n  }\n\n  &:where([data-variant='warning']) {\n    color: var(--fgColor-attention);\n    background-color: var(--bgColor-attention-muted);\n    border-color: var(--borderColor-attention-muted);\n  }\n}\n\n.Header {\n  display: flex;\n  padding: var(--base-size-8);\n  flex-direction: column;\n  border-bottom: var(--borderWidth-thin) solid;\n  border-bottom-color: var(--borderColor-default);\n}\n"]}
+{"version":3,"sources":["../../src/experimental/SelectPanel2/SelectPanel.module.css.js"],"names":[],"mappings":"AAAA,gCAGE,WAAY,CADZ,oCAA6B,CAD7B,SAAU,CAKV,cAAe,CACf,gBAAiB,CACjB,iBAoDF,CAlDE,8CACE,YACF,CAEA,iIAKE,yBAA0B,CAC1B,QAAS,CAHT,uBAQF,CAHE,yEACE,4BACF,CAFA,4EACE,4BACF,CAGF,4DAIE,QAAS,CAFT,MAAO,CACP,OAAQ,CAFR,KAIF,CAEA,sEACE,0DACF,CAEA,kEAQE,mBAAoB,CAHpB,WAAY,CAHZ,MAAO,CAKP,QAAS,CADT,gBAAiB,CAFjB,eAAgB,CAHhB,KAAM,CAEN,UAMF,CAEA,mEASE,2BAA4B,CAD5B,4BAA6B,CAN7B,QAAS,CACT,MAAO,CAIP,QAAS,CADT,6BAA8B,CAD9B,eAAgB,CAJhB,QAAS,CAGT,UAMF,CAGF,6BAEE,UAEF,CAEA,+DALE,YAAa,CAEb,qBAwBF,CArBA,kCAKE,WAAY,CADZ,aAAc,CAEd,6BAA8B,CAJ9B,eAmBF,CAbE,qCAEE,WAAY,CADZ,eAEF,CAMA,2FAEE,gCAAiC,CADjC,uBAEF,CAGF,sCAGE,kBAAmB,CAFnB,YAAa,CACb,6BAA8B,CAE9B,eASF,CAPE,gEACE,sBACF,CAEA,iEACE,sCACF,CAGF,qCAEE,oCAA+B,CAD/B,YAWF,CARE,+DAEE,cACF,CAEA,2DACE,qCACF,CAGF,kCACE,+CAMF,CAHE,iFACE,YACF,CAGF,iCACE,YACF,CAEA,gCACE,YACF,CAEA,8BACE,8CAAuC,CACvC,gDACF,CAEA,oCACE,aAAc,CACd,4CAEF,CAEA,wEAHE,kCAMF,CAHA,oCAEE,eACF,CAEA,+BAOE,kBAAmB,CAHnB,iDAAyC,CACzC,mDAA4C,CAJ5C,YAAa,CAOb,aAAc,CAFd,6BAA8B,CAJ9B,eAAgB,CAChB,gCAUF,CAHE,kEACE,gCACF,CAGF,sCACE,WAKF,CAHE,yEACE,WACF,CAQF,gFAJE,YAAa,CACb,oCAOF,CAJA,0CAEE,kBAEF,CAEA,kCACE,4CACF,CAEA,2CAQE,kBAAmB,CAPnB,YAAa,CAKb,qBAAsB,CAGtB,gCAA4B,CAP5B,WAAY,CAKZ,sBAAuB,CAFvB,qDAKF,CAEA,oCAEE,kCAA2B,CAD3B,8CAEF,CAEA,oCAWE,kBAAmB,CAVnB,YAAa,CAQb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAXvB,WAAY,CAQZ,sBAAuB,CALvB,qDAAuD,CAEvD,uCAAiC,CADjC,wCAAkC,CAElC,iBAWF,CAJE,sCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,gCACE,sCASF,CAPE,6DACE,mCACF,CAEA,+DACE,sCACF,CAGF,qCACE,8CAAuC,CACvC,8CACF,CAEA,uCAME,kBAAmB,CAHnB,kCAA2B,CAC3B,qBAAsB,CAFtB,8CAKF,CAEA,6EARE,YAAa,CAIb,oCA8BF,CA1BA,sCAOE,oDAA4C,CAD5C,4CAAsC,CADtC,2DAqBF,CAhBE,wCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,kEAEE,oDAA6C,CAC7C,sDAA6C,CAF7C,mCAGF,CAEA,oEAEE,uDAAgD,CAChD,yDAAgD,CAFhD,sCAGF,CAGF,+BAIE,oDAA4C,CAC5C,sDAA+C,CAJ/C,YAAa,CAEb,qBAAsB,CADtB,gCAIF","file":"SelectPanel-608e207e.css","sourcesContent":[".Overlay {\n  padding: 0;\n  color: var(--fgColor-default);\n  border: none;\n\n  /* CSS variables values are passed in via styles */\n  --max-height: 0;\n  --position-top: 0;\n  --position-left: 0;\n\n  &:where([open]) {\n    display: flex; /* to fit children */\n  }\n\n  &:where([data-variant='anchored']),\n  &:where([data-variant='full-screen']) {\n    /* stylelint-disable-next-line primer/spacing */\n    top: var(--position-top);\n    /* stylelint-disable-next-line primer/spacing */\n    left: var(--position-left);\n    margin: 0;\n\n    &::backdrop {\n      background-color: transparent;\n    }\n  }\n\n  &:where([data-variant='modal']) {\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  &:where([data-variant='modal'])::backdrop {\n    background-color: var(--overlay-backdrop-bgColor);\n  }\n\n  &:where([data-variant='full-screen']) {\n    top: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    height: 100%;\n    max-height: 100vh;\n    margin: 0;\n    border-radius: unset;\n  }\n\n  &:where([data-variant='bottom-sheet']) {\n    top: auto;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    max-width: 100vw;\n    max-height: calc(100vh - 64px);\n    margin: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-left-radius: 0;\n  }\n}\n\n.Form {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.Container {\n  display: flex;\n  overflow: hidden;\n  flex-direction: column;\n  flex-shrink: 1;\n  flex-grow: 1;\n  justify-content: space-between;\n\n  ul {\n    overflow-y: auto;\n    flex-grow: 1;\n  }\n\n  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n  /* stylelint-disable-next-line selector-no-qualifying-type */\n  li:not(:focus, [data-is-active-descendant], [data-active]) {\n    content-visibility: auto;\n    contain-intrinsic-size: auto 32px;\n  }\n}\n\n.HeaderContent {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 0;\n\n  &:where([data-description]) {\n    align-items: flex-start;\n  }\n\n  &:where([data-search-input]) {\n    margin-bottom: var(--base-size-8);\n  }\n}\n\n.TitleWrapper {\n  margin-top: 0;\n  margin-left: var(--base-size-8);\n\n  &:where([data-description]) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-top: 2px;\n  }\n\n  &:where([data-on-back]) {\n    margin-left: var(--base-size-4);\n  }\n}\n\n.TextInput {\n  padding-left: var(--base-size-8) !important;\n\n  /* stylelint-disable-next-line selector-class-pattern, selector-no-qualifying-type, selector-pseudo-class-disallowed-list -- :has() scoped to CSS Module, audited (github/github-ui#17224) */\n  &:has(input:placeholder-shown) :global(.TextInput-action) {\n    display: none;\n  }\n}\n\n.Checkbox {\n  margin-top: 0;\n}\n\n.FlexBox {\n  display: flex;\n}\n\n.Title {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.Description {\n  display: block;\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.ClearAction {\n  color: var(--fgColor-muted);\n  background: none;\n}\n\n.Footer {\n  display: flex;\n  min-height: 44px;\n  padding: var(--base-size-16);\n  border-top: var(--borderWidth-thin) solid;\n  border-top-color: var(--borderColor-default);\n  justify-content: space-between;\n  align-items: center;\n  flex-shrink: 0;\n\n  &:where([data-hide-primary-actions]) {\n    padding: var(--base-size-8);\n  }\n}\n\n.FooterContent {\n  flex-grow: 0;\n\n  &:where([data-hide-primary-actions]) {\n    flex-grow: 1;\n  }\n}\n\n.FooterActions {\n  display: flex;\n  gap: var(--stack-gap-condensed);\n}\n\n.SecondaryCheckbox {\n  display: flex;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.SmallText {\n  font-size: var(--text-body-size-small);\n}\n\n.SelectPanelLoading {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--stack-gap-normal);\n}\n\n.LoadingText {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n\n.MessageFull {\n  display: flex;\n  height: 100%;\n\n  /* maxHeight of dialog - (header & footer) */\n  min-height: min(calc(var(--max-height) - 150px), 324px);\n  padding-right: var(--base-size-24);\n  padding-left: var(--base-size-24);\n  text-align: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex-grow: 1;\n  gap: var(--base-size-4);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n}\n\n.Octicon {\n  margin-bottom: var(--base-size-8);\n\n  &.Error {\n    color: var(--fgColor-danger);\n  }\n\n  &.Warning {\n    color: var(--fgColor-attention);\n  }\n}\n\n.MessageTitle {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-medium);\n}\n\n.MessageContent {\n  display: flex;\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex-direction: column;\n  gap: var(--stack-gap-condensed);\n  align-items: center;\n}\n\n.MessageInline {\n  display: flex;\n  padding-top: var(--base-size-12);\n  padding-right: var(--base-size-16);\n  padding-bottom: var(--base-size-12);\n  padding-left: var(--base-size-16);\n  font-size: var(--text-body-size-small);\n  border-bottom: var(--borderWidth-thin) solid;\n  gap: var(--stack-gap-condensed);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n\n  &:where([data-variant='error']) {\n    color: var(--fgColor-danger);\n    background-color: var(--bgColor-danger-muted);\n    border-color: var(--borderColor-danger-muted);\n  }\n\n  &:where([data-variant='warning']) {\n    color: var(--fgColor-attention);\n    background-color: var(--bgColor-attention-muted);\n    border-color: var(--borderColor-attention-muted);\n  }\n}\n\n.Header {\n  display: flex;\n  padding: var(--base-size-8);\n  flex-direction: column;\n  border-bottom: var(--borderWidth-thin) solid;\n  border-bottom-color: var(--borderColor-default);\n}\n"]}

package/dist/experimental/SelectPanel2/SelectPanel.module.css.js

@@ -1,4 +1,4 @@
-import "./SelectPanel-917fdaef.css";
+import "./SelectPanel-608e207e.css";
 //#region src/experimental/SelectPanel2/SelectPanel.module.css.js
 var SelectPanel_module_css_default = {
 	"Overlay": "prc-SelectPanel2-Overlay--Q-FI",

package/dist/experimental/UnderlinePanels/UnderlinePanels.js

@@ -6,6 +6,7 @@ import { isSlot } from "../../utils/is-slot.js";
 import { createComponent } from "../../utils/create-component.js";
 import { UnderlineItem, UnderlineItemList, UnderlineWrapper } from "../../internal/components/UnderlineTabbedInterface.js";
 import UnderlinePanels_module_css_default from "./UnderlinePanels.module.css.js";
+import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React, { Children, cloneElement, createContext, isValidElement, useContext, useMemo, useRef, useState } from "react";
@@ -21,7 +22,7 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 	const wrapperRef = useRef(null);
 	const listRef = useRef(null);
 	const parentId = useId$1(props.id);
-	const [tabs, tabPanels, tabsHaveIcons] = useMemo(() => {
+	const [tabs_0, tabPanels_0, tabsHaveIcons_0] = useMemo(() => {
 		let tabIndex = 0;
 		let panelIndex = 0;
 		const childrenWithProps = Children.map(children, (child) => {
@@ -31,10 +32,10 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 		});
 		const tabs = [];
 		const tabPanels = [];
-		for (const child of Children.toArray(childrenWithProps)) {
-			if (!/*#__PURE__*/ isValidElement(child)) continue;
-			if (child.type === Tab || isSlot(child, Tab)) tabs.push(child);
-			else if (child.type === Panel || isSlot(child, Panel)) tabPanels.push(child);
+		for (const child_0 of Children.toArray(childrenWithProps)) {
+			if (!/*#__PURE__*/ isValidElement(child_0)) continue;
+			if (child_0.type === Tab || isSlot(child_0, Tab)) tabs.push(child_0);
+			else if (child_0.type === Panel || isSlot(child_0, Panel)) tabPanels.push(child_0);
 		}
 		return [
 			tabs,
@@ -52,20 +53,20 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 	}, [iconsVisible]);
 	const listWidthRef = useRef(0);
 	useResizeObserver((entries) => {
-		if (!tabsHaveIcons) return;
+		if (!tabsHaveIcons_0) return;
 		if (!iconsVisibleRef.current) return;
 		listWidthRef.current = entries[0].contentRect.width;
 	}, listRef, []);
 	useResizeObserver((resizeObserverEntries) => {
-		if (!tabsHaveIcons) return;
+		if (!tabsHaveIcons_0) return;
 		const wrapperWidth = resizeObserverEntries[0].contentRect.width;
 		setIconsVisible(wrapperWidth > listWidthRef.current);
 	}, wrapperRef, []);
-	!(tabs.filter((tab) => {
-		const ariaSelected = /*#__PURE__*/ React.isValidElement(tab) && tab.props["aria-selected"];
+	!(tabs_0.filter((tab_0) => {
+		const ariaSelected = /*#__PURE__*/ React.isValidElement(tab_0) && tab_0.props["aria-selected"];
 		return ariaSelected === true || ariaSelected === "true";
 	}).length <= 1) && invariant(false, "Only one tab can be selected at a time.");
-	!(tabs.length === tabPanels.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs.length} tabs and ${tabPanels.length} panels.`);
+	!(tabs_0.length === tabPanels_0.length) && invariant(false, `The number of tabs and panels must be equal. Counted ${tabs_0.length} tabs and ${tabPanels_0.length} panels.`);
 	return /*#__PURE__*/ jsx(UnderlinePanelsContext.Provider, {
 		value: contextValue,
 		children: /*#__PURE__*/ jsxs(TabContainerComponent, { children: [/*#__PURE__*/ jsx(UnderlineWrapper, {
@@ -79,44 +80,100 @@ const UnderlinePanels = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabel
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledBy,
 				role: "tablist",
-				children: tabs
+				children: tabs_0
 			})
-		}), tabPanels] })
+		}), tabPanels_0] })
 	});
 };
 UnderlinePanels.displayName = "UnderlinePanels";
-const TabImpl = ({ "aria-selected": ariaSelected, onSelect, ...props }) => {
+const TabImpl = (t0) => {
+	const $ = c(15);
+	let ariaSelected;
+	let onSelect;
+	let props;
+	if ($[0] !== t0) {
+		({"aria-selected": ariaSelected, onSelect, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaSelected;
+		$[2] = onSelect;
+		$[3] = props;
+	} else {
+		ariaSelected = $[1];
+		onSelect = $[2];
+		props = $[3];
+	}
 	const { loadingCounters } = useContext(UnderlinePanelsContext);
-	const clickHandler = React.useCallback((event) => {
-		if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-	}, [onSelect]);
-	const keyDownHandler = React.useCallback((event) => {
-		if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-	}, [onSelect]);
-	return /*#__PURE__*/ jsx(UnderlineItem, {
-		as: "button",
-		role: "tab",
-		tabIndex: ariaSelected ? 0 : -1,
-		"aria-selected": ariaSelected,
-		type: "button",
-		onClick: clickHandler,
-		onKeyDown: keyDownHandler,
-		loadingCounters,
-		...props
-	});
+	let t1;
+	if ($[4] !== onSelect) {
+		t1 = (event) => {
+			if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
+		};
+		$[4] = onSelect;
+		$[5] = t1;
+	} else t1 = $[5];
+	const clickHandler = t1;
+	let t2;
+	if ($[6] !== onSelect) {
+		t2 = (event_0) => {
+			if ((event_0.key === " " || event_0.key === "Enter") && !event_0.defaultPrevented && typeof onSelect === "function") onSelect(event_0);
+		};
+		$[6] = onSelect;
+		$[7] = t2;
+	} else t2 = $[7];
+	const keyDownHandler = t2;
+	const t3 = ariaSelected ? 0 : -1;
+	let t4;
+	if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== keyDownHandler || $[11] !== loadingCounters || $[12] !== props || $[13] !== t3) {
+		t4 = /*#__PURE__*/ jsx(UnderlineItem, {
+			as: "button",
+			role: "tab",
+			tabIndex: t3,
+			"aria-selected": ariaSelected,
+			type: "button",
+			onClick: clickHandler,
+			onKeyDown: keyDownHandler,
+			loadingCounters,
+			...props
+		});
+		$[8] = ariaSelected;
+		$[9] = clickHandler;
+		$[10] = keyDownHandler;
+		$[11] = loadingCounters;
+		$[12] = props;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	return t4;
 };
-TabImpl.displayName = "TabImpl";
 TabImpl.displayName = "UnderlinePanels.Tab";
 const Tab = /*#__PURE__*/ React.memo(TabImpl);
 Tab.displayName = "UnderlinePanels.Tab";
-const Panel = ({ children, ...rest }) => {
-	return /*#__PURE__*/ jsx("div", {
-		role: "tabpanel",
-		...rest,
-		children
-	});
+const Panel = (t0) => {
+	const $ = c(6);
+	let children;
+	let rest;
+	if ($[0] !== t0) {
+		({children, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = rest;
+	} else {
+		children = $[1];
+		rest = $[2];
+	}
+	let t1;
+	if ($[3] !== children || $[4] !== rest) {
+		t1 = /*#__PURE__*/ jsx("div", {
+			role: "tabpanel",
+			...rest,
+			children
+		});
+		$[3] = children;
+		$[4] = rest;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
 };
-Panel.displayName = "Panel";
 Panel.displayName = "UnderlinePanels.Panel";
 var UnderlinePanels_default = Object.assign(UnderlinePanels, {
 	Panel,

package/dist/hooks/useControllableState.js

@@ -21,9 +21,9 @@ function useControllableState({ name = "custom", defaultValue, value, onChange }
 	if (controlled.current === null) controlled.current = value !== void 0;
 	const setState = React.useCallback((stateOrUpdater) => {
 		var _stableOnChange$curre;
-		const value = typeof stateOrUpdater === "function" ? stateOrUpdater(state) : stateOrUpdater;
-		if (controlled.current === false) internalSetState(value);
-		(_stableOnChange$curre = stableOnChange.current) === null || _stableOnChange$curre === void 0 || _stableOnChange$curre.call(stableOnChange, value);
+		const value_0 = typeof stateOrUpdater === "function" ? stateOrUpdater(state) : stateOrUpdater;
+		if (controlled.current === false) internalSetState(value_0);
+		(_stableOnChange$curre = stableOnChange.current) === null || _stableOnChange$curre === void 0 || _stableOnChange$curre.call(stableOnChange, value_0);
 	}, [state]);
 	React.useEffect(() => {
 		const controlledValue = value !== void 0;

package/dist/hooks/useMedia.js

@@ -1,7 +1,8 @@
+import { canUseDOM } from "../utils/environment.js";
 import { warning } from "../utils/warning.js";
 import { MatchMediaContext } from "./MatchMediaContext.js";
 import { c } from "react-compiler-runtime";
-import { useContext, useSyncExternalStore } from "react";
+import React, { useContext, useEffect } from "react";
 //#region src/hooks/useMedia.ts
 /**
 * `useMedia` will use the given `mediaQueryString` with `matchMedia` to
@@ -17,54 +18,52 @@ import { useContext, useSyncExternalStore } from "react";
 * }
 */
 function useMedia(mediaQueryString, defaultState) {
-	const $ = c(9);
-	const contextValue = useContext(MatchMediaContext)[mediaQueryString];
+	const $ = c(8);
+	const features = useContext(MatchMediaContext);
 	let t0;
-	if ($[0] !== contextValue || $[1] !== mediaQueryString) {
-		t0 = (onStoreChange) => {
-			if (contextValue !== void 0) return _temp;
-			const mediaQueryList = window.matchMedia(mediaQueryString);
-			if (mediaQueryList.addEventListener) {
-				mediaQueryList.addEventListener("change", onStoreChange);
-				return () => {
-					mediaQueryList.removeEventListener("change", onStoreChange);
-				};
-			}
-			mediaQueryList.addListener(onStoreChange);
-			return () => {
-				mediaQueryList.removeListener(onStoreChange);
-			};
+	if ($[0] !== defaultState || $[1] !== features || $[2] !== mediaQueryString) {
+		t0 = () => {
+			if (features[mediaQueryString] !== void 0) return features[mediaQueryString];
+			if (defaultState !== void 0) return defaultState;
+			if (canUseDOM) return window.matchMedia(mediaQueryString).matches;
+			warning(true, "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
+			return false;
 		};
-		$[0] = contextValue;
-		$[1] = mediaQueryString;
-		$[2] = t0;
-	} else t0 = $[2];
-	const subscribe = t0;
+		$[0] = defaultState;
+		$[1] = features;
+		$[2] = mediaQueryString;
+		$[3] = t0;
+	} else t0 = $[3];
+	const [matches, setMatches] = React.useState(t0);
+	if (features[mediaQueryString] !== void 0 && matches !== features[mediaQueryString]) setMatches(features[mediaQueryString]);
 	let t1;
-	if ($[3] !== contextValue || $[4] !== mediaQueryString) {
-		t1 = () => {
-			if (contextValue !== void 0) return contextValue;
-			return window.matchMedia(mediaQueryString).matches;
-		};
-		$[3] = contextValue;
-		$[4] = mediaQueryString;
-		$[5] = t1;
-	} else t1 = $[5];
-	const getSnapshot = t1;
 	let t2;
-	if ($[6] !== contextValue || $[7] !== defaultState) {
-		t2 = () => {
-			if (contextValue !== void 0) return contextValue;
-			if (defaultState !== void 0) return defaultState;
-			warning(typeof window === "undefined", "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
-			return false;
+	if ($[4] !== features || $[5] !== mediaQueryString) {
+		t1 = () => {
+			if (features[mediaQueryString] !== void 0) return;
+			const listener = function listener(event) {
+				setMatches(event.matches);
+			};
+			const mediaQueryList = window.matchMedia(mediaQueryString);
+			if (mediaQueryList.addEventListener) mediaQueryList.addEventListener("change", listener);
+			else mediaQueryList.addListener(listener);
+			setMatches(mediaQueryList.matches);
+			return () => {
+				if (mediaQueryList.addEventListener) mediaQueryList.removeEventListener("change", listener);
+				else mediaQueryList.removeListener(listener);
+			};
 		};
-		$[6] = contextValue;
-		$[7] = defaultState;
-		$[8] = t2;
-	} else t2 = $[8];
-	return useSyncExternalStore(subscribe, getSnapshot, t2);
+		t2 = [features, mediaQueryString];
+		$[4] = features;
+		$[5] = mediaQueryString;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t1 = $[6];
+		t2 = $[7];
+	}
+	useEffect(t1, t2);
+	return matches;
 }
-function _temp() {}
 //#endregion
 export { useMedia };

package/dist/internal/components/ValidationAnimationContainer.js

@@ -1,44 +1,40 @@
 import ValidationAnimationContainer_module_css_default from "./ValidationAnimationContainer.module.css.js";
 import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 //#region src/internal/components/ValidationAnimationContainer.tsx
 const ValidationAnimationContainer = (t0) => {
-	const $ = c(14);
-	let children;
-	let rest;
-	let show;
-	let style;
-	if ($[0] !== t0) {
-		({show, children, style, ...rest} = t0);
-		$[0] = t0;
-		$[1] = children;
-		$[2] = rest;
-		$[3] = show;
-		$[4] = style;
-	} else {
-		children = $[1];
-		rest = $[2];
-		show = $[3];
-		style = $[4];
-	}
-	const [shouldRender, setRender] = useState(Boolean(show));
-	if (show && !shouldRender) setRender(true);
+	const $ = c(10);
+	const { show, children } = t0;
+	const [shouldRender, setRender] = useState(show);
 	let t1;
-	if ($[5] !== show) {
+	let t2;
+	if ($[0] !== show) {
 		t1 = () => {
+			if (show) setRender(true);
+		};
+		t2 = [show];
+		$[0] = show;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] !== show) {
+		t3 = () => {
 			if (!show) setRender(false);
 		};
-		$[5] = show;
-		$[6] = t1;
-	} else t1 = $[6];
-	const onAnimationEnd = t1;
-	let t2;
-	if ($[7] !== children || $[8] !== onAnimationEnd || $[9] !== rest || $[10] !== shouldRender || $[11] !== show || $[12] !== style) {
-		t2 = shouldRender ? /*#__PURE__*/ jsx("div", {
-			...rest,
+		$[3] = show;
+		$[4] = t3;
+	} else t3 = $[4];
+	const onAnimationEnd = t3;
+	let t4;
+	if ($[5] !== children || $[6] !== onAnimationEnd || $[7] !== shouldRender || $[8] !== show) {
+		t4 = shouldRender ? /*#__PURE__*/ jsx("div", {
 			style: {
-				...style,
 				height: show ? "auto" : 0,
 				overflow: "hidden"
 			},
@@ -49,15 +45,13 @@ const ValidationAnimationContainer = (t0) => {
 				children
 			})
 		}) : null;
-		$[7] = children;
-		$[8] = onAnimationEnd;
-		$[9] = rest;
-		$[10] = shouldRender;
-		$[11] = show;
-		$[12] = style;
-		$[13] = t2;
-	} else t2 = $[13];
-	return t2;
+		$[5] = children;
+		$[6] = onAnimationEnd;
+		$[7] = shouldRender;
+		$[8] = show;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
 };
 //#endregion
 export { ValidationAnimationContainer as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.32.0-rc.57a990042",
+  "version": "38.32.0-rc.68e0ffa22",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -47,7 +47,6 @@
     "build:hooks.json": "tsx script/hooks-json/build.ts",
     "build:precompile-color-schemes": "tsx script/precompile-color-schemes.ts",
     "lint:npm": "publint --types",
-    "lint:react-compiler": "node script/lint-react-compiler.ts",
     "storybook": "storybook",
     "type-check": "tsc --noEmit",
     "type-css-modules": "tcm -p src/**/*.module.css"
@@ -109,7 +108,6 @@
     "@figma/code-connect": "1.3.2",
     "@primer/css": "^21.5.1",
     "@primer/doc-gen": "^0.0.1",
-    "@primer/react-compiler-check": "^0.0.0",
     "@rolldown/plugin-babel": "^0.2.3",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-docs": "^10.4.6",

package/dist/ActionList/ActionList-1ff5220c.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/ActionList/ActionList.module.css.js","../../postcss-preset-primer/src/mixins/focusOutline.css","../../postcss-preset-primer/src/mixins/activeIndicatorLine.css"],"names":[],"mappings":"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","file":"ActionList-1ff5220c.css","sourcesContent":["/* stylelint-disable max-nesting-depth, selector-max-specificity */\n\n.ActionList {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n\n  ul {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  &:where([data-variant='inset']) {\n    padding-block: var(--base-size-8);\n  }\n\n  &:where([data-variant='inset'], [data-variant='horizontal-inset']) {\n    /* this is only to match default experience */\n    & .ActionListItem {\n      margin-inline: var(--base-size-8);\n    }\n  }\n\n  &:where([data-variant='horizontal-inset']) {\n    padding-bottom: var(--base-size-8);\n  }\n\n  /* add a small gap between sibling items for readability */\n  &:where([data-item-gap]) {\n    & .ActionListItem + .ActionListItem {\n      margin-block-start: var(--base-size-2);\n    }\n\n    /* also separate a parent item's row from the first item of its expanded sub-nav */\n    & .SubGroup {\n      margin-block-start: var(--base-size-2);\n    }\n  }\n\n  &:where([data-dividers='true']) {\n    /* place dividers on the wrapper that excludes leading visuals/actions */\n    & .ActionListSubContent::before {\n      position: absolute;\n\n      /* use this top size after FF removed */\n\n      /* top: calc(-1 * var(--control-medium-paddingBlock)); */\n      /* stylelint-disable-next-line primer/spacing */\n      top: -7px;\n      display: block;\n      width: 100%;\n      height: 1px;\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background: var(--borderColor-muted);\n    }\n\n    /* if inline description, move pseudo divider to description wrapper */\n    & [data-description-variant='inline'] {\n      &::before {\n        position: absolute;\n\n        /* use this top size after FF removed */\n\n        /* top: calc(-1 * var(--control-medium-paddingBlock)); */\n        /* stylelint-disable-next-line primer/spacing */\n        top: -7px;\n        display: block;\n        width: 100%;\n        height: var(--borderWidth-thin);\n        content: '';\n        /* stylelint-disable-next-line primer/colors */\n        background: var(--borderColor-muted);\n      }\n\n      /* remove the default divider */\n      & .ActionListSubContent::before {\n        content: unset;\n      }\n    }\n\n    /* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n    .ActionListItem:first-of-type .ActionListSubContent::before,\n    .Divider + .ActionListItem .ActionListSubContent::before {\n      visibility: hidden;\n    }\n\n    /* hide if item is first of type with label::before, or is the first item after a sectionDivider */\n    .ActionListItem:first-of-type [data-description-variant='inline']::before,\n    .Divider + .ActionListItem [data-description-variant='inline']::before {\n      visibility: hidden;\n    }\n  }\n\n  /* Make sure that the first visible item isn't a divider */\n  & .Divider:first-child {\n    display: none;\n  }\n\n  /* if a list has a mix of items with and without descriptions, reset the label font-weight to normal */\n  &[data-mixed-descriptions='true'] {\n    & .ItemLabel {\n      font-weight: var(--base-text-weight-normal);\n    }\n  }\n}\n\n/* ActionListItem is a li that handles visual state, while ActionListItemContent controls actual state via button or link */\n\n.ActionListItem {\n  position: relative;\n  list-style: none;\n  background-color: var(--control-transparent-bgColor-rest);\n  border-radius: var(--borderRadius-medium);\n\n  /* apply flex if trailing action exists as an immediate child */\n  &[data-has-trailing-action] {\n    display: flex;\n    flex-wrap: nowrap;\n  }\n\n  /* state */\n\n  @media (forced-colors: active) {\n    :focus,\n    &:focus-visible,\n    /* stylelint-disable-next-line selector-no-qualifying-type */\n    >a.focus-visible,\n    &[data-is-active-descendant] {\n      /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */\n      outline: solid 1px transparent !important;\n    }\n  }\n\n  &:not([data-is-disabled], [data-has-subitem='true']) {\n    @media (hover: hover) {\n      &:hover,\n      &:active {\n        cursor: pointer;\n      }\n\n      &:hover {\n        background-color: var(--control-transparent-bgColor-hover);\n\n        &:not([data-active], :focus-visible) {\n          /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n          outline: solid var(--borderWidth-thin) transparent;\n          outline-offset: calc(-1 * var(--borderWidth-thin));\n          box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n        }\n      }\n    }\n\n    &:active {\n      background-color: var(--control-transparent-bgColor-active);\n\n      &:not([data-active]) {\n        /* Support for \"Windows high contrast mode\" https:sarahmhigley.com/writing/whcm-quick-tips/ */\n        outline: solid var(--borderWidth-thin) transparent;\n        outline-offset: calc(-1 * var(--borderWidth-thin));\n        box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);\n      }\n    }\n\n    &:focus-visible {\n      @mixin focusOutline 0;\n\n      & .ActionListSubContent::before,\n      & + .ActionListItem .ActionListSubContent::before {\n        visibility: hidden;\n      }\n    }\n\n    /* danger */\n    &:where([data-variant='danger']) {\n      & .LeadingAction,\n      .LeadingVisual,\n      .ItemLabel {\n        color: var(--control-danger-fgColor-rest);\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background: var(--control-danger-bgColor-hover);\n\n          & .LeadingAction,\n          .LeadingVisual,\n          .ItemLabel {\n            color: var(--control-danger-fgColor-hover);\n          }\n\n          & [data-kbd-chord] {\n            background-color: var(--bgColor-default);\n            transition: none;\n          }\n        }\n      }\n\n      &:active {\n        background: var(--control-danger-bgColor-active);\n\n        & .LeadingAction,\n        .LeadingVisual,\n        .ItemLabel {\n          color: var(--control-danger-fgColor-hover);\n        }\n\n        & [data-kbd-chord] {\n          background-color: var(--bgColor-default);\n          transition: none;\n        }\n      }\n    }\n\n    /* active state [aria-current] */\n    &:where([data-active]) {\n      background: var(--control-transparent-bgColor-selected);\n\n      /* provides a visual indication of the current item for Windows high-contrast mode */\n      outline: 2px solid transparent;\n\n      & .ItemLabel {\n        font-weight: var(--base-text-weight-semibold);\n        color: var(--control-fgColor-rest);\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          background-color: var(--control-transparent-bgColor-hover);\n        }\n      }\n\n      /* hide dividers if showDividers is true and item is active */\n\n      & .ActionListSubContent::before,\n      & + .ActionListItem .ActionListSubContent::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line  */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n\n    &:where([data-is-active-descendant]) {\n      background: var(--control-transparent-bgColor-selected);\n\n      /* provides a visual indication of the current item for Windows high-contrast mode */\n      outline: 2px solid transparent;\n\n      /* hide dividers if showDividers is true and item is active */\n\n      /* add back in after FF ship */\n\n      /* & .ActionListSubContent::before,\n      & + .ActionListItem .ActionListSubContent::before {\n        visibility: hidden;\n      } */\n\n      /* blue accent line  */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n\n    /* inactive */\n    &:where([data-inactive='true']) {\n      /* ignore tooltip */\n      & * :not([popover], .InactiveWarning) {\n        color: var(--fgColor-muted);\n      }\n\n      @media (hover: hover) {\n        &:hover {\n          cursor: not-allowed;\n          background-color: transparent;\n\n          & * :not([popover], .InactiveWarning) {\n            color: var(--fgColor-muted);\n          }\n        }\n      }\n\n      &:active {\n        background: transparent;\n      }\n    }\n\n    &:where([data-loading='true']),\n    & > [data-loading='true'] {\n      & .ItemLabel,\n      & .Description,\n      & .LeadingVisual,\n      & .TrailingVisual,\n      & .LeadingAction,\n      & .VisualWrap {\n        color: var(--fgColor-muted);\n      }\n    }\n\n    /* hide dividers  */\n    @media (hover: hover) {\n      &:hover {\n        & .ActionListSubContent::before,\n        & + .ActionListItem .ActionListSubContent::before {\n          visibility: hidden;\n        }\n\n        & [data-description-variant='inline']::before,\n        & + .ActionListItem [data-description-variant='inline']::before {\n          visibility: hidden;\n        }\n      }\n    }\n  }\n\n  /* if item has subitem, move hover styles to ActionListContent */\n  &[data-has-subitem='true'] {\n    /* first child */\n    & > .ActionListContent {\n      z-index: 1;\n\n      @media (hover: hover) {\n        &:hover {\n          cursor: pointer;\n          background-color: var(--control-transparent-bgColor-hover);\n        }\n      }\n\n      &:active {\n        background-color: var(--control-transparent-bgColor-active);\n      }\n    }\n\n    & .Spacer {\n      display: block;\n    }\n  }\n\n  /* disabled */\n\n  &[aria-disabled='true'],\n  &[data-is-disabled] {\n    & .ActionListContent * {\n      color: var(--control-fgColor-disabled);\n    }\n\n    & .ActionListContent {\n      @media (hover: hover) {\n        &:hover {\n          cursor: not-allowed;\n          background-color: transparent;\n        }\n      }\n    }\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: transparent;\n      }\n    }\n\n    & .MultiSelectCheckbox {\n      background-color: var(--control-bgColor-disabled);\n      border-color: var(--control-borderColor-disabled);\n    }\n\n    &[aria-checked='true'],\n    &[aria-selected='true'] {\n      & .MultiSelectCheckbox {\n        background-color: var(--control-checked-bgColor-disabled);\n        /* stylelint-disable-next-line primer/colors */\n        border-color: var(--control-checked-bgColor-disabled);\n\n        &::before {\n          /* stylelint-disable-next-line primer/colors */\n          background-color: var(--control-checked-fgColor-disabled);\n        }\n      }\n    }\n  }\n\n  /* When TrailingAction is in loading state, keep labels and descriptions accessible */\n  &[data-trailing-action-loading]:not([data-is-disabled]) {\n    /* Ensure labels and descriptions maintain accessibility contrast */\n    & .ItemLabel {\n      color: var(--fgColor-default);\n    }\n\n    & .Description {\n      color: var(--fgColor-default);\n    }\n  }\n\n  /* Make sure that the first visible item isn't a divider */\n  &[aria-hidden] + .Divider {\n    display: none;\n  }\n\n  /*\n  * checkbox item [aria-checked]\n  * listbox [aria-selected]\n  */\n\n  & .MultiSelectCheckbox {\n    position: relative;\n    display: grid;\n    width: var(--base-size-16);\n    height: var(--base-size-16);\n    margin: 0;\n    cursor: pointer;\n    background-color: var(--bgColor-default);\n    border: var(--borderWidth-thin) solid var(--control-borderColor-emphasis);\n    border-radius: var(--borderRadius-small);\n    transition:\n      background-color,\n      border-color 80ms cubic-bezier(0.33, 1, 0.68, 1);\n    /* checked -> unchecked - add 120ms delay to fully see animation-out */\n\n    place-content: center;\n\n    &::before {\n      width: var(--base-size-16);\n      height: var(--base-size-16);\n      content: '';\n      /* stylelint-disable-next-line primer/colors */\n      background-color: var(--control-checked-fgColor-rest);\n      transition: visibility 0s linear 230ms;\n      clip-path: inset(var(--base-size-16) 0 0 0);\n\n      /* octicon checkmark image */\n      mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');\n      mask-size: 75%;\n      mask-repeat: no-repeat;\n      mask-position: center;\n      animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1);\n      /*  forwards;  slightly snappier animation out */\n    }\n\n    @media (forced-colors: active) {\n      /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */\n\n      /* background-color will be overriden but border-width is a workaround */\n      border-width: var(--borderWidth-thin);\n    }\n  }\n\n  &[aria-checked='true'],\n  &[aria-selected='true'] {\n    & .MultiSelectCheckbox {\n      background-color: var(--control-checked-bgColor-rest);\n      border-color: var(--control-checked-borderColor-rest);\n      transition:\n        background-color,\n        border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms;\n      /* unchecked -> checked */\n\n      &::before {\n        visibility: visible;\n        transition: visibility 0s linear 0s;\n        animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n      }\n\n      @media (forced-colors: active) {\n        /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips\n        background-color will be overriden but border-width is a workaround */\n        /* stylelint-disable-next-line primer/borders */\n        border-width: 8px;\n      }\n    }\n\n    & .SingleSelectCheckmark {\n      visibility: visible;\n    }\n  }\n\n  &[aria-checked='false'],\n  &[aria-selected='false'] {\n    & .MultiSelectCheckbox {\n      &::before {\n        visibility: hidden;\n      }\n    }\n\n    & .SingleSelectCheckmark {\n      visibility: hidden;\n    }\n  }\n}\n\n/* hide by default to support inactive state where role cannot be menuitemradio or menuitemcheckbox */\n.SingleSelectCheckmark {\n  visibility: hidden;\n}\n\n/* button or a tag */\n\n/* [ [spacer] [leadingAction] [leadingVisual] [content] ] */\n.ActionListContent {\n  --subitem-depth: 0px;\n\n  position: relative;\n  display: grid;\n  width: 100%;\n  color: var(--control-fgColor-rest);\n  text-align: left;\n  user-select: none;\n  background-color: transparent;\n  border: none;\n  border-radius: var(--borderRadius-medium);\n  transition: background 33.333ms linear;\n  /* stylelint-disable-next-line primer/spacing */\n  padding-block: var(--control-medium-paddingBlock);\n  /* stylelint-disable-next-line primer/spacing */\n  padding-inline: var(--control-medium-paddingInline-condensed);\n  touch-action: manipulation;\n  -webkit-tap-highlight-color: transparent;\n  grid-template-rows: min-content;\n  grid-template-areas: 'spacer leadingAction leadingVisual content';\n  grid-template-columns: min-content min-content min-content minmax(0, auto);\n  align-items: start;\n\n  /* column-gap persists with empty grid-areas, margin applies only when children exist */\n  & > :not(:last-child, .Spacer) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-medium-gap);\n  }\n\n  &:hover {\n    text-decoration: none;\n    cursor: pointer;\n  }\n\n  /* large */\n\n  &[data-size='large'] {\n    /* stylelint-disable-next-line primer/spacing */\n    padding-block: var(--control-large-paddingBlock);\n  }\n\n  /* collapsible item [aria-expanded] */\n\n  &[aria-expanded='true'] {\n    & .ExpandIcon {\n      transform: scaleY(-1);\n    }\n  }\n\n  &[aria-expanded='false'] {\n    & .ExpandIcon {\n      transform: scaleY(1);\n    }\n\n    & ~ .SubGroup {\n      display: none;\n    }\n\n    /*\n     * Show the active indicator on a collapsed parent when one of its subnav\n     * items is active. NavList sets `active` (→ the parent <li>'s `data-active`)\n     * to exactly `!isOpen && containsCurrentItem`, which is the same condition as\n     * `:has(~ .SubGroup [data-active='true'])`. Keying off the ancestor's\n     * `data-active` avoids Safari's `:has()` invalidation cost, which is\n     * especially high here because the old anchor (`[data-active]`) toggles on\n     * every navigation and combined a general-sibling with a descendant match.\n     * The ancestor prefix keeps the original selector specificity (0,4,0).\n     */\n    .ActionListItem[data-active='true'] & {\n      background: var(--control-transparent-bgColor-selected);\n\n      & .ItemLabel {\n        font-weight: var(--base-text-weight-semibold);\n      }\n\n      & .ActionListSubContent::before,\n      & + .ActionListItem .ActionListSubContent::before {\n        visibility: hidden;\n      }\n\n      /* blue accent line */\n      &::after {\n        @mixin activeIndicatorLine;\n      }\n    }\n  }\n}\n\n/* [ [content] [trailingVisual] [trailingAction] ] */\n.ActionListSubContent {\n  grid-area: content;\n  position: relative;\n  display: grid;\n  width: 100%;\n  grid-template-rows: min-content;\n  grid-template-areas: 'label trailingVisual trailingAction';\n  grid-template-columns: minmax(0, auto) min-content min-content;\n  align-items: start;\n\n  /* column-gap persists with empty grid-areas, margin applies only when children exist */\n  & > :not(:last-child) {\n    /* stylelint-disable-next-line primer/spacing */\n    margin-right: var(--control-medium-gap);\n  }\n}\n\n/* place children on grid */\n\n/* spacer used to create depth for nested lists */\n\n.Spacer {\n  display: none;\n  width: max(0px, var(--subitem-depth) * 8px);\n  grid-area: spacer;\n}\n\n.LeadingAction {\n  grid-area: leadingAction;\n}\n\n.LeadingVisual {\n  grid-area: leadingVisual;\n}\n\n.TrailingVisual {\n  grid-area: trailingVisual;\n  font-size: var(--text-body-size-medium);\n}\n\n.TrailingAction {\n  grid-area: trailingAction;\n\n  /* if child is loading button */\n  & > *[data-loading-wrapper] {\n    height: 100%;\n  }\n}\n\n/* wrapper span\ndefault block */\n.ItemDescriptionWrap {\n  grid-area: label;\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-size-4);\n\n  & .ItemLabel {\n    font-weight: var(--base-text-weight-semibold);\n    /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n    word-break: break-word;\n  }\n\n  /* inline */\n  &:where([data-description-variant='inline']) {\n    position: relative;\n    word-break: normal;\n    flex-direction: row;\n    align-items: baseline;\n    gap: var(--base-size-8);\n\n    & .ItemLabel {\n      word-break: normal;\n    }\n\n    & .Description {\n      /* stylelint-disable-next-line primer/typography */\n      line-height: 16px;\n    }\n  }\n}\n\n/* description */\n.Description {\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n\n  /* line-height: var(--text-caption-lineHeight); */\n\n  /* remove after FF ships */\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 16px;\n  color: var(--fgColor-muted);\n}\n\n/* helper for grid alignment with multi-line content\nspan wrapping svg or text */\n.VisualWrap {\n  display: flex;\n  min-width: max-content;\n  min-height: var(--base-size-20);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 20px;\n  /* temporary until we fix line-height rounding in primitives */\n  color: var(--fgColor-muted);\n  pointer-events: none;\n  fill: var(--fgColor-muted);\n  align-items: center;\n}\n\n/* text */\n.ItemLabel {\n  position: relative;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-normal);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 20px;\n  /* temporary until we fix line-height rounding in primitives */\n  color: var(--fgColor-default);\n  grid-area: label;\n  /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n  word-break: break-word;\n}\n\n.SubGroup {\n  & .ItemLabel {\n    font-size: var(--text-body-size-small);\n  }\n\n  & .ActionListItem {\n    margin-inline: 0;\n  }\n}\n\n/* trailing action icon button */\n\n.TrailingActionButton {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  height: 100%;\n\n  /* Preserve width consistency when loading state is active for text buttons only */\n  &[data-loading='true'][data-has-label='true'] {\n    /* Double the left padding to compensate for missing right padding */\n    padding: 0 0 0 calc(var(--base-size-12) * 2);\n\n    /* Position spinner at the end to align with IconButton */\n    & [data-component='loadingSpinner'] {\n      place-self: end;\n      /* Match the IconButton spinner size */\n      width: var(--control-medium-size, 2rem);\n      height: var(--control-medium-size, 2rem);\n      /* Ensure spinner is properly centered */\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n}\n\n.InactiveButtonWrap {\n  &[data-position='trailing'] {\n    grid-area: trailingVisual;\n  }\n\n  &[data-position='leading'] {\n    grid-area: leadingVisual;\n  }\n}\n\n.Divider {\n  display: block;\n  height: var(--borderWidth-thin);\n  padding: 0;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));\n  margin-block-end: var(--base-size-8);\n  list-style: none;\n  /* stylelint-disable-next-line primer/colors */\n  background: var(--borderColor-muted);\n  border: 0;\n}\n\n.InactiveButtonReset {\n  display: flex;\n  padding: 0;\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  background: none;\n  border: none;\n}\n\n.InactiveWarning {\n  font-size: var(--text-body-size-small);\n\n  /* line-height: var(--text-caption-lineHeight); */\n\n  /* use variable when FF removed */\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 16px;\n  color: var(--fgColor-attention);\n  grid-row: 2/2;\n}\n\n@keyframes checkmarkIn {\n  from {\n    clip-path: inset(var(--base-size-16) 0 0 0);\n  }\n\n  to {\n    clip-path: inset(0 0 0 0);\n  }\n}\n\n@keyframes checkmarkOut {\n  from {\n    clip-path: inset(0 0 0 0);\n  }\n\n  to {\n    clip-path: inset(var(--base-size-16) 0 0 0);\n  }\n}\n","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outline-color, var(--focus-outlineColor)) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}\n","@define-mixin activeIndicatorLine {\n  position: absolute;\n  top: var(--base-size-4);\n  left: calc(-1 * var(--base-size-8));\n  width: var(--base-size-4);\n  height: calc(100% - var(--base-size-8));\n  content: '';\n  /* stylelint-disable-next-line primer/colors */\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\n}\n"]}

package/dist/PageHeader/PageHeader-b12247c8.css

@@ -1,2 +0,0 @@
-.prc-PageHeader-PageHeader-YLwBQ{--grid-row-order-context-area:1;--grid-row-order-leading-action:2;--grid-row-order-breadcrumbs:2;--grid-row-order-title-area:2;--grid-row-order-trailing-action:2;--grid-row-order-actions:2;--grid-row-order-description:3;--grid-row-order-navigation:4;--title-area-region-order-leading-visual:0;--title-area-region-order-title:1;--title-area-region-order-trailing-visual:2;--context-area-region-order-parent-link:0;--context-area-region-order-context-bar:1;--context-area-region-order-context-area-actions:2;display:grid;grid-template-areas:"context-area context-area context-area context-area context-area" "leading-action breadcrumbs title-area trailing-action actions" "description description description description description" "navigation navigation navigation navigation navigation";grid-template-columns:auto auto auto auto 1fr}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant=large]{font-size:var(--custom-font-size,var(--text-title-size-large,2rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant=medium]{font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant=medium],.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant=subtitle]{font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant=subtitle]{font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400))}@media (max-width:calc(48rem - 0.02px)){.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-narrow=large]{font-size:var(--custom-font-size,var(--text-title-size-large,2rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-narrow=medium]{font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-narrow=medium],.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-narrow=subtitle]{font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-narrow=subtitle]{font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400))}}@media (min-width:48rem){.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-regular=large]{font-size:var(--custom-font-size,var(--text-title-size-large,2rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-regular=medium]{font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-regular=medium],.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-regular=subtitle]{font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-regular=subtitle]{font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400))}}@media (min-width:87.5rem){.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-wide=large]{font-size:var(--custom-font-size,var(--text-title-size-large,2rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-large,1.5))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-wide=medium]{font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-wide=medium],.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-wide=subtitle]{font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6));--title-line-height:var(--custom-line-height,var(--text-title-lineHeight-medium,1.6))}.prc-PageHeader-PageHeader-YLwBQ[data-title-size-variant-wide=subtitle]{font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400))}}.prc-PageHeader-PageHeader-YLwBQ[data-has-border=true]:not([data-has-nav]),.prc-PageHeader-PageHeader-YLwBQ[data-has-border=true][data-nav-hidden-all]{border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);padding-block-end:var(--base-size-8,.5rem)}@media (max-width:calc(48rem - 0.02px)){.prc-PageHeader-PageHeader-YLwBQ[data-has-border=true][data-nav-hidden-narrow]{border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);padding-block-end:var(--base-size-8,.5rem)}}@media (min-width:48rem){.prc-PageHeader-PageHeader-YLwBQ[data-has-border=true][data-nav-hidden-regular]{border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);padding-block-end:var(--base-size-8,.5rem)}}@media (min-width:87.5rem){.prc-PageHeader-PageHeader-YLwBQ[data-has-border=true][data-nav-hidden-wide]{border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,#d1d9e0);padding-block-end:var(--base-size-8,.5rem)}}.prc-PageHeader-PageHeader-YLwBQ [data-component=PH_Actions],.prc-PageHeader-PageHeader-YLwBQ [data-component=PH_LeadingAction],.prc-PageHeader-PageHeader-YLwBQ [data-component=PH_LeadingVisual],.prc-PageHeader-PageHeader-YLwBQ [data-component=PH_TrailingAction],.prc-PageHeader-PageHeader-YLwBQ [data-component=PH_TrailingVisual]{height:calc(var(--title-line-height)*1em)}.prc-PageHeader-PageHeader-YLwBQ [data-hidden-all]{display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageHeader-PageHeader-YLwBQ [data-hidden-narrow]{display:none}}@media (min-width:48rem){.prc-PageHeader-PageHeader-YLwBQ [data-hidden-regular]{display:none}}@media (min-width:87.5rem){.prc-PageHeader-PageHeader-YLwBQ [data-hidden-wide]{display:none}}.prc-PageHeader-ContextArea-ueeWv{flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:context-area;grid-row:var(--grid-row-order-context-area);line-height:var(--text-body-lineHeight-medium,1.4285);padding-bottom:var(--base-size-8,.5rem)}.prc-PageHeader-ContextArea-ueeWv,.prc-PageHeader-ParentLink-AJ9VB{align-items:center;display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-PageHeader-ParentLink-AJ9VB{order:var(--context-area-region-order-parent-link)}.prc-PageHeader-ContextBar-8AoJ5{display:flex;order:var(--context-area-region-order-context-bar)}.prc-PageHeader-ContextAreaActions-DLQP5{align-items:center;flex-grow:1;justify-content:flex-end;order:var(--context-area-region-order-context-area-actions)}.prc-PageHeader-ContextAreaActions-DLQP5,.prc-PageHeader-TitleArea-2n2J0{display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem)}.prc-PageHeader-TitleArea-2n2J0{align-items:flex-start;grid-area:title-area;grid-row:var(--grid-row-order-title-area)}.prc-PageHeader-LeadingAction-4NMe9{grid-area:leading-action;grid-row:var(--grid-row-order-leading-action)}.prc-PageHeader-Breadcrumbs-FGVQU,.prc-PageHeader-LeadingAction-4NMe9{align-items:center;display:flex;padding-right:var(--base-size-8,.5rem)}.prc-PageHeader-Breadcrumbs-FGVQU{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);grid-area:breadcrumbs;grid-row:var(--grid-row-order-breadcrumbs);line-height:var(--text-body-lineHeight-medium,1.4285)}.prc-PageHeader-LeadingVisual-njece{align-items:center;display:flex;order:var(--title-area-region-order-leading-visual)}.prc-PageHeader-Title-p0Mgh{display:block;font-size:inherit;font-weight:inherit;order:var(--title-area-region-order-title)}.prc-PageHeader-Title-p0Mgh:where([data-hidden=true]){display:none}.prc-PageHeader-TrailingVisual-Zb96K{align-items:center;display:flex;order:var(--title-area-region-order-trailing-visual)}.prc-PageHeader-TrailingAction-xqlZJ{grid-area:trailing-action;grid-row:var(--grid-row-order-trailing-action)}.prc-PageHeader-Actions-wawWm,.prc-PageHeader-TrailingAction-xqlZJ{align-items:center;display:flex;padding-left:var(--base-size-8,.5rem)}.prc-PageHeader-Actions-wawWm{flex-direction:row;gap:var(--stack-gap-condensed,.5rem);grid-area:actions;grid-row:var(--grid-row-order-actions);justify-content:flex-end;min-width:max-content}.prc-PageHeader-Description-w-ejP{align-items:center;display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem);grid-area:description;grid-row:var(--grid-row-order-description)}.prc-PageHeader-Description-w-ejP,.prc-PageHeader-Navigation--uLav{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-normal,400);line-height:var(--text-body-lineHeight-medium,1.4285);padding-top:var(--base-size-8,.5rem)}.prc-PageHeader-Navigation--uLav{display:block;grid-area:navigation;grid-row:var(--grid-row-order-navigation)}
-/*# sourceMappingURL=PageHeader-b12247c8.css.map */

package/dist/PageHeader/PageHeader-b12247c8.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/PageHeader/PageHeader.module.css.js"],"names":[],"mappings":"AAAA,iCAEE,+BAAgC,CAChC,iCAAkC,CAClC,8BAA+B,CAC/B,6BAA8B,CAC9B,kCAAmC,CACnC,0BAA2B,CAC3B,8BAA+B,CAC/B,6BAA8B,CAG9B,0CAA2C,CAC3C,iCAAkC,CAClC,2CAA4C,CAG5C,yCAA0C,CAC1C,yCAA0C,CAC1C,kDAAmD,CAEnD,YAAa,CAIb,6QAI0D,CAL1D,6CA+KF,CA/JE,gEACE,mEAAsE,CACtE,wEAA2E,CAC3E,4EAA+E,CAE/E,oFACF,CAEA,iEAEE,0EAIF,CAEA,oIAPE,uEAA0E,CAE1E,6EAAgF,CAEhF,qFASF,CANA,mEAEE,wEAIF,CAGA,wCACE,uEACE,mEAAsE,CACtE,wEAA2E,CAC3E,4EAA+E,CAE/E,oFACF,CAEA,wEAEE,0EAIF,CAEA,kJAPE,uEAA0E,CAE1E,6EAAgF,CAEhF,qFASF,CANA,0EAEE,wEAIF,CACF,CAEA,yBACE,wEACE,mEAAsE,CACtE,wEAA2E,CAC3E,4EAA+E,CAE/E,oFACF,CAEA,yEAEE,0EAIF,CAEA,oJAPE,uEAA0E,CAE1E,6EAAgF,CAEhF,qFASF,CANA,2EAEE,wEAIF,CACF,CAEA,2BACE,qEACE,mEAAsE,CACtE,wEAA2E,CAC3E,4EAA+E,CAE/E,oFACF,CAEA,sEAEE,0EAIF,CAEA,8IAPE,uEAA0E,CAE1E,6EAAgF,CAEhF,qFASF,CANA,wEAEE,wEAIF,CACF,CAEA,uJAEE,0FAA0E,CAC1E,0CACF,CAEA,wCACE,+EACE,0FAA0E,CAC1E,0CACF,CACF,CAEA,yBACE,gFACE,0FAA0E,CAC1E,0CACF,CACF,CAEA,2BACE,6EACE,0FAA0E,CAC1E,0CACF,CACF,CAEA,2UAKE,yCACF,CAEA,mDACE,YACF,CAGE,wCADF,sDAEI,YAEJ,CADE,CAIA,yBADF,uDAEI,YAEJ,CADE,CAIA,2BADF,oDAEI,YAEJ,CADE,CAIJ,kCAME,kBAAmB,CAHnB,8CAAiD,CACjD,8CAA2C,CAI3C,sBAAuB,CADvB,2CAA4C,CAF5C,qDAAuD,CAHvD,uCASF,CAEA,mEAJE,kBAAmB,CARnB,YAAa,CASb,oCAQF,CALA,iCAGE,kDAEF,CAEA,iCACE,YAAa,CACb,kDACF,CAEA,yCAIE,kBAAmB,CAEnB,WAAY,CACZ,wBAAyB,CAJzB,2DAKF,CAEA,yEATE,YAAa,CACb,kBAAmB,CAGnB,oCAYF,CAPA,gCAME,sBAAuB,CAJvB,oBAAqB,CADrB,yCAMF,CAEA,oCAIE,wBAAyB,CADzB,6CAGF,CAEA,sEAHE,kBAAmB,CAJnB,YAAa,CACb,sCAeF,CATA,kCAGE,8CAAiD,CACjD,8CAA2C,CAG3C,qBAAsB,CADtB,0CAA2C,CAD3C,qDAIF,CAEA,oCAIE,kBAAmB,CAFnB,YAAa,CACb,mDAEF,CAEA,4BAEE,aAAc,CAEd,iBAAkB,CAClB,mBAAoB,CAFpB,0CAGF,CAEA,sDACE,YACF,CAEA,qCAIE,kBAAmB,CAFnB,YAAa,CACb,oDAEF,CAEA,qCAIE,yBAA0B,CAD1B,8CAGF,CAEA,mEAHE,kBAAmB,CAJnB,YAAa,CACb,qCAgBF,CAVA,8BAIE,kBAAmB,CAGnB,oCAA+B,CAD/B,iBAAkB,CADlB,sCAAuC,CAGvC,wBAAyB,CANzB,qBAQF,CAEA,kCASE,kBAAmB,CARnB,YAAa,CAKb,kBAAmB,CAInB,oCAA+B,CAF/B,qBAAsB,CADtB,0CAIF,CAEA,mEAVE,8CAAiD,CACjD,8CAA2C,CAC3C,qDAAuD,CAHvD,oCAmBF,CARA,iCACE,aAAc,CAMd,oBAAqB,CADrB,yCAEF","file":"PageHeader-b12247c8.css","sourcesContent":[".PageHeader {\n  /* Grid Row Order */\n  --grid-row-order-context-area: 1;\n  --grid-row-order-leading-action: 2;\n  --grid-row-order-breadcrumbs: 2;\n  --grid-row-order-title-area: 2;\n  --grid-row-order-trailing-action: 2;\n  --grid-row-order-actions: 2;\n  --grid-row-order-description: 3;\n  --grid-row-order-navigation: 4;\n\n  /* Title Area Region Order */\n  --title-area-region-order-leading-visual: 0;\n  --title-area-region-order-title: 1;\n  --title-area-region-order-trailing-visual: 2;\n\n  /* Context Area Region Order */\n  --context-area-region-order-parent-link: 0;\n  --context-area-region-order-context-bar: 1;\n  --context-area-region-order-context-area-actions: 2;\n\n  display: grid;\n\n  /* We have max 5 columns. */\n  grid-template-columns: auto auto auto auto 1fr;\n  grid-template-areas:\n    'context-area context-area context-area context-area context-area'\n    'leading-action breadcrumbs title-area trailing-action actions'\n    'description description description description description'\n    'navigation navigation navigation navigation navigation';\n\n  /*\n    line-height is calculated with calc(height/font-size) and the below numbers are from @primer/primitives.\n    --custom-font-size, --custom-line-height, --custom-font-weight are custom properties that can be used to override the below values.\n    We don't want these values to be overridden but still want to allow consumers to override them if needed.\n\n    Size + nav-visibility data attributes are hoisted to the root by the React\n    component to keep selectors as plain attribute matches (cheap) rather than\n    relying on `:has()` (per-descendant invalidation).\n  */\n  &[data-title-size-variant='large'] {\n    font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n    font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n    line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); /* calc(48/32) */\n\n    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n  }\n\n  &[data-title-size-variant='medium'] {\n    font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n    font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n    line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */\n\n    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n  }\n\n  &[data-title-size-variant='subtitle'] {\n    font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n    font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n    line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */\n\n    --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n  }\n\n  /* Responsive size variants */\n  @media (--viewportRange-narrow) {\n    &[data-title-size-variant-narrow='large'] {\n      font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n    }\n\n    &[data-title-size-variant-narrow='medium'] {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n\n    &[data-title-size-variant-narrow='subtitle'] {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-title-size-variant-regular='large'] {\n      font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n    }\n\n    &[data-title-size-variant-regular='medium'] {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n\n    &[data-title-size-variant-regular='subtitle'] {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-title-size-variant-wide='large'] {\n      font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));\n    }\n\n    &[data-title-size-variant-wide='medium'] {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n\n    &[data-title-size-variant-wide='subtitle'] {\n      font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));\n      font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));\n      line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n\n      --title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));\n    }\n  }\n\n  &[data-has-border='true'][data-nav-hidden-all],\n  &[data-has-border='true']:not([data-has-nav]) {\n    border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n    padding-block-end: var(--base-size-8);\n  }\n\n  @media (--viewportRange-narrow) {\n    &[data-has-border='true'][data-nav-hidden-narrow] {\n      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n      padding-block-end: var(--base-size-8);\n    }\n  }\n\n  @media (--viewportRange-regular) {\n    &[data-has-border='true'][data-nav-hidden-regular] {\n      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n      padding-block-end: var(--base-size-8);\n    }\n  }\n\n  @media (--viewportRange-wide) {\n    &[data-has-border='true'][data-nav-hidden-wide] {\n      border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n      padding-block-end: var(--base-size-8);\n    }\n  }\n\n  & [data-component='PH_LeadingAction'],\n  & [data-component='PH_TrailingAction'],\n  & [data-component='PH_Actions'],\n  & [data-component='PH_LeadingVisual'],\n  & [data-component='PH_TrailingVisual'] {\n    height: calc(var(--title-line-height) * 1em);\n  }\n\n  & [data-hidden-all] {\n    display: none;\n  }\n\n  & [data-hidden-narrow] {\n    @media (--viewportRange-narrow) {\n      display: none;\n    }\n  }\n\n  & [data-hidden-regular] {\n    @media (--viewportRange-regular) {\n      display: none;\n    }\n  }\n\n  & [data-hidden-wide] {\n    @media (--viewportRange-wide) {\n      display: none;\n    }\n  }\n}\n\n.ContextArea {\n  display: flex;\n  padding-bottom: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  flex-direction: row;\n  grid-row: var(--grid-row-order-context-area);\n  grid-area: context-area;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.ParentLink {\n  display: flex;\n  align-items: center;\n  order: var(--context-area-region-order-parent-link);\n  gap: var(--stack-gap-condensed);\n}\n\n.ContextBar {\n  display: flex;\n  order: var(--context-area-region-order-context-bar);\n}\n\n.ContextAreaActions {\n  display: flex;\n  flex-direction: row;\n  order: var(--context-area-region-order-context-area-actions);\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n  flex-grow: 1;\n  justify-content: flex-end;\n}\n\n.TitleArea {\n  grid-row: var(--grid-row-order-title-area);\n  grid-area: title-area;\n  display: flex;\n  gap: var(--stack-gap-condensed);\n  flex-direction: row;\n  align-items: flex-start;\n}\n\n.LeadingAction {\n  display: flex;\n  padding-right: var(--base-size-8);\n  grid-row: var(--grid-row-order-leading-action);\n  grid-area: leading-action;\n  align-items: center;\n}\n\n.Breadcrumbs {\n  display: flex;\n  padding-right: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  grid-row: var(--grid-row-order-breadcrumbs);\n  grid-area: breadcrumbs;\n  align-items: center;\n}\n\n.LeadingVisual {\n  /* using flex and order to display the leading visual in the title area. */\n  display: flex;\n  order: var(--title-area-region-order-leading-visual);\n  align-items: center;\n}\n\n.Title {\n  /* using flex and order to display the title in the title area. */\n  display: block;\n  order: var(--title-area-region-order-title);\n  font-size: inherit;\n  font-weight: inherit;\n}\n\n.Title:where([data-hidden='true']) {\n  display: none;\n}\n\n.TrailingVisual {\n  /* using flex and order to display the trailing visual in the title area. */\n  display: flex;\n  order: var(--title-area-region-order-trailing-visual);\n  align-items: center;\n}\n\n.TrailingAction {\n  display: flex;\n  padding-left: var(--base-size-8);\n  grid-row: var(--grid-row-order-trailing-action);\n  grid-area: trailing-action;\n  align-items: center;\n}\n\n.Actions {\n  display: flex;\n  min-width: max-content;\n  padding-left: var(--base-size-8);\n  flex-direction: row;\n  grid-row: var(--grid-row-order-actions);\n  grid-area: actions;\n  gap: var(--stack-gap-condensed);\n  justify-content: flex-end;\n  align-items: center;\n}\n\n.Description {\n  display: flex;\n  padding-top: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  flex-direction: row;\n  grid-row: var(--grid-row-order-description);\n  grid-area: description;\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.Navigation {\n  display: block;\n  padding-top: var(--base-size-8);\n  font-size: var(--text-body-size-medium, 0.875rem);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-body-lineHeight-medium, 1.4285);\n  grid-row: var(--grid-row-order-navigation);\n  grid-area: navigation;\n}\n"]}