@primer/react 38.1.0-rc.e96ea6506 → 38.1.0-rc.ee8ca60b6

package/dist/PageLayout/PageLayout.js

@@ -3,11 +3,12 @@ import React, { useRef } from 'react';
 import { clsx } from 'clsx';
 import { useId } from '../hooks/useId.js';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
-import { isResponsiveValue, useResponsiveValue } from '../hooks/useResponsiveValue.js';
+import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
 import { useSlots } from '../hooks/useSlots.js';
 import { canUseDOM } from '../utils/environment.js';
 import { useOverflow } from '../hooks/useOverflow.js';
 import { warning } from '../utils/warning.js';
+import { getResponsiveAttributes } from '../internal/utils/getResponsiveAttributes.js';
 import classes from './PageLayout.module.css.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -156,7 +157,7 @@ Root.displayName = 'PageLayout';
 // Divider (internal)
 
 const HorizontalDivider = t0 => {
-  const $ = c(10);
+  const $ = c(14);
   const {
     variant: t1,
     className,
@@ -167,7 +168,6 @@ const HorizontalDivider = t0 => {
   const {
     padding
   } = React.useContext(PageLayoutContext);
-  const responsiveVariant = useResponsiveValue(variant, "none");
   let t2;
   if ($[0] !== className) {
     t2 = clsx(classes.HorizontalDivider, className);
@@ -176,40 +176,56 @@ const HorizontalDivider = t0 => {
   } else {
     t2 = $[1];
   }
-  const t3 = `var(--spacing-${padding})`;
+  let t3;
+  if ($[2] !== variant) {
+    t3 = getResponsiveAttributes("variant", variant);
+    $[2] = variant;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
   let t4;
-  if ($[2] !== style || $[3] !== t3) {
-    t4 = {
-      "--spacing-divider": t3,
+  if ($[4] !== position) {
+    t4 = getResponsiveAttributes("position", position);
+    $[4] = position;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  const t5 = `var(--spacing-${padding})`;
+  let t6;
+  if ($[6] !== style || $[7] !== t5) {
+    t6 = {
+      "--spacing-divider": t5,
       ...style
     };
-    $[2] = style;
-    $[3] = t3;
-    $[4] = t4;
+    $[6] = style;
+    $[7] = t5;
+    $[8] = t6;
   } else {
-    t4 = $[4];
+    t6 = $[8];
   }
-  const t5 = t4;
-  let t6;
-  if ($[5] !== position || $[6] !== responsiveVariant || $[7] !== t2 || $[8] !== t5) {
-    t6 = /*#__PURE__*/jsx("div", {
+  const t7 = t6;
+  let t8;
+  if ($[9] !== t2 || $[10] !== t3 || $[11] !== t4 || $[12] !== t7) {
+    t8 = /*#__PURE__*/jsx("div", {
       className: t2,
-      "data-variant": responsiveVariant,
-      "data-position": position,
-      style: t5
+      ...t3,
+      ...t4,
+      style: t7
     });
-    $[5] = position;
-    $[6] = responsiveVariant;
-    $[7] = t2;
-    $[8] = t5;
-    $[9] = t6;
+    $[9] = t2;
+    $[10] = t3;
+    $[11] = t4;
+    $[12] = t7;
+    $[13] = t8;
   } else {
-    t6 = $[9];
+    t8 = $[13];
   }
-  return t6;
+  return t8;
 };
 const VerticalDivider = t0 => {
-  const $ = c(36);
+  const $ = c(40);
   const {
     variant: t1,
     draggable: t2,
@@ -225,7 +241,6 @@ const VerticalDivider = t0 => {
   const draggable = t2 === undefined ? false : t2;
   const [isDragging, setIsDragging] = React.useState(false);
   const [isKeyboardDrag, setIsKeyboardDrag] = React.useState(false);
-  const responsiveVariant = useResponsiveValue(variant, "none");
   const stableOnDrag = React.useRef(onDrag);
   const stableOnDragEnd = React.useRef(onDragEnd);
   const {
@@ -380,8 +395,24 @@ const VerticalDivider = t0 => {
     t11 = $[20];
   }
   let t12;
-  if ($[21] !== currentWidth || $[22] !== draggable || $[23] !== isDragging || $[24] !== isKeyboardDrag || $[25] !== maxWidth || $[26] !== minWidth || $[27] !== onDoubleClick || $[28] !== onDragStart) {
-    t12 = draggable ? /*#__PURE__*/jsx("div", {
+  if ($[21] !== variant) {
+    t12 = getResponsiveAttributes("variant", variant);
+    $[21] = variant;
+    $[22] = t12;
+  } else {
+    t12 = $[22];
+  }
+  let t13;
+  if ($[23] !== position) {
+    t13 = getResponsiveAttributes("position", position);
+    $[23] = position;
+    $[24] = t13;
+  } else {
+    t13 = $[24];
+  }
+  let t14;
+  if ($[25] !== currentWidth || $[26] !== draggable || $[27] !== isDragging || $[28] !== isKeyboardDrag || $[29] !== maxWidth || $[30] !== minWidth || $[31] !== onDoubleClick || $[32] !== onDragStart) {
+    t14 = draggable ? /*#__PURE__*/jsx("div", {
       className: classes.DraggableHandle,
       "data-dragging": isDragging || isKeyboardDrag,
       role: "slider",
@@ -405,44 +436,44 @@ const VerticalDivider = t0 => {
       },
       onDoubleClick: onDoubleClick
     }) : null;
-    $[21] = currentWidth;
-    $[22] = draggable;
-    $[23] = isDragging;
-    $[24] = isKeyboardDrag;
-    $[25] = maxWidth;
-    $[26] = minWidth;
-    $[27] = onDoubleClick;
-    $[28] = onDragStart;
-    $[29] = t12;
-  } else {
-    t12 = $[29];
+    $[25] = currentWidth;
+    $[26] = draggable;
+    $[27] = isDragging;
+    $[28] = isKeyboardDrag;
+    $[29] = maxWidth;
+    $[30] = minWidth;
+    $[31] = onDoubleClick;
+    $[32] = onDragStart;
+    $[33] = t14;
+  } else {
+    t14 = $[33];
   }
-  let t13;
-  if ($[30] !== position || $[31] !== responsiveVariant || $[32] !== style || $[33] !== t11 || $[34] !== t12) {
-    t13 = /*#__PURE__*/jsx("div", {
+  let t15;
+  if ($[34] !== style || $[35] !== t11 || $[36] !== t12 || $[37] !== t13 || $[38] !== t14) {
+    t15 = /*#__PURE__*/jsx("div", {
       className: t11,
-      "data-variant": responsiveVariant,
-      "data-position": position,
+      ...t12,
+      ...t13,
       style: style,
-      children: t12
+      children: t14
     });
-    $[30] = position;
-    $[31] = responsiveVariant;
-    $[32] = style;
-    $[33] = t11;
-    $[34] = t12;
-    $[35] = t13;
+    $[34] = style;
+    $[35] = t11;
+    $[36] = t12;
+    $[37] = t13;
+    $[38] = t14;
+    $[39] = t15;
   } else {
-    t13 = $[35];
+    t15 = $[39];
   }
-  return t13;
+  return t15;
 };
 
 // ----------------------------------------------------------------------------
 // PageLayout.Header
 
 const Header = t0 => {
-  const $ = c(26);
+  const $ = c(28);
   const {
     "aria-label": label,
     "aria-labelledby": labelledBy,
@@ -471,109 +502,115 @@ const Header = t0 => {
     t5 = $[2];
   }
   const dividerProp = t5;
-  const dividerVariant = useResponsiveValue(dividerProp, "none");
-  const isHidden = useResponsiveValue(hidden, false);
   const {
     rowGap
   } = React.useContext(PageLayoutContext);
   let t6;
-  if ($[3] !== className) {
-    t6 = clsx(classes.Header, className);
-    $[3] = className;
+  if ($[3] !== hidden) {
+    t6 = getResponsiveAttributes("hidden", hidden);
+    $[3] = hidden;
     $[4] = t6;
   } else {
     t6 = $[4];
   }
-  const t7 = `var(--spacing-${rowGap})`;
-  let t8;
-  if ($[5] !== style || $[6] !== t7) {
-    t8 = {
-      "--spacing": t7,
+  let t7;
+  if ($[5] !== className) {
+    t7 = clsx(classes.Header, className);
+    $[5] = className;
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  const t8 = `var(--spacing-${rowGap})`;
+  let t9;
+  if ($[7] !== style || $[8] !== t8) {
+    t9 = {
+      "--spacing": t8,
       ...style
     };
-    $[5] = style;
-    $[6] = t7;
-    $[7] = t8;
+    $[7] = style;
+    $[8] = t8;
+    $[9] = t9;
   } else {
-    t8 = $[7];
+    t9 = $[9];
   }
-  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 ($[10] !== t11) {
+    t12 = {
+      "--spacing": t11
     };
-    $[8] = t10;
-    $[9] = t11;
+    $[10] = t11;
+    $[11] = t12;
   } else {
-    t11 = $[9];
+    t12 = $[11];
   }
-  const t12 = t11;
-  let t13;
-  if ($[10] !== children || $[11] !== t12) {
-    t13 = /*#__PURE__*/jsx("div", {
+  const t13 = t12;
+  let t14;
+  if ($[12] !== children || $[13] !== t13) {
+    t14 = /*#__PURE__*/jsx("div", {
       className: classes.HeaderContent,
-      style: t12,
+      style: t13,
       children: children
     });
-    $[10] = children;
-    $[11] = t12;
-    $[12] = t13;
+    $[12] = children;
+    $[13] = t13;
+    $[14] = t14;
   } else {
-    t13 = $[12];
+    t14 = $[14];
   }
-  const t14 = `var(--spacing-${rowGap})`;
-  let t15;
-  if ($[13] !== t14) {
-    t15 = {
-      "--spacing": t14
+  const t15 = `var(--spacing-${rowGap})`;
+  let t16;
+  if ($[15] !== t15) {
+    t16 = {
+      "--spacing": t15
     };
-    $[13] = t14;
-    $[14] = t15;
+    $[15] = t15;
+    $[16] = t16;
   } else {
-    t15 = $[14];
+    t16 = $[16];
   }
-  const t16 = t15;
-  let t17;
-  if ($[15] !== dividerVariant || $[16] !== t16) {
-    t17 = /*#__PURE__*/jsx(HorizontalDivider, {
-      variant: dividerVariant,
+  const t17 = t16;
+  let t18;
+  if ($[17] !== dividerProp || $[18] !== t17) {
+    t18 = /*#__PURE__*/jsx(HorizontalDivider, {
+      variant: dividerProp,
       className: classes.HeaderHorizontalDivider,
-      style: t16
+      style: t17
     });
-    $[15] = dividerVariant;
-    $[16] = t16;
-    $[17] = t17;
+    $[17] = dividerProp;
+    $[18] = t17;
+    $[19] = t18;
   } else {
-    t17 = $[17];
+    t18 = $[19];
   }
-  let t18;
-  if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== t13 || $[22] !== t17 || $[23] !== t6 || $[24] !== t9) {
-    t18 = /*#__PURE__*/jsxs("header", {
+  let t19;
+  if ($[20] !== label || $[21] !== labelledBy || $[22] !== t10 || $[23] !== t14 || $[24] !== t18 || $[25] !== t6 || $[26] !== t7) {
+    t19 = /*#__PURE__*/jsxs("header", {
       "aria-label": label,
       "aria-labelledby": labelledBy,
-      hidden: isHidden,
-      className: t6,
-      style: t9,
-      children: [t13, t17]
+      ...t6,
+      className: t7,
+      style: t10,
+      children: [t14, t18]
     });
-    $[18] = isHidden;
-    $[19] = label;
-    $[20] = labelledBy;
-    $[21] = t13;
-    $[22] = t17;
-    $[23] = t6;
-    $[24] = t9;
-    $[25] = t18;
-  } else {
-    t18 = $[25];
-  }
-  return t18;
+    $[20] = label;
+    $[21] = labelledBy;
+    $[22] = t10;
+    $[23] = t14;
+    $[24] = t18;
+    $[25] = t6;
+    $[26] = t7;
+    $[27] = t19;
+  } else {
+    t19 = $[27];
+  }
+  return t19;
 };
 Header.displayName = 'PageLayout.Header';
 const Content = t0 => {
-  const $ = c(16);
+  const $ = c(18);
   const {
     as: t1,
     "aria-label": label,
@@ -589,7 +626,6 @@ const Content = t0 => {
   const width = t2 === undefined ? "full" : t2;
   const padding = t3 === undefined ? "none" : t3;
   const hidden = t4 === undefined ? false : t4;
-  const isHidden = useResponsiveValue(hidden, false);
   const Component = as;
   let t5;
   if ($[0] !== className) {
@@ -599,55 +635,63 @@ const Content = t0 => {
   } else {
     t5 = $[1];
   }
-  const t6 = `var(--spacing-${padding})`;
-  let t7;
-  if ($[2] !== t6) {
-    t7 = {
-      "--spacing": t6
+  let t6;
+  if ($[2] !== hidden) {
+    t6 = getResponsiveAttributes("is-hidden", hidden);
+    $[2] = hidden;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  const t7 = `var(--spacing-${padding})`;
+  let t8;
+  if ($[4] !== t7) {
+    t8 = {
+      "--spacing": t7
     };
-    $[2] = t6;
-    $[3] = t7;
+    $[4] = t7;
+    $[5] = t8;
   } else {
-    t7 = $[3];
+    t8 = $[5];
   }
-  const t8 = t7;
-  let t9;
-  if ($[4] !== children || $[5] !== t8 || $[6] !== width) {
-    t9 = /*#__PURE__*/jsx("div", {
+  const t9 = t8;
+  let t10;
+  if ($[6] !== children || $[7] !== t9 || $[8] !== width) {
+    t10 = /*#__PURE__*/jsx("div", {
       className: classes.Content,
       "data-width": width,
-      style: t8,
+      style: t9,
       children: children
     });
-    $[4] = children;
-    $[5] = t8;
-    $[6] = width;
+    $[6] = children;
     $[7] = t9;
+    $[8] = width;
+    $[9] = t10;
   } else {
-    t9 = $[7];
+    t10 = $[9];
   }
-  let t10;
-  if ($[8] !== Component || $[9] !== isHidden || $[10] !== label || $[11] !== labelledBy || $[12] !== style || $[13] !== t5 || $[14] !== t9) {
-    t10 = /*#__PURE__*/jsx(Component, {
+  let t11;
+  if ($[10] !== Component || $[11] !== label || $[12] !== labelledBy || $[13] !== style || $[14] !== t10 || $[15] !== t5 || $[16] !== t6) {
+    t11 = /*#__PURE__*/jsx(Component, {
       "aria-label": label,
       "aria-labelledby": labelledBy,
       style: style,
       className: t5,
-      "data-is-hidden": isHidden,
-      children: t9
+      ...t6,
+      children: t10
     });
-    $[8] = Component;
-    $[9] = isHidden;
-    $[10] = label;
-    $[11] = labelledBy;
-    $[12] = style;
-    $[13] = t5;
-    $[14] = t9;
-    $[15] = t10;
-  } else {
-    t10 = $[15];
-  }
-  return t10;
+    $[10] = Component;
+    $[11] = label;
+    $[12] = labelledBy;
+    $[13] = style;
+    $[14] = t10;
+    $[15] = t5;
+    $[16] = t6;
+    $[17] = t11;
+  } else {
+    t11 = $[17];
+  }
+  return t11;
 };
 Content.displayName = 'PageLayout.Content';
 
@@ -671,7 +715,7 @@ const overflowProps = {
   role: 'region'
 };
 const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
-  const $ = c(81);
+  const $ = c(92);
   const {
     "aria-label": label,
     "aria-labelledby": labelledBy,
@@ -717,7 +761,6 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     t13 = $[2];
   }
   const positionProp = t13;
-  const position = useResponsiveValue(positionProp, "end");
   let t14;
   if ($[3] !== dividerWhenNarrow || $[4] !== responsiveDivider) {
     t14 = !isResponsiveValue(responsiveDivider) && dividerWhenNarrow !== "inherit" ? {
@@ -731,55 +774,71 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     t14 = $[5];
   }
   const dividerProp = t14;
-  const dividerVariant = useResponsiveValue(dividerProp, "none");
-  const isHidden = useResponsiveValue(responsiveHidden, false);
+  let t15;
+  if ($[6] !== positionProp) {
+    t15 = isResponsiveValue(positionProp) ? "end" : positionProp;
+    $[6] = positionProp;
+    $[7] = t15;
+  } else {
+    t15 = $[7];
+  }
+  const position = t15;
+  let t16;
+  if ($[8] !== dividerProp) {
+    t16 = isResponsiveValue(dividerProp) ? "none" : dividerProp;
+    $[8] = dividerProp;
+    $[9] = t16;
+  } else {
+    t16 = $[9];
+  }
+  const dividerVariant = t16;
   const {
     rowGap,
     columnGap,
     paneRef
   } = React.useContext(PageLayoutContext);
   const getDefaultPaneWidth = _temp;
-  let t15;
-  if ($[6] !== width || $[7] !== widthStorageKey) {
-    t15 = () => {
+  let t17;
+  if ($[10] !== width || $[11] !== widthStorageKey) {
+    t17 = () => {
       if (!canUseDOM) {
         return getDefaultPaneWidth(width);
       }
       let storedWidth;
       try {
         storedWidth = localStorage.getItem(widthStorageKey);
-      } catch (t16) {
+      } catch (t18) {
         storedWidth = null;
       }
       return storedWidth && !isNaN(Number(storedWidth)) ? Number(storedWidth) : getDefaultPaneWidth(width);
     };
-    $[6] = width;
-    $[7] = widthStorageKey;
-    $[8] = t15;
+    $[10] = width;
+    $[11] = widthStorageKey;
+    $[12] = t17;
   } else {
-    t15 = $[8];
+    t17 = $[12];
   }
-  const [paneWidth, setPaneWidth] = React.useState(t15);
-  let t16;
-  if ($[9] !== widthStorageKey) {
-    t16 = width_1 => {
+  const [paneWidth, setPaneWidth] = React.useState(t17);
+  let t18;
+  if ($[13] !== widthStorageKey) {
+    t18 = width_1 => {
       setPaneWidth(width_1);
       try {
         localStorage.setItem(widthStorageKey, width_1.toString());
-      } catch (t17) {
+      } catch (t19) {
       }
     };
-    $[9] = widthStorageKey;
-    $[10] = t16;
+    $[13] = widthStorageKey;
+    $[14] = t18;
   } else {
-    t16 = $[10];
+    t18 = $[14];
   }
-  const updatePaneWidth = t16;
+  const updatePaneWidth = t18;
   useRefObjectAsForwardedRef(forwardRef, paneRef);
   const hasOverflow = useOverflow(paneRef);
   const paneId = useId(id);
   let labelProp;
-  if ($[11] !== hasOverflow || $[12] !== label || $[13] !== labelledBy) {
+  if ($[15] !== hasOverflow || $[16] !== label || $[17] !== 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;
@@ -791,166 +850,188 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
         }
       }
     }
-    $[11] = hasOverflow;
-    $[12] = label;
-    $[13] = labelledBy;
-    $[14] = labelProp;
+    $[15] = hasOverflow;
+    $[16] = label;
+    $[17] = labelledBy;
+    $[18] = labelProp;
   } else {
-    labelProp = $[14];
+    labelProp = $[18];
   }
-  let t17;
-  if ($[15] !== className) {
-    t17 = clsx(classes.PaneWrapper, className);
-    $[15] = className;
-    $[16] = t17;
-  } else {
-    t17 = $[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,
+  let t19;
+  if ($[19] !== className) {
+    t19 = clsx(classes.PaneWrapper, className);
+    $[19] = className;
+    $[20] = t19;
+  } else {
+    t19 = $[20];
+  }
+  const t20 = typeof offsetHeader === "number" ? `${offsetHeader}px` : offsetHeader;
+  const t21 = `var(--spacing-${rowGap})`;
+  const t22 = `var(--spacing-${columnGap})`;
+  let t23;
+  if ($[21] !== style || $[22] !== t20 || $[23] !== t21 || $[24] !== t22) {
+    t23 = {
+      "--offset-header": t20,
+      "--spacing-row": t21,
+      "--spacing-column": t22,
       ...style
     };
-    $[17] = style;
-    $[18] = t18;
-    $[19] = t19;
-    $[20] = t20;
-    $[21] = t21;
-  } else {
-    t21 = $[21];
-  }
-  const t22 = t21;
-  const t23 = sticky || undefined;
-  let t24;
-  if ($[22] !== dividerVariant) {
-    t24 = {
+    $[21] = style;
+    $[22] = t20;
+    $[23] = t21;
+    $[24] = t22;
+    $[25] = t23;
+  } else {
+    t23 = $[25];
+  }
+  const t24 = t23;
+  let t25;
+  if ($[26] !== responsiveHidden) {
+    t25 = getResponsiveAttributes("is-hidden", responsiveHidden);
+    $[26] = responsiveHidden;
+    $[27] = t25;
+  } else {
+    t25 = $[27];
+  }
+  let t26;
+  if ($[28] !== positionProp) {
+    t26 = getResponsiveAttributes("position", positionProp);
+    $[28] = positionProp;
+    $[29] = t26;
+  } else {
+    t26 = $[29];
+  }
+  const t27 = sticky || undefined;
+  let t28;
+  if ($[30] !== dividerProp || $[31] !== dividerVariant) {
+    t28 = isResponsiveValue(dividerProp) ? dividerProp : {
       narrow: dividerVariant,
       regular: "none"
     };
-    $[22] = dividerVariant;
-    $[23] = t24;
+    $[30] = dividerProp;
+    $[31] = dividerVariant;
+    $[32] = t28;
   } else {
-    t24 = $[23];
+    t28 = $[32];
   }
-  const t25 = `var(--spacing-${rowGap})`;
-  let t26;
-  if ($[24] !== t25) {
-    t26 = {
-      "--spacing": t25
+  const t29 = `var(--spacing-${rowGap})`;
+  let t30;
+  if ($[33] !== t29) {
+    t30 = {
+      "--spacing": t29
     };
-    $[24] = t25;
-    $[25] = t26;
+    $[33] = t29;
+    $[34] = t30;
   } else {
-    t26 = $[25];
+    t30 = $[34];
   }
-  const t27 = t26;
-  let t28;
-  if ($[26] !== position || $[27] !== t24 || $[28] !== t27) {
-    t28 = /*#__PURE__*/jsx(HorizontalDivider, {
-      variant: t24,
+  const t31 = t30;
+  let t32;
+  if ($[35] !== positionProp || $[36] !== t28 || $[37] !== t31) {
+    t32 = /*#__PURE__*/jsx(HorizontalDivider, {
+      variant: t28,
       className: classes.PaneHorizontalDivider,
-      style: t27,
-      position: position
+      style: t31,
+      position: positionProp
     });
-    $[26] = position;
-    $[27] = t24;
-    $[28] = t27;
-    $[29] = t28;
+    $[35] = positionProp;
+    $[36] = t28;
+    $[37] = t31;
+    $[38] = t32;
   } else {
-    t28 = $[29];
+    t32 = $[38];
   }
-  let t29;
-  if ($[30] !== hasOverflow) {
-    t29 = hasOverflow ? overflowProps : {};
-    $[30] = hasOverflow;
-    $[31] = t29;
+  let t33;
+  if ($[39] !== hasOverflow) {
+    t33 = hasOverflow ? overflowProps : {};
+    $[39] = hasOverflow;
+    $[40] = t33;
   } else {
-    t29 = $[31];
+    t33 = $[40];
   }
-  let t30;
-  if ($[32] !== id || $[33] !== paneId) {
-    t30 = id && {
+  let t34;
+  if ($[41] !== id || $[42] !== paneId) {
+    t34 = id && {
       id: paneId
     };
-    $[32] = id;
-    $[33] = paneId;
-    $[34] = t30;
+    $[41] = id;
+    $[42] = paneId;
+    $[43] = t34;
   } else {
-    t30 = $[34];
+    t34 = $[43];
   }
-  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
+  const t35 = resizable || undefined;
+  const t36 = `var(--spacing-${padding})`;
+  const t37 = isCustomWidthOptions(width) ? width.min : `${minWidth}px`;
+  const t38 = isCustomWidthOptions(width) ? width.max : "calc(100vw - var(--pane-max-width-diff))";
+  const t39 = isCustomWidthOptions(width) ? width.default : undefined;
+  const t40 = `var(--pane-width-${isPaneWidth(width) ? width : "custom"})`;
+  const t41 = `${paneWidth}px`;
+  let t42;
+  if ($[44] !== t36 || $[45] !== t37 || $[46] !== t38 || $[47] !== t39 || $[48] !== t40 || $[49] !== t41) {
+    t42 = {
+      "--spacing": t36,
+      "--pane-min-width": t37,
+      "--pane-max-width": t38,
+      "--pane-width-custom": t39,
+      "--pane-width-size": t40,
+      "--pane-width": t41
     };
-    $[35] = t32;
-    $[36] = t33;
-    $[37] = t34;
-    $[38] = t35;
-    $[39] = t36;
-    $[40] = t37;
-    $[41] = t38;
-  } else {
-    t38 = $[41];
-  }
-  const t39 = t38;
-  let t40;
-  if ($[42] !== children || $[43] !== labelProp || $[44] !== paneRef || $[45] !== t29 || $[46] !== t30 || $[47] !== t31 || $[48] !== t39) {
-    t40 = /*#__PURE__*/jsx("div", {
+    $[44] = t36;
+    $[45] = t37;
+    $[46] = t38;
+    $[47] = t39;
+    $[48] = t40;
+    $[49] = t41;
+    $[50] = t42;
+  } else {
+    t42 = $[50];
+  }
+  const t43 = t42;
+  let t44;
+  if ($[51] !== children || $[52] !== labelProp || $[53] !== paneRef || $[54] !== t33 || $[55] !== t34 || $[56] !== t35 || $[57] !== t43) {
+    t44 = /*#__PURE__*/jsx("div", {
       ref: paneRef,
-      ...t29,
+      ...t33,
       ...labelProp,
-      ...t30,
+      ...t34,
       className: classes.Pane,
-      "data-resizable": t31,
-      style: t39,
+      "data-resizable": t35,
+      style: t43,
       children: children
     });
-    $[42] = children;
-    $[43] = labelProp;
-    $[44] = paneRef;
-    $[45] = t29;
-    $[46] = t30;
-    $[47] = t31;
-    $[48] = t39;
-    $[49] = t40;
-  } else {
-    t40 = $[49];
-  }
-  const t41 = resizable ? "line" : dividerVariant;
-  let t42;
-  if ($[50] !== t41) {
-    t42 = {
+    $[51] = children;
+    $[52] = labelProp;
+    $[53] = paneRef;
+    $[54] = t33;
+    $[55] = t34;
+    $[56] = t35;
+    $[57] = t43;
+    $[58] = t44;
+  } else {
+    t44 = $[58];
+  }
+  let t45;
+  if ($[59] !== dividerProp || $[60] !== dividerVariant || $[61] !== resizable) {
+    t45 = isResponsiveValue(dividerProp) ? {
+      narrow: "none",
+      regular: resizable ? "line" : dividerProp.regular || "none",
+      wide: resizable ? "line" : dividerProp.wide || dividerProp.regular || "none"
+    } : {
       narrow: "none",
-      regular: t41
+      regular: resizable ? "line" : dividerVariant
     };
-    $[50] = t41;
-    $[51] = t42;
+    $[59] = dividerProp;
+    $[60] = dividerVariant;
+    $[61] = resizable;
+    $[62] = t45;
   } else {
-    t42 = $[51];
+    t45 = $[62];
   }
-  let t43;
-  if ($[52] !== paneWidth || $[53] !== position || $[54] !== updatePaneWidth) {
-    t43 = (delta, t44) => {
-      const isKeyboard = t44 === undefined ? false : t44;
+  let t46;
+  if ($[63] !== paneWidth || $[64] !== position || $[65] !== updatePaneWidth) {
+    t46 = (delta, t47) => {
+      const isKeyboard = t47 === undefined ? false : t47;
       let deltaWithDirection;
       if (isKeyboard) {
         deltaWithDirection = delta;
@@ -959,16 +1040,16 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
       }
       updatePaneWidth(paneWidth + deltaWithDirection);
     };
-    $[52] = paneWidth;
-    $[53] = position;
-    $[54] = updatePaneWidth;
-    $[55] = t43;
+    $[63] = paneWidth;
+    $[64] = position;
+    $[65] = updatePaneWidth;
+    $[66] = t46;
   } else {
-    t43 = $[55];
+    t46 = $[66];
   }
-  let t44;
-  if ($[56] !== paneRef || $[57] !== updatePaneWidth) {
-    t44 = () => {
+  let t47;
+  if ($[67] !== paneRef || $[68] !== updatePaneWidth) {
+    t47 = () => {
       var _paneRef$current;
       const paneRect = (_paneRef$current = paneRef.current) === null || _paneRef$current === void 0 ? void 0 : _paneRef$current.getBoundingClientRect();
       if (!paneRect) {
@@ -976,79 +1057,79 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
       }
       updatePaneWidth(paneRect.width);
     };
-    $[56] = paneRef;
-    $[57] = updatePaneWidth;
-    $[58] = t44;
+    $[67] = paneRef;
+    $[68] = updatePaneWidth;
+    $[69] = t47;
   } else {
-    t44 = $[58];
+    t47 = $[69];
   }
-  let t45;
-  if ($[59] !== updatePaneWidth || $[60] !== width) {
-    t45 = () => updatePaneWidth(getDefaultPaneWidth(width));
-    $[59] = updatePaneWidth;
-    $[60] = width;
-    $[61] = t45;
+  let t48;
+  if ($[70] !== updatePaneWidth || $[71] !== width) {
+    t48 = () => updatePaneWidth(getDefaultPaneWidth(width));
+    $[70] = updatePaneWidth;
+    $[71] = width;
+    $[72] = t48;
   } else {
-    t45 = $[61];
+    t48 = $[72];
   }
-  const t46 = `var(--spacing-${columnGap})`;
-  let t47;
-  if ($[62] !== t46) {
-    t47 = {
-      "--spacing": t46
+  const t49 = `var(--spacing-${columnGap})`;
+  let t50;
+  if ($[73] !== t49) {
+    t50 = {
+      "--spacing": t49
     };
-    $[62] = t46;
-    $[63] = t47;
+    $[73] = t49;
+    $[74] = t50;
   } else {
-    t47 = $[63];
+    t50 = $[74];
   }
-  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,
+  const t51 = t50;
+  let t52;
+  if ($[75] !== positionProp || $[76] !== resizable || $[77] !== t45 || $[78] !== t46 || $[79] !== t47 || $[80] !== t48 || $[81] !== t51) {
+    t52 = /*#__PURE__*/jsx(VerticalDivider, {
+      variant: t45,
       draggable: resizable,
-      onDrag: t43,
-      onDragEnd: t44,
-      position: position,
-      onDoubleClick: t45,
+      onDrag: t46,
+      onDragEnd: t47,
+      position: positionProp,
+      onDoubleClick: t48,
       className: classes.PaneVerticalDivider,
-      style: t48
+      style: t51
     });
-    $[64] = position;
-    $[65] = resizable;
-    $[66] = t42;
-    $[67] = t43;
-    $[68] = t44;
-    $[69] = t45;
-    $[70] = t48;
-    $[71] = t49;
+    $[75] = positionProp;
+    $[76] = resizable;
+    $[77] = t45;
+    $[78] = t46;
+    $[79] = t47;
+    $[80] = t48;
+    $[81] = t51;
+    $[82] = t52;
   } else {
-    t49 = $[71];
+    t52 = $[82];
   }
-  let t50;
-  if ($[72] !== isHidden || $[73] !== position || $[74] !== t17 || $[75] !== t22 || $[76] !== t23 || $[77] !== t28 || $[78] !== t40 || $[79] !== t49) {
-    t50 = /*#__PURE__*/jsxs("div", {
-      className: t17,
-      style: t22,
-      "data-is-hidden": isHidden,
-      "data-position": position,
-      "data-sticky": t23,
-      children: [t28, t40, t49]
+  let t53;
+  if ($[83] !== t19 || $[84] !== t24 || $[85] !== t25 || $[86] !== t26 || $[87] !== t27 || $[88] !== t32 || $[89] !== t44 || $[90] !== t52) {
+    t53 = /*#__PURE__*/jsxs("div", {
+      className: t19,
+      style: t24,
+      ...t25,
+      ...t26,
+      "data-sticky": t27,
+      children: [t32, t44, t52]
     });
-    $[72] = isHidden;
-    $[73] = position;
-    $[74] = t17;
-    $[75] = t22;
-    $[76] = t23;
-    $[77] = t28;
-    $[78] = t40;
-    $[79] = t49;
-    $[80] = t50;
-  } else {
-    t50 = $[80];
-  }
-  return t50;
+    $[83] = t19;
+    $[84] = t24;
+    $[85] = t25;
+    $[86] = t26;
+    $[87] = t27;
+    $[88] = t32;
+    $[89] = t44;
+    $[90] = t52;
+    $[91] = t53;
+  } else {
+    t53 = $[91];
+  }
+  return t53;
 });
 Pane.displayName = 'PageLayout.Pane';
 
@@ -1056,7 +1137,7 @@ Pane.displayName = 'PageLayout.Pane';
 // PageLayout.Footer
 
 const Footer = t0 => {
-  const $ = c(26);
+  const $ = c(28);
   const {
     "aria-label": label,
     "aria-labelledby": labelledBy,
@@ -1085,105 +1166,111 @@ const Footer = t0 => {
     t5 = $[2];
   }
   const dividerProp = t5;
-  const dividerVariant = useResponsiveValue(dividerProp, "none");
-  const isHidden = useResponsiveValue(hidden, false);
   const {
     rowGap
   } = React.useContext(PageLayoutContext);
   let t6;
-  if ($[3] !== className) {
-    t6 = clsx(classes.FooterWrapper, className);
-    $[3] = className;
+  if ($[3] !== hidden) {
+    t6 = getResponsiveAttributes("hidden", hidden);
+    $[3] = hidden;
     $[4] = t6;
   } else {
     t6 = $[4];
   }
-  const t7 = `var(--spacing-${rowGap})`;
-  let t8;
-  if ($[5] !== style || $[6] !== t7) {
-    t8 = {
-      "--spacing": t7,
+  let t7;
+  if ($[5] !== className) {
+    t7 = clsx(classes.FooterWrapper, className);
+    $[5] = className;
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  const t8 = `var(--spacing-${rowGap})`;
+  let t9;
+  if ($[7] !== style || $[8] !== t8) {
+    t9 = {
+      "--spacing": t8,
       ...style
     };
-    $[5] = style;
-    $[6] = t7;
-    $[7] = t8;
+    $[7] = style;
+    $[8] = t8;
+    $[9] = t9;
   } else {
-    t8 = $[7];
+    t9 = $[9];
   }
-  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 ($[10] !== t11) {
+    t12 = {
+      "--spacing": t11
     };
-    $[8] = t10;
-    $[9] = t11;
+    $[10] = t11;
+    $[11] = t12;
   } else {
-    t11 = $[9];
+    t12 = $[11];
   }
-  const t12 = t11;
-  let t13;
-  if ($[10] !== dividerVariant || $[11] !== t12) {
-    t13 = /*#__PURE__*/jsx(HorizontalDivider, {
+  const t13 = t12;
+  let t14;
+  if ($[12] !== dividerProp || $[13] !== t13) {
+    t14 = /*#__PURE__*/jsx(HorizontalDivider, {
       className: classes.FooterHorizontalDivider,
-      style: t12,
-      variant: dividerVariant
+      style: t13,
+      variant: dividerProp
     });
-    $[10] = dividerVariant;
-    $[11] = t12;
-    $[12] = t13;
+    $[12] = dividerProp;
+    $[13] = t13;
+    $[14] = t14;
   } else {
-    t13 = $[12];
+    t14 = $[14];
   }
-  const t14 = `var(--spacing-${padding})`;
-  let t15;
-  if ($[13] !== t14) {
-    t15 = {
-      "--spacing": t14
+  const t15 = `var(--spacing-${padding})`;
+  let t16;
+  if ($[15] !== t15) {
+    t16 = {
+      "--spacing": t15
     };
-    $[13] = t14;
-    $[14] = t15;
+    $[15] = t15;
+    $[16] = t16;
   } else {
-    t15 = $[14];
+    t16 = $[16];
   }
-  const t16 = t15;
-  let t17;
-  if ($[15] !== children || $[16] !== t16) {
-    t17 = /*#__PURE__*/jsx("div", {
+  const t17 = t16;
+  let t18;
+  if ($[17] !== children || $[18] !== t17) {
+    t18 = /*#__PURE__*/jsx("div", {
       className: classes.FooterContent,
-      style: t16,
+      style: t17,
       children: children
     });
-    $[15] = children;
-    $[16] = t16;
-    $[17] = t17;
+    $[17] = children;
+    $[18] = t17;
+    $[19] = t18;
   } else {
-    t17 = $[17];
+    t18 = $[19];
   }
-  let t18;
-  if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== t13 || $[22] !== t17 || $[23] !== t6 || $[24] !== t9) {
-    t18 = /*#__PURE__*/jsxs("footer", {
+  let t19;
+  if ($[20] !== label || $[21] !== labelledBy || $[22] !== t10 || $[23] !== t14 || $[24] !== t18 || $[25] !== t6 || $[26] !== t7) {
+    t19 = /*#__PURE__*/jsxs("footer", {
       "aria-label": label,
       "aria-labelledby": labelledBy,
-      hidden: isHidden,
-      className: t6,
-      style: t9,
-      children: [t13, t17]
+      ...t6,
+      className: t7,
+      style: t10,
+      children: [t14, t18]
     });
-    $[18] = isHidden;
-    $[19] = label;
-    $[20] = labelledBy;
-    $[21] = t13;
-    $[22] = t17;
-    $[23] = t6;
-    $[24] = t9;
-    $[25] = t18;
-  } else {
-    t18 = $[25];
-  }
-  return t18;
+    $[20] = label;
+    $[21] = labelledBy;
+    $[22] = t10;
+    $[23] = t14;
+    $[24] = t18;
+    $[25] = t6;
+    $[26] = t7;
+    $[27] = t19;
+  } else {
+    t19 = $[27];
+  }
+  return t19;
 };
 Footer.displayName = 'PageLayout.Footer';