@primer/react 38.6.3-rc.f8f5fddc3 → 38.7.0-rc.b626e5d83

package/dist/PageLayout/PageLayout.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import React, { useRef } from 'react';
+import React, { useRef, memo } from 'react';
 import { clsx } from 'clsx';
 import { useId } from '../hooks/useId.js';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
@@ -10,8 +10,11 @@ import { warning } from '../utils/warning.js';
 import { getResponsiveAttributes } from '../internal/utils/getResponsiveAttributes.js';
 import classes from './PageLayout.module.css.js';
 import { usePaneWidth, isCustomWidthOptions, isPaneWidth, updateAriaValues, ARROW_KEY_STEP } from './usePaneWidth.js';
+import { setDraggingStyles, removeDraggingStyles } from './paneUtils.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+const isArrowKey = key => key === 'ArrowLeft' || key === 'ArrowRight' || key === 'ArrowUp' || key === 'ArrowDown';
+const isShrinkKey = key => key === 'ArrowLeft' || key === 'ArrowDown';
 const PageLayoutContext = /*#__PURE__*/React.createContext({
   padding: 'normal',
   rowGap: 'normal',
@@ -19,14 +22,14 @@ const PageLayoutContext = /*#__PURE__*/React.createContext({
   paneRef: {
     current: null
   },
-  contentRef: {
+  contentWrapperRef: {
     current: null
   }
 });
 
 // TODO: refs
 const Root = t0 => {
-  const $ = c(26);
+  const $ = c(22);
   const {
     containerWidth: t1,
     padding: t2,
@@ -42,7 +45,7 @@ const Root = t0 => {
   const rowGap = t3 === undefined ? "normal" : t3;
   const columnGap = t4 === undefined ? "normal" : t4;
   const paneRef = useRef(null);
-  const contentRef = useRef(null);
+  const contentWrapperRef = useRef(null);
   let t5;
   if ($[0] !== slotsConfig) {
     t5 = slotsConfig !== null && slotsConfig !== void 0 ? slotsConfig : {
@@ -62,7 +65,7 @@ const Root = t0 => {
       rowGap,
       columnGap,
       paneRef,
-      contentRef
+      contentWrapperRef
     };
     $[2] = columnGap;
     $[3] = padding;
@@ -72,97 +75,122 @@ const Root = t0 => {
     t6 = $[5];
   }
   const memoizedContextValue = t6;
-  const t7 = `var(--spacing-${padding})`;
+  const t7 = slots.header;
   let t8;
-  if ($[6] !== style || $[7] !== t7) {
-    t8 = {
-      "--spacing": t7,
-      ...style
-    };
-    $[6] = style;
-    $[7] = t7;
-    $[8] = t8;
-  } else {
-    t8 = $[8];
-  }
-  const t9 = t8;
-  let t10;
-  if ($[9] !== className) {
-    t10 = clsx(classes.PageLayoutRoot, className);
-    $[9] = className;
-    $[10] = t10;
-  } else {
-    t10 = $[10];
-  }
-  const t11 = slots.header;
-  let t12;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t12 = clsx(classes.PageLayoutContent);
-    $[11] = t12;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t8 = clsx(classes.PageLayoutContent);
+    $[6] = t8;
   } else {
-    t12 = $[11];
+    t8 = $[6];
   }
-  let t13;
-  if ($[12] !== rest) {
-    t13 = /*#__PURE__*/jsx("div", {
-      ref: contentRef,
-      className: t12,
+  let t9;
+  if ($[7] !== rest) {
+    t9 = /*#__PURE__*/jsx("div", {
+      className: t8,
       children: rest
     });
-    $[12] = rest;
-    $[13] = t13;
+    $[7] = rest;
+    $[8] = t9;
   } else {
-    t13 = $[13];
+    t9 = $[8];
   }
-  let t14;
-  if ($[14] !== containerWidth || $[15] !== slots.footer || $[16] !== slots.header || $[17] !== t13) {
-    t14 = /*#__PURE__*/jsxs("div", {
+  let t10;
+  if ($[9] !== containerWidth || $[10] !== slots.footer || $[11] !== slots.header || $[12] !== t9) {
+    t10 = /*#__PURE__*/jsxs("div", {
       className: classes.PageLayoutWrapper,
       "data-width": containerWidth,
-      children: [t11, t13, slots.footer]
+      children: [t7, t9, slots.footer]
     });
-    $[14] = containerWidth;
-    $[15] = slots.footer;
-    $[16] = slots.header;
-    $[17] = t13;
-    $[18] = t14;
+    $[9] = containerWidth;
+    $[10] = slots.footer;
+    $[11] = slots.header;
+    $[12] = t9;
+    $[13] = t10;
   } else {
-    t14 = $[18];
+    t10 = $[13];
   }
-  let t15;
-  if ($[19] !== t10 || $[20] !== t14 || $[21] !== t9) {
-    t15 = /*#__PURE__*/jsx("div", {
-      style: t9,
-      className: t10,
-      children: t14
+  let t11;
+  if ($[14] !== className || $[15] !== padding || $[16] !== style || $[17] !== t10) {
+    t11 = /*#__PURE__*/jsx(RootWrapper, {
+      style: style,
+      padding: padding,
+      className: className,
+      children: t10
     });
-    $[19] = t10;
-    $[20] = t14;
-    $[21] = t9;
-    $[22] = t15;
+    $[14] = className;
+    $[15] = padding;
+    $[16] = style;
+    $[17] = t10;
+    $[18] = t11;
   } else {
-    t15 = $[22];
+    t11 = $[18];
   }
-  let t16;
-  if ($[23] !== memoizedContextValue || $[24] !== t15) {
-    t16 = /*#__PURE__*/jsx(PageLayoutContext.Provider, {
+  let t12;
+  if ($[19] !== memoizedContextValue || $[20] !== t11) {
+    t12 = /*#__PURE__*/jsx(PageLayoutContext.Provider, {
       value: memoizedContextValue,
-      children: t15
+      children: t11
     });
-    $[23] = memoizedContextValue;
-    $[24] = t15;
-    $[25] = t16;
+    $[19] = memoizedContextValue;
+    $[20] = t11;
+    $[21] = t12;
   } else {
-    t16 = $[25];
+    t12 = $[21];
   }
-  return t16;
+  return t12;
 };
+const RootWrapper = /*#__PURE__*/memo(t0 => {
+  const $ = c(9);
+  const {
+    style,
+    padding,
+    children,
+    className
+  } = t0;
+  const t1 = `var(--spacing-${padding})`;
+  let t2;
+  if ($[0] !== style || $[1] !== t1) {
+    t2 = {
+      "--spacing": t1,
+      ...style
+    };
+    $[0] = style;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const t3 = t2;
+  let t4;
+  if ($[3] !== className) {
+    t4 = clsx(classes.PageLayoutRoot, className);
+    $[3] = className;
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  let t5;
+  if ($[5] !== children || $[6] !== t3 || $[7] !== t4) {
+    t5 = /*#__PURE__*/jsx("div", {
+      style: t3,
+      className: t4,
+      children: children
+    });
+    $[5] = children;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  return t5;
+});
 Root.displayName = 'PageLayout';
 
 // ----------------------------------------------------------------------------
 // Divider (internal)
 
-const HorizontalDivider = t0 => {
+const HorizontalDivider = /*#__PURE__*/memo(t0 => {
   const $ = c(14);
   const {
     variant: t1,
@@ -229,8 +257,9 @@ const HorizontalDivider = t0 => {
     t8 = $[13];
   }
   return t8;
-};
-const VerticalDivider = t0 => {
+});
+HorizontalDivider.displayName = 'HorizontalDivider';
+const VerticalDivider = /*#__PURE__*/memo(t0 => {
   const $ = c(12);
   const {
     variant: t1,
@@ -283,19 +312,15 @@ const VerticalDivider = t0 => {
     t5 = $[11];
   }
   return t5;
-};
-const DATA_DRAGGING_ATTR = 'data-dragging';
-const isDragging = handle => {
-  return (handle === null || handle === void 0 ? void 0 : handle.getAttribute(DATA_DRAGGING_ATTR)) === 'true';
-};
-
+});
+VerticalDivider.displayName = 'VerticalDivider';
 /**
  * DragHandle - handles all pointer and keyboard interactions for resizing
  * ARIA values are set in JSX for SSR accessibility,
  * then updated via DOM manipulation during drag for performance
  */
-const DragHandle = t0 => {
-  const $ = c(34);
+const DragHandle = /*#__PURE__*/memo(function DragHandle(t0) {
+  const $ = c(35);
   const {
     handleRef,
     onDragStart,
@@ -326,130 +351,185 @@ const DragHandle = t0 => {
   React.useEffect(t1);
   const {
     paneRef,
-    contentRef
+    contentWrapperRef
   } = React.useContext(PageLayoutContext);
+  const isDraggingRef = React.useRef(false);
   let t2;
-  if ($[4] !== contentRef || $[5] !== handleRef) {
-    t2 = dragging => {
-      if (dragging) {
-        var _handleRef$current, _contentRef$current;
-        (_handleRef$current = handleRef.current) === null || _handleRef$current === void 0 ? void 0 : _handleRef$current.setAttribute(DATA_DRAGGING_ATTR, "true");
-        (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.setAttribute(DATA_DRAGGING_ATTR, "true");
-      } else {
-        var _handleRef$current2, _contentRef$current2;
-        (_handleRef$current2 = handleRef.current) === null || _handleRef$current2 === void 0 ? void 0 : _handleRef$current2.removeAttribute(DATA_DRAGGING_ATTR);
-        (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 ? void 0 : _contentRef$current2.removeAttribute(DATA_DRAGGING_ATTR);
+  if ($[4] !== contentWrapperRef || $[5] !== handleRef || $[6] !== paneRef) {
+    t2 = () => {
+      if (isDraggingRef.current) {
+        return;
       }
+      setDraggingStyles({
+        handle: handleRef.current,
+        pane: paneRef.current,
+        contentWrapper: contentWrapperRef.current
+      });
+      isDraggingRef.current = true;
     };
-    $[4] = contentRef;
+    $[4] = contentWrapperRef;
     $[5] = handleRef;
-    $[6] = t2;
+    $[6] = paneRef;
+    $[7] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[7];
   }
-  const setDragging = t2;
+  const startDragging = t2;
   let t3;
-  if ($[7] !== setDragging) {
-    t3 = event => {
-      if (event.button !== 0) {
+  if ($[8] !== contentWrapperRef || $[9] !== handleRef || $[10] !== paneRef) {
+    t3 = () => {
+      if (!isDraggingRef.current) {
         return;
       }
-      event.preventDefault();
-      const target = event.currentTarget;
-      target.setPointerCapture(event.pointerId);
-      stableOnDragStart.current(event.clientX);
-      setDragging(true);
+      removeDraggingStyles({
+        handle: handleRef.current,
+        pane: paneRef.current,
+        contentWrapper: contentWrapperRef.current
+      });
+      isDraggingRef.current = false;
     };
-    $[7] = setDragging;
-    $[8] = t3;
+    $[8] = contentWrapperRef;
+    $[9] = handleRef;
+    $[10] = paneRef;
+    $[11] = t3;
   } else {
-    t3 = $[8];
+    t3 = $[11];
   }
-  const handlePointerDown = t3;
+  const endDragging = t3;
   let t4;
-  if ($[9] !== handleRef) {
-    t4 = event_0 => {
-      if (!isDragging(handleRef.current)) {
+  if ($[12] !== startDragging) {
+    t4 = event => {
+      if (event.button !== 0) {
         return;
       }
-      event_0.preventDefault();
-      stableOnDrag.current(event_0.clientX, false);
+      event.preventDefault();
+      const target = event.currentTarget;
+      try {
+        target.setPointerCapture(event.pointerId);
+      } catch {}
+      stableOnDragStart.current(event.clientX);
+      startDragging();
     };
-    $[9] = handleRef;
-    $[10] = t4;
+    $[12] = startDragging;
+    $[13] = t4;
   } else {
-    t4 = $[10];
+    t4 = $[13];
   }
-  const handlePointerMove = t4;
+  const handlePointerDown = t4;
+  const rafIdRef = React.useRef(null);
+  const pendingClientXRef = React.useRef(null);
   let t5;
-  if ($[11] !== handleRef) {
-    t5 = event_1 => {
-      if (!isDragging(handleRef.current)) {
+  if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = event_0 => {
+      if (!isDraggingRef.current) {
         return;
       }
-      event_1.preventDefault();
+      event_0.preventDefault();
+      pendingClientXRef.current = event_0.clientX;
+      if (rafIdRef.current === null) {
+        rafIdRef.current = requestAnimationFrame(() => {
+          rafIdRef.current = null;
+          if (pendingClientXRef.current !== null) {
+            stableOnDrag.current(pendingClientXRef.current, false);
+            pendingClientXRef.current = null;
+          }
+        });
+      }
     };
-    $[11] = handleRef;
-    $[12] = t5;
+    $[14] = t5;
   } else {
-    t5 = $[12];
+    t5 = $[14];
   }
-  const handlePointerUp = t5;
+  const handlePointerMove = t5;
   let t6;
-  if ($[13] !== handleRef || $[14] !== setDragging) {
-    t6 = () => {
-      if (!isDragging(handleRef.current)) {
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = event_1 => {
+      if (!isDraggingRef.current) {
         return;
       }
-      setDragging(false);
-      stableOnDragEnd.current();
+      event_1.preventDefault();
     };
-    $[13] = handleRef;
-    $[14] = setDragging;
     $[15] = t6;
   } else {
     t6 = $[15];
   }
-  const handleLostPointerCapture = t6;
+  const handlePointerUp = t6;
   let t7;
-  if ($[16] !== paneRef || $[17] !== setDragging) {
-    t7 = event_2 => {
-      if (event_2.key === "ArrowLeft" || event_2.key === "ArrowRight" || event_2.key === "ArrowUp" || event_2.key === "ArrowDown") {
-        event_2.preventDefault();
-        if (!paneRef.current) {
-          return;
-        }
-        const delta = event_2.key === "ArrowLeft" || event_2.key === "ArrowDown" ? -ARROW_KEY_STEP : ARROW_KEY_STEP;
-        setDragging(true);
-        stableOnDrag.current(delta, true);
+  if ($[16] !== endDragging) {
+    t7 = () => {
+      if (!isDraggingRef.current) {
+        return;
       }
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+        pendingClientXRef.current = null;
+      }
+      endDragging();
+      stableOnDragEnd.current();
     };
-    $[16] = paneRef;
-    $[17] = setDragging;
-    $[18] = t7;
+    $[16] = endDragging;
+    $[17] = t7;
   } else {
-    t7 = $[18];
+    t7 = $[17];
   }
-  const handleKeyDown = t7;
+  const handleLostPointerCapture = t7;
   let t8;
-  if ($[19] !== setDragging) {
-    t8 = event_3 => {
-      if (event_3.key === "ArrowLeft" || event_3.key === "ArrowRight" || event_3.key === "ArrowUp" || event_3.key === "ArrowDown") {
-        event_3.preventDefault();
-        setDragging(false);
-        stableOnDragEnd.current();
+  if ($[18] !== startDragging) {
+    t8 = event_2 => {
+      if (!isArrowKey(event_2.key)) {
+        return;
+      }
+      event_2.preventDefault();
+      const delta = isShrinkKey(event_2.key) ? -ARROW_KEY_STEP : ARROW_KEY_STEP;
+      if (!isDraggingRef.current) {
+        startDragging();
       }
+      stableOnDrag.current(delta, true);
     };
-    $[19] = setDragging;
-    $[20] = t8;
+    $[18] = startDragging;
+    $[19] = t8;
   } else {
-    t8 = $[20];
+    t8 = $[19];
   }
-  const handleKeyUp = t8;
-  const t9 = ariaValueNow !== undefined ? `Pane width ${ariaValueNow} pixels` : undefined;
+  const handleKeyDown = t8;
+  let t9;
+  if ($[20] !== endDragging) {
+    t9 = event_3 => {
+      if (!isArrowKey(event_3.key)) {
+        return;
+      }
+      event_3.preventDefault();
+      endDragging();
+      stableOnDragEnd.current();
+    };
+    $[20] = endDragging;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  const handleKeyUp = t9;
   let t10;
-  if ($[21] !== ariaValueMax || $[22] !== ariaValueMin || $[23] !== ariaValueNow || $[24] !== handleKeyDown || $[25] !== handleKeyUp || $[26] !== handleLostPointerCapture || $[27] !== handlePointerDown || $[28] !== handlePointerMove || $[29] !== handlePointerUp || $[30] !== handleRef || $[31] !== onDoubleClick || $[32] !== t9) {
-    t10 = /*#__PURE__*/jsx("div", {
+  let t11;
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = () => () => {
+      if (rafIdRef.current !== null) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = null;
+      }
+    };
+    t11 = [];
+    $[22] = t10;
+    $[23] = t11;
+  } else {
+    t10 = $[22];
+    t11 = $[23];
+  }
+  React.useEffect(t10, t11);
+  const t12 = ariaValueNow !== undefined ? `Pane width ${ariaValueNow} pixels` : undefined;
+  let t13;
+  if ($[24] !== ariaValueMax || $[25] !== ariaValueMin || $[26] !== ariaValueNow || $[27] !== handleKeyDown || $[28] !== handleKeyUp || $[29] !== handleLostPointerCapture || $[30] !== handlePointerDown || $[31] !== handleRef || $[32] !== onDoubleClick || $[33] !== t12) {
+    t13 = /*#__PURE__*/jsx("div", {
       ref: handleRef,
       className: classes.DraggableHandle,
       role: "slider",
@@ -457,7 +537,7 @@ const DragHandle = t0 => {
       "aria-valuemin": ariaValueMin,
       "aria-valuemax": ariaValueMax,
       "aria-valuenow": ariaValueNow,
-      "aria-valuetext": t9,
+      "aria-valuetext": t12,
       tabIndex: 0,
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
@@ -467,24 +547,22 @@ const DragHandle = t0 => {
       onKeyUp: handleKeyUp,
       onDoubleClick: onDoubleClick
     });
-    $[21] = ariaValueMax;
-    $[22] = ariaValueMin;
-    $[23] = ariaValueNow;
-    $[24] = handleKeyDown;
-    $[25] = handleKeyUp;
-    $[26] = handleLostPointerCapture;
-    $[27] = handlePointerDown;
-    $[28] = handlePointerMove;
-    $[29] = handlePointerUp;
-    $[30] = handleRef;
-    $[31] = onDoubleClick;
-    $[32] = t9;
-    $[33] = t10;
-  } else {
-    t10 = $[33];
-  }
-  return t10;
-};
+    $[24] = ariaValueMax;
+    $[25] = ariaValueMin;
+    $[26] = ariaValueNow;
+    $[27] = handleKeyDown;
+    $[28] = handleKeyUp;
+    $[29] = handleLostPointerCapture;
+    $[30] = handlePointerDown;
+    $[31] = handleRef;
+    $[32] = onDoubleClick;
+    $[33] = t12;
+    $[34] = t13;
+  } else {
+    t13 = $[34];
+  }
+  return t13;
+});
 
 // ----------------------------------------------------------------------------
 // PageLayout.Header
@@ -627,7 +705,7 @@ const Header = t0 => {
 };
 Header.displayName = 'PageLayout.Header';
 const Content = t0 => {
-  const $ = c(18);
+  const $ = c(19);
   const {
     as: t1,
     "aria-label": label,
@@ -644,6 +722,9 @@ const Content = t0 => {
   const padding = t3 === undefined ? "none" : t3;
   const hidden = t4 === undefined ? false : t4;
   const Component = as;
+  const {
+    contentWrapperRef
+  } = React.useContext(PageLayoutContext);
   let t5;
   if ($[0] !== className) {
     t5 = clsx(classes.ContentWrapper, className);
@@ -688,8 +769,9 @@ const Content = t0 => {
     t10 = $[9];
   }
   let t11;
-  if ($[10] !== Component || $[11] !== label || $[12] !== labelledBy || $[13] !== style || $[14] !== t10 || $[15] !== t5 || $[16] !== t6) {
+  if ($[10] !== Component || $[11] !== contentWrapperRef || $[12] !== label || $[13] !== labelledBy || $[14] !== style || $[15] !== t10 || $[16] !== t5 || $[17] !== t6) {
     t11 = /*#__PURE__*/jsx(Component, {
+      ref: contentWrapperRef,
       "aria-label": label,
       "aria-labelledby": labelledBy,
       style: style,
@@ -698,15 +780,16 @@ const Content = t0 => {
       children: t10
     });
     $[10] = Component;
-    $[11] = label;
-    $[12] = labelledBy;
-    $[13] = style;
-    $[14] = t10;
-    $[15] = t5;
-    $[16] = t6;
-    $[17] = t11;
+    $[11] = contentWrapperRef;
+    $[12] = label;
+    $[13] = labelledBy;
+    $[14] = style;
+    $[15] = t10;
+    $[16] = t5;
+    $[17] = t6;
+    $[18] = t11;
   } else {
-    t11 = $[17];
+    t11 = $[18];
   }
   return t11;
 };
@@ -716,7 +799,7 @@ const overflowProps = {
   role: 'region'
 };
 const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
-  const $ = c(92);
+  const $ = c(93);
   const {
     "aria-label": label,
     "aria-labelledby": labelledBy,
@@ -796,30 +879,33 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
   const {
     rowGap,
     columnGap,
-    paneRef
+    paneRef,
+    contentWrapperRef
   } = React.useContext(PageLayoutContext);
   const handleRef = React.useRef(null);
   const dragStartClientXRef = React.useRef(0);
   const dragStartWidthRef = React.useRef(0);
   const dragMaxWidthRef = React.useRef(0);
   let t17;
-  if ($[10] !== minWidth || $[11] !== paneRef || $[12] !== resizable || $[13] !== width || $[14] !== widthStorageKey) {
+  if ($[10] !== contentWrapperRef || $[11] !== minWidth || $[12] !== paneRef || $[13] !== resizable || $[14] !== width || $[15] !== widthStorageKey) {
     t17 = {
       width,
       minWidth,
       resizable,
       widthStorageKey,
       paneRef,
-      handleRef
+      handleRef,
+      contentWrapperRef
     };
-    $[10] = minWidth;
-    $[11] = paneRef;
-    $[12] = resizable;
-    $[13] = width;
-    $[14] = widthStorageKey;
-    $[15] = t17;
+    $[10] = contentWrapperRef;
+    $[11] = minWidth;
+    $[12] = paneRef;
+    $[13] = resizable;
+    $[14] = width;
+    $[15] = widthStorageKey;
+    $[16] = t17;
   } else {
-    t17 = $[15];
+    t17 = $[16];
   }
   const {
     currentWidth,
@@ -834,7 +920,7 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
   const hasOverflow = useOverflow(paneRef);
   const paneId = useId(id);
   let labelProp;
-  if ($[16] !== hasOverflow || $[17] !== label || $[18] !== labelledBy) {
+  if ($[17] !== hasOverflow || $[18] !== label || $[19] !== labelledBy) {
     labelProp = {};
     if (hasOverflow) {
       process.env.NODE_ENV !== "production" ? warning(label === undefined && labelledBy === undefined, "The <PageLayout.Pane> has overflow and `aria-label` or `aria-labelledby` has not been set. Please provide `aria-label` or `aria-labelledby` to <PageLayout.Pane> in order to label this region.") : void 0;
@@ -846,115 +932,115 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
         }
       }
     }
-    $[16] = hasOverflow;
-    $[17] = label;
-    $[18] = labelledBy;
-    $[19] = labelProp;
+    $[17] = hasOverflow;
+    $[18] = label;
+    $[19] = labelledBy;
+    $[20] = labelProp;
   } else {
-    labelProp = $[19];
+    labelProp = $[20];
   }
   let t18;
-  if ($[20] !== className) {
+  if ($[21] !== className) {
     t18 = clsx(classes.PaneWrapper, className);
-    $[20] = className;
-    $[21] = t18;
+    $[21] = className;
+    $[22] = t18;
   } else {
-    t18 = $[21];
+    t18 = $[22];
   }
   const t19 = typeof offsetHeader === "number" ? `${offsetHeader}px` : offsetHeader;
   const t20 = `var(--spacing-${rowGap})`;
   const t21 = `var(--spacing-${columnGap})`;
   let t22;
-  if ($[22] !== style || $[23] !== t19 || $[24] !== t20 || $[25] !== t21) {
+  if ($[23] !== style || $[24] !== t19 || $[25] !== t20 || $[26] !== t21) {
     t22 = {
       "--offset-header": t19,
       "--spacing-row": t20,
       "--spacing-column": t21,
       ...style
     };
-    $[22] = style;
-    $[23] = t19;
-    $[24] = t20;
-    $[25] = t21;
-    $[26] = t22;
+    $[23] = style;
+    $[24] = t19;
+    $[25] = t20;
+    $[26] = t21;
+    $[27] = t22;
   } else {
-    t22 = $[26];
+    t22 = $[27];
   }
   const t23 = t22;
   let t24;
-  if ($[27] !== responsiveHidden) {
+  if ($[28] !== responsiveHidden) {
     t24 = getResponsiveAttributes("is-hidden", responsiveHidden);
-    $[27] = responsiveHidden;
-    $[28] = t24;
+    $[28] = responsiveHidden;
+    $[29] = t24;
   } else {
-    t24 = $[28];
+    t24 = $[29];
   }
   let t25;
-  if ($[29] !== positionProp) {
+  if ($[30] !== positionProp) {
     t25 = getResponsiveAttributes("position", positionProp);
-    $[29] = positionProp;
-    $[30] = t25;
+    $[30] = positionProp;
+    $[31] = t25;
   } else {
-    t25 = $[30];
+    t25 = $[31];
   }
   const t26 = sticky || undefined;
   let t27;
-  if ($[31] !== dividerProp || $[32] !== dividerVariant) {
+  if ($[32] !== dividerProp || $[33] !== dividerVariant) {
     t27 = isResponsiveValue(dividerProp) ? dividerProp : {
       narrow: dividerVariant,
       regular: "none"
     };
-    $[31] = dividerProp;
-    $[32] = dividerVariant;
-    $[33] = t27;
+    $[32] = dividerProp;
+    $[33] = dividerVariant;
+    $[34] = t27;
   } else {
-    t27 = $[33];
+    t27 = $[34];
   }
   const t28 = `var(--spacing-${rowGap})`;
   let t29;
-  if ($[34] !== t28) {
+  if ($[35] !== t28) {
     t29 = {
       "--spacing": t28
     };
-    $[34] = t28;
-    $[35] = t29;
+    $[35] = t28;
+    $[36] = t29;
   } else {
-    t29 = $[35];
+    t29 = $[36];
   }
   const t30 = t29;
   let t31;
-  if ($[36] !== positionProp || $[37] !== t27 || $[38] !== t30) {
+  if ($[37] !== positionProp || $[38] !== t27 || $[39] !== t30) {
     t31 = /*#__PURE__*/jsx(HorizontalDivider, {
       variant: t27,
       className: classes.PaneHorizontalDivider,
       style: t30,
       position: positionProp
     });
-    $[36] = positionProp;
-    $[37] = t27;
-    $[38] = t30;
-    $[39] = t31;
+    $[37] = positionProp;
+    $[38] = t27;
+    $[39] = t30;
+    $[40] = t31;
   } else {
-    t31 = $[39];
+    t31 = $[40];
   }
   let t32;
-  if ($[40] !== hasOverflow) {
+  if ($[41] !== hasOverflow) {
     t32 = hasOverflow ? overflowProps : {};
-    $[40] = hasOverflow;
-    $[41] = t32;
+    $[41] = hasOverflow;
+    $[42] = t32;
   } else {
-    t32 = $[41];
+    t32 = $[42];
   }
   let t33;
-  if ($[42] !== id || $[43] !== paneId) {
+  if ($[43] !== id || $[44] !== paneId) {
     t33 = id && {
       id: paneId
     };
-    $[42] = id;
-    $[43] = paneId;
-    $[44] = t33;
+    $[43] = id;
+    $[44] = paneId;
+    $[45] = t33;
   } else {
-    t33 = $[44];
+    t33 = $[45];
   }
   const t34 = resizable || undefined;
   const t35 = `var(--spacing-${padding})`;
@@ -964,7 +1050,7 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
   const t39 = `var(--pane-width-${isPaneWidth(width) ? width : "custom"})`;
   const t40 = `${currentWidth}px`;
   let t41;
-  if ($[45] !== t35 || $[46] !== t36 || $[47] !== t37 || $[48] !== t38 || $[49] !== t39 || $[50] !== t40) {
+  if ($[46] !== t35 || $[47] !== t36 || $[48] !== t37 || $[49] !== t38 || $[50] !== t39 || $[51] !== t40) {
     t41 = {
       "--spacing": t35,
       "--pane-min-width": t36,
@@ -973,19 +1059,19 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
       "--pane-width-size": t39,
       "--pane-width": t40
     };
-    $[45] = t35;
-    $[46] = t36;
-    $[47] = t37;
-    $[48] = t38;
-    $[49] = t39;
-    $[50] = t40;
-    $[51] = t41;
+    $[46] = t35;
+    $[47] = t36;
+    $[48] = t37;
+    $[49] = t38;
+    $[50] = t39;
+    $[51] = t40;
+    $[52] = t41;
   } else {
-    t41 = $[51];
+    t41 = $[52];
   }
   const t42 = t41;
   let t43;
-  if ($[52] !== children || $[53] !== labelProp || $[54] !== paneRef || $[55] !== t32 || $[56] !== t33 || $[57] !== t34 || $[58] !== t42) {
+  if ($[53] !== children || $[54] !== labelProp || $[55] !== paneRef || $[56] !== t32 || $[57] !== t33 || $[58] !== t34 || $[59] !== t42) {
     t43 = /*#__PURE__*/jsx("div", {
       ref: paneRef,
       suppressHydrationWarning: true,
@@ -997,19 +1083,19 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
       style: t42,
       children: children
     });
-    $[52] = children;
-    $[53] = labelProp;
-    $[54] = paneRef;
-    $[55] = t32;
-    $[56] = t33;
-    $[57] = t34;
-    $[58] = t42;
-    $[59] = t43;
+    $[53] = children;
+    $[54] = labelProp;
+    $[55] = paneRef;
+    $[56] = t32;
+    $[57] = t33;
+    $[58] = t34;
+    $[59] = t42;
+    $[60] = t43;
   } else {
-    t43 = $[59];
+    t43 = $[60];
   }
   let t44;
-  if ($[60] !== dividerProp || $[61] !== dividerVariant || $[62] !== resizable) {
+  if ($[61] !== dividerProp || $[62] !== dividerVariant || $[63] !== resizable) {
     t44 = isResponsiveValue(dividerProp) ? {
       narrow: "none",
       regular: resizable ? "line" : dividerProp.regular || "none",
@@ -1018,27 +1104,27 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
       narrow: "none",
       regular: resizable ? "line" : dividerVariant
     };
-    $[60] = dividerProp;
-    $[61] = dividerVariant;
-    $[62] = resizable;
-    $[63] = t44;
+    $[61] = dividerProp;
+    $[62] = dividerVariant;
+    $[63] = resizable;
+    $[64] = t44;
   } else {
-    t44 = $[63];
+    t44 = $[64];
   }
   const t45 = `var(--spacing-${columnGap})`;
   let t46;
-  if ($[64] !== t45) {
+  if ($[65] !== t45) {
     t46 = {
       "--spacing": t45
     };
-    $[64] = t45;
-    $[65] = t46;
+    $[65] = t45;
+    $[66] = t46;
   } else {
-    t46 = $[65];
+    t46 = $[66];
   }
   const t47 = t46;
   let t48;
-  if ($[66] !== currentWidth || $[67] !== currentWidthRef || $[68] !== getDefaultWidth || $[69] !== getMaxPaneWidth || $[70] !== maxPaneWidth || $[71] !== minPaneWidth || $[72] !== paneRef || $[73] !== position || $[74] !== resizable || $[75] !== saveWidth) {
+  if ($[67] !== currentWidth || $[68] !== currentWidthRef || $[69] !== getDefaultWidth || $[70] !== getMaxPaneWidth || $[71] !== maxPaneWidth || $[72] !== minPaneWidth || $[73] !== paneRef || $[74] !== position || $[75] !== resizable || $[76] !== saveWidth) {
     t48 = resizable ? /*#__PURE__*/jsx(DragHandle, {
       handleRef: handleRef,
       "aria-valuemin": minPaneWidth,
@@ -1096,22 +1182,22 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
         saveWidth(resetWidth);
       }
     }) : null;
-    $[66] = currentWidth;
-    $[67] = currentWidthRef;
-    $[68] = getDefaultWidth;
-    $[69] = getMaxPaneWidth;
-    $[70] = maxPaneWidth;
-    $[71] = minPaneWidth;
-    $[72] = paneRef;
-    $[73] = position;
-    $[74] = resizable;
-    $[75] = saveWidth;
-    $[76] = t48;
-  } else {
-    t48 = $[76];
+    $[67] = currentWidth;
+    $[68] = currentWidthRef;
+    $[69] = getDefaultWidth;
+    $[70] = getMaxPaneWidth;
+    $[71] = maxPaneWidth;
+    $[72] = minPaneWidth;
+    $[73] = paneRef;
+    $[74] = position;
+    $[75] = resizable;
+    $[76] = saveWidth;
+    $[77] = t48;
+  } else {
+    t48 = $[77];
   }
   let t49;
-  if ($[77] !== positionProp || $[78] !== resizable || $[79] !== t44 || $[80] !== t47 || $[81] !== t48) {
+  if ($[78] !== positionProp || $[79] !== resizable || $[80] !== t44 || $[81] !== t47 || $[82] !== t48) {
     t49 = /*#__PURE__*/jsx(VerticalDivider, {
       variant: t44,
       draggable: resizable,
@@ -1120,17 +1206,17 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
       style: t47,
       children: t48
     });
-    $[77] = positionProp;
-    $[78] = resizable;
-    $[79] = t44;
-    $[80] = t47;
-    $[81] = t48;
-    $[82] = t49;
+    $[78] = positionProp;
+    $[79] = resizable;
+    $[80] = t44;
+    $[81] = t47;
+    $[82] = t48;
+    $[83] = t49;
   } else {
-    t49 = $[82];
+    t49 = $[83];
   }
   let t50;
-  if ($[83] !== t18 || $[84] !== t23 || $[85] !== t24 || $[86] !== t25 || $[87] !== t26 || $[88] !== t31 || $[89] !== t43 || $[90] !== t49) {
+  if ($[84] !== t18 || $[85] !== t23 || $[86] !== t24 || $[87] !== t25 || $[88] !== t26 || $[89] !== t31 || $[90] !== t43 || $[91] !== t49) {
     t50 = /*#__PURE__*/jsxs("div", {
       className: t18,
       style: t23,
@@ -1139,17 +1225,17 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
       "data-sticky": t26,
       children: [t31, t43, t49]
     });
-    $[83] = t18;
-    $[84] = t23;
-    $[85] = t24;
-    $[86] = t25;
-    $[87] = t26;
-    $[88] = t31;
-    $[89] = t43;
-    $[90] = t49;
-    $[91] = t50;
-  } else {
-    t50 = $[91];
+    $[84] = t18;
+    $[85] = t23;
+    $[86] = t24;
+    $[87] = t25;
+    $[88] = t26;
+    $[89] = t31;
+    $[90] = t43;
+    $[91] = t49;
+    $[92] = t50;
+  } else {
+    t50 = $[92];
   }
   return t50;
 });