@primer/react 38.0.0-rc.0 → 38.0.0-rc.09f015db1

package/lib-esm/PageLayout/PageLayout.js

@@ -1,1246 +0,0 @@
-import { c } from 'react-compiler-runtime';
-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 { useSlots } from '../hooks/useSlots.js';
-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';
-
-const PageLayoutContext = /*#__PURE__*/React.createContext({
-  padding: 'normal',
-  rowGap: 'normal',
-  columnGap: 'normal',
-  paneRef: {
-    current: null
-  }
-});
-
-// TODO: refs
-const Root = t0 => {
-  const $ = c(27);
-  const {
-    containerWidth: t1,
-    padding: t2,
-    rowGap: t3,
-    columnGap: t4,
-    children,
-    sx,
-    className,
-    style,
-    _slotsConfig: slotsConfig
-  } = t0;
-  const containerWidth = t1 === undefined ? "xlarge" : t1;
-  const padding = t2 === undefined ? "normal" : t2;
-  const rowGap = t3 === undefined ? "normal" : t3;
-  const columnGap = t4 === undefined ? "normal" : t4;
-  const paneRef = useRef(null);
-  let t5;
-  if ($[0] !== slotsConfig) {
-    t5 = slotsConfig !== null && slotsConfig !== void 0 ? slotsConfig : {
-      header: Header,
-      footer: Footer
-    };
-    $[0] = slotsConfig;
-    $[1] = t5;
-  } else {
-    t5 = $[1];
-  }
-  const [slots, rest] = useSlots(children, t5);
-  let t6;
-  let t7;
-  if ($[2] !== columnGap || $[3] !== padding || $[4] !== rowGap) {
-    t7 = {
-      padding,
-      rowGap,
-      columnGap,
-      paneRef
-    };
-    $[2] = columnGap;
-    $[3] = padding;
-    $[4] = rowGap;
-    $[5] = t7;
-  } else {
-    t7 = $[5];
-  }
-  t6 = t7;
-  const memoizedContextValue = t6;
-  const t8 = `var(--spacing-${padding})`;
-  let t9;
-  if ($[6] !== style || $[7] !== t8) {
-    t9 = {
-      "--spacing": t8,
-      ...style
-    };
-    $[6] = style;
-    $[7] = t8;
-    $[8] = t9;
-  } else {
-    t9 = $[8];
-  }
-  const t10 = t9;
-  let t11;
-  if ($[9] !== className) {
-    t11 = clsx(classes.PageLayoutRoot, className);
-    $[9] = className;
-    $[10] = t11;
-  } else {
-    t11 = $[10];
-  }
-  const t12 = slots.header;
-  let t13;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t13 = clsx(classes.PageLayoutContent);
-    $[11] = t13;
-  } else {
-    t13 = $[11];
-  }
-  let t14;
-  if ($[12] !== rest) {
-    t14 = /*#__PURE__*/jsx("div", {
-      className: t13,
-      children: rest
-    });
-    $[12] = rest;
-    $[13] = t14;
-  } else {
-    t14 = $[13];
-  }
-  let t15;
-  if ($[14] !== containerWidth || $[15] !== slots.footer || $[16] !== slots.header || $[17] !== t14) {
-    t15 = /*#__PURE__*/jsxs("div", {
-      className: classes.PageLayoutWrapper,
-      "data-width": containerWidth,
-      children: [t12, t14, slots.footer]
-    });
-    $[14] = containerWidth;
-    $[15] = slots.footer;
-    $[16] = slots.header;
-    $[17] = t14;
-    $[18] = t15;
-  } else {
-    t15 = $[18];
-  }
-  let t16;
-  if ($[19] !== sx || $[20] !== t10 || $[21] !== t11 || $[22] !== t15) {
-    t16 = /*#__PURE__*/jsx(BoxWithFallback, {
-      style: t10,
-      sx: sx,
-      className: t11,
-      children: t15
-    });
-    $[19] = sx;
-    $[20] = t10;
-    $[21] = t11;
-    $[22] = t15;
-    $[23] = t16;
-  } else {
-    t16 = $[23];
-  }
-  let t17;
-  if ($[24] !== memoizedContextValue || $[25] !== t16) {
-    t17 = /*#__PURE__*/jsx(PageLayoutContext.Provider, {
-      value: memoizedContextValue,
-      children: t16
-    });
-    $[24] = memoizedContextValue;
-    $[25] = t16;
-    $[26] = t17;
-  } else {
-    t17 = $[26];
-  }
-  return t17;
-};
-Root.displayName = 'PageLayout';
-
-// ----------------------------------------------------------------------------
-// Divider (internal)
-
-const HorizontalDivider = t0 => {
-  const $ = c(11);
-  const {
-    variant: t1,
-    sx,
-    className,
-    position,
-    style
-  } = t0;
-  const variant = t1 === undefined ? "none" : t1;
-  const {
-    padding
-  } = React.useContext(PageLayoutContext);
-  const responsiveVariant = useResponsiveValue(variant, "none");
-  let t2;
-  if ($[0] !== className) {
-    t2 = clsx(classes.HorizontalDivider, className);
-    $[0] = className;
-    $[1] = t2;
-  } else {
-    t2 = $[1];
-  }
-  const t3 = `var(--spacing-${padding})`;
-  let t4;
-  if ($[2] !== style || $[3] !== t3) {
-    t4 = {
-      "--spacing-divider": t3,
-      ...style
-    };
-    $[2] = style;
-    $[3] = t3;
-    $[4] = t4;
-  } else {
-    t4 = $[4];
-  }
-  const t5 = t4;
-  let t6;
-  if ($[5] !== position || $[6] !== responsiveVariant || $[7] !== sx || $[8] !== t2 || $[9] !== t5) {
-    t6 = /*#__PURE__*/jsx(BoxWithFallback, {
-      sx: sx,
-      className: t2,
-      "data-variant": responsiveVariant,
-      "data-position": position,
-      style: t5
-    });
-    $[5] = position;
-    $[6] = responsiveVariant;
-    $[7] = sx;
-    $[8] = t2;
-    $[9] = t5;
-    $[10] = t6;
-  } else {
-    t6 = $[10];
-  }
-  return t6;
-};
-const VerticalDivider = t0 => {
-  const $ = c(37);
-  const {
-    variant: t1,
-    draggable: t2,
-    onDragStart,
-    onDrag,
-    onDragEnd,
-    onDoubleClick,
-    position,
-    className,
-    style,
-    sx
-  } = t0;
-  const variant = t1 === undefined ? "none" : t1;
-  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 {
-    paneRef
-  } = React.useContext(PageLayoutContext);
-  const [minWidth, setMinWidth] = React.useState(0);
-  const [maxWidth, setMaxWidth] = React.useState(0);
-  const [currentWidth, setCurrentWidth] = React.useState(0);
-  let t3;
-  if ($[0] !== paneRef) {
-    t3 = () => {
-      if (paneRef.current !== null) {
-        const paneStyles = getComputedStyle(paneRef.current);
-        const maxPaneWidthDiffPixels = paneStyles.getPropertyValue("--pane-max-width-diff");
-        const minWidthPixels = paneStyles.getPropertyValue("--pane-min-width");
-        const paneWidth = paneRef.current.getBoundingClientRect().width;
-        const maxPaneWidthDiff = Number(maxPaneWidthDiffPixels.split("px")[0]);
-        const minPaneWidth = Number(minWidthPixels.split("px")[0]);
-        const viewportWidth = window.innerWidth;
-        const maxPaneWidth = viewportWidth > maxPaneWidthDiff ? viewportWidth - maxPaneWidthDiff : viewportWidth;
-        setMinWidth(minPaneWidth);
-        setMaxWidth(maxPaneWidth);
-        setCurrentWidth(paneWidth || 0);
-      }
-    };
-    $[0] = paneRef;
-    $[1] = t3;
-  } else {
-    t3 = $[1];
-  }
-  let t4;
-  if ($[2] !== isDragging || $[3] !== isKeyboardDrag || $[4] !== paneRef) {
-    t4 = [paneRef, isKeyboardDrag, isDragging];
-    $[2] = isDragging;
-    $[3] = isKeyboardDrag;
-    $[4] = paneRef;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  React.useEffect(t3, t4);
-  let t5;
-  let t6;
-  if ($[6] !== onDrag) {
-    t5 = () => {
-      stableOnDrag.current = onDrag;
-    };
-    t6 = [onDrag];
-    $[6] = onDrag;
-    $[7] = t5;
-    $[8] = t6;
-  } else {
-    t5 = $[7];
-    t6 = $[8];
-  }
-  React.useEffect(t5, t6);
-  let t7;
-  let t8;
-  if ($[9] !== onDragEnd) {
-    t7 = () => {
-      stableOnDragEnd.current = onDragEnd;
-    };
-    t8 = [onDragEnd];
-    $[9] = onDragEnd;
-    $[10] = t7;
-    $[11] = t8;
-  } else {
-    t7 = $[10];
-    t8 = $[11];
-  }
-  React.useEffect(t7, t8);
-  let t10;
-  let t9;
-  if ($[12] !== currentWidth || $[13] !== isDragging || $[14] !== isKeyboardDrag || $[15] !== maxWidth || $[16] !== minWidth) {
-    t9 = () => {
-      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);
-        event.preventDefault();
-      };
-      const handleDragEnd = function handleDragEnd(event_0) {
-        var _stableOnDragEnd$curr;
-        setIsDragging(false);
-        (_stableOnDragEnd$curr = stableOnDragEnd.current) === null || _stableOnDragEnd$curr === void 0 ? void 0 : _stableOnDragEnd$curr.call(stableOnDragEnd);
-        event_0.preventDefault();
-      };
-      const handleKeyDrag = function handleKeyDrag(event_1) {
-        var _stableOnDrag$current2;
-        let delta;
-        if ((event_1.key === "ArrowLeft" || event_1.key === "ArrowDown") && currentWidth > minWidth) {
-          delta = -3;
-        } else {
-          if ((event_1.key === "ArrowRight" || event_1.key === "ArrowUp") && currentWidth < maxWidth) {
-            delta = 3;
-          } else {
-            return;
-          }
-        }
-        setCurrentWidth(currentWidth + delta);
-        (_stableOnDrag$current2 = stableOnDrag.current) === null || _stableOnDrag$current2 === void 0 ? void 0 : _stableOnDrag$current2.call(stableOnDrag, delta, true);
-        event_1.preventDefault();
-      };
-      const handleKeyDragEnd = function handleKeyDragEnd(event_2) {
-        var _stableOnDragEnd$curr2;
-        setIsKeyboardDrag(false);
-        (_stableOnDragEnd$curr2 = stableOnDragEnd.current) === null || _stableOnDragEnd$curr2 === void 0 ? void 0 : _stableOnDragEnd$curr2.call(stableOnDragEnd);
-        event_2.preventDefault();
-      };
-      if (isDragging || isKeyboardDrag) {
-        window.addEventListener("mousemove", handleDrag);
-        window.addEventListener("keydown", handleKeyDrag);
-        window.addEventListener("mouseup", handleDragEnd);
-        window.addEventListener("keyup", handleKeyDragEnd);
-        const body = document.body;
-        body === null || body === void 0 ? void 0 : body.setAttribute("data-page-layout-dragging", "true");
-      } else {
-        window.removeEventListener("mousemove", handleDrag);
-        window.removeEventListener("mouseup", handleDragEnd);
-        window.removeEventListener("keydown", handleKeyDrag);
-        window.removeEventListener("keyup", handleKeyDragEnd);
-        const body_0 = document.body;
-        body_0 === null || body_0 === void 0 ? void 0 : body_0.removeAttribute("data-page-layout-dragging");
-      }
-      return () => {
-        window.removeEventListener("mousemove", handleDrag);
-        window.removeEventListener("mouseup", handleDragEnd);
-        window.removeEventListener("keydown", handleKeyDrag);
-        window.removeEventListener("keyup", handleKeyDragEnd);
-        const body_1 = document.body;
-        body_1 === null || body_1 === void 0 ? void 0 : body_1.removeAttribute("data-page-layout-dragging");
-      };
-    };
-    t10 = [isDragging, isKeyboardDrag, currentWidth, minWidth, maxWidth];
-    $[12] = currentWidth;
-    $[13] = isDragging;
-    $[14] = isKeyboardDrag;
-    $[15] = maxWidth;
-    $[16] = minWidth;
-    $[17] = t10;
-    $[18] = t9;
-  } else {
-    t10 = $[17];
-    t9 = $[18];
-  }
-  React.useEffect(t9, t10);
-  let t11;
-  if ($[19] !== className) {
-    t11 = clsx(classes.VerticalDivider, className);
-    $[19] = className;
-    $[20] = t11;
-  } else {
-    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(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
-      })
-    }) : null;
-    $[21] = currentWidth;
-    $[22] = draggable;
-    $[23] = isDragging;
-    $[24] = isKeyboardDrag;
-    $[25] = maxWidth;
-    $[26] = minWidth;
-    $[27] = onDoubleClick;
-    $[28] = onDragStart;
-    $[29] = t12;
-  } else {
-    t12 = $[29];
-  }
-  let t13;
-  if ($[30] !== position || $[31] !== responsiveVariant || $[32] !== style || $[33] !== sx || $[34] !== t11 || $[35] !== t12) {
-    t13 = /*#__PURE__*/jsx(BoxWithFallback, {
-      sx: sx,
-      className: t11,
-      "data-variant": responsiveVariant,
-      "data-position": position,
-      style: style,
-      children: t12
-    });
-    $[30] = position;
-    $[31] = responsiveVariant;
-    $[32] = style;
-    $[33] = sx;
-    $[34] = t11;
-    $[35] = t12;
-    $[36] = t13;
-  } else {
-    t13 = $[36];
-  }
-  return t13;
-};
-
-// ----------------------------------------------------------------------------
-// PageLayout.Header
-
-const Header = t0 => {
-  const $ = c(27);
-  const {
-    "aria-label": label,
-    "aria-labelledby": labelledBy,
-    padding: t1,
-    divider: t2,
-    dividerWhenNarrow: t3,
-    hidden: t4,
-    children,
-    style,
-    sx,
-    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;
-  if ($[0] !== divider || $[1] !== dividerWhenNarrow) {
-    t5 = !isResponsiveValue(divider) && dividerWhenNarrow !== "inherit" ? {
-      regular: divider,
-      narrow: dividerWhenNarrow
-    } : divider;
-    $[0] = divider;
-    $[1] = dividerWhenNarrow;
-    $[2] = t5;
-  } else {
-    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;
-    $[4] = t6;
-  } else {
-    t6 = $[4];
-  }
-  const t7 = `var(--spacing-${rowGap})`;
-  let t8;
-  if ($[5] !== style || $[6] !== t7) {
-    t8 = {
-      "--spacing": t7,
-      ...style
-    };
-    $[5] = style;
-    $[6] = t7;
-    $[7] = t8;
-  } else {
-    t8 = $[7];
-  }
-  const t9 = t8;
-  const t10 = `var(--spacing-${padding})`;
-  let t11;
-  if ($[8] !== t10) {
-    t11 = {
-      "--spacing": t10
-    };
-    $[8] = t10;
-    $[9] = t11;
-  } else {
-    t11 = $[9];
-  }
-  const t12 = t11;
-  let t13;
-  if ($[10] !== children || $[11] !== t12) {
-    t13 = /*#__PURE__*/jsx("div", {
-      className: classes.HeaderContent,
-      style: t12,
-      children: children
-    });
-    $[10] = children;
-    $[11] = t12;
-    $[12] = t13;
-  } else {
-    t13 = $[12];
-  }
-  const t14 = `var(--spacing-${rowGap})`;
-  let t15;
-  if ($[13] !== t14) {
-    t15 = {
-      "--spacing": t14
-    };
-    $[13] = t14;
-    $[14] = t15;
-  } else {
-    t15 = $[14];
-  }
-  const t16 = t15;
-  let t17;
-  if ($[15] !== dividerVariant || $[16] !== t16) {
-    t17 = /*#__PURE__*/jsx(HorizontalDivider, {
-      variant: dividerVariant,
-      className: classes.HeaderHorizontalDivider,
-      style: t16
-    });
-    $[15] = dividerVariant;
-    $[16] = t16;
-    $[17] = t17;
-  } else {
-    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",
-      "aria-label": label,
-      "aria-labelledby": labelledBy,
-      hidden: isHidden,
-      sx: sx,
-      className: t6,
-      style: t9,
-      children: [t13, t17]
-    });
-    $[18] = isHidden;
-    $[19] = label;
-    $[20] = labelledBy;
-    $[21] = sx;
-    $[22] = t13;
-    $[23] = t17;
-    $[24] = t6;
-    $[25] = t9;
-    $[26] = t18;
-  } else {
-    t18 = $[26];
-  }
-  return t18;
-};
-Header.displayName = 'PageLayout.Header';
-const Content = t0 => {
-  const $ = c(17);
-  const {
-    as: t1,
-    "aria-label": label,
-    "aria-labelledby": labelledBy,
-    width: t2,
-    padding: t3,
-    hidden: t4,
-    children,
-    sx,
-    className,
-    style
-  } = t0;
-  const as = t1 === undefined ? "main" : t1;
-  const width = t2 === undefined ? "full" : t2;
-  const padding = t3 === undefined ? "none" : t3;
-  const hidden = t4 === undefined ? false : t4;
-  const isHidden = useResponsiveValue(hidden, false);
-  let t5;
-  if ($[0] !== className) {
-    t5 = clsx(classes.ContentWrapper, className);
-    $[0] = className;
-    $[1] = t5;
-  } else {
-    t5 = $[1];
-  }
-  const t6 = `var(--spacing-${padding})`;
-  let t7;
-  if ($[2] !== t6) {
-    t7 = {
-      "--spacing": t6
-    };
-    $[2] = t6;
-    $[3] = t7;
-  } else {
-    t7 = $[3];
-  }
-  const t8 = t7;
-  let t9;
-  if ($[4] !== children || $[5] !== t8 || $[6] !== width) {
-    t9 = /*#__PURE__*/jsx("div", {
-      className: classes.Content,
-      "data-width": width,
-      style: t8,
-      children: children
-    });
-    $[4] = children;
-    $[5] = t8;
-    $[6] = width;
-    $[7] = t9;
-  } else {
-    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,
-      "aria-label": label,
-      "aria-labelledby": labelledBy,
-      style: style,
-      sx: sx,
-      className: t5,
-      "data-is-hidden": isHidden,
-      children: t9
-    });
-    $[8] = as;
-    $[9] = isHidden;
-    $[10] = label;
-    $[11] = labelledBy;
-    $[12] = style;
-    $[13] = sx;
-    $[14] = t5;
-    $[15] = t9;
-    $[16] = t10;
-  } else {
-    t10 = $[16];
-  }
-  return t10;
-};
-Content.displayName = 'PageLayout.Content';
-
-// ----------------------------------------------------------------------------
-// PageLayout.Pane
-
-const isCustomWidthOptions = width => {
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  return width.default !== undefined;
-};
-const isPaneWidth = width => {
-  return ['small', 'medium', 'large'].includes(width);
-};
-const defaultPaneWidth = {
-  small: 256,
-  medium: 296,
-  large: 320
-};
-const overflowProps = {
-  tabIndex: 0,
-  role: 'region'
-};
-const Pane = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
-  const $ = c(82);
-  const {
-    "aria-label": label,
-    "aria-labelledby": labelledBy,
-    position: t1,
-    positionWhenNarrow: t2,
-    width: t3,
-    minWidth: t4,
-    padding: t5,
-    resizable: t6,
-    widthStorageKey: t7,
-    divider: t8,
-    dividerWhenNarrow: t9,
-    sticky: t10,
-    offsetHeader: t11,
-    hidden: t12,
-    children,
-    id,
-    sx,
-    className,
-    style
-  } = t0;
-  const responsivePosition = t1 === undefined ? "end" : t1;
-  const positionWhenNarrow = t2 === undefined ? "inherit" : t2;
-  const width = t3 === undefined ? "medium" : t3;
-  const minWidth = t4 === undefined ? 256 : t4;
-  const padding = t5 === undefined ? "none" : t5;
-  const resizable = t6 === undefined ? false : t6;
-  const widthStorageKey = t7 === undefined ? "paneWidth" : t7;
-  const responsiveDivider = t8 === undefined ? "none" : t8;
-  const dividerWhenNarrow = t9 === undefined ? "inherit" : t9;
-  const sticky = t10 === undefined ? false : t10;
-  const offsetHeader = t11 === undefined ? 0 : t11;
-  const responsiveHidden = t12 === undefined ? false : t12;
-  let t13;
-  if ($[0] !== positionWhenNarrow || $[1] !== responsivePosition) {
-    t13 = !isResponsiveValue(responsivePosition) && positionWhenNarrow !== "inherit" ? {
-      regular: responsivePosition,
-      narrow: positionWhenNarrow
-    } : responsivePosition;
-    $[0] = positionWhenNarrow;
-    $[1] = responsivePosition;
-    $[2] = t13;
-  } else {
-    t13 = $[2];
-  }
-  const positionProp = t13;
-  const position = useResponsiveValue(positionProp, "end");
-  let t14;
-  if ($[3] !== dividerWhenNarrow || $[4] !== responsiveDivider) {
-    t14 = !isResponsiveValue(responsiveDivider) && dividerWhenNarrow !== "inherit" ? {
-      regular: responsiveDivider,
-      narrow: dividerWhenNarrow
-    } : responsiveDivider;
-    $[3] = dividerWhenNarrow;
-    $[4] = responsiveDivider;
-    $[5] = t14;
-  } else {
-    t14 = $[5];
-  }
-  const dividerProp = t14;
-  const dividerVariant = useResponsiveValue(dividerProp, "none");
-  const isHidden = useResponsiveValue(responsiveHidden, false);
-  const {
-    rowGap,
-    columnGap,
-    paneRef
-  } = React.useContext(PageLayoutContext);
-  const getDefaultPaneWidth = _temp;
-  let t15;
-  if ($[6] !== width || $[7] !== widthStorageKey) {
-    t15 = () => {
-      if (!canUseDOM) {
-        return getDefaultPaneWidth(width);
-      }
-      let storedWidth;
-      try {
-        storedWidth = localStorage.getItem(widthStorageKey);
-      } catch (t16) {
-        storedWidth = null;
-      }
-      return storedWidth && !isNaN(Number(storedWidth)) ? Number(storedWidth) : getDefaultPaneWidth(width);
-    };
-    $[6] = width;
-    $[7] = widthStorageKey;
-    $[8] = t15;
-  } else {
-    t15 = $[8];
-  }
-  const [paneWidth, setPaneWidth] = React.useState(t15);
-  let t16;
-  if ($[9] !== widthStorageKey) {
-    t16 = width_1 => {
-      setPaneWidth(width_1);
-      try {
-        localStorage.setItem(widthStorageKey, width_1.toString());
-      } catch (t17) {
-      }
-    };
-    $[9] = widthStorageKey;
-    $[10] = t16;
-  } else {
-    t16 = $[10];
-  }
-  const updatePaneWidth = t16;
-  useRefObjectAsForwardedRef(forwardRef, paneRef);
-  const hasOverflow = useOverflow(paneRef);
-  const paneId = useId(id);
-  let labelProp;
-  if ($[11] !== hasOverflow || $[12] !== label || $[13] !== 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;
-      if (labelledBy) {
-        labelProp["aria-labelledby"] = labelledBy;
-      } else {
-        if (label) {
-          labelProp["aria-label"] = label;
-        }
-      }
-    }
-    $[11] = hasOverflow;
-    $[12] = label;
-    $[13] = labelledBy;
-    $[14] = labelProp;
-  } else {
-    labelProp = $[14];
-  }
-  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,
-      ...style
-    };
-    $[17] = style;
-    $[18] = t18;
-    $[19] = t19;
-    $[20] = t20;
-    $[21] = t21;
-  } else {
-    t21 = $[21];
-  }
-  const t22 = sticky || undefined;
-  let t23;
-  if ($[22] !== dividerVariant) {
-    t23 = {
-      narrow: dividerVariant,
-      regular: "none"
-    };
-    $[22] = dividerVariant;
-    $[23] = t23;
-  } else {
-    t23 = $[23];
-  }
-  const t24 = `var(--spacing-${rowGap})`;
-  let t25;
-  if ($[24] !== t24) {
-    t25 = {
-      "--spacing": t24
-    };
-    $[24] = t24;
-    $[25] = t25;
-  } else {
-    t25 = $[25];
-  }
-  const t26 = t25;
-  let t27;
-  if ($[26] !== position || $[27] !== t23 || $[28] !== t26) {
-    t27 = /*#__PURE__*/jsx(HorizontalDivider, {
-      variant: t23,
-      className: classes.PaneHorizontalDivider,
-      style: t26,
-      position: position
-    });
-    $[26] = position;
-    $[27] = t23;
-    $[28] = t26;
-    $[29] = t27;
-  } else {
-    t27 = $[29];
-  }
-  let t28;
-  if ($[30] !== hasOverflow) {
-    t28 = hasOverflow ? overflowProps : {};
-    $[30] = hasOverflow;
-    $[31] = t28;
-  } else {
-    t28 = $[31];
-  }
-  let t29;
-  if ($[32] !== id || $[33] !== paneId) {
-    t29 = id && {
-      id: paneId
-    };
-    $[32] = id;
-    $[33] = paneId;
-    $[34] = t29;
-  } else {
-    t29 = $[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
-    };
-    $[35] = t31;
-    $[36] = t32;
-    $[37] = t33;
-    $[38] = t34;
-    $[39] = t35;
-    $[40] = t36;
-    $[41] = t37;
-  } else {
-    t37 = $[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", {
-      ref: paneRef,
-      ...t28,
-      ...labelProp,
-      ...t29,
-      className: classes.Pane,
-      "data-resizable": t30,
-      style: t38,
-      children: children
-    });
-    $[42] = children;
-    $[43] = labelProp;
-    $[44] = paneRef;
-    $[45] = t28;
-    $[46] = t29;
-    $[47] = t30;
-    $[48] = t38;
-    $[49] = t39;
-  } else {
-    t39 = $[49];
-  }
-  const t40 = resizable ? "line" : dividerVariant;
-  let t41;
-  if ($[50] !== t40) {
-    t41 = {
-      narrow: "none",
-      regular: t40
-    };
-    $[50] = t40;
-    $[51] = t41;
-  } else {
-    t41 = $[51];
-  }
-  let t42;
-  if ($[52] !== paneWidth || $[53] !== position || $[54] !== updatePaneWidth) {
-    t42 = (delta, t43) => {
-      const isKeyboard = t43 === undefined ? false : t43;
-      let deltaWithDirection;
-      if (isKeyboard) {
-        deltaWithDirection = delta;
-      } else {
-        deltaWithDirection = position === "end" ? -delta : delta;
-      }
-      updatePaneWidth(paneWidth + deltaWithDirection);
-    };
-    $[52] = paneWidth;
-    $[53] = position;
-    $[54] = updatePaneWidth;
-    $[55] = t42;
-  } else {
-    t42 = $[55];
-  }
-  let t43;
-  if ($[56] !== paneRef.current || $[57] !== updatePaneWidth) {
-    t43 = () => {
-      var _paneRef$current;
-      const paneRect = (_paneRef$current = paneRef.current) === null || _paneRef$current === void 0 ? void 0 : _paneRef$current.getBoundingClientRect();
-      if (!paneRect) {
-        return;
-      }
-      updatePaneWidth(paneRect.width);
-    };
-    $[56] = paneRef.current;
-    $[57] = updatePaneWidth;
-    $[58] = t43;
-  } else {
-    t43 = $[58];
-  }
-  let t44;
-  if ($[59] !== updatePaneWidth || $[60] !== width) {
-    t44 = () => updatePaneWidth(getDefaultPaneWidth(width));
-    $[59] = updatePaneWidth;
-    $[60] = width;
-    $[61] = t44;
-  } else {
-    t44 = $[61];
-  }
-  const t45 = `var(--spacing-${columnGap})`;
-  let t46;
-  if ($[62] !== t45) {
-    t46 = {
-      "--spacing": t45
-    };
-    $[62] = t45;
-    $[63] = t46;
-  } else {
-    t46 = $[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,
-      draggable: resizable,
-      onDrag: t42,
-      onDragEnd: t43,
-      position: position,
-      onDoubleClick: t44,
-      className: classes.PaneVerticalDivider,
-      style: t47
-    });
-    $[64] = position;
-    $[65] = resizable;
-    $[66] = t41;
-    $[67] = t42;
-    $[68] = t43;
-    $[69] = t44;
-    $[70] = t47;
-    $[71] = t48;
-  } else {
-    t48 = $[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,
-      className: t17,
-      style: t21,
-      "data-is-hidden": isHidden,
-      "data-position": position,
-      "data-sticky": t22,
-      children: [t27, t39, t48]
-    });
-    $[72] = isHidden;
-    $[73] = position;
-    $[74] = sx;
-    $[75] = t17;
-    $[76] = t21;
-    $[77] = t22;
-    $[78] = t27;
-    $[79] = t39;
-    $[80] = t48;
-    $[81] = t49;
-  } else {
-    t49 = $[81];
-  }
-  return t49;
-});
-Pane.displayName = 'PageLayout.Pane';
-
-// ----------------------------------------------------------------------------
-// PageLayout.Footer
-
-const Footer = t0 => {
-  const $ = c(27);
-  const {
-    "aria-label": label,
-    "aria-labelledby": labelledBy,
-    padding: t1,
-    divider: t2,
-    dividerWhenNarrow: t3,
-    hidden: t4,
-    children,
-    sx,
-    className,
-    style
-  } = 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;
-  if ($[0] !== divider || $[1] !== dividerWhenNarrow) {
-    t5 = !isResponsiveValue(divider) && dividerWhenNarrow !== "inherit" ? {
-      regular: divider,
-      narrow: dividerWhenNarrow
-    } : divider;
-    $[0] = divider;
-    $[1] = dividerWhenNarrow;
-    $[2] = t5;
-  } else {
-    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;
-    $[4] = t6;
-  } else {
-    t6 = $[4];
-  }
-  const t7 = `var(--spacing-${rowGap})`;
-  let t8;
-  if ($[5] !== style || $[6] !== t7) {
-    t8 = {
-      "--spacing": t7,
-      ...style
-    };
-    $[5] = style;
-    $[6] = t7;
-    $[7] = t8;
-  } else {
-    t8 = $[7];
-  }
-  const t9 = t8;
-  const t10 = `var(--spacing-${rowGap})`;
-  let t11;
-  if ($[8] !== t10) {
-    t11 = {
-      "--spacing": t10
-    };
-    $[8] = t10;
-    $[9] = t11;
-  } else {
-    t11 = $[9];
-  }
-  const t12 = t11;
-  let t13;
-  if ($[10] !== dividerVariant || $[11] !== t12) {
-    t13 = /*#__PURE__*/jsx(HorizontalDivider, {
-      className: classes.FooterHorizontalDivider,
-      style: t12,
-      variant: dividerVariant
-    });
-    $[10] = dividerVariant;
-    $[11] = t12;
-    $[12] = t13;
-  } else {
-    t13 = $[12];
-  }
-  const t14 = `var(--spacing-${padding})`;
-  let t15;
-  if ($[13] !== t14) {
-    t15 = {
-      "--spacing": t14
-    };
-    $[13] = t14;
-    $[14] = t15;
-  } else {
-    t15 = $[14];
-  }
-  const t16 = t15;
-  let t17;
-  if ($[15] !== children || $[16] !== t16) {
-    t17 = /*#__PURE__*/jsx("div", {
-      className: classes.FooterContent,
-      style: t16,
-      children: children
-    });
-    $[15] = children;
-    $[16] = t16;
-    $[17] = t17;
-  } else {
-    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",
-      "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;
-  } else {
-    t18 = $[26];
-  }
-  return t18;
-};
-Footer.displayName = 'PageLayout.Footer';
-
-// ----------------------------------------------------------------------------
-// Export
-
-const PageLayout = Object.assign(Root, {
-  Header,
-  Content,
-  Pane,
-  Footer
-});
-function _temp(width_0) {
-  if (isPaneWidth(width_0)) {
-    return defaultPaneWidth[width_0];
-  } else {
-    if (isCustomWidthOptions(width_0)) {
-      return Number(width_0.default.split("px")[0]);
-    }
-  }
-  return 0;
-}
-
-export { PageLayout };