@primer/react 37.29.0-rc.af59a9de1 → 38.0.0-rc.195178541

package/lib-esm/PageLayout/PageLayout.js

@@ -10,6 +10,7 @@ import { useOverflow } from '../hooks/useOverflow.js';
 import { warning } from '../utils/warning.js';
 import classes from './PageLayout.module.css.js';
 import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
+import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import Box from '../Box/Box.js';
 
@@ -31,7 +32,7 @@ const Root = t0 => {
     rowGap: t3,
     columnGap: t4,
     children,
-    sx,
+    sx: t5,
     className,
     style,
     _slotsConfig: slotsConfig
@@ -40,23 +41,24 @@ const Root = t0 => {
   const padding = t2 === undefined ? "normal" : t2;
   const rowGap = t3 === undefined ? "normal" : t3;
   const columnGap = t4 === undefined ? "normal" : t4;
+  const sx = t5 === undefined ? defaultSxProp : t5;
   const paneRef = useRef(null);
-  let t5;
+  let t6;
   if ($[0] !== slotsConfig) {
-    t5 = slotsConfig !== null && slotsConfig !== void 0 ? slotsConfig : {
+    t6 = slotsConfig !== null && slotsConfig !== void 0 ? slotsConfig : {
       header: Header,
       footer: Footer
     };
     $[0] = slotsConfig;
-    $[1] = t5;
+    $[1] = t6;
   } else {
-    t5 = $[1];
+    t6 = $[1];
   }
-  const [slots, rest] = useSlots(children, t5);
-  let t6;
+  const [slots, rest] = useSlots(children, t6);
   let t7;
+  let t8;
   if ($[2] !== columnGap || $[3] !== padding || $[4] !== rowGap) {
-    t7 = {
+    t8 = {
       padding,
       rowGap,
       columnGap,
@@ -65,97 +67,97 @@ const Root = t0 => {
     $[2] = columnGap;
     $[3] = padding;
     $[4] = rowGap;
-    $[5] = t7;
+    $[5] = t8;
   } else {
-    t7 = $[5];
+    t8 = $[5];
   }
-  t6 = t7;
-  const memoizedContextValue = t6;
-  const t8 = `var(--spacing-${padding})`;
-  let t9;
-  if ($[6] !== style || $[7] !== t8) {
-    t9 = {
-      "--spacing": t8,
+  t7 = t8;
+  const memoizedContextValue = t7;
+  const t9 = `var(--spacing-${padding})`;
+  let t10;
+  if ($[6] !== style || $[7] !== t9) {
+    t10 = {
+      "--spacing": t9,
       ...style
     };
     $[6] = style;
-    $[7] = t8;
-    $[8] = t9;
+    $[7] = t9;
+    $[8] = t10;
   } else {
-    t9 = $[8];
+    t10 = $[8];
   }
-  const t10 = t9;
-  let t11;
+  const t11 = t10;
+  let t12;
   if ($[9] !== className) {
-    t11 = clsx(classes.PageLayoutRoot, className);
+    t12 = clsx(classes.PageLayoutRoot, className);
     $[9] = className;
-    $[10] = t11;
+    $[10] = t12;
   } else {
-    t11 = $[10];
+    t12 = $[10];
   }
-  const t12 = slots.header;
-  let t13;
+  const t13 = slots.header;
+  let t14;
   if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = clsx(classes.PageLayoutContent);
-    $[11] = t13;
+    t14 = clsx(classes.PageLayoutContent);
+    $[11] = t14;
   } else {
-    t13 = $[11];
+    t14 = $[11];
   }
-  let t14;
+  let t15;
   if ($[12] !== rest) {
-    t14 = /*#__PURE__*/jsx("div", {
-      className: t13,
+    t15 = /*#__PURE__*/jsx("div", {
+      className: t14,
       children: rest
     });
     $[12] = rest;
-    $[13] = t14;
+    $[13] = t15;
   } else {
-    t14 = $[13];
+    t15 = $[13];
   }
-  let t15;
-  if ($[14] !== containerWidth || $[15] !== slots.footer || $[16] !== slots.header || $[17] !== t14) {
-    t15 = /*#__PURE__*/jsxs("div", {
+  let t16;
+  if ($[14] !== containerWidth || $[15] !== slots.footer || $[16] !== slots.header || $[17] !== t15) {
+    t16 = /*#__PURE__*/jsxs("div", {
       className: classes.PageLayoutWrapper,
       "data-width": containerWidth,
-      children: [t12, t14, slots.footer]
+      children: [t13, t15, slots.footer]
     });
     $[14] = containerWidth;
     $[15] = slots.footer;
     $[16] = slots.header;
-    $[17] = t14;
-    $[18] = t15;
+    $[17] = t15;
+    $[18] = t16;
   } else {
-    t15 = $[18];
+    t16 = $[18];
   }
-  let t16;
-  if ($[19] !== sx || $[20] !== t10 || $[21] !== t11 || $[22] !== t15) {
-    t16 = /*#__PURE__*/jsx(BoxWithFallback, {
-      style: t10,
+  let t17;
+  if ($[19] !== sx || $[20] !== t11 || $[21] !== t12 || $[22] !== t16) {
+    t17 = /*#__PURE__*/jsx(BoxWithFallback, {
+      style: t11,
       sx: sx,
-      className: t11,
-      children: t15
+      className: t12,
+      children: t16
     });
     $[19] = sx;
-    $[20] = t10;
-    $[21] = t11;
-    $[22] = t15;
-    $[23] = t16;
+    $[20] = t11;
+    $[21] = t12;
+    $[22] = t16;
+    $[23] = t17;
   } else {
-    t16 = $[23];
+    t17 = $[23];
   }
-  let t17;
-  if ($[24] !== memoizedContextValue || $[25] !== t16) {
-    t17 = /*#__PURE__*/jsx(PageLayoutContext.Provider, {
+  let t18;
+  if ($[24] !== memoizedContextValue || $[25] !== t17) {
+    t18 = /*#__PURE__*/jsx(PageLayoutContext.Provider, {
       value: memoizedContextValue,
-      children: t16
+      children: t17
     });
     $[24] = memoizedContextValue;
-    $[25] = t16;
-    $[26] = t17;
+    $[25] = t17;
+    $[26] = t18;
   } else {
-    t17 = $[26];
+    t18 = $[26];
   }
-  return t17;
+  return t18;
 };
 Root.displayName = 'PageLayout';
 
@@ -166,57 +168,58 @@ const HorizontalDivider = t0 => {
   const $ = c(11);
   const {
     variant: t1,
-    sx,
+    sx: t2,
     className,
     position,
     style
   } = t0;
   const variant = t1 === undefined ? "none" : t1;
+  const sx = t2 === undefined ? defaultSxProp : t2;
   const {
     padding
   } = React.useContext(PageLayoutContext);
   const responsiveVariant = useResponsiveValue(variant, "none");
-  let t2;
+  let t3;
   if ($[0] !== className) {
-    t2 = clsx(classes.HorizontalDivider, className);
+    t3 = clsx(classes.HorizontalDivider, className);
     $[0] = className;
-    $[1] = t2;
+    $[1] = t3;
   } else {
-    t2 = $[1];
+    t3 = $[1];
   }
-  const t3 = `var(--spacing-${padding})`;
-  let t4;
-  if ($[2] !== style || $[3] !== t3) {
-    t4 = {
-      "--spacing-divider": t3,
+  const t4 = `var(--spacing-${padding})`;
+  let t5;
+  if ($[2] !== style || $[3] !== t4) {
+    t5 = {
+      "--spacing-divider": t4,
       ...style
     };
     $[2] = style;
-    $[3] = t3;
-    $[4] = t4;
+    $[3] = t4;
+    $[4] = t5;
   } else {
-    t4 = $[4];
+    t5 = $[4];
   }
-  const t5 = t4;
-  let t6;
-  if ($[5] !== position || $[6] !== responsiveVariant || $[7] !== sx || $[8] !== t2 || $[9] !== t5) {
-    t6 = /*#__PURE__*/jsx(BoxWithFallback, {
+  const t6 = t5;
+  let t7;
+  if ($[5] !== position || $[6] !== responsiveVariant || $[7] !== sx || $[8] !== t3 || $[9] !== t6) {
+    t7 = /*#__PURE__*/jsx(BoxWithFallback, {
       sx: sx,
-      className: t2,
+      className: t3,
       "data-variant": responsiveVariant,
       "data-position": position,
-      style: t5
+      style: t6
     });
     $[5] = position;
     $[6] = responsiveVariant;
     $[7] = sx;
-    $[8] = t2;
-    $[9] = t5;
-    $[10] = t6;
+    $[8] = t3;
+    $[9] = t6;
+    $[10] = t7;
   } else {
-    t6 = $[10];
+    t7 = $[10];
   }
-  return t6;
+  return t7;
 };
 const VerticalDivider = t0 => {
   const $ = c(37);
@@ -230,10 +233,11 @@ const VerticalDivider = t0 => {
     position,
     className,
     style,
-    sx
+    sx: t3
   } = t0;
   const variant = t1 === undefined ? "none" : t1;
   const draggable = t2 === undefined ? false : t2;
+  const sx = t3 === undefined ? defaultSxProp : t3;
   const [isDragging, setIsDragging] = React.useState(false);
   const [isKeyboardDrag, setIsKeyboardDrag] = React.useState(false);
   const responsiveVariant = useResponsiveValue(variant, "none");
@@ -245,9 +249,9 @@ const VerticalDivider = t0 => {
   const [minWidth, setMinWidth] = React.useState(0);
   const [maxWidth, setMaxWidth] = React.useState(0);
   const [currentWidth, setCurrentWidth] = React.useState(0);
-  let t3;
+  let t4;
   if ($[0] !== paneRef) {
-    t3 = () => {
+    t4 = () => {
       if (paneRef.current !== null) {
         const paneStyles = getComputedStyle(paneRef.current);
         const maxPaneWidthDiffPixels = paneStyles.getPropertyValue("--pane-max-width-diff");
@@ -263,55 +267,55 @@ const VerticalDivider = t0 => {
       }
     };
     $[0] = paneRef;
-    $[1] = t3;
+    $[1] = t4;
   } else {
-    t3 = $[1];
+    t4 = $[1];
   }
-  let t4;
+  let t5;
   if ($[2] !== isDragging || $[3] !== isKeyboardDrag || $[4] !== paneRef) {
-    t4 = [paneRef, isKeyboardDrag, isDragging];
+    t5 = [paneRef, isKeyboardDrag, isDragging];
     $[2] = isDragging;
     $[3] = isKeyboardDrag;
     $[4] = paneRef;
-    $[5] = t4;
+    $[5] = t5;
   } else {
-    t4 = $[5];
+    t5 = $[5];
   }
-  React.useEffect(t3, t4);
-  let t5;
+  React.useEffect(t4, t5);
   let t6;
+  let t7;
   if ($[6] !== onDrag) {
-    t5 = () => {
+    t6 = () => {
       stableOnDrag.current = onDrag;
     };
-    t6 = [onDrag];
+    t7 = [onDrag];
     $[6] = onDrag;
-    $[7] = t5;
-    $[8] = t6;
+    $[7] = t6;
+    $[8] = t7;
   } else {
-    t5 = $[7];
-    t6 = $[8];
+    t6 = $[7];
+    t7 = $[8];
   }
-  React.useEffect(t5, t6);
-  let t7;
+  React.useEffect(t6, t7);
   let t8;
+  let t9;
   if ($[9] !== onDragEnd) {
-    t7 = () => {
+    t8 = () => {
       stableOnDragEnd.current = onDragEnd;
     };
-    t8 = [onDragEnd];
+    t9 = [onDragEnd];
     $[9] = onDragEnd;
-    $[10] = t7;
-    $[11] = t8;
+    $[10] = t8;
+    $[11] = t9;
   } else {
-    t7 = $[10];
-    t8 = $[11];
+    t8 = $[10];
+    t9 = $[11];
   }
-  React.useEffect(t7, t8);
+  React.useEffect(t8, t9);
   let t10;
-  let t9;
+  let t11;
   if ($[12] !== currentWidth || $[13] !== isDragging || $[14] !== isKeyboardDrag || $[15] !== maxWidth || $[16] !== minWidth) {
-    t9 = () => {
+    t10 = () => {
       const handleDrag = function handleDrag(event) {
         var _stableOnDrag$current;
         (_stableOnDrag$current = stableOnDrag.current) === null || _stableOnDrag$current === void 0 ? void 0 : _stableOnDrag$current.call(stableOnDrag, event.movementX, false);
@@ -369,30 +373,30 @@ const VerticalDivider = t0 => {
         body_1 === null || body_1 === void 0 ? void 0 : body_1.removeAttribute("data-page-layout-dragging");
       };
     };
-    t10 = [isDragging, isKeyboardDrag, currentWidth, minWidth, maxWidth];
+    t11 = [isDragging, isKeyboardDrag, currentWidth, minWidth, maxWidth];
     $[12] = currentWidth;
     $[13] = isDragging;
     $[14] = isKeyboardDrag;
     $[15] = maxWidth;
     $[16] = minWidth;
     $[17] = t10;
-    $[18] = t9;
+    $[18] = t11;
   } else {
     t10 = $[17];
-    t9 = $[18];
+    t11 = $[18];
   }
-  React.useEffect(t9, t10);
-  let t11;
+  React.useEffect(t10, t11);
+  let t12;
   if ($[19] !== className) {
-    t11 = clsx(classes.VerticalDivider, className);
+    t12 = clsx(classes.VerticalDivider, className);
     $[19] = className;
-    $[20] = t11;
+    $[20] = t12;
   } else {
-    t11 = $[20];
+    t12 = $[20];
   }
-  let t12;
+  let t13;
   if ($[21] !== currentWidth || $[22] !== draggable || $[23] !== isDragging || $[24] !== isKeyboardDrag || $[25] !== maxWidth || $[26] !== minWidth || $[27] !== onDoubleClick || $[28] !== onDragStart) {
-    t12 = draggable ? /*#__PURE__*/jsx(Fragment, {
+    t13 = draggable ? /*#__PURE__*/jsx(Fragment, {
       children: /*#__PURE__*/jsx(Box, {
         sx: {
           position: "absolute",
@@ -434,31 +438,31 @@ const VerticalDivider = t0 => {
     $[26] = minWidth;
     $[27] = onDoubleClick;
     $[28] = onDragStart;
-    $[29] = t12;
+    $[29] = t13;
   } else {
-    t12 = $[29];
+    t13 = $[29];
   }
-  let t13;
-  if ($[30] !== position || $[31] !== responsiveVariant || $[32] !== style || $[33] !== sx || $[34] !== t11 || $[35] !== t12) {
-    t13 = /*#__PURE__*/jsx(BoxWithFallback, {
+  let t14;
+  if ($[30] !== position || $[31] !== responsiveVariant || $[32] !== style || $[33] !== sx || $[34] !== t12 || $[35] !== t13) {
+    t14 = /*#__PURE__*/jsx(BoxWithFallback, {
       sx: sx,
-      className: t11,
+      className: t12,
       "data-variant": responsiveVariant,
       "data-position": position,
       style: style,
-      children: t12
+      children: t13
     });
     $[30] = position;
     $[31] = responsiveVariant;
     $[32] = style;
     $[33] = sx;
-    $[34] = t11;
-    $[35] = t12;
-    $[36] = t13;
+    $[34] = t12;
+    $[35] = t13;
+    $[36] = t14;
   } else {
-    t13 = $[36];
+    t14 = $[36];
   }
-  return t13;
+  return t14;
 };
 
 // ----------------------------------------------------------------------------
@@ -475,128 +479,129 @@ const Header = t0 => {
     hidden: t4,
     children,
     style,
-    sx,
+    sx: t5,
     className
   } = t0;
   const padding = t1 === undefined ? "none" : t1;
   const divider = t2 === undefined ? "none" : t2;
   const dividerWhenNarrow = t3 === undefined ? "inherit" : t3;
   const hidden = t4 === undefined ? false : t4;
-  let t5;
+  const sx = t5 === undefined ? defaultSxProp : t5;
+  let t6;
   if ($[0] !== divider || $[1] !== dividerWhenNarrow) {
-    t5 = !isResponsiveValue(divider) && dividerWhenNarrow !== "inherit" ? {
+    t6 = !isResponsiveValue(divider) && dividerWhenNarrow !== "inherit" ? {
       regular: divider,
       narrow: dividerWhenNarrow
     } : divider;
     $[0] = divider;
     $[1] = dividerWhenNarrow;
-    $[2] = t5;
+    $[2] = t6;
   } else {
-    t5 = $[2];
+    t6 = $[2];
   }
-  const dividerProp = t5;
+  const dividerProp = t6;
   const dividerVariant = useResponsiveValue(dividerProp, "none");
   const isHidden = useResponsiveValue(hidden, false);
   const {
     rowGap
   } = React.useContext(PageLayoutContext);
-  let t6;
+  let t7;
   if ($[3] !== className) {
-    t6 = clsx(classes.Header, className);
+    t7 = clsx(classes.Header, className);
     $[3] = className;
-    $[4] = t6;
+    $[4] = t7;
   } else {
-    t6 = $[4];
+    t7 = $[4];
   }
-  const t7 = `var(--spacing-${rowGap})`;
-  let t8;
-  if ($[5] !== style || $[6] !== t7) {
-    t8 = {
-      "--spacing": t7,
+  const t8 = `var(--spacing-${rowGap})`;
+  let t9;
+  if ($[5] !== style || $[6] !== t8) {
+    t9 = {
+      "--spacing": t8,
       ...style
     };
     $[5] = style;
-    $[6] = t7;
-    $[7] = t8;
+    $[6] = t8;
+    $[7] = t9;
   } else {
-    t8 = $[7];
+    t9 = $[7];
   }
-  const t9 = t8;
-  const t10 = `var(--spacing-${padding})`;
-  let t11;
-  if ($[8] !== t10) {
-    t11 = {
-      "--spacing": t10
+  const t10 = t9;
+  const t11 = `var(--spacing-${padding})`;
+  let t12;
+  if ($[8] !== t11) {
+    t12 = {
+      "--spacing": t11
     };
-    $[8] = t10;
-    $[9] = t11;
+    $[8] = t11;
+    $[9] = t12;
   } else {
-    t11 = $[9];
+    t12 = $[9];
   }
-  const t12 = t11;
-  let t13;
-  if ($[10] !== children || $[11] !== t12) {
-    t13 = /*#__PURE__*/jsx("div", {
+  const t13 = t12;
+  let t14;
+  if ($[10] !== children || $[11] !== t13) {
+    t14 = /*#__PURE__*/jsx("div", {
       className: classes.HeaderContent,
-      style: t12,
+      style: t13,
       children: children
     });
     $[10] = children;
-    $[11] = t12;
-    $[12] = t13;
+    $[11] = t13;
+    $[12] = t14;
   } else {
-    t13 = $[12];
+    t14 = $[12];
   }
-  const t14 = `var(--spacing-${rowGap})`;
-  let t15;
-  if ($[13] !== t14) {
-    t15 = {
-      "--spacing": t14
+  const t15 = `var(--spacing-${rowGap})`;
+  let t16;
+  if ($[13] !== t15) {
+    t16 = {
+      "--spacing": t15
     };
-    $[13] = t14;
-    $[14] = t15;
+    $[13] = t15;
+    $[14] = t16;
   } else {
-    t15 = $[14];
+    t16 = $[14];
   }
-  const t16 = t15;
-  let t17;
-  if ($[15] !== dividerVariant || $[16] !== t16) {
-    t17 = /*#__PURE__*/jsx(HorizontalDivider, {
+  const t17 = t16;
+  let t18;
+  if ($[15] !== dividerVariant || $[16] !== t17) {
+    t18 = /*#__PURE__*/jsx(HorizontalDivider, {
       variant: dividerVariant,
       className: classes.HeaderHorizontalDivider,
-      style: t16
+      style: t17
     });
     $[15] = dividerVariant;
-    $[16] = t16;
-    $[17] = t17;
+    $[16] = t17;
+    $[17] = t18;
   } else {
-    t17 = $[17];
+    t18 = $[17];
   }
-  let t18;
-  if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== sx || $[22] !== t13 || $[23] !== t17 || $[24] !== t6 || $[25] !== t9) {
-    t18 = /*#__PURE__*/jsxs(BoxWithFallback, {
+  let t19;
+  if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== sx || $[22] !== t10 || $[23] !== t14 || $[24] !== t18 || $[25] !== t7) {
+    t19 = /*#__PURE__*/jsxs(BoxWithFallback, {
       as: "header",
       "aria-label": label,
       "aria-labelledby": labelledBy,
       hidden: isHidden,
       sx: sx,
-      className: t6,
-      style: t9,
-      children: [t13, t17]
+      className: t7,
+      style: t10,
+      children: [t14, t18]
     });
     $[18] = isHidden;
     $[19] = label;
     $[20] = labelledBy;
     $[21] = sx;
-    $[22] = t13;
-    $[23] = t17;
-    $[24] = t6;
-    $[25] = t9;
-    $[26] = t18;
+    $[22] = t10;
+    $[23] = t14;
+    $[24] = t18;
+    $[25] = t7;
+    $[26] = t19;
   } else {
-    t18 = $[26];
+    t19 = $[26];
   }
-  return t18;
+  return t19;
 };
 Header.displayName = 'PageLayout.Header';
 const Content = t0 => {
@@ -609,7 +614,7 @@ const Content = t0 => {
     padding: t3,
     hidden: t4,
     children,
-    sx,
+    sx: t5,
     className,
     style
   } = t0;
@@ -617,53 +622,54 @@ const Content = t0 => {
   const width = t2 === undefined ? "full" : t2;
   const padding = t3 === undefined ? "none" : t3;
   const hidden = t4 === undefined ? false : t4;
+  const sx = t5 === undefined ? defaultSxProp : t5;
   const isHidden = useResponsiveValue(hidden, false);
-  let t5;
+  let t6;
   if ($[0] !== className) {
-    t5 = clsx(classes.ContentWrapper, className);
+    t6 = clsx(classes.ContentWrapper, className);
     $[0] = className;
-    $[1] = t5;
+    $[1] = t6;
   } else {
-    t5 = $[1];
+    t6 = $[1];
   }
-  const t6 = `var(--spacing-${padding})`;
-  let t7;
-  if ($[2] !== t6) {
-    t7 = {
-      "--spacing": t6
+  const t7 = `var(--spacing-${padding})`;
+  let t8;
+  if ($[2] !== t7) {
+    t8 = {
+      "--spacing": t7
     };
-    $[2] = t6;
-    $[3] = t7;
+    $[2] = t7;
+    $[3] = t8;
   } else {
-    t7 = $[3];
+    t8 = $[3];
   }
-  const t8 = t7;
-  let t9;
-  if ($[4] !== children || $[5] !== t8 || $[6] !== width) {
-    t9 = /*#__PURE__*/jsx("div", {
+  const t9 = t8;
+  let t10;
+  if ($[4] !== children || $[5] !== t9 || $[6] !== width) {
+    t10 = /*#__PURE__*/jsx("div", {
       className: classes.Content,
       "data-width": width,
-      style: t8,
+      style: t9,
       children: children
     });
     $[4] = children;
-    $[5] = t8;
+    $[5] = t9;
     $[6] = width;
-    $[7] = t9;
+    $[7] = t10;
   } else {
-    t9 = $[7];
+    t10 = $[7];
   }
-  let t10;
-  if ($[8] !== as || $[9] !== isHidden || $[10] !== label || $[11] !== labelledBy || $[12] !== style || $[13] !== sx || $[14] !== t5 || $[15] !== t9) {
-    t10 = /*#__PURE__*/jsx(BoxWithFallback, {
+  let t11;
+  if ($[8] !== as || $[9] !== isHidden || $[10] !== label || $[11] !== labelledBy || $[12] !== style || $[13] !== sx || $[14] !== t10 || $[15] !== t6) {
+    t11 = /*#__PURE__*/jsx(BoxWithFallback, {
       as: as,
       "aria-label": label,
       "aria-labelledby": labelledBy,
       style: style,
       sx: sx,
-      className: t5,
+      className: t6,
       "data-is-hidden": isHidden,
-      children: t9
+      children: t10
     });
     $[8] = as;
     $[9] = isHidden;
@@ -671,13 +677,13 @@ const Content = t0 => {
     $[11] = labelledBy;
     $[12] = style;
     $[13] = sx;
-    $[14] = t5;
-    $[15] = t9;
-    $[16] = t10;
+    $[14] = t10;
+    $[15] = t6;
+    $[16] = t11;
   } else {
-    t10 = $[16];
+    t11 = $[16];
   }
-  return t10;
+  return t11;
 };
 Content.displayName = 'PageLayout.Content';
 
@@ -719,7 +725,7 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     hidden: t12,
     children,
     id,
-    sx,
+    sx: t13,
     className,
     style
   } = t0;
@@ -735,33 +741,34 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
   const sticky = t10 === undefined ? false : t10;
   const offsetHeader = t11 === undefined ? 0 : t11;
   const responsiveHidden = t12 === undefined ? false : t12;
-  let t13;
+  const sx = t13 === undefined ? defaultSxProp : t13;
+  let t14;
   if ($[0] !== positionWhenNarrow || $[1] !== responsivePosition) {
-    t13 = !isResponsiveValue(responsivePosition) && positionWhenNarrow !== "inherit" ? {
+    t14 = !isResponsiveValue(responsivePosition) && positionWhenNarrow !== "inherit" ? {
       regular: responsivePosition,
       narrow: positionWhenNarrow
     } : responsivePosition;
     $[0] = positionWhenNarrow;
     $[1] = responsivePosition;
-    $[2] = t13;
+    $[2] = t14;
   } else {
-    t13 = $[2];
+    t14 = $[2];
   }
-  const positionProp = t13;
+  const positionProp = t14;
   const position = useResponsiveValue(positionProp, "end");
-  let t14;
+  let t15;
   if ($[3] !== dividerWhenNarrow || $[4] !== responsiveDivider) {
-    t14 = !isResponsiveValue(responsiveDivider) && dividerWhenNarrow !== "inherit" ? {
+    t15 = !isResponsiveValue(responsiveDivider) && dividerWhenNarrow !== "inherit" ? {
       regular: responsiveDivider,
       narrow: dividerWhenNarrow
     } : responsiveDivider;
     $[3] = dividerWhenNarrow;
     $[4] = responsiveDivider;
-    $[5] = t14;
+    $[5] = t15;
   } else {
-    t14 = $[5];
+    t15 = $[5];
   }
-  const dividerProp = t14;
+  const dividerProp = t15;
   const dividerVariant = useResponsiveValue(dividerProp, "none");
   const isHidden = useResponsiveValue(responsiveHidden, false);
   const {
@@ -770,42 +777,42 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     paneRef
   } = React.useContext(PageLayoutContext);
   const getDefaultPaneWidth = _temp;
-  let t15;
+  let t16;
   if ($[6] !== width || $[7] !== widthStorageKey) {
-    t15 = () => {
+    t16 = () => {
       if (!canUseDOM) {
         return getDefaultPaneWidth(width);
       }
       let storedWidth;
       try {
         storedWidth = localStorage.getItem(widthStorageKey);
-      } catch (t16) {
+      } catch (t17) {
         storedWidth = null;
       }
       return storedWidth && !isNaN(Number(storedWidth)) ? Number(storedWidth) : getDefaultPaneWidth(width);
     };
     $[6] = width;
     $[7] = widthStorageKey;
-    $[8] = t15;
+    $[8] = t16;
   } else {
-    t15 = $[8];
+    t16 = $[8];
   }
-  const [paneWidth, setPaneWidth] = React.useState(t15);
-  let t16;
+  const [paneWidth, setPaneWidth] = React.useState(t16);
+  let t17;
   if ($[9] !== widthStorageKey) {
-    t16 = width_1 => {
+    t17 = width_1 => {
       setPaneWidth(width_1);
       try {
         localStorage.setItem(widthStorageKey, width_1.toString());
-      } catch (t17) {
+      } catch (t18) {
       }
     };
     $[9] = widthStorageKey;
-    $[10] = t16;
+    $[10] = t17;
   } else {
-    t16 = $[10];
+    t17 = $[10];
   }
-  const updatePaneWidth = t16;
+  const updatePaneWidth = t17;
   useRefObjectAsForwardedRef(forwardRef, paneRef);
   const hasOverflow = useOverflow(paneRef);
   const paneId = useId(id);
@@ -829,158 +836,158 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
   } else {
     labelProp = $[14];
   }
-  let t17;
+  let t18;
   if ($[15] !== className) {
-    t17 = clsx(classes.PaneWrapper, className);
+    t18 = clsx(classes.PaneWrapper, className);
     $[15] = className;
-    $[16] = t17;
+    $[16] = t18;
   } else {
-    t17 = $[16];
+    t18 = $[16];
   }
-  const t18 = typeof offsetHeader === "number" ? `${offsetHeader}px` : offsetHeader;
-  const t19 = `var(--spacing-${rowGap})`;
-  const t20 = `var(--spacing-${columnGap})`;
-  let t21;
-  if ($[17] !== style || $[18] !== t18 || $[19] !== t19 || $[20] !== t20) {
-    t21 = {
-      "--offset-header": t18,
-      "--spacing-row": t19,
-      "--spacing-column": t20,
+  const t19 = typeof offsetHeader === "number" ? `${offsetHeader}px` : offsetHeader;
+  const t20 = `var(--spacing-${rowGap})`;
+  const t21 = `var(--spacing-${columnGap})`;
+  let t22;
+  if ($[17] !== style || $[18] !== t19 || $[19] !== t20 || $[20] !== t21) {
+    t22 = {
+      "--offset-header": t19,
+      "--spacing-row": t20,
+      "--spacing-column": t21,
       ...style
     };
     $[17] = style;
-    $[18] = t18;
-    $[19] = t19;
-    $[20] = t20;
-    $[21] = t21;
+    $[18] = t19;
+    $[19] = t20;
+    $[20] = t21;
+    $[21] = t22;
   } else {
-    t21 = $[21];
+    t22 = $[21];
   }
-  const t22 = sticky || undefined;
-  let t23;
+  const t23 = sticky || undefined;
+  let t24;
   if ($[22] !== dividerVariant) {
-    t23 = {
+    t24 = {
       narrow: dividerVariant,
       regular: "none"
     };
     $[22] = dividerVariant;
-    $[23] = t23;
+    $[23] = t24;
   } else {
-    t23 = $[23];
+    t24 = $[23];
   }
-  const t24 = `var(--spacing-${rowGap})`;
-  let t25;
-  if ($[24] !== t24) {
-    t25 = {
-      "--spacing": t24
+  const t25 = `var(--spacing-${rowGap})`;
+  let t26;
+  if ($[24] !== t25) {
+    t26 = {
+      "--spacing": t25
     };
-    $[24] = t24;
-    $[25] = t25;
+    $[24] = t25;
+    $[25] = t26;
   } else {
-    t25 = $[25];
+    t26 = $[25];
   }
-  const t26 = t25;
-  let t27;
-  if ($[26] !== position || $[27] !== t23 || $[28] !== t26) {
-    t27 = /*#__PURE__*/jsx(HorizontalDivider, {
-      variant: t23,
+  const t27 = t26;
+  let t28;
+  if ($[26] !== position || $[27] !== t24 || $[28] !== t27) {
+    t28 = /*#__PURE__*/jsx(HorizontalDivider, {
+      variant: t24,
       className: classes.PaneHorizontalDivider,
-      style: t26,
+      style: t27,
       position: position
     });
     $[26] = position;
-    $[27] = t23;
-    $[28] = t26;
-    $[29] = t27;
+    $[27] = t24;
+    $[28] = t27;
+    $[29] = t28;
   } else {
-    t27 = $[29];
+    t28 = $[29];
   }
-  let t28;
+  let t29;
   if ($[30] !== hasOverflow) {
-    t28 = hasOverflow ? overflowProps : {};
+    t29 = hasOverflow ? overflowProps : {};
     $[30] = hasOverflow;
-    $[31] = t28;
+    $[31] = t29;
   } else {
-    t28 = $[31];
+    t29 = $[31];
   }
-  let t29;
+  let t30;
   if ($[32] !== id || $[33] !== paneId) {
-    t29 = id && {
+    t30 = id && {
       id: paneId
     };
     $[32] = id;
     $[33] = paneId;
-    $[34] = t29;
+    $[34] = t30;
   } else {
-    t29 = $[34];
+    t30 = $[34];
   }
-  const t30 = resizable || undefined;
-  const t31 = `var(--spacing-${padding})`;
-  const t32 = isCustomWidthOptions(width) ? width.min : `${minWidth}px`;
-  const t33 = isCustomWidthOptions(width) ? width.max : "calc(100vw - var(--pane-max-width-diff))";
-  const t34 = isCustomWidthOptions(width) ? width.default : undefined;
-  const t35 = `var(--pane-width-${isPaneWidth(width) ? width : "custom"})`;
-  const t36 = `${paneWidth}px`;
-  let t37;
-  if ($[35] !== t31 || $[36] !== t32 || $[37] !== t33 || $[38] !== t34 || $[39] !== t35 || $[40] !== t36) {
-    t37 = {
-      "--spacing": t31,
-      "--pane-min-width": t32,
-      "--pane-max-width": t33,
-      "--pane-width-custom": t34,
-      "--pane-width-size": t35,
-      "--pane-width": t36
+  const t31 = resizable || undefined;
+  const t32 = `var(--spacing-${padding})`;
+  const t33 = isCustomWidthOptions(width) ? width.min : `${minWidth}px`;
+  const t34 = isCustomWidthOptions(width) ? width.max : "calc(100vw - var(--pane-max-width-diff))";
+  const t35 = isCustomWidthOptions(width) ? width.default : undefined;
+  const t36 = `var(--pane-width-${isPaneWidth(width) ? width : "custom"})`;
+  const t37 = `${paneWidth}px`;
+  let t38;
+  if ($[35] !== t32 || $[36] !== t33 || $[37] !== t34 || $[38] !== t35 || $[39] !== t36 || $[40] !== t37) {
+    t38 = {
+      "--spacing": t32,
+      "--pane-min-width": t33,
+      "--pane-max-width": t34,
+      "--pane-width-custom": t35,
+      "--pane-width-size": t36,
+      "--pane-width": t37
     };
-    $[35] = t31;
-    $[36] = t32;
-    $[37] = t33;
-    $[38] = t34;
-    $[39] = t35;
-    $[40] = t36;
-    $[41] = t37;
+    $[35] = t32;
+    $[36] = t33;
+    $[37] = t34;
+    $[38] = t35;
+    $[39] = t36;
+    $[40] = t37;
+    $[41] = t38;
   } else {
-    t37 = $[41];
+    t38 = $[41];
   }
-  const t38 = t37;
-  let t39;
-  if ($[42] !== children || $[43] !== labelProp || $[44] !== paneRef || $[45] !== t28 || $[46] !== t29 || $[47] !== t30 || $[48] !== t38) {
-    t39 = /*#__PURE__*/jsx("div", {
+  const t39 = t38;
+  let t40;
+  if ($[42] !== children || $[43] !== labelProp || $[44] !== paneRef || $[45] !== t29 || $[46] !== t30 || $[47] !== t31 || $[48] !== t39) {
+    t40 = /*#__PURE__*/jsx("div", {
       ref: paneRef,
-      ...t28,
-      ...labelProp,
       ...t29,
+      ...labelProp,
+      ...t30,
       className: classes.Pane,
-      "data-resizable": t30,
-      style: t38,
+      "data-resizable": t31,
+      style: t39,
       children: children
     });
     $[42] = children;
     $[43] = labelProp;
     $[44] = paneRef;
-    $[45] = t28;
-    $[46] = t29;
-    $[47] = t30;
-    $[48] = t38;
-    $[49] = t39;
+    $[45] = t29;
+    $[46] = t30;
+    $[47] = t31;
+    $[48] = t39;
+    $[49] = t40;
   } else {
-    t39 = $[49];
+    t40 = $[49];
   }
-  const t40 = resizable ? "line" : dividerVariant;
-  let t41;
-  if ($[50] !== t40) {
-    t41 = {
+  const t41 = resizable ? "line" : dividerVariant;
+  let t42;
+  if ($[50] !== t41) {
+    t42 = {
       narrow: "none",
-      regular: t40
+      regular: t41
     };
-    $[50] = t40;
-    $[51] = t41;
+    $[50] = t41;
+    $[51] = t42;
   } else {
-    t41 = $[51];
+    t42 = $[51];
   }
-  let t42;
+  let t43;
   if ($[52] !== paneWidth || $[53] !== position || $[54] !== updatePaneWidth) {
-    t42 = (delta, t43) => {
-      const isKeyboard = t43 === undefined ? false : t43;
+    t43 = (delta, t44) => {
+      const isKeyboard = t44 === undefined ? false : t44;
       let deltaWithDirection;
       if (isKeyboard) {
         deltaWithDirection = delta;
@@ -992,13 +999,13 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     $[52] = paneWidth;
     $[53] = position;
     $[54] = updatePaneWidth;
-    $[55] = t42;
+    $[55] = t43;
   } else {
-    t42 = $[55];
+    t43 = $[55];
   }
-  let t43;
+  let t44;
   if ($[56] !== paneRef.current || $[57] !== updatePaneWidth) {
-    t43 = () => {
+    t44 = () => {
       var _paneRef$current;
       const paneRect = (_paneRef$current = paneRef.current) === null || _paneRef$current === void 0 ? void 0 : _paneRef$current.getBoundingClientRect();
       if (!paneRect) {
@@ -1008,79 +1015,79 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     };
     $[56] = paneRef.current;
     $[57] = updatePaneWidth;
-    $[58] = t43;
+    $[58] = t44;
   } else {
-    t43 = $[58];
+    t44 = $[58];
   }
-  let t44;
+  let t45;
   if ($[59] !== updatePaneWidth || $[60] !== width) {
-    t44 = () => updatePaneWidth(getDefaultPaneWidth(width));
+    t45 = () => updatePaneWidth(getDefaultPaneWidth(width));
     $[59] = updatePaneWidth;
     $[60] = width;
-    $[61] = t44;
+    $[61] = t45;
   } else {
-    t44 = $[61];
+    t45 = $[61];
   }
-  const t45 = `var(--spacing-${columnGap})`;
-  let t46;
-  if ($[62] !== t45) {
-    t46 = {
-      "--spacing": t45
+  const t46 = `var(--spacing-${columnGap})`;
+  let t47;
+  if ($[62] !== t46) {
+    t47 = {
+      "--spacing": t46
     };
-    $[62] = t45;
-    $[63] = t46;
+    $[62] = t46;
+    $[63] = t47;
   } else {
-    t46 = $[63];
+    t47 = $[63];
   }
-  const t47 = t46;
-  let t48;
-  if ($[64] !== position || $[65] !== resizable || $[66] !== t41 || $[67] !== t42 || $[68] !== t43 || $[69] !== t44 || $[70] !== t47) {
-    t48 = /*#__PURE__*/jsx(VerticalDivider, {
-      variant: t41,
+  const t48 = t47;
+  let t49;
+  if ($[64] !== position || $[65] !== resizable || $[66] !== t42 || $[67] !== t43 || $[68] !== t44 || $[69] !== t45 || $[70] !== t48) {
+    t49 = /*#__PURE__*/jsx(VerticalDivider, {
+      variant: t42,
       draggable: resizable,
-      onDrag: t42,
-      onDragEnd: t43,
+      onDrag: t43,
+      onDragEnd: t44,
       position: position,
-      onDoubleClick: t44,
+      onDoubleClick: t45,
       className: classes.PaneVerticalDivider,
-      style: t47
+      style: t48
     });
     $[64] = position;
     $[65] = resizable;
-    $[66] = t41;
-    $[67] = t42;
-    $[68] = t43;
-    $[69] = t44;
-    $[70] = t47;
-    $[71] = t48;
+    $[66] = t42;
+    $[67] = t43;
+    $[68] = t44;
+    $[69] = t45;
+    $[70] = t48;
+    $[71] = t49;
   } else {
-    t48 = $[71];
+    t49 = $[71];
   }
-  let t49;
-  if ($[72] !== isHidden || $[73] !== position || $[74] !== sx || $[75] !== t17 || $[76] !== t21 || $[77] !== t22 || $[78] !== t27 || $[79] !== t39 || $[80] !== t48) {
-    t49 = /*#__PURE__*/jsxs(BoxWithFallback, {
+  let t50;
+  if ($[72] !== isHidden || $[73] !== position || $[74] !== sx || $[75] !== t18 || $[76] !== t22 || $[77] !== t23 || $[78] !== t28 || $[79] !== t40 || $[80] !== t49) {
+    t50 = /*#__PURE__*/jsxs(BoxWithFallback, {
       sx: sx,
-      className: t17,
-      style: t21,
+      className: t18,
+      style: t22,
       "data-is-hidden": isHidden,
       "data-position": position,
-      "data-sticky": t22,
-      children: [t27, t39, t48]
+      "data-sticky": t23,
+      children: [t28, t40, t49]
     });
     $[72] = isHidden;
     $[73] = position;
     $[74] = sx;
-    $[75] = t17;
-    $[76] = t21;
-    $[77] = t22;
-    $[78] = t27;
-    $[79] = t39;
-    $[80] = t48;
-    $[81] = t49;
+    $[75] = t18;
+    $[76] = t22;
+    $[77] = t23;
+    $[78] = t28;
+    $[79] = t40;
+    $[80] = t49;
+    $[81] = t50;
   } else {
-    t49 = $[81];
+    t50 = $[81];
   }
-  return t49;
+  return t50;
 });
 Pane.displayName = 'PageLayout.Pane';
 
@@ -1097,7 +1104,7 @@ const Footer = t0 => {
     dividerWhenNarrow: t3,
     hidden: t4,
     children,
-    sx,
+    sx: t5,
     className,
     style
   } = t0;
@@ -1105,121 +1112,122 @@ const Footer = t0 => {
   const divider = t2 === undefined ? "none" : t2;
   const dividerWhenNarrow = t3 === undefined ? "inherit" : t3;
   const hidden = t4 === undefined ? false : t4;
-  let t5;
+  const sx = t5 === undefined ? defaultSxProp : t5;
+  let t6;
   if ($[0] !== divider || $[1] !== dividerWhenNarrow) {
-    t5 = !isResponsiveValue(divider) && dividerWhenNarrow !== "inherit" ? {
+    t6 = !isResponsiveValue(divider) && dividerWhenNarrow !== "inherit" ? {
       regular: divider,
       narrow: dividerWhenNarrow
     } : divider;
     $[0] = divider;
     $[1] = dividerWhenNarrow;
-    $[2] = t5;
+    $[2] = t6;
   } else {
-    t5 = $[2];
+    t6 = $[2];
   }
-  const dividerProp = t5;
+  const dividerProp = t6;
   const dividerVariant = useResponsiveValue(dividerProp, "none");
   const isHidden = useResponsiveValue(hidden, false);
   const {
     rowGap
   } = React.useContext(PageLayoutContext);
-  let t6;
+  let t7;
   if ($[3] !== className) {
-    t6 = clsx(classes.FooterWrapper, className);
+    t7 = clsx(classes.FooterWrapper, className);
     $[3] = className;
-    $[4] = t6;
+    $[4] = t7;
   } else {
-    t6 = $[4];
+    t7 = $[4];
   }
-  const t7 = `var(--spacing-${rowGap})`;
-  let t8;
-  if ($[5] !== style || $[6] !== t7) {
-    t8 = {
-      "--spacing": t7,
+  const t8 = `var(--spacing-${rowGap})`;
+  let t9;
+  if ($[5] !== style || $[6] !== t8) {
+    t9 = {
+      "--spacing": t8,
       ...style
     };
     $[5] = style;
-    $[6] = t7;
-    $[7] = t8;
+    $[6] = t8;
+    $[7] = t9;
   } else {
-    t8 = $[7];
+    t9 = $[7];
   }
-  const t9 = t8;
-  const t10 = `var(--spacing-${rowGap})`;
-  let t11;
-  if ($[8] !== t10) {
-    t11 = {
-      "--spacing": t10
+  const t10 = t9;
+  const t11 = `var(--spacing-${rowGap})`;
+  let t12;
+  if ($[8] !== t11) {
+    t12 = {
+      "--spacing": t11
     };
-    $[8] = t10;
-    $[9] = t11;
+    $[8] = t11;
+    $[9] = t12;
   } else {
-    t11 = $[9];
+    t12 = $[9];
   }
-  const t12 = t11;
-  let t13;
-  if ($[10] !== dividerVariant || $[11] !== t12) {
-    t13 = /*#__PURE__*/jsx(HorizontalDivider, {
+  const t13 = t12;
+  let t14;
+  if ($[10] !== dividerVariant || $[11] !== t13) {
+    t14 = /*#__PURE__*/jsx(HorizontalDivider, {
       className: classes.FooterHorizontalDivider,
-      style: t12,
+      style: t13,
       variant: dividerVariant
     });
     $[10] = dividerVariant;
-    $[11] = t12;
-    $[12] = t13;
+    $[11] = t13;
+    $[12] = t14;
   } else {
-    t13 = $[12];
+    t14 = $[12];
   }
-  const t14 = `var(--spacing-${padding})`;
-  let t15;
-  if ($[13] !== t14) {
-    t15 = {
-      "--spacing": t14
+  const t15 = `var(--spacing-${padding})`;
+  let t16;
+  if ($[13] !== t15) {
+    t16 = {
+      "--spacing": t15
     };
-    $[13] = t14;
-    $[14] = t15;
+    $[13] = t15;
+    $[14] = t16;
   } else {
-    t15 = $[14];
+    t16 = $[14];
   }
-  const t16 = t15;
-  let t17;
-  if ($[15] !== children || $[16] !== t16) {
-    t17 = /*#__PURE__*/jsx("div", {
+  const t17 = t16;
+  let t18;
+  if ($[15] !== children || $[16] !== t17) {
+    t18 = /*#__PURE__*/jsx("div", {
       className: classes.FooterContent,
-      style: t16,
+      style: t17,
       children: children
     });
     $[15] = children;
-    $[16] = t16;
-    $[17] = t17;
+    $[16] = t17;
+    $[17] = t18;
   } else {
-    t17 = $[17];
+    t18 = $[17];
   }
-  let t18;
-  if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== sx || $[22] !== t13 || $[23] !== t17 || $[24] !== t6 || $[25] !== t9) {
-    t18 = /*#__PURE__*/jsxs(BoxWithFallback, {
+  let t19;
+  if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== sx || $[22] !== t10 || $[23] !== t14 || $[24] !== t18 || $[25] !== t7) {
+    t19 = /*#__PURE__*/jsxs(BoxWithFallback, {
       as: "footer",
       "aria-label": label,
       "aria-labelledby": labelledBy,
       hidden: isHidden,
-      className: t6,
+      className: t7,
       sx: sx,
-      style: t9,
-      children: [t13, t17]
+      style: t10,
+      children: [t14, t18]
     });
     $[18] = isHidden;
     $[19] = label;
     $[20] = labelledBy;
     $[21] = sx;
-    $[22] = t13;
-    $[23] = t17;
-    $[24] = t6;
-    $[25] = t9;
-    $[26] = t18;
+    $[22] = t10;
+    $[23] = t14;
+    $[24] = t18;
+    $[25] = t7;
+    $[26] = t19;
   } else {
-    t18 = $[26];
+    t19 = $[26];
   }
-  return t18;
+  return t19;
 };
 Footer.displayName = 'PageLayout.Footer';