@brillout/docpress 0.9.8 → 0.10.0

package/MenuModal.tsx

@@ -1,21 +1,25 @@
 export { MenuModal }
-export { toggleMenuModal }
-export { openMenuModal }
-export { closeMenuModal }
-export { closeMenuModalWithDelay }
 
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { usePageContext } from './renderer/usePageContext'
-import { NavigationContent } from './navigation/Navigation'
 import { css } from './utils/css'
-import { containerQueryMobileLayout, containerQueryMobileMenu } from './Layout'
+import { blockMargin, containerQueryMobileLayout, containerQueryMobileMenu } from './Layout'
 import { NavSecondaryContent } from './NavSecondaryContent'
-import { getViewportWidth } from './utils/getViewportWidth'
 import { Style } from './utils/Style'
-
-let closeMenuModalPending: NodeJS.Timeout
+import { NavigationWithColumnLayout } from './MenuModal/NavigationWithColumnLayout'
+import { addListenerOpenMenuModal, closeMenuModal, openMenuModal } from './MenuModal/toggleMenuModal'
 
 function MenuModal({ isTopNav }: { isTopNav: boolean }) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [height, setHeight] = useState<number | undefined>(undefined)
+  useEffect(() => {
+    const updateHeight = () => {
+      const { scrollHeight } = ref!.current!.querySelector('.navigation-content')!
+      if (height !== scrollHeight) setHeight(scrollHeight + blockMargin)
+    }
+    addListenerOpenMenuModal(updateHeight)
+    updateHeight()
+  })
   return (
     <>
       <Style>{getStyle()}</Style>
@@ -25,51 +29,56 @@ function MenuModal({ isTopNav }: { isTopNav: boolean }) {
         style={{
           position: isTopNav ? 'absolute' : 'fixed',
           width: '100%',
-          /* Firefox doesn't support `dvh` yet: https://caniuse.com/?search=dvh
-           * - Always use `dvh` instead of `vh` once Firefox supports it.
-           * - We use dvh because of mobile: https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072
-          height: 'calc(100dvh - var(--nav-head-height))',
-          /*/
-          height: 'calc(100vh - var(--nav-head-height))',
-          maxHeight: 'calc(100dvh - var(--nav-head-height))',
-          //*/
           top: 'var(--nav-head-height)',
           left: 0,
           zIndex: 9999,
-          overflow: 'scroll',
+          overflowY: 'scroll',
           background: '#ededef',
-          transitionProperty: 'opacity',
+          transitionProperty: 'height',
+          transitionTimingFunction: 'ease',
           // https://github.com/brillout/docpress/issues/23
           // https://stackoverflow.com/questions/64514118/css-overscroll-behavior-contain-when-target-element-doesnt-overflow
           // https://stackoverflow.com/questions/9538868/prevent-body-from-scrolling-when-a-modal-is-opened
           overscrollBehavior: 'none',
+          height,
         }}
-        onMouseOver={openMenuModal}
+        ref={ref}
+        onMouseOver={() => openMenuModal()}
         onMouseLeave={closeMenuModal}
       >
         <div
           style={{
-            // Place <LinksBottom /> to the bottom
+            // Place <NavSecondary /> to the bottom
             display: 'flex',
             flexDirection: 'column',
-            minHeight: 'calc(100dvh - var(--nav-head-height))',
             justifyContent: 'space-between',
-            // We don't set `container` to parent beacuse of a Chrome bug (showing a blank <MenuModal>)
+            minHeight: '100%',
+            position: 'relative',
+            // We don't set `container` to the parent #menu-modal beacuse of a Chrome bug (showing a blank <MenuModal>)
             container: 'container-viewport / inline-size',
           }}
         >
           <Nav />
           <NavSecondary className="show-only-for-mobile" />
+          <BorderBottom />
         </div>
         <CloseButton className="show-only-for-mobile" />
       </div>
     </>
   )
 }
+function BorderBottom() {
+  return (
+    <div
+      id="border-bottom"
+      style={{ position: 'absolute', background: '#fff', height: 'var(--block-margin)', width: '100%', bottom: 0 }}
+    />
+  )
+}
 function Nav() {
   const pageContext = usePageContext()
   const navItems = pageContext.navItemsAll
-  return <NavigationContent columnLayout={true} navItems={navItems} />
+  return <NavigationWithColumnLayout navItems={navItems} />
 }
 function NavSecondary({ className }: { className: string }) {
   return (
@@ -78,7 +87,7 @@ function NavSecondary({ className }: { className: string }) {
       style={{
         display: 'flex',
         justifyContent: 'center',
-        marginTop: 20,
+        marginTop: 10,
       }}
     >
       <NavSecondaryContent style={{ height: 70 }} />
@@ -88,23 +97,45 @@ function NavSecondary({ className }: { className: string }) {
 
 function getStyle() {
   return css`
-html:not(.menu-modal-show) #menu-modal {
-  opacity: 0;
-  pointer-events: none;
-}
-@container container-viewport (min-width: ${containerQueryMobileLayout}px) {
-  #menu-modal .nav-item-level-3 {
-    display: none;
+@media(min-width: ${containerQueryMobileMenu + 1}px) {
+  #menu-modal {
+    ${/* Firefox doesn't support `dvh` yet: https://caniuse.com/?search=dvh */ ''}
+    ${/* Let's always use `dvh` instead of `vh` once Firefox supports it */ ''}
+    max-height:  calc(100vh - var(--nav-head-height));
+    ${/* We use dvh because of mobile */ ''}
+    ${/* https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser/72245072#72245072 */ ''}
+    max-height: calc(100dvh - var(--nav-head-height));
+  }
+  html:not(.menu-modal-show) #menu-modal {
+    height: 0 !important;
+  }
+  .show-only-for-mobile {
+    display: none !important;
   }
 }
 @media(max-width: ${containerQueryMobileMenu}px) {
+  #menu-modal {
+    height:  calc(100vh) !important;
+    height: calc(100dvh) !important;
+  }
+  #border-bottom {
+    display: none;
+  }
+  html:not(.menu-modal-show) #menu-modal {
+    opacity: 0;
+    pointer-events: none;
+  }
+  ${/* Disable scrolling of main view */ ''}
+  html.menu-modal-show {
+    overflow: hidden !important;
+  }
   #menu-modal {
     --nav-head-height: 0px !important;
   }
 }
-@media(min-width: ${containerQueryMobileMenu + 1}px) {
-  .show-only-for-mobile {
-    display: none !important;
+@container container-viewport (min-width: ${containerQueryMobileLayout}px) {
+  #menu-modal .nav-item-level-3 {
+    display: none;
   }
 }
 `
@@ -114,7 +145,7 @@ function CloseButton({ className }: { className: string }) {
   return (
     <div
       className={className}
-      onClick={toggleMenuModal}
+      onClick={closeMenuModal}
       style={{ position: 'fixed', top: 0, right: 0, zIndex: 10, padding: 11, cursor: 'pointer' }}
       aria-label={'Escape\nCtrl\xa0+\xa0M'}
       data-label-shift
@@ -142,45 +173,3 @@ function CloseButton({ className }: { className: string }) {
     </div>
   )
 }
-
-function toggleMenuModal() {
-  document.documentElement.classList.toggle('menu-modal-show')
-  if (
-    document.documentElement.classList.contains('menu-modal-show') &&
-    getViewportWidth() < containerQueryMobileLayout
-  ) {
-    autoScroll()
-  }
-}
-function autoScroll() {
-  const nav = document.querySelector('#menu-modal .navigation-content')!
-  const href = window.location.pathname
-  const navLinks = Array.from(nav.querySelectorAll(`a[href="${href}"]`))
-  const navLink = navLinks[0] as HTMLElement | undefined
-  if (!navLink) return
-  // None of the following seemes to be working: https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
-  if (findCollapsibleEl(navLink)!.classList.contains('collapsible-collapsed')) return
-  navLink.scrollIntoView({
-    behavior: 'instant',
-    block: 'center',
-    inline: 'start',
-  })
-}
-function findCollapsibleEl(navLink: HTMLElement | undefined) {
-  let parentEl: HTMLElement | null | undefined = navLink
-  while (parentEl) {
-    if (parentEl.classList.contains('collapsible')) return parentEl
-    parentEl = parentEl.parentElement
-  }
-  return null
-}
-function openMenuModal() {
-  clearTimeout(closeMenuModalPending)
-  document.documentElement.classList.add('menu-modal-show')
-}
-function closeMenuModal() {
-  document.documentElement.classList.remove('menu-modal-show')
-}
-function closeMenuModalWithDelay(delay: number) {
-  closeMenuModalPending = setTimeout(closeMenuModal, delay)
-}

package/{navigation/Navigation.css → NavItemComponent.css}

@@ -93,27 +93,5 @@
   top: 0;
   left: 0;
   z-index: 1;
-  content: "";
-}
-
-:has(> .category-border) {
-  position: relative
-}
-.category-border {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 3px;
-  z-index: 99;
-}
-
-:has(> .collapsible-icon) {
-  position: relative;
-}
-.collapsible-icon {
-  position: absolute;
-  top: calc(100% / 2 - 6px);
-  margin-left: 9px;
-  vertical-align: middle;
+  content: '';
 }

package/NavItemComponent.tsx

@@ -0,0 +1,149 @@
+export { NavItemComponent }
+export { getNavItemsWithComputed }
+export type { NavItem }
+export type { NavItemComputed }
+export type { ColumnMap }
+
+import React from 'react'
+import { assert, assertWarning, jsxToTextContent } from './utils/server'
+import './NavItemComponent.css'
+import { parseTitle } from './parseTitle'
+import './global.d.ts'
+
+type NavItemComputed = ReturnType<typeof getNavItemsWithComputed>[number]
+type NavItem = {
+  level: number
+  url?: string | null
+  color?: string
+  title: string
+  titleInNav: string
+  menuModalFullWidth?: true
+  isColumnEntry?: ColumnMap
+}
+type ColumnMap = Record<number, number>
+
+type PropsNavItem = PropsAnchor & PropsSpan
+type PropsAnchor = React.HTMLProps<HTMLAnchorElement>
+type PropsSpan = React.HTMLProps<HTMLSpanElement>
+function NavItemComponent({
+  navItem,
+  onClick,
+}: {
+  navItem: NavItemComputed
+  onClick?: PropsNavItem['onClick']
+}) {
+  assert([1, 2, 3, 4].includes(navItem.level), navItem)
+
+  const titleJsx = parseTitle(navItem.title)
+  const titleInNavJsx = parseTitle(navItem.titleInNav)
+
+  if (navItem.level === 1 || navItem.level === 4) {
+    assert(navItem.url === undefined)
+  } else {
+    const sectionTitle = jsxToTextContent(titleJsx)
+    assertWarning(
+      navItem.url,
+      [
+        `${jsxToTextContent(titleInNavJsx)} is missing a URL hash.`,
+        `Add a URL hash with: \`## ${sectionTitle}{#some-hash}\`.`,
+        /* TODO/eventually: not implemented yet.
+        `Use \`<h2 id="url-hash">${sectionTitle}</h2>\` instead of \`## ${sectionTitle}\`.`,
+        */
+      ].join(' '),
+    )
+  }
+
+  let children: JSX.Element = titleInNavJsx
+  if (navItem.level === 1) {
+    children = (
+      <>
+        {children}
+        <Chevron className="collapsible-icon" height={9} />
+      </>
+    )
+  }
+
+  const props: PropsNavItem = {
+    href: navItem.url ?? undefined,
+    children,
+    onClick,
+    className: [
+      'nav-item',
+      'nav-item-level-' + navItem.level,
+      navItem.url && navItem.isActive && ' is-active',
+      navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
+      navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
+    ]
+      .filter(Boolean)
+      .join(' '),
+  }
+  if (navItem.level === 1) {
+    props.style = {
+      ['--category-color']: navItem.color!,
+    }
+  }
+
+  if (navItem.level === 2 || navItem.level === 3) {
+    return <a {...props} />
+  } else {
+    return <span {...props} />
+  }
+}
+
+function getNavItemsWithComputed(navItems: NavItem[], currentUrl: string) {
+  let navItemIdx: number | undefined
+  const navItemsWithComputed = navItems.map((navItem, i) => {
+    assert([1, 2, 3, 4].includes(navItem.level), navItem)
+
+    const navItemPrevious = navItems[i - 1]
+    const navItemNext = navItems[i + 1]
+
+    let isActive = false
+    if (navItem.url === currentUrl) {
+      assert(navItem.level === 2, { currentUrl })
+      assert(navItemIdx === undefined)
+      navItemIdx = i
+      isActive = true
+    }
+
+    const isFirstOfItsKind = navItem.level !== navItemPrevious?.level
+    const isLastOfItsKind = navItem.level !== navItemNext?.level
+
+    const navItemComputed = {
+      ...navItem,
+      isActive,
+      isRelevant: false,
+      isFirstOfItsKind,
+      isLastOfItsKind,
+    }
+
+    return navItemComputed
+  })
+
+  // Set `isRelevant`
+  if (navItemIdx !== undefined) {
+    for (let i = navItemIdx; i >= 0; i--) {
+      const navItem = navItemsWithComputed[i]!
+      navItem.isRelevant = true
+      if (navItem.level === 1) break
+    }
+    for (let i = navItemIdx; i < navItemsWithComputed.length; i++) {
+      const navItem = navItemsWithComputed[i]!
+      if (navItem.level === 1) break
+      navItem.isRelevant = true
+    }
+  }
+
+  return navItemsWithComputed
+}
+
+function Chevron(props: React.HTMLProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 512 292.52" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fill="#aaa"
+        d="M10.725 82.42L230.125 261.82c6.8 6.8 16.2 10.7 25.9 10.7s19.1-3.9 25.9-10.7l219.4-179.4c14.3-14.3 14.3-37.4 0-51.7s-37.4-14.3-51.7 0l-193.6 153.6-193.6-153.6c-14.3-14.3-37.4-14.3-51.7 0s-14.3 37.5 0 51.7z"
+      />
+    </svg>
+  )
+}

package/components/Note.css

@@ -46,7 +46,6 @@ blockquote.custom-icon > .blockquote-content > :first-child {
 /*** Icon Positioning ***/
 /************************/
 blockquote > p:first-child::before,
-/* blockquote > p:first-of-type::before, */
 blockquote > div.paragraph:first-child::before {
   font-family: emoji;
   content: 'ℹ️';

package/config/resolveHeadingsData.ts

@@ -9,7 +9,7 @@ import type {
 } from '../types/Heading'
 import type { Config } from '../types/Config'
 import { getConfig } from './getConfig'
-import type { NavItem } from '../navigation/Navigation'
+import type { NavItem } from '../NavItemComponent'
 import type { LinkData } from '../components'
 import type { Exports, PageContextOriginal } from './resolvePageContext'
 import pc from '@brillout/picocolors'

package/css/code/diff.css

@@ -2,13 +2,15 @@
 
 pre.has-diff .diff.remove,
 /* For <FileRemoved> */
-.diff-entire-file-removed code {
+  /* biome-ignore format: */
+  .diff-entire-file-removed code {
   background-color: #fbdcda !important;
 }
 
 pre.has-diff .diff.add,
 /* For <FileAdded> */
-.diff-entire-file-added code {
+  /* biome-ignore format: */
+  .diff-entire-file-added code {
   background-color: #d7ecdf !important;
 }
 
@@ -19,14 +21,16 @@ pre.has-diff [data-line].diff,
 
 pre.has-diff .diff::before,
 /* For <FileRemoved> / <FileAdded> */
-.diff-entire-file [data-line]::before {
+  /* biome-ignore format: */
+  .diff-entire-file [data-line]::before {
   position: absolute;
   font-weight: 500;
 }
 
 pre.has-diff .diff.add::before,
 /* For <FileAdded> */
-.diff-entire-file-added [data-line]::before {
+  /* biome-ignore format: */
+  .diff-entire-file-added [data-line]::before {
   content: '+';
   color: #89d189;
   font-size: 1.2em;
@@ -36,7 +40,8 @@ pre.has-diff .diff.add::before,
 
 pre.has-diff .diff.remove::before,
 /* For <FileRemoved> */
-.diff-entire-file-removed [data-line]::before {
+  /* biome-ignore format: */
+  .diff-entire-file-removed [data-line]::before {
   content: '-';
   color: #f18383;
   font-size: 1.4em;

package/css/code.css

@@ -25,6 +25,6 @@ pre > code {
   font-size: 1em;
 }
 /* Workaround for shiki regression */
-pre>code:not([data-language]) {
+pre > code:not([data-language]) {
   padding: 16px !important;
 }

package/css/colorize-on-hover.css

@@ -4,14 +4,10 @@
  */
 @media (hover: hover) and (pointer: fine) {
   .colorize-on-hover:hover [class^='decolorize-'],
-  .colorize-on-hover:hover [class*=' decolorize-'],
-  html.menu-modal-show .menu-toggle [class^='decolorize-'],
-  html.menu-modal-show .menu-toggle [class*=' decolorize-'] {
+  .colorize-on-hover:hover [class*=' decolorize-'] {
     filter: grayscale(0) opacity(1) !important;
   }
-  .link-hover-animation a:hover,
-  .link-hover-animation .menu-toggle:hover,
-  html.menu-modal-show .menu-toggle {
+  .link-hover-animation a:hover {
     color: black !important;
     background-color: var(--active-color);
   }
@@ -26,13 +22,16 @@
 }
 [class^='decolorize-'],
 [class*=' decolorize-'] {
-  transition-property: filter;
+  transition-property: filter, opacity !important;
 }
 .link-hover-animation a,
 .menu-toggle {
   transition-property: color, background-color !important;
 }
 
+.decolorize-8 {
+  filter: grayscale(1) opacity(0.8);
+}
 .decolorize-7 {
   filter: grayscale(1) opacity(0.7);
 }

package/css/heading.css

@@ -1,6 +1,12 @@
-h1 { font-size: 2.30em }
-h2 { font-size: 1.80em }
-h3 { font-size: 1.25em }
+h1 {
+  font-size: 2.30em;
+}
+h2 {
+  font-size: 1.80em;
+}
+h3 {
+  font-size: 1.25em;
+}
 
 .doc-page h1 {
   margin-top: 20px;

package/css/index.css

@@ -7,3 +7,4 @@
 @import './code.css';
 @import './table.css';
 @import './tooltip.css';
+@import '@docsearch/css';

package/dist/NavItemComponent.d.ts

@@ -0,0 +1,39 @@
+export { NavItemComponent };
+export { getNavItemsWithComputed };
+export type { NavItem };
+export type { NavItemComputed };
+export type { ColumnMap };
+import React from 'react';
+import './NavItemComponent.css';
+import './global.d.ts';
+type NavItemComputed = ReturnType<typeof getNavItemsWithComputed>[number];
+type NavItem = {
+    level: number;
+    url?: string | null;
+    color?: string;
+    title: string;
+    titleInNav: string;
+    menuModalFullWidth?: true;
+    isColumnEntry?: ColumnMap;
+};
+type ColumnMap = Record<number, number>;
+type PropsNavItem = PropsAnchor & PropsSpan;
+type PropsAnchor = React.HTMLProps<HTMLAnchorElement>;
+type PropsSpan = React.HTMLProps<HTMLSpanElement>;
+declare function NavItemComponent({ navItem, onClick, }: {
+    navItem: NavItemComputed;
+    onClick?: PropsNavItem['onClick'];
+}): React.JSX.Element;
+declare function getNavItemsWithComputed(navItems: NavItem[], currentUrl: string): {
+    isActive: boolean;
+    isRelevant: boolean;
+    isFirstOfItsKind: boolean;
+    isLastOfItsKind: boolean;
+    level: number;
+    url?: string | null;
+    color?: string;
+    title: string;
+    titleInNav: string;
+    menuModalFullWidth?: true;
+    isColumnEntry?: ColumnMap;
+}[];

package/dist/NavItemComponent.js

@@ -0,0 +1,109 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+export { NavItemComponent };
+export { getNavItemsWithComputed };
+import React from 'react';
+import { assert, assertWarning, jsxToTextContent } from './utils/server';
+import './NavItemComponent.css';
+import { parseTitle } from './parseTitle';
+import './global.d.ts';
+function NavItemComponent(_a) {
+    var _b;
+    var _c;
+    var navItem = _a.navItem, onClick = _a.onClick;
+    assert([1, 2, 3, 4].includes(navItem.level), navItem);
+    var titleJsx = parseTitle(navItem.title);
+    var titleInNavJsx = parseTitle(navItem.titleInNav);
+    if (navItem.level === 1 || navItem.level === 4) {
+        assert(navItem.url === undefined);
+    }
+    else {
+        var sectionTitle = jsxToTextContent(titleJsx);
+        assertWarning(navItem.url, [
+            "".concat(jsxToTextContent(titleInNavJsx), " is missing a URL hash."),
+            "Add a URL hash with: `## ".concat(sectionTitle, "{#some-hash}`."),
+            /* TODO/eventually: not implemented yet.
+            `Use \`<h2 id="url-hash">${sectionTitle}</h2>\` instead of \`## ${sectionTitle}\`.`,
+            */
+        ].join(' '));
+    }
+    var children = titleInNavJsx;
+    if (navItem.level === 1) {
+        children = (React.createElement(React.Fragment, null,
+            children,
+            React.createElement(Chevron, { className: "collapsible-icon", height: 9 })));
+    }
+    var props = {
+        href: (_c = navItem.url) !== null && _c !== void 0 ? _c : undefined,
+        children: children,
+        onClick: onClick,
+        className: [
+            'nav-item',
+            'nav-item-level-' + navItem.level,
+            navItem.url && navItem.isActive && ' is-active',
+            navItem.isFirstOfItsKind && 'nav-item-first-of-its-kind',
+            navItem.isLastOfItsKind && 'nav-item-last-of-its-kind',
+        ]
+            .filter(Boolean)
+            .join(' '),
+    };
+    if (navItem.level === 1) {
+        props.style = (_b = {},
+            _b['--category-color'] = navItem.color,
+            _b);
+    }
+    if (navItem.level === 2 || navItem.level === 3) {
+        return React.createElement("a", __assign({}, props));
+    }
+    else {
+        return React.createElement("span", __assign({}, props));
+    }
+}
+function getNavItemsWithComputed(navItems, currentUrl) {
+    var navItemIdx;
+    var navItemsWithComputed = navItems.map(function (navItem, i) {
+        assert([1, 2, 3, 4].includes(navItem.level), navItem);
+        var navItemPrevious = navItems[i - 1];
+        var navItemNext = navItems[i + 1];
+        var isActive = false;
+        if (navItem.url === currentUrl) {
+            assert(navItem.level === 2, { currentUrl: currentUrl });
+            assert(navItemIdx === undefined);
+            navItemIdx = i;
+            isActive = true;
+        }
+        var isFirstOfItsKind = navItem.level !== (navItemPrevious === null || navItemPrevious === void 0 ? void 0 : navItemPrevious.level);
+        var isLastOfItsKind = navItem.level !== (navItemNext === null || navItemNext === void 0 ? void 0 : navItemNext.level);
+        var navItemComputed = __assign(__assign({}, navItem), { isActive: isActive, isRelevant: false, isFirstOfItsKind: isFirstOfItsKind, isLastOfItsKind: isLastOfItsKind });
+        return navItemComputed;
+    });
+    // Set `isRelevant`
+    if (navItemIdx !== undefined) {
+        for (var i = navItemIdx; i >= 0; i--) {
+            var navItem = navItemsWithComputed[i];
+            navItem.isRelevant = true;
+            if (navItem.level === 1)
+                break;
+        }
+        for (var i = navItemIdx; i < navItemsWithComputed.length; i++) {
+            var navItem = navItemsWithComputed[i];
+            if (navItem.level === 1)
+                break;
+            navItem.isRelevant = true;
+        }
+    }
+    return navItemsWithComputed;
+}
+function Chevron(props) {
+    return (React.createElement("svg", __assign({ viewBox: "0 0 512 292.52", xmlns: "http://www.w3.org/2000/svg" }, props),
+        React.createElement("path", { fill: "#aaa", d: "M10.725 82.42L230.125 261.82c6.8 6.8 16.2 10.7 25.9 10.7s19.1-3.9 25.9-10.7l219.4-179.4c14.3-14.3 14.3-37.4 0-51.7s-37.4-14.3-51.7 0l-193.6 153.6-193.6-153.6c-14.3-14.3-37.4-14.3-51.7 0s-14.3 37.5 0 51.7z" })));
+}