@zvoove/unity-ui 2.19.1

package/dist/unity-ui.d.ts

@@ -0,0 +1,3705 @@
+import { ChangeEventHandler } from 'react';
+import { default as default_2 } from 'react';
+import { Dispatch } 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;
+}
+
+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, name, image, initialsAmount, variant, }: AvatarProps) => JSX.Element;
+
+declare const AVATAR_SIZES: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+
+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
+     * @default 'large'
+     */
+    size?: ResponsiveType<AvatarSize>;
+    /**
+     * The type of the avatar
+     */
+    type?: 'initials' | 'check' | 'avatar' | 'image';
+    /**
+     * 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';
+}
+
+declare type AvatarSize = (typeof AVATAR_SIZES)[keyof typeof AVATAR_SIZES];
+
+declare type AxisVariant = 'X' | 'Y';
+
+export declare type BackgroundColors = 'background' | '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';
+
+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, }: 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';
+};
+
+declare const BREAKPOINTS: {
+    readonly minimum: 0;
+    readonly mobile: 768;
+    readonly tablet: 1024;
+    readonly laptop: 1280;
+    readonly desktop: 1536;
+};
+
+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: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of the card.
+     */
+    children: ReactNode;
+    /**
+     * @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;
+}
+
+/**
+ * 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 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, ...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.
+     */
+    filename?: string;
+}
+
+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-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 chats: Icon_2;
+    readonly check: 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 columns: Icon_2;
+    readonly copy: 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 filter: Icon_2;
+    readonly filters: Icon_2;
+    readonly 'first-page': Icon_2;
+    readonly folder: Icon_2;
+    readonly 'grid-view': Icon_2;
+    readonly 'hard-hat': 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 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 menu: Icon_2;
+    readonly metadata: 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 '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 '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 save: Icon_2;
+    readonly search: 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 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 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 ConfirmationCard: {
+    ({ title, children, variant, icon, actions, status, statusLabel, }: ConfirmationCardProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ConfirmationCardAction {
+    /**
+     * The label of the action button.
+     */
+    label: string;
+    /**
+     * Callback fired when the action button is clicked.
+     */
+    onClick?: (event: MouseEvent_2<HTMLElement>) => void;
+    /**
+     * The visual variant of the button.
+     * @default 'outlined'
+     */
+    variant?: ConfirmationCardActionVariant;
+    /**
+     * Icon to display in the action button.
+     */
+    icon?: CommonIconNames | Omit<IconProps, 'size' | 'color'>;
+}
+
+export declare type ConfirmationCardActionVariant = 'text' | 'textSecondary' | 'filled' | 'outlined' | 'elevated' | 'tonal' | 'positive' | 'negative';
+
+export declare interface ConfirmationCardProps {
+    /**
+     * The title displayed next to the icon.
+     */
+    title: string;
+    /**
+     * The content of the ConfirmationCard. Accepts any valid ReactNode.
+     */
+    children?: ReactNode;
+    /**
+     * The semantic variant of the ConfirmationCard.
+     * @default 'info'
+     */
+    variant?: ConfirmationCardVariant;
+    /**
+     * Icon to display in the ConfirmationCard. If not provided, uses the default icon for the variant.
+     */
+    icon?: CommonIconNames | Omit<IconProps, 'size' | 'color'>;
+    /**
+     * Action buttons displayed below the card.
+     * Hidden when `status` is set.
+     */
+    actions?: ConfirmationCardAction[];
+    /**
+     * The resolved status of the card. When set, action buttons are replaced
+     * by a readonly Chip indicating the outcome.
+     */
+    status?: ConfirmationCardStatus;
+    /**
+     * Custom label for the status chip. Use this to provide translated labels.
+     * @default 'Confirmed', 'Rejected', or 'Skipped' based on `status`
+     */
+    statusLabel?: string;
+}
+
+export declare type ConfirmationCardStatus = 'confirmed' | 'rejected' | 'skipped';
+
+export declare type ConfirmationCardVariant = 'info' | 'success' | 'warning' | 'error';
+
+export declare const ContentBlock: {
+    ({ children }: ContentBlockProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface ContentBlockProps {
+    /**
+     * The children of the ContentBlock.
+     */
+    children: ReactNode;
+}
+
+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 }: DividerProps) => JSX.Element;
+
+export declare interface DividerProps {
+    /**
+     * The variant to use.
+     */
+    variant?: 'fullWidth' | 'inset' | 'middle';
+}
+
+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;
+
+/**
+ * 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 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-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';
+
+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 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>;
+};
+
+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 the columns.
+     * @default 'none'
+     */
+    gap?: ResponsiveType<SpacingKeys>;
+    /**
+     * Define padding to the grid wrapper.
+     * @default 'none'
+     */
+    padding?: ResponsiveType<Padding>;
+    /**
+     * Define margin to the grid wrapper.
+     * @default 'none'
+     */
+    margin?: ResponsiveType<Margin>;
+}
+
+export declare const Icon: ({ name, size, weight, color, type, featured, ...props }: IconProps) => JSX.Element;
+
+declare const iconMap: {
+    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-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 chats: Icon_2;
+    readonly check: 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 columns: Icon_2;
+    readonly copy: 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 filter: Icon_2;
+    readonly filters: Icon_2;
+    readonly 'first-page': Icon_2;
+    readonly folder: Icon_2;
+    readonly 'grid-view': Icon_2;
+    readonly 'hard-hat': 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 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 menu: Icon_2;
+    readonly metadata: 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 '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 '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 save: Icon_2;
+    readonly search: 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 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 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 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';
+
+export declare type JustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+
+declare type LabelStates = {
+    on: string;
+    off: string;
+};
+
+export declare type Margin = SpacingKeys | {
+    top?: SpacingKeys;
+    right?: SpacingKeys;
+    bottom?: SpacingKeys;
+    left?: SpacingKeys;
+    x?: SpacingKeys;
+    y?: SpacingKeys;
+};
+
+export declare type MenuItem<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 | React.ReactElement;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+
+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, ...props }: PopUpMenuProps) => JSX.Element;
+
+export declare type PopUpMenuItem<T extends React.ElementType = 'button'> = UnionAs_2 & {
+    /**
+     * The id of the item
+     * @required
+     */
+    id: string;
+    /**
+     * The label of the item
+     * @required
+     */
+    label: string;
+    /**
+     * 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;
+    /**
+     * 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'>;
+
+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;
+}
+
+export declare type PopUpMenuSelectionType = string | string[] | undefined;
+
+export declare const ProgressIndicator: ({ value, indeterminate, variant, }: 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';
+}
+
+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';
+
+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 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 React.ElementType = "a">({ menuItems, utilityItems, open, activeItem, onToggleOpen, onItemClick, linkComponent: LinkComponent, }: SideNavigationProps<T>) => JSX.Element;
+
+export declare type SideNavigationProps<T extends React.ElementType = 'a'> = {
+    /**
+     * The variant of the component
+     */
+    open?: boolean;
+    /**
+     * The list of menu items
+     */
+    menuItems: MenuItem<T>[];
+    /**
+     * The list of utility items to stay at the bottom of the menu
+     */
+    utilityItems?: MenuItem<T>[];
+    /**
+     * The active item must match the id of the menu item
+     */
+    activeItem?: string;
+    /**
+     * The component to render for the link
+     */
+    linkComponent?: T | 'a';
+    /**
+     * The callback to handle the open/close state
+     */
+    onToggleOpen?: (open: boolean) => void;
+    /**
+     * The callback to handle the item click
+     */
+    onItemClick?: (item: MenuItem) => void;
+};
+
+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
+     */
+    gap?: ResponsiveType<SpacingKeys>;
+    /**
+     * 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>;
+}
+
+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, }: 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;
+}
+
+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
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * The icon of the tag
+     */
+    icon?: CommonIconNames;
+}
+
+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 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.
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * 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;
+};
+
+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 = ({
+    /**
+     * 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 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 { }