@primer/react 38.32.0-rc.07044f1e1 → 38.32.0-rc.35f722e2e

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +0 -6
  2. package/dist/PageHeader/PageHeader-5e969745.css +2 -0
  3. package/dist/PageHeader/PageHeader-5e969745.css.map +1 -0
  4. package/dist/PageHeader/PageHeader.js +23 -64
  5. package/dist/PageHeader/PageHeader.module.css.js +1 -1
  6. package/dist/ToggleSwitch/ToggleSwitch.js +186 -167
  7. package/dist/hooks/useMedia.js +43 -44
  8. package/package.json +1 -1
  9. package/dist/PageHeader/PageHeader-b12247c8.css +0 -2
  10. package/dist/PageHeader/PageHeader-b12247c8.css.map +0 -1
package/CHANGELOG.md CHANGED
@@ -17,16 +17,10 @@
17
17
 
18
18
  ### Patch Changes
19
19
 
20
- - [#7901](https://github.com/primer/react/pull/7901) [`8288ed9`](https://github.com/primer/react/commit/8288ed9d88668f93cf3b1eb70ee61edac6217367) Thanks [@mattcosta7](https://github.com/mattcosta7)! - PageHeader: improve rendering performance by removing expensive `:has()` selectors. No visual or API changes.
21
-
22
20
  - [#8115](https://github.com/primer/react/pull/8115) [`07c530a`](https://github.com/primer/react/commit/07c530a1686ef16b68b2f2fe692b7a3327bdc02b) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Improve rendering performance in Safari by removing expensive `:has()` selectors from ActionList/NavList, Breadcrumbs, SelectPanel, and SegmentedControl. No visual or API changes.
23
21
 
24
- - [#8024](https://github.com/primer/react/pull/8024) [`18e3b7d`](https://github.com/primer/react/commit/18e3b7d7a7b54275b99d2562eb279722f5cdd60e) Thanks [@mattcosta7](https://github.com/mattcosta7)! - ToggleSwitch: Fire `onChange` from the user interaction instead of an effect, so it no longer fires on mount or when a controlled `checked` value changes externally.
25
-
26
22
  - [#8035](https://github.com/primer/react/pull/8035) [`723f4d6`](https://github.com/primer/react/commit/723f4d6db12710e2b94f56b945a937158fcbb127) Thanks [@mattcosta7](https://github.com/mattcosta7)! - UnderlineNav, ActionBar: Detect item overflow with a single shared IntersectionObserver per component instead of one observer per item, reducing observer churn during resize. No public API changes.
27
23
 
28
- - [#8001](https://github.com/primer/react/pull/8001) [`4edc824`](https://github.com/primer/react/commit/4edc8242da557eedd41d71b242674b33254029ec) Thanks [@mattcosta7](https://github.com/mattcosta7)! - `useMedia` now reads the live `matchMedia` value on the first client render instead of after an effect, removing a redundant render pass. `defaultState` is only used for the SSR/hydration snapshot (no public API changes).
29
-
30
24
  ## 38.31.0
31
25
 
32
26
  ### Minor Changes
package/dist/PageHeader/PageHeader-5e969745.css ADDED
@@ -0,0 +1,2 @@
1
+ .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:has([data-component=TitleArea][data-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:has([data-component=TitleArea][data-size-variant=medium]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600));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:has([data-component=TitleArea][data-size-variant=subtitle]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));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))}@media (max-width:calc(48rem - 0.02px)){.prc-PageHeader-PageHeader-YLwBQ:has([data-component=TitleArea][data-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:has([data-component=TitleArea][data-size-variant-narrow=medium]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600));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:has([data-component=TitleArea][data-size-variant-narrow=subtitle]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));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))}}@media (min-width:48rem){.prc-PageHeader-PageHeader-YLwBQ:has([data-component=TitleArea][data-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:has([data-component=TitleArea][data-size-variant-regular=medium]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600));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:has([data-component=TitleArea][data-size-variant-regular=subtitle]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));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))}}@media (min-width:87.5rem){.prc-PageHeader-PageHeader-YLwBQ:has([data-component=TitleArea][data-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:has([data-component=TitleArea][data-size-variant-wide=medium]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-semibold,600));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:has([data-component=TitleArea][data-size-variant-wide=subtitle]){font-size:var(--custom-font-size,var(--text-title-size-medium,1.25rem));font-weight:var(--custom-font-weight,var(--base-text-weight-normal,400));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-has-border=true]:has([data-component=PH_Navigation][data-hidden-all]),.prc-PageHeader-PageHeader-YLwBQ[data-has-border=true]:not(:has([data-component=PH_Navigation])){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]:has([data-component=PH_Navigation][data-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]:has([data-component=PH_Navigation][data-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]:has([data-component=PH_Navigation][data-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)}
2
+ /*# sourceMappingURL=PageHeader-5e969745.css.map */
package/dist/PageHeader/PageHeader-5e969745.css.map ADDED
@@ -0,0 +1 @@
1
+ {"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,6CA6KF,CAhKE,0FACE,mEAAsE,CACtE,wEAA2E,CAC3E,4EAA+E,CAE/E,oFACF,CAEA,2FACE,uEAA0E,CAC1E,0EAA6E,CAC7E,6EAAgF,CAEhF,qFACF,CAEA,6FACE,uEAA0E,CAC1E,wEAA2E,CAC3E,6EAAgF,CAEhF,qFACF,CAGA,wCACE,iGACE,mEAAsE,CACtE,wEAA2E,CAC3E,4EAA+E,CAE/E,oFACF,CAEA,kGACE,uEAA0E,CAC1E,0EAA6E,CAC7E,6EAAgF,CAEhF,qFACF,CAEA,oGACE,uEAA0E,CAC1E,wEAA2E,CAC3E,6EAAgF,CAEhF,qFACF,CACF,CAEA,yBACE,kGACE,mEAAsE,CACtE,wEAA2E,CAC3E,4EAA+E,CAE/E,oFACF,CAEA,mGACE,uEAA0E,CAC1E,0EAA6E,CAC7E,6EAAgF,CAEhF,qFACF,CAEA,qGACE,uEAA0E,CAC1E,wEAA2E,CAC3E,6EAAgF,CAEhF,qFACF,CACF,CAEA,2BACE,+FACE,mEAAsE,CACtE,wEAA2E,CAC3E,4EAA+E,CAE/E,oFACF,CAEA,gGACE,uEAA0E,CAC1E,0EAA6E,CAC7E,6EAAgF,CAEhF,qFACF,CAEA,kGACE,uEAA0E,CAC1E,wEAA2E,CAC3E,6EAAgF,CAEhF,qFACF,CACF,CAEA,6MAEE,0FAA0E,CAC1E,0CACF,CAEA,wCACE,+GACE,0FAA0E,CAC1E,0CACF,CACF,CAEA,yBACE,gHACE,0FAA0E,CAC1E,0CACF,CACF,CAEA,2BACE,6GACE,0FAA0E,CAC1E,0CACF,CACF,CAGA,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-5e969745.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 /* stylelint-disable selector-pseudo-class-disallowed-list -- :has() scoped to CSS Module, audited (github/github-ui#17224) */\n &:has([data-component='TitleArea'][data-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 &:has([data-component='TitleArea'][data-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 &:has([data-component='TitleArea'][data-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 &:has([data-component='TitleArea'][data-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 &:has([data-component='TitleArea'][data-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 &:has([data-component='TitleArea'][data-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 &:has([data-component='TitleArea'][data-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 &:has([data-component='TitleArea'][data-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 &:has([data-component='TitleArea'][data-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 &:has([data-component='TitleArea'][data-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 &:has([data-component='TitleArea'][data-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 &:has([data-component='TitleArea'][data-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']:has([data-component='PH_Navigation'][data-hidden-all]),\n &[data-has-border='true']:not(:has([data-component='PH_Navigation'])) {\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']:has([data-component='PH_Navigation'][data-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']:has([data-component='PH_Navigation'][data-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']:has([data-component='PH_Navigation'][data-hidden-wide]) {\n border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n padding-block-end: var(--base-size-8);\n }\n }\n /* stylelint-enable selector-pseudo-class-disallowed-list */\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"]}
package/dist/PageHeader/PageHeader.js CHANGED
@@ -24,33 +24,10 @@ const hiddenOnNarrow = {
24
24
  wide: false
25
25
  };
26
26
  const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
27
- const $ = c(17);
27
+ const $ = c(14);
28
28
  const { children, className, as: t1, "aria-label": ariaLabel, role, hasBorder } = t0;
29
29
  const BaseComponent = t1 === void 0 ? "div" : t1;
30
30
  const rootRef = useProvidedRefOrCreate(forwardedRef);
31
- const hoistChildState = (nodes) => {
32
- const result = { hasNavigation: false };
33
- for (const child of React.Children.toArray(nodes)) {
34
- if (!/*#__PURE__*/ React.isValidElement(child)) continue;
35
- if (child.type === React.Fragment) {
36
- const nested = hoistChildState(child.props.children);
37
- if (nested.titleVariant !== void 0) result.titleVariant = nested.titleVariant;
38
- if (nested.hasNavigation) {
39
- result.hasNavigation = true;
40
- result.navigationHidden = nested.navigationHidden;
41
- }
42
- } else if (child.type === TitleArea) {
43
- var _variant;
44
- result.titleVariant = (_variant = child.props.variant) !== null && _variant !== void 0 ? _variant : "medium";
45
- } else if (child.type === Navigation) {
46
- var _hidden;
47
- result.hasNavigation = true;
48
- result.navigationHidden = (_hidden = child.props.hidden) !== null && _hidden !== void 0 ? _hidden : false;
49
- }
50
- }
51
- return result;
52
- };
53
- const { titleVariant, hasNavigation, navigationHidden } = hoistChildState(children);
54
31
  const isInteractive = _temp;
55
32
  let t2;
56
33
  let t3;
@@ -61,11 +38,11 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
61
38
  if (!rootRef.current || rootRef.current.children.length <= 0) return;
62
39
  const titleArea = Array.from(rootRef.current.children).find(_temp2);
63
40
  if (!titleArea) return;
64
- for (const child_1 of React.Children.toArray(children)) {
65
- if (/*#__PURE__*/ React.isValidElement(child_1) && (child_1.type === ContextArea || isSlot(child_1, ContextArea))) hasContextArea = true;
66
- if (/*#__PURE__*/ React.isValidElement(child_1) && (child_1.type === LeadingAction || isSlot(child_1, LeadingAction))) hasLeadingAction = true;
41
+ for (const child_0 of React.Children.toArray(children)) {
42
+ if (/*#__PURE__*/ React.isValidElement(child_0) && (child_0.type === ContextArea || isSlot(child_0, ContextArea))) hasContextArea = true;
43
+ if (/*#__PURE__*/ React.isValidElement(child_0) && (child_0.type === LeadingAction || isSlot(child_0, LeadingAction))) hasLeadingAction = true;
67
44
  }
68
- warning(Array.from(titleArea.childNodes).some((child_2) => child_2 instanceof HTMLElement && isInteractive(child_2) || Array.from(child_2.childNodes).some((child_3) => child_3 instanceof HTMLElement && isInteractive(child_3))) && (hasContextArea || hasLeadingAction), "When PageHeader.ContextArea or PageHeader.LeadingAction is present, we recommended not to include any interactive items in the PageHeader.TitleArea to make sure the focus order is logical.");
45
+ warning(Array.from(titleArea.childNodes).some((child_1) => child_1 instanceof HTMLElement && isInteractive(child_1) || Array.from(child_1.childNodes).some((child_2) => child_2 instanceof HTMLElement && isInteractive(child_2))) && (hasContextArea || hasLeadingAction), "When PageHeader.ContextArea or PageHeader.LeadingAction is present, we recommended not to include any interactive items in the PageHeader.TitleArea to make sure the focus order is logical.");
69
46
  };
70
47
  t3 = [children, rootRef];
71
48
  $[0] = children;
@@ -83,21 +60,14 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
83
60
  $[4] = className;
84
61
  $[5] = t4;
85
62
  } else t4 = $[5];
86
- const t5 = "PageHeader";
87
- const t6 = hasBorder ? "true" : void 0;
88
- const t7 = hasNavigation ? "" : void 0;
89
- const t8 = getResponsiveAttributes("title-size-variant", titleVariant);
90
- const t9 = getNavHiddenDataAttributes(navigationHidden);
91
- let t10;
92
- if ($[6] !== BaseComponent || $[7] !== ariaLabel || $[8] !== children || $[9] !== role || $[10] !== rootRef || $[11] !== t4 || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9) {
93
- t10 = /*#__PURE__*/ jsx(BaseComponent, {
63
+ const t5 = hasBorder ? "true" : void 0;
64
+ let t6;
65
+ if ($[6] !== BaseComponent || $[7] !== ariaLabel || $[8] !== children || $[9] !== role || $[10] !== rootRef || $[11] !== t4 || $[12] !== t5) {
66
+ t6 = /*#__PURE__*/ jsx(BaseComponent, {
94
67
  ref: rootRef,
95
68
  className: t4,
96
- "data-component": t5,
97
- "data-has-border": t6,
98
- "data-has-nav": t7,
99
- ...t8,
100
- ...t9,
69
+ "data-component": "PageHeader",
70
+ "data-has-border": t5,
101
71
  "aria-label": ariaLabel,
102
72
  role,
103
73
  children
@@ -108,13 +78,10 @@ const Root = /*#__PURE__*/ React.forwardRef((t0, forwardedRef) => {
108
78
  $[9] = role;
109
79
  $[10] = rootRef;
110
80
  $[11] = t4;
111
- $[12] = t6;
112
- $[13] = t7;
113
- $[14] = t8;
114
- $[15] = t9;
115
- $[16] = t10;
116
- } else t10 = $[16];
117
- return t10;
81
+ $[12] = t5;
82
+ $[13] = t6;
83
+ } else t6 = $[13];
84
+ return t6;
118
85
  });
119
86
  const ContextArea = (t0) => {
120
87
  const $ = c(8);
@@ -628,17 +595,13 @@ const Navigation = (t0) => {
628
595
  } else t7 = $[10];
629
596
  return t7;
630
597
  };
631
- function getHiddenDataAttributes(isHidden, prefix = "hidden") {
632
- const all = `data-${prefix}-all`;
633
- const narrow = `data-${prefix}-narrow`;
634
- const regular = `data-${prefix}-regular`;
635
- const wide = `data-${prefix}-wide`;
598
+ function getHiddenDataAttributes(isHidden) {
636
599
  if (isResponsiveValue(isHidden)) {
637
600
  const responsiveValue = isHidden;
638
- const narrowMediaQuery = "narrow" in responsiveValue ? { [narrow]: responsiveValue.narrow || void 0 } : {};
639
- const regularMediaQuery = "regular" in responsiveValue ? { [regular]: responsiveValue.regular || void 0 } : {};
640
- const wideMediaQuery = "wide" in responsiveValue ? { [wide]: responsiveValue.wide || void 0 } : {};
641
- if (areAllValuesTheSame(responsiveValue)) return { [all]: responsiveValue.narrow || void 0 };
601
+ const narrowMediaQuery = "narrow" in responsiveValue ? { "data-hidden-narrow": responsiveValue.narrow || void 0 } : {};
602
+ const regularMediaQuery = "regular" in responsiveValue ? { "data-hidden-regular": responsiveValue.regular || void 0 } : {};
603
+ const wideMediaQuery = "wide" in responsiveValue ? { "data-hidden-wide": responsiveValue.wide || void 0 } : {};
604
+ if (areAllValuesTheSame(responsiveValue)) return { "data-hidden-all": responsiveValue.narrow || void 0 };
642
605
  else if (haveRegularAndWideSameValue(responsiveValue)) return {
643
606
  ...narrowMediaQuery,
644
607
  ...regularMediaQuery
@@ -648,11 +611,7 @@ function getHiddenDataAttributes(isHidden, prefix = "hidden") {
648
611
  ...regularMediaQuery,
649
612
  ...wideMediaQuery
650
613
  };
651
- } else return { [all]: isHidden || void 0 };
652
- }
653
- function getNavHiddenDataAttributes(isHidden) {
654
- if (isHidden === void 0) return void 0;
655
- return getHiddenDataAttributes(isHidden, "nav-hidden");
614
+ } else return { "data-hidden-all": isHidden || void 0 };
656
615
  }
657
616
  const PageHeader = Object.assign(Root, {
658
617
  ContextArea,
@@ -674,8 +633,8 @@ PageHeader.displayName = "PageHeader";
674
633
  function _temp(element) {
675
634
  return ["a", "button"].some((selector) => element.matches(selector)) || element.hasAttribute("role") && element.getAttribute("role") === "button" || element.hasAttribute("link") && element.getAttribute("role") === "link" || element.hasAttribute("tabindex");
676
635
  }
677
- function _temp2(child_0) {
678
- return child_0 instanceof HTMLElement && child_0.getAttribute("data-component") === "TitleArea";
636
+ function _temp2(child) {
637
+ return child instanceof HTMLElement && child.getAttribute("data-component") === "TitleArea";
679
638
  }
680
639
  //#endregion
681
640
  export { PageHeader };
package/dist/PageHeader/PageHeader.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import "./PageHeader-b12247c8.css";
1
+ import "./PageHeader-5e969745.css";
2
2
  //#region src/PageHeader/PageHeader.module.css.js
3
3
  var PageHeader_module_css_default = {
4
4
  "PageHeader": "prc-PageHeader-PageHeader-YLwBQ",
package/dist/ToggleSwitch/ToggleSwitch.js CHANGED
@@ -72,7 +72,7 @@ const LineIcon = (t0) => {
72
72
  };
73
73
  const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props, ref) {
74
74
  var _buttonLabelOn, _buttonLabelOff;
75
- const $ = c(90);
75
+ const $ = c(95);
76
76
  let ariaDescribedby;
77
77
  let ariaLabelledby;
78
78
  let buttonLabelOff;
@@ -141,74 +141,93 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
141
141
  const loadingLabelId = useId$1("loadingLabel");
142
142
  const { safeSetTimeout } = useSafeTimeout();
143
143
  let t5;
144
- if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onChange || $[23] !== onClick || $[24] !== setIsOn) {
144
+ if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onClick || $[23] !== setIsOn) {
145
145
  t5 = (e) => {
146
146
  if (disabled || loading) return;
147
- if (isControlled) {
148
- var _onChange;
149
- (_onChange = onChange) === null || _onChange === void 0 || _onChange(!isOn);
150
- } else setIsOn(!isOn);
147
+ if (!isControlled) setIsOn(!isOn);
151
148
  onClick && onClick(e);
152
149
  };
153
150
  $[18] = disabled;
154
151
  $[19] = isControlled;
155
152
  $[20] = isOn;
156
153
  $[21] = loading;
157
- $[22] = onChange;
158
- $[23] = onClick;
159
- $[24] = setIsOn;
160
- $[25] = t5;
161
- } else t5 = $[25];
154
+ $[22] = onClick;
155
+ $[23] = setIsOn;
156
+ $[24] = t5;
157
+ } else t5 = $[24];
162
158
  const handleToggleClick = t5;
163
159
  let t6;
164
160
  let t7;
165
- if ($[26] !== isLoadingLabelVisible || $[27] !== loading || $[28] !== loadingLabelDelay || $[29] !== safeSetTimeout) {
161
+ if ($[25] !== checked || $[26] !== disabled || $[27] !== isControlled || $[28] !== onChange) {
166
162
  t6 = () => {
163
+ if (onChange && isControlled && !disabled) onChange(Boolean(checked));
164
+ };
165
+ t7 = [
166
+ onChange,
167
+ checked,
168
+ isControlled,
169
+ disabled
170
+ ];
171
+ $[25] = checked;
172
+ $[26] = disabled;
173
+ $[27] = isControlled;
174
+ $[28] = onChange;
175
+ $[29] = t6;
176
+ $[30] = t7;
177
+ } else {
178
+ t6 = $[29];
179
+ t7 = $[30];
180
+ }
181
+ useEffect(t6, t7);
182
+ let t8;
183
+ let t9;
184
+ if ($[31] !== isLoadingLabelVisible || $[32] !== loading || $[33] !== loadingLabelDelay || $[34] !== safeSetTimeout) {
185
+ t8 = () => {
167
186
  if (!loading && isLoadingLabelVisible) setIsLoadingLabelVisible(false);
168
187
  else if (loading && !isLoadingLabelVisible) safeSetTimeout(() => {
169
188
  setIsLoadingLabelVisible(true);
170
189
  }, loadingLabelDelay);
171
190
  };
172
- t7 = [
191
+ t9 = [
173
192
  loading,
174
193
  isLoadingLabelVisible,
175
194
  loadingLabelDelay,
176
195
  safeSetTimeout
177
196
  ];
178
- $[26] = isLoadingLabelVisible;
179
- $[27] = loading;
180
- $[28] = loadingLabelDelay;
181
- $[29] = safeSetTimeout;
182
- $[30] = t6;
183
- $[31] = t7;
197
+ $[31] = isLoadingLabelVisible;
198
+ $[32] = loading;
199
+ $[33] = loadingLabelDelay;
200
+ $[34] = safeSetTimeout;
201
+ $[35] = t8;
202
+ $[36] = t9;
184
203
  } else {
185
- t6 = $[30];
186
- t7 = $[31];
204
+ t8 = $[35];
205
+ t9 = $[36];
187
206
  }
188
- useEffect(t6, t7);
207
+ useEffect(t8, t9);
189
208
  let switchButtonDescribedBy = loadingLabelId;
190
209
  if (ariaDescribedby) switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`;
191
- let t8;
192
- if ($[32] !== className) {
193
- t8 = clsx(ToggleSwitch_module_css_default.ToggleSwitch, className);
194
- $[32] = className;
195
- $[33] = t8;
196
- } else t8 = $[33];
197
- const t9 = isLoadingLabelVisible && loadingLabel;
198
210
  let t10;
199
- if ($[34] !== loadingLabelId || $[35] !== t9) {
200
- t10 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
211
+ if ($[37] !== className) {
212
+ t10 = clsx(ToggleSwitch_module_css_default.ToggleSwitch, className);
213
+ $[37] = className;
214
+ $[38] = t10;
215
+ } else t10 = $[38];
216
+ const t11 = isLoadingLabelVisible && loadingLabel;
217
+ let t12;
218
+ if ($[39] !== loadingLabelId || $[40] !== t11) {
219
+ t12 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
201
220
  announceOnShow: true,
202
221
  id: loadingLabelId,
203
- children: t9
222
+ children: t11
204
223
  }) });
205
- $[34] = loadingLabelId;
206
- $[35] = t9;
207
- $[36] = t10;
208
- } else t10 = $[36];
209
- let t11;
210
- if ($[37] !== loading || $[38] !== statusLabelPosition) {
211
- t11 = loading ? /*#__PURE__*/ jsx("div", {
224
+ $[39] = loadingLabelId;
225
+ $[40] = t11;
226
+ $[41] = t12;
227
+ } else t12 = $[41];
228
+ let t13;
229
+ if ($[42] !== loading || $[43] !== statusLabelPosition) {
230
+ t13 = loading ? /*#__PURE__*/ jsx("div", {
212
231
  className: ToggleSwitch_module_css_default.LoadingSpinner,
213
232
  "data-status-label-position": statusLabelPosition,
214
233
  children: /*#__PURE__*/ jsx(Spinner, {
@@ -216,172 +235,172 @@ const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props,
216
235
  srText: null
217
236
  })
218
237
  }) : null;
219
- $[37] = loading;
220
- $[38] = statusLabelPosition;
221
- $[39] = t11;
222
- } else t11 = $[39];
223
- const t12 = !acceptsInteraction;
224
- const t13 = !isOn;
225
- const t14 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
226
- let t15;
227
- if ($[40] !== t13 || $[41] !== t14) {
228
- t15 = /*#__PURE__*/ jsx("span", {
229
- className: ToggleSwitch_module_css_default.StatusTextItem,
230
- "data-hidden": t13,
231
- children: t14
232
- });
233
- $[40] = t13;
234
- $[41] = t14;
235
- $[42] = t15;
236
- } else t15 = $[42];
237
- const t16 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
238
+ $[42] = loading;
239
+ $[43] = statusLabelPosition;
240
+ $[44] = t13;
241
+ } else t13 = $[44];
242
+ const t14 = !acceptsInteraction;
243
+ const t15 = !isOn;
244
+ const t16 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
238
245
  let t17;
239
- if ($[43] !== isOn || $[44] !== t16) {
246
+ if ($[45] !== t15 || $[46] !== t16) {
240
247
  t17 = /*#__PURE__*/ jsx("span", {
241
248
  className: ToggleSwitch_module_css_default.StatusTextItem,
242
- "data-hidden": isOn,
249
+ "data-hidden": t15,
243
250
  children: t16
244
251
  });
245
- $[43] = isOn;
246
- $[44] = t16;
247
- $[45] = t17;
248
- } else t17 = $[45];
249
- let t18;
250
- if ($[46] !== handleToggleClick || $[47] !== size || $[48] !== t12 || $[49] !== t15 || $[50] !== t17) {
251
- t18 = /*#__PURE__*/ jsxs("span", {
252
+ $[45] = t15;
253
+ $[46] = t16;
254
+ $[47] = t17;
255
+ } else t17 = $[47];
256
+ const t18 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
257
+ let t19;
258
+ if ($[48] !== isOn || $[49] !== t18) {
259
+ t19 = /*#__PURE__*/ jsx("span", {
260
+ className: ToggleSwitch_module_css_default.StatusTextItem,
261
+ "data-hidden": isOn,
262
+ children: t18
263
+ });
264
+ $[48] = isOn;
265
+ $[49] = t18;
266
+ $[50] = t19;
267
+ } else t19 = $[50];
268
+ let t20;
269
+ if ($[51] !== handleToggleClick || $[52] !== size || $[53] !== t14 || $[54] !== t17 || $[55] !== t19) {
270
+ t20 = /*#__PURE__*/ jsxs("span", {
252
271
  className: ToggleSwitch_module_css_default.StatusText,
253
272
  "data-size": size,
254
- "data-disabled": t12,
273
+ "data-disabled": t14,
255
274
  "aria-hidden": "true",
256
275
  onClick: handleToggleClick,
257
- children: [t15, t17]
276
+ children: [t17, t19]
258
277
  });
259
- $[46] = handleToggleClick;
260
- $[47] = size;
261
- $[48] = t12;
262
- $[49] = t15;
263
- $[50] = t17;
264
- $[51] = t18;
265
- } else t18 = $[51];
266
- const t19 = !acceptsInteraction;
267
- const t20 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : void 0;
268
- const t21 = !acceptsInteraction;
269
- const t22 = !acceptsInteraction;
270
- let t23;
271
- if ($[52] !== size) {
272
- t23 = /*#__PURE__*/ jsx(LineIcon, { size });
278
+ $[51] = handleToggleClick;
273
279
  $[52] = size;
274
- $[53] = t23;
275
- } else t23 = $[53];
276
- let t24;
277
- if ($[54] !== isOn || $[55] !== t22 || $[56] !== t23) {
278
- t24 = /*#__PURE__*/ jsx("div", {
279
- className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.LineIconContainer}`,
280
- "data-checked": isOn,
281
- "data-disabled": t22,
282
- children: t23
283
- });
284
- $[54] = isOn;
285
- $[55] = t22;
286
- $[56] = t23;
287
- $[57] = t24;
288
- } else t24 = $[57];
289
- const t25 = !acceptsInteraction;
280
+ $[53] = t14;
281
+ $[54] = t17;
282
+ $[55] = t19;
283
+ $[56] = t20;
284
+ } else t20 = $[56];
285
+ const t21 = !acceptsInteraction;
286
+ const t22 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : void 0;
287
+ const t23 = !acceptsInteraction;
288
+ const t24 = !acceptsInteraction;
289
+ let t25;
290
+ if ($[57] !== size) {
291
+ t25 = /*#__PURE__*/ jsx(LineIcon, { size });
292
+ $[57] = size;
293
+ $[58] = t25;
294
+ } else t25 = $[58];
290
295
  let t26;
291
- if ($[58] !== size) {
292
- t26 = /*#__PURE__*/ jsx(CircleIcon, { size });
293
- $[58] = size;
294
- $[59] = t26;
295
- } else t26 = $[59];
296
- let t27;
297
- if ($[60] !== isOn || $[61] !== t25 || $[62] !== t26) {
298
- t27 = /*#__PURE__*/ jsx("div", {
299
- className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.CircleIconContainer}`,
296
+ if ($[59] !== isOn || $[60] !== t24 || $[61] !== t25) {
297
+ t26 = /*#__PURE__*/ jsx("div", {
298
+ className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.LineIconContainer}`,
300
299
  "data-checked": isOn,
301
- "data-disabled": t25,
302
- children: t26
300
+ "data-disabled": t24,
301
+ children: t25
303
302
  });
304
- $[60] = isOn;
303
+ $[59] = isOn;
304
+ $[60] = t24;
305
305
  $[61] = t25;
306
306
  $[62] = t26;
307
- $[63] = t27;
308
- } else t27 = $[63];
307
+ } else t26 = $[62];
308
+ const t27 = !acceptsInteraction;
309
309
  let t28;
310
- if ($[64] !== t24 || $[65] !== t27) {
311
- t28 = /*#__PURE__*/ jsxs("div", {
310
+ if ($[63] !== size) {
311
+ t28 = /*#__PURE__*/ jsx(CircleIcon, { size });
312
+ $[63] = size;
313
+ $[64] = t28;
314
+ } else t28 = $[64];
315
+ let t29;
316
+ if ($[65] !== isOn || $[66] !== t27 || $[67] !== t28) {
317
+ t29 = /*#__PURE__*/ jsx("div", {
318
+ className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.CircleIconContainer}`,
319
+ "data-checked": isOn,
320
+ "data-disabled": t27,
321
+ children: t28
322
+ });
323
+ $[65] = isOn;
324
+ $[66] = t27;
325
+ $[67] = t28;
326
+ $[68] = t29;
327
+ } else t29 = $[68];
328
+ let t30;
329
+ if ($[69] !== t26 || $[70] !== t29) {
330
+ t30 = /*#__PURE__*/ jsxs("div", {
312
331
  className: ToggleSwitch_module_css_default.SwitchButtonContent,
313
332
  "aria-hidden": "true",
314
- children: [t24, t27]
333
+ children: [t26, t29]
315
334
  });
316
- $[64] = t24;
317
- $[65] = t27;
318
- $[66] = t28;
319
- } else t28 = $[66];
320
- const t29 = !acceptsInteraction;
321
- let t30;
322
- if ($[67] !== isOn || $[68] !== t29) {
323
- t30 = /*#__PURE__*/ jsx("div", {
335
+ $[69] = t26;
336
+ $[70] = t29;
337
+ $[71] = t30;
338
+ } else t30 = $[71];
339
+ const t31 = !acceptsInteraction;
340
+ let t32;
341
+ if ($[72] !== isOn || $[73] !== t31) {
342
+ t32 = /*#__PURE__*/ jsx("div", {
324
343
  className: ToggleSwitch_module_css_default.ToggleKnob,
325
344
  "data-checked": isOn,
326
- "data-disabled": t29,
345
+ "data-disabled": t31,
327
346
  "aria-hidden": "true"
328
347
  });
329
- $[67] = isOn;
330
- $[68] = t29;
331
- $[69] = t30;
332
- } else t30 = $[69];
333
- let t31;
334
- if ($[70] !== ariaLabelledby || $[71] !== buttonType || $[72] !== handleToggleClick || $[73] !== isOn || $[74] !== ref || $[75] !== size || $[76] !== t19 || $[77] !== t20 || $[78] !== t21 || $[79] !== t28 || $[80] !== t30) {
335
- t31 = /*#__PURE__*/ jsxs("button", {
348
+ $[72] = isOn;
349
+ $[73] = t31;
350
+ $[74] = t32;
351
+ } else t32 = $[74];
352
+ let t33;
353
+ if ($[75] !== ariaLabelledby || $[76] !== buttonType || $[77] !== handleToggleClick || $[78] !== isOn || $[79] !== ref || $[80] !== size || $[81] !== t21 || $[82] !== t22 || $[83] !== t23 || $[84] !== t30 || $[85] !== t32) {
354
+ t33 = /*#__PURE__*/ jsxs("button", {
336
355
  ref,
337
356
  type: buttonType,
338
357
  className: ToggleSwitch_module_css_default.SwitchButton,
339
358
  "data-size": size,
340
359
  "data-checked": isOn,
341
- "data-disabled": t19,
360
+ "data-disabled": t21,
342
361
  onClick: handleToggleClick,
343
362
  "aria-labelledby": ariaLabelledby,
344
- "aria-describedby": t20,
363
+ "aria-describedby": t22,
345
364
  "aria-pressed": isOn,
346
- "aria-disabled": t21,
347
- children: [t28, t30]
365
+ "aria-disabled": t23,
366
+ children: [t30, t32]
348
367
  });
349
- $[70] = ariaLabelledby;
350
- $[71] = buttonType;
351
- $[72] = handleToggleClick;
352
- $[73] = isOn;
353
- $[74] = ref;
354
- $[75] = size;
355
- $[76] = t19;
356
- $[77] = t20;
357
- $[78] = t21;
358
- $[79] = t28;
359
- $[80] = t30;
360
- $[81] = t31;
361
- } else t31 = $[81];
362
- let t32;
363
- if ($[82] !== rest || $[83] !== statusLabelPosition || $[84] !== t10 || $[85] !== t11 || $[86] !== t18 || $[87] !== t31 || $[88] !== t8) {
364
- t32 = /*#__PURE__*/ jsxs("div", {
365
- className: t8,
368
+ $[75] = ariaLabelledby;
369
+ $[76] = buttonType;
370
+ $[77] = handleToggleClick;
371
+ $[78] = isOn;
372
+ $[79] = ref;
373
+ $[80] = size;
374
+ $[81] = t21;
375
+ $[82] = t22;
376
+ $[83] = t23;
377
+ $[84] = t30;
378
+ $[85] = t32;
379
+ $[86] = t33;
380
+ } else t33 = $[86];
381
+ let t34;
382
+ if ($[87] !== rest || $[88] !== statusLabelPosition || $[89] !== t10 || $[90] !== t12 || $[91] !== t13 || $[92] !== t20 || $[93] !== t33) {
383
+ t34 = /*#__PURE__*/ jsxs("div", {
384
+ className: t10,
366
385
  "data-status-label-position": statusLabelPosition,
367
386
  ...rest,
368
387
  children: [
369
- t10,
370
- t11,
371
- t18,
372
- t31
388
+ t12,
389
+ t13,
390
+ t20,
391
+ t33
373
392
  ]
374
393
  });
375
- $[82] = rest;
376
- $[83] = statusLabelPosition;
377
- $[84] = t10;
378
- $[85] = t11;
379
- $[86] = t18;
380
- $[87] = t31;
381
- $[88] = t8;
382
- $[89] = t32;
383
- } else t32 = $[89];
384
- return t32;
394
+ $[87] = rest;
395
+ $[88] = statusLabelPosition;
396
+ $[89] = t10;
397
+ $[90] = t12;
398
+ $[91] = t13;
399
+ $[92] = t20;
400
+ $[93] = t33;
401
+ $[94] = t34;
402
+ } else t34 = $[94];
403
+ return t34;
385
404
  });
386
405
  ToggleSwitch.displayName = "ToggleSwitch";
387
406
  //#endregion
package/dist/hooks/useMedia.js CHANGED
@@ -1,7 +1,8 @@
1
+ import { canUseDOM } from "../utils/environment.js";
1
2
  import { warning } from "../utils/warning.js";
2
3
  import { MatchMediaContext } from "./MatchMediaContext.js";
3
4
  import { c } from "react-compiler-runtime";
4
- import { useContext, useSyncExternalStore } from "react";
5
+ import React, { useContext, useEffect } from "react";
5
6
  //#region src/hooks/useMedia.ts
6
7
  /**
7
8
  * `useMedia` will use the given `mediaQueryString` with `matchMedia` to
@@ -17,54 +18,52 @@ import { useContext, useSyncExternalStore } from "react";
17
18
  * }
18
19
  */
19
20
  function useMedia(mediaQueryString, defaultState) {
20
- const $ = c(9);
21
- const contextValue = useContext(MatchMediaContext)[mediaQueryString];
21
+ const $ = c(8);
22
+ const features = useContext(MatchMediaContext);
22
23
  let t0;
23
- if ($[0] !== contextValue || $[1] !== mediaQueryString) {
24
- t0 = (onStoreChange) => {
25
- if (contextValue !== void 0) return _temp;
26
- const mediaQueryList = window.matchMedia(mediaQueryString);
27
- if (mediaQueryList.addEventListener) {
28
- mediaQueryList.addEventListener("change", onStoreChange);
29
- return () => {
30
- mediaQueryList.removeEventListener("change", onStoreChange);
31
- };
32
- }
33
- mediaQueryList.addListener(onStoreChange);
34
- return () => {
35
- mediaQueryList.removeListener(onStoreChange);
36
- };
24
+ if ($[0] !== defaultState || $[1] !== features || $[2] !== mediaQueryString) {
25
+ t0 = () => {
26
+ if (features[mediaQueryString] !== void 0) return features[mediaQueryString];
27
+ if (defaultState !== void 0) return defaultState;
28
+ if (canUseDOM) return window.matchMedia(mediaQueryString).matches;
29
+ warning(true, "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
30
+ return false;
37
31
  };
38
- $[0] = contextValue;
39
- $[1] = mediaQueryString;
40
- $[2] = t0;
41
- } else t0 = $[2];
42
- const subscribe = t0;
32
+ $[0] = defaultState;
33
+ $[1] = features;
34
+ $[2] = mediaQueryString;
35
+ $[3] = t0;
36
+ } else t0 = $[3];
37
+ const [matches, setMatches] = React.useState(t0);
38
+ if (features[mediaQueryString] !== void 0 && matches !== features[mediaQueryString]) setMatches(features[mediaQueryString]);
43
39
  let t1;
44
- if ($[3] !== contextValue || $[4] !== mediaQueryString) {
45
- t1 = () => {
46
- if (contextValue !== void 0) return contextValue;
47
- return window.matchMedia(mediaQueryString).matches;
48
- };
49
- $[3] = contextValue;
50
- $[4] = mediaQueryString;
51
- $[5] = t1;
52
- } else t1 = $[5];
53
- const getSnapshot = t1;
54
40
  let t2;
55
- if ($[6] !== contextValue || $[7] !== defaultState) {
56
- t2 = () => {
57
- if (contextValue !== void 0) return contextValue;
58
- if (defaultState !== void 0) return defaultState;
59
- warning(typeof window === "undefined", "`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches.");
60
- return false;
41
+ if ($[4] !== features || $[5] !== mediaQueryString) {
42
+ t1 = () => {
43
+ if (features[mediaQueryString] !== void 0) return;
44
+ const listener = function listener(event) {
45
+ setMatches(event.matches);
46
+ };
47
+ const mediaQueryList = window.matchMedia(mediaQueryString);
48
+ if (mediaQueryList.addEventListener) mediaQueryList.addEventListener("change", listener);
49
+ else mediaQueryList.addListener(listener);
50
+ setMatches(mediaQueryList.matches);
51
+ return () => {
52
+ if (mediaQueryList.addEventListener) mediaQueryList.removeEventListener("change", listener);
53
+ else mediaQueryList.removeListener(listener);
54
+ };
61
55
  };
62
- $[6] = contextValue;
63
- $[7] = defaultState;
64
- $[8] = t2;
65
- } else t2 = $[8];
66
- return useSyncExternalStore(subscribe, getSnapshot, t2);
56
+ t2 = [features, mediaQueryString];
57
+ $[4] = features;
58
+ $[5] = mediaQueryString;
59
+ $[6] = t1;
60
+ $[7] = t2;
61
+ } else {
62
+ t1 = $[6];
63
+ t2 = $[7];
64
+ }
65
+ useEffect(t1, t2);
66
+ return matches;
67
67
  }
68
- function _temp() {}
69
68
  //#endregion
70
69
  export { useMedia };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.32.0-rc.07044f1e1",
4
+ "version": "38.32.0-rc.35f722e2e",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
package/dist/PageHeader/PageHeader-b12247c8.css DELETED
@@ -1,2 +0,0 @@
1
- .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)}
2
- /*# sourceMappingURL=PageHeader-b12247c8.css.map */
package/dist/PageHeader/PageHeader-b12247c8.css.map DELETED
@@ -1 +0,0 @@
1
- {"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"]}