@primer/react 38.7.0 → 38.7.1-rc.d3adaab3e

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 (9) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/Autocomplete/AutocompleteOverlay.d.ts +1 -1
  3. package/dist/Autocomplete/AutocompleteOverlay.d.ts.map +1 -1
  4. package/dist/Autocomplete/AutocompleteOverlay.js +43 -37
  5. package/dist/PageLayout/{PageLayout-51007c87.css → PageLayout-bfb9d9e9.css} +2 -2
  6. package/dist/PageLayout/PageLayout-bfb9d9e9.css.map +1 -0
  7. package/dist/PageLayout/PageLayout.module.css.js +1 -1
  8. package/package.json +6 -6
  9. package/dist/PageLayout/PageLayout-51007c87.css.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @primer/react
2
2
 
3
+ ## 38.7.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#7364](https://github.com/primer/react/pull/7364) [`d239382`](https://github.com/primer/react/commit/d239382a6c6df8e97cabdb6f1be4009c2ea15d2c) Thanks [@francinelucca](https://github.com/francinelucca)! - fix(Autocomplete.Overlay): prevent user-defined className from overriding default styles
8
+
9
+ - [#7445](https://github.com/primer/react/pull/7445) [`4072e44`](https://github.com/primer/react/commit/4072e44c74056b7a4e81bd8bba276c165a71c4ba) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Fixed a bug where scroll might jump when resizing by removing content-visibility from dragging elements in PageLayout.
10
+
3
11
  ## 38.7.0
4
12
 
5
13
  ### Minor Changes
package/dist/Autocomplete/AutocompleteOverlay.d.ts CHANGED
@@ -12,7 +12,7 @@ type AutocompleteOverlayInternalProps = {
12
12
  overlayProps?: Partial<OverlayProps>;
13
13
  children?: React.ReactNode;
14
14
  } & Partial<OverlayProps> & Pick<React.AriaAttributes, 'aria-labelledby'>;
15
- declare function AutocompleteOverlay({ menuAnchorRef, overlayProps: oldOverlayProps, children, ...newOverlayProps }: AutocompleteOverlayInternalProps): React.JSX.Element | null;
15
+ declare function AutocompleteOverlay({ menuAnchorRef, overlayProps: oldOverlayProps, children, className, ...newOverlayProps }: AutocompleteOverlayInternalProps): React.JSX.Element | null;
16
16
  declare namespace AutocompleteOverlay {
17
17
  var displayName: string;
18
18
  var __SLOT__: symbol;
package/dist/Autocomplete/AutocompleteOverlay.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AutocompleteOverlay.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAOlD,KAAK,gCAAgC,GAAG;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC5C;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,OAAO,CAAC,YAAY,CAAC,GACvB,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAA;AAE/C,iBAAS,mBAAmB,CAAC,EAC3B,aAAa,EACb,YAAY,EAAE,eAAe,EAC7B,QAAQ,EACR,GAAG,eAAe,EACnB,EAAE,gCAAgC,4BA6ClC;kBAlDQ,mBAAmB;;;;AAsD5B,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACjF,eAAe,mBAAmB,CAAA"}
1
+ {"version":3,"file":"AutocompleteOverlay.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAQlD,KAAK,gCAAgC,GAAG;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC5C;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,OAAO,CAAC,YAAY,CAAC,GACvB,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAA;AAE/C,iBAAS,mBAAmB,CAAC,EAC3B,aAAa,EACb,YAAY,EAAE,eAAe,EAC7B,QAAQ,EACR,SAAS,EACT,GAAG,eAAe,EACnB,EAAE,gCAAgC,4BA6ClC;kBAnDQ,mBAAmB;;;;AAuD5B,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACjF,eAAe,mBAAmB,CAAA"}
package/dist/Autocomplete/AutocompleteOverlay.js CHANGED
@@ -4,6 +4,7 @@ import { AutocompleteContext } from './AutocompleteContext.js';
4
4
  import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
5
5
  import VisuallyHidden from '../_VisuallyHidden.js';
6
6
  import classes from './AutocompleteOverlay.module.css.js';
7
+ import { clsx } from 'clsx';
7
8
  import { jsx } from 'react/jsx-runtime';
8
9
  import { useAnchoredPosition } from '../hooks/useAnchoredPosition.js';
9
10
  import Overlay from '../Overlay/Overlay.js';
@@ -11,8 +12,9 @@ import Overlay from '../Overlay/Overlay.js';
11
12
  // TODO: consider making 'aria-labelledby' required
12
13
 
13
14
  function AutocompleteOverlay(t0) {
14
- const $ = c(24);
15
+ const $ = c(26);
15
16
  let children;
17
+ let className;
16
18
  let menuAnchorRef;
17
19
  let newOverlayProps;
18
20
  let oldOverlayProps;
@@ -21,34 +23,37 @@ function AutocompleteOverlay(t0) {
21
23
  menuAnchorRef,
22
24
  overlayProps: oldOverlayProps,
23
25
  children,
26
+ className,
24
27
  ...newOverlayProps
25
28
  } = t0);
26
29
  $[0] = t0;
27
30
  $[1] = children;
28
- $[2] = menuAnchorRef;
29
- $[3] = newOverlayProps;
30
- $[4] = oldOverlayProps;
31
+ $[2] = className;
32
+ $[3] = menuAnchorRef;
33
+ $[4] = newOverlayProps;
34
+ $[5] = oldOverlayProps;
31
35
  } else {
32
36
  children = $[1];
33
- menuAnchorRef = $[2];
34
- newOverlayProps = $[3];
35
- oldOverlayProps = $[4];
37
+ className = $[2];
38
+ menuAnchorRef = $[3];
39
+ newOverlayProps = $[4];
40
+ oldOverlayProps = $[5];
36
41
  }
37
42
  const autocompleteContext = useContext(AutocompleteContext);
38
43
  if (autocompleteContext === null) {
39
44
  throw new Error("AutocompleteContext returned null values");
40
45
  }
41
46
  let t1;
42
- if ($[5] !== newOverlayProps || $[6] !== oldOverlayProps) {
47
+ if ($[6] !== newOverlayProps || $[7] !== oldOverlayProps) {
43
48
  t1 = {
44
49
  ...oldOverlayProps,
45
50
  ...newOverlayProps
46
51
  };
47
- $[5] = newOverlayProps;
48
- $[6] = oldOverlayProps;
49
- $[7] = t1;
52
+ $[6] = newOverlayProps;
53
+ $[7] = oldOverlayProps;
54
+ $[8] = t1;
50
55
  } else {
51
- t1 = $[7];
56
+ t1 = $[8];
52
57
  }
53
58
  const overlayProps = t1;
54
59
  const {
@@ -61,25 +66,25 @@ function AutocompleteOverlay(t0) {
61
66
  const showMenu = t2 === undefined ? false : t2;
62
67
  const t3 = menuAnchorRef ? menuAnchorRef : inputRef;
63
68
  let t4;
64
- if ($[8] !== t3) {
69
+ if ($[9] !== t3) {
65
70
  t4 = {
66
71
  side: "outside-bottom",
67
72
  align: "start",
68
73
  anchorElementRef: t3
69
74
  };
70
- $[8] = t3;
71
- $[9] = t4;
75
+ $[9] = t3;
76
+ $[10] = t4;
72
77
  } else {
73
- t4 = $[9];
78
+ t4 = $[10];
74
79
  }
75
80
  let t5;
76
- if ($[10] !== selectedItemLength || $[11] !== showMenu) {
81
+ if ($[11] !== selectedItemLength || $[12] !== showMenu) {
77
82
  t5 = [showMenu, selectedItemLength];
78
- $[10] = selectedItemLength;
79
- $[11] = showMenu;
80
- $[12] = t5;
83
+ $[11] = selectedItemLength;
84
+ $[12] = showMenu;
85
+ $[13] = t5;
81
86
  } else {
82
- t5 = $[12];
87
+ t5 = $[13];
83
88
  }
84
89
  const {
85
90
  floatingElementRef,
@@ -87,21 +92,21 @@ function AutocompleteOverlay(t0) {
87
92
  } = useAnchoredPosition(t4, t5);
88
93
  useRefObjectAsForwardedRef(scrollContainerRef, floatingElementRef);
89
94
  let t6;
90
- if ($[13] !== setShowMenu) {
95
+ if ($[14] !== setShowMenu) {
91
96
  t6 = () => {
92
97
  setShowMenu(false);
93
98
  };
94
- $[13] = setShowMenu;
95
- $[14] = t6;
99
+ $[14] = setShowMenu;
100
+ $[15] = t6;
96
101
  } else {
97
- t6 = $[14];
102
+ t6 = $[15];
98
103
  }
99
104
  const closeOptionList = t6;
100
105
  if (typeof window === "undefined") {
101
106
  return null;
102
107
  }
103
108
  let t7;
104
- if ($[15] !== children || $[16] !== closeOptionList || $[17] !== floatingElementRef || $[18] !== inputRef || $[19] !== overlayProps || $[20] !== (position === null || position === void 0 ? void 0 : position.left) || $[21] !== (position === null || position === void 0 ? void 0 : position.top) || $[22] !== showMenu) {
109
+ if ($[16] !== children || $[17] !== className || $[18] !== closeOptionList || $[19] !== floatingElementRef || $[20] !== inputRef || $[21] !== overlayProps || $[22] !== (position === null || position === void 0 ? void 0 : position.left) || $[23] !== (position === null || position === void 0 ? void 0 : position.top) || $[24] !== showMenu) {
105
110
  t7 = showMenu ? /*#__PURE__*/jsx(Overlay, {
106
111
  returnFocusRef: inputRef,
107
112
  preventFocusOnOpen: true,
@@ -110,24 +115,25 @@ function AutocompleteOverlay(t0) {
110
115
  ref: floatingElementRef,
111
116
  top: position === null || position === void 0 ? void 0 : position.top,
112
117
  left: position === null || position === void 0 ? void 0 : position.left,
113
- className: classes.Overlay,
118
+ className: clsx(classes.Overlay, className),
114
119
  ...overlayProps,
115
120
  children: children
116
121
  }) : /*#__PURE__*/jsx(VisuallyHidden, {
117
122
  "aria-hidden": "true",
118
123
  children: children
119
124
  });
120
- $[15] = children;
121
- $[16] = closeOptionList;
122
- $[17] = floatingElementRef;
123
- $[18] = inputRef;
124
- $[19] = overlayProps;
125
- $[20] = position === null || position === void 0 ? void 0 : position.left;
126
- $[21] = position === null || position === void 0 ? void 0 : position.top;
127
- $[22] = showMenu;
128
- $[23] = t7;
125
+ $[16] = children;
126
+ $[17] = className;
127
+ $[18] = closeOptionList;
128
+ $[19] = floatingElementRef;
129
+ $[20] = inputRef;
130
+ $[21] = overlayProps;
131
+ $[22] = position === null || position === void 0 ? void 0 : position.left;
132
+ $[23] = position === null || position === void 0 ? void 0 : position.top;
133
+ $[24] = showMenu;
134
+ $[25] = t7;
129
135
  } else {
130
- t7 = $[23];
136
+ t7 = $[25];
131
137
  }
132
138
  return t7;
133
139
  }
package/dist/PageLayout/{PageLayout-51007c87.css → PageLayout-bfb9d9e9.css} RENAMED
@@ -1,2 +1,2 @@
1
- .prc-PageLayout-PageLayoutRoot--KH-d{--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--KH-d{--spacing-normal:var(--base-size-24,1.5rem)}}.prc-PageLayout-PageLayoutRoot--KH-d{--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--KH-d{--pane-width-small:240px;--pane-width-medium:256px;--pane-width-large:256px}}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot--KH-d{--pane-width-small:256px;--pane-width-medium:296px;--pane-width-large:320px}}@media screen and (min-width:1280px){.prc-PageLayout-PageLayoutRoot--KH-d{--pane-max-width-diff:959px}}.prc-PageLayout-PageLayoutRoot--KH-d{--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-2BhU2{display:flex;flex-wrap:wrap;height:100%;margin-left:auto;margin-right:auto;width:100%}.prc-PageLayout-PageLayoutWrapper-2BhU2:where([data-width=medium]){max-width:768px}.prc-PageLayout-PageLayoutWrapper-2BhU2:where([data-width=large]){max-width:1012px}.prc-PageLayout-PageLayoutWrapper-2BhU2:where([data-width=full]){max-width:100%}.prc-PageLayout-PageLayoutWrapper-2BhU2:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PageLayoutContent-BneH9{display:flex;flex:1 1 100%;flex-wrap:wrap;max-width:100%}.prc-PageLayout-HorizontalDivider-JLVqp{margin-left:calc(var(--spacing-divider)*-1);margin-right:calc(var(--spacing-divider)*-1)}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant=none]){display:none}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-JLVqp: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 (max-width:calc(48rem - 0.02px)){.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-narrow=none]){display:none}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-narrow=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-narrow=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 (min-width:48rem){.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-regular=none]){display:none}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-regular=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-regular=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 (min-width:87.5rem){.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-wide=none]){display:none}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-wide=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-wide=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-JLVqp{margin-left:0!important;margin-right:0!important}}.prc-PageLayout-VerticalDivider-9QRmK{height:100%;position:relative}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant=none]){display:none}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-9QRmK: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)}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-narrow=none]){display:none}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-narrow=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-narrow=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)}}@media (min-width:48rem){.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-regular=none]){display:none}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-regular=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-regular=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)}}@media (min-width:87.5rem){.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-wide=none]){display:none}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-wide=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-wide=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-0of-R{margin-bottom:var(--spacing);width:100%}.prc-PageLayout-Header-0of-R:where([data-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-Header-0of-R:where([data-hidden-narrow=true]){display:none}}@media (min-width:48rem){.prc-PageLayout-Header-0of-R:where([data-hidden-regular=true]){display:none}}@media (min-width:87.5rem){.prc-PageLayout-Header-0of-R:where([data-hidden-wide=true]){display:none}}.prc-PageLayout-HeaderContent-gdFfN{padding:var(--spacing)}.prc-PageLayout-HeaderHorizontalDivider-odAHl{margin-top:var(--spacing)}.prc-PageLayout-ContentWrapper-gR9eG{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-gR9eG:where([data-is-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-ContentWrapper-gR9eG:where([data-is-hidden-narrow=true]){display:none}}@media (min-width:48rem){.prc-PageLayout-ContentWrapper-gR9eG:where([data-is-hidden-regular=true]){display:none}}@media (min-width:87.5rem){.prc-PageLayout-ContentWrapper-gR9eG:where([data-is-hidden-wide=true]){display:none}}.prc-PageLayout-Content-xWL-A{flex-grow:1;margin-left:auto;margin-right:auto;padding:var(--spacing);width:100%}.prc-PageLayout-Content-xWL-A:where([data-width=medium]){max-width:768px}.prc-PageLayout-Content-xWL-A:where([data-width=large]){max-width:1012px}.prc-PageLayout-Content-xWL-A:where([data-width=full]){max-width:100%}.prc-PageLayout-Content-xWL-A:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PaneWrapper-pHPop{display:flex;margin-left:0;margin-right:0;width:100%}.prc-PageLayout-PaneWrapper-pHPop:where([data-is-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneWrapper-pHPop:where([data-is-hidden-narrow=true]){display:none}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-narrow=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-narrow=start]){flex-direction:column-reverse;margin-bottom:var(--spacing-row);order:var(--region-order-pane-start)}}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneWrapper-pHPop:where([data-position=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-pHPop: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-pHPop:where([data-is-hidden-regular=true]){display:none}.prc-PageLayout-PaneWrapper-pHPop{margin-bottom:0!important;margin-top:0!important;width:auto}.prc-PageLayout-PaneWrapper-pHPop:where([data-sticky]){max-height:100vh;position:sticky;top:var(--offset-header)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position=end]){flex-direction:row-reverse;margin-left:var(--spacing-column);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position=start]){flex-direction:row;margin-right:var(--spacing-column);order:var(--region-order-pane-start)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-regular=end]){flex-direction:row-reverse;margin-left:var(--spacing-column);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-regular=start]){flex-direction:row;margin-right:var(--spacing-column);order:var(--region-order-pane-start)}}@media (min-width:87.5rem){.prc-PageLayout-PaneWrapper-pHPop:where([data-is-hidden-wide=true]){display:none}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-wide=end]){flex-direction:row-reverse;margin-left:var(--spacing-column);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-wide=start]){flex-direction:row;margin-right:var(--spacing-column);order:var(--region-order-pane-start)}}.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position=start]){margin-left:var(--spacing)}.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position=end]){margin-right:var(--spacing)}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-narrow=start]){margin-left:var(--spacing);margin-right:0}.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-narrow=end]){margin-left:0;margin-right:var(--spacing)}}@media (min-width:48rem){.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-regular=start]){margin-left:var(--spacing);margin-right:0}.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-regular=end]){margin-left:0;margin-right:var(--spacing)}}@media (min-width:87.5rem){.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-wide=start]){margin-left:var(--spacing);margin-right:0}.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-wide=end]){margin-left:0;margin-right:var(--spacing)}}.prc-PageLayout-Pane-AyzHK{padding:var(--spacing);width:var(--pane-width-size)}@media screen and (min-width:768px){.prc-PageLayout-Pane-AyzHK{overflow:auto}}.prc-PageLayout-Pane-AyzHK:where([data-resizable]){width:100%}@media screen and (min-width:768px){.prc-PageLayout-Pane-AyzHK:where([data-resizable]){width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width))}}.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position=start]){margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position=end]){margin-bottom:var(--spacing)}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-narrow=start]){margin-bottom:0;margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-narrow=end]){margin-bottom:var(--spacing);margin-top:0}}@media (min-width:48rem){.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-regular=start]){margin-bottom:0;margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-regular=end]){margin-bottom:var(--spacing);margin-top:0}}@media (min-width:87.5rem){.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-wide=start]){margin-bottom:0;margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-wide=end]){margin-bottom:var(--spacing);margin-top:0}}.prc-PageLayout-FooterWrapper-9cB8y{margin-top:var(--spacing);order:var(--region-order-footer);width:100%}.prc-PageLayout-FooterWrapper-9cB8y:where([data-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-FooterWrapper-9cB8y:where([data-hidden-narrow=true]){display:none}}@media (min-width:48rem){.prc-PageLayout-FooterWrapper-9cB8y:where([data-hidden-regular=true]){display:none}}@media (min-width:87.5rem){.prc-PageLayout-FooterWrapper-9cB8y:where([data-hidden-wide=true]){display:none}}.prc-PageLayout-FooterHorizontalDivider-W-RaS{margin-bottom:var(--spacing)}.prc-PageLayout-FooterContent-HUS0V{padding:var(--spacing)}.prc-PageLayout-DraggableHandle-9s6B4{cursor:col-resize;inset:0 -2px;position:absolute;touch-action:none;-webkit-user-select:none;user-select:none}.prc-PageLayout-DraggableHandle-9s6B4:before{background-color:var(--draggable-handle--bg-color,var(--bgColor-neutral-muted,var(--color-neutral-subtle)));border-radius:inherit;content:"";inset:0;opacity:var(--draggable-handle--drag-opacity,0);position:absolute;transition:var(--draggable-handle--transition,opacity .15s ease)}.prc-PageLayout-DraggableHandle-9s6B4:hover:before{opacity:1}.prc-PageLayout-ContentWrapper-gR9eG[data-dragging=true],.prc-PageLayout-Pane-AyzHK[data-dragging=true]{contain:layout style paint;content-visibility:auto;pointer-events:none}
2
- /*# sourceMappingURL=PageLayout-51007c87.css.map */
1
+ .prc-PageLayout-PageLayoutRoot--KH-d{--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--KH-d{--spacing-normal:var(--base-size-24,1.5rem)}}.prc-PageLayout-PageLayoutRoot--KH-d{--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--KH-d{--pane-width-small:240px;--pane-width-medium:256px;--pane-width-large:256px}}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot--KH-d{--pane-width-small:256px;--pane-width-medium:296px;--pane-width-large:320px}}@media screen and (min-width:1280px){.prc-PageLayout-PageLayoutRoot--KH-d{--pane-max-width-diff:959px}}.prc-PageLayout-PageLayoutRoot--KH-d{--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-2BhU2{display:flex;flex-wrap:wrap;height:100%;margin-left:auto;margin-right:auto;width:100%}.prc-PageLayout-PageLayoutWrapper-2BhU2:where([data-width=medium]){max-width:768px}.prc-PageLayout-PageLayoutWrapper-2BhU2:where([data-width=large]){max-width:1012px}.prc-PageLayout-PageLayoutWrapper-2BhU2:where([data-width=full]){max-width:100%}.prc-PageLayout-PageLayoutWrapper-2BhU2:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PageLayoutContent-BneH9{display:flex;flex:1 1 100%;flex-wrap:wrap;max-width:100%}.prc-PageLayout-HorizontalDivider-JLVqp{margin-left:calc(var(--spacing-divider)*-1);margin-right:calc(var(--spacing-divider)*-1)}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant=none]){display:none}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-JLVqp: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 (max-width:calc(48rem - 0.02px)){.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-narrow=none]){display:none}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-narrow=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-narrow=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 (min-width:48rem){.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-regular=none]){display:none}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-regular=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-regular=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 (min-width:87.5rem){.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-wide=none]){display:none}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-wide=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-JLVqp:where([data-variant-wide=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-JLVqp{margin-left:0!important;margin-right:0!important}}.prc-PageLayout-VerticalDivider-9QRmK{height:100%;position:relative}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant=none]){display:none}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-9QRmK: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)}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-narrow=none]){display:none}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-narrow=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-narrow=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)}}@media (min-width:48rem){.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-regular=none]){display:none}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-regular=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-regular=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)}}@media (min-width:87.5rem){.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-wide=none]){display:none}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-wide=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-9QRmK:where([data-variant-wide=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-0of-R{margin-bottom:var(--spacing);width:100%}.prc-PageLayout-Header-0of-R:where([data-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-Header-0of-R:where([data-hidden-narrow=true]){display:none}}@media (min-width:48rem){.prc-PageLayout-Header-0of-R:where([data-hidden-regular=true]){display:none}}@media (min-width:87.5rem){.prc-PageLayout-Header-0of-R:where([data-hidden-wide=true]){display:none}}.prc-PageLayout-HeaderContent-gdFfN{padding:var(--spacing)}.prc-PageLayout-HeaderHorizontalDivider-odAHl{margin-top:var(--spacing)}.prc-PageLayout-ContentWrapper-gR9eG{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-gR9eG:where([data-is-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-ContentWrapper-gR9eG:where([data-is-hidden-narrow=true]){display:none}}@media (min-width:48rem){.prc-PageLayout-ContentWrapper-gR9eG:where([data-is-hidden-regular=true]){display:none}}@media (min-width:87.5rem){.prc-PageLayout-ContentWrapper-gR9eG:where([data-is-hidden-wide=true]){display:none}}.prc-PageLayout-Content-xWL-A{flex-grow:1;margin-left:auto;margin-right:auto;padding:var(--spacing);width:100%}.prc-PageLayout-Content-xWL-A:where([data-width=medium]){max-width:768px}.prc-PageLayout-Content-xWL-A:where([data-width=large]){max-width:1012px}.prc-PageLayout-Content-xWL-A:where([data-width=full]){max-width:100%}.prc-PageLayout-Content-xWL-A:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PaneWrapper-pHPop{display:flex;margin-left:0;margin-right:0;width:100%}.prc-PageLayout-PaneWrapper-pHPop:where([data-is-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneWrapper-pHPop:where([data-is-hidden-narrow=true]){display:none}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-narrow=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-narrow=start]){flex-direction:column-reverse;margin-bottom:var(--spacing-row);order:var(--region-order-pane-start)}}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneWrapper-pHPop:where([data-position=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-pHPop: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-pHPop:where([data-is-hidden-regular=true]){display:none}.prc-PageLayout-PaneWrapper-pHPop{margin-bottom:0!important;margin-top:0!important;width:auto}.prc-PageLayout-PaneWrapper-pHPop:where([data-sticky]){max-height:100vh;position:sticky;top:var(--offset-header)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position=end]){flex-direction:row-reverse;margin-left:var(--spacing-column);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position=start]){flex-direction:row;margin-right:var(--spacing-column);order:var(--region-order-pane-start)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-regular=end]){flex-direction:row-reverse;margin-left:var(--spacing-column);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-regular=start]){flex-direction:row;margin-right:var(--spacing-column);order:var(--region-order-pane-start)}}@media (min-width:87.5rem){.prc-PageLayout-PaneWrapper-pHPop:where([data-is-hidden-wide=true]){display:none}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-wide=end]){flex-direction:row-reverse;margin-left:var(--spacing-column);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-pHPop:where([data-position-wide=start]){flex-direction:row;margin-right:var(--spacing-column);order:var(--region-order-pane-start)}}.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position=start]){margin-left:var(--spacing)}.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position=end]){margin-right:var(--spacing)}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-narrow=start]){margin-left:var(--spacing);margin-right:0}.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-narrow=end]){margin-left:0;margin-right:var(--spacing)}}@media (min-width:48rem){.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-regular=start]){margin-left:var(--spacing);margin-right:0}.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-regular=end]){margin-left:0;margin-right:var(--spacing)}}@media (min-width:87.5rem){.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-wide=start]){margin-left:var(--spacing);margin-right:0}.prc-PageLayout-PaneVerticalDivider-le57g:where([data-position-wide=end]){margin-left:0;margin-right:var(--spacing)}}.prc-PageLayout-Pane-AyzHK{padding:var(--spacing);width:var(--pane-width-size)}@media screen and (min-width:768px){.prc-PageLayout-Pane-AyzHK{overflow:auto}}.prc-PageLayout-Pane-AyzHK:where([data-resizable]){width:100%}@media screen and (min-width:768px){.prc-PageLayout-Pane-AyzHK:where([data-resizable]){width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width))}}.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position=start]){margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position=end]){margin-bottom:var(--spacing)}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-narrow=start]){margin-bottom:0;margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-narrow=end]){margin-bottom:var(--spacing);margin-top:0}}@media (min-width:48rem){.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-regular=start]){margin-bottom:0;margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-regular=end]){margin-bottom:var(--spacing);margin-top:0}}@media (min-width:87.5rem){.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-wide=start]){margin-bottom:0;margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-9tbnE:where([data-position-wide=end]){margin-bottom:var(--spacing);margin-top:0}}.prc-PageLayout-FooterWrapper-9cB8y{margin-top:var(--spacing);order:var(--region-order-footer);width:100%}.prc-PageLayout-FooterWrapper-9cB8y:where([data-hidden=true]){display:none}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-FooterWrapper-9cB8y:where([data-hidden-narrow=true]){display:none}}@media (min-width:48rem){.prc-PageLayout-FooterWrapper-9cB8y:where([data-hidden-regular=true]){display:none}}@media (min-width:87.5rem){.prc-PageLayout-FooterWrapper-9cB8y:where([data-hidden-wide=true]){display:none}}.prc-PageLayout-FooterHorizontalDivider-W-RaS{margin-bottom:var(--spacing)}.prc-PageLayout-FooterContent-HUS0V{padding:var(--spacing)}.prc-PageLayout-DraggableHandle-9s6B4{cursor:col-resize;inset:0 -2px;position:absolute;touch-action:none;-webkit-user-select:none;user-select:none}.prc-PageLayout-DraggableHandle-9s6B4:before{background-color:var(--draggable-handle--bg-color,var(--bgColor-neutral-muted,var(--color-neutral-subtle)));border-radius:inherit;content:"";inset:0;opacity:var(--draggable-handle--drag-opacity,0);position:absolute;transition:var(--draggable-handle--transition,opacity .15s ease)}.prc-PageLayout-DraggableHandle-9s6B4:hover:before{opacity:1}.prc-PageLayout-ContentWrapper-gR9eG[data-dragging=true],.prc-PageLayout-Pane-AyzHK[data-dragging=true]{contain:layout style paint;pointer-events:none}
2
+ /*# sourceMappingURL=PageLayout-bfb9d9e9.css.map */
package/dist/PageLayout/PageLayout-bfb9d9e9.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/PageLayout/PageLayout.module.css.js"],"names":[],"mappings":"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","file":"PageLayout-bfb9d9e9.css","sourcesContent":["/* Exported values for JavaScript consumption */\n:export {\n /* Breakpoint where --pane-max-width-diff changes (used in usePaneWidth.ts) */\n paneMaxWidthDiffBreakpoint: 1280;\n /* Default value for --pane-max-width-diff below the breakpoint */\n paneMaxWidthDiffDefault: 511;\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 /* NOTE: This value is exported via :export for use in usePaneWidth.ts */\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 /* NOTE: This breakpoint value is exported via :export for use in usePaneWidth.ts */\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 /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-variant-narrow='none']) {\n display: none;\n }\n\n &:where([data-variant-narrow='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-narrow='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\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-variant-regular='none']) {\n display: none;\n }\n\n &:where([data-variant-regular='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-regular='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\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-variant-wide='none']) {\n display: none;\n }\n\n &:where([data-variant-wide='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-wide='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\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 /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-variant-narrow='none']) {\n display: none;\n }\n\n &:where([data-variant-narrow='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-narrow='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 /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-variant-regular='none']) {\n display: none;\n }\n\n &:where([data-variant-regular='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-regular='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 /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-variant-wide='none']) {\n display: none;\n }\n\n &:where([data-variant-wide='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-wide='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\n.Header {\n width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n\n &:where([data-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-hidden-wide='true']) {\n display: none;\n }\n }\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 /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-is-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-is-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-is-hidden-wide='true']) {\n display: none;\n }\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 /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-is-hidden-narrow='true']) {\n display: none;\n }\n\n &:where([data-position-narrow='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-narrow='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\n /* Base position (non-responsive) - applies at narrow viewports only */\n @media (--viewportRange-narrow) {\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\n @media screen and (min-width: 768px) {\n &:where([data-is-hidden-regular='true']) {\n display: none;\n }\n\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 /* Base position (non-responsive) - applies at regular+ viewports */\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\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 order: var(--region-order-pane-start);\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-is-hidden-wide='true']) {\n display: none;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n }\n}\n\n.PaneVerticalDivider {\n /* Base position (non-responsive) */\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 /* Responsive position */\n @media (--viewportRange-narrow) {\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n\n @media (--viewportRange-regular) {\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\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 /* \n * --pane-max-width is set by JS on mount and updated on resize (debounced).\n * JS calculates viewport - margin to avoid scrollbar discrepancy with 100vw.\n */\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 /* Responsive position */\n @media (--viewportRange-narrow) {\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n\n @media (--viewportRange-regular) {\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\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 &:where([data-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-hidden-wide='true']) {\n display: none;\n }\n }\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/**\n * DraggableHandle - Interactive resize handle\n */\n.DraggableHandle {\n position: absolute;\n inset: 0 -2px;\n cursor: col-resize;\n\n /* Prevent touch scrolling and text selection during drag */\n touch-action: none;\n user-select: none;\n}\n\n.DraggableHandle::before {\n content: '';\n position: absolute;\n inset: 0;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--draggable-handle--bg-color, var(--bgColor-neutral-muted));\n opacity: var(--draggable-handle--drag-opacity, 0);\n transition: var(--draggable-handle--transition, opacity 150ms ease); /* compositor-friendly, disabled during drag */\n border-radius: inherit; /* optional if you need rounded corners */\n}\n\n/* Hover effect */\n.DraggableHandle:hover::before {\n opacity: 1;\n}\n\n/**\n * OPTIMIZATION: CSS containment during drag/resize\n * Direct attribute selectors are O(1) - only the attributed element is invalidated\n * (Unlike descendant selectors which require O(n) traversal)\n */\n.Pane[data-dragging='true'],\n.ContentWrapper[data-dragging='true'] {\n contain: layout style paint;\n pointer-events: none;\n}\n"]}
package/dist/PageLayout/PageLayout.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import './PageLayout-51007c87.css';
1
+ import './PageLayout-bfb9d9e9.css';
2
2
 
3
3
  var classes = {"paneMaxWidthDiffBreakpoint":"1280","paneMaxWidthDiffDefault":"511","PageLayoutRoot":"prc-PageLayout-PageLayoutRoot--KH-d","PageLayoutWrapper":"prc-PageLayout-PageLayoutWrapper-2BhU2","PageLayoutContent":"prc-PageLayout-PageLayoutContent-BneH9","HorizontalDivider":"prc-PageLayout-HorizontalDivider-JLVqp","VerticalDivider":"prc-PageLayout-VerticalDivider-9QRmK","Header":"prc-PageLayout-Header-0of-R","HeaderContent":"prc-PageLayout-HeaderContent-gdFfN","HeaderHorizontalDivider":"prc-PageLayout-HeaderHorizontalDivider-odAHl","ContentWrapper":"prc-PageLayout-ContentWrapper-gR9eG","Content":"prc-PageLayout-Content-xWL-A","PaneWrapper":"prc-PageLayout-PaneWrapper-pHPop","PaneVerticalDivider":"prc-PageLayout-PaneVerticalDivider-le57g","Pane":"prc-PageLayout-Pane-AyzHK","PaneHorizontalDivider":"prc-PageLayout-PaneHorizontalDivider-9tbnE","FooterWrapper":"prc-PageLayout-FooterWrapper-9cB8y","FooterHorizontalDivider":"prc-PageLayout-FooterHorizontalDivider-W-RaS","FooterContent":"prc-PageLayout-FooterContent-HUS0V","DraggableHandle":"prc-PageLayout-DraggableHandle-9s6B4"};
4
4
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.7.0",
4
+ "version": "38.7.1-rc.d3adaab3e",
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",
@@ -114,11 +114,11 @@
114
114
  "@rollup/plugin-node-resolve": "16.0.3",
115
115
  "@rollup/plugin-typescript": "12.3.0",
116
116
  "@rollup/plugin-virtual": "3.0.2",
117
- "@storybook/addon-a11y": "^10.1.10",
118
- "@storybook/addon-docs": "^10.1.10",
119
- "@storybook/addon-links": "^10.1.10",
117
+ "@storybook/addon-a11y": "^10.1.11",
118
+ "@storybook/addon-docs": "^10.1.11",
119
+ "@storybook/addon-links": "^10.1.11",
120
120
  "@storybook/icons": "^2.0.1",
121
- "@storybook/react-vite": "^10.1.10",
121
+ "@storybook/react-vite": "^10.1.11",
122
122
  "@testing-library/dom": "^10.4.0",
123
123
  "@testing-library/jest-dom": "^6.4.5",
124
124
  "@testing-library/react": "^16.3.0",
@@ -172,7 +172,7 @@
172
172
  "rimraf": "5.0.5",
173
173
  "rollup": "4.54.0",
174
174
  "rollup-plugin-import-css": "^0.0.0",
175
- "storybook": "^10.1.10",
175
+ "storybook": "^10.1.11",
176
176
  "terser": "5.36.0",
177
177
  "ts-toolbelt": "9.6.0",
178
178
  "tsx": "4.20.3",
package/dist/PageLayout/PageLayout-51007c87.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/PageLayout/PageLayout.module.css.js"],"names":[],"mappings":"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","file":"PageLayout-51007c87.css","sourcesContent":["/* Exported values for JavaScript consumption */\n:export {\n /* Breakpoint where --pane-max-width-diff changes (used in usePaneWidth.ts) */\n paneMaxWidthDiffBreakpoint: 1280;\n /* Default value for --pane-max-width-diff below the breakpoint */\n paneMaxWidthDiffDefault: 511;\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 /* NOTE: This value is exported via :export for use in usePaneWidth.ts */\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 /* NOTE: This breakpoint value is exported via :export for use in usePaneWidth.ts */\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 /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-variant-narrow='none']) {\n display: none;\n }\n\n &:where([data-variant-narrow='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-narrow='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\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-variant-regular='none']) {\n display: none;\n }\n\n &:where([data-variant-regular='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-regular='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\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-variant-wide='none']) {\n display: none;\n }\n\n &:where([data-variant-wide='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-wide='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\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 /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-variant-narrow='none']) {\n display: none;\n }\n\n &:where([data-variant-narrow='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-narrow='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 /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-variant-regular='none']) {\n display: none;\n }\n\n &:where([data-variant-regular='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-regular='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 /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-variant-wide='none']) {\n display: none;\n }\n\n &:where([data-variant-wide='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-wide='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\n.Header {\n width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n\n &:where([data-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-hidden-wide='true']) {\n display: none;\n }\n }\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 /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-is-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-is-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-is-hidden-wide='true']) {\n display: none;\n }\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 /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-is-hidden-narrow='true']) {\n display: none;\n }\n\n &:where([data-position-narrow='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-narrow='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\n /* Base position (non-responsive) - applies at narrow viewports only */\n @media (--viewportRange-narrow) {\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\n @media screen and (min-width: 768px) {\n &:where([data-is-hidden-regular='true']) {\n display: none;\n }\n\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 /* Base position (non-responsive) - applies at regular+ viewports */\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\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 order: var(--region-order-pane-start);\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-is-hidden-wide='true']) {\n display: none;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n order: var(--region-order-pane-start);\n }\n }\n}\n\n.PaneVerticalDivider {\n /* Base position (non-responsive) */\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 /* Responsive position */\n @media (--viewportRange-narrow) {\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n\n @media (--viewportRange-regular) {\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n margin-right: 0;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n margin-left: 0;\n }\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 /* \n * --pane-max-width is set by JS on mount and updated on resize (debounced).\n * JS calculates viewport - margin to avoid scrollbar discrepancy with 100vw.\n */\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 /* Responsive position */\n @media (--viewportRange-narrow) {\n &:where([data-position-narrow='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-narrow='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n\n @media (--viewportRange-regular) {\n &:where([data-position-regular='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-regular='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\n }\n\n @media (--viewportRange-wide) {\n &:where([data-position-wide='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n margin-bottom: 0;\n }\n\n &:where([data-position-wide='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n margin-top: 0;\n }\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 &:where([data-hidden='true']) {\n display: none;\n }\n\n /* Narrow viewport */\n @media (--viewportRange-narrow) {\n &:where([data-hidden-narrow='true']) {\n display: none;\n }\n }\n\n /* Regular viewport */\n @media (--viewportRange-regular) {\n &:where([data-hidden-regular='true']) {\n display: none;\n }\n }\n\n /* Wide viewport */\n @media (--viewportRange-wide) {\n &:where([data-hidden-wide='true']) {\n display: none;\n }\n }\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/**\n * DraggableHandle - Interactive resize handle\n */\n.DraggableHandle {\n position: absolute;\n inset: 0 -2px;\n cursor: col-resize;\n\n /* Prevent touch scrolling and text selection during drag */\n touch-action: none;\n user-select: none;\n}\n\n.DraggableHandle::before {\n content: '';\n position: absolute;\n inset: 0;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--draggable-handle--bg-color, var(--bgColor-neutral-muted));\n opacity: var(--draggable-handle--drag-opacity, 0);\n transition: var(--draggable-handle--transition, opacity 150ms ease); /* compositor-friendly, disabled during drag */\n border-radius: inherit; /* optional if you need rounded corners */\n}\n\n/* Hover effect */\n.DraggableHandle:hover::before {\n opacity: 1;\n}\n\n/**\n * OPTIMIZATION: CSS containment during drag/resize\n * Direct attribute selectors are O(1) - only the attributed element is invalidated\n * (Unlike descendant selectors which require O(n) traversal)\n */\n.Pane[data-dragging='true'],\n.ContentWrapper[data-dragging='true'] {\n contain: layout style paint;\n pointer-events: none;\n content-visibility: auto;\n}\n"]}