@primer/react 38.7.1-rc.df7efa73c → 38.7.1

package/CHANGELOG.md

@@ -4,8 +4,16 @@
 
 ### Patch Changes
 
+- [#7439](https://github.com/primer/react/pull/7439) [`ceb4337`](https://github.com/primer/react/commit/ceb433733de4dd19effa619b2b4e5bda129a8c6d) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Fix PageLayout whitespace gap on narrow viewports.
+
 - [#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
 
+- [#7408](https://github.com/primer/react/pull/7408) [`e3592d9`](https://github.com/primer/react/commit/e3592d96e0252285dc8e70bb6e69f95199928a74) Thanks [@TylerJDev](https://github.com/TylerJDev)! - ActionMenu: Ensures that uncontrolled ActionMenu(s) retain tab-focus when fullscreen
+
+- [#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.
+
+- [#7431](https://github.com/primer/react/pull/7431) [`43d1d89`](https://github.com/primer/react/commit/43d1d89506476c0ccd5f4c4e4d59589e62715b1c) Thanks [@llastflowers](https://github.com/llastflowers)! - Fix positioning of Autocomplete overlay menu when tokens are present
+
 ## 38.7.0
 
 ### Minor Changes

package/dist/ActionMenu/ActionMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAElF,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAE5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAI5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAC1C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAIrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,sBAAsB,CAAA;AAE1E,MAAM,MAAM,gBAAgB,GAAG,CAC7B,OAAO,EAAE,cAAc,GAAG,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,aAAa,GAAG,YAAY,GAAG,OAAO,KAClG,IAAI,CAAA;AAET,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,oBAAoB,EACpB,WAAW,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAC9D,GAAG;IACF,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IAEH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAE7D;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACpC,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAA;AAsI3C,MAAM,MAAM,qBAAqB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AA0DxH,6CAA6C;AAC7C,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAA;AAe/C,KAAK,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,GAC3C,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IACzD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE;QAAC,QAAQ,EAAE,cAAc,CAAA;KAAC,KAAK,IAAI,CAAA;CACpE,CAAA;AAyFH,eAAO,MAAM,UAAU;;;kBArKP,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC;aAC5B,MAAM;;;;CAoK4E,CAAA"}
+{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAElF,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAE5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAI5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAC1C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAIrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,sBAAsB,CAAA;AAE1E,MAAM,MAAM,gBAAgB,GAAG,CAC7B,OAAO,EAAE,cAAc,GAAG,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,aAAa,GAAG,YAAY,GAAG,OAAO,KAClG,IAAI,CAAA;AAET,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,oBAAoB,EACpB,WAAW,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAC9D,GAAG;IACF,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IAEH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAE7D;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACpC,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAA;AAsI3C,MAAM,MAAM,qBAAqB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AA0DxH,6CAA6C;AAC7C,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAA;AAe/C,KAAK,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,GAC3C,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IACzD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE;QAAC,QAAQ,EAAE,cAAc,CAAA;KAAC,KAAK,IAAI,CAAA;CACpE,CAAA;AAsGH,eAAO,MAAM,UAAU;;;kBAlLP,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC;aAC5B,MAAM;;;;CAiL4E,CAAA"}

package/dist/ActionMenu/ActionMenu.js

@@ -224,15 +224,22 @@ const Overlay = ({
     isSubmenu = false
   } = React.useContext(MenuContext);
   const containerRef = React.useRef(null);
-  useMenuKeyboardNavigation(open, onClose, containerRef, anchorRef, isSubmenu);
   const isNarrow = useResponsiveValue({
     narrow: true
   }, false);
+  const isNarrowFullscreen = !!isNarrow && variant.narrow === 'fullscreen';
+  const handleClose = React.useCallback(gesture => {
+    // In narrow fullscreen mode, don't close on tab, let focus stay in the menu
+    if (isNarrowFullscreen && gesture === 'tab') {
+      return;
+    }
+    onClose === null || onClose === void 0 ? void 0 : onClose(gesture);
+  }, [isNarrowFullscreen, onClose]);
+  useMenuKeyboardNavigation(open, handleClose, containerRef, anchorRef, isSubmenu);
   const responsiveVariant = useResponsiveValue(variant, {
     regular: 'anchored',
     narrow: 'anchored'
   });
-  const isNarrowFullscreen = !!isNarrow && variant.narrow === 'fullscreen';
 
   // If the menu anchor is an icon button, we need to label the menu by tooltip that also labelled the anchor.
   const [anchorAriaLabelledby, setAnchorAriaLabelledby] = useState(null);
@@ -252,7 +259,7 @@ const Overlay = ({
     anchorId: anchorId,
     open: open,
     onOpen: onOpen,
-    onClose: onClose,
+    onClose: handleClose,
     align: align,
     side: side !== null && side !== void 0 ? side : isSubmenu ? 'outside-right' : 'outside-bottom',
     overlayProps: overlayProps,

package/dist/Autocomplete/AutocompleteOverlay.d.ts.map

@@ -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;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"}
+{"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,4BAwDlC;kBA9DQ,mBAAmB;;;;AAkE5B,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACjF,eAAe,mBAAmB,CAAA"}

package/dist/Autocomplete/AutocompleteOverlay.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import { useContext } from 'react';
+import { useContext, useRef, useEffect } from 'react';
 import { AutocompleteContext } from './AutocompleteContext.js';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import VisuallyHidden from '../_VisuallyHidden.js';
@@ -12,7 +12,7 @@ import Overlay from '../Overlay/Overlay.js';
 // TODO: consider making 'aria-labelledby' required
 
 function AutocompleteOverlay(t0) {
-  const $ = c(26);
+  const $ = c(29);
   let children;
   let className;
   let menuAnchorRef;
@@ -64,50 +64,69 @@ function AutocompleteOverlay(t0) {
     showMenu: t2
   } = autocompleteContext;
   const showMenu = t2 === undefined ? false : t2;
-  const t3 = menuAnchorRef ? menuAnchorRef : inputRef;
+  const computedAnchorRef = useRef(null);
+  let t3;
   let t4;
-  if ($[9] !== t3) {
-    t4 = {
-      side: "outside-bottom",
-      align: "start",
-      anchorElementRef: t3
+  if ($[9] !== inputRef || $[10] !== menuAnchorRef) {
+    t3 = () => {
+      var _menuAnchorRef$curren, _menuAnchorRef, _tokensContainer$pare, _ref;
+      const explicit = (_menuAnchorRef$curren = (_menuAnchorRef = menuAnchorRef) === null || _menuAnchorRef === void 0 ? void 0 : _menuAnchorRef.current) !== null && _menuAnchorRef$curren !== void 0 ? _menuAnchorRef$curren : null;
+      const tokensContainer = inputRef.current ? inputRef.current.closest("[data-prevent-token-wrapping]") : null;
+      const tokensRoot = (_tokensContainer$pare = tokensContainer === null || tokensContainer === void 0 ? void 0 : tokensContainer.parentElement) !== null && _tokensContainer$pare !== void 0 ? _tokensContainer$pare : null;
+      computedAnchorRef.current = (_ref = explicit !== null && explicit !== void 0 ? explicit : tokensRoot) !== null && _ref !== void 0 ? _ref : inputRef.current;
     };
-    $[9] = t3;
-    $[10] = t4;
+    t4 = [menuAnchorRef, inputRef];
+    $[9] = inputRef;
+    $[10] = menuAnchorRef;
+    $[11] = t3;
+    $[12] = t4;
   } else {
-    t4 = $[10];
+    t3 = $[11];
+    t4 = $[12];
   }
+  useEffect(t3, t4);
   let t5;
-  if ($[11] !== selectedItemLength || $[12] !== showMenu) {
-    t5 = [showMenu, selectedItemLength];
-    $[11] = selectedItemLength;
-    $[12] = showMenu;
+  if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      side: "outside-bottom",
+      align: "start",
+      anchorElementRef: computedAnchorRef
+    };
     $[13] = t5;
   } else {
     t5 = $[13];
   }
+  let t6;
+  if ($[14] !== selectedItemLength || $[15] !== showMenu) {
+    t6 = [showMenu, selectedItemLength];
+    $[14] = selectedItemLength;
+    $[15] = showMenu;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
   const {
     floatingElementRef,
     position
-  } = useAnchoredPosition(t4, t5);
+  } = useAnchoredPosition(t5, t6);
   useRefObjectAsForwardedRef(scrollContainerRef, floatingElementRef);
-  let t6;
-  if ($[14] !== setShowMenu) {
-    t6 = () => {
+  let t7;
+  if ($[17] !== setShowMenu) {
+    t7 = () => {
       setShowMenu(false);
     };
-    $[14] = setShowMenu;
-    $[15] = t6;
+    $[17] = setShowMenu;
+    $[18] = t7;
   } else {
-    t6 = $[15];
+    t7 = $[18];
   }
-  const closeOptionList = t6;
+  const closeOptionList = t7;
   if (typeof window === "undefined") {
     return null;
   }
-  let t7;
-  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) {
-    t7 = showMenu ? /*#__PURE__*/jsx(Overlay, {
+  let t8;
+  if ($[19] !== children || $[20] !== className || $[21] !== closeOptionList || $[22] !== floatingElementRef || $[23] !== inputRef || $[24] !== overlayProps || $[25] !== (position === null || position === void 0 ? void 0 : position.left) || $[26] !== (position === null || position === void 0 ? void 0 : position.top) || $[27] !== showMenu) {
+    t8 = showMenu ? /*#__PURE__*/jsx(Overlay, {
       returnFocusRef: inputRef,
       preventFocusOnOpen: true,
       onClickOutside: closeOptionList,
@@ -122,20 +141,20 @@ function AutocompleteOverlay(t0) {
       "aria-hidden": "true",
       children: children
     });
-    $[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;
-    $[25] = t7;
+    $[19] = children;
+    $[20] = className;
+    $[21] = closeOptionList;
+    $[22] = floatingElementRef;
+    $[23] = inputRef;
+    $[24] = overlayProps;
+    $[25] = position === null || position === void 0 ? void 0 : position.left;
+    $[26] = position === null || position === void 0 ? void 0 : position.top;
+    $[27] = showMenu;
+    $[28] = t8;
   } else {
-    t7 = $[25];
+    t8 = $[28];
   }
-  return t7;
+  return t8;
 }
 AutocompleteOverlay.displayName = 'AutocompleteOverlay';
 AutocompleteOverlay.__SLOT__ = Symbol('Autocomplete.Overlay');

package/dist/PageLayout/PageLayout-856d8bbe.css

@@ -0,0 +1,2 @@
+.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%}@media (max-width:calc(48rem - 0.02px)){.prc-PageLayout-PageLayoutContent-BneH9{flex-direction:column}}.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}
+/*# sourceMappingURL=PageLayout-856d8bbe.css.map */

package/dist/PageLayout/PageLayout-856d8bbe.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/PageLayout/PageLayout.module.css.js"],"names":[],"mappings":"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","file":"PageLayout-856d8bbe.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  @media (--viewportRange-narrow) {\n    flex-direction: column;\n  }\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

@@ -1,4 +1,4 @@
-import './PageLayout-51007c87.css';
+import './PageLayout-856d8bbe.css';
 
 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"};
 

package/generated/components.json

@@ -1011,7 +1011,7 @@
         },
         {
           "id": "components-autocomplete-features--with-callback-when-overlay-open-state-changes",
-          "code": "() => {\n  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)\n  const onOpenChange = (isOpen: boolean) => {\n    setIsMenuOpen(isOpen)\n  }\n  return (\n    <Stack as=\"form\" padding=\"normal\">\n      <FormControl>\n        <FormControl.Label id=\"autocompleteLabel\">\n          Default label\n        </FormControl.Label>\n        <Autocomplete>\n          <Autocomplete.Input />\n          <Autocomplete.Overlay>\n            <Autocomplete.Menu\n              items={items}\n              selectedItemIds={[]}\n              onOpenChange={onOpenChange}\n              aria-labelledby=\"autocompleteLabel\"\n            />\n          </Autocomplete.Overlay>\n        </Autocomplete>\n      </FormControl>\n      <div>\n        The menu is <strong>{isMenuOpen ? 'opened' : 'closed'}</strong>\n      </div>\n    </Stack>\n  )\n}"
+          "code": "() => {\n  const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)\n  const onOpenChange = (isOpen: boolean) => {\n    setIsMenuOpen(isOpen)\n  }\n  return (\n    <Stack as=\"form\" padding=\"normal\">\n      <div className={classes.InputWithStateLabel}>\n        <div>\n          <FormControl>\n            <FormControl.Label id=\"autocompleteLabel\">\n              Default label\n            </FormControl.Label>\n            <Autocomplete>\n              <Autocomplete.Input />\n              <Autocomplete.Overlay>\n                <Autocomplete.Menu\n                  items={items}\n                  selectedItemIds={[]}\n                  onOpenChange={onOpenChange}\n                  aria-labelledby=\"autocompleteLabel\"\n                />\n              </Autocomplete.Overlay>\n            </Autocomplete>\n          </FormControl>\n        </div>\n\n        <div className={classes.StateLabelInline}>\n          The menu is <strong>{isMenuOpen ? 'open' : 'closed'}</strong>\n        </div>\n      </div>\n    </Stack>\n  )\n}"
         },
         {
           "id": "components-autocomplete-features--async-loading-of-items",

package/package.json

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

package/dist/PageLayout/PageLayout-51007c87.css

@@ -1,2 +0,0 @@
-.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}
-/*# sourceMappingURL=PageLayout-51007c87.css.map */

package/dist/PageLayout/PageLayout-51007c87.css.map

@@ -1 +0,0 @@
-{"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"]}