@leabankab/component-library 8.6.1 → 8.8.0

package/dist/theme/token-types.d.ts

@@ -1,6 +1,6 @@
 export type ColorToken = "base" | "subtle" | "muted" | "contrast" | "accent";
-export type BgColorToken = ColorToken | "overlay";
-export type TextColorToken = ColorToken;
+export type BgColorToken = ColorToken | "overlay" | "hover" | "contrast-hover" | "contrast-accent";
+export type TextColorToken = ColorToken | "contrast-hover";
 export type BorderColorToken = ColorToken;
 export type BrandColorToken = "base" | "hover" | "subtle" | "contrast";
 export type StatusColorToken = "base" | "subtle";
@@ -15,8 +15,18 @@ export type ColorPath = `bg.${BgColorToken}` | `text.${TextColorToken}` | `borde
  * - `neutral`: the greys, for something that should carry no meaning.
  * - `success`, `info`, `warning`, `error`: the statuses.
  * - `contrast`: for use on a dark surface.
+ * - `muted`: the warm beige of `bg.muted`, for a tag on the website.
  */
-export type ColorRole = "primary" | "secondary" | "tertiary" | "neutral" | "success" | "info" | "warning" | "error" | "contrast";
+export type ColorRole = "primary" | "secondary" | "tertiary" | "neutral" | "success" | "info" | "warning" | "error" | "contrast" | "muted";
+/**
+ * The values a website component's `surface` prop can take: the background of
+ * a section or card, named after its `bg` token. `base` is white, `subtle` the
+ * grey, `muted` the beige, `contrast` the near-black and `contrast-accent` the
+ * deep purple. On the last two, text is `text.contrast`. Like `ColorRole`, it
+ * names a role and never a hue, and a component accepts the ones it has a
+ * design for.
+ */
+export type SurfaceRole = "base" | "subtle" | "muted" | "contrast" | "contrast-accent";
 /** Allowed values for MUI `Typography` `color` prop (semantic text tokens). */
 export type TypographyColorToken = `text.${TextColorToken}`;
 /** Common spacing scale factors (8px base via `theme.spacing` / `theme.space`). */

package/dist/theme/tokens/breakpoints.d.ts

@@ -14,3 +14,23 @@ export declare const breakpoints: {
     readonly xl: 1536;
 };
 export type Breakpoint = keyof typeof breakpoints;
+/**
+ * The website's own widths, for the website components only, so a layout on
+ * leabank.no switches where it does today. Named as in the website's theme.
+ * There each is a `max-width` (`mobile` is up to 640px); here, as everywhere in
+ * the library, a CSS Module writes them mobile-first: `@media (min-width:
+ * 640px)` starts above `mobile`, and `max-width: 639.95px` ends below it. That
+ * moves each switch by one pixel, at exactly the width itself.
+ *
+ * They are not part of `Breakpoint`, so `Container` sizes and the responsive
+ * props of `Stack` and `Grid` keep their five steps.
+ */
+export declare const websiteBreakpoints: {
+    readonly mobile: 640;
+    readonly tablet: 768;
+    readonly desktop: 1024;
+    /** The website's `mobileHeader`: below it the header is the mobile one. */
+    readonly header: 1312;
+    readonly wide: 1440;
+};
+export type WebsiteBreakpoint = keyof typeof websiteBreakpoints;

package/dist/theme/tokens/font-family.d.ts

@@ -7,3 +7,9 @@
  * loads.
  */
 export declare const fontFamily = "\"ClashGrotesk\", \"ClashGrotesk Fallback\", sans-serif";
+/**
+ * The stack for code in CMS text (`RichText`'s `code` and `pre`), emitted as
+ * `--lea-font-family-mono`: the website's Courier New, then the platform's own
+ * monospace. Nothing else sets text in it, and no face is shipped for it.
+ */
+export declare const fontFamilyMono = "\"Courier New\", Courier, monospace";

package/dist/theme/tokens/index.d.ts

@@ -12,3 +12,4 @@ export * from './spacing';
 export * from './text-styles';
 export * from './transitions';
 export * from './type-scale';
+export * from './widths';

package/dist/theme/tokens/shadows.d.ts

@@ -5,5 +5,11 @@ export declare const shadows: {
     readonly lg: "0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10)";
     readonly xl: "0px 20px 25px -5px rgba(0, 0, 0, 0.10), 0px 8px 10px -6px rgba(0, 0, 0, 0.10)";
     readonly "2xl": "0px 25px 50px -12px rgba(0, 0, 0, 0.25)";
+    /**
+     * The website's shadow: an even 6px halo with no offset, the exact value of
+     * leabank.no. For the website components that float over a section (the
+     * elevated `IconButton`, the partner logo tile, the header dropdown).
+     */
+    readonly soft: "0 0 6px 0 rgba(86, 86, 118, 0.10)";
     readonly inner: "0px 2px 4px 0px rgba(0, 0, 0, 0.05) inset";
 };

package/dist/theme/tokens/text-styles.d.ts

@@ -18,6 +18,10 @@ type TextStyleDefinition = {
  * `label` move one step at a time; `heading` and `display` move two, because
  * neighbouring steps are too close to tell two headings apart.
  *
+ * `title` is a heading in the regular weight, for the website: the title of a
+ * link card (`title-md`) and an uppercase promo title (`title-xl`). It takes
+ * the sizes and line heights of `heading-md` and `heading-xl`.
+ *
  * The Figma text styles `heading/lg` and so on mirror this file.
  */
 export declare const textStyles: {
@@ -32,6 +36,10 @@ export declare const textStyles: {
         lg: TextStyleDefinition;
         xl: TextStyleDefinition;
     };
+    title: {
+        md: TextStyleDefinition;
+        xl: TextStyleDefinition;
+    };
     body: {
         xs: TextStyleDefinition;
         sm: TextStyleDefinition;

package/dist/theme/tokens/widths.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Content widths in pixels, emitted as `--lea-width-{name}`. Not breakpoints:
+ * a width caps how wide content grows, a breakpoint is where a layout changes.
+ *
+ * - `section`: the content column of a website section, 1312px (1440 less 64
+ *   at each side). The Figma variable `width/section` holds the same number.
+ */
+export declare const widths: {
+    readonly section: 1312;
+};

package/dist/theme/types.d.ts

@@ -16,6 +16,12 @@ export type Palette = {
         accent: string;
         /** The see-through layer behind a dialog or drawer. */
         overlay: string;
+        /** Hover on a website card or panel with a light surface. */
+        hover: string;
+        /** Hover on a website card or panel with a dark surface. */
+        "contrast-hover": string;
+        /** The deep purple of a website section or card. Takes `text.contrast`. */
+        "contrast-accent": string;
     };
     text: {
         base: string;
@@ -23,6 +29,8 @@ export type Palette = {
         muted: string;
         accent: string;
         contrast: string;
+        /** Hover on a link on a dark surface, on the website. */
+        "contrast-hover": string;
     };
     border: {
         base: string;
@@ -66,4 +74,4 @@ export type EasingToken = keyof typeof import('./tokens/transitions').easings;
 export type DurationToken = keyof typeof import('./tokens/transitions').durations;
 export type LineHeightToken = keyof typeof import('./tokens/line-heights').lineHeights;
 export type { TextStyleToken } from './tokens/text-styles';
-export type { BgColorToken, BorderColorToken, BrandColorToken, ColorPath, ColorRole, ColorToken, SpacingFactor, StatusColorToken, TextColorToken, TypographyColorToken, } from './token-types';
+export type { BgColorToken, BorderColorToken, BrandColorToken, ColorPath, ColorRole, ColorToken, SpacingFactor, StatusColorToken, SurfaceRole, TextColorToken, TypographyColorToken, } from './token-types';

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/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,33 @@
+/**
+ * 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 './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';