@primer/react 38.0.0-rc.3 → 38.0.0-rc.4

package/dist/PageHeader/PageHeader.js

@@ -6,8 +6,6 @@ import { areAllValuesTheSame, haveRegularAndWideSameValue } from '../utils/getBr
 import { warning } from '../utils/warning.js';
 import { clsx } from 'clsx';
 import classes from './PageHeader.module.css.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';
@@ -31,24 +29,22 @@ const hiddenOnNarrow = {
 // -----------------------------------------------------------------------------
 
 const Root = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(15);
+  const $ = c(14);
   const {
     children,
     className,
-    sx: t1,
-    as: t2,
+    as: t1,
     "aria-label": ariaLabel,
     role,
     hasBorder
   } = t0;
-  const sx = t1 === undefined ? defaultSxProp : t1;
-  const as = t2 === undefined ? "div" : t2;
+  const BaseComponent = t1 === undefined ? "div" : t1;
   const rootRef = useProvidedRefOrCreate(forwardedRef);
   const isInteractive = _temp;
+  let t2;
   let t3;
-  let t4;
   if ($[0] !== children || $[1] !== rootRef) {
-    t3 = function validateInteractiveElementsInTitle() {
+    t2 = function validateInteractiveElementsInTitle() {
       if (!(process.env.NODE_ENV !== "production")) {
         return;
       }
@@ -72,50 +68,47 @@ const Root = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
       const hasInteractiveContent = Array.from(titleArea.childNodes).some(child_1 => child_1 instanceof HTMLElement && isInteractive(child_1) || Array.from(child_1.childNodes).some(child_2 => child_2 instanceof HTMLElement && isInteractive(child_2)));
       process.env.NODE_ENV !== "production" ? warning(hasInteractiveContent && (hasContextArea || hasLeadingAction), "When PageHeader.ContextArea or PageHeader.LeadingAction is present, we recommended not to include any interactive items in the PageHeader.TitleArea to make sure the focus order is logical.") : void 0;
     };
-    t4 = [children, rootRef];
+    t3 = [children, rootRef];
     $[0] = children;
     $[1] = rootRef;
-    $[2] = t3;
-    $[3] = t4;
+    $[2] = t2;
+    $[3] = t3;
   } else {
-    t3 = $[2];
-    t4 = $[3];
+    t2 = $[2];
+    t3 = $[3];
   }
-  useEffect(t3, t4);
-  let t5;
+  useEffect(t2, t3);
+  let t4;
   if ($[4] !== className) {
-    t5 = clsx(classes.PageHeader, className);
+    t4 = clsx(classes.PageHeader, className);
     $[4] = className;
-    $[5] = t5;
+    $[5] = t4;
   } else {
-    t5 = $[5];
+    t4 = $[5];
   }
-  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(BoxWithFallback, {
-      as: as,
+  const t5 = hasBorder ? "true" : undefined;
+  let t6;
+  if ($[6] !== BaseComponent || $[7] !== ariaLabel || $[8] !== children || $[9] !== role || $[10] !== rootRef || $[11] !== t4 || $[12] !== t5) {
+    t6 = /*#__PURE__*/jsx(BaseComponent, {
       ref: rootRef,
-      className: t5,
-      "data-has-border": t6,
-      sx: sx,
+      className: t4,
+      "data-has-border": t5,
       "aria-label": ariaLabel,
       role: role,
       children: children
     });
-    $[6] = ariaLabel;
-    $[7] = as;
+    $[6] = BaseComponent;
+    $[7] = ariaLabel;
     $[8] = children;
     $[9] = role;
     $[10] = rootRef;
-    $[11] = sx;
+    $[11] = t4;
     $[12] = t5;
     $[13] = t6;
-    $[14] = t7;
   } else {
-    t7 = $[14];
+    t6 = $[13];
   }
-  return t7;
+  return t6;
 });
 
 // PageHeader.ContextArea : Only visible on narrow viewports by default to provide user context of where they are at their journey. `hidden` prop available
@@ -123,125 +116,117 @@ const Root = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
 // PageHeader.ContextArea Sub Components: PageHeader.ParentLink, PageHeader.ContextBar, PageHeader.ContextAreaActions
 // ---------------------------------------------------------------------
 const ContextArea = t0 => {
-  const $ = c(9);
+  const $ = c(8);
   const {
     children,
     className,
-    hidden: t1,
-    sx: t2
+    hidden: t1
   } = t0;
   const hidden = t1 === undefined ? hiddenOnRegularAndWide : t1;
-  const sxProp = t2 === undefined ? defaultSxProp : t2;
-  let t3;
+  let t2;
   if ($[0] !== className) {
-    t3 = clsx(classes.ContextArea, className);
+    t2 = clsx(classes.ContextArea, className);
     $[0] = className;
-    $[1] = t3;
+    $[1] = t2;
   } else {
-    t3 = $[1];
+    t2 = $[1];
   }
-  let t4;
+  let t3;
   if ($[2] !== hidden) {
-    t4 = getHiddenDataAttributes(hidden);
+    t3 = getHiddenDataAttributes(hidden);
     $[2] = hidden;
-    $[3] = t4;
+    $[3] = t3;
   } else {
-    t4 = $[3];
+    t3 = $[3];
   }
-  let t5;
-  if ($[4] !== children || $[5] !== sxProp || $[6] !== t3 || $[7] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t3,
-      sx: sxProp,
-      ...t4,
+  let t4;
+  if ($[4] !== children || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: t2,
+      ...t3,
       children: children
     });
     $[4] = children;
-    $[5] = sxProp;
+    $[5] = t2;
     $[6] = t3;
     $[7] = t4;
-    $[8] = t5;
   } else {
-    t5 = $[8];
+    t4 = $[7];
   }
-  return t5;
+  return t4;
 };
 // PageHeader.ParentLink : Only visible on narrow viewports by default to let users navigate up in the hierarchy.
 const ParentLink = /*#__PURE__*/React.forwardRef((t0, ref) => {
-  const $ = c(16);
+  const $ = c(15);
   const {
     children,
     className,
-    sx: t1,
     href,
     "aria-label": ariaLabel,
-    as: t2,
-    hidden: t3
+    as: t1,
+    hidden: t2
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const as = t2 === undefined ? "a" : t2;
-  const hidden = t3 === undefined ? hiddenOnRegularAndWide : t3;
-  let t4;
+  const as = t1 === undefined ? "a" : t1;
+  const hidden = t2 === undefined ? hiddenOnRegularAndWide : t2;
+  let t3;
   if ($[0] !== className) {
-    t4 = clsx(classes.ParentLink, className);
+    t3 = clsx(classes.ParentLink, className);
     $[0] = className;
-    $[1] = t4;
+    $[1] = t3;
   } else {
-    t4 = $[1];
+    t3 = $[1];
   }
-  let t5;
+  let t4;
   if ($[2] !== hidden) {
-    t5 = getHiddenDataAttributes(hidden);
+    t4 = getHiddenDataAttributes(hidden);
     $[2] = hidden;
-    $[3] = t5;
+    $[3] = t4;
   } else {
-    t5 = $[3];
+    t4 = $[3];
   }
-  let t6;
+  let t5;
   if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = /*#__PURE__*/jsx(ArrowLeftIcon, {});
-    $[4] = t6;
+    t5 = /*#__PURE__*/jsx(ArrowLeftIcon, {});
+    $[4] = t5;
   } else {
-    t6 = $[4];
+    t5 = $[4];
   }
-  let t7;
+  let t6;
   if ($[5] !== children) {
-    t7 = /*#__PURE__*/jsx("div", {
+    t6 = /*#__PURE__*/jsx("div", {
       children: children
     });
     $[5] = children;
-    $[6] = t7;
+    $[6] = t6;
   } else {
-    t7 = $[6];
+    t6 = $[6];
   }
-  let t8;
-  if ($[7] !== ariaLabel || $[8] !== as || $[9] !== href || $[10] !== ref || $[11] !== sxProp || $[12] !== t4 || $[13] !== t5 || $[14] !== t7) {
-    t8 = /*#__PURE__*/jsx(Fragment, {
+  let t7;
+  if ($[7] !== ariaLabel || $[8] !== as || $[9] !== href || $[10] !== ref || $[11] !== t3 || $[12] !== t4 || $[13] !== t6) {
+    t7 = /*#__PURE__*/jsx(Fragment, {
       children: /*#__PURE__*/jsxs(Link, {
         ref: ref,
         as: as,
         "aria-label": ariaLabel,
         muted: true,
-        className: t4,
-        sx: sxProp,
-        ...t5,
+        className: t3,
+        ...t4,
         href: href,
-        children: [t6, t7]
+        children: [t5, t6]
       })
     });
     $[7] = ariaLabel;
     $[8] = as;
     $[9] = href;
     $[10] = ref;
-    $[11] = sxProp;
+    $[11] = t3;
     $[12] = t4;
-    $[13] = t5;
+    $[13] = t6;
     $[14] = t7;
-    $[15] = t8;
   } else {
-    t8 = $[15];
+    t7 = $[14];
   }
-  return t8;
+  return t7;
 });
 ParentLink.displayName = 'ParentLink';
 
@@ -250,661 +235,502 @@ ParentLink.displayName = 'ParentLink';
 // ---------------------------------------------------------------------
 
 const ContextBar = t0 => {
-  const $ = c(9);
+  const $ = c(8);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2
+    hidden: t1
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? hiddenOnRegularAndWide : t2;
-  let t3;
+  const hidden = t1 === undefined ? hiddenOnRegularAndWide : t1;
+  let t2;
   if ($[0] !== className) {
-    t3 = clsx(classes.ContextBar, className);
+    t2 = clsx(classes.ContextBar, className);
     $[0] = className;
-    $[1] = t3;
+    $[1] = t2;
   } else {
-    t3 = $[1];
+    t2 = $[1];
   }
-  let t4;
+  let t3;
   if ($[2] !== hidden) {
-    t4 = getHiddenDataAttributes(hidden);
+    t3 = getHiddenDataAttributes(hidden);
     $[2] = hidden;
-    $[3] = t4;
+    $[3] = t3;
   } else {
-    t4 = $[3];
+    t3 = $[3];
   }
-  let t5;
-  if ($[4] !== children || $[5] !== sxProp || $[6] !== t3 || $[7] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t3,
-      sx: sxProp,
-      ...t4,
+  let t4;
+  if ($[4] !== children || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: t2,
+      ...t3,
       children: children
     });
     $[4] = children;
-    $[5] = sxProp;
+    $[5] = t2;
     $[6] = t3;
     $[7] = t4;
-    $[8] = t5;
   } else {
-    t5 = $[8];
+    t4 = $[7];
   }
-  return t5;
+  return t4;
 };
 
 // ContextAreaActions
 // ---------------------------------------------------------------------
 const ContextAreaActions = t0 => {
-  const $ = c(12);
+  const $ = c(8);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2
+    hidden: t1
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? hiddenOnRegularAndWide : t2;
-  let t3;
+  const hidden = t1 === undefined ? hiddenOnRegularAndWide : t1;
+  let t2;
   if ($[0] !== className) {
-    t3 = clsx(classes.ContextAreaActions, className);
+    t2 = clsx(classes.ContextAreaActions, className);
     $[0] = className;
-    $[1] = t3;
+    $[1] = t2;
   } else {
-    t3 = $[1];
+    t2 = $[1];
   }
-  let t4;
+  let t3;
   if ($[2] !== hidden) {
-    t4 = getHiddenDataAttributes(hidden);
+    t3 = getHiddenDataAttributes(hidden);
     $[2] = hidden;
-    $[3] = t4;
-  } else {
-    t4 = $[3];
-  }
-  let t5;
-  if ($[4] !== hidden) {
-    t5 = getHiddenDataAttributes(hidden);
-    $[4] = hidden;
-    $[5] = t5;
+    $[3] = t3;
   } else {
-    t5 = $[5];
+    t3 = $[3];
   }
-  let t6;
-  if ($[6] !== children || $[7] !== sxProp || $[8] !== t3 || $[9] !== t4 || $[10] !== t5) {
-    t6 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t3,
-      ...t4,
-      sx: sxProp,
-      ...t5,
+  let t4;
+  if ($[4] !== children || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: t2,
+      ...t3,
       children: children
     });
-    $[6] = children;
-    $[7] = sxProp;
-    $[8] = t3;
-    $[9] = t4;
-    $[10] = t5;
-    $[11] = t6;
+    $[4] = children;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
   } else {
-    t6 = $[11];
+    t4 = $[7];
   }
-  return t6;
+  return t4;
 };
 // PageHeader.TitleArea: The main title area of the page. Visible on all viewports.
 // PageHeader.TitleArea Sub Components: PageHeader.LeadingVisual, PageHeader.Title, PageTitle.TrailingVisual
 // ---------------------------------------------------------------------
 
 const TitleArea = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(11);
+  const $ = c(10);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2,
-    variant: t3
+    hidden: t1,
+    variant: t2
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? false : t2;
-  const variant = t3 === undefined ? "medium" : t3;
+  const hidden = t1 === undefined ? false : t1;
+  const variant = t2 === undefined ? "medium" : t2;
   const titleAreaRef = useProvidedRefOrCreate(forwardedRef);
   const currentVariant = useResponsiveValue(variant, "medium");
-  let t4;
+  let t3;
   if ($[0] !== className) {
-    t4 = clsx(classes.TitleArea, className);
+    t3 = clsx(classes.TitleArea, className);
     $[0] = className;
-    $[1] = t4;
+    $[1] = t3;
   } else {
-    t4 = $[1];
+    t3 = $[1];
   }
-  let t5;
+  let t4;
   if ($[2] !== hidden) {
-    t5 = getHiddenDataAttributes(hidden);
+    t4 = getHiddenDataAttributes(hidden);
     $[2] = hidden;
-    $[3] = t5;
+    $[3] = t4;
   } else {
-    t5 = $[3];
+    t4 = $[3];
   }
-  let t6;
-  if ($[4] !== children || $[5] !== currentVariant || $[6] !== sxProp || $[7] !== t4 || $[8] !== t5 || $[9] !== titleAreaRef) {
-    t6 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t4,
+  let t5;
+  if ($[4] !== children || $[5] !== currentVariant || $[6] !== t3 || $[7] !== t4 || $[8] !== titleAreaRef) {
+    t5 = /*#__PURE__*/jsx("div", {
+      className: t3,
       ref: titleAreaRef,
       "data-component": "TitleArea",
       "data-size-variant": currentVariant,
-      sx: sxProp,
-      ...t5,
+      ...t4,
       children: children
     });
     $[4] = children;
     $[5] = currentVariant;
-    $[6] = sxProp;
+    $[6] = t3;
     $[7] = t4;
-    $[8] = t5;
-    $[9] = titleAreaRef;
-    $[10] = t6;
+    $[8] = titleAreaRef;
+    $[9] = t5;
   } else {
-    t6 = $[10];
+    t5 = $[9];
   }
-  return t6;
+  return t5;
 });
 TitleArea.displayName = 'TitleArea';
 
 // 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 => {
-  const $ = c(12);
+  const $ = c(8);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2
+    hidden: t1
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? hiddenOnNarrow : t2;
-  let style;
-  if ($[0] !== sxProp) {
-    style = {};
-    const {
-      height
-    } = sxProp;
-    if (height) {
-      style["--custom-height"] = height;
-    }
-    $[0] = sxProp;
-    $[1] = style;
+  const hidden = t1 === undefined ? hiddenOnNarrow : t1;
+  let t2;
+  if ($[0] !== className) {
+    t2 = clsx(classes.LeadingAction, className);
+    $[0] = className;
+    $[1] = t2;
   } else {
-    style = $[1];
+    t2 = $[1];
   }
   let t3;
-  if ($[2] !== className) {
-    t3 = clsx(classes.LeadingAction, className);
-    $[2] = className;
+  if ($[2] !== hidden) {
+    t3 = getHiddenDataAttributes(hidden);
+    $[2] = hidden;
     $[3] = t3;
   } else {
     t3 = $[3];
   }
   let t4;
-  if ($[4] !== hidden) {
-    t4 = getHiddenDataAttributes(hidden);
-    $[4] = hidden;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  let t5;
-  if ($[6] !== children || $[7] !== style || $[8] !== sxProp || $[9] !== t3 || $[10] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t3,
+  if ($[4] !== children || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: t2,
       "data-component": "PH_LeadingAction",
-      sx: sxProp,
-      style: style,
-      ...t4,
+      ...t3,
       children: children
     });
-    $[6] = children;
-    $[7] = style;
-    $[8] = sxProp;
-    $[9] = t3;
-    $[10] = t4;
-    $[11] = t5;
+    $[4] = children;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
   } else {
-    t5 = $[11];
+    t4 = $[7];
   }
-  return t5;
+  return t4;
 };
 
 // This is reserved for only breadcrumbs.
 const Breadcrumbs = t0 => {
-  const $ = c(9);
+  const $ = c(8);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2
+    hidden: t1
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? false : t2;
-  let t3;
+  const hidden = t1 === undefined ? false : t1;
+  let t2;
   if ($[0] !== className) {
-    t3 = clsx(classes.Breadcrumbs, className);
+    t2 = clsx(classes.Breadcrumbs, className);
     $[0] = className;
-    $[1] = t3;
+    $[1] = t2;
   } else {
-    t3 = $[1];
+    t2 = $[1];
   }
-  let t4;
+  let t3;
   if ($[2] !== hidden) {
-    t4 = getHiddenDataAttributes(hidden);
+    t3 = getHiddenDataAttributes(hidden);
     $[2] = hidden;
-    $[3] = t4;
+    $[3] = t3;
   } else {
-    t4 = $[3];
+    t3 = $[3];
   }
-  let t5;
-  if ($[4] !== children || $[5] !== sxProp || $[6] !== t3 || $[7] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t3,
+  let t4;
+  if ($[4] !== children || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: t2,
       "data-component": "PH_Breadcrumbs",
-      sx: sxProp,
-      ...t4,
+      ...t3,
       children: children
     });
     $[4] = children;
-    $[5] = sxProp;
+    $[5] = t2;
     $[6] = t3;
     $[7] = t4;
-    $[8] = t5;
   } else {
-    t5 = $[8];
+    t4 = $[7];
   }
-  return t5;
+  return t4;
 };
 
 // PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
 const LeadingVisual = t0 => {
-  const $ = c(12);
+  const $ = c(8);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2
+    hidden: t1
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? false : t2;
-  let style;
-  if ($[0] !== sxProp) {
-    style = {};
-    const {
-      height
-    } = sxProp;
-    if (height) {
-      style["--custom-height"] = height;
-    }
-    $[0] = sxProp;
-    $[1] = style;
+  const hidden = t1 === undefined ? false : t1;
+  let t2;
+  if ($[0] !== className) {
+    t2 = clsx(classes.LeadingVisual, className);
+    $[0] = className;
+    $[1] = t2;
   } else {
-    style = $[1];
+    t2 = $[1];
   }
   let t3;
-  if ($[2] !== className) {
-    t3 = clsx(classes.LeadingVisual, className);
-    $[2] = className;
+  if ($[2] !== hidden) {
+    t3 = getHiddenDataAttributes(hidden);
+    $[2] = hidden;
     $[3] = t3;
   } else {
     t3 = $[3];
   }
   let t4;
-  if ($[4] !== hidden) {
-    t4 = getHiddenDataAttributes(hidden);
-    $[4] = hidden;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  let t5;
-  if ($[6] !== children || $[7] !== style || $[8] !== sxProp || $[9] !== t3 || $[10] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t3,
+  if ($[4] !== children || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: t2,
       "data-component": "PH_LeadingVisual",
-      sx: sxProp,
-      style: style,
-      ...t4,
+      ...t3,
       children: children
     });
-    $[6] = children;
-    $[7] = style;
-    $[8] = sxProp;
-    $[9] = t3;
-    $[10] = t4;
-    $[11] = t5;
+    $[4] = children;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
   } else {
-    t5 = $[11];
+    t4 = $[7];
   }
-  return t5;
+  return t4;
 };
 const Title = t0 => {
-  const $ = c(14);
+  const $ = c(10);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2,
-    as: t3
+    hidden: t1,
+    as: t2
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? false : t2;
-  const as = t3 === undefined ? "h2" : t3;
-  let style;
-  if ($[0] !== sxProp) {
-    style = {};
-    const {
-      fontSize,
-      lineHeight,
-      fontWeight
-    } = sxProp;
-    if (fontSize) {
-      style["--custom-font-size"] = fontSize;
-    }
-    if (lineHeight) {
-      style["--custom-line-height"] = lineHeight;
-    }
-    if (fontWeight) {
-      style["--custom-font-weight"] = fontWeight;
-    }
-    $[0] = sxProp;
-    $[1] = style;
+  const hidden = t1 === undefined ? false : t1;
+  const as = t2 === undefined ? "h2" : t2;
+  let t3;
+  if ($[0] !== className) {
+    t3 = clsx(classes.Title, className);
+    $[0] = className;
+    $[1] = t3;
   } else {
-    style = $[1];
+    t3 = $[1];
   }
   let t4;
-  if ($[2] !== className) {
-    t4 = clsx(classes.Title, className);
-    $[2] = className;
+  if ($[2] !== hidden) {
+    t4 = getHiddenDataAttributes(hidden);
+    $[2] = hidden;
     $[3] = t4;
   } else {
     t4 = $[3];
   }
   let t5;
-  if ($[4] !== hidden) {
-    t5 = getHiddenDataAttributes(hidden);
-    $[4] = hidden;
-    $[5] = t5;
-  } else {
-    t5 = $[5];
-  }
-  let t6;
-  if ($[6] !== as || $[7] !== children || $[8] !== hidden || $[9] !== style || $[10] !== sxProp || $[11] !== t4 || $[12] !== t5) {
-    t6 = /*#__PURE__*/jsx(Heading, {
-      className: t4,
+  if ($[4] !== as || $[5] !== children || $[6] !== hidden || $[7] !== t3 || $[8] !== t4) {
+    t5 = /*#__PURE__*/jsx(Heading, {
+      className: t3,
       "data-component": "PH_Title",
       "data-hidden": hidden,
       as: as,
-      style: style,
-      sx: sxProp,
-      ...t5,
+      ...t4,
       children: children
     });
-    $[6] = as;
-    $[7] = children;
-    $[8] = hidden;
-    $[9] = style;
-    $[10] = sxProp;
-    $[11] = t4;
-    $[12] = t5;
-    $[13] = t6;
+    $[4] = as;
+    $[5] = children;
+    $[6] = hidden;
+    $[7] = t3;
+    $[8] = t4;
+    $[9] = t5;
   } else {
-    t6 = $[13];
+    t5 = $[9];
   }
-  return t6;
+  return t5;
 };
 
 // PageHeader.LeadingVisual and PageHeader.TrailingVisual should remain visible on narrow viewports.
 const TrailingVisual = t0 => {
-  const $ = c(12);
+  const $ = c(8);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2
+    hidden: t1
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? false : t2;
-  let style;
-  if ($[0] !== sxProp) {
-    style = {};
-    const {
-      height
-    } = sxProp;
-    if (height) {
-      style["--custom-height"] = height;
-    }
-    $[0] = sxProp;
-    $[1] = style;
+  const hidden = t1 === undefined ? false : t1;
+  let t2;
+  if ($[0] !== className) {
+    t2 = clsx(classes.TrailingVisual, className);
+    $[0] = className;
+    $[1] = t2;
   } else {
-    style = $[1];
+    t2 = $[1];
   }
   let t3;
-  if ($[2] !== className) {
-    t3 = clsx(classes.TrailingVisual, className);
-    $[2] = className;
+  if ($[2] !== hidden) {
+    t3 = getHiddenDataAttributes(hidden);
+    $[2] = hidden;
     $[3] = t3;
   } else {
     t3 = $[3];
   }
   let t4;
-  if ($[4] !== hidden) {
-    t4 = getHiddenDataAttributes(hidden);
-    $[4] = hidden;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  let t5;
-  if ($[6] !== children || $[7] !== style || $[8] !== sxProp || $[9] !== t3 || $[10] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t3,
+  if ($[4] !== children || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: t2,
       "data-component": "PH_TrailingVisual",
-      sx: sxProp,
-      style: style,
-      ...t4,
+      ...t3,
       children: children
     });
-    $[6] = children;
-    $[7] = style;
-    $[8] = sxProp;
-    $[9] = t3;
-    $[10] = t4;
-    $[11] = t5;
+    $[4] = children;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
   } else {
-    t5 = $[11];
+    t4 = $[7];
   }
-  return t5;
+  return t4;
 };
 const TrailingAction = t0 => {
-  const $ = c(12);
+  const $ = c(8);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2
+    hidden: t1
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? hiddenOnNarrow : t2;
-  let style;
-  if ($[0] !== sxProp) {
-    style = {};
-    const {
-      height
-    } = sxProp;
-    if (height) {
-      style["--custom-height"] = height;
-    }
-    $[0] = sxProp;
-    $[1] = style;
+  const hidden = t1 === undefined ? hiddenOnNarrow : t1;
+  let t2;
+  if ($[0] !== className) {
+    t2 = clsx(classes.TrailingAction, className);
+    $[0] = className;
+    $[1] = t2;
   } else {
-    style = $[1];
+    t2 = $[1];
   }
   let t3;
-  if ($[2] !== className) {
-    t3 = clsx(classes.TrailingAction, className);
-    $[2] = className;
+  if ($[2] !== hidden) {
+    t3 = getHiddenDataAttributes(hidden);
+    $[2] = hidden;
     $[3] = t3;
   } else {
     t3 = $[3];
   }
   let t4;
-  if ($[4] !== hidden) {
-    t4 = getHiddenDataAttributes(hidden);
-    $[4] = hidden;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  let t5;
-  if ($[6] !== children || $[7] !== style || $[8] !== sxProp || $[9] !== t3 || $[10] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t3,
+  if ($[4] !== children || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: t2,
       "data-component": "PH_TrailingAction",
-      sx: sxProp,
-      style: style,
-      ...t4,
+      ...t3,
       children: children
     });
-    $[6] = children;
-    $[7] = style;
-    $[8] = sxProp;
-    $[9] = t3;
-    $[10] = t4;
-    $[11] = t5;
+    $[4] = children;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
   } else {
-    t5 = $[11];
+    t4 = $[7];
   }
-  return t5;
+  return t4;
 };
 const Actions = t0 => {
-  const $ = c(12);
+  const $ = c(8);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2
+    hidden: t1
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? false : t2;
-  let style;
-  if ($[0] !== sxProp) {
-    style = {};
-    const {
-      height
-    } = sxProp;
-    if (height) {
-      style["--custom-height"] = height;
-    }
-    $[0] = sxProp;
-    $[1] = style;
+  const hidden = t1 === undefined ? false : t1;
+  let t2;
+  if ($[0] !== className) {
+    t2 = clsx(classes.Actions, className);
+    $[0] = className;
+    $[1] = t2;
   } else {
-    style = $[1];
+    t2 = $[1];
   }
   let t3;
-  if ($[2] !== className) {
-    t3 = clsx(classes.Actions, className);
-    $[2] = className;
+  if ($[2] !== hidden) {
+    t3 = getHiddenDataAttributes(hidden);
+    $[2] = hidden;
     $[3] = t3;
   } else {
     t3 = $[3];
   }
   let t4;
-  if ($[4] !== hidden) {
-    t4 = getHiddenDataAttributes(hidden);
-    $[4] = hidden;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  let t5;
-  if ($[6] !== children || $[7] !== style || $[8] !== sxProp || $[9] !== t3 || $[10] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t3,
+  if ($[4] !== children || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: t2,
       "data-component": "PH_Actions",
-      sx: sxProp,
-      style: style,
-      ...t4,
+      ...t3,
       children: children
     });
-    $[6] = children;
-    $[7] = style;
-    $[8] = sxProp;
-    $[9] = t3;
-    $[10] = t4;
-    $[11] = t5;
+    $[4] = children;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
   } else {
-    t5 = $[11];
+    t4 = $[7];
   }
-  return t5;
+  return t4;
 };
 
 // PageHeader.Description: The description area of the header. Visible on all viewports
 const Description = t0 => {
-  const $ = c(9);
+  const $ = c(8);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2
+    hidden: t1
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? false : t2;
-  let t3;
+  const hidden = t1 === undefined ? false : t1;
+  let t2;
   if ($[0] !== className) {
-    t3 = clsx(classes.Description, className);
+    t2 = clsx(classes.Description, className);
     $[0] = className;
-    $[1] = t3;
+    $[1] = t2;
   } else {
-    t3 = $[1];
+    t2 = $[1];
   }
-  let t4;
+  let t3;
   if ($[2] !== hidden) {
-    t4 = getHiddenDataAttributes(hidden);
+    t3 = getHiddenDataAttributes(hidden);
     $[2] = hidden;
-    $[3] = t4;
+    $[3] = t3;
   } else {
-    t4 = $[3];
+    t3 = $[3];
   }
-  let t5;
-  if ($[4] !== children || $[5] !== sxProp || $[6] !== t3 || $[7] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      className: t3,
-      sx: sxProp,
-      ...t4,
+  let t4;
+  if ($[4] !== children || $[5] !== t2 || $[6] !== t3) {
+    t4 = /*#__PURE__*/jsx("div", {
+      className: t2,
+      ...t3,
       children: children
     });
     $[4] = children;
-    $[5] = sxProp;
+    $[5] = t2;
     $[6] = t3;
     $[7] = t4;
-    $[8] = t5;
   } else {
-    t5 = $[8];
+    t4 = $[7];
   }
-  return t5;
+  return t4;
 };
 // PageHeader.Navigation: The local navigation area of the header. Visible on all viewports
 const Navigation = t0 => {
-  const $ = c(12);
+  const $ = c(11);
   const {
     children,
     className,
-    sx: t1,
-    hidden: t2,
-    as,
+    hidden: t1,
+    as: t2,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
-  const hidden = t2 === undefined ? false : t2;
-  process.env.NODE_ENV !== "production" ? warning(as === "nav" && !ariaLabel && !ariaLabelledBy, "Use `aria-label` or `aria-labelledby` prop to provide an accessible label to the `nav` landmark for assistive technology") : void 0;
-  const t3 = as === "nav" ? ariaLabel : undefined;
-  const t4 = as === "nav" ? ariaLabelledBy : undefined;
+  const hidden = t1 === undefined ? false : t1;
+  const BaseComponent = t2 === undefined ? "div" : t2;
+  process.env.NODE_ENV !== "production" ? warning(BaseComponent === "nav" && !ariaLabel && !ariaLabelledBy, "Use `aria-label` or `aria-labelledby` prop to provide an accessible label to the `nav` landmark for assistive technology") : void 0;
+  const t3 = BaseComponent === "nav" ? ariaLabel : undefined;
+  const t4 = BaseComponent === "nav" ? ariaLabelledBy : undefined;
   let t5;
   if ($[0] !== className) {
     t5 = clsx(classes.Navigation, className);
@@ -922,27 +748,24 @@ const Navigation = t0 => {
     t6 = $[3];
   }
   let t7;
-  if ($[4] !== as || $[5] !== children || $[6] !== sxProp || $[7] !== t3 || $[8] !== t4 || $[9] !== t5 || $[10] !== t6) {
-    t7 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: as,
+  if ($[4] !== BaseComponent || $[5] !== children || $[6] !== t3 || $[7] !== t4 || $[8] !== t5 || $[9] !== t6) {
+    t7 = /*#__PURE__*/jsx(BaseComponent, {
       "aria-label": t3,
       "aria-labelledby": t4,
       className: t5,
       "data-component": "PH_Navigation",
-      sx: sxProp,
       ...t6,
       children: children
     });
-    $[4] = as;
+    $[4] = BaseComponent;
     $[5] = children;
-    $[6] = sxProp;
-    $[7] = t3;
-    $[8] = t4;
-    $[9] = t5;
-    $[10] = t6;
-    $[11] = t7;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+    $[9] = t6;
+    $[10] = t7;
   } else {
-    t7 = $[11];
+    t7 = $[10];
   }
   return t7;
 };