@leabankab/component-library 8.6.0 → 8.7.0

package/dist/components/buttons/action-button.d.ts

@@ -1,16 +1,46 @@
+import { ReactNode } from 'react';
 import { ButtonRootProps } from './button-base';
-export type ActionButtonProps = Omit<ButtonRootProps, "loading">;
+export type ActionButtonSize = "sm" | "lg";
+/**
+ * With `iconOnly` the label is hidden but stays the accessible name, so it is
+ * required there.
+ */
+type ActionButtonLabel = {
+    /**
+     * Shows only the arrow: a round button, with the label kept for screen
+     * readers. Used where space is short, such as a collapsed
+     * `ExpandingCards` item.
+     * @default false
+     */
+    iconOnly?: false;
+    children?: ReactNode;
+} | {
+    iconOnly: true;
+    children: ReactNode;
+};
+export type ActionButtonProps = Omit<ButtonRootProps, "loading" | "children"> & ActionButtonLabel & {
+    /**
+     * `"lg"` is 56px tall with a 48px arrow; `"sm"` is 40px tall with a 32px
+     * arrow, for headers and tight rows.
+     * @default "lg"
+     */
+    size?: ActionButtonSize;
+};
 /**
  * A pill-shaped call-to-action button with a built-in arrow icon.
  *
  * Used for primary navigation actions on the website, such as hero sections
- * and landing pages. To render a link, pass it through `render`; an element
- * with `href` or `to` is rendered as a real link, without button semantics:
+ * and landing pages. On hover the label slides towards the arrow and the arrow
+ * turns purple and points up and to the right. To render a link, pass it
+ * through `render`; an element with `href` or `to` is rendered as a real link,
+ * without button semantics:
  *
  * ```tsx
  * <ActionButton render={<a href="/lan" />}>Se våra lån</ActionButton>
  * <ActionButton render={<NextLink href="/lan" />}>Se våra lån</ActionButton>
  * <ActionButton render={<RouterLink to="/lan" />}>Se våra lån</ActionButton>
+ * <ActionButton size="sm" iconOnly render={<a href="/lan" />}>Se våra lån</ActionButton>
  * ```
  */
-export declare function ActionButton({ children, className, ...rest }: ActionButtonProps): import("react").JSX.Element;
+export declare function ActionButton({ children, className, size, iconOnly, ...rest }: ActionButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/buttons/button-base.d.ts

@@ -43,6 +43,9 @@ export declare function ButtonRoot({ loading, disabled, className, render, nativ
 /**
  * The root shared by `Button`, `IconButton`, `CloseButton` and
  * `DownloadTrigger`: `ButtonRoot` with the button look. Internal — not
- * exported from the package.
+ * exported from the package. It also takes `"elevated"`, which only
+ * `IconButton` offers.
  */
-export declare function ButtonBase({ variant, color, size, className, ...rest }: ButtonBaseProps): import("react").JSX.Element;
+export declare function ButtonBase({ variant, color, size, className, ...rest }: Omit<ButtonBaseProps, "variant"> & {
+    variant?: ButtonVariant | "elevated";
+}): import("react").JSX.Element;

package/dist/components/buttons/icon-button.d.ts

@@ -1,5 +1,12 @@
 import { ReactNode } from 'react';
-import { ButtonBaseProps } from './button-base';
+import { ButtonBaseProps, ButtonVariant } from './button-base';
+/**
+ * The variants of `Button`, plus `"elevated"`: a white disc with the website's
+ * soft shadow, for controls that float over a picture or a coloured section
+ * (the arrows of a carousel, the play button of a video). At `md` it is 40px,
+ * the website's size; `sm` and `lg` match the other variants.
+ */
+export type IconButtonVariant = ButtonVariant | "elevated";
 /**
  * Requires an accessible name so the button is never nameless. Provide exactly
  * one of `aria-label` or `aria-labelledby`.
@@ -11,9 +18,16 @@ type IconButtonAccessibleName = {
     "aria-labelledby": string;
     "aria-label"?: never;
 };
-export type IconButtonProps = Omit<ButtonBaseProps, "children" | "aria-label" | "aria-labelledby"> & IconButtonAccessibleName & {
+export type IconButtonProps = Omit<ButtonBaseProps, "children" | "aria-label" | "aria-labelledby" | "variant"> & IconButtonAccessibleName & {
     /** The icon. Mark it `aria-hidden` — the name comes from `aria-label`. */
     children: ReactNode;
+    /**
+     * Visual weight: `"solid"`, `"outline"` and `"ghost"` as on `Button`, or
+     * `"elevated"`, a white disc with the website's soft shadow
+     * (`shadow-soft`) and the icon in `color`; 40px at `md`.
+     * @default "solid"
+     */
+    variant?: IconButtonVariant;
 };
 /**
  * A square, icon-only button with the same variants, colours and sizes as

package/dist/components/color-roles.d.ts

@@ -1,4 +1,4 @@
-import { ColorRole } from '../theme/token-types';
+import { ColorRole, SurfaceRole } from '../theme/token-types';
 /**
  * A component's own subset of `ColorRole`:
  * `ColorRoles<"primary" | "secondary" | "error">`. A name outside the shared
@@ -6,3 +6,9 @@ import { ColorRole } from '../theme/token-types';
  * not exported from the package.
  */
 export type ColorRoles<Role extends ColorRole> = Role;
+/**
+ * A website component's own subset of `SurfaceRole`, for its `surface` prop,
+ * written to the root as `data-surface`: `SurfaceRoles<"base" | "muted">`.
+ * Internal: not exported from the package.
+ */
+export type SurfaceRoles<Role extends SurfaceRole> = Role;

package/dist/components/data-display/arrow-circle.d.ts

@@ -0,0 +1,21 @@
+export type ArrowCircleProps = {
+    /**
+     * `"outline"`: a 2px ring and the arrow in the text colour, as on a
+     * `LinkCard`. `"filled"`: a near-black disc with a white arrow, the arrow of
+     * the website's call-to-action button.
+     * @default "outline"
+     */
+    variant?: "outline" | "filled";
+    /**
+     * `"lg"` is 48px with a 24px arrow, `"sm"` 32px with a 20px arrow.
+     * @default "lg"
+     */
+    size?: "sm" | "lg";
+    className?: string;
+};
+/**
+ * The round arrow of the website's cards (Figma `.ArrowCircle`). Decoration:
+ * hidden from screen readers, and the card it sits in moves it on hover.
+ * Internal: not exported from the package.
+ */
+export declare function ArrowCircle({ variant, size, className, }: ArrowCircleProps): import("react").JSX.Element;

package/dist/components/data-display/article-card.d.ts

@@ -0,0 +1,88 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+export type ArticleCardVariant = "post" | "job";
+/** An article card always leads somewhere: an `href`, or a router link. */
+type ArticleCardTarget = {
+    /** Where the card leads: the article or the job opening. */
+    href: string;
+    render?: never;
+} | {
+    href?: never;
+    /**
+     * A router link to render instead of the `<a>`, carrying its own
+     * destination: `render={<NextLink href="/okonomiguiden/smalan" />}`.
+     */
+    render: ReactElement;
+};
+/** `alt` is required with a photo, `""` when it is decoration. */
+type ArticleCardImage = {
+    /** The article's photo. Job openings have none. */
+    src: string;
+    /**
+     * What the photo shows, for screen readers; `""` when it is decoration
+     * and the title says it all.
+     */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, such as
+     * `next/image` with `fill`, or an `<img loading="lazy">`. Its own props
+     * win over `src` and `alt`.
+     */
+    imageRender?: ReactElement;
+} | {
+    src?: undefined;
+    alt?: undefined;
+    imageRender?: undefined;
+};
+export type ArticleCardProps = Omit<useRender.ComponentProps<"a">, "ref" | "title" | "children" | "href" | "render"> & ArticleCardTarget & ArticleCardImage & {
+    /** The rendered element: the `<a>`, or the link passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The title of the article, which also names the link. */
+    title: ReactNode;
+    /**
+     * The element for the title, an `<h3>` by default, under the list's own
+     * heading: `titleRender={<h2 />}`.
+     */
+    titleRender?: ReactElement;
+    /** A short summary under the title, cut off after two lines. */
+    excerpt?: ReactNode;
+    /**
+     * The facts under the excerpt, each shown as a beige pill: the category
+     * and the date of a post, or the place, the employment type and the
+     * closing date of a job. Pass them formatted.
+     */
+    meta?: ReactNode[];
+    /**
+     * `"post"`: an article, with its photo beside the text (above it below
+     * 768px) and 64px corners. `"job"`: a job opening, text only, with 32px
+     * corners.
+     * @default "post"
+     */
+    variant?: ArticleCardVariant;
+};
+/**
+ * An item in the website's list of articles or of job openings: a white card
+ * that is one link, with the title, a two-line excerpt and the facts as
+ * pills. On hover the title is underlined.
+ *
+ * ```tsx
+ * <ul>
+ *   <li>
+ *     <ArticleCard
+ *       render={<NextLink href="/okonomiguiden/smalan" />}
+ *       title="Slik refinansierer du dyre smålån"
+ *       excerpt="Har du flere smålån og kredittkort? …"
+ *       meta={["Lån", "12. mars 2026"]}
+ *       src="/bilder/smalan.jpg"
+ *       alt=""
+ *     />
+ *   </li>
+ * </ul>
+ * ```
+ *
+ * The link is named by the title and described by the excerpt and the
+ * facts. Put the cards in a list of the page's own; they take the width they
+ * are given.
+ */
+export declare function ArticleCard({ title, titleRender, excerpt, meta, src, alt, imageRender, variant, render, ref, className, ...rest }: ArticleCardProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

package/dist/components/data-display/avatar.d.ts

@@ -0,0 +1,33 @@
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar';
+import { ReactElement } from 'react';
+export type AvatarProps = Omit<BaseAvatar.Root.Props, "children"> & {
+    /**
+     * The photo. Without one, while it loads and when it fails, the avatar is a
+     * grey disc.
+     */
+    src?: string;
+    /**
+     * What the photo shows, for screen readers. Use `""` when the person's name
+     * is written beside it, as in a testimonial, so it is not read twice.
+     */
+    alt: string;
+    /**
+     * The image element to render instead of an `<img>`, such as `next/image`:
+     * `imageRender={<NextImage src={photo} alt="" width={48} height={48} />}`.
+     * Pass the photo in `src` as well: the avatar loads it to know when to
+     * show the image.
+     */
+    imageRender?: ReactElement;
+};
+/**
+ * A round 48px photo of a person, on Base UI's `Avatar`: the photo when it has
+ * loaded, a grey disc until then or without one.
+ *
+ * ```tsx
+ * <Avatar src="/kunder/kari.jpg" alt="" />
+ * ```
+ *
+ * `alt` is required. With a name in it, the disc carries the name while
+ * there is no photo; with `""`, the avatar is hidden from screen readers.
+ */
+export declare function Avatar({ src, alt, imageRender, className, ...rest }: AvatarProps): import("react").JSX.Element;

package/dist/components/data-display/chip.d.ts

@@ -1,15 +1,16 @@
 import { ComponentProps, MouseEvent, ReactNode } from 'react';
 import { ColorRoles } from '../color-roles';
-export type ChipColor = ColorRoles<"primary" | "tertiary" | "neutral" | "success" | "info" | "warning" | "error">;
+export type ChipColor = ColorRoles<"primary" | "tertiary" | "neutral" | "muted" | "success" | "info" | "warning" | "error">;
 export type ChipVariant = "filled" | "outlined";
-export type ChipSize = "sm" | "md";
+export type ChipSize = "sm" | "md" | "lg";
 export type ChipProps = Omit<ComponentProps<"span">, "children" | "color"> & {
     /** The text of the chip. */
     label: ReactNode;
     /**
      * What the chip stands for.
      * - A tag without a status: `"primary"` (purple), `"tertiary"` (teal) or
-     *   `"neutral"` (grey).
+     *   `"neutral"` (grey); on the website, `"muted"` (beige), as the category
+     *   and date of an article (with `size="lg"`).
      * - A status: `"success"` (teal), `"info"` (blue), `"warning"` (amber) or
      *   `"error"` (red).
      * @default "primary"
@@ -21,6 +22,10 @@ export type ChipProps = Omit<ComponentProps<"span">, "children" | "color"> & {
      */
     variant?: ChipVariant;
     /**
+     * `sm` for dense rows and inside other controls, `md` on its own, `lg` for
+     * the website's pills (16px semibold, 28px tall), as the category and date
+     * of an article or the facts of a job opening. Every colour and variant
+     * comes in every size.
      * @default "md"
      */
     size?: ChipSize;

package/dist/components/data-display/featured-image.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps, ReactElement, ReactNode } from 'react';
+export type FeaturedImageProps = Omit<ComponentProps<"div">, "children"> & {
+    /** The photo. */
+    src: string;
+    /**
+     * What the photo shows, for screen readers; `""` when it is decoration
+     * and the text beside it says it all.
+     */
+    alt: string;
+    /**
+     * The image element to render instead of the plain `<img>`, such as
+     * `next/image` with `fill`: `imageRender={<NextImage src={photo} alt=""
+     * fill sizes="(min-width: 1024px) 50vw, 100vw" />}`, or an `<img>` with
+     * attributes of its own (`loading="lazy"` below the fold, `srcSet`). Its
+     * own props win over `src` and `alt`.
+     */
+    imageRender?: ReactElement;
+    /**
+     * A call to action on the photo, 32px from its bottom right corner: an
+     * `ActionButton`, `size="lg"` on wide screens and `"sm"` on phones.
+     */
+    action?: ReactNode;
+};
+/**
+ * A large photo with the website's 64px corners, and optionally a call to
+ * action on it, as in the website's hero grid and promo block.
+ *
+ * ```tsx
+ * <FeaturedImage
+ *   src="/bilder/familie.jpg"
+ *   alt="En familie på kjøkkenet"
+ *   action={
+ *     <ActionButton render={<NextLink href="/lan" />}>Se våre lån</ActionButton>
+ *   }
+ * />
+ * ```
+ *
+ * From 1024px it fills the height its row gives it (the photo is cropped to
+ * fit); below that it keeps the website's 1 : 0.7. The action comes after
+ * the photo in the reading order.
+ */
+export declare function FeaturedImage({ src, alt, imageRender, action, className, ...rest }: FeaturedImageProps): import("react").JSX.Element;

package/dist/components/data-display/index.d.ts

@@ -2,3 +2,15 @@ export * from './data-field';
 export * from './card';
 export * from './chip';
 export * from './tooltip';
+export * from './avatar';
+export * from './star-rating';
+export * from './table';
+export * from './rich-text';
+export * from './featured-image';
+export * from './video-player';
+export * from './link-card';
+export * from './media-card';
+export * from './service-card';
+export * from './testimonial-card';
+export * from './article-card';
+export * from './partner-row';

package/dist/components/data-display/link-card.d.ts

@@ -0,0 +1,52 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+import { SurfaceRoles } from '../color-roles';
+export type LinkCardSurface = SurfaceRoles<"base" | "subtle" | "muted" | "contrast" | "contrast-accent">;
+/** A link card always leads somewhere: an `href`, or a router link. */
+type LinkCardTarget = {
+    /** Where the card leads. */
+    href: string;
+    render?: never;
+} | {
+    href?: never;
+    /**
+     * A router link to render instead of the `<a>`, carrying its own
+     * destination: `render={<NextLink href="/lan" />}`.
+     */
+    render: ReactElement;
+};
+export type LinkCardProps = Omit<useRender.ComponentProps<"a">, "ref" | "title" | "children" | "href" | "render"> & LinkCardTarget & {
+    /** The rendered element: the `<a>`, or the link passed to `render`. */
+    ref?: Ref<HTMLElement>;
+    /** The text of the card, which is also the name of the link. */
+    title: ReactNode;
+    /**
+     * The element for the title, a `<p>` by default. Pass a heading where the
+     * page outline needs one: `titleRender={<h3 />}`.
+     */
+    titleRender?: ReactElement;
+    /**
+     * The colour of the card, after its `bg` token: `"base"` (white),
+     * `"subtle"` (grey), `"muted"` (beige), `"contrast"` (near-black) or
+     * `"contrast-accent"` (deep purple). On the last two the text and the
+     * arrow are white.
+     * @default "base"
+     */
+    surface?: LinkCardSurface;
+};
+/**
+ * The website's navigation card: a title and a round arrow, and the whole card
+ * is one link, as in the grids of links to Lån, Sparing and Forsikring.
+ *
+ * ```tsx
+ * <LinkCard href="/lan" title="Lån" surface="muted" />
+ * <LinkCard render={<NextLink href="/sparing" />} title="Sparing" surface="contrast" />
+ * ```
+ *
+ * On hover the card takes the website's purple tint (a dark one on the dark
+ * surfaces) and the arrow slides to the right. It fills the cell its grid
+ * gives it, at least 240px tall, with the title at the top and the arrow at
+ * the bottom. The link is named by the title; the arrow is decoration.
+ */
+export declare function LinkCard({ title, titleRender, surface, render, ref, className, ...rest }: LinkCardProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

package/dist/components/data-display/media-card.d.ts

@@ -0,0 +1,102 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+import { SurfaceRoles } from '../color-roles';
+export type MediaCardSurface = SurfaceRoles<"base" | "subtle" | "muted" | "contrast" | "contrast-accent">;
+export type MediaCardOrientation = "horizontal" | "vertical";
+export type MediaCardImagePosition = "start" | "end";
+/** `alt` is required with a photo, `""` when it is decoration. */
+type MediaCardImage = {
+    /** The photo. Without one, the card is text only. */
+    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` with `fill`, or an `<img loading="lazy">`. Its own props
+     * win over `src` and `alt`.
+     */
+    imageRender?: ReactElement;
+} | {
+    src?: undefined;
+    alt?: undefined;
+    imageRender?: undefined;
+};
+export type MediaCardProps = Omit<useRender.ComponentProps<"div">, "ref" | "title" | "children"> & MediaCardImage & {
+    /**
+     * The rendered element: the `<div>`, or the element passed to `render`.
+     * A `render` element with `href` or `to` makes the whole card one link,
+     * named by its title: `render={<NextLink href="/lan" />}`.
+     */
+    ref?: Ref<HTMLElement>;
+    /** The title of the card. */
+    title: ReactNode;
+    /**
+     * The element for the title, an `<h2>` by default:
+     * `titleRender={<h3 />}`.
+     */
+    titleRender?: ReactElement;
+    /** The text under the title. */
+    text?: ReactNode;
+    /**
+     * `"horizontal"`: text and photo side by side in a coloured card, one
+     * above the other below 1024px. `"vertical"`: no colour of its own, the
+     * photo above or below centred text, for a row of cards.
+     * @default "horizontal"
+     */
+    orientation?: MediaCardOrientation;
+    /**
+     * Where the photo sits: `"start"` before the text (on the left, or on
+     * top), `"end"` after it. Left out, it is after the text on a horizontal
+     * card and above it on a vertical one, as on the website.
+     */
+    imagePosition?: MediaCardImagePosition;
+    /**
+     * Horizontal cards only: the photo fills its half of the card edge to
+     * edge, instead of sitting inside it with round corners.
+     * @default false
+     */
+    imageAsBackground?: boolean;
+    /**
+     * Horizontal cards only: the colour of the card, after its `bg` token.
+     * On `"contrast"` and `"contrast-accent"` the text is white; give a
+     * `Link` in `action` `color="contrast"` there.
+     * @default "base"
+     */
+    surface?: MediaCardSurface;
+    /**
+     * The call to action under the text: an `ActionButton`, or a `Link`
+     * with `arrow`. Left out when the card itself is a link, which cannot
+     * hold another.
+     */
+    action?: ReactNode;
+    /** The price example under the action, in the small print. */
+    priceExample?: ReactNode;
+};
+/**
+ * The website's picture-and-text card. Horizontal, it is a coloured card with
+ * the text in one half and the photo in the other, as the product cards on
+ * leabank.no's home page; vertical, it is a photo with centred text under it,
+ * for a row of three.
+ *
+ * ```tsx
+ * <MediaCard
+ *   surface="subtle"
+ *   title="Forbrukslån"
+ *   text="Lån fra 10 000 til 500 000 kroner uten sikkerhet."
+ *   src="/bilder/familie.jpg"
+ *   alt=""
+ *   action={<ActionButton render={<NextLink href="/lan" />}>Søk om forbrukslån</ActionButton>}
+ *   priceExample="Eff. rente 12,5 %, 150 000 kr o/5 år …"
+ * />
+ * ```
+ *
+ * The horizontal card is two equal columns from 1024px (the photo fills its
+ * column), and one column below, where the photo is 1 : 0.6. A `render`
+ * element with `href` or `to` makes the whole card one link, named by its
+ * title and described by its text; it then has no `action`.
+ */
+export declare function MediaCard({ title, titleRender, text, src, alt, imageRender, orientation, imagePosition, imageAsBackground, surface, action, priceExample, render, ref, className, ...rest }: MediaCardProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

package/dist/components/data-display/partner-row.d.ts

@@ -0,0 +1,46 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, Ref } from 'react';
+/** `alt` is required with a logo. */
+type PartnerRowLogo = {
+    /** 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>`, 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 PartnerRowProps = Omit<useRender.ComponentProps<"div">, "ref"> & PartnerRowLogo & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+};
+/**
+ * One partner in the website's list of partners: text about the partner, and
+ * the logo on a white tile beside it, over a 1px line.
+ *
+ * ```tsx
+ * <PartnerRow src="/logoer/partner.svg" alt="">
+ *   <RichText>
+ *     <h3>Partner AS</h3>
+ *     <p>Vi samarbeider med …</p>
+ *   </RichText>
+ * </PartnerRow>
+ * ```
+ *
+ * The text is the children: usually `RichText` with the CMS content. Two
+ * columns 64px apart from 1024px (the tile is 240 to 360px wide and 220px
+ * tall), one column below. It takes the width it is given; the list
+ * (`PartnerList`) sets it. Pass `render={<li />}` inside a list.
+ */
+export declare function PartnerRow({ src, alt, imageRender, render, ref, className, children, ...rest }: PartnerRowProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

package/dist/components/data-display/rich-text.d.ts

@@ -0,0 +1,27 @@
+import { useRender } from '@base-ui/react/use-render';
+import { Ref } from 'react';
+export type RichTextProps = Omit<useRender.ComponentProps<"div">, "ref"> & {
+    /** The rendered element: the `<div>`, or the element passed to `render`. */
+    ref?: Ref<HTMLElement>;
+};
+/**
+ * Styles text from the CMS: headings, paragraphs, bold, italic, underline
+ * and strikethrough, lists, links, quotes, code and images, on Paloma's text
+ * styles and the website's spacing. It styles the elements inside it and
+ * renders nothing of its own but a `div`.
+ *
+ * ```tsx
+ * <RichText>{renderBlocks(blocks)}</RichText>
+ * ```
+ *
+ * It does not sanitise. Markup from the CMS as React elements (as the
+ * website's `renderBlocks` makes them) is safe as it is; an HTML string has
+ * to be sanitised first (the website uses DOMPurify) and goes in through
+ * `dangerouslySetInnerHTML`.
+ *
+ * Only bare elements are styled, the way the CMS writes them: an element with
+ * a class of its own, such as a Paloma `Text` or `Link`, keeps its own look.
+ * Headings step down on narrow screens as on the website; set `text-align`
+ * with `className` or `style` to centre the text.
+ */
+export declare function RichText({ render, ref, className, ...rest }: RichTextProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;

package/dist/components/data-display/service-card.d.ts

@@ -0,0 +1,80 @@
+import { useRender } from '@base-ui/react/use-render';
+import { ReactElement, ReactNode, Ref } from 'react';
+import { SurfaceRoles } from '../color-roles';
+export type ServiceCardSurface = SurfaceRoles<"base" | "subtle" | "muted" | "contrast" | "contrast-accent">;
+export type ServiceCardLayout = "stacked" | "row";
+/** `alt` is required with a photo, `""` when it is decoration. */
+type ServiceCardImage = {
+    /** The photo. Without one, the card is text only. */
+    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` with `fill`. Its own props win over `src` and `alt`.
+     */
+    imageRender?: ReactElement;
+} | {
+    src?: undefined;
+    alt?: undefined;
+    imageRender?: undefined;
+};
+export type ServiceCardProps = Omit<useRender.ComponentProps<"div">, "ref" | "title" | "children"> & ServiceCardImage & {
+    /**
+     * The rendered element: the `<div>`, or the element passed to `render`.
+     * A `render` element with `href` or `to` makes the whole card one link,
+     * named by its title, as on the website: `render={<NextLink href="/lan" />}`.
+     */
+    ref?: Ref<HTMLElement>;
+    /** The title of the card. */
+    title: ReactNode;
+    /**
+     * The element for the title, an `<h2>` by default:
+     * `titleRender={<h3 />}`.
+     */
+    titleRender?: ReactElement;
+    /** The text under the title. */
+    text?: ReactNode;
+    /**
+     * A 40px icon above the title, such as a Lucide icon or an `<img>`.
+     * Mark it `aria-hidden`, or give an `<img>` `alt=""`.
+     */
+    icon?: ReactNode;
+    /**
+     * `"stacked"`: the photo fills the card above the text, for the large
+     * and small cells of the website's grid. `"row"`: a square photo before
+     * the text, for the wide cells (320px tall); stacked below 1024px.
+     * @default "stacked"
+     */
+    layout?: ServiceCardLayout;
+    /**
+     * The colour of the card, after its `bg` token. On `"contrast"` and
+     * `"contrast-accent"` the text is white.
+     * @default "base"
+     */
+    surface?: ServiceCardSurface;
+};
+/**
+ * A card of the website's service grid: a photo, an optional icon, a title and
+ * a line of text, in one of the section colours. It fills the grid cell it is
+ * given, and the photo takes the room the text leaves.
+ *
+ * ```tsx
+ * <ServiceCard
+ *   render={<NextLink href="/lan/forbrukslan" />}
+ *   title="Forbrukslån"
+ *   text="Lån fra 10 000 til 500 000 kroner uten sikkerhet."
+ *   src="/bilder/familie.jpg"
+ *   alt=""
+ *   surface="muted"
+ * />
+ * ```
+ *
+ * On the website the whole card is a link: pass it in `render`, and the link
+ * is named by the title and described by the text.
+ */
+export declare function ServiceCard({ title, titleRender, text, icon, src, alt, imageRender, layout, surface, render, ref, className, ...rest }: ServiceCardProps): ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};