@abyss-project/commons-front-core 8.2.0 → 9.0.0

package/dist/{CookieConsentSettings.component-BKsYgpMa.js → CookieConsentSettings.component-DEGCDEJW.js}

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import { useState as m, useEffect as C } from "react";
 import { Card as v, CardContent as b, Stack as u, Typography as o, FormControlLabel as l, Box as r, Checkbox as d, Button as M } from "@mui/material";
-import { g as R, u as x } from "./AbyssCookieConsentProvider-TE46ywnd.js";
+import { g as R, u as x } from "./AbyssCookieConsentProvider-B-PlGbFf.js";
 const B = () => {
   const t = R(), { consent: i, save: y } = x(), [h, g] = m((i == null ? void 0 : i.analytics) ?? !1), [k, f] = m((i == null ? void 0 : i.marketing) ?? !1), c = i == null ? void 0 : i.analytics, n = i == null ? void 0 : i.marketing;
   return C(() => {

package/dist/components/business/CloudImport/CloudImport.d.ts

@@ -0,0 +1,24 @@
+import { IFile, ISpace } from '@abyss-project/cloud';
+import { CloudPicker } from '../../../hooks/cloud-picker.types';
+export interface CloudImportProps {
+    /** Picker state and actions, as returned by `useCloudPicker`. */
+    cloudPicker: CloudPicker;
+    /** Receives the Space the files were picked from, and the picked files. */
+    onImport(space: ISpace, files: IFile[]): void;
+    /** Several files can be picked; one otherwise. */
+    multiple?: boolean;
+    /** Files larger than this, in bytes, are not listed. */
+    maxSize?: number;
+    /**
+     * The files offered, as the HTML `accept` attribute lists them: MIME types (`application/pdf`),
+     * wildcards (`image/*`) and extensions (`.pdf`). Absent or empty: every file.
+     */
+    accept?: string[];
+}
+/**
+ * The AbyssCloud picker: the user picks a Space (personal, one group per organization, shared
+ * with them), opens its folders and picks files, then imports them. Mounting it provisions the
+ * Spaces (`cloudPicker.refresh`); a failed provisioning with nothing listed offers one « Créer mon
+ * cloud » retry. Files larger than `maxSize` or of a type `accept` refuses are not listed.
+ */
+export declare function CloudImport({ cloudPicker, onImport, multiple, maxSize, accept, }: CloudImportProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/business/CloudImport/cloud-import-tree.d.ts

@@ -0,0 +1,22 @@
+import { IFile, IFolder } from '@abyss-project/cloud';
+/** What decides whether a cloud file is offered, and how picked files are tracked. */
+export interface CloudTreeContext {
+    multiple: boolean;
+    maxSize?: number;
+    accept?: string[];
+    selectedIds: ReadonlySet<string>;
+    getFileThumbnailUrl(fileId: string): string;
+    /** Adds the files to the selection (replaces it when not `multiple`). */
+    select(files: IFile[]): void;
+    unselect(files: IFile[]): void;
+}
+/** The key of a file in the selection. */
+export declare const fileKey: (file: IFile) => string;
+/** Whether a file is listed: within the size limit and of an accepted type. */
+export declare const isOffered: (file: IFile, maxSize: number | undefined, accept: string[] | undefined) => boolean;
+/** The list of a folder level: sub-folders first, then the files the picker offers. */
+export declare function CloudTreeLevel({ folders, files, context, }: {
+    folders: IFolder[];
+    files: IFile[];
+    context: CloudTreeContext;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/business/ImportFromCloudModal/ImportFromCloudModal.d.ts

@@ -0,0 +1,21 @@
+import { IFile, ISpace } from '@abyss-project/cloud';
+import { CloudPicker } from '../../../hooks/cloud-picker.types';
+export interface ImportFromCloudModalProps {
+    open: boolean;
+    onClose(): void;
+    /** Receives the Space the files were picked from, and the files; the modal then closes. */
+    onImport(space: ISpace, files: IFile[]): void | Promise<void>;
+    /** Picker state and actions, as returned by `useCloudPicker`. */
+    cloudPicker: CloudPicker;
+    multiple?: boolean;
+    /** Files larger than this, in bytes, are not listed. */
+    maxSize?: number;
+    /** The files offered, as the HTML `accept` attribute lists them. Absent or empty: every file. */
+    accept?: string[];
+}
+/**
+ * The AbyssCloud picker (`CloudImport`) in a `Modal`: a bottom sheet below 768 px. Importing hands
+ * the files to `onImport` and closes the modal; the host runs the import and reports its outcome.
+ * The picker mounts on opening, which is what provisions the user's Spaces.
+ */
+export declare function ImportFromCloudModal({ open, onClose, onImport, cloudPicker, multiple, maxSize, accept, }: ImportFromCloudModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/business/QRCodeModal/QRCodeModal.d.ts

@@ -0,0 +1,18 @@
+export interface QRCodeModalProps {
+    open: boolean;
+    onClose(): void;
+    /** The link the QR code encodes. */
+    url: string;
+    /** Hides the « Partager » button. */
+    maskShareButton?: boolean;
+    /** Hides the link and its copy button. */
+    maskCopyButton?: boolean;
+}
+/** Side of the QR code image, in px: large enough for a phone camera across a desk. */
+export declare const QR_CODE_SIZE = 200;
+/**
+ * A link as a QR code, in a `Modal` (a bottom sheet below 768 px): the code on a light page, the
+ * link with its copy button (`CopyField`), and « Partager », which opens the device's share sheet
+ * or, without one, copies the link.
+ */
+export declare function QRCodeModal({ open, onClose, url, maskShareButton, maskCopyButton, }: QRCodeModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/business/QRCodeModal/QRCodeModal.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/business/index.d.ts

@@ -1 +1,4 @@
 export * from './InfectedDownloadModal/InfectedDownloadModal';
+export * from './CloudImport/CloudImport';
+export * from './ImportFromCloudModal/ImportFromCloudModal';
+export * from './QRCodeModal/QRCodeModal';

package/dist/components/data/DataTable/data-table.types.d.ts

@@ -29,6 +29,16 @@ export interface DataColumn<T> {
     mono?: boolean;
     /** `Default` when absent; an `Optional` column is hidden from 768 to 1199 px. */
     priority?: ColumnPriority;
+    /**
+     * The cells run over several lines instead of being cut by an ellipsis (words stay whole): for a
+     * label whose whole text matters. The other columns keep their single line.
+     */
+    wrap?: boolean;
+    /**
+     * The header is read by assistive technologies but not drawn: a narrow column of icon actions
+     * whose label would only show cut.
+     */
+    hideHeader?: boolean;
 }
 export interface DataTableSelection {
     selected: string[];

package/dist/components/data/UsageMeter/UsageMeter.d.ts

@@ -0,0 +1,31 @@
+/** Shares of `max` (0.8 = 80 %) from which the meter turns to the warning, then danger color. */
+export interface UsageMeterThresholds {
+    warning: number;
+    danger: number;
+}
+export interface UsageMeterProps {
+    /** The consumption, in the unit of `max`. */
+    value: number;
+    /** The ceiling. Without it, only the value is shown, no gauge. */
+    max?: number;
+    thresholds?: UsageMeterThresholds;
+    label: string;
+    /** Formats `value` and `max` for display (`intl.formatNumber`, bytes, credits). */
+    formatValue(value: number): string;
+}
+/** How full the meter is, against its thresholds. */
+export declare enum UsageLevel {
+    Normal = "normal",
+    Warning = "warning",
+    Danger = "danger"
+}
+/** The level of a consumption share, against the thresholds (none: always normal). */
+export declare const usageLevel: (share: number, thresholds?: UsageMeterThresholds) => UsageLevel;
+/**
+ * A consumption against its ceiling (storage, credits, quota): the label, the value and the
+ * ceiling in mono, and a gauge filled with the accent, then the warning and danger colors once
+ * the share reaches `thresholds`. The gauge is a `meter` named by the label, its value text the
+ * formatted "value of max"; a consumption above the ceiling fills it whole. Without `max`, the
+ * value alone.
+ */
+export declare function UsageMeter({ value, max, thresholds, label, formatValue, }: UsageMeterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/data/UsageMeter/UsageMeter.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -3,3 +3,4 @@ export * from './KeyValueList/KeyValueList';
 export * from './StatTile/StatTile';
 export * from './Sparkline/Sparkline';
 export * from './chart-theme';
+export * from './UsageMeter/UsageMeter';

package/dist/components/inputs/ContextSelector/ContextSelector.d.ts

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+/** The three scopes a context can take. */
+export declare enum ContextKind {
+    Personal = "personal",
+    Organization = "organization",
+    Project = "project"
+}
+/** The selected context: the personal space, a whole organization, or one of its projects. */
+export type ContextValue = {
+    kind: ContextKind.Personal;
+} | {
+    kind: ContextKind.Organization;
+    organizationId: string;
+} | {
+    kind: ContextKind.Project;
+    organizationId: string;
+    projectId: string;
+};
+/** A project of an organization. */
+export interface ContextSelectorProject {
+    id: string;
+    name: string;
+    /** A `ProjectAvatar`, for instance; a folder icon without it. */
+    avatar?: ReactNode;
+}
+/** An organization the user belongs to, with its projects. */
+export interface ContextSelectorOrganization {
+    id: string;
+    name: string;
+    /** An `OrganizationAvatar`, for instance; a building icon without it. */
+    avatar?: ReactNode;
+    projects?: ContextSelectorProject[];
+}
+/** The personal space. */
+export interface ContextSelectorPersonal {
+    /** The user's alias, for instance; « Mon espace » without it. */
+    label?: string;
+    /** A `UserAvatar`, for instance; a person icon without it. */
+    avatar?: ReactNode;
+}
+export interface ContextSelectorData {
+    personal: ContextSelectorPersonal;
+    organizations: ContextSelectorOrganization[];
+}
+export interface ContextSelectorProps {
+    data: ContextSelectorData;
+    value: ContextValue;
+    onChange(next: ContextValue): void;
+    /** Label above the field, its accessible name. */
+    label: string;
+    disabled?: boolean;
+}
+/**
+ * The scope picker of a page: the personal space first, then one group per organization (headed
+ * by its name) holding an entry for the whole organization and one per project. The field shows
+ * the avatar of the selected context; typing filters the entries. Avatars are passed by the host
+ * (they need its storage URLs) and are hidden from assistive technology: the label names each
+ * entry.
+ */
+export declare function ContextSelector({ data, value, onChange, label, disabled, }: ContextSelectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/ContextSelector/ContextSelector.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/CopyField/CopyField.d.ts

@@ -0,0 +1,19 @@
+export interface CopyFieldProps {
+    value: string;
+    /** Hides the value behind dots until the user reveals it; the copy button still copies it. */
+    masked?: boolean;
+    /** Called each time the user reveals a masked value. */
+    onReveal?(): void;
+    /** Label of the copy button, named after what it copies ("Copier la clé"). */
+    copyLabel: string;
+}
+/** How long the copy button shows its check mark after a copy, in ms. */
+export declare const COPY_FEEDBACK_MS = 2000;
+/**
+ * A value to copy (API key, connection identifier): shown in mono in a read-only box, with a
+ * button that copies it to the clipboard. Masked, the value is replaced by dots and a toggle
+ * reveals it (calling `onReveal`). The outcome of a copy is announced in a polite live region; a
+ * success turns the copy icon into a check mark for a moment, a failure is also written under the
+ * field.
+ */
+export declare function CopyField({ value, masked, onReveal, copyLabel, }: CopyFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/CopyField/CopyField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/DropZone/DropZone.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { Accept } from 'react-dropzone';
+import { CloudImportWiring } from '../../../hooks/cloud-picker.types';
+export interface DropZoneProps {
+    /** The files dropped or picked from the device, once the size and type checks passed. */
+    onDrop(files: File[]): void;
+    /** Several files at once. Defaults to `true`. */
+    multiple?: boolean;
+    /** Accepted types, as `react-dropzone` reads them: `{ 'image/*': ['.png', '.jpg'] }`. */
+    accept?: Accept;
+    /** Largest accepted file, in bytes; shown under the zone. */
+    maxSize?: number;
+    /** Title above the zone, which names it. */
+    title?: string;
+    /**
+     * AbyssCloud picker (from `useCloudPicker`) plus the import action, which receives the Space
+     * the files were picked from. The AbyssCloud entry exists only when this is passed.
+     */
+    cloudImport?: CloudImportWiring;
+    /** Replaces the icon and the prompt inside the zone (a preview of the current file, say). */
+    children?: ReactNode;
+}
+/**
+ * A zone to drop files on, with a button that opens the device's file picker and, when
+ * `cloudImport` is wired, an « Importer depuis AbyssCloud » entry. Files larger than `maxSize` and
+ * types `accept` refuses are left out, and the reason is written under the zone (`role="alert"`);
+ * a single file that is too large is not handed over at all. Cloud files arrive through
+ * `cloudImport.onImport`, never through `onDrop`.
+ */
+export declare function DropZone({ onDrop, multiple, accept, maxSize, title, cloudImport, children, }: DropZoneProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/DropZone/DropZone.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/FormField/FormField.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement, ReactNode } from 'react';
+export interface FormFieldProps {
+    label: string;
+    /** A hint under the field, always shown. */
+    help?: ReactNode;
+    /** The error message: the field turns to the danger color and is marked invalid. */
+    error?: ReactNode;
+    required?: boolean;
+    /**
+     * One MUI control of the input family, without a label of its own: `OutlinedInput`,
+     * `InputBase`, or `Select`.
+     */
+    children: ReactElement<FieldControlProps>;
+}
+/** What the field gives its control so that the label, the hint and the error reach it. */
+interface FieldControlProps {
+    id?: string;
+    'aria-describedby'?: string;
+    labelId?: string;
+}
+/**
+ * A labelled form field (mock-up `.field`): the label above the control, a hint and an error
+ * under it. The control gets the `id` the label points to (its own `id` when it has one) and an
+ * `aria-describedby` listing the hint and the error; a `Select` also gets the `labelId` that
+ * names its listbox button. The error and `required` state reach the control through the MUI form
+ * control: red border, `aria-invalid`, the `required` attribute and the asterisk of the label.
+ */
+export declare function FormField({ label, help, error, required, children, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/FormField/FormField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/ImportButton/ImportButton.d.ts

@@ -0,0 +1,33 @@
+import { ChangeEvent, MouseEvent, ReactElement } from 'react';
+import { CloudImportWiring } from '../../../hooks/cloud-picker.types';
+/** What the trigger receives: it opens the menu of sources. */
+interface TriggerProps {
+    onClick?(event: MouseEvent<HTMLElement>): void;
+    'aria-haspopup'?: 'menu';
+    'aria-expanded'?: boolean;
+}
+export interface ImportButtonProps {
+    /** The trigger, a button: it opens the menu of sources. */
+    children: ReactElement<TriggerProps>;
+    /** An import is running: the entries are disabled. */
+    isLoading: boolean;
+    /** « Mon ordinateur »: receives the change event of the file input. */
+    handleFileUpload(event: ChangeEvent<HTMLInputElement>): Promise<void>;
+    /** « Lien URL »: the entry exists only when this is passed. */
+    handleUploadFromUrl?(url: string): Promise<void>;
+    multiple?: boolean;
+    /** Largest file the AbyssCloud picker lists, in bytes. */
+    maxSize?: number;
+    /** Accepted types, as the HTML `accept` attribute lists them. */
+    accept?: string[];
+    /** AbyssCloud picker plus the import action: the « AbyssCloud » entry exists only when passed. */
+    cloudImport?: CloudImportWiring;
+}
+/**
+ * Wraps a trigger and opens a menu of upload sources: the device's files, a link (with
+ * `handleUploadFromUrl`) and AbyssCloud (with `cloudImport`). The link opens a small modal whose
+ * address is checked before it can be confirmed; it closes once the import succeeded and says so
+ * when it failed. AbyssCloud opens `ImportFromCloudModal`.
+ */
+export declare function ImportButton({ children, isLoading, handleFileUpload, handleUploadFromUrl, multiple, maxSize, accept, cloudImport, }: ImportButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/ImportButton/ImportButton.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/NumberField/NumberField.d.ts

@@ -0,0 +1,21 @@
+export interface NumberFieldProps {
+    label: string;
+    /** The number shown; `null` for an empty field. */
+    value: number | null;
+    /** Called with each number typed, `null` once emptied, and the clamped, rounded number on leave. */
+    onChange(value: number | null): void;
+    /** Digits kept after the decimal mark: 0 for a quantity (default), 2 for an amount. */
+    decimals?: number;
+    /** Lowest number kept when the field is left; 0 by default. */
+    min?: number;
+    disabled?: boolean;
+    /** Unit or currency shown at the end of the field (`€`, `Go`). */
+    adornment?: string;
+}
+/**
+ * A labelled number input that follows the language of the viewer: « 1 234,50 » in French,
+ * « 1,234.50 » in English. While focused it shows what is typed (either decimal mark is read);
+ * on leaving it clamps to `min`, rounds to `decimals` and formats again. A value changed from
+ * outside (a linked field) is shown at once unless the field is being edited.
+ */
+export declare function NumberField({ label, value, onChange, decimals, min, disabled, adornment, }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/NumberField/NumberField.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/NumberField/number-input.d.ts

@@ -0,0 +1,13 @@
+/** The grouping and decimal separators of a locale. */
+export interface LocaleSeparators {
+    group: string;
+    decimal: string;
+}
+/** The grouping and decimal separators of a locale, read from `Intl` (never hardcoded). */
+export declare const getLocaleSeparators: (locale: string) => LocaleSeparators;
+/**
+ * Reads a typed number: the grouping separators of the locale (and the usual whitespace) are
+ * dropped, then « , » or « . » is the decimal mark, so « 50,5 » and « 50.5 » give the same number.
+ * Empty or non-numeric text gives `null`.
+ */
+export declare const parseNumberInput: (raw: string, separators: LocaleSeparators) => number | null;

package/dist/components/inputs/SettingsRow/SettingsRow.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface SettingsRowProps {
+    label: string;
+    description?: ReactNode;
+    /** The control of the setting: a switch, a select, a button. */
+    control: ReactNode;
+    /** `id` of the form element inside `control`: the label then labels it (`<label for>`). */
+    htmlFor?: string;
+}
+/**
+ * One setting of a settings list: its label and description on the left, its
+ * control on the right, rows split by a 1 px rule. Below 768 px the control goes under the text.
+ * The row is a `group` named by the label and described by the description; with `htmlFor` the
+ * label also labels the form element of the control.
+ */
+export declare function SettingsRow({ label, description, control, htmlFor, }: SettingsRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/SettingsRow/SettingsRow.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/inputs/index.d.ts

@@ -3,3 +3,10 @@ export * from './DateField/DateField';
 export * from './DateRangeField/DateRangeField';
 export * from './ColorField/ColorField';
 export * from './SegmentedControl/SegmentedControl';
+export * from './FormField/FormField';
+export * from './NumberField/NumberField';
+export * from './SettingsRow/SettingsRow';
+export * from './CopyField/CopyField';
+export * from './ContextSelector/ContextSelector';
+export * from './DropZone/DropZone';
+export * from './ImportButton/ImportButton';

package/dist/components/layers/Menu/Menu.d.ts

@@ -10,6 +10,8 @@ export declare enum MenuSeparator {
 export interface MenuItem {
     id: string;
     label: string;
+    /** Secondary line under the label; it describes the item (`aria-describedby`) without renaming it. */
+    description?: string;
     icon?: ReactNode;
     /** Shortcut hint shown at the end of the row, such as `⌘D`; the host binds the key itself. */
     shortcut?: string;

package/dist/components/meaning/Avatar/Avatar.d.ts

@@ -0,0 +1,41 @@
+/** Side of an avatar when the host gives none, in px. */
+export declare const AVATAR_DEFAULT_SIZE = 32;
+export interface UserAvatarProps {
+    userId: string;
+    /** The user's alias: accessible name, and its initial while there is no picture. */
+    alias: string;
+    /** Whether the user has uploaded a picture; without one, no request is made. */
+    hasThumbnail: boolean;
+    /** Changes when the picture does (a timestamp after an upload): appended to the URL. */
+    cache?: string;
+    /** Side in px. Defaults to `AVATAR_DEFAULT_SIZE`. */
+    size?: number;
+    /** URL of a user's picture, from the host's storage helpers. */
+    getProfilePictureUrl(userId: string): string;
+}
+/** A person: their picture in a disc, or the initial of their alias. */
+export declare function UserAvatar({ userId, alias, hasThumbnail, cache, size, getProfilePictureUrl, }: UserAvatarProps): import("react/jsx-runtime").JSX.Element;
+export interface OrganizationAvatarProps {
+    orgId: string;
+    /** The organization's name: accessible name, and its initial while there is no logo. */
+    name: string;
+    hasThumbnail: boolean;
+    cache?: string;
+    size?: number;
+    /** URL of an organization's logo, from the host's storage helpers. */
+    getLogoUrl(orgId: string): string;
+}
+/** An organization: its logo in a rounded square, or the initial of its name. */
+export declare function OrganizationAvatar({ orgId, name, hasThumbnail, cache, size, getLogoUrl, }: OrganizationAvatarProps): import("react/jsx-runtime").JSX.Element;
+export interface ProjectAvatarProps {
+    projectId: string;
+    /** The project's title: accessible name, and its initial while there is no picture. */
+    title: string;
+    hasThumbnail: boolean;
+    cache?: string;
+    size?: number;
+    /** URL of a project's picture, from the host's storage helpers. */
+    getProjectPictureUrl(projectId: string): string;
+}
+/** A project: its picture in a rounded square, or the initial of its title. */
+export declare function ProjectAvatar({ projectId, title, hasThumbnail, cache, size, getProjectPictureUrl, }: ProjectAvatarProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/meaning/Avatar/Avatar.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/meaning/index.d.ts

@@ -4,3 +4,4 @@ export * from './SeverityBadge/SeverityBadge';
 export * from './ScanBadge/ScanBadge';
 export * from './RoleBadge/RoleBadge';
 export * from './ToolIcon/ToolIcon';
+export * from './Avatar/Avatar';

package/dist/components/states/Callout/Callout.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export declare enum CalloutSeverity {
+    Info = "info",
+    Success = "success",
+    Warning = "warning",
+    Danger = "danger"
+}
+export interface CalloutProps {
+    severity: CalloutSeverity;
+    title?: string;
+    children: ReactNode;
+    /** A button or a link, placed after the text (under it below 768 px). */
+    action?: ReactNode;
+    /** Shows a close button; the host removes the callout. */
+    onClose?(): void;
+    /** Replaces the icon of the severity. */
+    icon?: ReactNode;
+}
+/**
+ * A banner inside a page (overdue invoice, trial, quota reached): the soft fill and 1 px border of
+ * its severity, the severity icon, an optional title, the text, an optional action and an
+ * optional close button. A danger callout is an `alert` (announced as soon as it appears), the
+ * others a `status`; a titled callout is named by its title.
+ */
+export declare function Callout({ severity, title, children, action, onClose, icon, }: CalloutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/states/Callout/Callout.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/states/index.d.ts

@@ -1 +1,2 @@
 export * from './PageState/PageState';
+export * from './Callout/Callout';

package/dist/components/structure/Tabs/Tabs.d.ts

@@ -0,0 +1,34 @@
+/** The two rows of tabs: the page navigation, and a quieter sub-navigation under it. */
+export declare enum TabsVariant {
+    Primary = "primary",
+    Secondary = "secondary"
+}
+export interface TabItem<V extends string = string> {
+    value: V;
+    label: string;
+    /** Route inside the app: the tab becomes a router link. */
+    to?: string;
+    /** A count (formatted with the viewer's locale) or a short text after the label. */
+    badge?: number | string;
+    /** Left out of the row, as if absent (an entry the viewer has no right to). */
+    hidden?: boolean;
+}
+export interface TabsProps<V extends string = string> {
+    items: TabItem<V>[];
+    /** Value of the selected tab. */
+    value: V;
+    /** Called with the value of the tab the user activates (click, Enter, Space). */
+    onChange?(value: V): void;
+    variant: TabsVariant;
+    'aria-label': string;
+}
+/**
+ * A row of tabs (mock-up `.tabs`): the primary variant underlines the selected tab with the
+ * accent over a 1 px rule, the secondary one fills it with `bg.raised`. A tab with `to` is a
+ * router link (the page navigation of the account), any other a button. A `tablist` with one tab
+ * stop, on the selected tab: the arrow keys move the focus between tabs (wrapping), Home and End
+ * jump to the ends, Enter or Space activates. The row scrolls sideways when the tabs do not fit,
+ * with a fade at its end while tabs are left beyond it, and keeps the selected or focused tab in
+ * view, including when the row is first laid out or resized. Below 768 px every tab is 44 px tall.
+ */
+export declare function Tabs<V extends string>({ items, value, onChange, variant, 'aria-label': ariaLabel, }: TabsProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/components/structure/Tabs/Tabs.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/structure/index.d.ts

@@ -8,3 +8,4 @@ export * from './Surface/Surface';
 export * from './Toolbar/Toolbar';
 export * from './FilterBar/FilterBar';
 export * from './SplitView/SplitView';
+export * from './Tabs/Tabs';

package/dist/cookie-consent.js

@@ -1,5 +1,5 @@
-import { A as e, c as a, C as n, D as C, R as i, V as t, d as r, f as A, r as k, e as c, u as l, b, a as f, w as u } from "./AbyssCookieConsentProvider-TE46ywnd.js";
-import { C as E } from "./CookieConsentSettings.component-BKsYgpMa.js";
+import { A as e, c as a, C as n, D as C, R as i, V as t, d as r, f as A, r as k, e as c, u as l, b, a as f, w as u } from "./AbyssCookieConsentProvider-B-PlGbFf.js";
+import { C as E } from "./CookieConsentSettings.component-DEGCDEJW.js";
 export {
   e as AbyssCookieConsentProvider,
   a as COOKIE_NAME,