@zvoove/unity-ui 2.29.0 → 2.30.0

package/dist/unity-ui.d.ts

@@ -0,0 +1,4951 @@
+import { ChangeEventHandler } from 'react';
+import { ComponentRef } from 'react';
+import { CSSProperties } from 'react';
+import { default as default_2 } from 'react';
+import { Dispatch } from 'react';
+import { ElementType } from 'react';
+import { ForwardedRef } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { Icon as Icon_2 } from '@phosphor-icons/react';
+import { IconWeight } from '@phosphor-icons/react';
+import { JSX } from 'react/jsx-runtime';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { PropsWithChildren } from 'react';
+import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
+import { RefAttributes } from 'react';
+import { RefObject } from 'react';
+import { SetStateAction } from 'react';
+
+export declare const Accordion: {
+    <T extends readonly AccordionItem[]>({ items, onToggle, openItems, allowMultipleOpenItems, }: AccordionProps<T>): JSX.Element;
+    displayName: string;
+};
+
+export declare interface AccordionItem {
+    id: string;
+    title: string;
+    supportingText?: string;
+    children: ReactNode;
+    isOpen?: boolean;
+    disabled?: boolean;
+}
+
+export declare type AccordionItemId<T extends readonly AccordionItem[]> = T[number]['id'];
+
+export declare interface AccordionProps<T extends readonly AccordionItem[] = readonly AccordionItem[]> {
+    /**
+     * The children of the Accordion.
+     */
+    items: AccordionItem[];
+    /**
+     * The open items of the Accordion. By default, all items are closed. <br />
+     * The ids must match the `id` of the item. <br />
+     * When allowMultipleOpenItems is false, this should be a single id or undefined. <br />
+     * When allowMultipleOpenItems is true, this can be an array of ids or undefined.
+     */
+    openItems?: AccordionItemId<T> | AccordionItemId<T>[];
+    /**
+     * Callback when the accordion header is clicked <br />
+     * If provided, this will override the default behavior and you need to manage the open items yourself.
+     */
+    onToggle?: (item: AccordionItem) => void;
+    /**
+     * Whether to allow multiple open items or not.
+     * @default false
+     */
+    allowMultipleOpenItems?: boolean;
+}
+
+export declare const ActionCard: {
+    ({ header, children, footer, isOpen, expandable, onExpandToggle, }: ActionCardProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ActionCardProps {
+    /**
+     * Content rendered inside the card header area with a
+     * `surface-container-lowest` background. Wrapped in a horizontal Stack
+     * with standardised padding so the consumer only provides the inner nodes.
+     */
+    header?: ReactNode;
+    /** Card body content. */
+    children: ReactNode;
+    /**
+     * Content rendered inside the card footer area. Wrapped in a horizontal
+     * Stack with standardised padding so the consumer only provides the inner
+     * nodes (typically action buttons).
+     */
+    footer?: ReactNode;
+    /**
+     * Whether the ActionCard is expandable.
+     * @default false
+     */
+    expandable?: boolean;
+    /**
+     * Whether the ActionCard is open or closed.
+     * @default true
+     */
+    isOpen?: boolean;
+    /**
+     * Called when the header is clicked in expandable mode.
+     * Required when using `isOpen` (controlled) so the parent can update its state.
+     */
+    onExpandToggle?: () => void;
+}
+
+export declare interface ActionConfirmation {
+    /**
+     * Icon to swap to when confirmed (e.g. `'check'` for a copy action).
+     * When omitted, the original icon is kept and shown as filled instead.
+     */
+    icon?: CommonIconNames;
+    /**
+     * Confirmation text shown next to the action group (e.g. "Copied").
+     */
+    text?: string;
+    /**
+     * Duration in ms before the confirmation auto-reverts.
+     * Defaults to `3000`. Set to `0` for toggle actions that stay until toggled off.
+     * @default 3000
+     */
+    duration?: number;
+}
+
+declare const align: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+    readonly RIGHT: "right";
+};
+
+export declare type AlignItems = 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
+
+/**
+ * Types of announcements that can be made to screen readers.
+ */
+export declare type AnnouncementType = 'added' | 'removed' | 'cleared' | 'component-error' | 'count-changed';
+
+export declare const Avatar: ({ size, type: typeProp, name, image, initialsAmount, variant, }: AvatarProps) => JSX.Element;
+
+declare const AVATAR_SIZES: {
+    readonly SM: "sm";
+    readonly MD: "md";
+    readonly LG: "lg";
+};
+
+export declare const AvatarGroup: ({ children, maxLength, total }: AvatarGroupProps) => JSX.Element;
+
+export declare interface AvatarGroupProps {
+    /**
+     * The children of the button.
+     */
+    children: ReactNode;
+    /**
+     * Maximum number of avatars to display before showing a count
+     */
+    maxLength?: number;
+    /**
+     * Total number of avatars in the group
+     */
+    total?: number;
+}
+
+export declare interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The size of the avatar.
+     *
+     * Accepts a single value or a responsive object keyed by viewport.
+     *
+     * @default 'md'
+     *
+     * @remarks
+     * The values `'small' | 'medium' | 'large'` are **deprecated** and kept for
+     * backwards compatibility. They are mapped to `'sm' | 'md' | 'lg'` and will
+     * be removed in v3.0.0.
+     */
+    size?: ResponsiveType<AvatarSize | AvatarSizeLegacy>;
+    /**
+     * The type of the avatar
+     */
+    type?: 'initials' | 'check' | 'avatar' | 'image' | 'zvoove';
+    /**
+     * The image of the avatar
+     */
+    image?: string;
+    /**
+     * The name of the avatar
+     */
+    name?: string;
+    /**
+     * The amount of initials of the avatar
+     */
+    initialsAmount?: 1 | 2;
+    /**
+     * The variant of the avatar
+     */
+    variant?: 'round' | 'square';
+}
+
+export declare type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES];
+
+/* Excluded from this release type: AvatarSizeLegacy */
+
+declare type AxisVariant = 'X' | 'Y';
+
+export declare type BackgroundColors = 'background' | 'outline' | 'outline-variant' | 'outline-low' | 'primary' | 'primary-hover' | 'primary-active' | 'secondary' | 'tertiary' | 'primary-container' | 'secondary-container' | 'tertiary-container' | 'tertiary-container-hover' | 'tertiary-container-active' | 'primary-fixed' | 'primary-fixed-dim' | 'secondary-fixed' | 'secondary-fixed-dim' | 'tertiary-fixed' | 'tertiary-fixed-dim' | 'surface' | 'surface-bright' | 'surface-dim' | 'surface-variant' | 'surface-container-lowest' | 'surface-container-low' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'error' | 'error-container' | 'inverse-surface' | 'inverse-on-surface' | 'inverse-primary' | 'scrim' | 'yellow' | 'dark-yellow' | 'yellow-container' | 'green' | 'dark-green' | 'green-container' | 'pink' | 'dark-pink' | 'pink-container' | 'steel-blue' | 'dark-steel-blue' | 'steel-blue-container' | 'container-neutral' | 'container-neutral-hover' | 'code-surface' | 'code-surface-variant';
+
+export declare const Badge: ({ children, variant, content, dot, }: BadgeProps) => JSX.Element;
+
+export declare interface BadgeProps {
+    /**
+     * The children of the button.
+     */
+    children: ReactNode;
+    /**
+     * The variant of the component
+     */
+    variant?: 'primary' | 'secondary';
+    /**
+     * The content of the badge. If undefined, the badge will be hidden.
+     */
+    content?: ReactNode;
+    /**
+     * The dot prop changes a badge into a small dot
+     */
+    dot?: boolean;
+}
+
+export declare const Breadcrumbs: <T extends default_2.ElementType = "a">({ items, linkComponent: LinkComponent, homeIcon, }: BreadcrumbsProps<T>) => JSX.Element;
+
+export declare type BreadcrumbsItem<T extends React.ElementType = 'a'> = {
+    label: string;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+
+export declare type BreadcrumbsProps<T extends React.ElementType = 'a'> = {
+    /**
+     * The items of the component. <br />
+     * The items are displayed in the order they are passed. <br />
+     * `type BreadcrumbsItem = { label: string; href: string; onItemClick?: () => void; }`
+     */
+    items: BreadcrumbsItem<T>[];
+    /**
+     * The component to render for the link
+     * @default 'a'
+     */
+    linkComponent?: T | 'a';
+    /**
+     * The icon name for the home (first) breadcrumb item
+     * @default 'home'
+     */
+    homeIcon?: CommonIconNames;
+};
+
+declare const BREAKPOINTS: {
+    readonly minimum: 0;
+    readonly mobile: 768;
+    readonly tablet: 1024;
+    readonly laptop: 1280;
+    readonly desktop: 1536;
+    readonly wide: 1920;
+    readonly ultrawide: 2560;
+};
+
+export declare const Button: {
+    <T extends React.ElementType = "button">({ children, variant, hideLabel, as, icon, linkComponent, size, isLoading, ...props }: ButtonProps<T> & {
+        ref?: ForwardedRef<T>;
+    }): JSX.Element;
+    displayName: string;
+};
+
+export declare type ButtonProps<T extends React.ElementType = 'button'> = UnionAs & {
+    /**
+     * The children of the button.
+     */
+    children?: ReactNode;
+    /**
+     * The size of the button.
+     */
+    size?: ResponsiveType<'sm' | 'md' | 'lg'>;
+    /**
+     * The icon of the button.
+     */
+    icon?: CommonIconNames | Omit<IconProps, 'size' | 'color'>;
+    /**
+     * Hide the label of the button. <br />
+     * Only works if `icon` is provided.
+     */
+    hideLabel?: ResponsiveType<boolean>;
+    /**
+     * Handle click events.
+     */
+    onClick?: (event: MouseEvent_2<HTMLElement>) => void;
+    /**
+     * The variant is used
+     * to change the visual communication.
+     */
+    variant?: ResponsiveType<'text' | 'textSecondary' | 'filled' | 'outlined' | 'elevated' | 'tonal' | 'linkPrimary' | 'linkSecondary' | 'positive' | 'negative'>;
+    /**
+     * The component to render the button as. <br />
+     * This is useful if you want to use a different component for the button like a `Link` component from **Next.js** or **React Router**.
+     */
+    linkComponent?: T;
+    /**
+     * The ref of the button.
+     */
+    ref?: ForwardedRef<T>;
+    /**
+     * Whether the button is loading.
+     */
+    isLoading?: boolean;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+
+export declare type ButtonsTranslations = {
+    cancel?: string;
+    clear?: string;
+    ok?: string;
+};
+
+export declare const Card: {
+    <T extends React.ElementType = "div">({ children, header, headerBgColor, footer, footerBgColor, hideHeaderBorder, borderRadius, elevation, variant, padding, margin, className, overflow, bgColor, height, width, minHeight, maxHeight, minWidth, maxWidth, borderStyle, interactive, as, linkComponent, ...restProps }: CardProps<T> & {
+        ref?: ForwardedRef<ComponentRef<T>>;
+    }): JSX.Element;
+    displayName: string;
+};
+
+export declare type CardProps<T extends React.ElementType = 'div'> = UnionAs_2 & {
+    /**
+     * The content of the card.
+     */
+    children?: ReactNode;
+    /**
+     * Content rendered in the header area.
+     * When provided, a border-bottom separator is added automatically.
+     */
+    header?: ReactNode;
+    /**
+     * The style of the border of the card. <br />
+     * Only used when variant is 'outlined'.
+     * @default 'solid'
+     */
+    borderStyle?: 'solid' | 'dashed' | 'dotted';
+    /**
+     * Background color applied to the header area.
+     * Only used when `header` is provided.
+     */
+    headerBgColor?: BackgroundColors;
+    /**
+     * Whether to hide the border-bottom separator in the header area.
+     * @default false
+     */
+    hideHeaderBorder?: boolean;
+    /**
+     * Content rendered below the body.
+     * Receives no extra styling — the consumer controls its appearance.
+     */
+    footer?: ReactNode;
+    /**
+     * Background color applied to the footer area.
+     * Only used when `footer` is provided.
+     */
+    footerBgColor?: BackgroundColors;
+    /**
+     * @deprecated Use the `height`, `width`, `minHeight`, `maxHeight`, `minWidth`, `maxWidth` props instead.
+     */
+    className?: string;
+    /**
+     * The height of the card.
+     * @default 'auto'
+     */
+    height?: ResponsiveType<number | string>;
+    /**
+     * The width of the card.
+     * @default '100%'
+     */
+    width?: ResponsiveType<number | string>;
+    /**
+     * The min height of the card.
+     * @default 'auto'
+     */
+    minHeight?: ResponsiveType<number | string>;
+    /**
+     * The max height of the card.
+     * @default 'auto'
+     */
+    maxHeight?: ResponsiveType<number | string>;
+    /**
+     * The min width of the card.
+     * @default 'auto'
+     */
+    minWidth?: ResponsiveType<number | string>;
+    /**
+     * The max width of the card.
+     * @default 'auto'
+     */
+    maxWidth?: ResponsiveType<number | string>;
+    /**
+     * The border radius of the card.
+     */
+    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * The padding of the card.
+     */
+    padding?: ResponsiveType<Padding>;
+    /**
+     * The margin of the card.
+     */
+    margin?: ResponsiveType<Margin>;
+    /**
+     * The elevation/shadow of the card.
+     */
+    elevation?: 0 | 1 | 2 | 3 | 4 | 5;
+    /**
+     * The variant of the card.
+     */
+    variant?: 'outlined' | 'filled';
+    /**
+     * The overflow of the card.
+     */
+    overflow?: ResponsiveType<Overflow>;
+    /**
+     * The background color of the card.
+     */
+    bgColor?: BackgroundColors;
+    /**
+     * When `true`, the card shows a hover background color at 80% opacity and
+     * a pointer cursor. Automatically enabled when `onClick`, `linkComponent`,
+     * or `as="a"` is set. Pass `false` to opt out.
+     */
+    interactive?: boolean;
+    /**
+     * Handle click events on the card.
+     */
+    onClick?: (event: MouseEvent_2<HTMLElement>) => void;
+    /**
+     * A custom component to render the card root as. Useful for router link
+     * components (e.g. Next.js `Link` or React Router `Link`).
+     * When provided, the `as` prop is ignored.
+     */
+    linkComponent?: T;
+    /**
+     * Ref forwarded to the root element.
+     */
+    ref?: ForwardedRef<ComponentRef<T>>;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'className'>;
+
+/**
+ * Event emitted when files are changed (added, removed, replaced, or cleared).
+ */
+export declare interface ChangeEvent {
+    /**
+     * The type of change that occurred.
+     */
+    action: 'add' | 'remove' | 'replace' | 'clear';
+    /**
+     * Files that were added in this action.
+     * Present when action is 'add' or 'replace'.
+     */
+    addedFiles?: FileItem[];
+    /**
+     * Files that were removed in this action.
+     * Present when action is 'remove'.
+     */
+    removedFiles?: FileItem[];
+    /**
+     * The complete list of files after the change.
+     */
+    allFiles: FileItem[];
+    /**
+     * Component-level error if one occurred during the action.
+     */
+    componentError?: {
+        code: COMPONENT_ERROR;
+        message: string;
+    };
+}
+
+export declare const ChatBubble: ForwardRefExoticComponent<ChatBubbleProps & RefAttributes<HTMLDivElement>>;
+
+export declare const ChatBubbleMedia: ForwardRefExoticComponent<ChatBubbleMediaProps & RefAttributes<HTMLElement>>;
+
+export declare interface ChatBubbleMediaProps extends React.HTMLAttributes<HTMLElement> {
+    /** The media element (img, video, or iframe) to render. */
+    children: React.ReactNode;
+    /** Optional caption displayed below the media. */
+    caption?: string;
+}
+
+export declare interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The variant determines alignment and styling of the bubble.
+     * - sender: right-aligned, primary blue background
+     * - receiver: left-aligned, light surface background
+     */
+    variant?: ChatBubbleVariant;
+    /**
+     * Visual state of the bubble.
+     * - default: renders children inside a styled bubble
+     * - thinking: receiver-only, shows italic label with animated dots
+     * - error: reserved for error state styling
+     * @default 'default'
+     */
+    state?: ChatBubbleState;
+    /**
+     * The message content to display in the bubble. Accepts any ReactNode —
+     * plain text, HTML via ContentBlock, custom components, media, tables, etc.
+     */
+    children?: React.ReactNode;
+    /**
+     * Phrases to cycle through while in the "thinking" state.
+     * Each phrase is shown with animated dots appended.
+     * @default ['Einen Moment bitte', 'Ich denke nach', 'Wird verarbeitet']
+     */
+    thinkingPhrases?: string[];
+    /**
+     * Props forwarded to the Avatar component.
+     * When not provided, defaults to `{ type: 'zvoove' }` for receiver
+     * and auto-detects type based on `image`/`name` for sender.
+     */
+    avatar?: AvatarProps;
+    /**
+     * Rich content rendered below the bubble without bubble styling — cards,
+     * tables, or structured data. When both `children` and `attachment` are set,
+     * the text appears inside a styled bubble and the attachment renders directly
+     * below, aligned with the bubble. When only `attachment` is set, it renders
+     * next to the avatar without a surrounding bubble.
+     */
+    attachment?: React.ReactNode;
+    /**
+     * Footer content rendered at the bottom of the ContentSlot, below the bubble
+     * and attachment. Typically used for `MessageActions`.
+     */
+    footer?: React.ReactNode;
+}
+
+export declare type ChatBubbleState = 'default' | 'thinking' | 'error';
+
+export declare type ChatBubbleVariant = 'sender' | 'receiver';
+
+export declare const Checkbox: ({ checked, name, id, disabled, error, indeterminate, value, label, onChange, }: CheckboxProps) => JSX.Element;
+
+export declare interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**
+     * Handle change events.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Handle the label of the checkbox.
+     */
+    label: ReactNode;
+    /**
+     * Handle the name of the checkbox.
+     */
+    name?: string;
+    /**
+     * Handle the id of the checkbox.
+     * @default auto-generated
+     */
+    id?: string;
+    /**
+     * Handle the value of the checkbox.
+     */
+    value?: string;
+    /**
+     * Handle if the checkbox is checked.
+     */
+    checked?: boolean;
+    /**
+     * Handle if the checkbox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Handle if the checkbox has an error.
+     */
+    error?: boolean;
+    /**
+     * Handle if the checkbox has an indeterminate state.
+     */
+    indeterminate?: boolean;
+}
+
+export declare const Chip: default_2.ForwardRefExoticComponent<ChipProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare type ChipProps = ChipPropsTypeIcon & {
+    /**
+     * The children of the button.
+     */
+    label: string;
+    /**
+     * The variant of the component
+     */
+    variant?: 'primary' | 'secondary' | 'pending' | 'confirmed' | 'rejected' | 'skipped';
+    /**
+     * The drop shadow of the component
+     */
+    elevated?: boolean;
+    /**
+     * Whether the component is readonly or not. <br />
+     * This is used for `choice` chips.
+     */
+    readonly?: boolean;
+    /**
+     * Whether the component is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the component
+     */
+    size?: 'medium' | 'large';
+    /**
+     * The action to perform when the delete button is clicked.
+     * This is used only for `input` type chips.
+     */
+    onDelete?: () => void;
+    /**
+     * The action to perform when the chip is clicked.
+     * This is used only for `filter` and 'choice' type chips.
+     */
+    onToggleOpen?: () => void;
+    /**
+     * Whether to show the dropdown icon or not.
+     * This is used only for `filter` and 'choice' type chips.
+     * @default true
+     */
+    showDropdownIcon?: boolean;
+    /**
+     * The number of lines to truncate the text.
+     * @default undefined
+     */
+    truncate?: TypographyProps['truncate'];
+};
+
+declare type ChipPropsTypeIcon = {
+    /**
+     * The type of the component
+     */
+    type?: 'input' | 'filter' | 'assistive' | 'suggestion';
+    /**
+     * The icon to show on the left side of the button.
+     */
+    icon?: CommonIconNames;
+} | {
+    type?: 'choice';
+    icon?: never;
+};
+
+export declare const CodeBlock: {
+    ({ code, filename, language, variant, ...props }: CodeBlockProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface CodeBlockProps extends React.HTMLAttributes<HTMLPreElement> {
+    /**
+     * The source code to display.
+     */
+    code: string;
+    /**
+     * Optional filename shown in the header bar (block variant only).
+     */
+    filename?: string;
+    /**
+     * Programming language for syntax highlighting (e.g. `"typescript"`,
+     * `"python"`, `"bash"`). When provided the code is tokenized and
+     * coloured via react-syntax-highlighter / Prism.
+     * @default 'text'
+     */
+    language?: string;
+    /**
+     * Display variant. In `auto` mode the component renders inline for
+     * single-line code without a filename, and as a full block otherwise.
+     * Use `inline` or `block` to force a specific rendering.
+     * @default 'auto'
+     */
+    variant?: 'auto' | 'block' | 'inline';
+}
+
+export declare type ColumnAlign = (typeof align)[keyof typeof align];
+
+export declare type ColumnId<T extends readonly TableColumnProps[]> = T[number]['id'];
+
+export declare type CommonIconNames = keyof typeof commonIconsMap;
+
+export declare const commonIconsMap: {
+    readonly add: Icon_2;
+    readonly 'add-circle': Icon_2;
+    readonly 'add-file': Icon_2;
+    readonly agent: Icon_2;
+    readonly airplane: Icon_2;
+    readonly archive: Icon_2;
+    readonly 'arrow-back': Icon_2;
+    readonly 'arrow-bend': Icon_2;
+    readonly 'arrow-elbow-down-left': Icon_2;
+    readonly 'arrow-down': Icon_2;
+    readonly 'arrow-forward': Icon_2;
+    readonly 'arrow-left-right': Icon_2;
+    readonly 'arrow-up': Icon_2;
+    readonly article: Icon_2;
+    readonly automate: Icon_2;
+    readonly backspace: Icon_2;
+    readonly bank: Icon_2;
+    readonly bicycle: Icon_2;
+    readonly billing: Icon_2;
+    readonly binoculars: Icon_2;
+    readonly break: Icon_2;
+    readonly bus: Icon_2;
+    readonly calendar: Icon_2;
+    readonly 'calendar-blank': Icon_2;
+    readonly 'calendar-check': Icon_2;
+    readonly 'calendar-dot': Icon_2;
+    readonly 'calendar-x': Icon_2;
+    readonly camera: Icon_2;
+    readonly car: Icon_2;
+    readonly cart: Icon_2;
+    readonly 'cash-money': Icon_2;
+    readonly certificate: Icon_2;
+    readonly 'chat-bubble': Icon_2;
+    readonly 'chat-dots': Icon_2;
+    readonly 'chat-slash': Icon_2;
+    readonly chats: Icon_2;
+    readonly check: Icon_2;
+    readonly circle: Icon_2;
+    readonly 'check-circle': Icon_2;
+    readonly checkbox: Icon_2;
+    readonly 'checkbox-empty': Icon_2;
+    readonly 'checkbox-indefinitely': Icon_2;
+    readonly checks: Icon_2;
+    readonly 'chevron-down': Icon_2;
+    readonly 'chevron-left': Icon_2;
+    readonly 'chevron-right': Icon_2;
+    readonly 'chevron-up': Icon_2;
+    readonly 'circle-notch': Icon_2;
+    readonly close: Icon_2;
+    readonly 'close-circle': Icon_2;
+    readonly 'cloud-download': Icon_2;
+    readonly 'cloud-upload': Icon_2;
+    readonly 'clock-countdown': Icon_2;
+    readonly 'clock-person': Icon_2;
+    readonly command: Icon_2;
+    readonly columns: Icon_2;
+    readonly control: Icon_2;
+    readonly copy: Icon_2;
+    readonly 'currency-dollar': Icon_2;
+    readonly 'currency-dollar-circle': Icon_2;
+    readonly 'currency-gbp': Icon_2;
+    readonly 'dark-mode': Icon_2;
+    readonly deactivate: Icon_2;
+    readonly delete: Icon_2;
+    readonly 'diagram-view': Icon_2;
+    readonly download: Icon_2;
+    readonly drag: Icon_2;
+    readonly edit: Icon_2;
+    readonly error: Icon_2;
+    readonly 'exclamation-mark': Icon_2;
+    readonly expand: Icon_2;
+    readonly expenses: Icon_2;
+    readonly 'face-id': Icon_2;
+    readonly file: Icon_2;
+    readonly 'simple-file-archive': Icon_2;
+    readonly 'simple-file-audio': Icon_2;
+    readonly 'simple-file-c': Icon_2;
+    readonly 'simple-file-c-sharp': Icon_2;
+    readonly 'simple-file-code': Icon_2;
+    readonly 'simple-file-cpp': Icon_2;
+    readonly 'simple-file-css': Icon_2;
+    readonly 'simple-file-csv': Icon_2;
+    readonly 'simple-file-doc': Icon_2;
+    readonly 'simple-file-html': Icon_2;
+    readonly 'simple-file-image': Icon_2;
+    readonly 'simple-file-ini': Icon_2;
+    readonly 'simple-file-jpg': Icon_2;
+    readonly 'simple-file-js': Icon_2;
+    readonly 'simple-file-jsx': Icon_2;
+    readonly 'simple-file-md': Icon_2;
+    readonly 'simple-file-pdf': Icon_2;
+    readonly 'simple-file-png': Icon_2;
+    readonly 'simple-file-ppt': Icon_2;
+    readonly 'simple-file-py': Icon_2;
+    readonly 'simple-file-rs': Icon_2;
+    readonly 'simple-file-sql': Icon_2;
+    readonly 'simple-file-svg': Icon_2;
+    readonly 'simple-file-ts': Icon_2;
+    readonly 'simple-file-tsx': Icon_2;
+    readonly 'simple-file-text': Icon_2;
+    readonly 'simple-file-txt': Icon_2;
+    readonly 'simple-file-video': Icon_2;
+    readonly 'simple-file-vue': Icon_2;
+    readonly 'simple-file-xls': Icon_2;
+    readonly 'simple-file-zip': Icon_2;
+    readonly filter: Icon_2;
+    readonly filters: Icon_2;
+    readonly 'first-page': Icon_2;
+    readonly 'flag-de': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-es': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-fr': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-gb': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-nl': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly folder: Icon_2;
+    readonly 'folder-open': Icon_2;
+    readonly 'grid-view': Icon_2;
+    readonly 'hard-hat': Icon_2;
+    readonly 'head-circuit': Icon_2;
+    readonly help: Icon_2;
+    readonly hide: Icon_2;
+    readonly home: Icon_2;
+    readonly images: Icon_2;
+    readonly info: Icon_2;
+    readonly invoice: Icon_2;
+    readonly job: Icon_2;
+    readonly 'key-return': Icon_2;
+    readonly keyboard: Icon_2;
+    readonly knowledge: Icon_2;
+    readonly language: Icon_2;
+    readonly 'last-page': Icon_2;
+    readonly 'light-mode': Icon_2;
+    readonly 'list-view': Icon_2;
+    readonly location: Icon_2;
+    readonly 'location-pin': Icon_2;
+    readonly lock: Icon_2;
+    readonly 'lock-key': Icon_2;
+    readonly 'lock-key-open': Icon_2;
+    readonly menu: Icon_2;
+    readonly metadata: Icon_2;
+    readonly code: Icon_2;
+    readonly microphone: Icon_2;
+    readonly minus: Icon_2;
+    readonly 'more-horizontal': Icon_2;
+    readonly 'more-vertical': Icon_2;
+    readonly moped: Icon_2;
+    readonly 'navigation-arrow': Icon_2;
+    readonly notifications: Icon_2;
+    readonly note: Icon_2;
+    readonly numpad: Icon_2;
+    readonly option: Icon_2;
+    readonly 'open-in-new-tab': Icon_2;
+    readonly order: Icon_2;
+    readonly organization: Icon_2;
+    readonly pause: Icon_2;
+    readonly attachment: Icon_2;
+    readonly phone: Icon_2;
+    readonly pin: Icon_2;
+    readonly 'pin-simple': Icon_2;
+    readonly 'pin-simple-slash': Icon_2;
+    readonly 'pin-slash': Icon_2;
+    readonly 'piggy-bank': Icon_2;
+    readonly plant: Icon_2;
+    readonly printer: Icon_2;
+    readonly privacy: Icon_2;
+    readonly 'qr-code': Icon_2;
+    readonly refresh: Icon_2;
+    readonly remark: Icon_2;
+    readonly robot: Icon_2;
+    readonly save: Icon_2;
+    readonly search: Icon_2;
+    readonly 'search-plus': Icon_2;
+    readonly 'send-message': Icon_2;
+    readonly settings: Icon_2;
+    readonly 'setup-time': Icon_2;
+    readonly shapes: Icon_2;
+    readonly show: Icon_2;
+    readonly sidebar: Icon_2;
+    readonly signature: Icon_2;
+    readonly 'sign-out': Icon_2;
+    readonly 'skip-forward': Icon_2;
+    readonly smartphone: Icon_2;
+    readonly sparkle: Icon_2;
+    readonly star: Icon_2;
+    readonly start: Icon_2;
+    readonly stop: Icon_2;
+    readonly sick: Icon_2;
+    readonly table: Icon_2;
+    readonly 'thumb-up': Icon_2;
+    readonly 'thumb-down': Icon_2;
+    readonly taxi: Icon_2;
+    readonly 'text-align-center': Icon_2;
+    readonly 'text-align-justify': Icon_2;
+    readonly 'text-align-left': Icon_2;
+    readonly 'text-align-right': Icon_2;
+    readonly 'text-t': Icon_2;
+    readonly ticket: Icon_2;
+    readonly notches: Icon_2;
+    readonly time: Icon_2;
+    readonly timer: Icon_2;
+    readonly 'time-sheet-download': Icon_2;
+    readonly 'time-sheet-upload': Icon_2;
+    readonly train: Icon_2;
+    readonly translate: Icon_2;
+    readonly travel: Icon_2;
+    readonly unfold: Icon_2;
+    readonly user: Icon_2;
+    readonly upload: Icon_2;
+    readonly 'user-account': Icon_2;
+    readonly users: Icon_2;
+    readonly vacation: Icon_2;
+    readonly wallet: Icon_2;
+    readonly warning: Icon_2;
+    readonly wrench: Icon_2;
+};
+
+/**
+ * Error types that affect the component as a whole.
+ */
+export declare enum COMPONENT_ERROR {
+    /** Total size of all files exceeds maxTotalSize. */
+    TOTAL_SIZE_EXCEEDED = "total-size-exceeded",
+    /** Number of files exceeds maxCount. */
+    MAX_COUNT_EXCEEDED = "max-count-exceeded",
+    /** Number of files is below minCount. */
+    MIN_COUNT_NOT_MET = "min-count-not-met",
+    /** A duplicate file was detected. */
+    DUPLICATE_FILE = "duplicate-file"
+}
+
+export declare const ContentBlock: {
+    ({ children }: ContentBlockProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ContentBlockProps {
+    /**
+     * The children of the ContentBlock.
+     */
+    children: ReactNode;
+}
+
+export declare type CustomCommonIconNames = keyof typeof customCommonIconsMap;
+
+/**
+ * Custom common icons — brand/product icons not from Phosphor.
+ * Unlike Phosphor icons, these accept a `color` prop to switch between
+ * their default duotone brand colors and a single inherited color.
+ */
+export declare const customCommonIconsMap: {
+    readonly zvoove: ({ size, color }: ZvooveLogoProps) => JSX.Element;
+    readonly 'zvoove-one': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-recruit': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-invoice-monitor': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-go': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-intelligence': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-free': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-work-expert': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-elevate': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-cashlink': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-docs-ai': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'cockpit-x': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+};
+
+declare interface CustomIconProps {
+    /**
+     * The type of the icon. <br />
+     * Only available for File Type Icons
+     */
+    type?: IconTypes;
+}
+
+export declare const DatePicker: (props: DatePickerProps) => JSX.Element;
+
+export declare interface DatePickerProps extends Omit<TextFieldProps, 'onChange' | 'value' | 'clearable' | 'icon' | 'isFocused' | 'onIconClick' | 'iconPosition'> {
+    /**
+     * The label that will be displayed above the input. <br />
+     * It is required for accessibility purposes.
+     */
+    label: string;
+    /**
+     * The value of the date picker.
+     */
+    value?: string;
+    /**
+     * The function that will be called when the date picker value changes.
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>, date?: Date) => void;
+    /**
+     * If true, the date picker will be open when the input is focused.
+     */
+    openOnFocus?: boolean;
+    /**
+     * The name of the date picker.
+     */
+    name: string;
+    /**
+     * The locale of the date picker.
+     * @default de-DE
+     */
+    locale?: string;
+    /**
+     * The maximum date that can be selected. <br/>
+     * format: YYYY-MM-DD <br/>
+     * This will determine the end year range for the date picker.
+     * @default 50 years from now
+     */
+    maxDate?: string;
+    /**
+     * The minimum date that can be selected. <br/>
+     * format: YYYY-MM-DD <br/>
+     * This will determine the start year range for the date picker.
+     * @default 90 years ago
+     */
+    minDate?: string;
+    /**
+     * The translations of the buttons. <br/>
+     * In case the locale is not supported you can set custom translations.
+     * @default { cancel: 'Abbrechen ', clear: 'Löschen', ok: 'OK' }
+     */
+    buttonsTranslations?: ButtonsTranslations;
+    /**
+     * If true, the date picker will close automatically when a date is selected.
+     * @default false
+     */
+    closeOnSelect?: boolean;
+    /**
+     * The placeholder of the date picker. <br/>
+     * If not provided, the placeholder will be based on the locale (e.g. 'TT.MM.JJJJ' for 'de-DE').
+     */
+    placeholder?: string;
+}
+
+export declare const DEFAULT_ANNOUNCEMENTS: {
+    added: (count: number, total: number) => string;
+    removed: (total: number) => string;
+    cleared: () => string;
+    'component-error': (message: string) => string;
+    'count-changed': (total: number) => string;
+};
+
+/**
+ * Default icon for unknown file types
+ */
+export declare const DEFAULT_FILE_ICON: FileIconNames;
+
+export declare const DEFAULT_LABELS: UploaderLabels;
+
+export declare type Density = 'default' | '-2' | '-4';
+
+export declare const Dialog: ({ open, onClose, children, closeOnBackdropClick, closeOnEsc, padding, size, zIndex, }: DialogProps) => ReactPortal | null;
+
+/**
+ * Global manager for Dialog components to track open dialogs.
+ * Maintains a stack order so nested/stacked dialogs can determine
+ * which dialog is topmost (for focus trapping).
+ */
+declare class DialogManager {
+    private readonly dialogStack;
+    private readonly closeCallbacks;
+    /**
+     * Register a Dialog as open with its close callback.
+     * The dialog is pushed to the top of the stack.
+     */
+    registerOpenDialog(dialogId: string, closeCallback: () => void): void;
+    /**
+     * Unregister a Dialog as closed.
+     * The dialog is removed from the stack.
+     */
+    unregisterOpenDialog(dialogId: string): void;
+    /**
+     * Close all other Dialogs except the specified one
+     */
+    closeOtherDialogs(excludeDialogId: string): void;
+    /**
+     * Check if the given dialog is the topmost (last opened) dialog
+     */
+    isTopDialog(dialogId: string): boolean;
+    /**
+     * Check if any Dialogs are currently open
+     */
+    hasOpenDialogs(): boolean;
+    /**
+     * Get all currently open Dialog IDs
+     */
+    getOpenDialogs(): string[];
+    /**
+     * Clear all registered Dialogs (useful for cleanup)
+     */
+    clear(): void;
+}
+
+export declare const dialogManager: DialogManager;
+
+export declare interface DialogProps {
+    /**
+     * Controls whether the dialog is open or closed.
+     */
+    open: boolean;
+    /**
+     * Callback function called when the dialog is closed.
+     */
+    onClose: () => void;
+    /**
+     * The main content of the dialog.
+     */
+    children: ReactNode;
+    /**
+     * Whether clicking the backdrop should close the dialog.
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether pressing the Escape key should close the dialog.
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Whether to remove the default padding from the dialog content.
+     * Useful for when the dialog has full width content/dividers.
+     * @deprecated Use `padding` prop instead.
+     */
+    removePadding?: boolean;
+    /**
+     * The padding of the dialog content.
+     */
+    padding?: CardProps['padding'];
+    /**
+     * The size of the dialog.
+     * @default none
+     */
+    size?: ResponsiveType<DialogSize>;
+    /**
+     * The z-index of the dialog.
+     * @default 20
+     */
+    zIndex?: number;
+}
+
+declare type DialogSize = 'sm' | 'md' | 'lg' | 'none' | 'fullscreen';
+
+declare const direction: {
+    readonly ASC: "asc";
+    readonly DESC: "desc";
+    readonly NONE: "none";
+};
+
+export declare const Divider: ({ variant, color, }: DividerProps) => JSX.Element;
+
+export declare interface DividerProps {
+    /**
+     * The variant to use.
+     */
+    variant?: 'fullWidth' | 'inset' | 'middle';
+    /**
+     * The color of the divider.
+     * Accepts any background color token name.
+     * @default 'outline-variant'
+     */
+    color?: BackgroundColors;
+}
+
+export declare const Expandable: {
+    <T extends React.ElementType = "div">({ children, isOpen, as: Component, ...props }: ExpandableProps<T>): JSX.Element;
+    displayName: string;
+};
+
+export declare type ExpandableProps<T extends React.ElementType = 'div'> = Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'children'> & {
+    /**
+     * The children of the Expandable.
+     */
+    children: ReactNode;
+    /**
+     * Whether the Expandable is open or closed.
+     */
+    isOpen?: boolean;
+    as?: 'div' | 'td' | 'tr' | 'th' | 'tbody' | 'thead' | 'tfoot' | 'section' | 'article' | 'main' | 'footer' | 'header' | 'aside' | 'nav' | 'form' | 'iframe' | 'picture' | 'video' | 'audio' | 'canvas' | 'embed' | 'object' | T;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+
+declare interface ExpandableRowConfig {
+    id: string;
+    render: React.ReactNode;
+}
+
+/**
+ * Recursively extracts the raw text content from a React node tree.
+ * Useful for pulling the string out of `<pre><code>…</code></pre>` children.
+ */
+export declare function extractText(node: ReactNode): string;
+
+export declare type FeedbackType = 'positive' | 'negative' | null;
+
+/**
+ * Error types that can occur for individual files during validation.
+ */
+export declare enum FILE_ERROR {
+    /** File size exceeds the maxFileSize limit. */
+    FILE_TOO_LARGE = "file-too-large",
+    /** File type does not match the accepted types. */
+    INVALID_TYPE = "invalid-type",
+    /** File has zero bytes. */
+    EMPTY_FILE = "empty-file",
+    /** Adding this file would exceed the maxCount limit. */
+    MAX_COUNT_EXCEEDED = "max-count-exceeded",
+    /** File is a duplicate of an existing file. */
+    DUPLICATE_FILE = "duplicate-file"
+}
+
+/**
+ * Status of a file in the upload process.
+ */
+export declare enum FILE_STATUS {
+    /** File is added but upload has not started. */
+    IDLE = "idle",
+    /** File is queued and waiting for upload. */
+    PENDING = "pending",
+    /** File upload is in progress. */
+    UPLOADING = "uploading",
+    /** File upload was canceled by user. */
+    CANCELED = "canceled",
+    /** File upload failed. */
+    FAILED = "failed",
+    /** File upload completed successfully. */
+    SUCCESS = "success"
+}
+
+/**
+ * Maps file extensions to their corresponding icon names.
+ * Use `getIconForFileExtension` to get an icon name from a file extension.
+ */
+export declare const fileExtensionToIconMap: Record<string, FileIconNames>;
+
+export declare type FileIconNames = keyof typeof fileIconsMap;
+
+export declare const fileIconsMap: {
+    readonly 'file-empty': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-pdf': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-folder': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-video': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-video-2': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-audio': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-code': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-spreadsheet': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-img': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-jpg': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-jpeg': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-png': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-webp': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-tiff': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-gif': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-svg': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-eps': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-pdf': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-doc': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-docx': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-txt': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-csv': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-xls': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-xlsx': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-ppt': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-pptx': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-design-fig': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-design-ai': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-design-psd': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-design-indd': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-design-aep': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-mp3': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-wav': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-mp4': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-mpeg': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-avi': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-mkv': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-html': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-css': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-rss': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-sql': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-js': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-json': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-java': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-xml': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-exe': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-dmg': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-archive-zip': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-archive-rar': ({ type }: CustomIconProps) => JSX.Element;
+};
+
+/**
+ * Additional information that can be attached to a file.
+ */
+export declare interface FileInfo {
+    /**
+     * Additional text to display below the file name.
+     * @example "PDF Document"
+     */
+    additionalInfo?: string;
+    /**
+     * Custom React node to render as the file label.
+     * When provided, replaces the default file name display.
+     */
+    customLabel?: default_2.ReactNode;
+    /**
+     * Allow additional custom properties.
+     */
+    [key: string]: unknown;
+}
+
+/**
+ * Represents a file in the uploader with its metadata and state.
+ */
+export declare interface FileItem {
+    /**
+     * Unique identifier for this file item.
+     */
+    id: string;
+    /**
+     * The actual File object.
+     */
+    file: File;
+    /**
+     * Additional information about the file.
+     */
+    info: FileInfo;
+    /**
+     * Current state of the file.
+     */
+    state: FileState;
+    /**
+     * How the file was added to the uploader.
+     */
+    source: FileSource;
+}
+
+/**
+ * Source from which a file was added to the uploader.
+ */
+export declare type FileSource = 'picker' | 'drop';
+
+/**
+ * Current state of a file in the uploader.
+ */
+export declare interface FileState {
+    /**
+     * Current status of the file.
+     */
+    status: FILE_STATUS;
+    /**
+     * Whether the file has a validation or upload error.
+     */
+    hasError: boolean;
+    /**
+     * The error type if the file has an error.
+     */
+    error?: FILE_ERROR;
+    /**
+     * Human-readable error message.
+     */
+    errorMessage?: string;
+    /**
+     * Upload progress percentage (0-100).
+     * Only relevant when status is UPLOADING.
+     */
+    progress?: number;
+    /**
+     * Custom status message to display.
+     * Overrides the default status text when provided.
+     */
+    statusMessage?: string;
+}
+
+export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+
+export declare type FlexResponsiveStyles<Attr extends string, T extends string> = {
+    [K in FlexResponsiveStylesKeys<Attr>]: Record<T, string>;
+};
+
+export declare type FlexResponsiveStylesKeys<Attr extends string> = GenerateSimpleResponsiveStyleKeys<Attr>;
+
+export declare type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+export declare const FloatSearch: {
+    <T extends React.ElementType = "button">({ open, onClose, items, onSearch, onSelect, value, placeholder, translations: translationsProp, zIndex, loading, linkComponent: ItemComponent, }: FloatSearchProps<T>): ReactPortal | null;
+    displayName: string;
+};
+
+export declare type FloatSearchItem<T extends React.ElementType = 'button'> = {
+    /**
+     * Unique identifier for the item.
+     */
+    id: string;
+    /**
+     * Display label shown in the result row.
+     */
+    label: string;
+    /**
+     * Type of the item — determines the icon rendered on the left.
+     */
+    type: 'chat' | 'project';
+    /**
+     * Secondary metadata shown right-aligned (e.g. "Heute", "24 Chats").
+     */
+    meta?: string;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children' | 'id' | 'type'>;
+
+export declare type FloatSearchProps<T extends React.ElementType = 'button'> = {
+    /**
+     * Controls whether the search overlay is visible.
+     */
+    open: boolean;
+    /**
+     * Called when the overlay should close (backdrop click, Esc, or clear button).
+     */
+    onClose: () => void;
+    /**
+     * Items to display in the result list.
+     */
+    items?: FloatSearchItem<T>[];
+    /**
+     * Called whenever the search query changes.
+     */
+    onSearch?: (query: string) => void;
+    /**
+     * Called when the user confirms a result (Enter key or click).
+     */
+    onSelect?: (item: FloatSearchItem<T>) => void;
+    /**
+     * Controlled search query value. When provided, the input becomes controlled.
+     */
+    value?: string;
+    /**
+     * Placeholder text for the search input.
+     * @default 'Chats und Projekte durchsuchen'
+     * @deprecated Use `translations.placeholder` instead.
+     */
+    placeholder?: string;
+    /**
+     * Override translatable UI strings. All keys are optional — missing keys fall back to German defaults.
+     */
+    translations?: FloatSearchTranslations;
+    /**
+     * z-index of the overlay.
+     * @default 20
+     */
+    zIndex?: number;
+    /**
+     * When `true`, displays skeleton placeholders instead of the result list.
+     * Use this while fetching search results asynchronously.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * The component to render each result item as. <br />
+     * This is useful if you want to use a different component like a `Link` component from **Next.js** or **React Router**.
+     * @default 'button'
+     */
+    linkComponent?: T | 'button';
+};
+
+export declare interface FloatSearchTranslations {
+    /**
+     * Placeholder text for the search input.
+     * @default 'Chats und Projekte durchsuchen'
+     */
+    placeholder?: string;
+    /**
+     * Aria-label for the clear-query button.
+     * @default 'Suche zurücksetzen'
+     */
+    clearAriaLabel?: string;
+    /**
+     * Aria-label for the close button.
+     * @default 'Suche schließen'
+     */
+    closeAriaLabel?: string;
+    /**
+     * Text shown when no results match the query.
+     * @default 'Keine Ergebnisse gefunden'
+     */
+    noResults?: string;
+    /**
+     * Footer hint label for arrow-key navigation.
+     * @default 'navigieren'
+     */
+    navigate?: string;
+    /**
+     * Footer hint label for the Enter key action.
+     * @default 'öffnen'
+     */
+    open?: string;
+    /**
+     * Footer hint label for the Escape key action.
+     * @default 'schließen'
+     */
+    close?: string;
+}
+
+export declare type ForegroundColors = 'primary' | 'secondary' | 'tertiary' | 'yellow' | 'green' | 'pink' | 'steel-blue' | 'dark-yellow' | 'dark-green' | 'dark-pink' | 'dark-steel-blue' | 'inverse-on-surface' | 'on-primary' | 'on-secondary' | 'on-tertiary' | 'on-primary-container' | 'on-secondary-container' | 'on-tertiary-container' | 'on-primary-fixed' | 'on-primary-fixed-variant' | 'on-secondary-fixed' | 'on-secondary-fixed-variant' | 'on-tertiary-fixed' | 'on-tertiary-fixed-variant' | 'on-surface' | 'on-surface-variant' | 'on-surface-variant-lowest' | 'on-error' | 'on-error-container' | 'on-yellow' | 'on-dark-yellow' | 'on-yellow-container' | 'on-green' | 'on-dark-green' | 'on-green-container' | 'on-pink' | 'on-dark-pink' | 'on-pink-container' | 'on-steel-blue' | 'on-dark-steel-blue' | 'on-steel-blue-container' | 'error' | 'on-scrim' | 'on-container-neutral' | 'code-on-surface';
+
+export declare const FormLabel: ({ value, required, htmlFor, ...props }: FormLabelProps) => JSX.Element;
+
+export declare interface FormLabelProps {
+    /**
+     * The content of the label.
+     */
+    value: string;
+    /**
+     * The ID of the input element that the label should be associated with.
+     * If not provided, the label will not be associated with any input.
+     */
+    htmlFor?: string;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+}
+
+export declare type Gap = SpacingKeys | {
+    row?: SpacingKeys;
+    column?: SpacingKeys;
+};
+
+declare type GapAxisVariant = 'Row' | 'Column';
+
+export declare type GapResponsiveStyles<Attr extends string> = {
+    [K in GenerateGapResponsiveStyleKeys<Attr>]: Record<SpacingKeys, string>;
+};
+
+declare type GenerateGapResponsiveStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}` | `${Attr}${GapAxisVariant}` | `${Attr}${GapAxisVariant}${ResponsiveBreakpoint}`;
+
+export declare type GenerateResponsiveGenericStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}`;
+
+declare type GenerateResponsiveStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}` | `${Attr}${AxisVariant}` | `${Attr}${SideVariant}` | `${Attr}${AxisVariant}${ResponsiveBreakpoint}` | `${Attr}${SideVariant}${ResponsiveBreakpoint}`;
+
+declare type GenerateSimpleResponsiveStyleKeys<Attr extends string> = Attr | `${Attr}${ResponsiveBreakpoint}`;
+
+export declare type GenericResponsiveKeys<T extends string> = {
+    [key in Viewport]: Record<T, string>;
+};
+
+/**
+ * Determines the breakpoint based on window width.
+ * Checks breakpoints in descending order (desktop to minimum).
+ *
+ * @param width - The window width in pixels
+ * @returns The corresponding viewport breakpoint
+ */
+export declare const getBreakpoint: (width: number) => Viewport;
+
+export declare type GetGapPropsReturnType<Attr extends string> = {
+    [K in GenerateGapResponsiveStyleKeys<Attr>]: SpacingKeys | undefined;
+};
+
+export declare type GetGenericPropsReturnType<Attr extends string, T extends string> = {
+    [K in GenerateSimpleResponsiveStyleKeys<Attr>]: T | undefined;
+};
+
+/**
+ * Gets the appropriate icon name for a file extension.
+ * @param extension - The file extension (e.g., "pdf", "jpg", ".pdf")
+ * @returns The corresponding icon name, or 'file-empty' if not found
+ */
+export declare const getIconForFileExtension: (extension?: string) => FileIconNames;
+
+export declare type GetSimpleSpacingPropsReturnType<Attr extends string> = {
+    [K in GenerateSimpleResponsiveStyleKeys<Attr>]: SpacingKeys | undefined;
+};
+
+export declare type GetSpacingPropsReturnType<Attr extends string> = {
+    [K in GenerateResponsiveStyleKeys<Attr>]: SpacingKeys | undefined;
+};
+
+export declare const Grid: GridComponent;
+
+declare type GridComponent = React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
+};
+
+declare interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The children of the component.
+     */
+    children: ReactNode;
+    /**
+     * The number of columns to span in the `Grid.Item`.
+     */
+    colSpan?: ResponsiveType<number>;
+    /**
+     * The number of rows to span in the `Grid.Item`.
+     */
+    rowSpan?: ResponsiveType<number>;
+}
+
+export declare interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The children of the component.
+     */
+    children: ReactNode;
+    /**
+     * The height of the grid.
+     * @default 'auto'
+     */
+    height?: ResponsiveType<number | string>;
+    /**
+     * The minimum height of the grid.
+     * @default 'auto'
+     */
+    minHeight?: ResponsiveType<number | string>;
+    /**
+     * The maximum height of the grid.
+     * @default 'auto'
+     */
+    maxHeight?: ResponsiveType<number | string>;
+    /**
+     * The width of the grid.
+     * @default '100%'
+     */
+    width?: ResponsiveType<number | string>;
+    /**
+     * The minimum width of the grid.
+     * @default 'auto'
+     */
+    minWidth?: ResponsiveType<number | string>;
+    /**
+     * The maximum width of the grid.
+     * @default 'auto'
+     */
+    maxWidth?: ResponsiveType<number | string>;
+    /**
+     * The number of columns to display or the grid-template-columns property.
+     * @default 1
+     */
+    columns?: ResponsiveType<number | string>;
+    /**
+     * The number of rows to display or the grid-template-rows property.
+     * @default 1
+     */
+    rows?: ResponsiveType<number | string>;
+    /**
+     * The gap between grid items.
+     *
+     * Accepts either a single spacing key applied to both axes, or an object
+     * with `row` / `column` keys to target each axis independently.
+     * Fully responsive: any per-breakpoint value can itself be a spacing key
+     * or a `{ row, column }` object.
+     *
+     * @example
+     * gap="md"
+     * gap={{ row: 'md', column: 'sm' }}
+     * gap={{ minimum: 'sm', mobile: { row: 'md', column: 'lg' } }}
+     *
+     * @default 'none'
+     */
+    gap?: ResponsiveType<Gap>;
+    /**
+     * Define padding to the grid wrapper.
+     * @default 'none'
+     */
+    padding?: ResponsiveType<Padding>;
+    /**
+     * Define margin to the grid wrapper.
+     * @default 'none'
+     */
+    margin?: ResponsiveType<Margin>;
+}
+
+export declare type HighlightStyle = {
+    [key: string]: CSSProperties;
+};
+
+export declare const Icon: ({ name, size, weight, color, type, featured, ...props }: IconProps) => JSX.Element;
+
+declare const iconMap: {
+    readonly zvoove: ({ size, color }: ZvooveLogoProps) => JSX.Element;
+    readonly 'zvoove-one': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-recruit': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-invoice-monitor': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-go': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-intelligence': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-free': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-work-expert': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-elevate': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-cashlink': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'zvoove-docs-ai': ({ size, color, }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly 'cockpit-x': ({ size, color }: {
+        size?: number;
+        color?: string;
+    }) => JSX.Element;
+    readonly add: Icon_2;
+    readonly 'add-circle': Icon_2;
+    readonly 'add-file': Icon_2;
+    readonly agent: Icon_2;
+    readonly airplane: Icon_2;
+    readonly archive: Icon_2;
+    readonly 'arrow-back': Icon_2;
+    readonly 'arrow-bend': Icon_2;
+    readonly 'arrow-elbow-down-left': Icon_2;
+    readonly 'arrow-down': Icon_2;
+    readonly 'arrow-forward': Icon_2;
+    readonly 'arrow-left-right': Icon_2;
+    readonly 'arrow-up': Icon_2;
+    readonly article: Icon_2;
+    readonly automate: Icon_2;
+    readonly backspace: Icon_2;
+    readonly bank: Icon_2;
+    readonly bicycle: Icon_2;
+    readonly billing: Icon_2;
+    readonly binoculars: Icon_2;
+    readonly break: Icon_2;
+    readonly bus: Icon_2;
+    readonly calendar: Icon_2;
+    readonly 'calendar-blank': Icon_2;
+    readonly 'calendar-check': Icon_2;
+    readonly 'calendar-dot': Icon_2;
+    readonly 'calendar-x': Icon_2;
+    readonly camera: Icon_2;
+    readonly car: Icon_2;
+    readonly cart: Icon_2;
+    readonly 'cash-money': Icon_2;
+    readonly certificate: Icon_2;
+    readonly 'chat-bubble': Icon_2;
+    readonly 'chat-dots': Icon_2;
+    readonly 'chat-slash': Icon_2;
+    readonly chats: Icon_2;
+    readonly check: Icon_2;
+    readonly circle: Icon_2;
+    readonly 'check-circle': Icon_2;
+    readonly checkbox: Icon_2;
+    readonly 'checkbox-empty': Icon_2;
+    readonly 'checkbox-indefinitely': Icon_2;
+    readonly checks: Icon_2;
+    readonly 'chevron-down': Icon_2;
+    readonly 'chevron-left': Icon_2;
+    readonly 'chevron-right': Icon_2;
+    readonly 'chevron-up': Icon_2;
+    readonly 'circle-notch': Icon_2;
+    readonly close: Icon_2;
+    readonly 'close-circle': Icon_2;
+    readonly 'cloud-download': Icon_2;
+    readonly 'cloud-upload': Icon_2;
+    readonly 'clock-countdown': Icon_2;
+    readonly 'clock-person': Icon_2;
+    readonly command: Icon_2;
+    readonly columns: Icon_2;
+    readonly control: Icon_2;
+    readonly copy: Icon_2;
+    readonly 'currency-dollar': Icon_2;
+    readonly 'currency-dollar-circle': Icon_2;
+    readonly 'currency-gbp': Icon_2;
+    readonly 'dark-mode': Icon_2;
+    readonly deactivate: Icon_2;
+    readonly delete: Icon_2;
+    readonly 'diagram-view': Icon_2;
+    readonly download: Icon_2;
+    readonly drag: Icon_2;
+    readonly edit: Icon_2;
+    readonly error: Icon_2;
+    readonly 'exclamation-mark': Icon_2;
+    readonly expand: Icon_2;
+    readonly expenses: Icon_2;
+    readonly 'face-id': Icon_2;
+    readonly file: Icon_2;
+    readonly 'simple-file-archive': Icon_2;
+    readonly 'simple-file-audio': Icon_2;
+    readonly 'simple-file-c': Icon_2;
+    readonly 'simple-file-c-sharp': Icon_2;
+    readonly 'simple-file-code': Icon_2;
+    readonly 'simple-file-cpp': Icon_2;
+    readonly 'simple-file-css': Icon_2;
+    readonly 'simple-file-csv': Icon_2;
+    readonly 'simple-file-doc': Icon_2;
+    readonly 'simple-file-html': Icon_2;
+    readonly 'simple-file-image': Icon_2;
+    readonly 'simple-file-ini': Icon_2;
+    readonly 'simple-file-jpg': Icon_2;
+    readonly 'simple-file-js': Icon_2;
+    readonly 'simple-file-jsx': Icon_2;
+    readonly 'simple-file-md': Icon_2;
+    readonly 'simple-file-pdf': Icon_2;
+    readonly 'simple-file-png': Icon_2;
+    readonly 'simple-file-ppt': Icon_2;
+    readonly 'simple-file-py': Icon_2;
+    readonly 'simple-file-rs': Icon_2;
+    readonly 'simple-file-sql': Icon_2;
+    readonly 'simple-file-svg': Icon_2;
+    readonly 'simple-file-ts': Icon_2;
+    readonly 'simple-file-tsx': Icon_2;
+    readonly 'simple-file-text': Icon_2;
+    readonly 'simple-file-txt': Icon_2;
+    readonly 'simple-file-video': Icon_2;
+    readonly 'simple-file-vue': Icon_2;
+    readonly 'simple-file-xls': Icon_2;
+    readonly 'simple-file-zip': Icon_2;
+    readonly filter: Icon_2;
+    readonly filters: Icon_2;
+    readonly 'first-page': Icon_2;
+    readonly 'flag-de': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-es': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-fr': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-gb': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly 'flag-nl': ({ size }: {
+        size?: number;
+    }) => JSX.Element;
+    readonly folder: Icon_2;
+    readonly 'folder-open': Icon_2;
+    readonly 'grid-view': Icon_2;
+    readonly 'hard-hat': Icon_2;
+    readonly 'head-circuit': Icon_2;
+    readonly help: Icon_2;
+    readonly hide: Icon_2;
+    readonly home: Icon_2;
+    readonly images: Icon_2;
+    readonly info: Icon_2;
+    readonly invoice: Icon_2;
+    readonly job: Icon_2;
+    readonly 'key-return': Icon_2;
+    readonly keyboard: Icon_2;
+    readonly knowledge: Icon_2;
+    readonly language: Icon_2;
+    readonly 'last-page': Icon_2;
+    readonly 'light-mode': Icon_2;
+    readonly 'list-view': Icon_2;
+    readonly location: Icon_2;
+    readonly 'location-pin': Icon_2;
+    readonly lock: Icon_2;
+    readonly 'lock-key': Icon_2;
+    readonly 'lock-key-open': Icon_2;
+    readonly menu: Icon_2;
+    readonly metadata: Icon_2;
+    readonly code: Icon_2;
+    readonly microphone: Icon_2;
+    readonly minus: Icon_2;
+    readonly 'more-horizontal': Icon_2;
+    readonly 'more-vertical': Icon_2;
+    readonly moped: Icon_2;
+    readonly 'navigation-arrow': Icon_2;
+    readonly notifications: Icon_2;
+    readonly note: Icon_2;
+    readonly numpad: Icon_2;
+    readonly option: Icon_2;
+    readonly 'open-in-new-tab': Icon_2;
+    readonly order: Icon_2;
+    readonly organization: Icon_2;
+    readonly pause: Icon_2;
+    readonly attachment: Icon_2;
+    readonly phone: Icon_2;
+    readonly pin: Icon_2;
+    readonly 'pin-simple': Icon_2;
+    readonly 'pin-simple-slash': Icon_2;
+    readonly 'pin-slash': Icon_2;
+    readonly 'piggy-bank': Icon_2;
+    readonly plant: Icon_2;
+    readonly printer: Icon_2;
+    readonly privacy: Icon_2;
+    readonly 'qr-code': Icon_2;
+    readonly refresh: Icon_2;
+    readonly remark: Icon_2;
+    readonly robot: Icon_2;
+    readonly save: Icon_2;
+    readonly search: Icon_2;
+    readonly 'search-plus': Icon_2;
+    readonly 'send-message': Icon_2;
+    readonly settings: Icon_2;
+    readonly 'setup-time': Icon_2;
+    readonly shapes: Icon_2;
+    readonly show: Icon_2;
+    readonly sidebar: Icon_2;
+    readonly signature: Icon_2;
+    readonly 'sign-out': Icon_2;
+    readonly 'skip-forward': Icon_2;
+    readonly smartphone: Icon_2;
+    readonly sparkle: Icon_2;
+    readonly star: Icon_2;
+    readonly start: Icon_2;
+    readonly stop: Icon_2;
+    readonly sick: Icon_2;
+    readonly table: Icon_2;
+    readonly 'thumb-up': Icon_2;
+    readonly 'thumb-down': Icon_2;
+    readonly taxi: Icon_2;
+    readonly 'text-align-center': Icon_2;
+    readonly 'text-align-justify': Icon_2;
+    readonly 'text-align-left': Icon_2;
+    readonly 'text-align-right': Icon_2;
+    readonly 'text-t': Icon_2;
+    readonly ticket: Icon_2;
+    readonly notches: Icon_2;
+    readonly time: Icon_2;
+    readonly timer: Icon_2;
+    readonly 'time-sheet-download': Icon_2;
+    readonly 'time-sheet-upload': Icon_2;
+    readonly train: Icon_2;
+    readonly translate: Icon_2;
+    readonly travel: Icon_2;
+    readonly unfold: Icon_2;
+    readonly user: Icon_2;
+    readonly upload: Icon_2;
+    readonly 'user-account': Icon_2;
+    readonly users: Icon_2;
+    readonly vacation: Icon_2;
+    readonly wallet: Icon_2;
+    readonly warning: Icon_2;
+    readonly wrench: Icon_2;
+    readonly 'file-empty': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-pdf': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-folder': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-video': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-video-2': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-audio': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-code': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-spreadsheet': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-img': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-jpg': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-jpeg': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-png': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-webp': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-tiff': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-gif': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-svg': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-image-eps': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-pdf': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-doc': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-docx': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-txt': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-csv': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-xls': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-xlsx': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-ppt': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-document-pptx': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-design-fig': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-design-ai': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-design-psd': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-design-indd': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-design-aep': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-mp3': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-wav': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-mp4': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-mpeg': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-avi': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-media-mkv': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-html': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-css': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-rss': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-sql': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-js': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-json': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-java': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-xml': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-exe': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-development-dmg': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-archive-zip': ({ type }: CustomIconProps) => JSX.Element;
+    readonly 'file-archive-rar': ({ type }: CustomIconProps) => JSX.Element;
+};
+
+export declare type IconNames = keyof typeof iconMap;
+
+export declare interface IconProps extends CustomIconProps, React.HTMLAttributes<SVGElement> {
+    /**
+     * The name of the icon to display.
+     */
+    name: IconNames;
+    /**
+     * The size of the icon.
+     * @default 'lg'
+     */
+    size?: IconSizes;
+    /**
+     * The weight of the icon.
+     */
+    weight?: IconWeight;
+    /**
+     * The color of the icon.
+     */
+    color?: ForegroundColors;
+    /**
+     * If true, the icon will be displayed in a featured style.
+     */
+    featured?: boolean;
+}
+
+declare const iconSizeMap: {
+    readonly '2xs': 12;
+    readonly xs: 16;
+    readonly sm: 18;
+    readonly md: 20;
+    readonly lg: 24;
+    readonly xl: 32;
+    readonly '2xl': 40;
+};
+
+export declare type IconSizes = keyof typeof iconSizeMap;
+
+declare type IconStates = {
+    on: CommonIconNames;
+    off: CommonIconNames;
+};
+
+declare type IconTypes = keyof typeof iconTypes;
+
+declare const iconTypes: {
+    readonly default: "default";
+    readonly solid: "solid";
+    readonly gray: "gray";
+};
+
+export declare const ImageVisualizer: {
+    ({ src, alt, width, height, maxWidth, maxHeight, minWidth, minHeight, borderRadius, objectFit, }: ImageVisualizerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ImageVisualizerProps {
+    /**
+     * The source URL of the image.
+     */
+    src: string;
+    /**
+     * The alt text of the image.
+     * @default ''
+     */
+    alt?: string;
+    /**
+     * The width of the image container.
+     */
+    width?: ResponsiveType<number | string>;
+    /**
+     * The height of the image container.
+     */
+    height?: ResponsiveType<number | string>;
+    /**
+     * The minimum width of the image container.
+     */
+    minWidth?: ResponsiveType<number | string>;
+    /**
+     * The minimum height of the image container.
+     */
+    minHeight?: ResponsiveType<number | string>;
+    /**
+     * The maximum width of the image container.
+     */
+    maxWidth?: ResponsiveType<number | string>;
+    /**
+     * The maximum height of the image container.
+     */
+    maxHeight?: ResponsiveType<number | string>;
+    /**
+     * The border radius of the image container.
+     * @default 'sm'
+     */
+    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * The CSS object-fit of the image inside the container.
+     * @default 'cover'
+     */
+    objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+}
+
+export declare const InfoBox: {
+    ({ message, variant, icon, elevated, }: InfoBoxProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface InfoBoxProps {
+    /**
+     * The message to display in the InfoBox.
+     */
+    message: string;
+    /**
+     * The semantic variant of the InfoBox
+     * @default 'default'
+     */
+    variant?: InfoBoxVariant;
+    /**
+     * Icon to display in the InfoBox. If not provided, uses the default icon for the variant.
+     */
+    icon?: CommonIconNames | Omit<IconProps, 'size' | 'color'>;
+    /**
+     * Whether to elevate the InfoBox.
+     * @default true
+     */
+    elevated?: boolean;
+}
+
+export declare type InfoBoxVariant = 'default' | 'positive' | 'warning' | 'error' | 'subtle' | 'neutral' | 'outlined';
+
+/**
+ * Detects **sectioned** `items` passed to `ListMenu`.
+ *
+ * **Sectioned** when the array is non-empty and the first entry looks like
+ * `{ title?, items: ListMenuItem[] }`: it has an `items` array and does **not**
+ * have a top-level `label` (every `ListMenuItem` has `label`). Any section may omit
+ * `title` (e.g. the first group) — no header row is rendered.
+ *
+ * **Flat** when empty `[]` or when entries are normal rows. Do not mix shapes in one array.
+ */
+export declare function isListMenuSections<T extends ElementType = 'a'>(items: ListMenuItem<T>[] | ListMenuSection<T>[]): items is ListMenuSection<T>[];
+
+export declare type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+
+declare type LabelStates = {
+    on: string;
+    off: string;
+};
+
+export declare const List: {
+    <T extends default_2.ElementType = "div">({ items, activeItemId, showDividers, linkComponent: LinkComponent, }: ListProps<T>): JSX.Element;
+    displayName: string;
+};
+
+export declare type ListItem<T extends default_2.ElementType = 'div'> = {
+    /**
+     * The content of the list item.
+     */
+    content: ReactNode;
+    /**
+     * The id of the list item. This will be use as the key for the list item.
+     */
+    id: string;
+} & Omit<default_2.ComponentPropsWithoutRef<T>, 'children' | 'className' | 'content' | 'id'>;
+
+export declare const ListMenu: {
+    <T extends default_2.ElementType = "a">({ items, activeItem, open, variant, linkComponent: LinkComponent, onItemClick, }: ListMenuProps<T>): JSX.Element;
+    displayName: string;
+};
+
+export declare type ListMenuItem<T extends React.ElementType = 'a'> = {
+    /**
+     * The label of the menu item
+     */
+    label: string;
+    /**
+     * The id of the menu item
+     */
+    id: string;
+    /**
+     * The icon of the menu item
+     */
+    icon?: CommonIconNames | CustomCommonIconNames | React.ReactElement;
+    /**
+     * Extra content rendered at the end of the label area (e.g. a tag, badge, or action button)
+     */
+    endContent?: React.ReactNode;
+    /**
+     * When to show the end content
+     * @default 'always'
+     */
+    endContentVisibility?: 'always' | 'hover';
+    /**
+     * Renders a spacer instead of a menu item.
+     * @default false
+     */
+    isSpacer?: boolean;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+
+export declare type ListMenuProps<T extends React.ElementType = 'a'> = {
+    /**
+     * Either a flat list of menu items (default) **or** an array of sections
+     * `{ title?, items }[]`. The two shapes are mutually exclusive — use one or the other.
+     */
+    items: ListMenuItem<T>[] | ListMenuSection<T>[];
+    /**
+     * The active item must match the id of the menu item
+     */
+    activeItem?: string;
+    /**
+     * Whether the menu is expanded (showing labels)
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * The visual variant of the menu
+     * @default 'default'
+     */
+    variant?: ListMenuVariant;
+    /**
+     * The component to render for the link
+     * @default 'a'
+     */
+    linkComponent?: T | 'a';
+    /**
+     * The callback to handle the item click
+     */
+    onItemClick?: (item: ListMenuItem<T>) => void;
+};
+
+/**
+ * One titled group of rows inside a sectioned `ListMenu`. Do not mix with flat
+ * `ListMenuItem[]` in the same `items` array.
+ */
+export declare type ListMenuSection<T extends React.ElementType = 'a'> = {
+    /**
+     * Optional section header (uppercase label styling; omitted when missing, empty, or whitespace-only).
+     */
+    title?: string;
+    /**
+     * Rows in this section; same shape as flat `ListMenu` items.
+     */
+    items: ListMenuItem<T>[];
+};
+
+export declare type ListMenuVariant = 'default' | 'compact';
+
+export declare interface ListProps<T extends default_2.ElementType = 'div'> {
+    /**
+     * The items of the List.
+     */
+    items: ListItem<T>[];
+    /**
+     * The active item id of the List.
+     * If provided, the item will be highlighted.
+     */
+    activeItemId?: string;
+    /**
+     * Whether to show dividers between items.
+     * @default true
+     */
+    showDividers?: boolean;
+    /**
+     * The component to render for each list item.
+     * @default 'div'
+     */
+    linkComponent?: T | 'div';
+}
+
+export declare type Margin = SpacingKeys | {
+    top?: SpacingKeys;
+    right?: SpacingKeys;
+    bottom?: SpacingKeys;
+    left?: SpacingKeys;
+    x?: SpacingKeys;
+    y?: SpacingKeys;
+};
+
+/**
+ * @deprecated Use `ListMenuItem` instead
+ */
+export declare type MenuItem<T extends React.ElementType = 'a'> = ListMenuItem<T>;
+
+export declare interface MessageAction {
+    /**
+     * The icon to display for this action.
+     */
+    icon: CommonIconNames;
+    /**
+     * Accessible label for the action (used as tooltip and aria-label).
+     */
+    label: string;
+    /**
+     * Callback fired when the action button is clicked.
+     */
+    onClick?: (event: MouseEvent_2<HTMLButtonElement>) => void;
+    /**
+     * Whether this action is currently in an active/toggled state.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Feedback group for mutual exclusion (e.g. thumbs up/down).
+     * Actions sharing the same group are mutually exclusive — activating one deactivates the other.
+     */
+    feedbackType?: 'positive' | 'negative';
+    /**
+     * Confirmation behavior on click — animation, icon swap, and text.
+     * Provides a consistent pattern for copy ("Copied"), feedback ("Thanks for your feedback"), etc.
+     */
+    confirmation?: ActionConfirmation;
+}
+
+export declare const MessageActions: ForwardRefExoticComponent<MessageActionsProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface MessageActionsProps {
+    /**
+     * The layout variant matching the parent ChatBubble alignment.
+     * - `receiver`: actions on the left, timestamp on the right
+     * - `sender`: timestamp on the left, actions on the right
+     * @default 'receiver'
+     */
+    variant?: MessageActionsVariant;
+    /**
+     * The timestamp text to display (e.g. "10:01").
+     */
+    timestamp?: string;
+    /**
+     * The action buttons to display.
+     * Defaults to copy, thumb-up, thumb-down, and more-horizontal.
+     */
+    actions?: MessageAction[];
+    /**
+     * Menu items shown in the "More" action popup menu.
+     * When provided, the last default action (more-horizontal) opens a PopUpMenu.
+     */
+    menuItems?: PopUpMenuItem[];
+    /**
+     * Callback fired when a feedback action (thumbs up/down) is selected.
+     */
+    onFeedback?: (feedback: FeedbackType) => void;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+}
+
+export declare type MessageActionsVariant = 'sender' | 'receiver';
+
+/**
+ * One titled block of mid-section rows. Items are always rendered with **compact** `ListMenu` density;
+ * this type only describes the data shape (same as root `midSections` on `SideNavigation`).
+ */
+export declare type MidSection<T extends ElementType = 'a'> = {
+    /**
+     * The title of the section
+     */
+    title?: string;
+    /**
+     * Whether to show a divider above the section
+     * @default true
+     */
+    showDivider?: boolean;
+    /**
+     * The list of items in the section
+     */
+    items: ListMenuItem<T>[];
+    /**
+     * Whether to hide the entire section when the menu is closed
+     * @default false
+     */
+    hideOnMenuClosed?: boolean;
+    /**
+     * Highlights the section with a background color and rounded corners.
+     * @default false
+     */
+    highlight?: boolean;
+    /**
+     * When set, the section collapses into this icon when the menu is closed (desktop only).
+     * On hover, a PopUpMenu opens revealing the section items.
+     */
+    replaceWithIconOnClose?: CommonIconNames;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+
+export declare const MidSectionMenus: {
+    <T extends ElementType = "a">({ sections, open, variant, activeItem, linkComponent: LinkComponent, onItemClick, }: MidSectionMenusProps<T>): JSX.Element | null;
+    displayName: string;
+};
+
+export declare type MidSectionMenusProps<T extends ElementType = 'a'> = {
+    /**
+     * Section definitions (same shape as `SideNavigation` `midSections`).
+     */
+    sections: MidSection<T>[];
+    /**
+     * Whether the parent navigation is expanded (labels visible).
+     * @default true
+     */
+    open?: boolean;
+    /**
+     * Sidebar shell width mode: must match the parent `SideNavigation` `variant` so open/closed width
+     * transitions on the section wrappers stay aligned (`default` vs `compact` rail widths).
+     * Does **not** change list row density — inner `ListMenu` instances are always `compact`.
+     * @default 'default'
+     */
+    variant?: ListMenuVariant;
+    /**
+     * Active item id for `ListMenu` highlighting.
+     */
+    activeItem?: string;
+    /**
+     * Link element for menu rows.
+     */
+    linkComponent?: T | 'a';
+    /**
+     * Called when a row is activated (same contract as `ListMenu` / `SideNavigation` root lists).
+     */
+    onItemClick?: (item: ListMenuItem<T>) => void;
+};
+
+declare type NonNullable_2<T> = Exclude<T, null | undefined>;
+export { NonNullable_2 as NonNullable }
+
+export declare type Overflow = OverflowBase | {
+    y?: OverflowYOrX;
+    x?: OverflowYOrX;
+};
+
+export declare type OverflowBase = 'visible' | 'hidden' | 'scroll' | 'auto' | 'y-auto' | 'y-scroll' | 'x-auto' | 'x-scroll';
+
+export declare type OverflowYOrX = 'auto' | 'scroll' | 'hidden' | 'visible';
+
+export declare type Padding = SpacingKeys | {
+    top?: SpacingKeys;
+    right?: SpacingKeys;
+    bottom?: SpacingKeys;
+    left?: SpacingKeys;
+    x?: SpacingKeys;
+    y?: SpacingKeys;
+};
+
+export declare const Pagination: ({ currentPage, totalPages, rowsPerPage, onPageChange, onRowsPerPageChange, disabled, rowsPerPageLabel, pageOfPagesLabel, }: PaginationProps) => JSX.Element;
+
+export declare interface PaginationProps {
+    /**
+     * The text for the rows per page.
+     * @default "Zeilen pro Seite"
+     */
+    rowsPerPageLabel?: string;
+    /**
+     * The text for the "of" in "1 of 10".
+     * @default "von"
+     */
+    pageOfPagesLabel?: string;
+    /**
+     * The current page of the Pagination.
+     */
+    currentPage: number;
+    /**
+     * The total pages of the Pagination.
+     */
+    totalPages: number;
+    /**
+     * The rows per page of the Pagination.
+     */
+    rowsPerPage?: RowsPerPage;
+    /**
+     * The callback function to handle page change.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * The callback function to handle rows per page change.
+     */
+    onRowsPerPageChange?: (rowsPerPage: RowsPerPage) => void;
+    /**
+     * The disabled state of the Pagination.
+     */
+    disabled?: boolean;
+}
+
+declare type Panel = {
+    id: string;
+    children: React.ReactNode;
+};
+
+export declare const PopUpMenu: ({ children, placement, disabled, trigger, density, closeOnItemClick, items, onItemClick, selectedItem, selectable, open, onClose, closeOnClickOutside, closeOnEscape, toggleOnClick, queryHighlight, showSearch, searchPlaceholder, allowClearAll, allowSelectAll, selectAllLabel, clearAllLabel, noResultsFoundMessage, onClearAllOrSelectAllClick, searchMode, onSearchChange, isLoading, wrapperWidth, onScrollEnd, isLoadingMore, height, minHeight, maxHeight, ...props }: PopUpMenuProps) => JSX.Element;
+
+export declare type PopUpMenuItem<T extends React.ElementType = 'button'> = UnionAs_3 & {
+    /**
+     * The id of the item
+     * @required
+     */
+    id: string;
+    /**
+     * The label of the item
+     * @required (ignored when isDivider is true)
+     */
+    label: string;
+    /**
+     * Whether the item is a visual divider
+     * @default false
+     */
+    isDivider?: boolean;
+    /**
+     * Props passed to the Divider component
+     * Only used when `isDivider` is true
+     */
+    dividerProps?: DividerProps;
+    /**
+     * Custom ReactNode to render instead of the label.
+     * When set, the item becomes non-interactive (not clickable, not focusable).
+     */
+    customContent?: React.ReactNode;
+    /**
+     * Whether the menu should stay open when this item is clicked
+     * @default false
+     */
+    keepOpen?: boolean;
+    /**
+     * The callback function that is called when the item is clicked
+     */
+    onClick?: () => void;
+    /**
+     * The icon of the item
+     * @see {@link CommonIconNames} for available icons
+     */
+    icon?: CommonIconNames;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Sub-menu items displayed in a nested PopUpMenu when the item is hovered.
+     * Opens to the right of the item (or left if no space).
+     */
+    subMenuItems?: PopUpMenuItem[];
+    /**
+     * The custom component to be used for the item <br />
+     * `as` is ignored when `linkComponent` is set
+     * @see {@link UnionAs}
+     */
+    linkComponent?: T;
+} & Omit<React.ComponentProps<T>, 'className' | 'ref' | 'role' | 'tabIndex' | 'onClick' | 'disabled'>;
+
+export declare type PopUpMenuPlacement = 'top' | 'bottom' | 'left' | 'right' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
+
+export declare interface PopUpMenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+    /**
+     * The trigger element that the context menu is attached to
+     */
+    children: React.ReactNode;
+    /**
+     * The items to be displayed in the context menu <br />
+     * The Generic type `T` is type of the `linkComponent` prop. Default `T` is `button`. <br />
+     * If you use the prop `as` the types of the the selected option are automatically inferred to that particular item
+     * @see {@link PopUpMenuItem}
+     * @example
+     * ```ts
+     * const items: PopUpMenuItem[] = [
+     *   {
+     *     id: 'delete',
+     *     label: 'Delete',
+     *     onClick: () => {
+     *       console.log('Deleted');
+     *     },
+     *     icon: 'delete',
+     *   },
+     * ];
+     * ```
+     */
+    items: PopUpMenuItem[];
+    /**
+     * The selected items in the context menu
+     * @see {@link PopUpMenuSelectionType}
+     */
+    selectedItem?: PopUpMenuSelectionType;
+    /**
+     * The callback function that is called when the items are clicked
+     * @see {@link PopUpMenuSelectionType}
+     * @see {@link PopUpMenuItem}
+     */
+    onItemClick?: (item: PopUpMenuItem, selectedItem?: PopUpMenuSelectionType) => void;
+    /**
+     * The callback function that is called when the clear all or select all buttons are clicked
+     * @see {@link PopUpMenuSelectionType}
+     * @see {@link PopUpMenuItem}
+     */
+    onClearAllOrSelectAllClick?: (items: PopUpMenuItem[], selectedItems: PopUpMenuSelectionType) => void;
+    /**
+     * The position of the context menu relative to its trigger
+     * @default 'bottom-left'
+     */
+    placement?: ResponsiveType<PopUpMenuPlacement>;
+    /**
+     * The trigger event that opens the context menu
+     * @default click
+     */
+    trigger?: 'hover' | 'click' | 'right-click';
+    /**
+     * The density of the context menu
+     * @default default
+     */
+    density?: 'default' | '-2' | '-4';
+    /**
+     * Whether the context menu should be selectable
+     * @default none
+     */
+    selectable?: 'single' | 'multiple' | 'none';
+    /**
+     * Whether the context menu should be disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the context menu should be closed when the user clicks outside of it
+     * @default true
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * Whether the context menu should be closed when the user presses the escape key
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the context menu should be toggled when the user clicks on the trigger
+     * @default true
+     */
+    toggleOnClick?: boolean;
+    /**
+     * Whether the context menu should be open
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * The callback function that is called when the context menu is opened
+     */
+    onOpen?: () => void;
+    /**
+     * The callback function that is called when the context menu is closed
+     */
+    onClose?: () => void;
+    /**
+     * The query to be used to filter the items by label or id
+     */
+    queryHighlight?: string;
+    /**
+     * Whether the context menu should be closed when the item is clicked
+     * Default is `true` when the `selectable` prop is `none` or `single`
+     * @default true
+     */
+    closeOnItemClick?: boolean;
+    /**
+     * Whether the context menu should show a search input
+     * @default false
+     */
+    showSearch?: boolean;
+    /**
+     * The placeholder of the search input
+     * @default 'Suchen'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Whether the context menu should allow clearing all selected items
+     * @default false
+     */
+    allowClearAll?: boolean;
+    /**
+     * The label of the clear all button
+     * @default 'Alle löschen'
+     */
+    clearAllLabel?: string;
+    /**
+     * Whether the context menu should allow selecting all items
+     * @default false
+     */
+    allowSelectAll?: boolean;
+    /**
+     * The label of the select all button
+     * @default 'Alle auswählen'
+     */
+    selectAllLabel?: string;
+    /**
+     * The message of the no results found message
+     * @default 'Keine Ergebnisse gefunden'
+     */
+    noResultsFoundMessage?: string;
+    /**
+     * The mode of the search
+     * @default 'built-in'
+     */
+    searchMode?: 'built-in' | 'async';
+    /**
+     * The callback function that is called when the search query is changed <br />
+     * This is only used when the `searchMode` prop is set to `async`
+     */
+    onSearchChange?: (searchQuery: string) => void;
+    /**
+     * Whether the context menu is loading
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * The width of the wrapper div that contains the context menu,
+     * this is useful if you need the wrapped element to be full width (like in a InputField for example)
+     * @default 'fit'
+     */
+    wrapperWidth?: 'fit' | 'full';
+    /**
+     * The callback function that is called when the scroll end is reached
+     */
+    onScrollEnd?: () => void;
+    /**
+     * Whether the context menu is loading more items when the user scrolls to the bottom
+     * @default false
+     */
+    isLoadingMore?: boolean;
+    /**
+     * The height of the popup menu content
+     */
+    height?: ResponsiveType<number | string>;
+    /**
+     * The min height of the popup menu content
+     */
+    minHeight?: ResponsiveType<number | string>;
+    /**
+     * The max height of the popup menu content
+     */
+    maxHeight?: ResponsiveType<number | string>;
+}
+
+export declare type PopUpMenuSelectionType = string | string[] | undefined;
+
+export declare const ProgressIndicator: ({ value, indeterminate, variant, size, foregroundColor, backgroundColor, }: ProgressIndicatorProps) => JSX.Element;
+
+export declare interface ProgressIndicatorProps {
+    /**
+     * The percentage of the progress indicator
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Whether the progress indicator is indeterminate
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * The variant of the progress indicator
+     * @default 'linear'
+     */
+    variant?: 'linear' | 'circular';
+    /**
+     * The size of the circular progress indicator. Only applies to the circular variant.
+     * @default 'md'
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Custom color for the progress fill (foreground). Accepts any valid CSS color value.
+     */
+    foregroundColor?: BackgroundColors;
+    /**
+     * Custom color for the progress track (background).
+     */
+    backgroundColor?: BackgroundColors;
+}
+
+export declare const RadioButton: React.FC<RadioButtonProps>;
+
+export declare interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**
+     * Handle change events.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Handle the label of the radio button.
+     */
+    label: ReactNode;
+    /**
+     * Handle the name of the radio button.
+     */
+    name?: string;
+    /**
+     * Handle the id of the radio button.
+     * @default auto-generated
+     */
+    id?: string;
+    /**
+     * Handle the value of the radio button.
+     */
+    value?: string;
+    /**
+     * Handle if the radio button is checked.
+     */
+    checked?: boolean;
+    /**
+     * Handle if the radio button is disabled.
+     */
+    disabled?: boolean;
+}
+
+export declare const RadioGroup: {
+    ({ children, name, value, onChange, row, disabled, }: RadioGroupProps): default_2.DetailedReactHTMLElement<{
+        className: string;
+        role: "radiogroup";
+        'aria-labelledby': string;
+    }, HTMLElement>;
+    displayName: string;
+};
+
+export declare interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The children of the radio group.
+     */
+    children: React.ReactNode;
+    /**
+     * The name of the radio group. This will be passed to the radio buttons.
+     */
+    name: string;
+    /**
+     * The value of the selected radio button.
+     */
+    value?: string;
+    /**
+     * Handle change events.
+     */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Set the group to be displayed in a row
+     */
+    row?: boolean;
+    /**
+     * Set the group to be disabled
+     */
+    disabled?: boolean;
+}
+
+declare type RefType<T extends Node = HTMLElement> = RefObject<T | null> | null | undefined;
+
+/**
+ * Represents a file that was rejected during validation.
+ * These files are not added to the file list but shown in the rejection list.
+ */
+export declare interface RejectedFile {
+    /**
+     * The actual File object that was rejected.
+     */
+    file: File;
+    /**
+     * The validation error that caused the rejection.
+     */
+    error: FILE_ERROR;
+    /**
+     * Human-readable error message.
+     */
+    errorMessage: string;
+}
+
+declare type ResponsiveBreakpoint = 'SM' | 'MD' | 'LG' | 'XL' | '2XL' | '3XL' | '4XL';
+
+export declare type ResponsiveGenericStyles<Attr extends string, T extends string = string> = {
+    [K in GenerateResponsiveGenericStyleKeys<Attr>]: Record<T, string>;
+};
+
+export declare type ResponsiveStyles<Attr extends string> = {
+    [K in GenerateResponsiveStyleKeys<Attr>]: Record<SpacingKeys, string>;
+};
+
+export declare type ResponsiveType<T> = T | {
+    [key in Viewport]?: T;
+};
+
+export declare type ResponsiveTypeFixed<T> = {
+    [key in Viewport]: T;
+};
+
+export declare type RowsPerPage = 10 | 20 | 50 | 100 | 200;
+
+export declare const ScoreCard: ForwardRefExoticComponent<ScoreCardProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ScoreCardProps {
+    /**
+     * Main KPI value displayed prominently (e.g. "0,00", "156", "92,3%").
+     */
+    value: string | number;
+    /**
+     * Secondary label below the value (e.g. "Parameter", "davon 12 in kritischem Status").
+     */
+    parameter?: string;
+    /**
+     * Icon shown to the left of the parameter text.
+     */
+    parameterIcon?: CommonIconNames;
+    /**
+     * Whether to show the parameter icon.
+     * @default true
+     */
+    showIcon?: boolean;
+    /**
+     * Color variant controlling background and text colors.
+     * @default 'neutral'
+     */
+    variant?: ScoreCardVariant;
+    /**
+     * Size variant controlling padding and typography scale.
+     * @default 'large'
+     */
+    size?: ScoreCardSize;
+    /**
+     * Locale for number formatting (e.g. 'de-DE', 'en-US').
+     * When omitted, uses the browser's default locale.
+     */
+    locale?: string;
+    /**
+     * Fully custom content — replaces the default value/parameter layout.
+     */
+    children?: ReactNode;
+}
+
+export declare type ScoreCardSize = 'large' | 'medium' | 'small';
+
+export declare type ScoreCardVariant = 'negative' | 'active' | 'positive' | 'neutral' | 'ghost';
+
+export declare const SegmentButton: <T extends React.ElementType = "button", V = string>({ label, active, matchSiblings, icon, value, as, linkComponent, ...props }: SegmentButtonProps<T, V>) => JSX.Element;
+
+export declare type SegmentButtonProps<T extends React.ElementType, V = string> = React.ComponentPropsWithoutRef<T> & {
+    /**
+     * The label of the button.
+     */
+    label?: string;
+    /**
+     * The icon of the button.
+     */
+    icon?: CommonIconNames;
+    /**
+     * Whether the button is active.
+     */
+    active?: boolean;
+    /**
+     * Whether the button should match width with sibling buttons. <br />
+     * Only used in `SegmentGroup`.
+     * @default false
+     */
+    matchSiblings?: boolean;
+    /**
+     * The onClick event handler.
+     */
+    onClick?: (value: V) => void;
+    /**
+     * The link component of the button.
+     * @default 'button'
+     */
+    as?: 'a' | 'button';
+    /**
+     * The link component of the button.
+     * @default 'button'
+     */
+    linkComponent?: T;
+    /**
+     * The value of the button.
+     */
+    value: V;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+
+export declare const SegmentGroup: <T extends default_2.ElementType = "button", V = string>({ children, stretch, onChange, multiSelect, activeButton, disabled, linkComponent, }: SegmentGroupProps<T, V>) => default_2.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;
+
+export declare interface SegmentGroupProps<T extends React.ElementType = 'button', V = string> {
+    /**
+     * The children of the button.
+     */
+    children: React.ReactElement<SegmentButtonProps<T, V>> | React.ReactElement<SegmentButtonProps<T, V>>[];
+    /**
+     * Make the segment group stretch to fill the container.
+     */
+    stretch?: boolean;
+    /**
+     * The active button value. <br />
+     * If `multiSelect` is `true`, this should be an array of values. <br />
+     * `V | V[]`
+     */
+    activeButton?: SegmentValue<V>;
+    /**
+     * Whether to allow multiple selections.
+     */
+    multiSelect?: boolean;
+    /**
+     * Handle change events.
+     */
+    onChange?: (value: SegmentValue<V>) => void;
+    /**
+     * The custom link component. <br />
+     * It will be passed to the all `SegmentButton` components.
+     * @default 'button'
+     */
+    linkComponent?: T;
+    /**
+     * Whether the segment group is disabled.
+     */
+    disabled?: boolean;
+}
+
+export declare type SegmentValue<T = string> = T | T[];
+
+export declare const Select: ({ value, multiple, options, onChange, error, errorMessage, disabled, label, hideLabel, name, id, searchable, allowClearAll, allowSelectAll, selectAllLabel, clearAllLabel, noResultsFoundMessage, onScrollEnd, isLoadingMore, ...props }: SelectProps) => JSX.Element;
+
+export declare type SelectOption = Omit<PopUpMenuItem, 'id' | 'onClick' | 'disabled' | 'linkComponent' | 'as'> & {
+    /**
+     * The value of the option
+     * @required
+     */
+    value: string;
+};
+
+export declare type SelectProps = Union & {
+    /**
+     * The options of the select.
+     */
+    options: SelectOption[];
+    /**
+     * The onChange event handler.
+     */
+    onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Whether the select has a search input.
+     */
+    searchable?: boolean;
+    /**
+     * Whether the select has an error.
+     */
+    error?: boolean;
+    /**
+     * The error message of the select.
+     */
+    errorMessage?: string;
+    /**
+     * Whether the select is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The label of the select.
+     */
+    label?: string;
+    /**
+     * Whether to hide the label.
+     */
+    hideLabel?: boolean;
+    /**
+     * The name of the select.
+     */
+    name: string;
+    /**
+     * The id of the select.
+     */
+    id?: string;
+} & Pick<PopUpMenuProps, 'allowClearAll' | 'allowSelectAll' | 'selectAllLabel' | 'clearAllLabel' | 'noResultsFoundMessage' | 'onScrollEnd' | 'isLoadingMore'> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
+
+export declare const Sheet: {
+    ({ open, onClose, children, title, subTitle, closeOnBackdropClick, closeOnEsc, padding, showHandle, size, placement, headerActions, footerActions, stickyFooter, stickyHeader, showCloseButton, showBackArrow, resizable, width, minWidth, maxWidth, onResizeEnd, }: SheetProps): ReactPortal | null;
+    displayName: string;
+};
+
+/**
+ * Global manager for Sheet components to track open sheets
+ */
+declare class SheetManager {
+    private readonly openSheets;
+    private readonly closeCallbacks;
+    /**
+     * Register a Sheet as open with its close callback
+     * @param sheetId - Unique identifier for the Sheet
+     * @param closeCallback - Function to close this specific Sheet
+     */
+    registerOpenSheet(sheetId: string, closeCallback: () => void): void;
+    /**
+     * Unregister a Sheet as closed
+     * @param sheetId - Unique identifier for the Sheet
+     */
+    unregisterOpenSheet(sheetId: string): void;
+    /**
+     * Close all other Sheets except the specified one
+     * @param excludeSheetId - Sheet ID to exclude from closing
+     */
+    closeOtherSheets(excludeSheetId: string): void;
+    /**
+     * Check if any Sheets are currently open
+     */
+    hasOpenSheets(): boolean;
+    /**
+     * Get all currently open Sheet IDs
+     */
+    getOpenSheets(): string[];
+    /**
+     * Clear all registered Sheets (useful for cleanup)
+     */
+    clear(): void;
+}
+
+export declare const sheetManager: SheetManager;
+
+export declare type SheetProps = UnionPlacement & {
+    /**
+     * Controls whether the sheet is open or closed.
+     */
+    open: boolean;
+    /**
+     * Callback function called when the sheet is closed.
+     * @default undefined
+     */
+    onClose: () => void;
+    /**
+     * The main content of the sheet.
+     */
+    children: ReactNode;
+    /**
+     * The title of the sheet.
+     * @default undefined
+     */
+    title?: string;
+    /**
+     * The subtitle of the sheet.
+     * @default undefined
+     */
+    subTitle?: string;
+    /**
+     * Whether clicking the backdrop should close the sheet.
+     * @default true
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether pressing the Escape key should close the sheet.
+     * @default false
+     */
+    closeOnEsc?: boolean;
+    /**
+     * The padding of the sheet content.
+     * @default 'lg'
+     */
+    padding?: SpacingKeys;
+    /**
+     * Whether to show the drag handle (typically shown on mobile).
+     * @default true
+     */
+    showHandle?: boolean;
+    /**
+     * The size of the sheet (affects width on desktop).
+     * On mobile, the sheet always takes full width - 40px.
+     * @default none
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The footer actions of the sheet.
+     * @default undefined
+     */
+    footerActions?: ReactNode;
+    /**
+     * The header actions of the sheet.
+     * @default undefined
+     */
+    headerActions?: ReactNode;
+    /**
+     * Whether to make the footer sticky of the sheet.
+     * @default true
+     */
+    stickyFooter?: boolean;
+    /**
+     * Whether to make the header sticky of the sheet.
+     * @default true
+     */
+    stickyHeader?: boolean;
+    /**
+     * Whether to show the close button in the header. <br />
+     * onClose() will be called when the close button is clicked.
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Whether to show the back button in the header. <br />
+     * onClose() will be called when the back button is clicked.
+     * @default false
+     */
+    showBackArrow?: boolean;
+};
+
+export declare const SideNavigation: <T extends ElementType = "a">({ menuItems, utilityItems, midSections, subMenus, userArea, hideUserAreaInMobile, hideToggleButton, addBorderToToggleButton, logo, open, variant, activeItem, onToggleOpen, onActiveItemChange, onItemClick, linkComponent: LinkComponent, }: SideNavigationProps<T>) => JSX.Element;
+
+export declare type SideNavigationProps<T extends React.ElementType = 'a'> = {
+    /**
+     * Whether the navigation is expanded
+     */
+    open?: boolean;
+    /**
+     * The visual variant of the navigation
+     * @default 'default'
+     */
+    variant?: ListMenuVariant;
+    /**
+     * Logo displayed in the top area (compact variant only).
+     * Shows `icon` when collapsed, `icon + name` when expanded.
+     * Both have zvoove defaults if omitted.
+     */
+    logo?: {
+        /**
+         * Small logo icon shown when the sidebar is collapsed.
+         */
+        icon?: ReactNode;
+        /**
+         * Full logo name shown next to the icon when expanded.
+         */
+        name?: ReactNode;
+        /**
+         * When `true`, the icon is hidden while the sidebar is expanded so that only the name is visible.
+         * When the sidebar collapses the icon reappears as the sole identifier.
+         * @default false
+         */
+        hideIconWhenOpen?: boolean;
+    };
+    /**
+     * The list of menu items
+     */
+    menuItems: ListMenuItem<T>[];
+    /**
+     * The list of utility items to stay at the bottom of the menu
+     */
+    utilityItems?: ListMenuItem<T>[];
+    /**
+     * Sections between the root main list and utility items, with collapse/expand behavior when the sidebar
+     * closes (see `replaceWithIconOnClose`). Only the **root** column uses this prop; any lists inside a
+     * slide-in panel belong in that layer’s `content`.
+     */
+    midSections?: MidSection<T>[];
+    /**
+     * Slide-in panels: `parentId` matches a root `menuItems` id; `content` is the custom body (back row is built-in).
+     */
+    subMenus?: SubMenuLayer[];
+    /**
+     * User area rendered at the bottom of the navigation
+     */
+    userArea?: UserAreaProps;
+    /**
+     * Hide the user area on mobile (useful when it's shown elsewhere, e.g. in a top bar).
+     * @default true
+     */
+    hideUserAreaInMobile?: boolean;
+    /**
+     * When `true`, the built-in expand/collapse control in the header row is not rendered.
+     * Use a `utilityItems` entry with `onClick` (and controlled `open` / `onToggleOpen`) instead.
+     * @default false
+     */
+    hideToggleButton?: boolean;
+    /**
+     * When `true`, a border top, right and bottom are added to the toggle button. <br />
+     * This is useful when the SideNavigation is used next to a Card with outlined variant as a content container.
+     * @default false
+     */
+    addBorderToToggleButton?: boolean;
+    /**
+     * Active id for **root** `menuItems` / `utilityItems`. To open a sub panel from the shell, pass either the
+     * layer’s `parentId` (e.g. `'zain'`) or an opaque dotted string `'<parentId>.<segment>'` where only the
+     * part before the first `.` is read to choose the panel; the rest is for your app / `content` only.
+     */
+    activeItem?: string;
+    /**
+     * The component to render for the link
+     */
+    linkComponent?: T | 'a';
+    /**
+     * The callback to handle the open/close state
+     */
+    onToggleOpen?: (open: boolean) => void;
+    /**
+     * Fired after a root `menuItems` / `utilityItems` click with the suggested `activeItem` id, or with the
+     * sub-panel `parentId` when opening a layer. Not called for `__back__` or `target="_blank"`. Clicks inside
+     * `subMenus[].content` are not observed here.
+     */
+    onActiveItemChange?: (activeItem: string) => void;
+    /**
+     * The callback to handle the item click
+     */
+    onItemClick?: (item: ListMenuItem) => void;
+};
+
+/**
+ * @deprecated Use `ListMenuVariant` instead
+ */
+export declare type SideNavigationVariant = ListMenuVariant;
+
+declare type SideVariant = 'Top' | 'Bottom' | 'Left' | 'Right';
+
+export declare type SimpleResponsiveStyles<Attr extends string> = {
+    [K in GenerateSimpleResponsiveStyleKeys<Attr>]: Record<SpacingKeys, string>;
+};
+
+export declare const Skeleton: ForwardRefExoticComponent<SkeletonProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The animation type of the skeleton.
+     * @default 'pulse'
+     */
+    animation?: 'pulse' | 'wave' | false;
+    /**
+     * The width of the skeleton.
+     */
+    width?: number | string;
+    /**
+     * The height of the skeleton.
+     */
+    height?: number | string;
+    /**
+     * The border radius of the skeleton.
+     * @default 'xs'
+     */
+    borderRadius?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+}
+
+/**
+ * Snackbar component for displaying snackbar notifications
+ * Must be used within a SnackbarProvider
+ *
+ * @example
+ * ```tsx
+ * import { SnackbarProvider, Snackbar, useSnackbar } from '@components';
+ *
+ * function App() {
+ *   return (
+ *     <SnackbarProvider>
+ *       <Snackbar />
+ *       <YourApp />
+ *     </SnackbarProvider>
+ *   );
+ * }
+ *
+ * function YourComponent() {
+ *   const { snackbar, success, error } = useSnackbar();
+ *
+ *   return (
+ *     <button onClick={() => success('Operation completed!')}>
+ *       Click me
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare const Snackbar: default_2.FC<SnackbarProps>;
+
+export declare interface SnackbarItem {
+    /**
+     * Unique identifier for the snackbar
+     */
+    id: string;
+    /**
+     * Content of the snackbar
+     */
+    children: string;
+    /**
+     * Timestamp when the snackbar was created
+     */
+    createdAt: number;
+    /**
+     * Semantic variant of the snackbar
+     */
+    variant: SnackbarVariant;
+    /**
+     * Placement of the snackbar on screen
+     */
+    placement: SnackbarPlacement;
+    /**
+     * Whether to show the close button
+     */
+    showCloseButton: boolean;
+    /**
+     * Icon to display in the snackbar
+     */
+    icon?: CommonIconNames | Omit<IconProps, 'size' | 'color'>;
+    /**
+     * Label for the action button
+     */
+    actionLabel?: string;
+    /**
+     * Action to perform when the action button is clicked
+     */
+    onAction?: (id: string) => void;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: (id: string) => void;
+    /**
+     * Duration in milliseconds before auto-dismissing (0 = no auto-dismiss)
+     */
+    duration: number;
+    /**
+     * Whether the snackbar is currently being removed
+     */
+    isRemoving?: boolean;
+}
+
+export declare interface SnackbarOptions {
+    /**
+     * The semantic variant of the Snackbar
+     */
+    variant?: SnackbarVariant;
+    /**
+     * Placement of the snackbar on screen
+     * @default 'top-right'
+     */
+    placement?: SnackbarPlacement;
+    /**
+     * Whether to show the close button
+     */
+    showCloseButton?: boolean;
+    /**
+     * Icon to display in the Snackbar
+     */
+    icon?: CommonIconNames | Omit<IconProps, 'size' | 'color'>;
+    /**
+     * Label for the action button
+     */
+    actionLabel?: string;
+    /**
+     * Action to perform when the action button is clicked
+     */
+    onAction?: (id: string) => void;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: (id: string) => void;
+    /**
+     * Duration in milliseconds before auto-dismissing (0 = no auto-dismiss)
+     */
+    duration?: number;
+    /**
+     * Custom ID for the snackbar
+     */
+    id?: string;
+}
+
+export declare type SnackbarPlacement = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+export declare type SnackbarProps = Record<string, never>;
+
+export declare const SnackbarProvider: default_2.FC<SnackbarProviderProps>;
+
+declare interface SnackbarProviderProps {
+    children: default_2.ReactNode;
+    maxSnackbars?: number;
+    defaultDuration?: number;
+}
+
+export declare type SnackbarVariant = 'default' | 'positive' | 'warning' | 'error' | 'subtle';
+
+export declare type SpacingKeys = 'none' | 'xs2' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl2' | 'xl3' | 'xl4' | 'xl5' | 'xl6' | 'xl7';
+
+export declare const Stack: ForwardRefExoticComponent<StackProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The children of the button.
+     */
+    children: ReactNode;
+    /**
+     * Define gap between elements.
+     *
+     * Accepts either a single spacing key applied to both axes, or an object
+     * with `row` / `column` keys to target each axis independently.
+     * Fully responsive: any per-breakpoint value can itself be a spacing key
+     * or a `{ row, column }` object.
+     *
+     * @example
+     * gap="md"
+     * gap={{ row: 'sm', column: 'md' }}
+     * gap={{ minimum: 'sm', mobile: { row: 'md', column: 'lg' } }}
+     */
+    gap?: ResponsiveType<Gap>;
+    /**
+     * Define the direction of the stack
+     */
+    direction?: ResponsiveType<FlexDirection>;
+    /**
+     * Define how to justify the content
+     * All CSS properties from `justify-content` are accepted
+     */
+    justify?: ResponsiveType<JustifyContent>;
+    /**
+     * Define how to align the items
+     * All CSS properties from `align-items` are accepted
+     * @default 'baseline'
+     */
+    align?: ResponsiveType<AlignItems>;
+    /**
+     * Define how to align the items
+     * All CSS properties from `flex-wrap` are accepted
+     */
+    wrap?: ResponsiveType<FlexWrap>;
+    /**
+     * Define padding to the stack wrapper.
+     */
+    padding?: ResponsiveType<Padding>;
+    /**
+     * Define margin to the stack wrapper.
+     */
+    margin?: ResponsiveType<Margin>;
+    /**
+     * @deprecated Use the `height`, `width`, `minHeight`, `maxHeight`, `minWidth`, `maxWidth` props instead.
+     */
+    className?: string;
+    /**
+     * The height of the stack.
+     * @default 'auto'
+     */
+    height?: ResponsiveType<number | string>;
+    /**
+     * The width of the stack.
+     * @default '100%'
+     */
+    width?: ResponsiveType<number | string>;
+    /**
+     * The min height of the stack.
+     * @default 'auto'
+     */
+    minHeight?: ResponsiveType<number | string>;
+    /**
+     * The max height of the stack.
+     * @default 'auto'
+     */
+    maxHeight?: ResponsiveType<number | string>;
+    /**
+     * The min width of the stack.
+     * @default 'auto'
+     */
+    minWidth?: ResponsiveType<number | string>;
+    /**
+     * The max width of the stack.
+     * @default 'auto'
+     */
+    maxWidth?: ResponsiveType<number | string>;
+}
+
+/**
+ * Slide-in panel for a root `menuItems` entry. The shell renders only the back row and spacer; pass any
+ * content (e.g. one or more `ListMenu`s from a micro-frontend) as `content`. Selection and `activeItem`
+ * for that UI live outside `SideNavigation`.
+ */
+export declare type SubMenuLayer = {
+    /**
+     * Must match the `id` of the root `menuItems` entry that opens this panel.
+     */
+    parentId: string;
+    /**
+     * Custom body below the back row (often `ListMenu` or composed layout from a remote module).
+     */
+    content: ReactNode;
+    /**
+     * Label for the control that returns to the main menu.
+     * @default 'Hauptmenü'
+     */
+    backLabel?: string;
+};
+
+export declare const Switch: default_2.ForwardRefExoticComponent<SwitchProps & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    /**
+     * Whether the switch is checked.
+     */
+    checked?: boolean;
+    /**
+     * Whether the switch is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Handle change events.
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Whether to show icons on the switch.
+     */
+    withIcons?: boolean | IconStates;
+    /**
+     * The labels for the switch.
+     */
+    label?: string | LabelStates;
+    /**
+     * The placement of the label.
+     * @default 'left'
+     */
+    labelPlacement?: 'left' | 'right';
+    /**
+     * How the switch and label are aligned horizontally.
+     */
+    justify?: JustifyContent;
+    /**
+     * The value of the switch.
+     */
+    value?: string;
+    /**
+     * The name of the switch.
+     */
+    name?: string;
+    /**
+     * The id of the switch.
+     * @default auto-generated
+     */
+    id?: string;
+}
+
+declare type TabItem<T extends React.ElementType = 'button'> = {
+    label: string;
+    icon?: CommonIconNames;
+    iconPosition?: 'left' | 'top';
+    hideLabel?: boolean;
+    hasActivity?: boolean;
+    id: string;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+
+export declare const Table: {
+    <T extends readonly TableColumnProps[]>({ data, columns, title, subtitle, actions, filters, footer, orderBy, onOrderByChange, emptyState, hiddenColumns, loading, expandedRows, headerBackgroundColor, }: TableProps<T>): JSX.Element;
+    displayName: string;
+};
+
+export declare type TableColumnDirection = (typeof direction)[keyof typeof direction];
+
+export declare interface TableColumnProps extends React.HTMLAttributes<HTMLTableColElement> {
+    /**
+     * The children of the Table.
+     */
+    label: React.ReactNode;
+    /**
+     * The id of the Table column.
+     */
+    id: string;
+    /**
+     * The alignment of the Table column.
+     */
+    align?: ColumnAlign;
+    /**
+     * The width of the Table column.
+     */
+    width?: string;
+    /**
+     * The minimum width of the Table column.
+     */
+    minWidth?: string;
+    /**
+     * If true, the column is orderable.
+     */
+    orderable?: boolean;
+}
+
+export declare interface TableProps<T extends readonly TableColumnProps[] = readonly TableColumnProps[]> extends React.HTMLAttributes<HTMLTableElement> {
+    /**
+     * The title of the Table.
+     */
+    title?: string;
+    /**
+     * The subtitle of the Table.
+     */
+    subtitle?: string;
+    /**
+     * The action of the Table.
+     */
+    actions?: React.ReactNode;
+    /**
+     * The filters of the Table.
+     */
+    filters?: React.ReactNode;
+    /**
+     * The data rows of the Table.
+     */
+    data: TableRowData<T>[];
+    /**
+     * The loading state of the Table.
+     */
+    loading?: boolean;
+    /**
+     * The columns of the Table.
+     */
+    columns: T;
+    /**
+     * The hidden columns of the Table.
+     */
+    hiddenColumns?: ColumnId<T>[];
+    /**
+     * The expanded rows of the Table.
+     */
+    expandedRows?: string[];
+    /**
+     * The order by of the Table.
+     */
+    orderBy?: {
+        column: ColumnId<T>;
+        direction: TableColumnDirection;
+    };
+    /**
+     * Callback function to handle order by change.
+     */
+    onOrderByChange?: ({ columnId, direction, }: {
+        columnId: ColumnId<T>;
+        direction: TableColumnDirection;
+    }) => void;
+    /**
+     * The empty state of the Table.
+     * @default 'Keine Daten gefunden'
+     */
+    emptyState?: React.ReactNode;
+    /**
+     * The footer of the Table.
+     */
+    footer?: React.ReactNode;
+    /**
+     * The background color of the table header.
+     * @default false
+     */
+    headerBackgroundColor?: boolean;
+}
+
+export declare type TableRowData<T extends readonly TableColumnProps[]> = {
+    [K in ColumnId<T>]: React.ReactNode;
+} & {
+    expandableRow?: ExpandableRowConfig;
+};
+
+export declare const Tabs: {
+    <T extends React.ElementType = "button">({ items, activeItem, onChange, hideBorder, itemsAlignment, isSticky, panels, linkComponent: LinkComponent, }: TabsProps<T>): JSX.Element;
+    displayName: string;
+};
+
+export declare interface TabsProps<T extends React.ElementType = 'button'> {
+    /**
+     * The items to display in the tabs.
+     */
+    items: TabItem<T>[];
+    /**
+     * Whether the tabs are sticky.
+     */
+    isSticky?: boolean;
+    /**
+     * The panels to display in the tabs.
+     */
+    panels?: Panel[];
+    /**
+     * The active item in the tabs.
+     */
+    activeItem: string;
+    /**
+     * The callback function to handle the change of the active item.
+     */
+    onChange?: (item: TabItem<T>) => void;
+    /**
+     * Whether to hide the border of the tabs.
+     */
+    hideBorder?: boolean;
+    /**
+     * The link component to use for the tabs.
+     */
+    linkComponent?: T | 'button' | 'a';
+    /**
+     * The alignment of the tabs.
+     */
+    itemsAlignment?: 'left' | 'center' | 'right' | 'between' | 'around' | 'evenly';
+}
+
+export declare const Tag: ForwardRefExoticComponent<TagProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The label of the tag.
+     */
+    label: string;
+    /**
+     * The variant of the tag
+     */
+    variant?: 'solid' | 'outlined' | 'ghost';
+    /**
+     * The color of the tag
+     */
+    color?: 'green' | 'yellow' | 'pink' | 'steel-blue' | 'error' | 'primary' | 'neutral';
+    /**
+     * The tone of the tag `color` <br />
+     * Only works with `variant` set to `solid`
+     */
+    tone?: 'dark' | 'light';
+    /**
+     * The size of the tag.
+     *
+     * Accepts a single value or a responsive object keyed by viewport.
+     *
+     * @default 'md'
+     *
+     * @remarks
+     * The values `'small' | 'medium' | 'large'` are **deprecated** and kept for
+     * backwards compatibility. They are mapped to `'sm' | 'md' | 'lg'` and will
+     * be removed in v3.0.0.
+     */
+    size?: ResponsiveType<TagSize | TagSizeLegacy>;
+    /**
+     * The icon of the tag
+     */
+    icon?: CommonIconNames;
+}
+
+export declare type TagSize = 'sm' | 'md' | 'lg';
+
+/* Excluded from this release type: TagSizeLegacy */
+
+export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
+
+export declare interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'> {
+    /**
+     * If true, the textarea will display an error state.
+     */
+    error?: boolean;
+    /**
+     * The value of the textarea.
+     */
+    value?: string;
+    /**
+     * The error message to display below the textarea.
+     */
+    errorMessage?: string;
+    /**
+     * The maximum length of the textarea.
+     */
+    maxLength?: number;
+    /**
+     * The border radius of the textarea.
+     * @default 'sm'
+     */
+    borderRadius?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Content rendered above the textarea input, separated by a subtle border.
+     * Use to display contextual items such as attached files (e.g. `<Chip type="input" />`).
+     */
+    header?: React.ReactNode;
+    /**
+     * The actions to display below the textarea.
+     */
+    actions?: React.ReactNode;
+}
+
+export declare const TextField: ForwardRefExoticComponent<TextFieldProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * The label that will be displayed above the input. <br />
+     * It is required for accessibility purposes.
+     */
+    label: string;
+    /**
+     * When true, the input applies the error style. <br />
+     * Will also display the error message is any is provided.
+     */
+    error?: boolean;
+    /**
+     * The error message that will be displayed below the input. <br />
+     * It is only displayed when the error prop is true.
+     */
+    errorMessage?: string;
+    /**
+     * The value of the input. <br />
+     */
+    value?: string;
+    /**
+     * The placeholder that will be displayed inside the input. <br />
+     * If the label is visible, it will be shown in its active state.
+     */
+    placeholder?: string;
+    /**
+     * The  density of the input will control the size of the input.
+     */
+    density?: ResponsiveType<Density>;
+    /**
+     * If true the label will be hidden. <br />
+     * This will apply only visually, the label will still be present in the DOM for accessibility purposes.
+     */
+    hideLabel?: boolean;
+    /**
+     * Make the input disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Make the input focused in a controlled way.
+     */
+    isFocused?: boolean;
+    /**
+     * Make the input clearable. <br />
+     * When true, a clear button will be displayed on the right side of the input. <br />
+     * When there's a icon placed on the right side of the input, the clear button will be hidden. <br />
+     * Important: only works with controlled inputs.
+     */
+    clearable?: boolean;
+    /**
+     * The icon that will be displayed on the left side of the input.
+     */
+    icon?: CommonIconNames;
+    /**
+     * The action that will be triggered when the icon is clicked.
+     */
+    onIconClick?: () => void;
+    /**
+     * This prop controls the position of the icon.
+     */
+    iconPosition?: 'left' | 'right';
+    /**
+     * Callback function that will be called when the input changes.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export declare const Tooltip: ({ children, content, placement, disabled, }: TooltipProps) => JSX.Element;
+
+export declare interface TooltipProps {
+    /**
+     * The trigger element that the tooltip is attached to
+     */
+    children: React.ReactNode;
+    /**
+     * The content to be displayed in the tooltip
+     */
+    content: React.ReactNode;
+    /**
+     * The position of the tooltip relative to its trigger
+     */
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    /**
+     * Whether the tooltip should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the tooltip should be open
+     */
+    isOpen?: boolean;
+}
+
+export declare const TopBar: ({ leftBottomContent, subtitle, leftTopContent, rightTopContent, rightBottomContent, density, }: TopBarProps) => JSX.Element;
+
+export declare interface TopBarProps {
+    /**
+     * The content to be displayed in the left top section.
+     */
+    leftTopContent?: ReactNode;
+    /**
+     * The content to be displayed in the right top section.
+     */
+    rightTopContent?: ReactNode;
+    /**
+     * The content to be displayed in the left bottom section.
+     */
+    leftBottomContent?: string | ReactNode;
+    /**
+     * The content to be displayed in the right bottom section.
+     */
+    rightBottomContent?: ReactNode;
+    /**
+     * The subtitle to be displayed bellow the bottom section.
+     */
+    subtitle?: string;
+    /**
+     * The density of the top bar. It can be used to adjust the spacing and font sizes.
+     */
+    density?: 'default' | '-2' | '-4';
+}
+
+export declare const Typography: ({ children, variant, size, as: AsComponent, color, textAlign, truncate, textTransform, hyphenate, wrap, ...props }: TypographyProps) => JSX.Element;
+
+declare type TypographyElements = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export declare type TypographyProps<T extends TypographyElements = 'p'> = Omit<React.ComponentPropsWithoutRef<T>, 'as' | 'children'> & {
+    /**
+     * The children of the typography.
+     */
+    children: React.ReactNode;
+    /**
+     * The variant is used
+     */
+    variant?: 'display' | 'body' | 'title' | 'headline' | 'label';
+    /**
+     * The size of the typography.
+     *
+     * Accepts a single value or a responsive object keyed by viewport.
+     *
+     * @default 'md'
+     *
+     * @remarks
+     * The values `'small' | 'medium' | 'large'` are **deprecated** and kept for
+     * backwards compatibility. They are mapped to `'sm' | 'md' | 'lg'` and will
+     * be removed in v3.0.0.
+     */
+    size?: ResponsiveType<TypographySize | TypographySizeLegacy>;
+    /**
+     * The html element of the typography. The TS type of the chosen element will be extended so you the component will accept all the props of the chosen element.
+     */
+    as?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * The text alignment of the typography.
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    /**
+     * CSS text-transform property
+     */
+    textTransform?: 'uppercase' | 'lowercase' | 'capitalize';
+    /**
+     * The color of the typography.
+     */
+    color?: ForegroundColors;
+    /**
+     * If true, the text will be hyphenated based on the `lang` attribute of the parent element.
+     * @default true
+     */
+    hyphenate?: boolean;
+    /**
+     * Sets a specific amount of lines to show based on it's container.
+     * The text that doesn't fit the container will be hidden and replaced by ellipsis
+     */
+    truncate?: number;
+    /**
+     * If true, the text will be wrapped.
+     */
+    wrap?: boolean;
+};
+
+export declare type TypographySize = 'sm' | 'md' | 'lg';
+
+/* Excluded from this release type: TypographySizeLegacy */
+
+declare type Union = {
+    /**
+     * Whether the select is multiple.
+     */
+    multiple?: true;
+    /**
+     * The value of the select.
+     */
+    value?: string[];
+} | {
+    /**
+     * Whether the select is multiple.
+     */
+    multiple?: false;
+    /**
+     * The value of the select.
+     */
+    value?: string;
+};
+
+declare type UnionAs = ({
+    /**
+     * The component to render the button as.
+     * @default button
+     */
+    as?: 'a';
+} & Omit<React.ComponentProps<'a'>, 'className'>) | ({
+    as?: 'button';
+} & Omit<React.ComponentProps<'button'>, 'className'>) | ({
+    as?: 'span';
+} & Omit<React.ComponentProps<'span'>, 'className'>);
+
+declare type UnionAs_2 = ({
+    /**
+     * Render the card root as a specific HTML element.
+     * @default 'div'
+     */
+    as?: 'a';
+} & Omit<React.ComponentProps<'a'>, 'className'>) | ({
+    as?: 'div';
+} & Omit<React.ComponentProps<'div'>, 'className'>);
+
+declare type UnionAs_3 = ({
+    /**
+     * The component to render the button as.
+     * @default button
+     */
+    as?: 'a';
+} & Omit<React.ComponentProps<'a'>, 'className' | 'ref' | 'role' | 'tabIndex' | 'onClick' | 'disabled'>) | ({
+    /**
+     * The component to render the button as.
+     * @default button
+     */
+    as?: 'button';
+} & Omit<React.ComponentProps<'button'>, 'className' | 'type' | 'onClick' | 'disabled' | 'ref' | 'role' | 'tabIndex'>);
+
+declare type UnionPlacement = {
+    /**
+     * The placement of the sheet.
+     * - 'bottom': Slides up from bottom, centered horizontally
+     * - 'right': Slides in from right, full screen on mobile, max-width 570px on desktop
+     * @default 'bottom'
+     */
+    placement?: 'bottom';
+    /**
+     * Whether to make the sheet resizable. <br />
+     * only available for right placement.
+     * @default never
+     */
+    resizable?: never;
+    /**
+     * Custom width for the sheet in pixels. <br />
+     * only available for right placement.
+     * @default never
+     */
+    width?: never;
+    /**
+     * Minimum width for the sheet in pixels. <br />
+     * only available for right placement.
+     * @default never
+     */
+    minWidth?: never;
+    /**
+     * Maximum width for the sheet in pixels. <br />
+     * only available for right placement.
+     * @default never
+     */
+    maxWidth?: never;
+    /**
+     * Callback function called when the sheet resize finishes. <br />
+     * only available for right placement.
+     * @default never
+     */
+    onResizeEnd?: never;
+} | {
+    /**
+     * The placement of the sheet.
+     * - 'bottom': Slides up from bottom, centered horizontally
+     * - 'right': Slides in from right, full screen on mobile, max-width 570px on desktop
+     * @default 'bottom'
+     */
+    placement?: 'right';
+    /**
+     * Whether to make the sheet resizable. <br />
+     * Only available for right placement on desktop (768px/mobile breakpoint and above). <br />
+     * On mobile, the sheet always takes 100% width and is not resizable.
+     * @default false
+     */
+    resizable?: boolean;
+    /**
+     * Custom width for the sheet. <br />
+     * Accepts a number (pixels) or string (e.g., "50%", "30rem"). <br />
+     * Will not go below the minimum width (default 570px or custom minWidth). <br />
+     * Only available for right placement on desktop (768px/mobile breakpoint and above). <br />
+     * On mobile, the sheet always takes 100% width.
+     * @default undefined
+     */
+    width?: number | string;
+    /**
+     * Minimum width for the sheet. <br />
+     * Accepts a number (pixels) or string (e.g., "50%", "30rem"). <br />
+     * Note: The absolute minimum of 570px is always enforced, regardless of this setting. <br />
+     * Only available for right placement on desktop (768px/mobile breakpoint and above).
+     * @default 570
+     */
+    minWidth?: number | string;
+    /**
+     * Maximum width for the sheet. <br />
+     * Accepts a number (pixels) or string (e.g., "80%", "50rem"). <br />
+     * Only available for right placement on desktop (768px/mobile breakpoint and above).
+     * @default undefined
+     */
+    maxWidth?: number | string;
+    /**
+     * Callback function called when the sheet resize finishes. <br />
+     * Provides the new width in pixels. <br />
+     * Only available for right placement on desktop (768px/mobile breakpoint and above).
+     * @param width - The new width of the sheet in pixels
+     * @default undefined
+     */
+    onResizeEnd?: (width: number) => void;
+};
+
+export declare const Uploader: ForwardRefExoticComponent<UploaderProps & RefAttributes<UploaderRef>>;
+
+/**
+ * Context value provided by the Uploader component.
+ * Contains all state and methods needed by child components.
+ */
+export declare interface UploaderContextValue {
+    /**
+     * Current list of files in the uploader.
+     */
+    files: FileItem[];
+    /**
+     * Whether files are currently being processed.
+     */
+    isProcessing: boolean;
+    /**
+     * Current component-level error, if any.
+     */
+    componentError: {
+        code: COMPONENT_ERROR;
+        message: string;
+    } | null;
+    /**
+     * List of files that were rejected during validation.
+     */
+    rejectedFiles: RejectedFile[];
+    /**
+     * Whether files are being dragged over the drop zone.
+     */
+    isDragging: boolean;
+    /**
+     * Current screen reader announcement text.
+     */
+    announcement: string;
+    /**
+     * Whether the uploader is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether files can be deleted from the list.
+     */
+    canDeleteFile?: boolean;
+    /**
+     * Accepted file types string.
+     */
+    accept?: string;
+    /**
+     * Whether multiple files can be selected.
+     */
+    multiple?: boolean;
+    /**
+     * Localized label strings.
+     */
+    labels: typeof DEFAULT_LABELS;
+    /**
+     * HTML name attribute for the input.
+     */
+    name?: string;
+    /**
+     * Whether the input is required.
+     */
+    required?: boolean;
+    /**
+     * HTML id attribute for the input.
+     */
+    id?: string;
+    /**
+     * Form ID the input belongs to.
+     */
+    form?: string;
+    /**
+     * ID of element labelling the uploader.
+     */
+    ariaLabelledby?: string;
+    /**
+     * ID of element describing the uploader.
+     */
+    ariaDescribedby?: string;
+    /**
+     * ID of the error message element.
+     */
+    errorMessageId?: string;
+    /**
+     * Adds files to the uploader.
+     */
+    addFiles: (files: FileItem[]) => void;
+    /**
+     * Removes a file by ID.
+     */
+    removeFile: (id: string) => void;
+    /**
+     * Replaces all files with new files.
+     */
+    replaceFiles: (files: FileItem[]) => void;
+    /**
+     * Removes all files.
+     */
+    clearAll: () => void;
+    /**
+     * Updates the state of a specific file.
+     */
+    updateFileState: (id: string, state: Partial<FileState>) => void;
+    /**
+     * Sets the processing state.
+     */
+    setProcessing: (isProcessing: boolean, processingId?: string | null) => void;
+    /**
+     * Sets a component-level error.
+     */
+    setComponentError: (error: {
+        code: COMPONENT_ERROR;
+        message: string;
+    } | null) => void;
+    /**
+     * Clears all rejected files from the rejection list.
+     */
+    clearRejectedFiles: () => void;
+    /**
+     * Makes a screen reader announcement.
+     */
+    announce: (type: AnnouncementType, data: Record<string, unknown>) => void;
+    /**
+     * Ref to the hidden file input element.
+     */
+    inputRef: default_2.RefObject<HTMLInputElement | null>;
+    /**
+     * Opens the native file picker.
+     */
+    openPicker: () => void;
+    /**
+     * Handles file input change events.
+     */
+    handleInputChange: (event: default_2.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Handles file input invalid events.
+     */
+    handleInputInvalid: (event: default_2.FormEvent<HTMLInputElement>) => void;
+    /**
+     * Event handlers for drag and drop functionality.
+     */
+    dragHandlers: {
+        onDragEnter: (event: default_2.DragEvent) => void;
+        onDragOver: (event: default_2.DragEvent) => void;
+        onDragLeave: (event: default_2.DragEvent) => void;
+        onDrop: (event: default_2.DragEvent) => void;
+    };
+    /**
+     * Custom function to generate file error messages.
+     */
+    getFileErrorMessage?: (error: FILE_ERROR, file: File) => string;
+    /**
+     * Custom function to generate component error messages.
+     */
+    getComponentErrorMessage?: (error: COMPONENT_ERROR, data: Record<string, unknown>) => string;
+    /**
+     * Custom function to generate announcements.
+     */
+    getAnnouncement?: (type: AnnouncementType, data: Record<string, unknown>) => string;
+    /**
+     * Callback when upload is cancelled.
+     */
+    onCancel?: (id: string) => void;
+    /**
+     * Callback when failed upload should be retried.
+     */
+    onRetry?: (id: string) => void;
+    /**
+     * Additional input props to spread on the native input element.
+     */
+    inputProps?: Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInvalid' | 'className' | 'value' | 'type' | 'accept' | 'multiple' | 'name' | 'required' | 'id' | 'form' | 'disabled'>;
+}
+
+/**
+ * Labels configuration for the Uploader component.
+ * All fields are required when defining the full labels object.
+ * Use Partial<UploaderLabels> for optional overrides.
+ */
+export declare type UploaderLabels = {
+    /** Text displayed in the drop zone. */
+    dropZoneText: string;
+    /** Text for the browse link. */
+    browseText: string;
+    /** Text shown when dragging files over the drop zone. */
+    dragOverText: string;
+    /** Text shown while processing files. */
+    processingText: string;
+    /** Accessible label for the drop zone. */
+    ariaLabel: string;
+    /** Accessible label for the file list. */
+    fileListLabel: string;
+    /** Text shown when upload is canceled. */
+    canceledText: string;
+    /** Text shown when upload fails. */
+    failedText: string;
+    /** Text for cancel button. */
+    cancelButtonText: string;
+    /** Accessible label function for cancel button. */
+    cancelButtonLabel: (fileName: string) => string;
+    /** Text for retry button. */
+    retryButtonText: string;
+    /** Accessible label function for retry button. */
+    retryButtonLabel: (fileName: string) => string;
+    /** Accessible label function for remove button. */
+    removeButtonLabel: (fileName: string) => string;
+    /** Function returning upload progress text. */
+    uploadingText: (progress: number) => string;
+    /** Text shown while finalizing upload. */
+    finalizingUploadText: string;
+    /** Function to pluralize "file(s)" text. */
+    pluralizeFiles: (count: number) => string;
+    /** Text for dismiss all rejections button. */
+    dismissAllRejectionsText: string;
+    /** Header text for the rejection list. */
+    rejectionListHeaderText: string;
+    /** Function returning show more files text. */
+    showMoreFilesText: (count: number) => string;
+    /** Text to show less files. */
+    showLessFilesText: string;
+    /** Function returning max count exceeded error message with limit. */
+    maxCountExceededWithLimitText: (maxCount: number) => string;
+    /** Text for "added" in announcements. */
+    addedText: string;
+    /** Text for "total" in announcements. */
+    totalText: string;
+    /** Text for "selected" in announcements. */
+    selectedText: string;
+    /** Text for file removed announcement. */
+    fileRemovedText: string;
+    /** Text for all files removed announcement. */
+    allFilesRemovedText: string;
+    /** Error message for required field. */
+    requiredErrorMessage: string;
+    /** Error messages for file-level validation errors. Allows overriding individual messages. */
+    fileErrorMessages: Partial<Record<FILE_ERROR, string>>;
+    /** Error messages for component-level validation errors. Allows overriding individual messages. */
+    componentErrorMessages: Partial<Record<COMPONENT_ERROR, string>>;
+};
+
+export declare interface UploaderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onInvalid' | 'className' | 'value' | 'type' | 'accept' | 'multiple' | 'name' | 'required' | 'id' | 'form' | 'disabled'> {
+    /**
+     * Accepted file types (MIME types or file extensions).
+     * Uses the same format as the HTML input accept attribute.
+     * @example "image/*,.pdf,.doc,.docx"
+     */
+    accept?: string;
+    /**
+     * Whether multiple files can be selected at once.
+     * @default true
+     */
+    multiple?: boolean;
+    /**
+     * Whether the uploader is disabled.
+     * When disabled, files cannot be added or removed.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether individual files can be deleted from the list.
+     * When false, the delete button is hidden on file items.
+     */
+    canDeleteFile?: boolean;
+    /**
+     * Determines how new files are handled when selected.
+     * - 'append': New files are added to the existing list
+     * - 'replace': New files replace the existing list
+     * @default 'append'
+     */
+    selectionMode?: 'append' | 'replace';
+    /**
+     * Maximum allowed size for a single file in bytes.
+     * Files exceeding this limit will be marked as invalid.
+     */
+    maxFileSize?: number;
+    /**
+     * Maximum allowed total size of all files combined in bytes.
+     * Exceeding this limit triggers a component-level error.
+     */
+    maxTotalSize?: number;
+    /**
+     * Maximum number of files allowed.
+     * Exceeding this limit triggers a component-level error.
+     */
+    maxCount?: number;
+    /**
+     * Minimum number of files required.
+     * Having fewer files triggers a component-level error.
+     */
+    minCount?: number;
+    /**
+     * Controlled value - the list of files.
+     * When provided, the component operates in controlled mode.
+     */
+    value?: FileItem[];
+    /**
+     * Callback fired when files are added, removed, replaced, or cleared.
+     * Required when using controlled mode (value prop).
+     */
+    onChange?: (event: ChangeEvent) => void;
+    /**
+     * Callback fired after file validation is complete.
+     * Provides validation results for each file and any component-level errors.
+     */
+    onValidation?: (event: ValidationEvent) => void;
+    /**
+     * Callback fired when a file upload is cancelled.
+     * Receives the file ID that was cancelled.
+     */
+    onCancel?: (id: string) => void;
+    /**
+     * Callback fired when a failed upload should be retried.
+     * Receives the file ID that should be retried.
+     */
+    onRetry?: (id: string) => void;
+    /**
+     * Custom labels for various UI elements.
+     * Allows localization and customization of text content.
+     */
+    labels?: Partial<UploaderLabels>;
+    /**
+     * Custom function to generate error messages for file-level errors.
+     * @param error - The error type
+     * @param file - The file that caused the error
+     * @returns Custom error message
+     */
+    getFileErrorMessage?: (error: FILE_ERROR, file: File) => string;
+    /**
+     * Custom function to generate error messages for component-level errors.
+     * @param error - The error type
+     * @param data - Additional data about the error (e.g., maxCount, totalSize)
+     * @returns Custom error message
+     */
+    getComponentErrorMessage?: (error: COMPONENT_ERROR, data: Record<string, unknown>) => string;
+    /**
+     * Custom function to generate announcement messages for screen readers.
+     * @param type - The type of announcement
+     * @param data - Additional data about the action
+     * @returns Custom announcement message
+     */
+    getAnnouncement?: (type: AnnouncementType, data: Record<string, unknown>) => string;
+    /**
+     * HTML name attribute for the file input.
+     * Used for form submission.
+     */
+    name?: string;
+    /**
+     * Whether the file input is required.
+     * Used for form validation.
+     */
+    required?: boolean;
+    /**
+     * HTML id attribute for the file input.
+     */
+    id?: string;
+    /**
+     * Associates the input with a specific form element.
+     */
+    form?: string;
+    /**
+     * ID of an element that labels the uploader.
+     * Used for accessibility.
+     */
+    ariaLabelledby?: string;
+    /**
+     * ID of an element that describes the uploader.
+     * Used for accessibility.
+     */
+    ariaDescribedby?: string;
+    /**
+     * Custom content to render instead of the default FileList.
+     * When provided, showFileList is ignored.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether to show the default file list below the drop zone.
+     * @default true
+     */
+    showFileList?: boolean;
+}
+
+/**
+ * Provider component that supplies the Uploader context to child components.
+ */
+export declare const UploaderProvider: ({ value, children, }: UploaderProviderProps) => default_2.JSX.Element;
+
+/**
+ * Props for the UploaderProvider component.
+ */
+export declare interface UploaderProviderProps extends PropsWithChildren {
+    /**
+     * The context value to provide.
+     */
+    value: UploaderContextValue;
+}
+
+/**
+ * Ref handle for the Uploader component.
+ * Provides imperative methods to control the uploader.
+ */
+export declare interface UploaderRef {
+    /**
+     * Focuses the file input element.
+     */
+    focus: () => void;
+    /**
+     * Opens the file picker dialog.
+     */
+    click: () => void;
+    /**
+     * Removes all files from the uploader.
+     * Only works in uncontrolled mode.
+     */
+    clearAll: () => void;
+    /**
+     * Updates the state of a specific file.
+     * Only works in uncontrolled mode.
+     * @param id - The ID of the file to update
+     * @param state - Partial state to merge with existing state
+     */
+    updateFileState: (id: string, state: Partial<FileState>) => void;
+    /**
+     * Removes a specific file from the uploader.
+     * Only works in uncontrolled mode.
+     * @param id - The ID of the file to remove
+     */
+    removeFile: (id: string) => void;
+}
+
+/**
+ * Custom hook that tracks the current breakpoint based on window width.
+ * Returns an object with the current breakpoint and utility functions for comparison.
+ *
+ * @param enabled - Whether to set up resize event listeners. Defaults to true.
+ *                  Set to false to prevent unnecessary listeners when breakpoint tracking is not needed.
+ * @returns An object containing the current breakpoint and comparison utilities
+ *
+ * @example
+ * ```tsx
+ * const { currentBreakpoint, isBiggerThan, isSmallerThan, isBetween } = useBreakpoint();
+ *
+ * // Check current breakpoint
+ * console.log(currentBreakpoint); // 'tablet'
+ *
+ * // Check if viewport is bigger than mobile
+ * if (isBiggerThan('mobile')) {
+ *   // Render desktop layout
+ * }
+ *
+ * // Check if viewport is smaller than laptop
+ * if (isSmallerThan('laptop')) {
+ *   // Render mobile layout
+ * }
+ *
+ * // Check if viewport is between tablet and laptop (inclusive)
+ * if (isBetween('tablet', 'laptop')) {
+ *   // Render medium layout
+ * }
+ * ```
+ */
+export declare const useBreakpoint: (enabled?: boolean) => UseBreakpointReturn;
+
+export declare interface UseBreakpointReturn {
+    /** The current viewport breakpoint */
+    currentBreakpoint: Viewport;
+    /** Returns true if the current breakpoint is larger than the specified breakpoint */
+    isBiggerThan: (breakpoint: Viewport) => boolean;
+    /** Returns true if the current breakpoint is smaller than the specified breakpoint */
+    isSmallerThan: (breakpoint: Viewport) => boolean;
+    /** Returns true if the current breakpoint is between the two specified breakpoints (inclusive) */
+    isBetween: (minBreakpoint: Viewport, maxBreakpoint: Viewport) => boolean;
+}
+
+export declare const useClickOutside: <T extends Node = HTMLElement>(refs: RefType<T> | RefType<T>[] | RefType<Node>[], callback: () => void, isOpen?: boolean) => void;
+
+export declare const UserArea: ForwardRefExoticComponent<UserAreaProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface UserAreaProps {
+    /**
+     * The user's display name
+     */
+    name: string;
+    /**
+     * Optional subtitle (e.g. role, company)
+     */
+    subtitle?: string;
+    /**
+     * The avatar of the user (see AvatarProps)
+     */
+    avatar: AvatarProps;
+    /**
+     * Whether to display in compact mode (small avatar)
+     * @default false
+     */
+    compact?: boolean;
+    /**
+     * Whether to show the user info text (name and subtitle)
+     * @default true
+     */
+    showInfo?: boolean;
+    /**
+     * Position of the info text relative to the avatar
+     * @default 'right'
+     */
+    infoPosition?: 'left' | 'right';
+    /**
+     * Menu items displayed in a PopUpMenu when the user area is clicked
+     */
+    menuItems?: PopUpMenuItem[];
+    /**
+     * Callback when a menu item is clicked
+     */
+    onItemClick?: (item: PopUpMenuItem) => void;
+    /**
+     * The max height of the popup menu
+     * @default '80dvh'
+     */
+    menuMaxHeight?: ResponsiveType<number | string>;
+    /**
+     * The placement of the popup menu
+     * @default 'top-left'
+     */
+    menuPlacement?: ResponsiveType<PopUpMenuPlacement>;
+}
+
+export declare const useSheetAnimation: (open: boolean) => {
+    mounted: boolean;
+    show: boolean;
+    setShow: Dispatch<SetStateAction<boolean>>;
+};
+
+/**
+ * Custom hook to handle Sheet closing logic
+ *
+ * Centralizes the close animation pattern:
+ * 1. Hide the sheet (trigger exit animation)
+ * 2. Wait for animation to complete (500ms)
+ * 3. Call onClose callback (unmount)
+ */
+export declare const useSheetClose: ({ setShow, onClose, closeOnBackdropClick, }: UseSheetCloseProps) => UseSheetCloseReturn;
+
+declare interface UseSheetCloseProps {
+    setShow: Dispatch<SetStateAction<boolean>>;
+    onClose: () => void;
+    closeOnBackdropClick: boolean;
+}
+
+declare interface UseSheetCloseReturn {
+    handleSwipeDismiss: () => void;
+    handleBackdropClick: () => void;
+}
+
+export declare const useSheetEscape: (onClose: () => void, closeOnEsc: boolean) => void;
+
+export declare const useSheetFocus: (sheetRef: React.RefObject<HTMLDivElement | null>, mounted: boolean) => void;
+
+/**
+ * Custom hook to register/unregister sheet with the global SheetManager
+ *
+ * Ensures proper lifecycle management of sheets in the manager,
+ * allowing for global sheet coordination (e.g., closing all sheets)
+ */
+export declare const useSheetRegistration: ({ sheetId, mounted, open, onClose, }: UseSheetRegistrationProps) => void;
+
+declare interface UseSheetRegistrationProps {
+    sheetId: string;
+    mounted: boolean;
+    open: boolean;
+    onClose: () => void;
+}
+
+export declare const useSheetResize: ({ sheetRef, handleRef, enabled, minWidth: customMinWidth, maxWidth: customMaxWidth, onResizeEnd, }: UseSheetResizeProps) => void;
+
+declare interface UseSheetResizeProps {
+    sheetRef: React.RefObject<HTMLDivElement | null>;
+    handleRef: React.RefObject<HTMLDivElement | null>;
+    enabled: boolean;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    onResizeEnd?: (width: number) => void;
+}
+
+/**
+ * Custom hook to track scroll position and overflow state for Sheet component
+ *
+ * Monitors:
+ * - Whether content is scrolled from top (for header border)
+ * - Whether scrolled to bottom (for footer border)
+ * - Whether content overflows container (for conditional styling)
+ */
+export declare const useSheetScrollTracking: ({ scrollableContentRef, sheetRef, contentRef, mounted, }: UseSheetScrollTrackingProps) => UseSheetScrollTrackingReturn;
+
+declare interface UseSheetScrollTrackingProps {
+    scrollableContentRef: React.RefObject<HTMLDivElement | null>;
+    sheetRef: React.RefObject<HTMLDivElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    mounted: boolean;
+}
+
+declare interface UseSheetScrollTrackingReturn {
+    isScrolled: boolean;
+    isAtBottom: boolean;
+    hasOverflow: boolean;
+}
+
+export declare const useSheetSwipe: ({ sheetRef, onDismiss, enabled, placement, }: UseSheetSwipeProps) => void;
+
+declare interface UseSheetSwipeProps {
+    sheetRef: React.RefObject<HTMLDivElement | null>;
+    onDismiss: () => void;
+    enabled: boolean;
+    placement?: 'bottom' | 'right';
+}
+
+/**
+ * Custom hook to manage Sheet width constraints and validation
+ *
+ * Features:
+ * - Applies custom width for right-placed sheets on desktop
+ * - Enforces absolute minimum width (570px)
+ * - Validates against min/max width constraints
+ * - Ensures width doesn't exceed screen width
+ * - Provides helpful console warnings for constraint violations
+ */
+export declare const useSheetWidth: ({ sheetRef, placement, width, minWidth, maxWidth, mounted, }: UseSheetWidthProps) => void;
+
+declare interface UseSheetWidthProps {
+    sheetRef: React.RefObject<HTMLDivElement | null>;
+    placement: 'bottom' | 'right';
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    mounted: boolean;
+}
+
+/**
+ * Hook to interact with the Snackbar system
+ * Must be used within a SnackbarProvider
+ */
+export declare const useSnackbar: () => UseSnackbarReturn;
+
+export declare interface UseSnackbarReturn {
+    /**
+     * Show a snackbar message
+     */
+    snackbar: (message: SnackbarItem['children'], options?: SnackbarOptions) => SnackbarItem['id'];
+    /**
+     * Dismiss a specific snackbar by ID
+     */
+    dismiss: (id: string) => void;
+    /**
+     * Dismiss all snackbars
+     */
+    dismissAll: () => void;
+}
+
+/**
+ * Event emitted after file validation is complete.
+ */
+export declare interface ValidationEvent {
+    /**
+     * Whether all files passed validation with no component errors.
+     */
+    isValid: boolean;
+    /**
+     * Validation results for each file.
+     */
+    fileResults: Array<{
+        /** ID of the file. Optional for rejected files that are not added to the file list. */
+        id?: string;
+        /** Whether the file has a validation error. */
+        hasError: boolean;
+        /** The error type if validation failed. */
+        error?: FILE_ERROR;
+        /** Human-readable error message. */
+        errorMessage?: string;
+    }>;
+    /**
+     * Component-level errors that occurred during validation.
+     */
+    componentErrors?: Array<{
+        code: COMPONENT_ERROR;
+        message: string;
+    }>;
+}
+
+export declare type Viewport = keyof typeof BREAKPOINTS;
+
+export declare const ZvooveBrand: {
+    ({ product, iconStyle, size, hideIcon, hideName, hideTagline, tagline: taglineProp, iconSize: iconSizeProp, nameHeight: nameHeightProp, taglineSize: taglineSizeProp, }: ZvooveBrandProps): JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Visual style of the logomark.
+ * - `duotone`: brand colors in light mode, switches to the themed flat
+ *   variant in dark mode so the logomark always follows the surface tone.
+ * - `flat`: a single-color version using the surface foreground token,
+ *   themed in both light and dark mode.
+ */
+export declare type ZvooveBrandIconStyle = 'duotone' | 'flat';
+
+export declare interface ZvooveBrandProps {
+    /**
+     * The zvoove product to display. Drives both the logomark and the tagline.
+     * @default 'default'
+     */
+    product?: ZvooveProduct;
+    /**
+     * Visual style of the logomark.
+     * @default 'duotone'
+     */
+    iconStyle?: ZvooveBrandIconStyle;
+    /**
+     * Overall size of the brand lock-up. Sets sensible defaults for the
+     * logomark, wordmark and tagline while keeping the Figma design ratios.
+     * Individual `iconSize`, `nameHeight` and `taglineSize` props can
+     * override the values picked from the size.
+     * @default 'md'
+     */
+    size?: ZvooveBrandSize;
+    /**
+     * Hide the logomark.
+     * @default false
+     */
+    hideIcon?: boolean;
+    /**
+     * Hide the "zvoove" wordmark.
+     * @default false
+     */
+    hideName?: boolean;
+    /**
+     * Hide the product tagline (e.g. "One", "Recruit").
+     * Has no effect when `product="default"` since the default brand has no tagline.
+     * @default false
+     */
+    hideTagline?: boolean;
+    /**
+     * Override the product tagline with a custom string. Falls back to the
+     * tagline derived from `product` when omitted. Useful for sub-products,
+     * environment labels (e.g. "Beta", "Staging") or fully custom branding.
+     * Has no effect when `hideTagline` is `true`.
+     */
+    tagline?: string;
+    /**
+     * Override the logomark size in pixels. Falls back to the value derived
+     * from `size`.
+     */
+    iconSize?: number;
+    /**
+     * Override the "zvoove" wordmark height in pixels. Falls back to the
+     * value derived from `size`.
+     */
+    nameHeight?: number;
+    /**
+     * Override the product tagline font size in pixels. Falls back to the
+     * value derived from `size`.
+     */
+    taglineSize?: number;
+}
+
+/**
+ * Overall size of the brand lock-up. Each tier scales the logomark,
+ * wordmark and tagline together while keeping the design ratios.
+ * `md` matches the Figma baseline (icon 32px, wordmark 13px, tagline 24px).
+ */
+export declare type ZvooveBrandSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+declare interface ZvooveLogoProps {
+    size?: number;
+    color?: string;
+}
+
+/**
+ * The zvoove product whose brand identity to display.
+ * Determines the logomark and the tagline text (e.g. "One", "Recruit").
+ */
+export declare type ZvooveProduct = 'default' | 'one' | 'recruit' | 'invoice-monitor' | 'go' | 'insights' | 'work-expert' | 'elevate' | 'cashlink' | 'docs-ai';
+
+export { }