@leabankab/component-library 8.6.1 → 8.8.0

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;

package/dist/website/partner-list.d.ts

@@ -0,0 +1,79 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+/** `alt` is required with a logo. */
+type PartnerListLogo = {
+    /** The partner's logo, shown on a white tile. */
+    src: string;
+    /**
+     * The partner's name, for screen readers; `""` when the text beside
+     * the logo already names the partner.
+     */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, as on
+     * `PartnerRow`: `next/image`, or an `<img loading="lazy">`.
+     */
+    imageRender?: ReactElement;
+} | {
+    src?: undefined;
+    alt?: undefined;
+    imageRender?: undefined;
+};
+/** One partner in the list. */
+export type PartnerListItem = PartnerListLogo & {
+    /** The partner's name. The list is sorted by it. */
+    name: string;
+    /**
+     * The text about the partner, beside the logo: usually `RichText` with the
+     * CMS content, whose heading is the name.
+     */
+    content: ReactNode;
+};
+export type PartnerListProps = Omit<useRender.ComponentProps<"div">, "ref" | "children" | "defaultValue" | "onChange"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The partners, in any order. */
+    items: readonly PartnerListItem[];
+    /**
+     * How many partners a page shows.
+     * @default 9
+     */
+    pageSize?: number;
+    /** The page shown, counted from 1. Pass it to control the list. */
+    value?: number;
+    /**
+     * The page shown first when the list is not controlled.
+     * @default 1
+     */
+    defaultValue?: number;
+    /** Called with the page number when the visitor turns the page. */
+    onValueChange?: (page: number) => void;
+};
+/**
+ * The website's list of partners, as on leabank.no/om-oss/samarbeidspartnere:
+ * a `PartnerRow` per partner, sorted by name, nine to a page, with previous
+ * and next buttons and a dot per page under them.
+ *
+ * ```tsx
+ * <Section surface="subtle" width="wide">
+ *   <PartnerList
+ *     items={partners.map((partner) => ({
+ *       name: partner.name,
+ *       content: <RichText>…</RichText>,
+ *       src: partner.logo,
+ *       alt: "",
+ *     }))}
+ *   />
+ * </Section>
+ * ```
+ *
+ * The partners are sorted in the `LeaProvider` language (Å after Z in
+ * Norwegian and Swedish, Ä and Ö in Swedish and Finnish order), so the
+ * order follows the market. The controls show from two pages: elevated
+ * buttons named "Forrige side" and "Neste side", which stay focusable at the
+ * first and last page, and `PaginationDots`; the new page is announced as
+ * "Side 2 av 3". The list takes the width it is given: on the website a
+ * `Section` with `width="wide"`.
+ */
+export declare function PartnerList({ items, pageSize, value: valueProp, defaultValue, onValueChange, render, ref, className, ...rest }: PartnerListProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | null;
+export {};

package/dist/website/payment-feature.d.ts

@@ -0,0 +1,85 @@
+import { ReactElement, ReactNode } from 'react';
+import { PanelProps } from '../index';
+export type PaymentFeatureImagePosition = "start" | "end";
+/** A logo in the row at the top. */
+export type PaymentFeatureLogo = {
+    /** The logo file. */
+    src: string;
+    /** The name of the brand, for screen readers. */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, such as
+     * `next/image` with the logo's own `width` and `height`.
+     */
+    imageRender?: ReactElement;
+};
+/** `alt` is required with a photo, `""` when it is decoration. */
+type PaymentFeatureImage = {
+    /** The photo beside the text. Without one, the text takes the card. */
+    src: string;
+    /**
+     * What the photo shows, for screen readers; `""` when it is decoration
+     * and the text says it all.
+     */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, such as
+     * `next/image`. Its own props win over `src` and `alt`.
+     */
+    imageRender?: ReactElement;
+} | {
+    src?: undefined;
+    alt?: undefined;
+    imageRender?: undefined;
+};
+export type PaymentFeatureProps = Omit<PanelProps, "title" | "children" | "size"> & PaymentFeatureImage & {
+    /** The logos of the payment brands, in a row over the text. */
+    logos?: readonly PaymentFeatureLogo[];
+    /** The title. */
+    title: ReactNode;
+    /** The element for the title, an `<h2>` by default: `titleRender={<h3 />}`. */
+    titleRender?: ReactElement;
+    /**
+     * The text under the title. A string becomes one paragraph; pass `<p>`
+     * elements for several.
+     */
+    text?: ReactNode;
+    /**
+     * The calls to action, in a row that wraps: an `ActionButton`, a `Link`
+     * with `arrow`, or both.
+     */
+    actions?: ReactNode;
+    /** The price example under the actions, in the small print. */
+    priceExample?: ReactNode;
+    /**
+     * Where the photo sits: `"start"` before the text (on the left, or on
+     * top below 1024px), `"end"` after it.
+     * @default "end"
+     */
+    imagePosition?: PaymentFeatureImagePosition;
+};
+/**
+ * A payment feature on a white `Panel`: a row of brand logos, a title, a
+ * text and the calls to action in one column, and a photo in the other.
+ *
+ * ```tsx
+ * <Section surface="subtle">
+ *   <PaymentFeature
+ *     logos={[{ src: "/logoer/vipps.svg", alt: "Vipps" }, { src: "/logoer/visa.svg", alt: "Visa" }]}
+ *     title="Betal med Lea Bank i nettbutikken"
+ *     text="Del opp betalingen eller betal senere når du handler hos våre partnere."
+ *     actions={<ActionButton render={<NextLink href="/betaling" />}>Les mer</ActionButton>}
+ *     src="/bilder/betaling.jpg"
+ *     alt=""
+ *   />
+ * </Section>
+ * ```
+ *
+ * From 1024px the text column is at most 560px and the photo, at most 435px
+ * wide, sits at the end of the other column; below 1024px they stack 32px
+ * apart. The logos are up to 48px tall (32px below 768px) with a line between
+ * them, and wrap on a narrow screen. Put it on a coloured section: the panel
+ * is white.
+ */
+export declare function PaymentFeature({ logos, title, titleRender, text, actions, priceExample, src, alt, imageRender, imagePosition, className, ...rest }: PaymentFeatureProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,71 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+export type PromoGridImagePosition = "start" | "end";
+/** One of the smaller photos over the text. */
+export type PromoGridImage = {
+    /** The 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>`, such as
+     * `next/image` with `fill`. Its own props win over `src` and `alt`.
+     */
+    imageRender?: ReactElement;
+};
+export type PromoGridProps = Omit<useRender.ComponentProps<"div">, "ref" | "title" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The large photo. */
+    src: string;
+    /** What the large photo shows, for screen readers; `""` when it is decoration. */
+    alt: string;
+    /**
+     * The image element to render for the large photo instead of the plain
+     * `<img>`, as on `FeaturedImage`.
+     */
+    imageRender?: ReactElement;
+    /** A call to action on the large photo: an `ActionButton`. */
+    action?: ReactNode;
+    /** One or two smaller photos over the text, side by side. */
+    images?: readonly [PromoGridImage] | readonly [PromoGridImage, PromoGridImage];
+    /** The title on the beige block, in capitals. */
+    title: ReactNode;
+    /** The element for the title, an `<h2>` by default: `titleRender={<h3 />}`. */
+    titleRender?: ReactElement;
+    /**
+     * The text under the title. A string becomes one paragraph; pass `<p>`
+     * elements for several.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Where the large photo sits from 1024px: `"start"` (on the left) or
+     * `"end"`. Below 1024px it is always on top.
+     * @default "start"
+     */
+    imagePosition?: PromoGridImagePosition;
+};
+/**
+ * A promotion of photos and a title: a large `FeaturedImage` on one side, and
+ * on the other one or two photos over a beige block with the title in
+ * capitals, as on leabank.no's about page.
+ *
+ * ```tsx
+ * <Section>
+ *   <PromoGrid
+ *     src="/bilder/kontor.jpg"
+ *     alt=""
+ *     action={<ActionButton render={<NextLink href="/lan" />}>Se våre lån</ActionButton>}
+ *     images={[{ src: "/bilder/team.jpg", alt: "" }]}
+ *     title="Lån til det du trenger"
+ *     subtitle="Vi hjelper deg med lån uten sikkerhet til det du har lyst på."
+ *   />
+ * </Section>
+ * ```
+ *
+ * From 1024px two equal columns 600px tall, 16px apart, the smaller photos
+ * taking the room the block leaves. Below 1024px everything stacks, the
+ * photos at 1 : 0.5, the two smaller ones side by side down to 768px. The
+ * block is beige with dark text on any section.
+ */
+export declare function PromoGrid({ src, alt, imageRender, action, images, title, titleRender, subtitle, imagePosition, render, ref, className, ...rest }: PromoGridProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

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

@@ -0,0 +1,53 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+export type SectionHeaderTitleSize = "sm" | "lg";
+export type SectionHeaderProps = Omit<useRender.ComponentProps<"div">, "ref" | "title" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The short line above the title. */
+    eyebrow?: ReactNode;
+    /** The title of the section. */
+    title: ReactNode;
+    /**
+     * The element for the title, an `<h2>` by default. Pass another level where
+     * the page outline needs one: `titleRender={<h1 />}`.
+     */
+    titleRender?: ReactElement;
+    /**
+     * `"lg"`: 41px (26px below 768px). `"sm"`: 26px at every width.
+     * @default "lg"
+     */
+    titleSize?: SectionHeaderTitleSize;
+    /**
+     * The text under the title, at most 720px wide. A string becomes one
+     * paragraph; pass `<p>` elements for several.
+     */
+    subtitle?: ReactNode;
+    /**
+     * The calls to action, in a centred row that wraps: an `ActionButton`,
+     * a `Link` with `arrow`, or both. The row is only there when this is.
+     */
+    actions?: ReactNode;
+    /** The price example under the actions, in the small print. */
+    priceExample?: ReactNode;
+};
+/**
+ * The centred heading of a website section: a short line, the title, a text
+ * of at most 720px and a row of calls to action, as at the top of the
+ * sections on leabank.no.
+ *
+ * ```tsx
+ * <Section>
+ *   <SectionHeader
+ *     eyebrow="Om Lea Bank"
+ *     title="Vi gjør det enkelt å ta smarte økonomiske valg"
+ *     subtitle="Lea Bank er en digital bank …"
+ *     actions={<ActionButton render={<NextLink href="/om-oss" />}>Les mer om oss</ActionButton>}
+ *   />
+ * </Section>
+ * ```
+ *
+ * It takes the text colour of its section. The parts are 16px apart and the
+ * actions 32px under them; the actions are 32px apart.
+ */
+export declare function SectionHeader({ eyebrow, title, titleRender, titleSize, subtitle, actions, priceExample, render, ref, className, ...rest }: SectionHeaderProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/section.d.ts

@@ -0,0 +1,53 @@
+import { useRender } from '@base-ui/react/use-render';
+import { Ref } from 'react';
+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";
+export type SectionProps = Omit<useRender.ComponentProps<"section">, "ref"> & {
+    /** The rendered element: the `<section>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /**
+     * The colour of the band, after its `bg` token: `"base"` (white),
+     * `"subtle"` (grey), `"muted"` (beige), `"contrast"` (near-black) or
+     * `"contrast-accent"` (deep purple). On the last two the text is white;
+     * give a `Link` inside `color="contrast"` there.
+     * @default "base"
+     */
+    surface?: SectionSurface;
+    /**
+     * The room above the content: `"lg"` 112px (64px below 768px), `"sm"` 64px
+     * (32px), `"none"`.
+     * @default "lg"
+     */
+    spacingTop?: SectionSpacing;
+    /**
+     * The room below the content, in the same steps as `spacingTop`.
+     * @default "lg"
+     */
+    spacingBottom?: SectionSpacing;
+    /**
+     * How much of the content column the content takes, centred: `"full"`,
+     * `"wide"` (75 %) or `"narrow"` (60 %). Below 1024px it is always the full
+     * column.
+     * @default "full"
+     */
+    width?: SectionWidth;
+};
+/**
+ * A band of a website page: the colour from edge to edge, the content in a
+ * column of at most 1312px in the middle, 64px from the sides (16px below
+ * 768px). Every block on leabank.no sits in one.
+ *
+ * ```tsx
+ * <Section surface="subtle" spacingTop="none">
+ *   <SectionHeader title="Vi gjør det enkelt å ta smarte økonomiske valg" />
+ * </Section>
+ * ```
+ *
+ * The section sets the text colour for what is inside it, white on the dark
+ * surfaces, so text, a vertical `MediaCard` and the sections that have no
+ * colour of their own follow it. Renders a `section`; pass `render` for
+ * another element.
+ */
+export declare function Section({ surface, spacingTop, spacingBottom, width, render, ref, className, children, ...rest }: SectionProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/service-card-grid.d.ts

@@ -0,0 +1,33 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactNode, Ref } from 'react';
+export type ServiceCardGridProps = Omit<useRender.ComponentProps<"div">, "ref" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /**
+     * The cards: one to four `ServiceCard`s, in the order of the website's
+     * grid. The first two are `layout="stacked"` (the default); give the third
+     * and fourth `layout="row"`. Each one is put in an item of a list.
+     */
+    children?: ReactNode;
+};
+/**
+ * The website's grid of service cards, as on leabank.no/lan: a large card
+ * and a narrow one side by side, then a wide row under them.
+ *
+ * ```tsx
+ * <Section surface="muted">
+ *   <ServiceCardGrid>
+ *     <ServiceCard render={<NextLink href="/lan/forbrukslan" />} title="Forbrukslån" … />
+ *     <ServiceCard render={<NextLink href="/lan/refinansiering" />} title="Refinansiering" … />
+ *     <ServiceCard render={<NextLink href="/sparing" />} layout="row" title="Sparing" … />
+ *     <ServiceCard render={<NextLink href="/betalingsforsikring" />} layout="row" title="Betalingsforsikring" … />
+ *   </ServiceCardGrid>
+ * </Section>
+ * ```
+ *
+ * From 1024px three columns: the first card two columns wide and the second
+ * one, both 576px tall; a third card takes the row under them (320px) on its
+ * own, or the first column of it with a fourth in the other two. Below
+ * 1024px one column, each card at most 440px tall. The cards are a list.
+ */
+export declare function ServiceCardGrid({ render, ref, className, children, ...rest }: ServiceCardGridProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/split-content.d.ts

@@ -0,0 +1,69 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+export type SplitContentImagePosition = "start" | "end";
+/** `alt` is required with a photo, `""` when it is decoration. */
+type SplitContentImage = {
+    /** The photo. Without one, the text takes the whole width. */
+    src: string;
+    /**
+     * What the photo shows, for screen readers; `""` when it is decoration
+     * and the text says it all.
+     */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, such as
+     * `next/image`, or an `<img loading="lazy">`. Its own props win over
+     * `src` and `alt`.
+     */
+    imageRender?: ReactElement;
+} | {
+    src?: undefined;
+    alt?: undefined;
+    imageRender?: undefined;
+};
+export type SplitContentProps = Omit<useRender.ComponentProps<"div">, "ref" | "title" | "children"> & SplitContentImage & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The title. */
+    title: ReactNode;
+    /** The element for the title, an `<h2>` by default: `titleRender={<h3 />}`. */
+    titleRender?: ReactElement;
+    /**
+     * The text under the title. A string becomes one paragraph; pass `<p>`
+     * elements for several.
+     */
+    text?: ReactNode;
+    /**
+     * Where the photo sits: `"start"` before the text (on the left, or on
+     * top below 1024px), `"end"` after it.
+     * @default "end"
+     */
+    imagePosition?: SplitContentImagePosition;
+    /** The call to action under both columns: an `ActionButton`. */
+    action?: ReactNode;
+    /** The price example under the action, in the small print. */
+    priceExample?: ReactNode;
+};
+/**
+ * Text beside a photo, on the section's own colour: a title and a text in one
+ * column, a photo without corners in the other, and the call to action
+ * centred under both.
+ *
+ * ```tsx
+ * <Section surface="subtle">
+ *   <SplitContent
+ *     title="Refinansier dyre smålån"
+ *     text="Samle kredittkortgjeld og smålån i ett lån med én månedlig betaling."
+ *     src="/bilder/par.jpg"
+ *     alt=""
+ *     action={<ActionButton render={<NextLink href="/refinansiering" />}>Søk om refinansiering</ActionButton>}
+ *   />
+ * </Section>
+ * ```
+ *
+ * Two equal columns 64px apart from 1024px, the photo at most 560px wide at
+ * the end of its column; one column below, the photo at most 440px and
+ * the action at the start. It takes the text colour of its section.
+ */
+export declare function SplitContent({ title, titleRender, text, src, alt, imageRender, imagePosition, action, priceExample, render, ref, className, ...rest }: SplitContentProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

package/dist/website/stats.d.ts

@@ -0,0 +1,52 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+/** One number, with what it stands for. */
+export type StatsItem = {
+    /** The big number: a figure, or the step of a process. */
+    number: ReactNode;
+    /** What the number is. */
+    title?: ReactNode;
+    /** A line about it, under the title. */
+    text?: ReactNode;
+};
+export type StatsProps = Omit<useRender.ComponentProps<"div">, "ref" | "children"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The heading above the numbers: a `SectionHeader`. */
+    header?: ReactNode;
+    /** The numbers, in a row from 1024px. Two to four fit the website's row. */
+    items: readonly StatsItem[];
+    /**
+     * The element for the title of each number, an `<h3>` by default, as the
+     * titles sit under the section's `<h2>`: `titleRender={<p />}` where they
+     * should not be headings.
+     */
+    titleRender?: ReactElement;
+    /** The call to action under the numbers: an `ActionButton`. */
+    action?: ReactNode;
+    /** The price example under the action, in the small print. */
+    priceExample?: ReactNode;
+};
+/**
+ * A row of big numbers with a line on each side, each with a title and a
+ * line of text, as the four steps of "Slik fungerer det" on leabank.no's
+ * loan pages. The numbers are a list.
+ *
+ * ```tsx
+ * <Section>
+ *   <Stats
+ *     header={<SectionHeader eyebrow="Søk uforpliktende" title="Slik fungerer det" />}
+ *     items={[
+ *       { number: "1", title: "Fyll inn søknaden", text: "Tar ca. 3 minutter." },
+ *       { number: "2", title: "Send inn søknad", text: "…" },
+ *     ]}
+ *   />
+ * </Section>
+ * ```
+ *
+ * From 1024px the numbers are 224px, at least 200px wide each, with rounded
+ * bars filling the space between and around them; below 1024px they are
+ * 160px in a row without bars, and below 768px 128px in a column. The bars
+ * and the text follow the section's text colour.
+ */
+export declare function Stats({ header, items, titleRender, action, priceExample, render, ref, className, ...rest }: StatsProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/website/testimonials.d.ts

@@ -0,0 +1,100 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+export type TestimonialsVideoPosition = "start" | "end";
+/** The video's other props only make sense with a video. */
+type TestimonialsVideo = {
+    /**
+     * A video of the featured customer, shown as a square still with a
+     * play button that opens it in a dialog, with sound and controls.
+     */
+    videoSrc: string;
+    /**
+     * The still to show. Left out, the video's first frame is shown, which
+     * loads the start of the video with the page.
+     */
+    videoPoster?: string;
+    /**
+     * Captions for the video, a WebVTT file in the `LeaProvider` language.
+     * A video in which people speak needs them.
+     */
+    videoCaptions?: string;
+    /**
+     * Where the video sits from 768px: `"start"` (on the left of the quote)
+     * or `"end"`. Below 768px it is always above the quote.
+     * @default "start"
+     */
+    videoPosition?: TestimonialsVideoPosition;
+} | {
+    videoSrc?: undefined;
+    videoPoster?: undefined;
+    videoCaptions?: undefined;
+    videoPosition?: undefined;
+};
+/** A subtitle goes under a title. */
+type TestimonialsHeader = {
+    /** The title of the section. It also names the carousel. */
+    title: ReactNode;
+    /**
+     * The element for the title, an `<h2>` by default, as on
+     * `SectionHeader`.
+     */
+    titleRender?: ReactElement;
+    /** The text under the title. */
+    subtitle?: ReactNode;
+} | {
+    title?: undefined;
+    titleRender?: undefined;
+    subtitle?: undefined;
+};
+export type TestimonialsProps = Omit<useRender.ComponentProps<"div">, "ref" | "title" | "children"> & TestimonialsHeader & TestimonialsVideo & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /**
+     * What the featured customer said, without quotation marks: the section
+     * adds them. Shown large beside the video. A string becomes one
+     * paragraph; pass `<p>` elements for several.
+     */
+    quote?: ReactNode;
+    /** Who said the featured quote. */
+    name?: ReactNode;
+    /** A line under the name, such as the position and the company. */
+    meta?: ReactNode;
+    /** Stars above the featured quote, from 0 to 5. Left out, no stars. */
+    rating?: number;
+    /** The reviews in the carousel: `TestimonialCard`s. */
+    children?: ReactNode;
+};
+/**
+ * The website's block of customer reviews: a centred title, a featured
+ * customer with a video, and a carousel of `TestimonialCard`s, as on the home
+ * page of leabank.no.
+ *
+ * ```tsx
+ * <Section surface="subtle">
+ *   <Testimonials
+ *     title="Kundeanmeldelser"
+ *     subtitle="Se hva andre synes om oss"
+ *     rating={5}
+ *     quote="Lea Bank gjorde det enkelt å samle lånene mine."
+ *     name="Marte Olsen"
+ *     meta="Kunde, Oslo"
+ *     videoSrc="/video/marte.mp4"
+ *     videoPoster="/video/marte.jpg"
+ *   >
+ *     <TestimonialCard rating={5} quote="…" name="Kari Nordmann" meta="Kunde, bytt.no" />
+ *     <TestimonialCard rating={5} quote="…" name="Ola Hansen" meta="Kunde, bytt.no" />
+ *   </Testimonials>
+ * </Section>
+ * ```
+ *
+ * The parts are 64px apart. From 768px the video (a square with 64px
+ * corners, dimmed under its play button) and the featured quote share the
+ * width, 64px apart; below 768px the video is on top. The play button,
+ * named "Spill av video", opens the video in a dialog with its controls and
+ * captions, and the focus comes back to it when the dialog closes. The
+ * reviews are a `Carousel`, named by the title (or "Kundeomtaler" without
+ * one). It takes the text colour of its section; the carousel's controls
+ * are made for the light surfaces.
+ */
+export declare function Testimonials({ title, titleRender, subtitle, quote, name, meta, rating, videoSrc, videoPoster, videoCaptions, videoPosition, render, ref, className, children, ...rest }: TestimonialsProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

package/dist/website/use-brand-letters-labels.d.ts

@@ -0,0 +1,2 @@
+/** The names of `BrandLetters`' button, for paused and playing videos. */
+export declare const useBrandLettersLabels: () => Record<"play" | "pause", string>;

package/dist/website/use-carousel-labels.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The words of `Carousel`. `carousel` describes the region to screen readers
+ * (`aria-roledescription`); `{page}` and `{count}` in `status` are replaced
+ * with the page shown and the number of pages.
+ */
+export declare const useCarouselLabels: () => Record<"status" | "next" | "previous" | "carousel", string>;