@leabankab/component-library 8.8.0 → 8.9.1

package/dist/utils/{formatDecimalString.d.ts → format-decimal-string.d.ts}

@@ -1,4 +1,4 @@
-import { FormatDecimals } from './formatDecimal';
+import { FormatDecimals } from './format-decimal';
 /**
  * Formats a number to a fixed number of decimal places (default is 2).
  *

package/dist/utils/index.d.ts

@@ -1,5 +1,5 @@
-export * from './downloadFile';
-export * from './formatDecimal';
-export * from './formatDecimalString';
-export * from './formatPercentage';
-export * from './parseExpirationDate';
+export * from './download-file';
+export * from './format-decimal';
+export * from './format-decimal-string';
+export * from './format-percentage';
+export * from './parse-expiration-date';

package/dist/website/alert-banner/alert-banner.d.ts

@@ -0,0 +1,48 @@
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+/** A title, a text or both: a banner with neither does not compile. */
+type AlertBannerContent = {
+    /** The title, 14px semibold, a heading (`titleRender`). */
+    title: ReactNode;
+    /**
+     * The notice. A string becomes a `<p>`; anything else (the CMS's
+     * paragraphs, with links) goes in a `<div>`.
+     */
+    text?: ReactNode;
+} | {
+    title?: ReactNode;
+    text: ReactNode;
+};
+export type AlertBannerProps = Omit<ComponentProps<"div">, "children" | "title"> & AlertBannerContent & {
+    /**
+     * The element of the title.
+     * @default <h2 />
+     */
+    titleRender?: ReactElement;
+    /**
+     * The picture before the text, 48px, decoration: the CMS's image with
+     * `alt=""`, or an icon. Left out, Lucide's `TriangleAlert`; `null` for
+     * none.
+     */
+    icon?: ReactNode;
+};
+/**
+ * The website's notice (`AlertBanner`, the global one at the foot of every
+ * page and the `sections.alert-banner` block): a 48px icon beside a short
+ * title and a text, in the colour of the `Section` it sits in.
+ *
+ * ```tsx
+ * <Section surface="muted" spacingTop="sm" spacingBottom="sm">
+ *   <AlertBanner
+ *     title="Viktig informasjon"
+ *     text="Lea Bank ringer deg aldri for å be om BankID, passord eller kortopplysninger."
+ *   />
+ * </Section>
+ * ```
+ *
+ * A notice that stays on the page, not a message that has just appeared: it
+ * has no `role="alert"` and is not announced, and it has no close button.
+ * For a status message over the page, use `GlobalAlert`. The icon and the
+ * text are 32px apart (16 below 768px); title and text are 14px.
+ */
+export declare function AlertBanner({ title, text, titleRender, icon, className, ...rest }: AlertBannerProps): import("react").JSX.Element;
+export {};

package/dist/website/arrow-reveal-link.d.ts

@@ -0,0 +1,22 @@
+import { useRender } from '@base-ui/react/use-render';
+export type ArrowRevealLinkProps = useRender.ComponentProps<"a"> & {
+    /**
+     * `"md"`: the header's menus, 16px, the arrow growing in on hover. `"lg"`:
+     * the `SideNav`, 18px, underlined on hover, the arrow before the link to
+     * the current page (`aria-current="page"`) only.
+     * @default "md"
+     */
+    size?: "md" | "lg";
+};
+/**
+ * Internal: Figma's `.ArrowRevealLink`. At `md`, the links of the header's
+ * menus: a plain 16px link whose purple arrow grows in on hover while the
+ * text turns purple and steps aside, as the website's `DropdownLink`. At
+ * `lg`, the links of `SideNav`: 18px, underlined on hover, and the arrow
+ * marks the current page, as the website's `SidebarLink`. Not exported.
+ *
+ * Renders an `<a>`, or the element passed to `render`: a router link, or the
+ * `NavigationMenu.Link` of the desktop menu, which renders the page's own
+ * link in turn.
+ */
+export declare function ArrowRevealLink({ render, className, children, size, ...rest }: ArrowRevealLinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/{use-carousel.d.ts → carousel/use-carousel.d.ts}

@@ -22,7 +22,9 @@ export type CarouselState = {
  * The state of a scroll-snap track, for `Carousel`: the places it can stop at
  * (a slide's start, or the end of the track for the last slides, which never
  * reach the start), the one it is at, and `goTo` to scroll to another. The
- * browser does the scrolling and the swiping; this only measures. Internal.
+ * browser does the swiping and the scrolling by hand; `goTo` scrolls over
+ * `SCROLL_DURATION` itself, since the browser's smooth scroll can't be timed.
+ * Internal.
  *
  * Before it has measured (on the server, and in the first render), it
  * assumes the website's 2.2 slides from 1024px: one place per slide but the

package/dist/website/{expanding-cards-item.d.ts → expanding-cards/expanding-cards-item.d.ts}

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
 import { ReactElement, ReactNode, Ref } from 'react';
-import { SurfaceRoles } from '../components/color-roles';
+import { SurfaceRoles } from '../../components/color-roles';
 export type ExpandingCardsItemSurface = SurfaceRoles<"base" | "subtle" | "muted" | "contrast" | "contrast-accent">;
 /** `alt` is required with a photo, `""` when it is decoration. */
 type ExpandingCardsItemImage = {

package/dist/website/index.d.ts

@@ -6,28 +6,32 @@
  * which the entry imports itself.
  *
  * The primitives and cards the sections hold (`Panel`, `FeaturedImage`,
- * `MediaCard` and the rest) stay in the main entry. Import what this folder
- * shares with the main entry from "../index" (see vite.website.config.ts and
- * tests/entries.test.tsx).
+ * `MediaCard` and the rest) stay in the main entry. Each section has a folder
+ * of its own and imports what it shares with the main entry from
+ * "../../index" (see vite.website.config.ts and tests/entries.test.tsx).
  *
  * Names are flat (`SectionHeader`, not `Section.Header`): the website renders
  * these from server components, which can't dot into a client bundle.
  */
-export * from './brand-letters';
-export * from './calculator';
-export * from './carousel';
-export * from './cta-banner';
-export * from './expanding-cards';
-export * from './expanding-cards-item';
-export * from './hero';
-export * from './hero-service-grid';
-export * from './navigation-grid';
-export * from './partner-list';
-export * from './payment-feature';
-export * from './promo-grid';
-export * from './section';
-export * from './section-header';
-export * from './service-card-grid';
-export * from './split-content';
-export * from './stats';
-export * from './testimonials';
+export * from './alert-banner/alert-banner';
+export * from './brand-letters/brand-letters';
+export * from './calculator/calculator';
+export * from './carousel/carousel';
+export * from './cta-banner/cta-banner';
+export * from './expanding-cards/expanding-cards';
+export * from './expanding-cards/expanding-cards-item';
+export * from './hero/hero';
+export * from './hero-service-grid/hero-service-grid';
+export * from './navigation-grid/navigation-grid';
+export * from './partner-list/partner-list';
+export * from './payment-feature/payment-feature';
+export * from './promo-grid/promo-grid';
+export * from './section/section';
+export * from './section-header/section-header';
+export * from './service-card-grid/service-card-grid';
+export * from './side-nav/side-nav';
+export * from './site-footer/site-footer';
+export * from './site-header/site-header';
+export * from './split-content/split-content';
+export * from './stats/stats';
+export * from './testimonials/testimonials';

package/dist/website/{payment-feature.d.ts → payment-feature/payment-feature.d.ts}

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-import { PanelProps } from '../index';
+import { PanelProps } from '../../index';
 export type PaymentFeatureImagePosition = "start" | "end";
 /** A logo in the row at the top. */
 export type PaymentFeatureLogo = {

package/dist/website/{section.d.ts → section/section.d.ts}

@@ -1,6 +1,6 @@
 import { useRender } from '@base-ui/react/use-render';
 import { Ref } from 'react';
-import { SurfaceRoles } from '../components/color-roles';
+import { SurfaceRoles } from '../../components/color-roles';
 export type SectionSurface = SurfaceRoles<"base" | "subtle" | "muted" | "contrast" | "contrast-accent">;
 export type SectionSpacing = "none" | "sm" | "lg";
 export type SectionWidth = "full" | "wide" | "narrow";

package/dist/website/side-nav/side-nav.d.ts

@@ -0,0 +1,57 @@
+import { ComponentProps, ReactNode } from 'react';
+import { SiteHeaderLink } from '../site-header/site-header';
+/**
+ * A link in the side navigation: `{ label, href }`, or `{ label, render }`
+ * with a router link carrying its own `href`. A link without either does not
+ * compile.
+ */
+export type SideNavItem = SiteHeaderLink & {
+    /**
+     * This page: the link is marked `aria-current="page"` and has the arrow
+     * before it.
+     */
+    current?: boolean;
+};
+export type SideNavProps = Omit<ComponentProps<"div">, "children"> & {
+    /** The pages beside this one (the website's child pages), in order. */
+    items: SideNavItem[];
+    /**
+     * The name of the navigation, read out with it: the part of the site it
+     * covers ("Investor Relations"). Left out, "Sidemeny".
+     */
+    label?: string;
+    /** The `Breadcrumbs` at the top of the content panel. */
+    breadcrumbs?: ReactNode;
+    /** The page's content, in the white panel. */
+    children: ReactNode;
+};
+/**
+ * The website's two-column page (`TwoColumnLayout`, the Investor Relations
+ * pages of leabank.no): a beige sidebar of links to the pages of one part of
+ * the site, beside a white panel with the breadcrumbs and the content. Put it
+ * in a `Section` (grey, `spacingTop` and `spacingBottom` `sm`, as on the
+ * website).
+ *
+ * ```tsx
+ * <Section surface="subtle" spacingTop="sm" spacingBottom="sm">
+ *   <SideNav
+ *     label="Investor Relations"
+ *     items={[
+ *       { label: "About Lea Bank", render: <NextLink href="/om-oss/investor-relations/about-lea-bank" />, current: true },
+ *       { label: "Dividend policy", render: <NextLink href="/om-oss/investor-relations/dividend-policy" /> },
+ *     ]}
+ *     breadcrumbs={<Breadcrumbs items={crumbs} />}
+ *   >
+ *     <RichText>…</RichText>
+ *   </SideNav>
+ * </Section>
+ * ```
+ *
+ * From 1024px the sidebar is 280px wide (360 from 1312px), 16 from the
+ * panel, and stays in view while the page scrolls (32 from the top); below
+ * 1024px it is a block over the panel, 32 apart. The sidebar is a `nav`
+ * named by `label`; the link to this page is marked `aria-current="page"`
+ * and has a purple arrow before it, the others underline on hover. The panel
+ * is a `Panel size="sm"`: what is in it stacks 16 apart.
+ */
+export declare function SideNav({ items, label, breadcrumbs, children, className, ...rest }: SideNavProps): import("react").JSX.Element;

package/dist/website/side-nav/use-side-nav-labels.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The words of `SideNav`: the name of its navigation when the page gives
+ * none, told apart from the header's "Hovedmeny".
+ */
+export declare const useSideNavLabels: () => Record<"navigation", string>;

package/dist/website/site-footer/flags.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from 'react';
+type FlagProps = Omit<ComponentProps<"svg">, "children">;
+export declare function FlagNorway(props: FlagProps): import("react").JSX.Element;
+export declare function FlagSweden(props: FlagProps): import("react").JSX.Element;
+export declare function FlagFinland(props: FlagProps): import("react").JSX.Element;
+export declare function FlagSpain(props: FlagProps): import("react").JSX.Element;
+export {};

package/dist/website/site-footer/site-footer.d.ts

@@ -0,0 +1,122 @@
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+import { SiteHeaderLink } from '../site-header/site-header';
+/**
+ * A link in the footer: `{ label, href }`, or `{ label, render }` with a
+ * router link carrying its own `href`. A link without either does not
+ * compile. A link that opens in a new tab is a `render` with `target`.
+ */
+export type SiteFooterLink = SiteHeaderLink;
+/** A column of links under a title ("Tjenester", "Support", "Juridisk"). */
+export type SiteFooterColumn = {
+    /** The title over the links, a heading (`titleRender`). */
+    title: ReactNode;
+    links: SiteFooterLink[];
+};
+/** A link to one of the bank's pages on a social network. */
+export type SiteFooterSocialLink = SiteFooterLink & {
+    /**
+     * The network's logo, 24px: an `<img>` or `next/image` with `alt=""`, as
+     * the label names the link.
+     */
+    icon: ReactNode;
+};
+/** The four markets, by the codes of the languages they speak. */
+export type SiteFooterMarketCode = "no" | "se" | "fi" | "es";
+/** The list of markets: the select that takes the visitor to another one. */
+export type SiteFooterMarket = {
+    /** The market of this site, shown with its flag. */
+    value: SiteFooterMarketCode;
+    /**
+     * Called with the market the visitor picks. The website goes to that
+     * market's site (`https://leabank.se/`).
+     */
+    onValueChange: (value: SiteFooterMarketCode) => void;
+    /**
+     * The markets to choose from, sorted by name in the page's language.
+     * @default ["no", "se", "fi", "es"]
+     */
+    options?: readonly SiteFooterMarketCode[];
+    /** The title over the select, which names it. Left out, "Marked". */
+    title?: ReactNode;
+};
+/** The links to the bank on social networks, under a title. */
+export type SiteFooterSocial = {
+    /** The title over the links. Left out, "Sosiale medier". */
+    title?: ReactNode;
+    links: SiteFooterSocialLink[];
+};
+export type SiteFooterProps = Omit<ComponentProps<"footer">, "children"> & {
+    /**
+     * The white logo, an `<img>` or `next/image`, 140px wide. It is the
+     * content of the link to the start page, named "Lea Bank, forside" as in
+     * `SiteHeader`, so the image can take `alt=""`.
+     */
+    logo: ReactNode;
+    /**
+     * The link to the start page, a router link carrying its own `href`:
+     * `<NextLink href="/" />`.
+     * @default <a href="/" />
+     */
+    homeRender?: ReactElement;
+    /** The columns of links, in order. */
+    columns?: SiteFooterColumn[];
+    /** The market select, at the top of the last column. */
+    market?: SiteFooterMarket;
+    /** The social links, at the foot of the last column. */
+    social?: SiteFooterSocial;
+    /**
+     * Called by the button that opens the cookie settings, which shows only
+     * with it: `openCookieSettings` from
+     * `@leabankab/component-library/cookie-consent`, or the website's own.
+     */
+    onOpenCookieSettings?: () => void;
+    /**
+     * The line at the very end. A string becomes a `<p>`; anything else (the
+     * CMS's paragraphs) goes in a `<div>`.
+     */
+    copyright?: ReactNode;
+    /**
+     * The element of every title in the footer.
+     * @default <h2 />
+     */
+    titleRender?: ReactElement;
+};
+/**
+ * The website's footer, as at the end of every page of leabank.no: the
+ * white logo, the columns of links, the market select and the social links
+ * on a near-black band, then a line, the cookie settings and the copyright.
+ *
+ * ```tsx
+ * <SiteFooter
+ *   logo={<img src="/lea-bank-white.svg" alt="" />}
+ *   homeRender={<NextLink href="/" />}
+ *   columns={[
+ *     {
+ *       title: "Tjenester",
+ *       links: [{ label: "Lån", render: <NextLink href="/lan" /> }],
+ *     },
+ *   ]}
+ *   market={{ value: "no", onValueChange: (market) => location.assign(sites[market]) }}
+ *   social={{
+ *     links: [
+ *       {
+ *         label: "Facebook",
+ *         icon: <img src="/facebook.svg" alt="" />,
+ *         render: <a href="https://www.facebook.com/leabank" target="_blank" rel="noopener noreferrer" />,
+ *       },
+ *     ],
+ *   }}
+ *   onOpenCookieSettings={openCookieSettings}
+ *   copyright="Copyright © 2005–2026 Lea Bank AB NUF (publ)."
+ * />
+ * ```
+ *
+ * The columns share the width, as many 140px columns as fit beside the logo
+ * from 1024px (five at 1440px), under it below; two columns below 768px and
+ * one below 640px. The market select is Paloma's `Select` at `size="sm"`,
+ * each market with its flag, named by the title over it; picking a market
+ * calls `onValueChange` and goes nowhere by itself. `market.onValueChange`
+ * and `onOpenCookieSettings` are functions, so a server component renders
+ * the footer through a client component of its own.
+ */
+export declare function SiteFooter({ logo, homeRender, columns, market, social, onOpenCookieSettings, copyright, titleRender, className, ...rest }: SiteFooterProps): import("react").JSX.Element;

package/dist/website/site-footer/use-site-footer-labels.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The words of `SiteFooter`: the titles of the market and social columns
+ * when the page gives none, and the button that opens the cookie settings.
+ * `collation` is the language the markets are sorted in, as a BCP 47 tag
+ * for `Intl.Collator`. The link round the logo takes `SiteHeader`'s name.
+ */
+export declare const useSiteFooterLabels: () => Record<"collation" | "market" | "social" | "cookieSettings", string>;

package/dist/website/site-header/site-header-menu.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { SiteHeaderItem } from './site-header';
+type SiteHeaderMenuProps = {
+    items: SiteHeaderItem[];
+    /** The link around the logo, shown in the menu's own bar too. */
+    home: ReactNode;
+    /** The account link, shown in the menu's own bar too. */
+    account: ReactNode;
+};
+/**
+ * Internal to `SiteHeader`: the menu below 1312px. The button in the bar
+ * opens a dialog that drops in from the top (Base UI's `Drawer`): focus
+ * moves into it and stays there, the page behind it does not scroll, and
+ * Escape, the close button, a swipe up or a press outside closes it. The
+ * dialog starts with a bar of its own, the bar of the header with a close
+ * button where the menu button was, so the visitor sees the same bar and
+ * always has a visible way out. Its links are not in the page while it is
+ * closed, and following one closes it.
+ */
+export declare function SiteHeaderMenu({ items, home, account }: SiteHeaderMenuProps): import("react").JSX.Element;
+export {};

package/dist/website/site-header/site-header.d.ts

@@ -0,0 +1,141 @@
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+/**
+ * Where a link goes: `href`, or a router link in `render` that carries its
+ * own (`<NextLink href="/lan" />`). A link without either does not compile.
+ */
+export type SiteHeaderLinkTarget = {
+    /** Where the link goes. */
+    href: string;
+    /**
+     * A router link to render instead of an `<a>`, carrying its own
+     * `href`, and any `target` or `data-` attribute the page wants on it.
+     */
+    render?: ReactElement;
+} | {
+    href?: undefined;
+    render: ReactElement;
+};
+/** A link in the header or in one of its menus. */
+export type SiteHeaderLink = SiteHeaderLinkTarget & {
+    /** The text of the link. */
+    label: ReactNode;
+};
+/**
+ * A group of links in a menu: the website's "Sublink", a column of the
+ * dropdown. The menus on leabank.no have one each.
+ */
+export type SiteHeaderGroup = {
+    /**
+     * The small title over the links on a wide screen ("Låneprodukter"). It
+     * names the list; the phone menu leaves it out, as the website's.
+     */
+    title?: ReactNode;
+    /** The links, each with the arrow that grows in on hover. */
+    links: SiteHeaderLink[];
+    /**
+     * The last link, under a short purple line, with an arrow pointing up and
+     * to the right ("Se våre lån").
+     */
+    cta?: SiteHeaderLink;
+};
+/**
+ * A top-level item: a link, or a menu of `groups`. With a menu the item is a
+ * button that opens it, so its own page is not a click on the item any more:
+ * link to it in the menu (the website's menus do, with the `cta` or a link).
+ * Given `href` or `render`, a menu item's own page is the first link of its
+ * submenu on a phone, in small bold type, as on the website.
+ */
+export type SiteHeaderItem = (SiteHeaderLink & {
+    groups?: undefined;
+}) | {
+    /** The text of the item. */
+    label: ReactNode;
+    /** The item's own page, the first link of its submenu on a phone. */
+    href?: string;
+    /** A router link to the item's own page, instead of `href`. */
+    render?: ReactElement;
+    /** The menu that opens from the item. */
+    groups: SiteHeaderGroup[];
+};
+/** The account link, a round icon beside the call to action. */
+export type SiteHeaderAccount = SiteHeaderLinkTarget & {
+    /**
+     * The link's name, read out in place of the icon ("Logg inn", "Min side").
+     */
+    label: string;
+    /**
+     * The icon, 40px (32px below 1312px). Left out, Lucide's
+     * `CircleUserRound`; the website passes its own image with `alt=""`.
+     */
+    icon?: ReactNode;
+};
+export type SiteHeaderProps = Omit<ComponentProps<"header">, "children"> & {
+    /**
+     * The logo, an `<img>` or `next/image`, 38px tall (32px below 1312px). It
+     * is the content of the link to the start page, which is named "Lea Bank,
+     * forside" by the header, so the image can take `alt=""`.
+     */
+    logo: ReactNode;
+    /**
+     * The link to the start page, a router link carrying its own `href`:
+     * `<NextLink href="/" />`.
+     * @default <a href="/" />
+     */
+    homeRender?: ReactElement;
+    /** The items at the start of the row (Lån, Sparing, Forsikring …). */
+    items: SiteHeaderItem[];
+    /**
+     * The items pushed to the end of the row (Kundeservice, Om oss). On a
+     * phone they follow `items` in the menu.
+     */
+    endItems?: SiteHeaderItem[];
+    /** The account link, an icon at the end of the bar at every width. */
+    account?: SiteHeaderAccount;
+    /**
+     * The call to action at the end of the bar from 1312px, an
+     * `ActionButton size="sm"` ("Min side"). Below 1312px it is left out, as
+     * on the website.
+     */
+    action?: ReactNode;
+};
+/**
+ * The website's header, as on every page of leabank.no: the logo, the main
+ * navigation, the account link and a call to action on a white bar, with
+ * the brand stripe under it.
+ *
+ * ```tsx
+ * <SiteHeader
+ *   logo={<img src="/lea-bank.svg" alt="" />}
+ *   homeRender={<NextLink href="/" />}
+ *   items={[
+ *     {
+ *       label: "Lån",
+ *       render: <NextLink href="/lan" />,
+ *       groups: [
+ *         {
+ *           title: "Låneprodukter",
+ *           links: [{ label: "Forbrukslån", render: <NextLink href="/lan/forbrukslan" /> }],
+ *           cta: { label: "Se våre lån", render: <NextLink href="/lan" /> },
+ *         },
+ *       ],
+ *     },
+ *     { label: "Økonomiguiden", render: <NextLink href="/okonomiguiden" /> },
+ *   ]}
+ *   endItems={[{ label: "Kundeservice", href: "/kundeservice" }]}
+ *   account={{ label: "Logg inn", href: "https://secure.leabank.no/" }}
+ *   action={<ActionButton size="sm" render={<a href="https://secure.leabank.no/" />}>Min side</ActionButton>}
+ * />
+ * ```
+ *
+ * From 1312px the bar is 72px tall: the items are 40px pills that turn grey
+ * on hover, and an item with `groups` opens its menu, a white panel with the
+ * website's soft shadow, on hover, on a click and with the arrow-down key
+ * (Base UI's `NavigationMenu`: links, not a `role="menu"`; Escape closes it,
+ * and the focus moves into it with Tab). Below 1312px the bar is 55px tall
+ * with a menu button, the logo in the middle and the account icon; the menu
+ * drops in from under the bar as a dialog (Base UI's `Drawer` from the top),
+ * the items 72px rows and the menus disclosures, one open at a time. The
+ * menu closes when a link in it is followed, and its links are not in the
+ * page while it is closed.
+ */
+export declare function SiteHeader({ logo, homeRender, items, endItems, account, action, className, ...rest }: SiteHeaderProps): import("react").JSX.Element;

package/dist/website/site-header-link.d.ts

@@ -0,0 +1,16 @@
+import { ComponentProps, ReactElement } from 'react';
+import { SiteHeaderGroup, SiteHeaderItem } from './site-header/site-header';
+/**
+ * Internal to `SiteHeader`: a link to `href`, or the router link in
+ * `render`, which carries its own.
+ */
+export declare function SiteLink({ href, render, ...rest }: Omit<ComponentProps<"a">, "href"> & {
+    href?: string;
+    render?: ReactElement;
+}): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+/** Whether an item opens a menu: it has a group to show. */
+export declare const hasMenu: (item: SiteHeaderItem) => item is Extract<SiteHeaderItem, {
+    groups: SiteHeaderGroup[];
+}>;
+/** Whether an item has a page of its own to link to. */
+export declare const hasPage: (item: SiteHeaderItem) => boolean;

package/dist/website/use-site-header-labels.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The words of `SiteHeader`: the name of the navigation, the menu button on
+ * a phone and the button that closes the menu, and the name of the link
+ * around the logo. The link's name starts with the words in the logo, so
+ * what a voice user reads out matches what they see.
+ */
+export declare const useSiteHeaderLabels: () => Record<"menu" | "navigation" | "home" | "closeMenu", string>;