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

package/dist/NavList/NavList.js

@@ -1,19 +1,16 @@
 import { c } from 'react-compiler-runtime';
 import { PlusIcon, ChevronDownIcon } from '@primer/octicons-react';
 import React, { createElement, isValidElement } from 'react';
+import { clsx } from 'clsx';
 import { ActionList } from '../ActionList/index.js';
 import { SubItem } from '../ActionList/Item.js';
 import { ActionListContainerContext } from '../ActionList/ActionListContainerContext.js';
-import '@styled-system/css';
-import merge from 'deepmerge';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { useId } from '../hooks/useId.js';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
 import classes from '../ActionList/ActionList.module.css.js';
+import navListClasses from './NavList.module.css.js';
 import { flushSync } from 'react-dom';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import Box from '../Box/Box.js';
 
 const Root = /*#__PURE__*/React.forwardRef((t0, ref) => {
   const $ = c(10);
@@ -55,8 +52,7 @@ const Root = /*#__PURE__*/React.forwardRef((t0, ref) => {
   }
   let t3;
   if ($[6] !== props || $[7] !== ref || $[8] !== t2) {
-    t3 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "nav",
+    t3 = /*#__PURE__*/jsx("nav", {
       ...props,
       ref: ref,
       children: t2
@@ -76,18 +72,16 @@ Root.displayName = 'NavList';
 // NavList.Item
 
 const Item = /*#__PURE__*/React.forwardRef((t0, ref) => {
-  const $ = c(31);
+  const $ = c(29);
   let ariaCurrent;
   let children;
   let defaultOpen;
   let props;
-  let t1;
   if ($[0] !== t0) {
     ({
       "aria-current": ariaCurrent,
       children,
       defaultOpen,
-      sx: t1,
       ...props
     } = t0);
     $[0] = t0;
@@ -95,113 +89,108 @@ const Item = /*#__PURE__*/React.forwardRef((t0, ref) => {
     $[2] = children;
     $[3] = defaultOpen;
     $[4] = props;
-    $[5] = t1;
   } else {
     ariaCurrent = $[1];
     children = $[2];
     defaultOpen = $[3];
     props = $[4];
-    t1 = $[5];
   }
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
   const {
     depth
   } = React.useContext(SubNavContext);
   let childrenWithoutSubNavOrTrailingAction;
   let subNav;
-  let t2;
-  if ($[6] !== children || $[7] !== defaultOpen) {
+  let t1;
+  if ($[5] !== children || $[6] !== defaultOpen) {
     subNav = React.Children.toArray(children).find(_temp);
-    let t3;
-    if ($[11] !== children) {
-      t3 = React.Children.toArray(children).filter(_temp2);
-      $[11] = children;
-      $[12] = t3;
+    let t2;
+    if ($[10] !== children) {
+      t2 = React.Children.toArray(children).filter(_temp2);
+      $[10] = children;
+      $[11] = t2;
     } else {
-      t3 = $[12];
+      t2 = $[11];
     }
-    childrenWithoutSubNavOrTrailingAction = t3;
+    childrenWithoutSubNavOrTrailingAction = t2;
     if (! /*#__PURE__*/isValidElement(subNav) && defaultOpen) {
       console.error("NavList.Item must have a NavList.SubNav to use defaultOpen.");
     }
-    t2 = subNav && /*#__PURE__*/isValidElement(subNav);
-    $[6] = children;
-    $[7] = defaultOpen;
-    $[8] = childrenWithoutSubNavOrTrailingAction;
-    $[9] = subNav;
-    $[10] = t2;
+    t1 = subNav && /*#__PURE__*/isValidElement(subNav);
+    $[5] = children;
+    $[6] = defaultOpen;
+    $[7] = childrenWithoutSubNavOrTrailingAction;
+    $[8] = subNav;
+    $[9] = t1;
   } else {
-    childrenWithoutSubNavOrTrailingAction = $[8];
-    subNav = $[9];
-    t2 = $[10];
-  }
-  if (t2) {
-    let t3;
-    if ($[13] !== depth) {
-      t3 = {
+    childrenWithoutSubNavOrTrailingAction = $[7];
+    subNav = $[8];
+    t1 = $[9];
+  }
+  if (t1) {
+    let t2;
+    if ($[12] !== depth) {
+      t2 = {
         "--subitem-depth": depth
       };
-      $[13] = depth;
-      $[14] = t3;
+      $[12] = depth;
+      $[13] = t2;
     } else {
-      t3 = $[14];
+      t2 = $[13];
     }
-    const t4 = t3;
-    let t5;
-    if ($[15] !== childrenWithoutSubNavOrTrailingAction || $[16] !== defaultOpen || $[17] !== depth || $[18] !== subNav || $[19] !== sxProp || $[20] !== t4) {
-      t5 = /*#__PURE__*/jsx(ItemWithSubNav, {
+    const t3 = t2;
+    let t4;
+    if ($[14] !== childrenWithoutSubNavOrTrailingAction || $[15] !== defaultOpen || $[16] !== depth || $[17] !== subNav || $[18] !== t3) {
+      t4 = /*#__PURE__*/jsx(ItemWithSubNav, {
         subNav: subNav,
         depth: depth,
         defaultOpen: defaultOpen,
-        sx: sxProp,
-        style: t4,
+        style: t3,
         children: childrenWithoutSubNavOrTrailingAction
       });
-      $[15] = childrenWithoutSubNavOrTrailingAction;
-      $[16] = defaultOpen;
-      $[17] = depth;
-      $[18] = subNav;
-      $[19] = sxProp;
-      $[20] = t4;
-      $[21] = t5;
+      $[14] = childrenWithoutSubNavOrTrailingAction;
+      $[15] = defaultOpen;
+      $[16] = depth;
+      $[17] = subNav;
+      $[18] = t3;
+      $[19] = t4;
     } else {
-      t5 = $[21];
+      t4 = $[19];
     }
-    return t5;
+    return t4;
   }
-  const t3 = Boolean(ariaCurrent) && ariaCurrent !== "false";
-  let t4;
-  if ($[22] !== depth) {
-    t4 = {
+  const t2 = Boolean(ariaCurrent) && ariaCurrent !== "false";
+  let t3;
+  if ($[20] !== depth) {
+    t3 = {
       "--subitem-depth": depth
     };
-    $[22] = depth;
-    $[23] = t4;
+    $[20] = depth;
+    $[21] = t3;
   } else {
-    t4 = $[23];
+    t3 = $[21];
   }
-  const t5 = t4;
-  let t6;
-  if ($[24] !== ariaCurrent || $[25] !== children || $[26] !== props || $[27] !== ref || $[28] !== t3 || $[29] !== t5) {
-    t6 = /*#__PURE__*/jsx(ActionList.LinkItem, {
+  const t4 = t3;
+  let t5;
+  if ($[22] !== ariaCurrent || $[23] !== children || $[24] !== props || $[25] !== ref || $[26] !== t2 || $[27] !== t4) {
+    t5 = /*#__PURE__*/jsx(ActionList.LinkItem, {
       ref: ref,
       "aria-current": ariaCurrent,
-      active: t3,
-      style: t5,
+      active: t2,
+      style: t4,
       ...props,
       children: children
     });
-    $[24] = ariaCurrent;
-    $[25] = children;
-    $[26] = props;
-    $[27] = ref;
-    $[28] = t3;
-    $[29] = t5;
-    $[30] = t6;
+    $[22] = ariaCurrent;
+    $[23] = children;
+    $[24] = props;
+    $[25] = ref;
+    $[26] = t2;
+    $[27] = t4;
+    $[28] = t5;
   } else {
-    t6 = $[30];
+    t5 = $[28];
   }
-  return t6;
+  return t5;
 });
 Item.displayName = 'NavList.Item';
 
@@ -215,23 +204,21 @@ const ItemWithSubNavContext = /*#__PURE__*/React.createContext({
 });
 function ItemWithSubNav(t0) {
   var _ref;
-  const $ = c(49);
+  const $ = c(26);
   const {
     children,
     subNav,
     defaultOpen,
-    style,
-    sx: t1
+    style
   } = 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);
-  let t2;
+  let t1;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = () => {
+    t1 = () => {
       if (subNavRef.current) {
         const currentItem = subNavRef.current.querySelector("[aria-current]:not([aria-current=false])");
         if (currentItem) {
@@ -240,221 +227,119 @@ function ItemWithSubNav(t0) {
         }
       }
     };
-    $[0] = t2;
+    $[0] = t1;
   } else {
-    t2 = $[0];
+    t1 = $[0];
   }
-  let t3;
+  let t2;
   if ($[1] !== buttonId || $[2] !== subNav) {
-    t3 = [subNav, buttonId];
+    t2 = [subNav, buttonId];
     $[1] = buttonId;
     $[2] = subNav;
-    $[3] = t3;
+    $[3] = t2;
   } else {
-    t3 = $[3];
-  }
-  useIsomorphicLayoutEffect(t2, t3);
-  if (sxProp !== defaultSxProp) {
-    let t4;
-    if ($[4] !== buttonId || $[5] !== isOpen || $[6] !== subNavId) {
-      t4 = {
-        buttonId,
-        subNavId,
-        isOpen
-      };
-      $[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: t5,
-        onSelect: t6,
-        style: style,
-        sx: sxProp,
-        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;
+    t2 = $[3];
   }
-  let t4;
-  if ($[27] !== buttonId || $[28] !== isOpen || $[29] !== subNavId) {
-    t4 = {
+  useIsomorphicLayoutEffect(t1, t2);
+  let t3;
+  if ($[4] !== buttonId || $[5] !== isOpen || $[6] !== subNavId) {
+    t3 = {
       buttonId,
       subNavId,
       isOpen
     };
-    $[27] = buttonId;
-    $[28] = isOpen;
-    $[29] = subNavId;
-    $[30] = t4;
+    $[4] = buttonId;
+    $[5] = isOpen;
+    $[6] = subNavId;
+    $[7] = t3;
   } else {
-    t4 = $[30];
+    t3 = $[7];
   }
-  const t5 = !isOpen && containsCurrentItem;
-  let t6;
-  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = () => setIsOpen(_temp4);
-    $[31] = t6;
+  const t4 = !isOpen && containsCurrentItem;
+  let t5;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => setIsOpen(_temp3);
+    $[8] = t5;
   } else {
-    t6 = $[31];
+    t5 = $[8];
   }
-  let t7;
-  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = /*#__PURE__*/jsx(ActionList.TrailingVisual, {
+  let t6;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /*#__PURE__*/jsx(ActionList.TrailingVisual, {
       children: /*#__PURE__*/jsx(ChevronDownIcon, {
         className: classes.ExpandIcon
       })
     });
-    $[32] = t7;
+    $[9] = t6;
   } else {
-    t7 = $[32];
+    t6 = $[9];
   }
-  let t8;
-  if ($[33] !== subNav) {
-    let t9;
-    if ($[35] === Symbol.for("react.memo_cache_sentinel")) {
-      t9 = {
+  let t7;
+  if ($[10] !== subNav) {
+    let t8;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+      t8 = {
         ref: subNavRef
       };
-      $[35] = t9;
+      $[12] = t8;
     } else {
-      t9 = $[35];
+      t8 = $[12];
     }
-    t8 = /*#__PURE__*/React.cloneElement(subNav, t9);
-    $[33] = subNav;
-    $[34] = t8;
+    t7 = /*#__PURE__*/React.cloneElement(subNav, t8);
+    $[10] = subNav;
+    $[11] = t7;
   } else {
-    t8 = $[34];
+    t7 = $[11];
   }
-  let t9;
-  if ($[36] !== t8) {
-    t9 = /*#__PURE__*/jsx(SubItem, {
-      children: t8
+  let t8;
+  if ($[13] !== t7) {
+    t8 = /*#__PURE__*/jsx(SubItem, {
+      children: t7
     });
-    $[36] = t8;
-    $[37] = t9;
+    $[13] = t7;
+    $[14] = t8;
   } else {
-    t9 = $[37];
+    t8 = $[14];
   }
-  let t10;
-  if ($[38] !== buttonId || $[39] !== children || $[40] !== isOpen || $[41] !== style || $[42] !== subNavId || $[43] !== t5 || $[44] !== t9) {
-    t10 = /*#__PURE__*/jsxs(ActionList.Item, {
+  let t9;
+  if ($[15] !== buttonId || $[16] !== children || $[17] !== isOpen || $[18] !== style || $[19] !== subNavId || $[20] !== t4 || $[21] !== t8) {
+    t9 = /*#__PURE__*/jsxs(ActionList.Item, {
       id: buttonId,
       "aria-expanded": isOpen,
       "aria-controls": subNavId,
-      active: t5,
-      onSelect: t6,
+      active: t4,
+      onSelect: t5,
       style: style,
-      children: [children, t7, t9]
+      children: [children, t6, t8]
     });
-    $[38] = buttonId;
-    $[39] = children;
-    $[40] = isOpen;
-    $[41] = style;
-    $[42] = subNavId;
-    $[43] = t5;
-    $[44] = t9;
-    $[45] = t10;
+    $[15] = buttonId;
+    $[16] = children;
+    $[17] = isOpen;
+    $[18] = style;
+    $[19] = subNavId;
+    $[20] = t4;
+    $[21] = t8;
+    $[22] = t9;
   } else {
-    t10 = $[45];
+    t9 = $[22];
   }
-  let t11;
-  if ($[46] !== t10 || $[47] !== t4) {
-    t11 = /*#__PURE__*/jsx(ItemWithSubNavContext.Provider, {
-      value: t4,
-      children: t10
+  let t10;
+  if ($[23] !== t3 || $[24] !== t9) {
+    t10 = /*#__PURE__*/jsx(ItemWithSubNavContext.Provider, {
+      value: t3,
+      children: t9
     });
-    $[46] = t10;
-    $[47] = t4;
-    $[48] = t11;
+    $[23] = t3;
+    $[24] = t9;
+    $[25] = t10;
   } else {
-    t11 = $[48];
+    t10 = $[25];
   }
-  return t11;
+  return t10;
 }
 
 // ----------------------------------------------------------------------------
 // NavList.SubNav
-function _temp4(open_0) {
-  return !open_0;
-}
 function _temp3(open) {
   return !open;
 }
@@ -464,12 +349,10 @@ const SubNavContext = /*#__PURE__*/React.createContext({
 
 // NOTE: SubNav must be a direct child of an Item
 const SubNav = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
-  const $ = c(21);
+  const $ = c(10);
   const {
-    children,
-    sx: t1
+    children
   } = t0;
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
   const {
     buttonId,
     subNavId
@@ -484,93 +367,47 @@ const SubNav = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
     console.error("NavList.SubNav only supports four levels of nesting");
     return null;
   }
-  if (sxProp !== defaultSxProp) {
-    const t2 = depth + 1;
-    let t3;
-    if ($[0] !== t2) {
-      t3 = {
-        depth: t2
-      };
-      $[0] = t2;
-      $[1] = t3;
-    } else {
-      t3 = $[1];
-    }
-    let t4;
-    if ($[2] !== buttonId || $[3] !== children || $[4] !== forwardedRef || $[5] !== subNavId || $[6] !== sxProp) {
-      t4 = /*#__PURE__*/jsx(Box, {
-        as: "ul",
-        id: subNavId,
-        "aria-labelledby": buttonId,
-        className: classes.SubGroup,
-        ref: forwardedRef,
-        sx: sxProp,
-        children: children
-      });
-      $[2] = buttonId;
-      $[3] = children;
-      $[4] = forwardedRef;
-      $[5] = subNavId;
-      $[6] = sxProp;
-      $[7] = t4;
-    } else {
-      t4 = $[7];
-    }
-    let t5;
-    if ($[8] !== t3 || $[9] !== t4) {
-      t5 = /*#__PURE__*/jsx(SubNavContext.Provider, {
-        value: t3,
-        children: t4
-      });
-      $[8] = t3;
-      $[9] = t4;
-      $[10] = t5;
-    } else {
-      t5 = $[10];
-    }
-    return t5;
-  }
-  const t2 = depth + 1;
-  let t3;
-  if ($[11] !== t2) {
-    t3 = {
-      depth: t2
+  const t1 = depth + 1;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = {
+      depth: t1
     };
-    $[11] = t2;
-    $[12] = t3;
+    $[0] = t1;
+    $[1] = t2;
   } else {
-    t3 = $[12];
+    t2 = $[1];
   }
-  let t4;
-  if ($[13] !== buttonId || $[14] !== children || $[15] !== forwardedRef || $[16] !== subNavId) {
-    t4 = /*#__PURE__*/jsx("ul", {
+  let t3;
+  if ($[2] !== buttonId || $[3] !== children || $[4] !== forwardedRef || $[5] !== subNavId) {
+    t3 = /*#__PURE__*/jsx("ul", {
       className: classes.SubGroup,
       id: subNavId,
       "aria-labelledby": buttonId,
       ref: forwardedRef,
       children: children
     });
-    $[13] = buttonId;
-    $[14] = children;
-    $[15] = forwardedRef;
-    $[16] = subNavId;
-    $[17] = t4;
+    $[2] = buttonId;
+    $[3] = children;
+    $[4] = forwardedRef;
+    $[5] = subNavId;
+    $[6] = t3;
   } else {
-    t4 = $[17];
+    t3 = $[6];
   }
-  let t5;
-  if ($[18] !== t3 || $[19] !== t4) {
-    t5 = /*#__PURE__*/jsx(SubNavContext.Provider, {
-      value: t3,
-      children: t4
+  let t4;
+  if ($[7] !== t2 || $[8] !== t3) {
+    t4 = /*#__PURE__*/jsx(SubNavContext.Provider, {
+      value: t2,
+      children: t3
     });
-    $[18] = t3;
-    $[19] = t4;
-    $[20] = t5;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
   } else {
-    t5 = $[20];
+    t4 = $[9];
   }
-  return t5;
+  return t4;
 });
 SubNav.displayName = 'NavList.SubNav';
 
@@ -600,95 +437,61 @@ TrailingAction.displayName = 'NavList.TrailingAction';
 // ----------------------------------------------------------------------------
 // NavList.Group
 
-const defaultSx = {};
 const Group = t0 => {
-  const $ = c(18);
+  const $ = c(11);
   let children;
   let props;
-  let t1;
   let title;
   if ($[0] !== t0) {
     ({
       title,
       children,
-      sx: t1,
       ...props
     } = t0);
     $[0] = t0;
     $[1] = children;
     $[2] = props;
-    $[3] = t1;
-    $[4] = title;
+    $[3] = title;
   } else {
     children = $[1];
     props = $[2];
-    t1 = $[3];
-    title = $[4];
-  }
-  const sxProp = t1 === undefined ? defaultSx : t1;
-  if (sxProp !== defaultSx) {
-    let t2;
-    if ($[5] !== title) {
-      t2 = title ? /*#__PURE__*/jsx(ActionList.GroupHeading, {
-        children: title
-      }) : null;
-      $[5] = title;
-      $[6] = t2;
-    } else {
-      t2 = $[6];
-    }
-    let t3;
-    if ($[7] !== children || $[8] !== sxProp || $[9] !== t2) {
-      t3 = /*#__PURE__*/jsxs(Box, {
-        sx: sxProp,
-        as: "li",
-        "data-component": "ActionList.Group",
-        children: [t2, children]
-      });
-      $[7] = children;
-      $[8] = sxProp;
-      $[9] = t2;
-      $[10] = t3;
-    } else {
-      t3 = $[10];
-    }
-    return t3;
+    title = $[3];
   }
-  let t2;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = /*#__PURE__*/jsx(ActionList.Divider, {});
-    $[11] = t2;
+  let t1;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = /*#__PURE__*/jsx(ActionList.Divider, {});
+    $[4] = t1;
   } else {
-    t2 = $[11];
+    t1 = $[4];
   }
-  let t3;
-  if ($[12] !== title) {
-    t3 = title ? /*#__PURE__*/jsx(ActionList.GroupHeading, {
+  let t2;
+  if ($[5] !== title) {
+    t2 = title ? /*#__PURE__*/jsx(ActionList.GroupHeading, {
       as: "h3",
       "data-component": "ActionList.GroupHeading",
       children: title
     }) : null;
-    $[12] = title;
-    $[13] = t3;
+    $[5] = title;
+    $[6] = t2;
   } else {
-    t3 = $[13];
+    t2 = $[6];
   }
-  let t4;
-  if ($[14] !== children || $[15] !== props || $[16] !== t3) {
-    t4 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t2, /*#__PURE__*/jsxs(ActionList.Group, {
+  let t3;
+  if ($[7] !== children || $[8] !== props || $[9] !== t2) {
+    t3 = /*#__PURE__*/jsxs(Fragment, {
+      children: [t1, /*#__PURE__*/jsxs(ActionList.Group, {
         ...props,
-        children: [t3, children]
+        children: [t2, children]
       })]
     });
-    $[14] = children;
-    $[15] = props;
-    $[16] = t3;
-    $[17] = t4;
+    $[7] = children;
+    $[8] = props;
+    $[9] = t2;
+    $[10] = t3;
   } else {
-    t4 = $[17];
+    t3 = $[10];
   }
-  return t4;
+  return t3;
 };
 // ----------------------------------------------------------------------------
 // NavList.GroupExpand
@@ -831,59 +634,50 @@ const GroupExpand = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
  */
 const GroupHeading = t0 => {
   const $ = c(10);
+  let className;
   let rest;
   let t1;
-  let t2;
   if ($[0] !== t0) {
     ({
       as: t1,
-      sx: t2,
+      className,
       ...rest
     } = t0);
     $[0] = t0;
-    $[1] = rest;
-    $[2] = t1;
-    $[3] = t2;
+    $[1] = className;
+    $[2] = rest;
+    $[3] = t1;
   } else {
-    rest = $[1];
-    t1 = $[2];
-    t2 = $[3];
+    className = $[1];
+    rest = $[2];
+    t1 = $[3];
   }
   const as = t1 === undefined ? "h3" : t1;
-  const sxProp = t2 === undefined ? defaultSxProp : t2;
-  let t3;
-  if ($[4] !== sxProp) {
-    t3 = merge({
-      "> a {": {
-        color: "var(--fgColor-default)",
-        textDecoration: "inherit",
-        ":hover": {
-          textDecoration: "underline"
-        }
-      }
-    }, sxProp);
-    $[4] = sxProp;
-    $[5] = t3;
+  let t2;
+  if ($[4] !== className) {
+    t2 = clsx(navListClasses.GroupHeading, className);
+    $[4] = className;
+    $[5] = t2;
   } else {
-    t3 = $[5];
+    t2 = $[5];
   }
-  let t4;
-  if ($[6] !== as || $[7] !== rest || $[8] !== t3) {
-    t4 = /*#__PURE__*/jsx(ActionList.GroupHeading, {
+  let t3;
+  if ($[6] !== as || $[7] !== rest || $[8] !== t2) {
+    t3 = /*#__PURE__*/jsx(ActionList.GroupHeading, {
       as: as,
-      sx: t3,
+      className: t2,
       "data-component": "NavList.GroupHeading",
       headingWrapElement: "li",
       ...rest
     });
     $[6] = as;
     $[7] = rest;
-    $[8] = t3;
-    $[9] = t4;
+    $[8] = t2;
+    $[9] = t3;
   } else {
-    t4 = $[9];
+    t3 = $[9];
   }
-  return t4;
+  return t3;
 };
 
 // ----------------------------------------------------------------------------