@leabankab/component-library 8.7.0 → 8.9.0

package/dist/website/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/brand-letters.d.ts

@@ -0,0 +1,40 @@
+import { useRender } from '@base-ui/react/use-render';
+import { Ref } from 'react';
+/** The video in one letter. */
+export type BrandLettersVideo = {
+    /** The video file. It plays without sound, so it should need none. */
+    src: string;
+    /** A still to show before the video starts, and while it is paused. */
+    poster?: string;
+};
+export type BrandLettersProps = Omit<useRender.ComponentProps<"div">, "ref" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The three videos, in the L, the E and the A. */
+    videos: readonly [BrandLettersVideo, BrandLettersVideo, BrandLettersVideo];
+};
+/**
+ * The letters L, E and A of the logo side by side, each filled with a silent
+ * video in a loop, as the brand block of leabank.no.
+ *
+ * ```tsx
+ * <Section>
+ *   <BrandLetters
+ *     videos={[
+ *       { src: "/video/l.mp4", poster: "/video/l.jpg" },
+ *       { src: "/video/e.mp4", poster: "/video/e.jpg" },
+ *       { src: "/video/a.mp4", poster: "/video/a.jpg" },
+ *     ]}
+ *   />
+ * </Section>
+ * ```
+ *
+ * The letters share the width they are given, each 437 : 510. The videos
+ * start on their own once the page has loaded, unless the visitor has asked
+ * for reduced motion: then they wait for the button. One button under the
+ * letters pauses and plays all three, named "Sett videoene på pause" or
+ * "Spill av videoene" in the `LeaProvider` language, since moving content
+ * that plays on its own needs a way to stop it. The videos are decoration
+ * and hidden from screen readers.
+ */
+export declare function BrandLetters({ videos, render, ref, className, ...rest }: BrandLettersProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/calculator.d.ts

@@ -0,0 +1,58 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode, Ref } from 'react';
+/** A figure the calculator works out, shown in the summary column. */
+export type CalculatorResult = {
+    /** What the figure is: "Beregnet sparesaldo". */
+    label: ReactNode;
+    /** The figure, written out: "399 418 kr". */
+    value: ReactNode;
+};
+export type CalculatorProps = Omit<useRender.ComponentProps<"div">, "ref" | "children" | "results"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The heading above the calculator: a `SectionHeader`. */
+    header?: ReactNode;
+    /**
+     * The inputs, in the panel: `Slider`s with `color="contrast"`, each with
+     * its `label`, `min`, `max`, `step`, `format` and `locale`.
+     */
+    children: ReactNode;
+    /**
+     * The figures worked out from the inputs, at the top of the summary
+     * column. The page does the sums: one result for savings, three for
+     * refinancing on leabank.no. A change is announced to screen readers.
+     */
+    results: readonly CalculatorResult[];
+    /** The call to action under the results: an `ActionButton`. */
+    action?: ReactNode;
+    /** The price example under the action, in the small print. */
+    priceExample?: ReactNode;
+};
+/**
+ * The website's savings and refinancing calculator: a heading, a panel of
+ * sliders and a column with the results and a call to action, as on
+ * leabank.no/sparing and leabank.no/lan. It lays the parts out; the inputs
+ * are `Slider`s and the sums stay with the page.
+ *
+ * ```tsx
+ * <Section surface="contrast-accent">
+ *   <Calculator
+ *     header={<SectionHeader eyebrow="Sparekalkulator" title="Se hvor mye sparingen din kan vokse" />}
+ *     results={[{ label: "Beregnet sparesaldo", value: format(balance) }]}
+ *     action={<ActionButton render={<NextLink href="/sparing/apne-konto" />}>Opprett konto</ActionButton>}
+ *   >
+ *     <Slider color="contrast" label="Startbeløp" min={0} max={1000000} step={1000} value={start} onValueChange={setStart} locale="nb-NO" format={{ style: "currency", currency: "NOK", maximumFractionDigits: 0 }} />
+ *     …
+ *   </Calculator>
+ * </Section>
+ * ```
+ *
+ * The header is 80px above the rest (32px below 768px). From 1024px the
+ * panel and a 280px column sit side by side, 64px apart: the results at the
+ * top of the column, right-aligned, the action and the price example at its
+ * foot; below 1024px one under the other, left-aligned, 32px apart. The
+ * panel is black at 30 % over the section, with `5xl` corners and 32px
+ * inside, the sliders 16px apart. It has no colour of its own and is made
+ * for the dark surfaces, `contrast` and `contrast-accent`.
+ */
+export declare function Calculator({ header, results, action, priceExample, render, ref, className, children, ...rest }: CalculatorProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/carousel.d.ts

@@ -0,0 +1,55 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode, Ref } from 'react';
+/**
+ * A carousel is a region, so it needs a name: the title of what it shows.
+ * Provide exactly one of `aria-label` or `aria-labelledby`.
+ */
+type CarouselName = {
+    "aria-label": string;
+    "aria-labelledby"?: never;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: never;
+};
+export type CarouselProps = Omit<useRender.ComponentProps<"div">, "ref" | "children" | "aria-label" | "aria-labelledby"> & CarouselName & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /**
+     * The slides, such as `TestimonialCard`s. Each one is put in an item of
+     * a list and stretched to the height of the tallest.
+     */
+    children: ReactNode;
+    /**
+     * The name of each dot, when "Gå til side 3" does not say enough, as on
+     * `PaginationDots`.
+     */
+    getItemLabel?: (page: number) => string;
+};
+/**
+ * A row of slides that scrolls sideways, as the website's carousel of
+ * reviews: 2.2 slides in view from 1024px and 1.15 below, 16px apart, with
+ * previous and next buttons and a dot per place under them.
+ *
+ * ```tsx
+ * <Carousel aria-labelledby={titleId}>
+ *   <TestimonialCard rating={5} quote="…" name="Kari Nordmann" meta="Kunde, Oslo" />
+ *   <TestimonialCard rating={5} quote="…" name="Ola Hansen" meta="Kunde, Bergen" />
+ *   <TestimonialCard rating={4} quote="…" name="Ingrid Berg" meta="Kunde, Trondheim" />
+ * </Carousel>
+ * ```
+ *
+ * The track scrolls on its own, with scroll snap: swipe it, scroll it with a
+ * trackpad, or focus it and use the arrow keys. It stops at the start of
+ * each slide; the last slides, which can't reach the start, share the end.
+ * The buttons and dots move it a place at a time, and once it has moved, the
+ * place it comes to rest at is announced ("Side 2 av 3"). The edges fade into the section's colour where
+ * there is more to scroll. Under reduced motion the buttons jump instead of
+ * scrolling smoothly.
+ *
+ * It is a region named by `aria-label` or `aria-labelledby`, described as a
+ * carousel in the `LeaProvider` language. The controls show only when the
+ * slides don't fit. The buttons and dots are made for the light surfaces
+ * (`base`, `subtle`, `muted`).
+ */
+export declare function Carousel({ getItemLabel, render, ref, className, children, ...rest }: CarouselProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

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

@@ -0,0 +1,42 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+export type CtaBannerProps = Omit<useRender.ComponentProps<"div">, "ref" | "title" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The big title. */
+    title: ReactNode;
+    /**
+     * The element for the title, an `<h2>` by default: `titleRender={<h1 />}`
+     * where the banner opens the page.
+     */
+    titleRender?: ReactElement;
+    /**
+     * The text beside the title. A string becomes one paragraph; pass `<p>`
+     * elements for several.
+     */
+    text?: ReactNode;
+    /** The call to action under the text: an `ActionButton`. */
+    action?: ReactNode;
+    /** The price example under the action, in the small print. */
+    priceExample?: ReactNode;
+};
+/**
+ * A closing call to action: a big title on the left, and a text, a button
+ * and the price example on the right, as at the foot of leabank.no's home
+ * page.
+ *
+ * ```tsx
+ * <Section surface="muted">
+ *   <CtaBanner
+ *     title="Klar for å komme i gang med Lea Bank?"
+ *     text="Vi er her for deg og står klare til å hjelpe deg."
+ *     action={<ActionButton render={<NextLink href="/lan" />}>Søk om forbrukslån</ActionButton>}
+ *   />
+ * </Section>
+ * ```
+ *
+ * Two equal columns 64px apart from 1024px, one column below with the title
+ * at 41px. With only a title, the title takes the whole width. It takes the
+ * text colour of its section.
+ */
+export declare function CtaBanner({ title, titleRender, text, action, priceExample, render, ref, className, ...rest }: CtaBannerProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/expanding-cards-context.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Whether an `ExpandingCardsItem` is open: the one card `ExpandingCards`
+ * keeps open in its row from 1312px, or every card below that and outside
+ * the row. Internal.
+ */
+export declare const ExpandingCardsContext: import('react').Context<{
+    open: boolean;
+}>;

package/dist/website/expanding-cards-item.d.ts

@@ -0,0 +1,69 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+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 = {
+    /** The photo: the whole card while it is closed, half of it open. */
+    src: string;
+    /** What the photo shows, for screen readers; `""` for decoration. */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, such as
+     * `next/image` with `fill`. Its own props win over `src` and `alt`.
+     */
+    imageRender?: ReactElement;
+} | {
+    src?: undefined;
+    alt?: undefined;
+    imageRender?: undefined;
+};
+export type ExpandingCardsItemProps = Omit<useRender.ComponentProps<"div">, "ref" | "title" | "children"> & ExpandingCardsItemImage & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The title, in capitals. */
+    title: ReactNode;
+    /**
+     * The element for the title, an `<h2>` by default. Pass another level
+     * where the page outline needs one: `titleRender={<h3 />}`.
+     */
+    titleRender?: ReactElement;
+    /** The text under the title. A string becomes one paragraph. */
+    text?: ReactNode;
+    /**
+     * The call to action: an `ActionButton`. While the card is closed it
+     * shows only its arrow, with the label kept for screen readers.
+     */
+    action?: ReactNode;
+    /**
+     * The colour of the card, after its `bg` token, as on `Section`. On
+     * `"contrast"` and `"contrast-accent"` the text is white.
+     * @default "base"
+     */
+    surface?: ExpandingCardsItemSurface;
+};
+/**
+ * A card of `ExpandingCards`: a photo, a title in capitals, a text and a
+ * call to action, on one of the five section colours.
+ *
+ * ```tsx
+ * <ExpandingCardsItem
+ *   surface="contrast"
+ *   title="Forbrukslån"
+ *   text="Lån til det du trenger, uten sikkerhet. Søk på få minutter."
+ *   src="/bilder/forbrukslan.jpg"
+ *   alt=""
+ *   action={<ActionButton render={<NextLink href="/lan/forbrukslan" />}>Søk nå</ActionButton>}
+ * />
+ * ```
+ *
+ * Open, the text takes the start half (32px inside, at the bottom) and the
+ * photo the end half, 16px from the card's edges. Closed (in the row of
+ * `ExpandingCards` from 1312px), the photo fills the card and only the
+ * `ActionButton`'s arrow shows; the title and text are still there for
+ * screen readers, and focusing the button opens the card. Below 640px the
+ * photo is on top at 2 : 1. Outside `ExpandingCards` the card is always
+ * open. At least 280px tall; it grows with its text.
+ */
+export declare function ExpandingCardsItem({ title, titleRender, text, action, src, alt, imageRender, surface, render, ref, className, ...rest }: ExpandingCardsItemProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

package/dist/website/expanding-cards.d.ts

@@ -0,0 +1,48 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode, Ref } from 'react';
+export type ExpandingCardsDefaultOpen = "first" | "last";
+export type ExpandingCardsProps = Omit<useRender.ComponentProps<"div">, "ref" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /**
+     * The cards: `ExpandingCardsItem`s, usually three. Each one is put in an
+     * item of a list.
+     */
+    children: ReactNode;
+    /**
+     * The card that is open before the visitor points at one: the website's
+     * "Main card".
+     * @default "first"
+     */
+    defaultOpen?: ExpandingCardsDefaultOpen;
+};
+/**
+ * A row of photo cards in which one is open, as on the home page of
+ * leabank.no: the open card is twice as wide as the others, with its title,
+ * text and call to action beside its photo; the others show the photo and
+ * the arrow.
+ *
+ * ```tsx
+ * <Section>
+ *   <ExpandingCards>
+ *     <ExpandingCardsItem
+ *       surface="contrast"
+ *       title="Forbrukslån"
+ *       text="Lån til det du trenger, uten sikkerhet."
+ *       src="/bilder/forbrukslan.jpg"
+ *       alt=""
+ *       action={<ActionButton render={<NextLink href="/lan/forbrukslan" />}>Søk nå</ActionButton>}
+ *     />
+ *     …
+ *   </ExpandingCards>
+ * </Section>
+ * ```
+ *
+ * From 1312px the cards share a row, 16px apart, and the card the pointer
+ * or the keyboard focus moves into opens; the last one opened stays open.
+ * The row keeps its height while a card opens, so the page under it does
+ * not move. Below 1312px every card is open, one under the other, and below
+ * 640px the photo sits on top of the text. The cards are a list. Under
+ * reduced motion they open without moving.
+ */
+export declare function ExpandingCards({ defaultOpen, render, ref, className, children, ...rest }: ExpandingCardsProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/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/hero-service-grid.d.ts

@@ -0,0 +1,52 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+export type HeroServiceGridImagePosition = "start" | "end";
+export type HeroServiceGridProps = Omit<useRender.ComponentProps<"div">, "ref" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The large photo. */
+    src: string;
+    /** What the photo shows, for screen readers; `""` when it is decoration. */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, as on
+     * `FeaturedImage`: `next/image` with `fill`, or an `<img loading="lazy">`.
+     */
+    imageRender?: ReactElement;
+    /** A call to action on the photo: an `ActionButton`. */
+    action?: ReactNode;
+    /**
+     * Where the photo sits from 1024px: `"start"` (on the left) or `"end"`.
+     * Below 1024px it is always on top.
+     * @default "start"
+     */
+    imagePosition?: HeroServiceGridImagePosition;
+    /**
+     * The cards beside the photo: up to four `LinkCard`s, two by two. Each one
+     * is put in an item of a list.
+     */
+    children?: ReactNode;
+};
+/**
+ * A large photo beside a block of link cards, as on leabank.no's home page:
+ * a `FeaturedImage` with a call to action, and up to four `LinkCard`s.
+ *
+ * ```tsx
+ * <Section>
+ *   <HeroServiceGrid
+ *     src="/bilder/familie.jpg"
+ *     alt=""
+ *     action={<ActionButton render={<NextLink href="/lan" />}>Se våre lån</ActionButton>}
+ *   >
+ *     <LinkCard render={<NextLink href="/lan" />} title="Lån etter dine behov." surface="contrast" />
+ *     <LinkCard render={<NextLink href="/sparing" />} title="Se hvor mye du kan spare." surface="muted" />
+ *   </HeroServiceGrid>
+ * </Section>
+ * ```
+ *
+ * From 1024px two equal columns 16px apart, at least 600px tall: the photo
+ * fills one, the cards share the other two by two. Below 1024px the photo is
+ * on top at 1 : 0.7, the cards two by two under it, and one under the other
+ * below 768px. The cards are a list.
+ */
+export declare function HeroServiceGrid({ src, alt, imageRender, action, imagePosition, render, ref, className, children, ...rest }: HeroServiceGridProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/hero.d.ts

@@ -0,0 +1,57 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+export type HeroProps = Omit<useRender.ComponentProps<"section">, "ref" | "title" | "children"> & {
+    /** The rendered element: the `<section>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The photo behind the band, cropped to fill it. */
+    src: string;
+    /**
+     * What the photo shows, for screen readers; `""` when it is decoration,
+     * as a photo behind a title usually is.
+     */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, such as
+     * `next/image` with `fill` and `priority` (the hero photo is usually the
+     * largest thing on the page). Its own props win over `src` and `alt`.
+     */
+    imageRender?: ReactElement;
+    /** The title of the page. */
+    title: ReactNode;
+    /**
+     * The element for the title, an `<h1>` by default, as a hero opens the
+     * page: `titleRender={<h2 />}` where it does not.
+     */
+    titleRender?: ReactElement;
+    /**
+     * The text under the title. A string becomes one paragraph; pass `<p>`
+     * elements for several.
+     */
+    text?: ReactNode;
+    /** The call to action under the text: an `ActionButton`. */
+    action?: ReactNode;
+    /** The price example under the action, in the small print. */
+    priceExample?: ReactNode;
+};
+/**
+ * The top of a product page: a photo from edge to edge, and on it a white
+ * `Panel` with the page title, a text, a call to action and the price
+ * example, as on leabank.no's loan pages.
+ *
+ * ```tsx
+ * <Hero
+ *   src="/bilder/kjokken.jpg"
+ *   alt=""
+ *   imageRender={<NextImage src={kitchen} alt="" fill priority />}
+ *   title="Forbrukslån med rente fra 7,90 %"
+ *   text="Søk om lån uten sikkerhet på få minutter og få svar med én gang."
+ *   action={<ActionButton render={<NextLink href="/sok" />}>Søk om lån</ActionButton>}
+ * />
+ * ```
+ *
+ * It is a band of its own, not inside a `Section`: at least 700px tall
+ * (600px below 768px, 500px below 640px), with the panel at most 600px wide
+ * at the start of the 1312px column. In the reading order the panel comes
+ * first and the photo after it.
+ */
+export declare function Hero({ src, alt, imageRender, title, titleRender, text, action, priceExample, render, ref, className, ...rest }: HeroProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * The `@leabankab/component-library/website` entry: the sections that
+ * leabank.no is built from. They are website-only, so they are not part of
+ * the main entry, and an app ships them, and their stylesheet, only where it
+ * imports them. The build writes their CSS Modules to dist/website.css,
+ * 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).
+ *
+ * Names are flat (`SectionHeader`, not `Section.Header`): the website renders
+ * these from server components, which can't dot into a client bundle.
+ */
+export * from './alert-banner';
+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 './side-nav';
+export * from './site-footer';
+export * from './site-header';
+export * from './split-content';
+export * from './stats';
+export * from './testimonials';

package/dist/website/navigation-grid.d.ts

@@ -0,0 +1,39 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+export type NavigationGridProps = Omit<useRender.ComponentProps<"div">, "ref" | "title" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /**
+     * The heading over the cards. Left out, there is no heading and no room
+     * kept for one.
+     */
+    title?: ReactNode;
+    /** The element for the title, an `<h2>` by default: `titleRender={<h3 />}`. */
+    titleRender?: ReactElement;
+    /**
+     * The cards: `LinkCard`s, three to five as on the website. Each one is put
+     * in an item of a list.
+     */
+    children?: ReactNode;
+};
+/**
+ * A grid of `LinkCard`s under a title, as the "Hva kan vi hjelpe deg med?"
+ * block on leabank.no's customer service page.
+ *
+ * ```tsx
+ * <Section surface="subtle">
+ *   <NavigationGrid title="Hva kan vi hjelpe deg med?">
+ *     <LinkCard render={<NextLink href="/lan" />} title="Lån" surface="muted" />
+ *     <LinkCard render={<NextLink href="/sparing" />} title="Sparing" surface="contrast" />
+ *     <LinkCard render={<NextLink href="/forsikring" />} title="Forsikring" surface="muted" />
+ *   </NavigationGrid>
+ * </Section>
+ * ```
+ *
+ * From 1024px the cards are two to a row of four columns, each two columns
+ * wide; with an odd number of cards the first row holds three, the first two
+ * one column wide (1 + 1 + 2). Rows are 300px, or taller for a long title.
+ * Between 768 and 1024px two columns, the wide cards taking a row of their
+ * own; below 768px one column. The cards are a list.
+ */
+export declare function NavigationGrid({ title, titleRender, render, ref, className, children, ...rest }: NavigationGridProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/paragraphs.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+/**
+ * A text prop of the sections: a string or a number becomes one `<p>`, and
+ * anything else (paragraphs the page passes, rich text from the CMS) goes in
+ * a `<div>`, so a `<p>` never holds another. Internal.
+ */
+export declare function Paragraphs({ className, id, children, }: {
+    className?: string;
+    id?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;