@primer/react 38.0.0-rc.6 → 38.0.0-rc.7

package/dist/PageLayout/PageLayout.js

@@ -9,9 +9,7 @@ import { canUseDOM } from '../utils/environment.js';
 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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import Box from '../Box/Box.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const PageLayoutContext = /*#__PURE__*/React.createContext({
   padding: 'normal',
@@ -24,14 +22,13 @@ const PageLayoutContext = /*#__PURE__*/React.createContext({
 
 // TODO: refs
 const Root = t0 => {
-  const $ = c(27);
+  const $ = c(26);
   const {
     containerWidth: t1,
     padding: t2,
     rowGap: t3,
     columnGap: t4,
     children,
-    sx,
     className,
     style,
     _slotsConfig: slotsConfig
@@ -126,32 +123,30 @@ const Root = t0 => {
     t14 = $[18];
   }
   let t15;
-  if ($[19] !== sx || $[20] !== t10 || $[21] !== t14 || $[22] !== t9) {
-    t15 = /*#__PURE__*/jsx(BoxWithFallback, {
+  if ($[19] !== t10 || $[20] !== t14 || $[21] !== t9) {
+    t15 = /*#__PURE__*/jsx("div", {
       style: t9,
-      sx: sx,
       className: t10,
       children: t14
     });
-    $[19] = sx;
-    $[20] = t10;
-    $[21] = t14;
-    $[22] = t9;
-    $[23] = t15;
+    $[19] = t10;
+    $[20] = t14;
+    $[21] = t9;
+    $[22] = t15;
   } else {
-    t15 = $[23];
+    t15 = $[22];
   }
   let t16;
-  if ($[24] !== memoizedContextValue || $[25] !== t15) {
+  if ($[23] !== memoizedContextValue || $[24] !== t15) {
     t16 = /*#__PURE__*/jsx(PageLayoutContext.Provider, {
       value: memoizedContextValue,
       children: t15
     });
-    $[24] = memoizedContextValue;
-    $[25] = t15;
-    $[26] = t16;
+    $[23] = memoizedContextValue;
+    $[24] = t15;
+    $[25] = t16;
   } else {
-    t16 = $[26];
+    t16 = $[25];
   }
   return t16;
 };
@@ -161,10 +156,9 @@ Root.displayName = 'PageLayout';
 // Divider (internal)
 
 const HorizontalDivider = t0 => {
-  const $ = c(11);
+  const $ = c(10);
   const {
     variant: t1,
-    sx,
     className,
     position,
     style
@@ -197,9 +191,8 @@ const HorizontalDivider = t0 => {
   }
   const t5 = t4;
   let t6;
-  if ($[5] !== position || $[6] !== responsiveVariant || $[7] !== sx || $[8] !== t2 || $[9] !== t5) {
-    t6 = /*#__PURE__*/jsx(BoxWithFallback, {
-      sx: sx,
+  if ($[5] !== position || $[6] !== responsiveVariant || $[7] !== t2 || $[8] !== t5) {
+    t6 = /*#__PURE__*/jsx("div", {
       className: t2,
       "data-variant": responsiveVariant,
       "data-position": position,
@@ -207,17 +200,16 @@ const HorizontalDivider = t0 => {
     });
     $[5] = position;
     $[6] = responsiveVariant;
-    $[7] = sx;
-    $[8] = t2;
-    $[9] = t5;
-    $[10] = t6;
+    $[7] = t2;
+    $[8] = t5;
+    $[9] = t6;
   } else {
-    t6 = $[10];
+    t6 = $[9];
   }
   return t6;
 };
 const VerticalDivider = t0 => {
-  const $ = c(37);
+  const $ = c(36);
   const {
     variant: t1,
     draggable: t2,
@@ -227,8 +219,7 @@ const VerticalDivider = t0 => {
     onDoubleClick,
     position,
     className,
-    style,
-    sx
+    style
   } = t0;
   const variant = t1 === undefined ? "none" : t1;
   const draggable = t2 === undefined ? false : t2;
@@ -390,39 +381,29 @@ const VerticalDivider = t0 => {
   }
   let t12;
   if ($[21] !== currentWidth || $[22] !== draggable || $[23] !== isDragging || $[24] !== isKeyboardDrag || $[25] !== maxWidth || $[26] !== minWidth || $[27] !== onDoubleClick || $[28] !== onDragStart) {
-    t12 = draggable ? /*#__PURE__*/jsx(Fragment, {
-      children: /*#__PURE__*/jsx(Box, {
-        sx: {
-          position: "absolute",
-          inset: "0 -2px",
-          cursor: "col-resize",
-          bg: isDragging || isKeyboardDrag ? "accent.fg" : "transparent",
-          transitionDelay: "0.1s",
-          "&:hover": {
-            bg: isDragging || isKeyboardDrag ? "accent.fg" : "neutral.muted"
-          }
-        },
-        role: "slider",
-        "aria-label": "Draggable pane splitter",
-        "aria-valuemin": minWidth,
-        "aria-valuemax": maxWidth,
-        "aria-valuenow": currentWidth,
-        "aria-valuetext": `Pane width ${currentWidth} pixels`,
-        tabIndex: 0,
-        onMouseDown: event_3 => {
-          if (event_3.button === 0) {
-            setIsDragging(true);
-            onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
-          }
-        },
-        onKeyDown: event_4 => {
-          if (event_4.key === "ArrowLeft" || event_4.key === "ArrowRight" || event_4.key === "ArrowUp" || event_4.key === "ArrowDown") {
-            setIsKeyboardDrag(true);
-            onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
-          }
-        },
-        onDoubleClick: onDoubleClick
-      })
+    t12 = draggable ? /*#__PURE__*/jsx("div", {
+      className: classes.DraggableHandle,
+      "data-dragging": isDragging || isKeyboardDrag,
+      role: "slider",
+      "aria-label": "Draggable pane splitter",
+      "aria-valuemin": minWidth,
+      "aria-valuemax": maxWidth,
+      "aria-valuenow": currentWidth,
+      "aria-valuetext": `Pane width ${currentWidth} pixels`,
+      tabIndex: 0,
+      onMouseDown: event_3 => {
+        if (event_3.button === 0) {
+          setIsDragging(true);
+          onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
+        }
+      },
+      onKeyDown: event_4 => {
+        if (event_4.key === "ArrowLeft" || event_4.key === "ArrowRight" || event_4.key === "ArrowUp" || event_4.key === "ArrowDown") {
+          setIsKeyboardDrag(true);
+          onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
+        }
+      },
+      onDoubleClick: onDoubleClick
     }) : null;
     $[21] = currentWidth;
     $[22] = draggable;
@@ -437,9 +418,8 @@ const VerticalDivider = t0 => {
     t12 = $[29];
   }
   let t13;
-  if ($[30] !== position || $[31] !== responsiveVariant || $[32] !== style || $[33] !== sx || $[34] !== t11 || $[35] !== t12) {
-    t13 = /*#__PURE__*/jsx(BoxWithFallback, {
-      sx: sx,
+  if ($[30] !== position || $[31] !== responsiveVariant || $[32] !== style || $[33] !== t11 || $[34] !== t12) {
+    t13 = /*#__PURE__*/jsx("div", {
       className: t11,
       "data-variant": responsiveVariant,
       "data-position": position,
@@ -449,12 +429,11 @@ const VerticalDivider = t0 => {
     $[30] = position;
     $[31] = responsiveVariant;
     $[32] = style;
-    $[33] = sx;
-    $[34] = t11;
-    $[35] = t12;
-    $[36] = t13;
+    $[33] = t11;
+    $[34] = t12;
+    $[35] = t13;
   } else {
-    t13 = $[36];
+    t13 = $[35];
   }
   return t13;
 };
@@ -463,7 +442,7 @@ const VerticalDivider = t0 => {
 // PageLayout.Header
 
 const Header = t0 => {
-  const $ = c(27);
+  const $ = c(26);
   const {
     "aria-label": label,
     "aria-labelledby": labelledBy,
@@ -473,7 +452,6 @@ const Header = t0 => {
     hidden: t4,
     children,
     style,
-    sx,
     className
   } = t0;
   const padding = t1 === undefined ? "none" : t1;
@@ -571,13 +549,11 @@ const Header = t0 => {
     t17 = $[17];
   }
   let t18;
-  if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== sx || $[22] !== t13 || $[23] !== t17 || $[24] !== t6 || $[25] !== t9) {
-    t18 = /*#__PURE__*/jsxs(BoxWithFallback, {
-      as: "header",
+  if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== t13 || $[22] !== t17 || $[23] !== t6 || $[24] !== t9) {
+    t18 = /*#__PURE__*/jsxs("header", {
       "aria-label": label,
       "aria-labelledby": labelledBy,
       hidden: isHidden,
-      sx: sx,
       className: t6,
       style: t9,
       children: [t13, t17]
@@ -585,20 +561,19 @@ const Header = t0 => {
     $[18] = isHidden;
     $[19] = label;
     $[20] = labelledBy;
-    $[21] = sx;
-    $[22] = t13;
-    $[23] = t17;
-    $[24] = t6;
-    $[25] = t9;
-    $[26] = t18;
+    $[21] = t13;
+    $[22] = t17;
+    $[23] = t6;
+    $[24] = t9;
+    $[25] = t18;
   } else {
-    t18 = $[26];
+    t18 = $[25];
   }
   return t18;
 };
 Header.displayName = 'PageLayout.Header';
 const Content = t0 => {
-  const $ = c(17);
+  const $ = c(16);
   const {
     as: t1,
     "aria-label": label,
@@ -607,7 +582,6 @@ const Content = t0 => {
     padding: t3,
     hidden: t4,
     children,
-    sx,
     className,
     style
   } = t0;
@@ -616,6 +590,7 @@ const Content = t0 => {
   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) {
     t5 = clsx(classes.ContentWrapper, className);
@@ -652,28 +627,25 @@ const Content = t0 => {
     t9 = $[7];
   }
   let t10;
-  if ($[8] !== as || $[9] !== isHidden || $[10] !== label || $[11] !== labelledBy || $[12] !== style || $[13] !== sx || $[14] !== t5 || $[15] !== t9) {
-    t10 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: as,
+  if ($[8] !== Component || $[9] !== isHidden || $[10] !== label || $[11] !== labelledBy || $[12] !== style || $[13] !== t5 || $[14] !== t9) {
+    t10 = /*#__PURE__*/jsx(Component, {
       "aria-label": label,
       "aria-labelledby": labelledBy,
       style: style,
-      sx: sx,
       className: t5,
       "data-is-hidden": isHidden,
       children: t9
     });
-    $[8] = as;
+    $[8] = Component;
     $[9] = isHidden;
     $[10] = label;
     $[11] = labelledBy;
     $[12] = style;
-    $[13] = sx;
-    $[14] = t5;
-    $[15] = t9;
-    $[16] = t10;
+    $[13] = t5;
+    $[14] = t9;
+    $[15] = t10;
   } else {
-    t10 = $[16];
+    t10 = $[15];
   }
   return t10;
 };
@@ -699,7 +671,7 @@ const overflowProps = {
   role: 'region'
 };
 const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
-  const $ = c(82);
+  const $ = c(81);
   const {
     "aria-label": label,
     "aria-labelledby": labelledBy,
@@ -717,7 +689,6 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     hidden: t12,
     children,
     id,
-    sx,
     className,
     style
   } = t0;
@@ -854,131 +825,132 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
   } else {
     t21 = $[21];
   }
-  const t22 = sticky || undefined;
-  let t23;
+  const t22 = t21;
+  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;
@@ -990,13 +962,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 || $[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) {
@@ -1006,79 +978,77 @@ const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
     };
     $[56] = paneRef;
     $[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, {
-      sx: sx,
+  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: t21,
+      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;
+    $[74] = t17;
+    $[75] = t22;
+    $[76] = t23;
+    $[77] = t28;
+    $[78] = t40;
+    $[79] = t49;
+    $[80] = t50;
   } else {
-    t49 = $[81];
+    t50 = $[80];
   }
-  return t49;
+  return t50;
 });
 Pane.displayName = 'PageLayout.Pane';
 
@@ -1086,7 +1056,7 @@ Pane.displayName = 'PageLayout.Pane';
 // PageLayout.Footer
 
 const Footer = t0 => {
-  const $ = c(27);
+  const $ = c(26);
   const {
     "aria-label": label,
     "aria-labelledby": labelledBy,
@@ -1095,7 +1065,6 @@ const Footer = t0 => {
     dividerWhenNarrow: t3,
     hidden: t4,
     children,
-    sx,
     className,
     style
   } = t0;
@@ -1194,28 +1163,25 @@ const Footer = t0 => {
     t17 = $[17];
   }
   let t18;
-  if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== sx || $[22] !== t13 || $[23] !== t17 || $[24] !== t6 || $[25] !== t9) {
-    t18 = /*#__PURE__*/jsxs(BoxWithFallback, {
-      as: "footer",
+  if ($[18] !== isHidden || $[19] !== label || $[20] !== labelledBy || $[21] !== t13 || $[22] !== t17 || $[23] !== t6 || $[24] !== t9) {
+    t18 = /*#__PURE__*/jsxs("footer", {
       "aria-label": label,
       "aria-labelledby": labelledBy,
       hidden: isHidden,
       className: t6,
-      sx: sx,
       style: t9,
       children: [t13, t17]
     });
     $[18] = isHidden;
     $[19] = label;
     $[20] = labelledBy;
-    $[21] = sx;
-    $[22] = t13;
-    $[23] = t17;
-    $[24] = t6;
-    $[25] = t9;
-    $[26] = t18;
+    $[21] = t13;
+    $[22] = t17;
+    $[23] = t6;
+    $[24] = t9;
+    $[25] = t18;
   } else {
-    t18 = $[26];
+    t18 = $[25];
   }
   return t18;
 };
@@ -1225,11 +1191,16 @@ Footer.displayName = 'PageLayout.Footer';
 // Export
 
 const PageLayout = Object.assign(Root, {
+  __SLOT__: Symbol('PageLayout'),
   Header,
   Content,
-  Pane,
+  Pane: Pane,
   Footer
 });
+Header.__SLOT__ = Symbol('PageLayout.Header');
+Content.__SLOT__ = Symbol('PageLayout.Content');
+Pane.__SLOT__ = Symbol('PageLayout.Pane');
+Footer.__SLOT__ = Symbol('PageLayout.Footer');
 function _temp(width_0) {
   if (isPaneWidth(width_0)) {
     return defaultPaneWidth[width_0];