@primer/react 38.6.0 → 38.6.1

package/dist/PageLayout/PageLayout.module.css.js

@@ -1,5 +1,5 @@
-import './PageLayout-28a244f7.css';
+import './PageLayout-c092f3db.css';
 
-var classes = {"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"};
+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"};
 
 export { classes as default };

package/dist/PageLayout/usePaneWidth.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+type Measurement = `${number}px`;
+export type CustomWidthOptions = {
+    min: Measurement;
+    default: Measurement;
+    max: Measurement;
+};
+export type PaneWidth = 'small' | 'medium' | 'large';
+export type UsePaneWidthOptions = {
+    width: PaneWidth | CustomWidthOptions;
+    minWidth: number;
+    resizable: boolean;
+    widthStorageKey: string;
+    paneRef: React.RefObject<HTMLDivElement | null>;
+    handleRef: React.RefObject<HTMLDivElement | null>;
+};
+export type UsePaneWidthResult = {
+    /** Current width for React state (used in ARIA attributes) */
+    currentWidth: number;
+    /** Mutable ref tracking width during drag operations */
+    currentWidthRef: React.MutableRefObject<number>;
+    /** Minimum allowed pane width */
+    minPaneWidth: number;
+    /** Maximum allowed pane width (updates on viewport resize) */
+    maxPaneWidth: number;
+    /** Calculate current max width constraint */
+    getMaxPaneWidth: () => number;
+    /** Persist width to localStorage and sync React state */
+    saveWidth: (value: number) => void;
+    /** Reset to default width */
+    getDefaultWidth: () => number;
+};
+/**
+ * Default value for --pane-max-width-diff CSS variable.
+ * Imported from CSS to ensure JS fallback matches the CSS default.
+ */
+export declare const DEFAULT_MAX_WIDTH_DIFF: number;
+/**
+ * Default max pane width for SSR when viewport is unknown.
+ * Updated to actual value in layout effect before paint.
+ */
+export declare const SSR_DEFAULT_MAX_WIDTH = 600;
+/**
+ * Pixel increment for keyboard arrow key resizing.
+ * @see https://github.com/github/accessibility/issues/5101#issuecomment-1822870655
+ */
+export declare const ARROW_KEY_STEP = 3;
+/** Default widths for preset size options */
+export declare const defaultPaneWidth: Record<PaneWidth, number>;
+export declare const isCustomWidthOptions: (width: PaneWidth | CustomWidthOptions) => width is CustomWidthOptions;
+export declare const isPaneWidth: (width: PaneWidth | CustomWidthOptions) => width is PaneWidth;
+export declare const getDefaultPaneWidth: (w: PaneWidth | CustomWidthOptions) => number;
+/**
+ * Gets the --pane-max-width-diff CSS variable value from a pane element.
+ * This value is set by CSS media queries and controls the max pane width constraint.
+ * Note: This calls getComputedStyle which forces layout - cache the result when possible.
+ */
+export declare function getPaneMaxWidthDiff(paneElement: HTMLElement | null): number;
+export declare const updateAriaValues: (handle: HTMLElement | null, values: {
+    current?: number;
+    min?: number;
+    max?: number;
+}) => void;
+/**
+ * Manages pane width state with localStorage persistence and viewport constraints.
+ * Handles initialization from storage, clamping on viewport resize, and provides
+ * functions to save and reset width.
+ */
+export declare function usePaneWidth({ width, minWidth, resizable, widthStorageKey, paneRef, handleRef, }: UsePaneWidthOptions): UsePaneWidthResult;
+export {};
+//# sourceMappingURL=usePaneWidth.d.ts.map

package/dist/PageLayout/usePaneWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaneWidth.d.ts","sourceRoot":"","sources":["../../src/PageLayout/usePaneWidth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAQ5C,KAAK,WAAW,GAAG,GAAG,MAAM,IAAI,CAAA;AAEhC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,GAAG,EAAE,WAAW,CAAA;IAChB,OAAO,EAAE,WAAW,CAAA;IACpB,GAAG,EAAE,WAAW,CAAA;CACjB,CAAA;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEpD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,SAAS,GAAG,kBAAkB,CAAA;IACrC,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,OAAO,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC/C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;CAClD,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAA;IACpB,wDAAwD;IACxD,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/C,iCAAiC;IACjC,YAAY,EAAE,MAAM,CAAA;IACpB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAA;IACpB,6CAA6C;IAC7C,eAAe,EAAE,MAAM,MAAM,CAAA;IAC7B,yDAAyD;IACzD,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,6BAA6B;IAC7B,eAAe,EAAE,MAAM,MAAM,CAAA;CAC9B,CAAA;AAKD;;;GAGG;AACH,eAAO,MAAM,sBAAsB,QAA6C,CAAA;AAIhF;;;GAGG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAA;AAExC;;;GAGG;AACH,eAAO,MAAM,cAAc,IAAI,CAAA;AAE/B,6CAA6C;AAC7C,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAAyC,CAAA;AAKhG,eAAO,MAAM,oBAAoB,GAAI,OAAO,SAAS,GAAG,kBAAkB,KAAG,KAAK,IAAI,kBAGrF,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,SAAS,GAAG,kBAAkB,KAAG,KAAK,IAAI,SAE5E,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,GAAG,SAAS,GAAG,kBAAkB,KAAG,MAOvE,CAAA;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,WAAW,GAAG,IAAI,GAAG,MAAM,CAI3E;AAID,eAAO,MAAM,gBAAgB,GAC3B,QAAQ,WAAW,GAAG,IAAI,EAC1B,QAAQ;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAC,SASvD,CAAA;AAKD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,eAAe,EACf,OAAO,EACP,SAAS,GACV,EAAE,mBAAmB,GAAG,kBAAkB,CA8L1C"}

package/dist/PageLayout/usePaneWidth.js

@@ -0,0 +1,283 @@
+import React, { startTransition } from 'react';
+import { canUseDOM } from '../utils/environment.js';
+import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
+import classes from './PageLayout.module.css.js';
+
+// ----------------------------------------------------------------------------
+// Types
+
+// ----------------------------------------------------------------------------
+// Constants
+
+/**
+ * Default value for --pane-max-width-diff CSS variable.
+ * Imported from CSS to ensure JS fallback matches the CSS default.
+ */
+const DEFAULT_MAX_WIDTH_DIFF = Number(classes.paneMaxWidthDiffDefault);
+
+// --pane-max-width-diff changes at this breakpoint in PageLayout.module.css.
+const DEFAULT_PANE_MAX_WIDTH_DIFF_BREAKPOINT = Number(classes.paneMaxWidthDiffBreakpoint);
+/**
+ * Default max pane width for SSR when viewport is unknown.
+ * Updated to actual value in layout effect before paint.
+ */
+const SSR_DEFAULT_MAX_WIDTH = 600;
+
+/**
+ * Pixel increment for keyboard arrow key resizing.
+ * @see https://github.com/github/accessibility/issues/5101#issuecomment-1822870655
+ */
+const ARROW_KEY_STEP = 3;
+
+/** Default widths for preset size options */
+const defaultPaneWidth = {
+  small: 256,
+  medium: 296,
+  large: 320
+};
+
+// ----------------------------------------------------------------------------
+// Helper functions
+
+const isCustomWidthOptions = width => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  return width.default !== undefined;
+};
+const isPaneWidth = width => {
+  return ['small', 'medium', 'large'].includes(width);
+};
+const getDefaultPaneWidth = w => {
+  if (isPaneWidth(w)) {
+    return defaultPaneWidth[w];
+  } else if (isCustomWidthOptions(w)) {
+    return parseInt(w.default, 10);
+  }
+  return 0;
+};
+
+/**
+ * Gets the --pane-max-width-diff CSS variable value from a pane element.
+ * This value is set by CSS media queries and controls the max pane width constraint.
+ * Note: This calls getComputedStyle which forces layout - cache the result when possible.
+ */
+function getPaneMaxWidthDiff(paneElement) {
+  if (!paneElement) return DEFAULT_MAX_WIDTH_DIFF;
+  const value = parseInt(getComputedStyle(paneElement).getPropertyValue('--pane-max-width-diff'), 10);
+  return value > 0 ? value : DEFAULT_MAX_WIDTH_DIFF;
+}
+
+// Helper to update ARIA slider attributes via direct DOM manipulation
+// This avoids re-renders when values change during drag or on viewport resize
+const updateAriaValues = (handle, values) => {
+  if (!handle) return;
+  if (values.min !== undefined) handle.setAttribute('aria-valuemin', String(values.min));
+  if (values.max !== undefined) handle.setAttribute('aria-valuemax', String(values.max));
+  if (values.current !== undefined) {
+    handle.setAttribute('aria-valuenow', String(values.current));
+    handle.setAttribute('aria-valuetext', `Pane width ${values.current} pixels`);
+  }
+};
+
+// ----------------------------------------------------------------------------
+// Hook
+
+/**
+ * Manages pane width state with localStorage persistence and viewport constraints.
+ * Handles initialization from storage, clamping on viewport resize, and provides
+ * functions to save and reset width.
+ */
+function usePaneWidth({
+  width,
+  minWidth,
+  resizable,
+  widthStorageKey,
+  paneRef,
+  handleRef
+}) {
+  // Derive constraints from width configuration
+  const isCustomWidth = isCustomWidthOptions(width);
+  const minPaneWidth = isCustomWidth ? parseInt(width.min, 10) : minWidth;
+  const customMaxWidth = isCustomWidth ? parseInt(width.max, 10) : null;
+
+  // Cache the CSS variable value to avoid getComputedStyle during drag (causes layout thrashing)
+  // Updated on mount and resize when breakpoints might change
+  const maxWidthDiffRef = React.useRef(DEFAULT_MAX_WIDTH_DIFF);
+
+  // Calculate max width constraint - for custom widths this is fixed, otherwise viewport-dependent
+  const getMaxPaneWidth = React.useCallback(() => {
+    if (customMaxWidth !== null) return customMaxWidth;
+    const viewportWidth = window.innerWidth;
+    return viewportWidth > 0 ? Math.max(minPaneWidth, viewportWidth - maxWidthDiffRef.current) : minPaneWidth;
+  }, [customMaxWidth, minPaneWidth]);
+
+  // --- State ---
+  // Current width for React renders (ARIA attributes). Updates go through saveWidth() or clamp on resize.
+  //
+  // NOTE: We read from localStorage during initial state to avoid a visible resize flicker
+  // when the stored width differs from the default. This causes a React hydration mismatch
+  // (server renders default width, client renders stored width), but we handle this with
+  // suppressHydrationWarning on the Pane element. The mismatch only affects the --pane-width
+  // CSS variable, not DOM structure or children.
+  const [currentWidth, setCurrentWidth] = React.useState(() => {
+    const defaultWidth = getDefaultPaneWidth(width);
+    if (!resizable || !canUseDOM) {
+      return defaultWidth;
+    }
+    try {
+      const storedWidth = localStorage.getItem(widthStorageKey);
+      if (storedWidth !== null) {
+        const parsed = Number(storedWidth);
+        if (!isNaN(parsed) && parsed > 0) {
+          return parsed;
+        }
+      }
+    } catch {
+      // localStorage unavailable - keep default
+    }
+    return defaultWidth;
+  });
+  // Mutable ref for drag operations - avoids re-renders on every pixel move
+  const currentWidthRef = React.useRef(currentWidth);
+  // Max width for ARIA - SSR uses custom max or a sensible default, updated on mount
+  const [maxPaneWidth, setMaxPaneWidth] = React.useState(() => customMaxWidth !== null && customMaxWidth !== void 0 ? customMaxWidth : SSR_DEFAULT_MAX_WIDTH);
+
+  // --- Callbacks ---
+  const getDefaultWidth = React.useCallback(() => getDefaultPaneWidth(width), [width]);
+  const saveWidth = React.useCallback(value => {
+    currentWidthRef.current = value;
+    setCurrentWidth(value);
+    try {
+      localStorage.setItem(widthStorageKey, value.toString());
+    } catch {
+      // Ignore write errors (private browsing, quota exceeded, etc.)
+    }
+  }, [widthStorageKey]);
+
+  // --- Effects ---
+  // Stable ref to getMaxPaneWidth for use in resize handler without re-subscribing
+  const getMaxPaneWidthRef = React.useRef(getMaxPaneWidth);
+  useIsomorphicLayoutEffect(() => {
+    getMaxPaneWidthRef.current = getMaxPaneWidth;
+  });
+
+  // Update CSS variable, refs, and ARIA on mount and window resize.
+  // Strategy:
+  // 1. Throttled (16ms): Update --pane-max-width CSS variable for immediate visual clamp
+  // 2. Debounced (150ms): Sync refs, ARIA, and React state when resize stops
+  useIsomorphicLayoutEffect(() => {
+    var _paneRef$current4;
+    if (!resizable) return;
+    let lastViewportWidth = window.innerWidth;
+
+    // Quick CSS-only update for immediate visual feedback (throttled)
+    const updateCSSOnly = () => {
+      var _paneRef$current;
+      const actualMax = getMaxPaneWidthRef.current();
+      (_paneRef$current = paneRef.current) === null || _paneRef$current === void 0 ? void 0 : _paneRef$current.style.setProperty('--pane-max-width', `${actualMax}px`);
+    };
+
+    // Full sync of refs, ARIA, and state (debounced, runs when resize stops)
+    const syncAll = () => {
+      var _paneRef$current2;
+      const currentViewportWidth = window.innerWidth;
+
+      // Only call getComputedStyle if we crossed the breakpoint (expensive)
+      const crossedBreakpoint = lastViewportWidth < DEFAULT_PANE_MAX_WIDTH_DIFF_BREAKPOINT && currentViewportWidth >= DEFAULT_PANE_MAX_WIDTH_DIFF_BREAKPOINT || lastViewportWidth >= DEFAULT_PANE_MAX_WIDTH_DIFF_BREAKPOINT && currentViewportWidth < DEFAULT_PANE_MAX_WIDTH_DIFF_BREAKPOINT;
+      lastViewportWidth = currentViewportWidth;
+      if (crossedBreakpoint) {
+        maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current);
+      }
+      const actualMax_0 = getMaxPaneWidthRef.current();
+
+      // Update CSS variable for visual clamping (may already be set by throttled update)
+      (_paneRef$current2 = paneRef.current) === null || _paneRef$current2 === void 0 ? void 0 : _paneRef$current2.style.setProperty('--pane-max-width', `${actualMax_0}px`);
+
+      // Track if we clamped current width
+      const wasClamped = currentWidthRef.current > actualMax_0;
+      if (wasClamped) {
+        var _paneRef$current3;
+        currentWidthRef.current = actualMax_0;
+        (_paneRef$current3 = paneRef.current) === null || _paneRef$current3 === void 0 ? void 0 : _paneRef$current3.style.setProperty('--pane-width', `${actualMax_0}px`);
+      }
+
+      // Update ARIA via DOM - cheap, no React re-render
+      updateAriaValues(handleRef.current, {
+        max: actualMax_0,
+        current: currentWidthRef.current
+      });
+
+      // Defer state updates so parent re-renders see accurate values
+      startTransition(() => {
+        setMaxPaneWidth(actualMax_0);
+        if (wasClamped) {
+          setCurrentWidth(actualMax_0);
+        }
+      });
+    };
+
+    // Initial calculation on mount
+    maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current);
+    const initialMax = getMaxPaneWidthRef.current();
+    setMaxPaneWidth(initialMax);
+    (_paneRef$current4 = paneRef.current) === null || _paneRef$current4 === void 0 ? void 0 : _paneRef$current4.style.setProperty('--pane-max-width', `${initialMax}px`);
+    updateAriaValues(handleRef.current, {
+      min: minPaneWidth,
+      max: initialMax,
+      current: currentWidthRef.current
+    });
+
+    // For custom widths, max is fixed - no need to listen to resize
+    if (customMaxWidth !== null) return;
+
+    // Throttle CSS updates (16ms ≈ 60fps), debounce full sync (150ms)
+    const THROTTLE_MS = 16;
+    const DEBOUNCE_MS = 150;
+    let rafId = null;
+    let debounceId = null;
+    let lastThrottleTime = 0;
+    const handleResize = () => {
+      const now = Date.now();
+
+      // Throttled CSS update for immediate visual feedback
+      if (now - lastThrottleTime >= THROTTLE_MS) {
+        lastThrottleTime = now;
+        updateCSSOnly();
+      } else if (rafId === null) {
+        // Schedule next frame if we're within throttle window
+        rafId = requestAnimationFrame(() => {
+          rafId = null;
+          lastThrottleTime = Date.now();
+          updateCSSOnly();
+        });
+      }
+
+      // Debounced full sync (refs, ARIA, state) when resize stops
+      if (debounceId !== null) {
+        clearTimeout(debounceId);
+      }
+      debounceId = setTimeout(() => {
+        debounceId = null;
+        syncAll();
+      }, DEBOUNCE_MS);
+    };
+
+    // eslint-disable-next-line github/prefer-observers -- Uses window resize events instead of ResizeObserver to avoid INP issues. ResizeObserver on document.documentElement fires on any content change (typing, etc), while window resize only fires on actual viewport changes.
+    window.addEventListener('resize', handleResize);
+    return () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      if (debounceId !== null) clearTimeout(debounceId);
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [resizable, customMaxWidth, minPaneWidth, paneRef, handleRef]);
+  return {
+    currentWidth,
+    currentWidthRef,
+    minPaneWidth,
+    maxPaneWidth,
+    getMaxPaneWidth,
+    saveWidth,
+    getDefaultWidth
+  };
+}
+
+export { ARROW_KEY_STEP, DEFAULT_MAX_WIDTH_DIFF, SSR_DEFAULT_MAX_WIDTH, defaultPaneWidth, getDefaultPaneWidth, getPaneMaxWidthDiff, isCustomWidthOptions, isPaneWidth, updateAriaValues, usePaneWidth };

package/dist/PageLayout/usePaneWidth.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=usePaneWidth.test.d.ts.map

package/dist/PageLayout/usePaneWidth.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePaneWidth.test.d.ts","sourceRoot":"","sources":["../../src/PageLayout/usePaneWidth.test.ts"],"names":[],"mappings":""}

package/package.json

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

package/dist/PageLayout/PageLayout-28a244f7.css

@@ -1,2 +0,0 @@
-body[data-page-layout-dragging=true]{cursor:col-resize}body[data-page-layout-dragging=true] *{-webkit-user-select:none;user-select:none}.prc-PageLayout-PageLayoutRoot--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{background-color:transparent;cursor:col-resize;inset:0 -2px;position:absolute;transition-delay:.1s}.prc-PageLayout-DraggableHandle-9s6B4:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle))}.prc-PageLayout-DraggableHandle-9s6B4[data-dragging=true],.prc-PageLayout-DraggableHandle-9s6B4[data-dragging=true]:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis))}
-/*# sourceMappingURL=PageLayout-28a244f7.css.map */

package/dist/PageLayout/PageLayout-28a244f7.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/PageLayout/PageLayout.module.css.js"],"names":[],"mappings":"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","file":"PageLayout-28a244f7.css","sourcesContent":["/* Maintain resize cursor while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] {\n  cursor: col-resize;\n}\n\n/* Disable text selection while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] * {\n  user-select: none;\n}\n\n.PageLayoutRoot {\n  /* Region Order */\n  --region-order-header: 0;\n  --region-order-pane-start: 1;\n  --region-order-content: 2;\n  --region-order-pane-end: 3;\n  --region-order-footer: 4;\n\n  /* Spacing Values */\n  --spacing-none: 0;\n  --spacing-condensed: var(--base-size-16);\n  --spacing-normal: var(--base-size-16);\n\n  @media screen and (min-width: 1012px) {\n    --spacing-normal: var(--base-size-24);\n  }\n\n  /* Pane Width Values */\n  --pane-width-small: 100%;\n  --pane-width-medium: 100%;\n  --pane-width-large: 100%;\n  --pane-max-width-diff: 511px;\n\n  @media screen and (min-width: 768px) {\n    --pane-width-small: 240px;\n    --pane-width-medium: 256px;\n    --pane-width-large: 256px;\n  }\n\n  @media screen and (min-width: 1012px) {\n    --pane-width-small: 256px;\n    --pane-width-medium: 296px;\n    --pane-width-large: 320px;\n  }\n\n  @media screen and (min-width: 1280px) {\n    --pane-max-width-diff: 959px;\n  }\n\n  /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */\n  --spacing: 0;\n  --spacing-row: 0;\n  --spacing-column: 0;\n  --spacing-divider: 0;\n  --offset-header: 0;\n  --pane-width: 0;\n  --pane-min-width: 0;\n  --pane-max-width: 0;\n  --pane-width-custom: 0;\n  --pane-width-size: 0;\n\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--spacing);\n}\n\n.PageLayoutWrapper {\n  display: flex;\n  margin-right: auto;\n  margin-left: auto;\n  flex-wrap: wrap;\n  /* the wrapper should match the Root's dimensions by default */\n  width: 100%;\n  height: 100%;\n\n  &:where([data-width='medium']) {\n    max-width: 768px;\n  }\n\n  &:where([data-width='large']) {\n    max-width: 1012px;\n  }\n\n  &:where([data-width='full']) {\n    max-width: 100%;\n  }\n\n  &:where([data-width='xlarge']) {\n    max-width: 1280px;\n  }\n}\n\n.PageLayoutContent {\n  display: flex;\n  flex: 1 1 100%;\n  flex-wrap: wrap;\n  max-width: 100%;\n}\n\n.HorizontalDivider {\n  /* stylelint-disable-next-line primer/spacing */\n  margin-right: calc(-1 * var(--spacing-divider));\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: calc(-1 * var(--spacing-divider));\n\n  &:where([data-variant='none']) {\n    display: none;\n  }\n\n  &:where([data-variant='line']) {\n    display: block;\n    height: 1px;\n    /* stylelint-disable-next-line primer/colors */\n    background-color: var(--borderColor-default);\n  }\n\n  &:where([data-variant='filled']) {\n    display: block;\n    height: var(--base-size-8);\n    background-color: var(--bgColor-inset);\n    box-shadow:\n      /* stylelint-disable-next-line primer/box-shadow */\n      inset 0 -1px 0 0 var(--borderColor-default),\n      inset 0 1px 0 0 var(--borderColor-default);\n  }\n\n  /* 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      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.DraggableHandle {\n  position: absolute;\n  inset: 0 -2px;\n  cursor: col-resize;\n  background-color: transparent;\n  transition-delay: 0.1s;\n}\n\n.DraggableHandle:hover {\n  background-color: var(--bgColor-neutral-muted);\n}\n\n.DraggableHandle[data-dragging='true'] {\n  background-color: var(--bgColor-accent-emphasis);\n}\n\n.DraggableHandle[data-dragging='true']:hover {\n  background-color: var(--bgColor-accent-emphasis);\n}\n"]}