@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.2

package/lib-esm/NavList/NavList.js

@@ -213,85 +213,251 @@ const ItemWithSubNavContext = /*#__PURE__*/React.createContext({
   subNavId: '',
   isOpen: false
 });
-function ItemWithSubNav({
-  children,
-  subNav,
-  depth: _depth,
-  defaultOpen,
-  style,
-  sx: sxProp = defaultSxProp
-}) {
+function ItemWithSubNav(t0) {
   var _ref;
+  const $ = c(49);
+  const {
+    children,
+    subNav,
+    defaultOpen,
+    style,
+    sx: t1
+  } = t0;
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
   const buttonId = useId();
   const subNavId = useId();
   const [isOpen, setIsOpen] = React.useState((_ref = defaultOpen || null) !== null && _ref !== void 0 ? _ref : false);
   const subNavRef = React.useRef(null);
   const [containsCurrentItem, setContainsCurrentItem] = React.useState(false);
-  useIsomorphicLayoutEffect(() => {
-    if (subNavRef.current) {
-      // Check if SubNav contains current item
-      // valid values: page, step, location, date, time, true and false
-      const currentItem = subNavRef.current.querySelector('[aria-current]:not([aria-current=false])');
-      if (currentItem) {
-        setContainsCurrentItem(true);
-        setIsOpen(true);
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      if (subNavRef.current) {
+        const currentItem = subNavRef.current.querySelector("[aria-current]:not([aria-current=false])");
+        if (currentItem) {
+          setContainsCurrentItem(true);
+          setIsOpen(true);
+        }
       }
-    }
-  }, [subNav, buttonId]);
+    };
+    $[0] = t2;
+  } else {
+    t2 = $[0];
+  }
+  let t3;
+  if ($[1] !== buttonId || $[2] !== subNav) {
+    t3 = [subNav, buttonId];
+    $[1] = buttonId;
+    $[2] = subNav;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  useIsomorphicLayoutEffect(t2, t3);
   if (sxProp !== defaultSxProp) {
-    return /*#__PURE__*/jsx(ItemWithSubNavContext.Provider, {
-      value: {
+    let t4;
+    if ($[4] !== buttonId || $[5] !== isOpen || $[6] !== subNavId) {
+      t4 = {
         buttonId,
         subNavId,
         isOpen
-      },
-      children: /*#__PURE__*/jsxs(ActionList.Item, {
+      };
+      $[4] = buttonId;
+      $[5] = isOpen;
+      $[6] = subNavId;
+      $[7] = t4;
+    } else {
+      t4 = $[7];
+    }
+    const t5 = !isOpen && containsCurrentItem;
+    let t6;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = () => setIsOpen(_temp3);
+      $[8] = t6;
+    } else {
+      t6 = $[8];
+    }
+    let t7;
+    if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+        children: /*#__PURE__*/jsx(ChevronDownIcon, {
+          className: classes.ExpandIcon
+        })
+      });
+      $[9] = t7;
+    } else {
+      t7 = $[9];
+    }
+    let t8;
+    if ($[10] !== subNav) {
+      let t9;
+      if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+        t9 = {
+          ref: subNavRef
+        };
+        $[12] = t9;
+      } else {
+        t9 = $[12];
+      }
+      t8 = /*#__PURE__*/React.cloneElement(subNav, t9);
+      $[10] = subNav;
+      $[11] = t8;
+    } else {
+      t8 = $[11];
+    }
+    let t9;
+    if ($[13] !== t8) {
+      t9 = /*#__PURE__*/jsx(SubItem, {
+        children: t8
+      });
+      $[13] = t8;
+      $[14] = t9;
+    } else {
+      t9 = $[14];
+    }
+    let t10;
+    if ($[15] !== buttonId || $[16] !== children || $[17] !== isOpen || $[18] !== style || $[19] !== subNavId || $[20] !== sxProp || $[21] !== t5 || $[22] !== t9) {
+      t10 = /*#__PURE__*/jsxs(ActionList.Item, {
         id: buttonId,
         "aria-expanded": isOpen,
         "aria-controls": subNavId,
-        active: !isOpen && containsCurrentItem,
-        onSelect: () => setIsOpen(open => !open),
+        active: t5,
+        onSelect: t6,
         style: style,
         sx: sxProp,
-        children: [children, /*#__PURE__*/jsx(ActionList.TrailingVisual, {
-          children: /*#__PURE__*/jsx(ChevronDownIcon, {
-            className: classes.ExpandIcon
-          })
-        }), /*#__PURE__*/jsx(SubItem, {
-          children: /*#__PURE__*/React.cloneElement(subNav, {
-            ref: subNavRef
-          })
-        })]
-      })
-    });
+        children: [children, t7, t9]
+      });
+      $[15] = buttonId;
+      $[16] = children;
+      $[17] = isOpen;
+      $[18] = style;
+      $[19] = subNavId;
+      $[20] = sxProp;
+      $[21] = t5;
+      $[22] = t9;
+      $[23] = t10;
+    } else {
+      t10 = $[23];
+    }
+    let t11;
+    if ($[24] !== t10 || $[25] !== t4) {
+      t11 = /*#__PURE__*/jsx(ItemWithSubNavContext.Provider, {
+        value: t4,
+        children: t10
+      });
+      $[24] = t10;
+      $[25] = t4;
+      $[26] = t11;
+    } else {
+      t11 = $[26];
+    }
+    return t11;
   }
-  return /*#__PURE__*/jsx(ItemWithSubNavContext.Provider, {
-    value: {
+  let t4;
+  if ($[27] !== buttonId || $[28] !== isOpen || $[29] !== subNavId) {
+    t4 = {
       buttonId,
       subNavId,
       isOpen
-    },
-    children: /*#__PURE__*/jsxs(ActionList.Item, {
+    };
+    $[27] = buttonId;
+    $[28] = isOpen;
+    $[29] = subNavId;
+    $[30] = t4;
+  } else {
+    t4 = $[30];
+  }
+  const t5 = !isOpen && containsCurrentItem;
+  let t6;
+  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => setIsOpen(_temp4);
+    $[31] = t6;
+  } else {
+    t6 = $[31];
+  }
+  let t7;
+  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+      children: /*#__PURE__*/jsx(ChevronDownIcon, {
+        className: classes.ExpandIcon
+      })
+    });
+    $[32] = t7;
+  } else {
+    t7 = $[32];
+  }
+  let t8;
+  if ($[33] !== subNav) {
+    let t9;
+    if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
+      t9 = {
+        ref: subNavRef
+      };
+      $[35] = t9;
+    } else {
+      t9 = $[35];
+    }
+    t8 = /*#__PURE__*/React.cloneElement(subNav, t9);
+    $[33] = subNav;
+    $[34] = t8;
+  } else {
+    t8 = $[34];
+  }
+  let t9;
+  if ($[36] !== t8) {
+    t9 = /*#__PURE__*/jsx(SubItem, {
+      children: t8
+    });
+    $[36] = t8;
+    $[37] = t9;
+  } else {
+    t9 = $[37];
+  }
+  let t10;
+  if ($[38] !== buttonId || $[39] !== children || $[40] !== isOpen || $[41] !== style || $[42] !== subNavId || $[43] !== t5 || $[44] !== t9) {
+    t10 = /*#__PURE__*/jsxs(ActionList.Item, {
       id: buttonId,
       "aria-expanded": isOpen,
       "aria-controls": subNavId,
-      active: !isOpen && containsCurrentItem,
-      onSelect: () => setIsOpen(open_0 => !open_0),
+      active: t5,
+      onSelect: t6,
       style: style,
-      children: [children, /*#__PURE__*/jsx(ActionList.TrailingVisual, {
-        children: /*#__PURE__*/jsx(ChevronDownIcon, {
-          className: classes.ExpandIcon
-        })
-      }), /*#__PURE__*/jsx(SubItem, {
-        children: /*#__PURE__*/React.cloneElement(subNav, {
-          ref: subNavRef
-        })
-      })]
-    })
-  });
+      children: [children, t7, t9]
+    });
+    $[38] = buttonId;
+    $[39] = children;
+    $[40] = isOpen;
+    $[41] = style;
+    $[42] = subNavId;
+    $[43] = t5;
+    $[44] = t9;
+    $[45] = t10;
+  } else {
+    t10 = $[45];
+  }
+  let t11;
+  if ($[46] !== t10 || $[47] !== t4) {
+    t11 = /*#__PURE__*/jsx(ItemWithSubNavContext.Provider, {
+      value: t4,
+      children: t10
+    });
+    $[46] = t10;
+    $[47] = t4;
+    $[48] = t11;
+  } else {
+    t11 = $[48];
+  }
+  return t11;
 }
-ItemWithSubNav.displayName = "ItemWithSubNav"; // ----------------------------------------------------------------------------
+
+// ----------------------------------------------------------------------------
 // NavList.SubNav
+function _temp4(open_0) {
+  return !open_0;
+}
+function _temp3(open) {
+  return !open;
+}
 const SubNavContext = /*#__PURE__*/React.createContext({
   depth: 0
 });

package/lib-esm/Overlay/Overlay-40e80d0e.css

@@ -0,0 +1,2 @@
+@keyframes prc-Overlay-overlay-appear-DGY3B{0%{opacity:0}to{opacity:1}}.prc-Overlay-Overlay-dVyJl{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));height:auto;max-height:100vh;max-width:calc(100vw - 2rem);min-width:192px;overflow:hidden;position:absolute;width:auto}.prc-Overlay-Overlay-dVyJl:focus{outline:none}@media (forced-colors:active){.prc-Overlay-Overlay-dVyJl{outline:1px solid transparent}}.prc-Overlay-Overlay-dVyJl:where([data-reflow-container=true]){max-width:calc(100vw - 2rem)}.prc-Overlay-Overlay-dVyJl:where([data-overflow-auto]){overflow:auto}.prc-Overlay-Overlay-dVyJl:where([data-overflow-hidden]){overflow:hidden}.prc-Overlay-Overlay-dVyJl:where([data-overflow-scroll]){overflow:scroll}.prc-Overlay-Overlay-dVyJl:where([data-overflow-visible]){overflow:visible}.prc-Overlay-Overlay-dVyJl:where([data-height-xsmall]){height:192px}.prc-Overlay-Overlay-dVyJl:where([data-height-small]){height:256px}.prc-Overlay-Overlay-dVyJl:where([data-height-medium]){height:320px}.prc-Overlay-Overlay-dVyJl:where([data-height-large]){height:432px}.prc-Overlay-Overlay-dVyJl:where([data-height-xlarge]){height:600px}.prc-Overlay-Overlay-dVyJl:where([data-height-auto]),.prc-Overlay-Overlay-dVyJl:where([data-height-initial]){height:auto}.prc-Overlay-Overlay-dVyJl:where([data-height-fit-content]){height:-moz-fit-content;height:fit-content}.prc-Overlay-Overlay-dVyJl:where([data-max-height-xsmall]){max-height:192px}.prc-Overlay-Overlay-dVyJl:where([data-max-height-small]){max-height:256px}.prc-Overlay-Overlay-dVyJl:where([data-max-height-medium]){max-height:320px}.prc-Overlay-Overlay-dVyJl:where([data-max-height-large]){max-height:432px}.prc-Overlay-Overlay-dVyJl:where([data-max-height-xlarge]){max-height:600px}.prc-Overlay-Overlay-dVyJl:where([data-max-height-fit-content]){max-height:-moz-fit-content;max-height:fit-content}.prc-Overlay-Overlay-dVyJl:where([data-width-small]){width:256px}.prc-Overlay-Overlay-dVyJl:where([data-width-medium]){width:320px}.prc-Overlay-Overlay-dVyJl:where([data-width-large]){width:480px}.prc-Overlay-Overlay-dVyJl:where([data-width-xlarge]){width:640px}.prc-Overlay-Overlay-dVyJl:where([data-width-xxlarge]){width:960px}.prc-Overlay-Overlay-dVyJl:where([data-width-auto]){width:auto}.prc-Overlay-Overlay-dVyJl:where([data-max-width-small]){max-width:256px}.prc-Overlay-Overlay-dVyJl:where([data-max-width-medium]){max-width:320px}.prc-Overlay-Overlay-dVyJl:where([data-max-width-large]){max-width:480px}.prc-Overlay-Overlay-dVyJl:where([data-max-width-xlarge]){max-width:640px}.prc-Overlay-Overlay-dVyJl:where([data-max-width-xxlarge]){max-width:960px}.prc-Overlay-Overlay-dVyJl:where([data-visibility-visible]){visibility:visible}.prc-Overlay-Overlay-dVyJl:where([data-visibility-hidden]){visibility:hidden}@media screen and (max-width:calc(48rem - 0.02px)){.prc-Overlay-Overlay-dVyJl:where([data-responsive=fullscreen]){border-radius:unset;height:100vh;left:0;margin:0;max-height:none;max-width:none;position:fixed;top:0;width:100vw}}@supports (height:100dvh){.prc-Overlay-Overlay-dVyJl:where([data-variant=fullscreen]){height:100dvh}}@media (prefers-reduced-motion:no-preference){.prc-Overlay-Overlay-dVyJl{animation:prc-Overlay-overlay-appear-DGY3B .2s cubic-bezier(.33,1,.68,1)}}
+/*# sourceMappingURL=Overlay-40e80d0e.css.map */

package/lib-esm/Overlay/Overlay-40e80d0e.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Overlay/Overlay.module.css"],"names":[],"mappings":"AAAA,4CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,2BAQE,mEAAwC,CACxC,8CAAwC,CACxC,mEAAwC,CALxC,WAAY,CACZ,gBAAiB,CAJjB,4BAA6B,CAE7B,eAAgB,CAGhB,eAAgB,CANhB,iBAAkB,CAElB,UAsKF,CA7JE,iCACE,YACF,CAEA,8BAhBF,2BAkBI,6BAuJJ,CAtJE,CAEA,+DACE,4BACF,CAEA,uDACE,aACF,CAEA,yDACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,gBACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,6GAEE,WACF,CAEA,4DACE,uBAAmB,CAAnB,kBACF,CAEA,2DACE,gBACF,CAEA,0DACE,gBACF,CAEA,2DACE,gBACF,CAEA,0DACE,gBACF,CAEA,2DACE,gBACF,CAEA,gEACE,2BAAuB,CAAvB,sBACF,CAEA,qDACE,WACF,CAEA,sDACE,WACF,CAEA,qDAEE,WACF,CAEA,sDAEE,WACF,CAEA,uDAEE,WACF,CAEA,oDACE,UACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,2DACE,eACF,CAEA,4DACE,kBACF,CAEA,2DACE,iBACF,CAGE,mDADF,+DAUI,mBAAoB,CAHpB,YAAa,CAHb,MAAO,CAKP,QAAS,CADT,eAAgB,CAFhB,cAAe,CAJf,cAAe,CACf,KAAM,CAEN,WAOJ,CADE,CAGF,0BAEE,4DACE,aACF,CACF,CAGF,8CACE,2BACE,wEACF,CACF","file":"Overlay-40e80d0e.css","sourcesContent":["@keyframes overlay-appear {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n.Overlay {\n  position: absolute;\n  max-width: calc(100vw - 2rem);\n  width: auto;\n  min-width: 192px;\n  height: auto;\n  max-height: 100vh;\n  overflow: hidden;\n  background-color: var(--overlay-bgColor);\n  border-radius: var(--borderRadius-large);\n  box-shadow: var(--shadow-floating-small);\n\n  &:focus {\n    outline: none;\n  }\n\n  @media (forced-colors: active) {\n    /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */\n    outline: solid 1px transparent;\n  }\n\n  &:where([data-reflow-container='true']) {\n    max-width: calc(100vw - 2rem);\n  }\n\n  &:where([data-overflow-auto]) {\n    overflow: auto;\n  }\n\n  &:where([data-overflow-hidden]) {\n    overflow: hidden;\n  }\n\n  &:where([data-overflow-scroll]) {\n    overflow: scroll;\n  }\n\n  &:where([data-overflow-visible]) {\n    overflow: visible;\n  }\n\n  &:where([data-height-xsmall]) {\n    height: 192px;\n  }\n\n  &:where([data-height-small]) {\n    height: 256px;\n  }\n\n  &:where([data-height-medium]) {\n    height: 320px;\n  }\n\n  &:where([data-height-large]) {\n    height: 432px;\n  }\n\n  &:where([data-height-xlarge]) {\n    height: 600px;\n  }\n\n  &:where([data-height-auto]),\n  &:where([data-height-initial]) {\n    height: auto;\n  }\n\n  &:where([data-height-fit-content]) {\n    height: fit-content;\n  }\n\n  &:where([data-max-height-xsmall]) {\n    max-height: 192px;\n  }\n\n  &:where([data-max-height-small]) {\n    max-height: 256px;\n  }\n\n  &:where([data-max-height-medium]) {\n    max-height: 320px;\n  }\n\n  &:where([data-max-height-large]) {\n    max-height: 432px;\n  }\n\n  &:where([data-max-height-xlarge]) {\n    max-height: 600px;\n  }\n\n  &:where([data-max-height-fit-content]) {\n    max-height: fit-content;\n  }\n\n  &:where([data-width-small]) {\n    width: 256px;\n  }\n\n  &:where([data-width-medium]) {\n    width: 320px;\n  }\n\n  &:where([data-width-large]) {\n    /* stylelint-disable-next-line primer/responsive-widths */\n    width: 480px;\n  }\n\n  &:where([data-width-xlarge]) {\n    /* stylelint-disable-next-line primer/responsive-widths */\n    width: 640px;\n  }\n\n  &:where([data-width-xxlarge]) {\n    /* stylelint-disable-next-line primer/responsive-widths */\n    width: 960px;\n  }\n\n  &:where([data-width-auto]) {\n    width: auto;\n  }\n\n  &:where([data-max-width-small]) {\n    max-width: 256px;\n  }\n\n  &:where([data-max-width-medium]) {\n    max-width: 320px;\n  }\n\n  &:where([data-max-width-large]) {\n    max-width: 480px;\n  }\n\n  &:where([data-max-width-xlarge]) {\n    max-width: 640px;\n  }\n\n  &:where([data-max-width-xxlarge]) {\n    max-width: 960px;\n  }\n\n  &:where([data-visibility-visible]) {\n    visibility: visible;\n  }\n\n  &:where([data-visibility-hidden]) {\n    visibility: hidden;\n  }\n\n  &:where([data-responsive='fullscreen']) {\n    @media screen and (--viewportRange-narrow) {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 100vw;\n      max-width: none;\n      height: 100vh;\n      max-height: none;\n      margin: 0;\n      border-radius: unset;\n    }\n  }\n\n  @supports (height: 100dvh) {\n    /* fix for mobile safari (100vh clips the screen with the toolbar) */\n    &:where([data-variant='fullscreen']) {\n      height: 100dvh;\n    }\n  }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .Overlay {\n    animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n  }\n}\n"]}

package/lib-esm/Overlay/Overlay.module.css.js

@@ -1,4 +1,4 @@
-import './Overlay-aeb12fc3.css';
+import './Overlay-40e80d0e.css';
 
 var classes = {"Overlay":"prc-Overlay-Overlay-dVyJl"};
 

package/lib-esm/PageHeader/PageHeader.js

@@ -6,13 +6,12 @@ import { areAllValuesTheSame, haveRegularAndWideSameValue } from '../utils/getBr
 import { warning } from '../utils/warning.js';
 import { clsx } from 'clsx';
 import classes from './PageHeader.module.css.js';
-import { toggleSxComponent } from '../internal/utils/toggleSxComponent.js';
 import { defaultSxProp } from '../utils/defaultSxProp.js';
+import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
 import Heading from '../Heading/Heading.js';
 import Link from '../Link/Link.js';
-import Box from '../Box/Box.js';
 
 // Default state for the `visible` prop when a sub component is only visible on narrow viewport
 const hiddenOnRegularAndWide = {
@@ -31,7 +30,6 @@ const hiddenOnNarrow = {
 // Root
 // -----------------------------------------------------------------------------
 
-const RootBaseComponent = toggleSxComponent('div');
 const Root = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   const $ = c(15);
   const {
@@ -95,7 +93,7 @@ const Root = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   const t6 = hasBorder ? "true" : undefined;
   let t7;
   if ($[6] !== ariaLabel || $[7] !== as || $[8] !== children || $[9] !== role || $[10] !== rootRef || $[11] !== sx || $[12] !== t5 || $[13] !== t6) {
-    t7 = /*#__PURE__*/jsx(RootBaseComponent, {
+    t7 = /*#__PURE__*/jsx(BoxWithFallback, {
       as: as,
       ref: rootRef,
       className: t5,
@@ -119,7 +117,7 @@ const Root = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   }
   return t7;
 });
-const ContextAreaBaseComponent = toggleSxComponent('div');
+
 // PageHeader.ContextArea : Only visible on narrow viewports by default to provide user context of where they are at their journey. `hidden` prop available
 // to manage their custom visibility but consumers should be careful if they choose to hide this on narrow viewports.
 // PageHeader.ContextArea Sub Components: PageHeader.ParentLink, PageHeader.ContextBar, PageHeader.ContextAreaActions
@@ -152,7 +150,7 @@ const ContextArea = t0 => {
   }
   let t5;
   if ($[4] !== children || $[5] !== sxProp || $[6] !== t3 || $[7] !== t4) {
-    t5 = /*#__PURE__*/jsx(ContextAreaBaseComponent, {
+    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
       className: t3,
       sx: sxProp,
       ...t4,
@@ -208,7 +206,7 @@ const ParentLink = /*#__PURE__*/React.forwardRef((t0, ref) => {
   }
   let t7;
   if ($[5] !== children) {
-    t7 = /*#__PURE__*/jsx(Box, {
+    t7 = /*#__PURE__*/jsx("div", {
       children: children
     });
     $[5] = children;
@@ -251,7 +249,6 @@ ParentLink.displayName = 'ParentLink';
 // Generic slot for any component above the title region. Use it for custom breadcrumbs and other navigation elements instead of ParentLink.
 // ---------------------------------------------------------------------
 
-const ContextBarBaseComponent = toggleSxComponent('div');
 const ContextBar = t0 => {
   const $ = c(9);
   const {
@@ -280,7 +277,7 @@ const ContextBar = t0 => {
   }
   let t5;
   if ($[4] !== children || $[5] !== sxProp || $[6] !== t3 || $[7] !== t4) {
-    t5 = /*#__PURE__*/jsx(ContextBarBaseComponent, {
+    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
       className: t3,
       sx: sxProp,
       ...t4,
@@ -296,7 +293,7 @@ const ContextBar = t0 => {
   }
   return t5;
 };
-const ContextAreaActionsBaseComponent = toggleSxComponent('div');
+
 // ContextAreaActions
 // ---------------------------------------------------------------------
 const ContextAreaActions = t0 => {
@@ -335,7 +332,7 @@ const ContextAreaActions = t0 => {
   }
   let t6;
   if ($[6] !== children || $[7] !== sxProp || $[8] !== t3 || $[9] !== t4 || $[10] !== t5) {
-    t6 = /*#__PURE__*/jsx(ContextAreaActionsBaseComponent, {
+    t6 = /*#__PURE__*/jsx(BoxWithFallback, {
       className: t3,
       ...t4,
       sx: sxProp,
@@ -357,7 +354,6 @@ const ContextAreaActions = t0 => {
 // PageHeader.TitleArea Sub Components: PageHeader.LeadingVisual, PageHeader.Title, PageTitle.TrailingVisual
 // ---------------------------------------------------------------------
 
-const TitleAreaBaseComponent = toggleSxComponent('div');
 const TitleArea = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   const $ = c(11);
   const {
@@ -390,7 +386,7 @@ const TitleArea = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   }
   let t6;
   if ($[4] !== children || $[5] !== currentVariant || $[6] !== sxProp || $[7] !== t4 || $[8] !== t5 || $[9] !== titleAreaRef) {
-    t6 = /*#__PURE__*/jsx(TitleAreaBaseComponent, {
+    t6 = /*#__PURE__*/jsx(BoxWithFallback, {
       className: t4,
       ref: titleAreaRef,
       "data-component": "TitleArea",
@@ -412,7 +408,7 @@ const TitleArea = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
   return t6;
 });
 TitleArea.displayName = 'TitleArea';
-const LeadingActionBaseComponent = toggleSxComponent('div');
+
 // PageHeader.LeadingAction and PageHeader.TrailingAction should only be visible on regular viewports.
 // So they come as hidden on narrow viewports by default and their visibility can be managed by their `hidden` prop.
 const LeadingAction = t0 => {
@@ -457,7 +453,7 @@ const LeadingAction = t0 => {
   }
   let t5;
   if ($[6] !== children || $[7] !== style || $[8] !== sxProp || $[9] !== t3 || $[10] !== t4) {
-    t5 = /*#__PURE__*/jsx(LeadingActionBaseComponent, {
+    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
       className: t3,
       "data-component": "PH_LeadingAction",
       sx: sxProp,
@@ -476,7 +472,7 @@ const LeadingAction = t0 => {
   }
   return t5;
 };
-const BreadcrumbsBaseComponent = toggleSxComponent('div');
+
 // This is reserved for only breadcrumbs.
 const Breadcrumbs = t0 => {
   const $ = c(9);
@@ -506,7 +502,7 @@ const Breadcrumbs = t0 => {
   }
   let t5;
   if ($[4] !== children || $[5] !== sxProp || $[6] !== t3 || $[7] !== t4) {
-    t5 = /*#__PURE__*/jsx(BreadcrumbsBaseComponent, {
+    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
       className: t3,
       "data-component": "PH_Breadcrumbs",
       sx: sxProp,
@@ -523,7 +519,7 @@ const Breadcrumbs = t0 => {
   }
   return t5;
 };
-const LeadingVisualBaseComponent = toggleSxComponent('div');
+
 // PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
 const LeadingVisual = t0 => {
   const $ = c(12);
@@ -567,7 +563,7 @@ const LeadingVisual = t0 => {
   }
   let t5;
   if ($[6] !== children || $[7] !== style || $[8] !== sxProp || $[9] !== t3 || $[10] !== t4) {
-    t5 = /*#__PURE__*/jsx(LeadingVisualBaseComponent, {
+    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
       className: t3,
       "data-component": "PH_LeadingVisual",
       sx: sxProp,
@@ -661,7 +657,7 @@ const Title = t0 => {
   }
   return t6;
 };
-const TrailingVisualBaseComponent = toggleSxComponent('div');
+
 // PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
 const TrailingVisual = t0 => {
   const $ = c(12);
@@ -705,7 +701,7 @@ const TrailingVisual = t0 => {
   }
   let t5;
   if ($[6] !== children || $[7] !== style || $[8] !== sxProp || $[9] !== t3 || $[10] !== t4) {
-    t5 = /*#__PURE__*/jsx(TrailingVisualBaseComponent, {
+    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
       className: t3,
       "data-component": "PH_TrailingVisual",
       sx: sxProp,
@@ -724,7 +720,6 @@ const TrailingVisual = t0 => {
   }
   return t5;
 };
-const TrailingActionBaseComponent = toggleSxComponent('div');
 const TrailingAction = t0 => {
   const $ = c(12);
   const {
@@ -767,7 +762,7 @@ const TrailingAction = t0 => {
   }
   let t5;
   if ($[6] !== children || $[7] !== style || $[8] !== sxProp || $[9] !== t3 || $[10] !== t4) {
-    t5 = /*#__PURE__*/jsx(TrailingActionBaseComponent, {
+    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
       className: t3,
       "data-component": "PH_TrailingAction",
       sx: sxProp,
@@ -786,7 +781,6 @@ const TrailingAction = t0 => {
   }
   return t5;
 };
-const ActionsBaseComponent = toggleSxComponent('div');
 const Actions = t0 => {
   const $ = c(12);
   const {
@@ -829,7 +823,7 @@ const Actions = t0 => {
   }
   let t5;
   if ($[6] !== children || $[7] !== style || $[8] !== sxProp || $[9] !== t3 || $[10] !== t4) {
-    t5 = /*#__PURE__*/jsx(ActionsBaseComponent, {
+    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
       className: t3,
       "data-component": "PH_Actions",
       sx: sxProp,
@@ -848,7 +842,6 @@ const Actions = t0 => {
   }
   return t5;
 };
-const DescriptionBaseComponent = toggleSxComponent('div');
 
 // PageHeader.Description: The description area of the header. Visible on all viewports
 const Description = t0 => {
@@ -879,7 +872,7 @@ const Description = t0 => {
   }
   let t5;
   if ($[4] !== children || $[5] !== sxProp || $[6] !== t3 || $[7] !== t4) {
-    t5 = /*#__PURE__*/jsx(DescriptionBaseComponent, {
+    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
       className: t3,
       sx: sxProp,
       ...t4,
@@ -895,8 +888,6 @@ const Description = t0 => {
   }
   return t5;
 };
-const NavigationBaseComponent = toggleSxComponent('div');
-
 // PageHeader.Navigation: The local navigation area of the header. Visible on all viewports
 const Navigation = t0 => {
   const $ = c(12);
@@ -932,7 +923,7 @@ const Navigation = t0 => {
   }
   let t7;
   if ($[4] !== as || $[5] !== children || $[6] !== sxProp || $[7] !== t3 || $[8] !== t4 || $[9] !== t5 || $[10] !== t6) {
-    t7 = /*#__PURE__*/jsx(NavigationBaseComponent, {
+    t7 = /*#__PURE__*/jsx(BoxWithFallback, {
       as: as,
       "aria-label": t3,
       "aria-labelledby": t4,