@primer/react 38.1.0-rc.0728a53db → 38.1.0-rc.1844aca9b

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.
@@ -1,4 +1,4 @@
1
- import './PageLayout-1849f083.css';
1
+ import './PageLayout-28a244f7.css';
2
2
 
3
3
  var classes = {"PageLayoutRoot":"prc-PageLayout-PageLayoutRoot-1zlEO","PageLayoutWrapper":"prc-PageLayout-PageLayoutWrapper-s2ao4","PageLayoutContent":"prc-PageLayout-PageLayoutContent-jzDMn","HorizontalDivider":"prc-PageLayout-HorizontalDivider-CYLp5","VerticalDivider":"prc-PageLayout-VerticalDivider-4A4Qm","Header":"prc-PageLayout-Header-mQXK1","HeaderContent":"prc-PageLayout-HeaderContent-dVIQb","HeaderHorizontalDivider":"prc-PageLayout-HeaderHorizontalDivider-bofyb","ContentWrapper":"prc-PageLayout-ContentWrapper-b-QRo","Content":"prc-PageLayout-Content--F7-I","PaneWrapper":"prc-PageLayout-PaneWrapper-nGO0U","PaneVerticalDivider":"prc-PageLayout-PaneVerticalDivider-1c9vy","Pane":"prc-PageLayout-Pane-Vl5LI","PaneHorizontalDivider":"prc-PageLayout-PaneHorizontalDivider-4exOb","FooterWrapper":"prc-PageLayout-FooterWrapper-WZwgZ","FooterHorizontalDivider":"prc-PageLayout-FooterHorizontalDivider-sNLmj","FooterContent":"prc-PageLayout-FooterContent-UFWGW","DraggableHandle":"prc-PageLayout-DraggableHandle-zPw82"};
4
4
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.1.0-rc.0728a53db",
4
+ "version": "38.1.0-rc.1844aca9b",
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",
@@ -1,2 +0,0 @@
1
- .prc-PageHeader-PageHeader-sT1Hp{--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-sT1Hp: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-sT1Hp: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-sT1Hp: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))}.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-all]),.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:not(:has([data-component=PH_Navigation])){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}@media screen and (max-width:768px){.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-narrow]){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}}@media screen and (min-width:768px){.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-regular]){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}}@media screen and (min-width:1440px){.prc-PageHeader-PageHeader-sT1Hp[data-has-border=true]:has([data-component=PH_Navigation][data-hidden-wide]){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));padding-block-end:var(--base-size-8,.5rem)}}.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_Actions],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_LeadingAction],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_LeadingVisual],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_TrailingAction],.prc-PageHeader-PageHeader-sT1Hp [data-component=PH_TrailingVisual]{height:calc(var(--title-line-height)*1em)}.prc-PageHeader-PageHeader-sT1Hp [data-hidden-all]{display:none}@media screen and (max-width:768px){.prc-PageHeader-PageHeader-sT1Hp [data-hidden-narrow]{display:none}}@media screen and (min-width:768px){.prc-PageHeader-PageHeader-sT1Hp [data-hidden-regular]{display:none}}@media screen and (min-width:1440px){.prc-PageHeader-PageHeader-sT1Hp [data-hidden-wide]{display:none}}.prc-PageHeader-ContextArea-6ykSJ{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-6ykSJ,.prc-PageHeader-ParentLink-BvDS0{align-items:center;display:flex;gap:var(--stack-gap-condensed,.5rem)}.prc-PageHeader-ParentLink-BvDS0{order:var(--context-area-region-order-parent-link)}.prc-PageHeader-ContextBar-XQ8Q0{display:flex;order:var(--context-area-region-order-context-bar)}.prc-PageHeader-ContextAreaActions-RTJRk{align-items:center;flex-grow:1;justify-content:flex-end;order:var(--context-area-region-order-context-area-actions)}.prc-PageHeader-ContextAreaActions-RTJRk,.prc-PageHeader-TitleArea-jxJZy{display:flex;flex-direction:row;gap:var(--stack-gap-condensed,.5rem)}.prc-PageHeader-TitleArea-jxJZy{align-items:flex-start;grid-area:title-area;grid-row:var(--grid-row-order-title-area)}.prc-PageHeader-LeadingAction-88LQ0{grid-area:leading-action;grid-row:var(--grid-row-order-leading-action)}.prc-PageHeader-Breadcrumbs-3c6ig,.prc-PageHeader-LeadingAction-88LQ0{align-items:center;display:flex;padding-right:var(--base-size-8,.5rem)}.prc-PageHeader-Breadcrumbs-3c6ig{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-7zjCx{align-items:center;display:flex;order:var(--title-area-region-order-leading-visual)}.prc-PageHeader-Title-LKOsd{display:block;font-size:inherit;font-weight:inherit;order:var(--title-area-region-order-title)}.prc-PageHeader-Title-LKOsd:where([data-hidden=true]){display:none}.prc-PageHeader-TrailingVisual-7Ft0D{align-items:center;display:flex;order:var(--title-area-region-order-trailing-visual)}.prc-PageHeader-TrailingAction-QOaow{grid-area:trailing-action;grid-row:var(--grid-row-order-trailing-action)}.prc-PageHeader-Actions-ygtmj,.prc-PageHeader-TrailingAction-QOaow{align-items:center;display:flex;padding-left:var(--base-size-8,.5rem)}.prc-PageHeader-Actions-ygtmj{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-kFg8r{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-kFg8r,.prc-PageHeader-Navigation-9Uvch{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-9Uvch{display:block;grid-area:navigation;grid-row:var(--grid-row-order-navigation)}
2
- /*# sourceMappingURL=PageHeader-4e1d8fee.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/PageHeader/PageHeader.module.css"],"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,6CA4FF,CAhFE,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,CAEA,6MAEE,8GAA0E,CAC1E,0CACF,CAEA,oCACE,+GACE,8GAA0E,CAC1E,0CACF,CACF,CAEA,oCACE,gHACE,8GAA0E,CAC1E,0CACF,CACF,CAEA,qCACE,6GACE,8GAA0E,CAC1E,0CACF,CACF,CAEA,2UAKE,yCACF,CAEA,mDACE,YACF,CAGE,oCADF,sDAEI,YAEJ,CADE,CAIA,oCADF,uDAEI,YAEJ,CADE,CAIA,qCADF,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-4e1d8fee.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 &: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 &[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 screen and (max-width: 768px) {\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 screen and (min-width: 768px) {\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 screen and (min-width: 1440px) {\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\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 screen and (max-width: 768px) {\n display: none;\n }\n }\n\n & [data-hidden-regular] {\n @media screen and (min-width: 768px) {\n display: none;\n }\n }\n\n & [data-hidden-wide] {\n @media screen and (min-width: 1440px) {\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"]}
@@ -1,2 +0,0 @@
1
- body[data-page-layout-dragging=true]{cursor:col-resize}body[data-page-layout-dragging=true] *{-webkit-user-select:none;user-select:none}.prc-PageLayout-PageLayoutRoot-1zlEO{--region-order-header:0;--region-order-pane-start:1;--region-order-content:2;--region-order-pane-end:3;--region-order-footer:4;--spacing-none:0;--spacing-condensed:var(--base-size-16,1rem);--spacing-normal:var(--base-size-16,1rem)}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing-normal:var(--base-size-24,1.5rem)}}.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:100%;--pane-width-medium:100%;--pane-width-large:100%;--pane-max-width-diff:511px}@media screen and (min-width:768px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:240px;--pane-width-medium:256px;--pane-width-large:256px}}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:256px;--pane-width-medium:296px;--pane-width-large:320px}}@media screen and (min-width:1280px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-max-width-diff:959px}}.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing:0;--spacing-row:0;--spacing-column:0;--spacing-divider:0;--offset-header:0;--pane-width:0;--pane-min-width:0;--pane-max-width:0;--pane-width-custom:0;--pane-width-size:0;padding:var(--spacing)}.prc-PageLayout-PageLayoutWrapper-s2ao4{display:flex;flex-wrap:wrap;height:100%;margin-left:auto;margin-right:auto;width:100%}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=medium]){max-width:768px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=large]){max-width:1012px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=full]){max-width:100%}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PageLayoutContent-jzDMn{display:flex;flex:1 1 100%;flex-wrap:wrap;max-width:100%}.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:calc(var(--spacing-divider)*-1);margin-right:calc(var(--spacing-divider)*-1)}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=none]){display:none}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset 0 -1px 0 0 var(--borderColor-default,var(--color-border-default)),inset 0 1px 0 0 var(--borderColor-default,var(--color-border-default));display:block;height:var(--base-size-8,.5rem)}@media screen and (min-width:768px){.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:0!important;margin-right:0!important}}.prc-PageLayout-VerticalDivider-4A4Qm{height:100%;position:relative}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=none]){display:none}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset -1px 0 0 0 var(--borderColor-default,var(--color-border-default)),inset 1px 0 0 0 var(--borderColor-default,var(--color-border-default));display:block;width:var(--base-size-8,.5rem)}.prc-PageLayout-Header-mQXK1{margin-bottom:var(--spacing);width:100%}.prc-PageLayout-HeaderContent-dVIQb{padding:var(--spacing)}.prc-PageLayout-HeaderHorizontalDivider-bofyb{margin-top:var(--spacing)}.prc-PageLayout-ContentWrapper-b-QRo{display:flex;flex-basis:0;flex-direction:column;flex-grow:1;flex-shrink:1;min-width:1px;order:var(--region-order-content)}.prc-PageLayout-ContentWrapper-b-QRo:where([data-is-hidden=true]){display:none}.prc-PageLayout-Content--F7-I{flex-grow:1;margin-left:auto;margin-right:auto;padding:var(--spacing);width:100%}.prc-PageLayout-Content--F7-I:where([data-width=medium]){max-width:768px}.prc-PageLayout-Content--F7-I:where([data-width=large]){max-width:1012px}.prc-PageLayout-Content--F7-I:where([data-width=full]){max-width:100%}.prc-PageLayout-Content--F7-I:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PaneWrapper-nGO0U{display:flex;margin-left:0;margin-right:0;width:100%}.prc-PageLayout-PaneWrapper-nGO0U:where([data-is-hidden=true]){display:none}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:column-reverse;margin-bottom:var(--spacing-row);order:var(--region-order-pane-start)}@media screen and (min-width:768px){.prc-PageLayout-PaneWrapper-nGO0U{margin-bottom:0!important;margin-top:0!important;width:auto}.prc-PageLayout-PaneWrapper-nGO0U:where([data-sticky]){max-height:100vh;position:sticky;top:var(--offset-header)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:row-reverse;margin-left:var(--spacing-column)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:row;margin-right:var(--spacing-column)}}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=start]){margin-left:var(--spacing)}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=end]){margin-right:var(--spacing)}.prc-PageLayout-Pane-Vl5LI{padding:var(--spacing);width:var(--pane-width-size)}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI{overflow:auto}}.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:100%}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width))}}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=start]){margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=end]){margin-bottom:var(--spacing)}.prc-PageLayout-FooterWrapper-WZwgZ{margin-top:var(--spacing);order:var(--region-order-footer);width:100%}.prc-PageLayout-FooterHorizontalDivider-sNLmj{margin-bottom:var(--spacing)}.prc-PageLayout-FooterContent-UFWGW{padding:var(--spacing)}.prc-PageLayout-DraggableHandle-zPw82{background-color:transparent;cursor:col-resize;inset:0 -2px;position:absolute;transition-delay:.1s}.prc-PageLayout-DraggableHandle-zPw82:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle))}.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true],.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true]:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis))}
2
- /*# sourceMappingURL=PageLayout-1849f083.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/PageLayout/PageLayout.module.css"],"names":[],"mappings":"AAEA,qCACE,iBACF,CAIA,uCACE,wBAAiB,CAAjB,gBACF,CAEA,qCAEE,uBAAwB,CACxB,2BAA4B,CAC5B,wBAAyB,CACzB,yBAA0B,CAC1B,uBAAwB,CAGxB,gBAAiB,CACjB,4CAAwC,CACxC,yCA0CF,CAxCE,qCAbF,qCAcI,2CAuCJ,CAtCE,CAfF,qCAkBE,uBAAwB,CACxB,wBAAyB,CACzB,uBAAwB,CACxB,2BAgCF,CA9BE,oCAvBF,qCAwBI,wBAAyB,CACzB,yBAA0B,CAC1B,wBA2BJ,CA1BE,CAEA,qCA7BF,qCA8BI,wBAAyB,CACzB,yBAA0B,CAC1B,wBAqBJ,CApBE,CAEA,qCAnCF,qCAoCI,2BAiBJ,CAhBE,CArCF,qCAwCE,WAAY,CACZ,eAAgB,CAChB,kBAAmB,CACnB,mBAAoB,CACpB,iBAAkB,CAClB,cAAe,CACf,kBAAmB,CACnB,kBAAmB,CACnB,qBAAsB,CACtB,mBAAoB,CAGpB,sBACF,CAEA,wCACE,YAAa,CAGb,cAAe,CAGf,WAAY,CAJZ,gBAAiB,CADjB,iBAAkB,CAIlB,UAkBF,CAfE,mEACE,eACF,CAEA,kEACE,gBACF,CAEA,iEACE,cACF,CAEA,mEACE,gBACF,CAGF,wCACE,YAAa,CACb,aAAc,CACd,cAAe,CACf,cACF,CAEA,wCAIE,2CAA8C,CAF9C,4CA6BF,CAzBE,mEACE,YACF,CAEA,mEAIE,uEAA4C,CAH5C,aAAc,CACd,UAGF,CAEA,qEAGE,+DAAsC,CACtC,yJAG4C,CAN5C,aAAc,CACd,+BAMF,CAEA,oCA3BF,wCA6BI,uBAAyB,CADzB,wBAGJ,CADE,CAGF,sCAEE,WAAY,CADZ,iBAuBF,CApBE,iEACE,YACF,CAEA,iEAIE,uEAA4C,CAH5C,aAAc,CACd,SAGF,CAEA,mEAGE,+DAAsC,CACtC,yJAG4C,CAN5C,aAAc,CACd,8BAMF,CAGF,6BAGE,4BAA6B,CAF7B,UAGF,CAEA,oCAEE,sBACF,CAEA,8CAEE,yBACF,CAEA,qCACE,YAAa,CAUb,YAAa,CANb,qBAAsB,CAOtB,WAAY,CACZ,aAAc,CATd,aAAc,CAEd,iCAYF,CAHE,kEACE,YACF,CAGF,8BAOE,WAAY,CADZ,gBAAiB,CADjB,iBAAkB,CADlB,sBAAuB,CAHvB,UAuBF,CAfE,yDACE,eACF,CAEA,wDACE,gBACF,CAEA,uDACE,cACF,CAEA,yDACE,gBACF,CAGF,kCACE,YAAa,CAGb,aAAc,CADd,cAAe,CADf,UA8CF,CA1CE,+DACE,YACF,CAEA,6DAGE,qBAAsB,CADtB,6BAA8B,CAE9B,kCACF,CAEA,+DAGE,6BAA8B,CAD9B,gCAAiC,CAEjC,oCACF,CAEA,oCAxBF,kCA2BI,yBAA2B,CAD3B,sBAAwB,CADxB,UAuBJ,CAnBI,uDAIE,gBAAiB,CAHjB,eAAgB,CAEhB,wBAEF,CAEA,6DAGE,0BAA2B,CAD3B,iCAEF,CAEA,+DAGE,kBAAmB,CADnB,kCAEF,CACF,CAIA,uEAEE,0BACF,CAEA,qEAEE,2BACF,CAGF,2BAGE,sBAAuB,CAFvB,4BAeF,CAXE,oCALF,2BAMI,aAUJ,CATE,CAEA,mDACE,UAKF,CAHE,oCAHF,mDAII,0EAEJ,CADE,CAKF,yEAEE,yBACF,CAEA,uEAEE,4BACF,CAGF,oCAKE,yBAA0B,CAH1B,gCAAiC,CADjC,UAKF,CAEA,8CAEE,4BACF,CAEA,oCAEE,sBACF,CAEA,sCAIE,4BAA6B,CAD7B,iBAAkB,CADlB,YAAa,CADb,iBAAkB,CAIlB,oBACF,CAEA,4CACE,yEACF,CAMA,0HACE,4EACF","file":"PageLayout-1849f083.css","sourcesContent":["/* Maintain resize cursor while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] {\n cursor: col-resize;\n}\n\n/* Disable text selection while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] * {\n user-select: none;\n}\n\n.PageLayoutRoot {\n /* Region Order */\n --region-order-header: 0;\n --region-order-pane-start: 1;\n --region-order-content: 2;\n --region-order-pane-end: 3;\n --region-order-footer: 4;\n\n /* Spacing Values */\n --spacing-none: 0;\n --spacing-condensed: var(--base-size-16);\n --spacing-normal: var(--base-size-16);\n\n @media screen and (min-width: 1012px) {\n --spacing-normal: var(--base-size-24);\n }\n\n /* Pane Width Values */\n --pane-width-small: 100%;\n --pane-width-medium: 100%;\n --pane-width-large: 100%;\n --pane-max-width-diff: 511px;\n\n @media screen and (min-width: 768px) {\n --pane-width-small: 240px;\n --pane-width-medium: 256px;\n --pane-width-large: 256px;\n }\n\n @media screen and (min-width: 1012px) {\n --pane-width-small: 256px;\n --pane-width-medium: 296px;\n --pane-width-large: 320px;\n }\n\n @media screen and (min-width: 1280px) {\n --pane-max-width-diff: 959px;\n }\n\n /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */\n --spacing: 0;\n --spacing-row: 0;\n --spacing-column: 0;\n --spacing-divider: 0;\n --offset-header: 0;\n --pane-width: 0;\n --pane-min-width: 0;\n --pane-max-width: 0;\n --pane-width-custom: 0;\n --pane-width-size: 0;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.PageLayoutWrapper {\n display: flex;\n margin-right: auto;\n margin-left: auto;\n flex-wrap: wrap;\n /* the wrapper should match the Root's dimensions by default */\n width: 100%;\n height: 100%;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PageLayoutContent {\n display: flex;\n flex: 1 1 100%;\n flex-wrap: wrap;\n max-width: 100%;\n}\n\n.HorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: calc(-1 * var(--spacing-divider));\n /* stylelint-disable-next-line primer/spacing */\n margin-left: calc(-1 * var(--spacing-divider));\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n\n @media screen and (min-width: 768px) {\n margin-right: 0 !important;\n margin-left: 0 !important;\n }\n}\n\n.VerticalDivider {\n position: relative;\n height: 100%;\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n}\n\n.Header {\n width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n}\n\n.HeaderContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.HeaderHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n}\n\n.ContentWrapper {\n display: flex;\n\n /* Hack to prevent overflowing content from pushing the pane region to the next line */\n min-width: 1px;\n flex-direction: column;\n order: var(--region-order-content);\n\n /* Set flex-basis to 0% to allow flex-grow to control the width of the content region.\n Without this, the content region could wrap onto a different line\n than the pane region on wide viewports if its contents are too wide. */\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n}\n\n.Content {\n width: 100%;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n margin-right: auto;\n margin-left: auto;\n flex-grow: 1;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PaneWrapper {\n display: flex;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing-row);\n flex-direction: column;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing-row);\n flex-direction: column-reverse;\n order: var(--region-order-pane-start);\n }\n\n @media screen and (min-width: 768px) {\n width: auto;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n\n &:where([data-sticky]) {\n position: sticky;\n /* stylelint-disable-next-line primer/spacing */\n top: var(--offset-header);\n max-height: 100vh;\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n }\n }\n}\n\n.PaneVerticalDivider {\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n }\n}\n\n.Pane {\n width: var(--pane-width-size);\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n\n @media screen and (min-width: 768px) {\n overflow: auto;\n }\n\n &:where([data-resizable]) {\n width: 100%;\n\n @media screen and (min-width: 768px) {\n width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width));\n }\n }\n}\n\n.PaneHorizontalDivider {\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n }\n}\n\n.FooterWrapper {\n width: 100%;\n order: var(--region-order-footer);\n\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n}\n\n.FooterHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n}\n\n.FooterContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.DraggableHandle {\n position: absolute;\n inset: 0 -2px;\n cursor: col-resize;\n background-color: transparent;\n transition-delay: 0.1s;\n}\n\n.DraggableHandle:hover {\n background-color: var(--bgColor-neutral-muted);\n}\n\n.DraggableHandle[data-dragging='true'] {\n background-color: var(--bgColor-accent-emphasis);\n}\n\n.DraggableHandle[data-dragging='true']:hover {\n background-color: var(--bgColor-accent-emphasis);\n}\n"]}