@primer/react 38.30.0-rc.dc0369509 → 38.30.1-rc.2d1806208

package/CHANGELOG.md

@@ -1,9 +1,23 @@
 # @primer/react
 
+## 38.30.1
+
+### Patch Changes
+
+- [#8052](https://github.com/primer/react/pull/8052) [`a1b24cf`](https://github.com/primer/react/commit/a1b24cf3411566641aeb846e62069dc26505da6b) Thanks [@joshblack](https://github.com/joshblack)! - Heading, Link, Pagehead, Portal, and SideNav: Improve rendering performance with React Compiler support
+
 ## 38.30.0
 
 ### Minor Changes
 
+- [#8048](https://github.com/primer/react/pull/8048) [`0add561`](https://github.com/primer/react/commit/0add5615720d17d69c77b014786c5e17e4337bb0) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - ActionBar: Add `ActionBar.Button` for rendering text buttons that overflow into the menu, alongside the existing `ActionBar.IconButton`
+
+- [#8031](https://github.com/primer/react/pull/8031) [`cb79351`](https://github.com/primer/react/commit/cb79351f29b9a1aea7bacf890eca97a5c9d97590) Thanks [@janmaarten-a11y](https://github.com/janmaarten-a11y)! - Add a `NavList.Heading` slot that names the navigation region. It renders an `h2`
+  by default (configurable to `h3` via `as`), supports a `visuallyHidden` variant,
+  labels the `nav` landmark via `aria-labelledby`, and makes `NavList.Group`
+  headings default to one level deeper (`h3`, or `h4` under an `h3` heading) for a
+  correct heading hierarchy.
+
 - [#7991](https://github.com/primer/react/pull/7991) [`b906268`](https://github.com/primer/react/commit/b906268b7ebe8d684d8b5e9b1c4e9b528a5dd67a) Thanks [@llastflowers](https://github.com/llastflowers)! - Add data-component attributes and associated tests for:
 
   Radio
@@ -18,6 +32,10 @@
   SkeletonText
   Spinner
 
+- [#8026](https://github.com/primer/react/pull/8026) [`73a45df`](https://github.com/primer/react/commit/73a45dfe11c3a297e4f2f8317caa4a535a70ce80) Thanks [@TylerJDev](https://github.com/TylerJDev)! - SelectPanel: Add `cssAnchorPositioningSettings` prop to customize CSS anchor positioning behavior
+
+- [#7506](https://github.com/primer/react/pull/7506) [`e58907c`](https://github.com/primer/react/commit/e58907c5559f5ef8133a1d98a05e2e4a6c1ca6cb) Thanks [@iansan5653](https://github.com/iansan5653)! - Refactors `UnderlineNav` overflow handling to use CSS-based overflow detection instead of JavaScript width measurements, eliminating layout shift (CLS) issues and improving performance. The overflow menu is now implemented with `ActionMenu`, and item registration uses a descendant registry instead of the `React.Children` API. Consumer-facing changes: items can now be wrapped in fragments or wrapper components; the current item may appear in the overflow menu when the viewport is narrow; and the overflow menu button is right-aligned.
+
 ### Patch Changes
 
 - [#8021](https://github.com/primer/react/pull/8021) [`6131a94`](https://github.com/primer/react/commit/6131a9424b5bd5bb98b7ae05771d8187fe2f58cd) Thanks [@mattcosta7](https://github.com/mattcosta7)! - Announce, AriaStatus, AriaAlert: Avoid an extra React render on every content change (e.g. per keystroke when tied to an input)

package/dist/ActionBar/ActionBar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type ActionListItemProps } from '../ActionList';
-import type { IconButtonProps } from '../Button';
+import type { ButtonProps, IconButtonProps } from '../Button';
 type Size = 'small' | 'medium' | 'large';
 type A11yProps = {
     /** When provided, a label is added to the action bar */
@@ -38,6 +38,9 @@ export type ActionBarProps = {
 export type ActionBarIconButtonProps = {
     disabled?: boolean;
 } & IconButtonProps;
+export type ActionBarButtonProps = {
+    disabled?: boolean;
+} & ButtonProps;
 export type ActionBarMenuItemProps = ({
     /**
      * Type of menu item to be rendered in the menu (action | group).
@@ -91,6 +94,26 @@ export type ActionBarMenuProps = {
 } & IconButtonProps;
 export declare const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>>;
 export declare const ActionBarIconButton: React.ForwardRefExoticComponent<ActionBarIconButtonProps & React.RefAttributes<unknown>>;
+export declare const ActionBarButton: React.ForwardRefExoticComponent<{
+    disabled?: boolean;
+} & {
+    alignContent?: import("../Button/types").AlignContent;
+    icon?: React.FunctionComponent<import("@primer/octicons-react").IconProps> | React.ElementType | React.ReactElement<any> | null;
+    leadingVisual?: React.ElementType | React.ReactElement<any> | null;
+    trailingVisual?: React.ElementType | React.ReactElement<any> | null;
+    trailingAction?: React.ElementType | null;
+    children?: React.ReactNode;
+    count?: number | string;
+} & {
+    variant?: import("../Button/types").VariantType;
+    size?: import("../Button/types").Size;
+    disabled?: boolean;
+    block?: boolean;
+    loading?: boolean;
+    loadingAnnouncement?: string;
+    inactive?: boolean;
+    labelWrap?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<unknown>>;
 export declare const ActionBarGroup: React.ForwardRefExoticComponent<{
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<unknown>>;

package/dist/ActionBar/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../src/ActionBar/ActionBar.tsx"],"names":[],"mappings":"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"}

package/dist/ActionBar/ActionBar.js

@@ -3,6 +3,7 @@ import React, { forwardRef, useRef, useState, useMemo, useCallback, useContext,
 import { KebabHorizontalIcon } from '@primer/octicons-react';
 import { ActionList } from '../ActionList/index.js';
 import { IconButton } from '../Button/IconButton.js';
+import { ButtonComponent } from '../Button/Button.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import styles from './ActionBar.module.css.js';
 import { clsx } from 'clsx';
@@ -359,6 +360,97 @@ const ActionBarIconButton = /*#__PURE__*/forwardRef(({
     "data-overflowing": dataOverflowingAttr
   });
 });
+const ActionBarButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
+  const $ = c(19);
+  let disabled;
+  let onClick;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      disabled,
+      onClick,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = disabled;
+    $[2] = onClick;
+    $[3] = props;
+  } else {
+    disabled = $[1];
+    onClick = $[2];
+    props = $[3];
+  }
+  const ref = useRef(null);
+  const mergedRef = useMergedRefs(forwardedRef, ref);
+  const {
+    size
+  } = React.useContext(ActionBarContext);
+  const {
+    children,
+    leadingVisual
+  } = props;
+  const t1 = typeof leadingVisual === "function" ? leadingVisual : undefined;
+  const t2 = !!disabled;
+  const t3 = onClick;
+  let t4;
+  if ($[4] !== children || $[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
+    t4 = {
+      type: "action",
+      label: children,
+      icon: t1,
+      disabled: t2,
+      onClick: t3
+    };
+    $[4] = children;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  const {
+    dataOverflowingAttr
+  } = useActionBarItem(ref, t4);
+  let t5;
+  if ($[9] !== disabled || $[10] !== onClick) {
+    t5 = event => {
+      var _onClick;
+      if (disabled) {
+        return;
+      }
+      (_onClick = onClick) === null || _onClick === void 0 ? void 0 : _onClick(event);
+    };
+    $[9] = disabled;
+    $[10] = onClick;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  const clickHandler = t5;
+  let t6;
+  if ($[12] !== clickHandler || $[13] !== dataOverflowingAttr || $[14] !== disabled || $[15] !== mergedRef || $[16] !== props || $[17] !== size) {
+    t6 = /*#__PURE__*/jsx(ButtonComponent, {
+      "aria-disabled": disabled,
+      ref: mergedRef,
+      size: size,
+      onClick: clickHandler,
+      ...props,
+      variant: "invisible",
+      "data-overflowing": dataOverflowingAttr
+    });
+    $[12] = clickHandler;
+    $[13] = dataOverflowingAttr;
+    $[14] = disabled;
+    $[15] = mergedRef;
+    $[16] = props;
+    $[17] = size;
+    $[18] = t6;
+  } else {
+    t6 = $[18];
+  }
+  return t6;
+});
 const ActionBarGroupContext = /*#__PURE__*/React.createContext(null);
 const ActionBarGroup = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const $ = c(10);
@@ -611,10 +703,10 @@ function _temp4(t0) {
         typeof onClick === "function" && onClick(event);
       },
       disabled: disabled,
-      children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
+      children: [Icon ? /*#__PURE__*/jsx(ActionList.LeadingVisual, {
         children: /*#__PURE__*/jsx(Icon, {})
-      }), label]
-    }, label);
+      }) : null, label]
+    }, id);
   }
   if (menuItem.type === "menu") {
     const menuItems = menuItem.items;
@@ -645,4 +737,4 @@ function _temp7(item, index) {
   return renderMenuItem(item, index);
 }
 
-export { ActionBar, ActionBarGroup, ActionBarIconButton, ActionBarMenu, VerticalDivider };
+export { ActionBar, ActionBarButton, ActionBarGroup, ActionBarIconButton, ActionBarMenu, VerticalDivider };

package/dist/ActionBar/index.d.ts

@@ -1,6 +1,26 @@
-export type { ActionBarProps, ActionBarMenuProps, ActionBarMenuItemProps } from './ActionBar';
+export type { ActionBarProps, ActionBarButtonProps, ActionBarMenuProps, ActionBarMenuItemProps } from './ActionBar';
 declare const ActionBar: import("react").FC<import("react").PropsWithChildren<import("./ActionBar").ActionBarProps>> & {
     IconButton: import("react").ForwardRefExoticComponent<import("./ActionBar").ActionBarIconButtonProps & import("react").RefAttributes<unknown>>;
+    Button: import("react").ForwardRefExoticComponent<{
+        disabled?: boolean;
+    } & {
+        alignContent?: import("../Button/types").AlignContent;
+        icon?: React.FunctionComponent<import("@primer/octicons-react").IconProps> | React.ElementType | React.ReactElement<any> | null;
+        leadingVisual?: React.ElementType | React.ReactElement<any> | null;
+        trailingVisual?: React.ElementType | React.ReactElement<any> | null;
+        trailingAction?: React.ElementType | null;
+        children?: React.ReactNode;
+        count?: number | string;
+    } & {
+        variant?: import("../Button/types").VariantType;
+        size?: import("../Button/types").Size;
+        disabled?: boolean;
+        block?: boolean;
+        loading?: boolean;
+        loadingAnnouncement?: string;
+        inactive?: boolean;
+        labelWrap?: boolean;
+    } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<unknown>>;
     Divider: () => import("react").JSX.Element;
     Group: import("react").ForwardRefExoticComponent<{
         children?: import("react").ReactNode | undefined;

package/dist/ActionBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionBar/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAC,cAAc,EAAE,kBAAkB,EAAE,sBAAsB,EAAC,MAAM,aAAa,CAAA;AAE3F,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;CAKb,CAAA;AAEF,eAAe,SAAS,CAAA;AACxB,OAAO,EAAC,SAAS,EAAC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ActionBar/index.ts"],"names":[],"mappings":"AAQA,YAAY,EAAC,cAAc,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,sBAAsB,EAAC,MAAM,aAAa,CAAA;AAEjH,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAMb,CAAA;AAEF,eAAe,SAAS,CAAA;AACxB,OAAO,EAAC,SAAS,EAAC,CAAA"}

package/dist/ActionBar/index.js

@@ -1,7 +1,8 @@
-import { ActionBar as ActionBar$1, ActionBarMenu, ActionBarGroup, VerticalDivider, ActionBarIconButton } from './ActionBar.js';
+import { ActionBar as ActionBar$1, ActionBarMenu, ActionBarGroup, VerticalDivider, ActionBarButton, ActionBarIconButton } from './ActionBar.js';
 
 const ActionBar = Object.assign(ActionBar$1, {
   IconButton: ActionBarIconButton,
+  Button: ActionBarButton,
   Divider: VerticalDivider,
   Group: ActionBarGroup,
   Menu: ActionBarMenu

package/dist/Heading/Heading.js

@@ -1,3 +1,4 @@
+import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import React, { forwardRef } from 'react';
 import { useDevOnlyEffect } from '../internal/hooks/useDevOnlyEffect.js';
@@ -5,27 +6,76 @@ import classes from './Heading.module.css.js';
 import { jsx } from 'react/jsx-runtime';
 import { useMergedRefs } from '../hooks/useMergedRefs.js';
 
-const Heading = /*#__PURE__*/forwardRef(({
-  as: Component = 'h2',
-  className,
-  variant,
-  ...props
-}, forwardedRef) => {
+const Heading = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
+  const $ = c(15);
+  let className;
+  let props;
+  let t1;
+  let variant;
+  if ($[0] !== t0) {
+    ({
+      as: t1,
+      className,
+      variant,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = variant;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+    variant = $[4];
+  }
+  const Component = t1 === undefined ? "h2" : t1;
   const innerRef = React.useRef(null);
   const mergedRef = useMergedRefs(forwardedRef, innerRef);
-  useDevOnlyEffect(() => {
-    if (innerRef.current && !(innerRef.current instanceof HTMLHeadingElement)) {
-      // eslint-disable-next-line no-console
-      console.warn('This Heading component should be an instanceof of h1-h6');
-    }
-  }, [innerRef]);
-  return /*#__PURE__*/jsx(Component, {
-    className: clsx(className, classes.Heading),
-    "data-variant": variant,
-    "data-component": "Heading",
-    ...props,
-    ref: mergedRef
-  });
+  let t2;
+  let t3;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      if (innerRef.current && !(innerRef.current instanceof HTMLHeadingElement)) {
+        console.warn("This Heading component should be an instanceof of h1-h6");
+      }
+    };
+    t3 = [innerRef];
+    $[5] = t2;
+    $[6] = t3;
+  } else {
+    t2 = $[5];
+    t3 = $[6];
+  }
+  useDevOnlyEffect(t2, t3);
+  let t4;
+  if ($[7] !== className) {
+    t4 = clsx(className, classes.Heading);
+    $[7] = className;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== Component || $[10] !== mergedRef || $[11] !== props || $[12] !== t4 || $[13] !== variant) {
+    t5 = /*#__PURE__*/jsx(Component, {
+      className: t4,
+      "data-variant": variant,
+      "data-component": "Heading",
+      ...props,
+      ref: mergedRef
+    });
+    $[9] = Component;
+    $[10] = mergedRef;
+    $[11] = props;
+    $[12] = t4;
+    $[13] = variant;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
 });
 Heading.displayName = 'Heading';
 

package/dist/Link/Link.js

@@ -1,3 +1,4 @@
+import { c } from 'react-compiler-runtime';
 import { clsx } from 'clsx';
 import React from 'react';
 import { useDevOnlyEffect } from '../internal/hooks/useDevOnlyEffect.js';
@@ -7,34 +8,89 @@ import { jsx } from 'react/jsx-runtime';
 import { useMergedRefs } from '../hooks/useMergedRefs.js';
 
 const UnwrappedLink = (props, ref) => {
-  const {
-    as: Component = 'a',
-    className,
-    inline,
-    muted,
-    hoverColor,
-    ...restProps
-  } = props;
+  const $ = c(19);
+  let className;
+  let hoverColor;
+  let inline;
+  let muted;
+  let restProps;
+  let t0;
+  if ($[0] !== props) {
+    ({
+      as: t0,
+      className,
+      inline,
+      muted,
+      hoverColor,
+      ...restProps
+    } = props);
+    $[0] = props;
+    $[1] = className;
+    $[2] = hoverColor;
+    $[3] = inline;
+    $[4] = muted;
+    $[5] = restProps;
+    $[6] = t0;
+  } else {
+    className = $[1];
+    hoverColor = $[2];
+    inline = $[3];
+    muted = $[4];
+    restProps = $[5];
+    t0 = $[6];
+  }
+  const Component = t0 === undefined ? "a" : t0;
   const innerRef = React.useRef(null);
   const mergedRef = useMergedRefs(ref, innerRef);
-  useDevOnlyEffect(() => {
-    if (innerRef.current && !(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
-      // eslint-disable-next-line no-console
-      console.error('Error: Found `Link` component that renders an inaccessible element', innerRef.current, 'Please ensure `Link` always renders as <a> or <button>');
-    }
-  }, [innerRef]);
-  return /*#__PURE__*/jsx(Component, {
-    className: clsx(className, classes.Link),
-    "data-component": "Link",
-    "data-muted": muted,
-    "data-inline": inline,
-    "data-hover-color": hoverColor,
-    ...restProps,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    ref: mergedRef
-  });
+  let t1;
+  let t2;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      if (innerRef.current && !(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
+        console.error("Error: Found `Link` component that renders an inaccessible element", innerRef.current, "Please ensure `Link` always renders as <a> or <button>");
+      }
+    };
+    t2 = [innerRef];
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t1 = $[7];
+    t2 = $[8];
+  }
+  useDevOnlyEffect(t1, t2);
+  let t3;
+  if ($[9] !== className) {
+    t3 = clsx(className, classes.Link);
+    $[9] = className;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const t4 = mergedRef;
+  let t5;
+  if ($[11] !== Component || $[12] !== hoverColor || $[13] !== inline || $[14] !== muted || $[15] !== restProps || $[16] !== t3 || $[17] !== t4) {
+    t5 = /*#__PURE__*/jsx(Component, {
+      className: t3,
+      "data-component": "Link",
+      "data-muted": muted,
+      "data-inline": inline,
+      "data-hover-color": hoverColor,
+      ...restProps,
+      ref: t4
+    });
+    $[11] = Component;
+    $[12] = hoverColor;
+    $[13] = inline;
+    $[14] = muted;
+    $[15] = restProps;
+    $[16] = t3;
+    $[17] = t4;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  return t5;
 };
-UnwrappedLink.displayName = "UnwrappedLink";
 const LinkComponent = fixedForwardRef(UnwrappedLink);
 const Link = Object.assign(LinkComponent, {
   displayName: 'Link'

package/dist/NavList/NavList-b50d982b.css

@@ -0,0 +1,2 @@
+.prc-NavList-Heading--JQMj{margin-block-end:var(--base-size-8,.5rem);margin-inline-start:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-8,.5rem))}.prc-NavList-GroupHeading-mN50z>a{color:var(--fgColor-default,#1f2328);text-decoration:inherit}.prc-NavList-GroupHeading-mN50z>a:hover{-webkit-text-decoration:underline;text-decoration:underline}
+/*# sourceMappingURL=NavList-b50d982b.css.map */

package/dist/NavList/NavList-b50d982b.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/NavList/NavList.module.css.js"],"names":[],"mappings":"AAAA,2BACE,yCAAoC,CAEpC,wGACF,CAEA,kCACE,oCAA6B,CAC7B,uBACF,CAEA,wCACE,iCAA0B,CAA1B,yBACF","file":"NavList-b50d982b.css","sourcesContent":[".Heading {\n  margin-block-end: var(--base-size-8);\n  /* stylelint-disable-next-line primer/spacing */\n  margin-inline-start: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-8));\n}\n\n.GroupHeading > a {\n  color: var(--fgColor-default);\n  text-decoration: inherit;\n}\n\n.GroupHeading > a:hover {\n  text-decoration: underline;\n}\n"]}

package/dist/NavList/NavList.d.ts

@@ -3,9 +3,17 @@ import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../u
 import React from 'react';
 import type { ActionListTrailingActionProps, ActionListDividerProps, ActionListLeadingVisualProps, ActionListTrailingVisualProps, ActionListGroupHeadingProps } from '../ActionList';
 import { type PolymorphicProps } from '../utils/modern-polymorphic';
+import type { FCWithSlotMarker } from '../utils/types/Slots';
+type NavListHeadingLevels = 'h2' | 'h3';
 export type NavListProps = {
     children: React.ReactNode;
 } & React.ComponentProps<'nav'>;
+export type NavListHeadingProps = {
+    /** Semantic heading level for the NavList. Also sets the default level for child group headings, which render one level deeper. */
+    as?: NavListHeadingLevels;
+    /** Visually hide the heading while keeping it available to assistive technology. */
+    visuallyHidden?: boolean;
+} & React.ComponentPropsWithoutRef<'h2'>;
 export type NavListItemProps<As extends React.ElementType = React.ElementType> = PolymorphicProps<As, 'a', {
     children: React.ReactNode;
     defaultOpen?: boolean;
@@ -40,7 +48,8 @@ export type NavListGroupExpandProps = {
 export declare const GroupExpand: React.ForwardRefExoticComponent<NavListGroupExpandProps & React.RefAttributes<HTMLButtonElement>>;
 export type NavListGroupHeadingProps = ActionListGroupHeadingProps;
 export declare const NavList: React.ForwardRefExoticComponent<Omit<NavListProps, "ref"> & React.RefAttributes<HTMLElement>> & {
-    Description: import("..").FCWithSlotMarker<React.PropsWithChildren<import("..").ActionListDescriptionProps>>;
+    Description: FCWithSlotMarker<React.PropsWithChildren<import("..").ActionListDescriptionProps>>;
+    Heading: FCWithSlotMarker<NavListHeadingProps>;
     Item: (<As extends React.ElementType = "a">(props: import("../utils/modern-polymorphic").DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & {
         children: React.ReactNode;
         defaultOpen?: boolean;
@@ -53,10 +62,10 @@ export declare const NavList: React.ForwardRefExoticComponent<Omit<NavListProps,
         displayName: string;
     };
     SubNav: PolymorphicForwardRefComponent<"ul", NavListSubNavProps>;
-    LeadingVisual: import("..").FCWithSlotMarker<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
-    TrailingVisual: import("..").FCWithSlotMarker<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
+    LeadingVisual: FCWithSlotMarker<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
+    TrailingVisual: FCWithSlotMarker<React.PropsWithChildren<import("../ActionList/Visuals").VisualProps>>;
     TrailingAction: PolymorphicForwardRefComponent<"a" | "button", ActionListTrailingActionProps>;
-    Divider: import("..").FCWithSlotMarker<React.PropsWithChildren<ActionListDividerProps>>;
+    Divider: FCWithSlotMarker<React.PropsWithChildren<ActionListDividerProps>>;
     Group: React.FC<NavListGroupProps>;
     GroupExpand: React.ForwardRefExoticComponent<NavListGroupExpandProps & React.RefAttributes<HTMLButtonElement>>;
     GroupHeading: React.FC<ActionListGroupHeadingProps>;

package/dist/NavList/NavList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,IAAI,EAAC,MAAM,wBAAwB,CAAA;AAC3E,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAuB,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,EACV,6BAA6B,EAC7B,sBAAsB,EACtB,4BAA4B,EAC5B,6BAA6B,EAC7B,2BAA2B,EAC5B,MAAM,eAAe,CAAA;AAUtB,OAAO,EAAkB,KAAK,gBAAgB,EAAC,MAAM,6BAA6B,CAAA;AAKlF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAqB/B,MAAM,MAAM,gBAAgB,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,IAAI,gBAAgB,CAC/F,EAAE,EACF,GAAG,EACH;IACE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;IAC5F,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CACF,CAAA;AAkJD,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAwCD,MAAM,MAAM,yBAAyB,GAAG,4BAA4B,CAAA;AASpE,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,CAAA;AAQxD,MAAM,MAAM,0BAA0B,GAAG,6BAA6B,CAAA;AAStE,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,GAAG;IACpE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAqBD,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAA;IACZ,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,CAAA;IAC9B,aAAa,CAAC,EAAE,IAAI,CAAA;IACpB,cAAc,CAAC,EAAE,6BAA6B,CAAA;IAC9C,0BAA0B,CAAC,EAAE,MAAM,CAAA;CACpC,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAA;AAEtC,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,KAAK,CAAC,SAAS,CAAA;CAClD,CAAA;AAED,eAAO,MAAM,WAAW,mGAgFvB,CAAA;AAKD,MAAM,MAAM,wBAAwB,GAAG,2BAA2B,CAAA;AAqBlE,eAAO,MAAM,OAAO;;YA7WjB,EAAE,SAAS,KAAK,CAAC,WAAW;kBATjB,KAAK,CAAC,SAAS;sBACX,OAAO;eACd,MAAM;yBACI,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO;uBAC7E,MAAM;;;;;;;;;;;;;;CA6XvB,CAAA"}
+{"version":3,"file":"NavList.d.ts","sourceRoot":"","sources":["../../src/NavList/NavList.tsx"],"names":[],"mappings":"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"}