@wavy/react-ui 0.0.1 → 0.0.2

package/dist/main.d.ts

@@ -1,20 +1,29 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { PropsWithChildren, JSX as JSX$1 } from 'react';
-import { AvatarRootProps, FloatProps, CloseButtonProps, Dialog, InputProps, InputAddonProps, InputElementProps, FileUpload, MenuRootProps, SegmentGroupRootProps, SeparatorProps, Steps, Tooltip } from '@chakra-ui/react';
-export { UseStepsProps, useSteps } from '@chakra-ui/react';
-import { IconType } from 'react-icons';
-import { NoUndefinedField, SafeOmit, Prettify, AddPrefix, TaskResult, LocalFile, SanitizeFile, TaskResultStatus, Email, KnownFileTypeAlias, SuccessMessage, AuthProvider, TaskLog, UnsubscribeFunction, ErrorMessage, NonFunction } from '@wavy/types';
+import React__default, { PropsWithChildren, JSX } from 'react';
+import { NoUndefinedField, SafeOmit, LocalFile, Prettify, AddPrefix, TaskResult, SanitizeFile, TaskResultStatus, Email, KnownFileTypeAlias, SuccessMessage, AuthProvider, TaskLog, UnsubscribeFunction, ErrorMessage, NonFunction } from '@wavy/types';
 export { KnownFileTypeAlias } from '@wavy/types';
+import { IconType } from 'react-icons';
 import * as CSS from 'csstype';
 import CSS__default from 'csstype';
-import { JSX } from '@emotion/react/jsx-runtime';
+import { FileUpload, InputProps, InputAddonProps, InputElementProps, AvatarRootProps, FloatProps, CloseButtonProps, Dialog as Dialog$1, MenuRootProps, SegmentGroupRootProps, Steps, Tooltip as Tooltip$1, SeparatorProps as SeparatorProps$1 } from '@chakra-ui/react';
+export { MenuRootProps, UseStepsProps, useSteps } from '@chakra-ui/react';
+import { JSX as JSX$1 } from '@emotion/react/jsx-runtime';
 import { StepsVariant } from 'node_modules/@chakra-ui/react/dist/types/styled-system/generated/recipes.gen';
 
 declare function UiProvider(props: {
     children: React__default.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 
+interface BasicHtmlElementCoreProps<El extends HTMLElement> extends Partial<Pick<HTMLElement, "className" | "id" | "popover">> {
+    ref?: React__default.Ref<El>;
+    onClick?: React__default.MouseEventHandler<El>;
+    onDoubleClick?: React__default.MouseEventHandler<El>;
+    onBlur?: React__default.FocusEventHandler<El>;
+    onFocus?: React__default.FocusEventHandler<El>;
+    popoverTarget?: string;
+}
+
 declare enum ColorResources {
     white = "#FFF",
     black = "#000",
@@ -1136,42 +1145,10 @@ interface BasicHtmlElementStyleProps extends Partial<Record<"spill", "visible" |
 }
 declare const applyBasicStyle: (props: NoUndefinedField<BasicHtmlElementStyleProps>, debug?: boolean) => NoUndefinedField<CSS.Properties>;
 
-interface BasicAvatarProps {
-    size?: AvatarRootProps["size"];
-    fallback?: string | IconType | JSX.Element;
-    disableFallback?: boolean;
-    src?: string | undefined;
-    backgroundColor?: BasicColor$1;
-    color?: BasicColor$1;
-}
-declare function BasicAvatar(props: BasicAvatarProps): react_jsx_runtime.JSX.Element;
-
-interface BasicBadgeProps {
-    children: JSX.Element;
-    badge: React__default.ReactNode;
-    /**
-     * @default "top-end"
-     */
-    placement?: FloatProps["placement"];
-    circleChild?: boolean;
-    asChild?: boolean;
-    offset?: HtmlElementDim;
-}
-declare function BasicBadge(props: BasicBadgeProps): react_jsx_runtime.JSX.Element;
-
 type CssProperties = SafeOmit<CSS.Properties, "backgroundColor" | "color"> & Partial<Record<"backgroundColor" | "color", BasicColor$1>>;
 type CssPseudos = Partial<Record<CSS.Pseudos | `@media${" only " | " "}screen` | `${CSS.Pseudos | "@media"} ${string}`, CssProperties>>;
 type InlineCss = CssPseudos & CssProperties;
 
-interface BasicHtmlElementCoreProps<El extends HTMLElement> extends Partial<Pick<HTMLElement, "className" | "id" | "popover">> {
-    ref?: React__default.Ref<El>;
-    onClick?: React__default.MouseEventHandler<El>;
-    onDoubleClick?: React__default.MouseEventHandler<El>;
-    onBlur?: React__default.FocusEventHandler<El>;
-    onFocus?: React__default.FocusEventHandler<El>;
-    popoverTarget?: string;
-}
-
 interface BasicDivProps extends BasicHtmlElementStyleProps, BasicHtmlElementCoreProps<HTMLDivElement> {
     flexWrap?: boolean | undefined;
     grid?: boolean | undefined;
@@ -1189,6 +1166,76 @@ interface BasicDivProps extends BasicHtmlElementStyleProps, BasicHtmlElementCore
 }
 declare function BasicDiv(props: PropsWithChildren<BasicDivProps>): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode>> | react_jsx_runtime.JSX.Element;
 
+declare const ICON_PRESET_SIZES: readonly ["inherit", "sm", "md", "lg", "xl", "2xl", "xs"];
+declare const BUTTON_PRESET_SIZES: readonly ["sm", "md", "lg", "xl", "2xl", "xs", "2xs"];
+type Addon = JSX.Element | IconType;
+interface BaseProps$2 extends SafeOmit<BasicDivProps, "css" | "row" | "size" | "onScroll" | "clickable" | "enableYFaders" | "overflowPadding" | "updateScrollPosDeps" | "decreaseYFaderPadding" | keyof BasicHtmlElementCoreProps<HTMLDivElement>>, BasicHtmlElementCoreProps<HTMLButtonElement> {
+    async?: boolean;
+    disabled?: boolean;
+    disabledOpacity?: number;
+    spinnerColor?: BasicColor$1;
+    pendingDelay?: number;
+    /**
+     * @default "md"
+     */
+    size?: (typeof BUTTON_PRESET_SIZES)[number] | HtmlElementDim;
+    variant?: "outline" | "standard";
+    borderColor?: BasicColor$1;
+    iconSize?: (typeof ICON_PRESET_SIZES)[number] | HtmlElementDim;
+    onMouseDown?: React__default.MouseEventHandler<HTMLButtonElement>;
+}
+type OptionalProps$2 = {
+    leadingEl?: Addon;
+    children?: never;
+    text?: string;
+    trailingEl?: Addon;
+} | {
+    leadingEl?: never;
+    children?: React__default.ReactNode;
+    text?: never;
+    trailingEl?: never;
+};
+type BasicButtonProps = BaseProps$2 & OptionalProps$2 & {};
+declare function BasicButton(props: BasicButtonProps): react_jsx_runtime.JSX.Element;
+
+interface BasicImgProps extends BasicHtmlElementStyleProps, BasicHtmlElementCoreProps<HTMLImageElement> {
+    src: string;
+    alt?: string;
+    fill?: boolean;
+    cover?: boolean;
+    noFit?: boolean;
+    scaleDown?: boolean;
+    tint?: BasicColor$1;
+    sx?: InlineCss;
+}
+/**
+ *
+ *
+ * @returns A modded version of the <img/> html tag.
+ */
+declare function BasicImg(props: BasicImgProps): react_jsx_runtime.JSX.Element;
+
+interface BasicOlProps<Item extends string> extends ListItemStyleProps {
+    height?: BasicDivProps["height"];
+    width?: BasicDivProps["width"];
+    /**
+     * @default "md"
+     */
+    gap?: BasicDivProps["gap"];
+    bold?: boolean;
+    items: (Item | {
+        label: string;
+        nestedItems: Item[];
+    })[];
+    isItemActive: (item: Item) => boolean;
+    isItemCompleted: (item: Item) => boolean;
+    onItemClick?: (item: Item) => void;
+}
+declare function BasicOl<Item extends string>(props: BasicOlProps<Item>): react_jsx_runtime.JSX.Element;
+interface ListItemStyleProps {
+    fontSize?: BasicDivProps["fontSize"];
+}
+
 type TextAlign = "left" | "right" | "center" | "justify" | "match-parent";
 
 interface BasicSpanProps extends BasicHtmlElementStyleProps, BasicHtmlElementCoreProps<HTMLSpanElement> {
@@ -1209,329 +1256,217 @@ interface BasicSpanProps extends BasicHtmlElementStyleProps, BasicHtmlElementCor
 }
 declare function BasicSpan(props: BasicSpanProps): react_jsx_runtime.JSX.Element;
 
-interface RootProps$2 extends Partial<Record<"width" | `${"max" | "min"}Width`, BasicDivProps["width"]>> {
-    backgroundColor?: BasicColor$1;
-    color?: BasicColor$1;
-    /**
-     * @default "lg"
-     */
+type TableColumnConfig<T extends string = string> = {
+  name: T;
+  weight?: "auto" | `${number}${"rem" | "fr" | "px"}`;
+  backgroundColor?: BasicColor;
+  color?: BasicColor;
+  /**The value that should be used if a cell doesn't have any data. */
+  placeholder?: string;
+};
+
+type RootStyles = {
+    gap?: BasicHtmlElementStyleProps["gap"];
+    rowGap?: BasicHtmlElementStyleProps["gap"];
+    /**@default "onSurface[0.25]" */
+    separatorColor?: BasicColor$1;
+    /**@default "lg" */
+    columnGap?: BasicHtmlElementStyleProps["gap"];
+    textAlign?: "left" | "center" | "right";
+    /**@default "sm" */
+    padding?: BasicHtmlElementStyleProps["padding"];
     corners?: BasicDivProps["corners"];
-    /**
-     * @default "md"
-     */
-    padding?: BasicDivProps["padding"];
-    /**
-     * @default "md"
-     */
-    gap?: BasicDivProps["gap"];
-    height?: BasicDivProps["height"];
-    clickable?: boolean;
-    style?: BasicDivProps["style"];
-    sx?: BasicDivProps["css"];
     spill?: BasicDivProps["spill"];
-    children: JSX.Element | [JSX.Element, JSX.Element] | [JSX.Element, JSX.Element, JSX.Element];
-}
-declare function Root$5(props: RootProps$2): react_jsx_runtime.JSX.Element;
-declare const BasicCard: {
-    Root: typeof Root$5;
-    LeadingAddOn: (props: BasicDivProps & {
-        children: JSX.Element;
-    }) => react_jsx_runtime.JSX.Element;
-    TrailingAddOn: (props: BasicDivProps & {
-        children: JSX.Element | JSX.Element[];
-    }) => react_jsx_runtime.JSX.Element;
-    Content: (props: SafeOmit<BasicDivProps, "asChildren"> & {
-        children: JSX.Element | [JSX.Element, JSX.Element];
-    }) => react_jsx_runtime.JSX.Element;
-    Label: (props: Prettify<{
-        value: string;
-        fontSize?: BasicSpanProps["fontSize"];
-        fontWeight?: BasicSpanProps["fontWeight"];
-        fade?: BasicSpanProps["fade"];
+    fontSize?: BasicDivProps["fontSize"];
+    fontWeight?: BasicDivProps["fontWeight"];
+    defaultSelectedRows?: number[];
+    selectedRows?: number[];
+    onSelectedRowsChange?: (selectedRows: number[]) => void;
+    slotProps?: Partial<{
+        selectColumn?: Partial<{
+            separatorColor: BasicColor$1;
+            disableSeparator: boolean;
+        }>;
+    }>;
+};
+declare function Root$7<T extends string>(props: BasicTableProps.RootProps<T>): react_jsx_runtime.JSX.Element;
+declare function Header(props: BasicTableProps.HeaderProps): react_jsx_runtime.JSX.Element;
+declare function Body(props: BasicTableProps.BodyProps): react_jsx_runtime.JSX.Element;
+declare const BasicTable: {
+    Root: typeof Root$7;
+    Header: typeof Header;
+    Body: typeof Body;
+};
+declare namespace BasicTableProps {
+    interface RootProps<T extends string> extends RootStyles, Partial<Record<"width" | "height" | `${"min" | "max"}${"Height" | "Width"}`, BasicHtmlElementStyleProps["width"]>> {
+        selectable?: boolean;
+        columns: (T | TableColumnConfig<T>)[];
+        backgroundColor?: BasicColor$1;
         color?: BasicColor$1;
-        truncateStyle?: "ellipsis" | {
-            lineCount: number;
-        } | "none";
-    }>) => react_jsx_runtime.JSX.Element;
-    Item: (props: Prettify<{
-        value: string;
-        fontSize?: BasicSpanProps["fontSize"];
-        fontWeight?: BasicSpanProps["fontWeight"];
-        fade?: BasicSpanProps["fade"];
+        entries: {
+            [Key in T]?: React__default.ReactElement | string;
+        }[];
+        /**Applies a columnWeight to columns where: <"column">.weight === undefined
+         * @default "1fr"
+         */
+        columnWeight?: TableColumnConfig["weight"];
+        children: [JSX.Element, JSX.Element];
+    }
+    interface HeaderProps {
+        /**@default "left" */
+        textAlign?: "left" | "center" | "right";
+        /**@default "onSurface[0.1]" */
+        separatorColor?: BasicColor$1 | 0 | "none";
+        /**@default "camelToLetter" */
+        formatColumnName?: "camelToLetter" | ((name: string) => string);
         color?: BasicColor$1;
-        truncateStyle?: "ellipsis" | {
-            lineCount: number;
-        } | "none";
-    }>) => react_jsx_runtime.JSX.Element;
-};
+        backgroundColor?: BasicColor$1;
+        borderColor?: BasicDivProps["borderColor"];
+        fontSize?: BasicDivProps["fontSize"];
+        fontWeight?: BasicDivProps["fontWeight"];
+        padding?: BasicDivProps["padding"];
+        corners?: BasicDivProps["corners"];
+    }
+    interface BodyProps {
+        /**@default [RootProps.rowGap, "top"] */
+        padding?: BasicDivProps["padding"];
+        color?: BasicColor$1;
+        fontSize?: BasicDivProps["fontSize"];
+    }
+}
 
-interface BasicMediaCardProps {
-    className?: string;
-    title: string;
-    height?: BasicDivProps["height"];
-    /**
-     * @default "14rem"
+type VerticalPlacement = "top" | "center" | "bottom";
+type HorizontalPlacement = "left" | "center" | "right";
+type FloaterWidth = BasicDivProps["width"] | "match-anchor";
+interface PopoverProps extends Partial<Record<`${"min" | "max"}Width`, FloaterWidth> & Record<`${"min" | "max"}Height` | "height", BasicDivProps["height"]>> {
+    asChild?: boolean;
+    children: JSX.Element;
+    /** @description Wraps the child with a div. This is useful if the child can't hold a ref.
+     * @remarks You can access the div's props in `slotProps.divWrapper`.
+     * @default false
      */
-    width?: BasicDivProps["width"];
-    /**
-     * @default "7rem"
+    wrap?: boolean;
+    defaultOpen?: boolean;
+    /**The delay between opening and closing the popover in milliseconds
+     * @default 200 */
+    delay?: number | Record<"open" | "close", number>;
+    /**@default "click" */
+    displayAction?: "click" | "hover";
+    visibleOnScroll?: boolean;
+    rerenderOnClose?: boolean;
+    /**@description This stops the popover from closing while attempting to interact with it
+     * (e.g: hovering over or clicking the popover).
+     * @default false
      */
-    mediaHeight?: BasicDivProps["height"];
-    /**
-     * @default true
+    allowInteractions?: boolean;
+    /**@description The point used to calculate the placement of the popover.
+     * @notes
+     * - If the placement is set
+     * to <"top" | "right" | "bottom" | "left"> the anchorPoint is useless.
+     * - While positioning, think along the lines of: "I'm placing the <"anchor-point"> of the popover
+     * at the <"placement"> of the target (the child element)".
+     * @default "top-left"
      */
-    coverImg?: boolean;
-    /**
-     * @default "full"
-     */
-    imgSize?: BasicDivProps["size"];
-    description?: string;
-    children?: JSX$1.Element;
-    src?: string;
-    /**
-     * @default "md"
-     */
-    titleFontSize?: BasicSpanProps["fontSize"];
-    /**
-     * @default "xs"
+    anchorPoint?: `${Exclude<VerticalPlacement, "center">}-${Exclude<HorizontalPlacement, "center">}`;
+    /**The placement of the popover's anchor point relative to the target (the child element)
+     * @default "bottom-left"
      */
-    descriptionFontSize?: BasicSpanProps["fontSize"];
-    /**
-     * @default "md"
+    placement?: VerticalPlacement | HorizontalPlacement | Exclude<`${VerticalPlacement}-${HorizontalPlacement}`, "center-center">;
+    insetArea?: VerticalPlacement | HorizontalPlacement;
+    positionFallbacks?: string;
+    /**The popover content */
+    content: React__default.ReactNode;
+    /**The distance between the popover and the target (child element).
+     * @note Using a `number` is the same as `<"number">px`
+     * @default ".25rem"
      */
-    imgCorners?: BasicDivProps["corners"];
-    fallback?: IconType | JSX$1.Element | string;
-    fade?: BasicDivProps["fade"];
-    style?: BasicDivProps["style"];
-}
-declare function BasicMediaCard(props: BasicMediaCardProps): react_jsx_runtime.JSX.Element;
-declare namespace BasicMediaCard {
-    var Content: (props: SafeOmit<BasicDivProps, "decreaseYFaderPadding" | "updateScrollPosDeps" | "rememberScrollPos"> & {
-        children: React__default.ReactNode;
-    }) => react_jsx_runtime.JSX.Element;
-}
-
-interface BasicProfileCardProps extends Partial<AddPrefix<{
-    fontSize: BasicSpanProps["fontSize"];
-    fade: BasicDivProps["fade"];
-    fontWeight: BasicSpanProps["fontWeight"];
-}, "title" | "description">>, Partial<AddPrefix<{
-    size: BasicAvatarProps["size"];
-    src: BasicAvatarProps["src"];
-    fallback: BasicAvatarProps["fallback"];
-    backgroundColor?: BasicColor$1;
+    offset?: `${number}${"rem" | "px" | "em"}` | number;
+    backdropBlur?: string;
+    /**@default "onSurface" */
     color?: BasicColor$1;
-}, "avatar">> {
-    className?: string;
-    title: string;
-    description: string;
-    children?: JSX$1.Element;
+    /**@default "onSurface[0.1]" */
+    borderColor?: BasicColor$1;
+    /**@default "surfaceContainer" */
     backgroundColor?: BasicColor$1;
-    color?: BasicColor$1;
-    width?: BasicDivProps["width"];
-    height?: BasicDivProps["height"];
+    /**@default "max-content" */
+    width?: FloaterWidth;
+    /**@default "md" */
     padding?: BasicDivProps["padding"];
+    gap?: BasicDivProps["gap"];
+    /**@default "md" */
     corners?: BasicDivProps["corners"];
-    disableBoxShadow?: boolean;
-    style?: BasicDivProps["style"];
-}
-declare function BasicProfileCard(props: BasicProfileCardProps): react_jsx_runtime.JSX.Element;
-declare namespace BasicProfileCard {
-    var Content: typeof BasicDiv;
+    /**@default "auto" */
+    spill?: BasicDivProps["spill"];
+    fontSize?: BasicDivProps["fontSize"];
+    fontWeight?: BasicDivProps["fontWeight"];
+    onOpenChange?: (open: boolean) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    slotProps?: Partial<{
+        divWrapper?: React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    }>;
 }
+declare function Popover(props: PopoverProps): react_jsx_runtime.JSX.Element;
 
-interface CheckboxProps {
-    checked?: boolean;
-    size?: BasicDivProps["size"];
-    /**@default "sm" */
+interface BasicSelectProps<T> extends SafeOmit<PopoverProps, "displayAction" | "content" | "placement" | "allowInteractions"> {
+    isSelected?: (option: BasicSelectProps<T>["options"][number]) => boolean;
+    options: {
+        value: T;
+        disabled?: boolean;
+        onClick?: () => void;
+    }[];
+    /**@default "md" */
     corners?: BasicDivProps["corners"];
-    /**@default "sm" */
+    /**@default "md" */
     padding?: BasicDivProps["padding"];
-    /**The background color of the checkbox when it is checked
-     * @default "primaryContainer" */
-    accentColor?: BasicColor$1;
-    /**@default "onSurface[0.1]" */
-    borderColor?: BasicColor$1;
-    /**@default "onPrimaryContainer" */
-    iconColor?: BasicColor$1;
-    disableShadow?: boolean;
-    iconSize?: `${number}${"rem" | "em" | "px"}`;
-    onChange?: (checked: boolean) => void;
-    onClick?: () => void;
-}
-declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
-
-interface BasicConfirmationDialogProps extends Partial<Record<"width" | "height" | `${"min" | "max"}${"Width" | "Height"}`, BasicDivProps["width"]>> {
-    title: string;
-    message: string;
-    hideDisclaimerLabel?: boolean;
-    disclaimer?: string;
-    controller?: UseDialogControllerReturn;
-    triggerElement?: JSX.Element;
-    /**
-     * @default "error"
-     */
-    severity?: "error" | "info" | "warning";
-    /**
-     * @default "Cancel"
-     */
-    cancelLabel?: "Dismiss" | "Cancel" | (string & {});
-    onCancelClick?: () => void;
-    action: {
-        label: string;
-        onClick: () => void | Promise<TaskResult> | TaskResult;
-    };
-}
-declare function BasicConfirmationDialog(props: BasicConfirmationDialogProps): react_jsx_runtime.JSX.Element;
-
-declare function useDialogController<Value>(defaultValue?: Value): {
-    value: Value;
-    isOpen: boolean;
-    show: (...args: Value extends boolean ? [] : [value: Value]) => void;
-    hide: () => void;
-};
-type UseDialogControllerReturn<T = {}> = ReturnType<typeof useDialogController<T>>;
-
-interface RootProps$1<T = {}> extends SafeOmit<BasicDivProps, "clickable" | "ref" | "onClick" | "onBlur" | "onFocus" | "onScroll" | "decreaseYFaderPadding" | "enableYFaders" | "rememberScrollPos" | "updateScrollPosDeps"> {
-    /**
-     * @default center
-     */
-    placement?: "center" | "top" | "bottom";
-    children: JSX.Element | JSX.Element[];
-    triggerElement?: JSX.Element;
-    hideCloseButton?: boolean;
     /**@default "sm" */
-    closeButtonSize?: CloseButtonProps["size"];
-    /**
-     * @default false
-     */
-    unmountOnExit?: boolean;
-    /**
-     * @default "slide-in-bottom"
-     */
-    enterAnimation?: Dialog.RootProps["motionPreset"];
-    /**
-     * @default "outside"
-     */
-    scrollBehavior?: Dialog.RootProps["scrollBehavior"];
-    controller?: UseDialogControllerReturn<T>;
-    /**
-     * Whether to close the dialog when the escape key is pressed
-     * @default true
-     */
-    closeOnEscape?: boolean;
-    /**
-     * Whether to close the dialog when the outside is clicked
-     * @default true
-     */
-    closeOnInteractOutside?: boolean;
-    rerenderOnClose?: boolean;
-    onOpenChange?: (isOpen: boolean) => void;
-    onClose?: () => void;
-}
-declare function Root$4<T>(props: RootProps$1<T>): react_jsx_runtime.JSX.Element;
-interface ElementProps extends SafeOmit<BasicDivProps, "ref" | "onClick" | "onBlur" | "onFocus" | "onScroll" | "clickable"> {
-    children: React__default.ReactNode;
-}
-declare const BasicDialog: {
-    Root: typeof Root$4;
-    Header: (props: ElementProps) => react_jsx_runtime.JSX.Element;
-    Body: (props: ElementProps) => react_jsx_runtime.JSX.Element;
-    Footer: (props: ElementProps) => react_jsx_runtime.JSX.Element;
-    CloseTrigger: (props: {
-        children: JSX.Element;
-        wrap?: boolean;
-        slotProps?: Partial<{
-            divWrapper: React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-        }>;
-    }) => react_jsx_runtime.JSX.Element;
-    ActionTrigger: (props: {
-        children: JSX.Element;
-    }) => react_jsx_runtime.JSX.Element;
-};
-interface BasicDialogProps {
-    Root: RootProps$1;
+    gap?: BasicDivProps["gap"];
+    onOptionClick?: (option: BasicSelectProps<T>["options"][number], index: number, options: BasicSelectProps<T>["options"]) => void;
 }
+declare function BasicSelect<T extends string | number>(props: BasicSelectProps<T>): react_jsx_runtime.JSX.Element;
 
-interface BasicOlProps<Item extends string> extends ListItemStyleProps {
-    height?: BasicDivProps["height"];
+interface BasicOptionProps {
+    value: string | number;
+    selected?: boolean;
+    /**@default "full" */
     width?: BasicDivProps["width"];
-    /**
-     * @default "md"
-     */
-    gap?: BasicDivProps["gap"];
-    bold?: boolean;
-    items: (Item | {
-        label: string;
-        nestedItems: Item[];
-    })[];
-    isItemActive: (item: Item) => boolean;
-    isItemCompleted: (item: Item) => boolean;
-    onItemClick?: (item: Item) => void;
-}
-declare function BasicOl<Item extends string>(props: BasicOlProps<Item>): react_jsx_runtime.JSX.Element;
-interface ListItemStyleProps {
-    fontSize?: BasicDivProps["fontSize"];
+    /**@default "sm" */
+    padding?: BasicDivProps["padding"];
+    /**@default "md" */
+    corners?: BasicDivProps["corners"];
+    /**@default "sm" */
+    fontSize?: BasicSpanProps["fontSize"];
+    color?: BasicColor$1;
+    disabled?: boolean;
+    backgroundColor?: BasicColor$1;
+    sx?: InlineCss;
+    scrollIntoView?: boolean;
+    onClick?: () => void;
 }
+declare function BasicOption(props: BasicOptionProps): react_jsx_runtime.JSX.Element;
 
-interface BasicFormDialogProps<Section extends string> {
-    triggerElement?: JSX.Element;
-    controller?: UseDialogControllerReturn;
-    title?: React.ReactNode;
-    defaultSection?: Section;
-    sections: BasicOlProps<Section>["items"];
-    sectionMapper: Record<Section, {
-        title: string;
-        description: string;
-        element: JSX.Element | (() => JSX.Element) | ((props: {
-            incompleteSections: Section[];
-        }) => JSX.Element);
+interface FileUploadRootProps {
+    maxFiles?: number;
+    multiple?: boolean;
+    showList?: boolean;
+    maxWidth?: FileUpload.RootProps["maxW"];
+    height?: FileUpload.RootProps["height"];
+    width?: FileUpload.RootProps["width"];
+    accepts: LocalFile["typeAlias"][];
+    children: JSX$1.Element;
+    slotProps?: Partial<{
+        fileList: FileUpload.ListProps;
     }>;
-    checkCompletionOnMount?: boolean;
-    /**
-     * @default false
-     */
-    unmountOnExit?: boolean;
-    rerenderOnClose?: boolean;
-    isSectionComplete: (section: Section) => boolean;
-    onSectionsStatusChange?: (incompleteSections: Section[], completedSections: Section[]) => void;
-    ignoredSections?: Section[];
-    hideSubmitButton?: boolean;
-    onSubmit?: () => Promise<void>;
+    onChange?: (files: FileList) => void;
 }
-declare function BasicFormDialog<Sections extends string>(props: BasicFormDialogProps<Sections>): react_jsx_runtime.JSX.Element;
 
-declare const ICON_PRESET_SIZES: readonly ["inherit", "sm", "md", "lg", "xl", "2xl", "xs"];
-declare const BUTTON_PRESET_SIZES: readonly ["sm", "md", "lg", "xl", "2xl", "xs", "2xs"];
-type Addon = JSX$1.Element | IconType;
-interface BaseProps$2 extends SafeOmit<BasicDivProps, "css" | "row" | "size" | "onScroll" | "clickable" | "enableYFaders" | "overflowPadding" | "updateScrollPosDeps" | "decreaseYFaderPadding" | keyof BasicHtmlElementCoreProps<HTMLDivElement>>, BasicHtmlElementCoreProps<HTMLButtonElement> {
-    async?: boolean;
-    disabled?: boolean;
-    disabledOpacity?: number;
-    spinnerColor?: BasicColor$1;
-    pendingDelay?: number;
-    /**
-     * @default "md"
-     */
-    size?: (typeof BUTTON_PRESET_SIZES)[number] | HtmlElementDim;
-    variant?: "outline" | "standard";
+interface FileDropzoneProps extends SafeOmit<FileUploadRootProps, "children"> {
+    backgroundColor?: BasicColor$1;
     borderColor?: BasicColor$1;
-    iconSize?: (typeof ICON_PRESET_SIZES)[number] | HtmlElementDim;
-    onMouseDown?: React__default.MouseEventHandler<HTMLButtonElement>;
+    color?: BasicColor$1;
+    content?: JSX$1.Element;
 }
-type OptionalProps$2 = {
-    leadingEl?: Addon;
-    children?: never;
-    text?: string;
-    trailingEl?: Addon;
-} | {
-    leadingEl?: never;
-    children?: React__default.ReactNode;
-    text?: never;
-    trailingEl?: never;
-};
-type BasicButtonProps = BaseProps$2 & OptionalProps$2 & {};
-declare function BasicButton(props: BasicButtonProps): react_jsx_runtime.JSX.Element;
+declare function FileDropzone(props: FileDropzoneProps): react_jsx_runtime.JSX.Element;
 
 type AllowedCharacters =
   | "number"
@@ -1617,7 +1552,7 @@ declare function TextField(props: TextFieldProps): react_jsx_runtime.JSX.Element
 interface ClipboardHelperWrapperProps {
     useCopy?: boolean;
     usePaste?: boolean;
-    children: JSX.Element;
+    children: JSX$1.Element;
     elementRef: React.RefObject<HTMLInputElement | null>;
     slotProps?: Partial<{
         pasteButton: Partial<{
@@ -1630,176 +1565,6 @@ interface ClipboardHelperWrapperProps {
     onPaste?: (text: string) => void;
 }
 
-interface SimpleFormDialogProps<T extends string> {
-    controller?: UseDialogControllerReturn;
-    title?: string;
-    triggerElement?: JSX.Element;
-    /**@default "md" */
-    closeButtonSize?: BasicDialogProps["Root"]["closeButtonSize"];
-    /**@default "2rem"*/
-    titleFontSize?: BasicDivProps["fontSize"];
-    /**@default "md" */
-    textfieldSize?: TextFieldProps["size"];
-    /**@default "lg" */
-    actionButtionSize?: BasicButtonProps["size"];
-    width?: BasicDivProps["width"];
-    /**A shortcut for defining the default value for fields where: `<"field">.defaultValue === undefined`.*/
-    defaultValue?: Partial<Record<T, string>>;
-    fields: Record<T, {
-        /**
-         * @default "prop-name" */
-        label?: (string & {}) | "prop-name" | ((propName: string) => string);
-        placeholder: string;
-        disabled?: boolean;
-        defaultValue?: string;
-        allowedChars?: RegExp;
-        options?: string[];
-    }>;
-    /**A shortcut to format the property name for all fields where: `typeof <"field">.label !== "function" && [undefined, "prop-name"].includes(<"field">.label)`
-     * - Useful for field's that use `prop-name` as the label.
-     */
-    formatFieldPropName?: (propName: string) => string;
-    /**A shortcut to set the allowed characters for all fields where: `<"field">.allowedChars === undefined`
-     */
-    allowedChars?: RegExp;
-    onSave?: (form: Record<T, string>) => void;
-    onCancel?: () => void;
-}
-declare function SimpleFormDialog<T extends string>(props: SimpleFormDialogProps<T>): react_jsx_runtime.JSX.Element;
-
-interface BasicDisclaimerProps extends Partial<Record<"top" | "left" | "bottom" | "right", HtmlElementDim | 0>> {
-    severity: "warning" | "error" | "info";
-    message: string;
-    pos?: BasicDivProps["pos"];
-    /**
-     * @default false
-     */
-    disableShadow?: boolean;
-    facade?: (severity: BasicDisclaimerProps["severity"]) => BasicDisclaimerProps["severity"];
-    width?: BasicDivProps["width"];
-    /**
-     * @default "1rem"
-     */
-    iconSize?: HtmlElementDim;
-    /**
-     * @default "md"
-     */
-    gap?: BasicSpanProps["gap"];
-    /**
-     * @default "md"
-     */
-    padding?: BasicDivProps["padding"];
-    /**
-     * @default "md"
-     */
-    corners?: BasicDivProps["corners"];
-    /**
-     * @default "sm"
-     */
-    fontSize?: BasicSpanProps["fontSize"];
-    /**
-     * @default false
-     */
-    hideLabel?: boolean;
-}
-declare function BasicDisclaimer(props: BasicDisclaimerProps): react_jsx_runtime.JSX.Element;
-
-interface BasicFileUploadRootProps {
-    maxFiles?: number;
-    multiple?: boolean;
-    showList?: boolean;
-    maxWidth?: FileUpload.RootProps["maxW"];
-    height?: FileUpload.RootProps["height"];
-    width?: FileUpload.RootProps["width"];
-    accepts: LocalFile["typeAlias"][];
-    children: JSX.Element;
-    slotProps?: Partial<{
-        fileList: FileUpload.ListProps;
-    }>;
-    onChange?: (files: FileList) => void;
-}
-
-interface BasicDropzoneProps extends SafeOmit<BasicFileUploadRootProps, "children"> {
-    backgroundColor?: BasicColor$1;
-    borderColor?: BasicColor$1;
-    color?: BasicColor$1;
-    content?: JSX.Element;
-}
-declare function BasicDropzone(props: BasicDropzoneProps): react_jsx_runtime.JSX.Element;
-
-type VerticalPlacement = "top" | "center" | "bottom";
-type HorizontalPlacement = "left" | "center" | "right";
-type FloaterWidth = BasicDivProps["width"] | "match-anchor";
-interface BasicPopoverProps extends Partial<Record<`${"min" | "max"}Width`, FloaterWidth> & Record<`${"min" | "max"}Height` | "height", BasicDivProps["height"]>> {
-    asChild?: boolean;
-    children: JSX$1.Element;
-    /** @description Wraps the child with a div. This is useful if the child can't hold a ref.
-     * @remarks You can access the div's props in `slotProps.divWrapper`.
-     * @default false
-     */
-    wrap?: boolean;
-    defaultOpen?: boolean;
-    /**The delay between opening and closing the popover in milliseconds
-     * @default 200 */
-    delay?: number | Record<"open" | "close", number>;
-    /**@default "click" */
-    displayAction?: "click" | "hover";
-    visibleOnScroll?: boolean;
-    rerenderOnClose?: boolean;
-    /**@description This stops the popover from closing while attempting to interact with it
-     * (e.g: hovering over or clicking the popover).
-     * @default false
-     */
-    allowInteractions?: boolean;
-    /**@description The point used to calculate the placement of the popover.
-     * @notes
-     * - If the placement is set
-     * to <"top" | "right" | "bottom" | "left"> the anchorPoint is useless.
-     * - While positioning, think along the lines of: "I'm placing the <"anchor-point"> of the popover
-     * at the <"placement"> of the target (the child element)".
-     * @default "top-left"
-     */
-    anchorPoint?: `${Exclude<VerticalPlacement, "center">}-${Exclude<HorizontalPlacement, "center">}`;
-    /**The placement of the popover's anchor point relative to the target (the child element)
-     * @default "bottom-left"
-     */
-    placement?: VerticalPlacement | HorizontalPlacement | Exclude<`${VerticalPlacement}-${HorizontalPlacement}`, "center-center">;
-    insetArea?: VerticalPlacement | HorizontalPlacement;
-    positionFallbacks?: string;
-    /**The popover content */
-    content: React__default.ReactNode;
-    /**The distance between the popover and the target (child element).
-     * @note Using a `number` is the same as `<"number">px`
-     * @default ".25rem"
-     */
-    offset?: `${number}${"rem" | "px" | "em"}` | number;
-    backdropBlur?: string;
-    /**@default "onSurface" */
-    color?: BasicColor$1;
-    /**@default "onSurface[0.1]" */
-    borderColor?: BasicColor$1;
-    /**@default "surfaceContainer" */
-    backgroundColor?: BasicColor$1;
-    /**@default "max-content" */
-    width?: FloaterWidth;
-    /**@default "md" */
-    padding?: BasicDivProps["padding"];
-    gap?: BasicDivProps["gap"];
-    /**@default "md" */
-    corners?: BasicDivProps["corners"];
-    /**@default "auto" */
-    spill?: BasicDivProps["spill"];
-    fontSize?: BasicDivProps["fontSize"];
-    fontWeight?: BasicDivProps["fontWeight"];
-    onOpenChange?: (open: boolean) => void;
-    onOpen?: () => void;
-    onClose?: () => void;
-    slotProps?: Partial<{
-        divWrapper?: React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-    }>;
-}
-declare function BasicPopover(props: BasicPopoverProps): react_jsx_runtime.JSX.Element;
-
 interface EditableProps extends Partial<Pick<TextFieldProps, "focusColor">> {
     value?: string;
     disabled?: boolean;
@@ -1816,7 +1581,7 @@ interface EditableProps extends Partial<Pick<TextFieldProps, "focusColor">> {
     /** Prevents editing */
     preventDefault?: boolean;
     /**Replaces the predefined controls */
-    control?: JSX.Element;
+    control?: JSX$1.Element;
     placeholder?: string;
     /**The padding for the content in its resting (non-editing) state
      * @default ["md", ["top", "bottom"]] */
@@ -1843,11 +1608,11 @@ interface EditableProps extends Partial<Pick<TextFieldProps, "focusColor">> {
     /** Invoked when either onEditClick or onContentClick is fired. */
     onEdit?: () => void;
     slotProps?: {
-        popover?: Prettify<Partial<SafeOmit<BasicPopoverProps, "children"> & {
+        popover?: Prettify<Partial<SafeOmit<PopoverProps, "children"> & {
             /**@default "match-anchor" */
-            maxWidth: BasicPopoverProps["maxWidth"];
+            maxWidth: PopoverProps["maxWidth"];
             /**@default "5rem"*/
-            maxHeight: BasicPopoverProps["maxHeight"];
+            maxHeight: PopoverProps["maxHeight"];
         }>>;
     };
 }
@@ -1860,9 +1625,9 @@ declare function Control(props: {
     onClick: () => void;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Root$3(props: EmptyStateProps.RootProps): react_jsx_runtime.JSX.Element;
-declare function Indicator$1(props: EmptyStateProps.IndicatorProps): react_jsx_runtime.JSX.Element;
-declare function Content(props: EmptyStateProps.ContentProps): react_jsx_runtime.JSX.Element;
+declare function Root$6(props: EmptyStateProps.RootProps): react_jsx_runtime.JSX.Element;
+declare function Indicator$2(props: EmptyStateProps.IndicatorProps): react_jsx_runtime.JSX.Element;
+declare function Content$1(props: EmptyStateProps.ContentProps): react_jsx_runtime.JSX.Element;
 declare namespace EmptyStateProps {
     interface RootProps extends BasicDivProps {
         /**@default "lg" */
@@ -1872,12 +1637,12 @@ declare namespace EmptyStateProps {
         /**@default true */
         centerContent?: BasicDivProps["centerContent"];
         itemFade?: BasicDivProps["fade"];
-        children: JSX.Element | JSX.Element[];
+        children: JSX$1.Element | JSX$1.Element[];
     }
     interface IndicatorProps {
         /**@default "4rem" */
         size?: HtmlElementDim;
-        element: JSX.Element;
+        element: JSX$1.Element;
         disableFade?: boolean;
     }
     interface ContentProps {
@@ -1890,25 +1655,365 @@ declare namespace EmptyStateProps {
         gap?: BasicDivProps["gap"];
     }
 }
-declare const EmptyState: {
-    Root: typeof Root$3;
-    Indicator: typeof Indicator$1;
-    Content: typeof Content;
-};
+declare const EmptyState: {
+    Root: typeof Root$6;
+    Indicator: typeof Indicator$2;
+    Content: typeof Content$1;
+};
+
+interface AvatarProps {
+    size?: AvatarRootProps["size"];
+    fallback?: string | IconType | JSX$1.Element;
+    disableFallback?: boolean;
+    src?: string | undefined;
+    backgroundColor?: BasicColor$1;
+    color?: BasicColor$1;
+}
+declare function Avatar(props: AvatarProps): react_jsx_runtime.JSX.Element;
+
+interface BadgeProps {
+    children: JSX$1.Element;
+    badge: React__default.ReactNode;
+    /**
+     * @default "top-end"
+     */
+    placement?: FloatProps["placement"];
+    circleChild?: boolean;
+    asChild?: boolean;
+    offset?: HtmlElementDim;
+}
+declare function Badge(props: BadgeProps): react_jsx_runtime.JSX.Element;
+
+declare function Root$5(props: CardProps.RootProps): react_jsx_runtime.JSX.Element;
+declare const Card: {
+    Root: typeof Root$5;
+    LeadingAddOn: (props: BasicDivProps & {
+        children: JSX$1.Element;
+    }) => react_jsx_runtime.JSX.Element;
+    TrailingAddOn: (props: BasicDivProps & {
+        children: JSX$1.Element | JSX$1.Element[];
+    }) => react_jsx_runtime.JSX.Element;
+    Content: (props: SafeOmit<BasicDivProps, "asChildren"> & {
+        children: JSX$1.Element | [JSX$1.Element, JSX$1.Element];
+    }) => react_jsx_runtime.JSX.Element;
+    Label: (props: Prettify<{
+        value: string;
+        fontSize?: BasicSpanProps["fontSize"];
+        fontWeight?: BasicSpanProps["fontWeight"];
+        fade?: BasicSpanProps["fade"];
+        color?: BasicColor$1;
+        truncateStyle?: "ellipsis" | {
+            lineCount: number;
+        } | "none";
+    }>) => react_jsx_runtime.JSX.Element;
+    Item: (props: Prettify<{
+        value: string;
+        fontSize?: BasicSpanProps["fontSize"];
+        fontWeight?: BasicSpanProps["fontWeight"];
+        fade?: BasicSpanProps["fade"];
+        color?: BasicColor$1;
+        truncateStyle?: "ellipsis" | {
+            lineCount: number;
+        } | "none";
+    }>) => react_jsx_runtime.JSX.Element;
+};
+declare namespace CardProps {
+    interface RootProps extends Partial<Record<"width" | `${"max" | "min"}Width`, BasicDivProps["width"]>> {
+        backgroundColor?: BasicColor$1;
+        color?: BasicColor$1;
+        /**
+         * @default "lg"
+         */
+        corners?: BasicDivProps["corners"];
+        /**
+         * @default "md"
+         */
+        padding?: BasicDivProps["padding"];
+        /**
+         * @default "md"
+         */
+        gap?: BasicDivProps["gap"];
+        height?: BasicDivProps["height"];
+        clickable?: boolean;
+        style?: BasicDivProps["style"];
+        sx?: BasicDivProps["css"];
+        spill?: BasicDivProps["spill"];
+        children: JSX$1.Element | [JSX$1.Element, JSX$1.Element] | [JSX$1.Element, JSX$1.Element, JSX$1.Element];
+    }
+}
+
+declare function Root$4(props: MediaCardProps.RootProps): react_jsx_runtime.JSX.Element;
+declare function Content(props: MediaCardProps.ContentProps): react_jsx_runtime.JSX.Element;
+declare const MediaCard: {
+    Root: typeof Root$4;
+    Content: typeof Content;
+};
+declare namespace MediaCardProps {
+    interface RootProps {
+        className?: string;
+        title: string;
+        height?: BasicDivProps["height"];
+        /**
+         * @default "14rem"
+         */
+        width?: BasicDivProps["width"];
+        /**
+         * @default "7rem"
+         */
+        mediaHeight?: BasicDivProps["height"];
+        /**
+         * @default true
+         */
+        coverImg?: boolean;
+        /**
+         * @default "full"
+         */
+        imgSize?: BasicDivProps["size"];
+        description?: string;
+        children?: JSX.Element;
+        src?: string;
+        /**
+         * @default "md"
+         */
+        titleFontSize?: BasicSpanProps["fontSize"];
+        /**
+         * @default "xs"
+         */
+        descriptionFontSize?: BasicSpanProps["fontSize"];
+        /**
+         * @default "md"
+         */
+        imgCorners?: BasicDivProps["corners"];
+        fallback?: IconType | JSX.Element | string;
+        fade?: BasicDivProps["fade"];
+        style?: BasicDivProps["style"];
+    }
+    type ContentProps = SafeOmit<BasicDivProps, "decreaseYFaderPadding" | "updateScrollPosDeps" | "rememberScrollPos"> & {
+        children: React__default.ReactNode;
+    };
+}
+
+declare function Root$3(props: ProfileCardProps.RootProps): react_jsx_runtime.JSX.Element;
+declare const ProfileCard: {
+    Root: typeof Root$3;
+    Content: typeof BasicDiv;
+};
+declare namespace ProfileCardProps {
+    interface RootProps extends Partial<AddPrefix<{
+        fontSize: BasicSpanProps["fontSize"];
+        fade: BasicDivProps["fade"];
+        fontWeight: BasicSpanProps["fontWeight"];
+    }, "title" | "description">>, Partial<AddPrefix<{
+        size: AvatarProps["size"];
+        src: AvatarProps["src"];
+        fallback: AvatarProps["fallback"];
+        backgroundColor?: BasicColor$1;
+        color?: BasicColor$1;
+    }, "avatar">> {
+        className?: string;
+        title: string;
+        description: string;
+        children?: JSX.Element;
+        backgroundColor?: BasicColor$1;
+        color?: BasicColor$1;
+        width?: BasicDivProps["width"];
+        height?: BasicDivProps["height"];
+        padding?: BasicDivProps["padding"];
+        corners?: BasicDivProps["corners"];
+        disableBoxShadow?: boolean;
+        style?: BasicDivProps["style"];
+    }
+}
+
+interface CheckboxProps {
+    checked?: boolean;
+    size?: BasicDivProps["size"];
+    /**@default "sm" */
+    corners?: BasicDivProps["corners"];
+    /**@default "sm" */
+    padding?: BasicDivProps["padding"];
+    /**The background color of the checkbox when it is checked
+     * @default "primaryContainer" */
+    accentColor?: BasicColor$1;
+    /**@default "onSurface[0.1]" */
+    borderColor?: BasicColor$1;
+    /**@default "onPrimaryContainer" */
+    iconColor?: BasicColor$1;
+    disableShadow?: boolean;
+    iconSize?: `${number}${"rem" | "em" | "px"}`;
+    onChange?: (checked: boolean) => void;
+    onClick?: () => void;
+}
+declare function Checkbox(props: CheckboxProps): react_jsx_runtime.JSX.Element;
+
+interface ConfirmationDialogProps extends Partial<Record<"width" | "height" | `${"min" | "max"}${"Width" | "Height"}`, BasicDivProps["width"]>> {
+    title: string;
+    message: string;
+    hideDisclaimerLabel?: boolean;
+    disclaimer?: string;
+    controller?: UseDialogControllerReturn;
+    triggerElement?: JSX$1.Element;
+    /**
+     * @default "error"
+     */
+    severity?: "error" | "info" | "warning";
+    /**
+     * @default "Cancel"
+     */
+    cancelLabel?: "Dismiss" | "Cancel" | (string & {});
+    onCancelClick?: () => void;
+    action: {
+        label: string;
+        onClick: () => void | Promise<TaskResult> | TaskResult;
+    };
+}
+declare function ConfirmationDialog(props: ConfirmationDialogProps): react_jsx_runtime.JSX.Element;
+
+declare function useDialogController<Value>(defaultValue?: Value): {
+    value: Value;
+    isOpen: boolean;
+    show: (...args: Value extends boolean ? [] : [value: Value]) => void;
+    hide: () => void;
+};
+type UseDialogControllerReturn<T = {}> = ReturnType<typeof useDialogController<T>>;
+
+declare function Root$2<T>(props: DialogProps.RootProps<T>): react_jsx_runtime.JSX.Element;
+interface ElementProps extends SafeOmit<BasicDivProps, "ref" | "onClick" | "onBlur" | "onFocus" | "onScroll" | "clickable"> {
+    children: React__default.ReactNode;
+}
+declare const Dialog: {
+    Root: typeof Root$2;
+    Header: (props: ElementProps) => react_jsx_runtime.JSX.Element;
+    Body: (props: ElementProps) => react_jsx_runtime.JSX.Element;
+    Footer: (props: ElementProps) => react_jsx_runtime.JSX.Element;
+    CloseTrigger: (props: {
+        children: JSX$1.Element;
+        wrap?: boolean;
+        slotProps?: Partial<{
+            divWrapper: React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+        }>;
+    }) => react_jsx_runtime.JSX.Element;
+    ActionTrigger: (props: {
+        children: JSX$1.Element;
+    }) => react_jsx_runtime.JSX.Element;
+};
+declare namespace DialogProps {
+    interface RootProps<T = {}> extends SafeOmit<BasicDivProps, "clickable" | "ref" | "onClick" | "onBlur" | "onFocus" | "onScroll" | "decreaseYFaderPadding" | "enableYFaders" | "rememberScrollPos" | "updateScrollPosDeps"> {
+        /**
+         * @default center
+         */
+        placement?: "center" | "top" | "bottom";
+        children: JSX$1.Element | JSX$1.Element[];
+        triggerElement?: JSX$1.Element;
+        hideCloseButton?: boolean;
+        /**@default "sm" */
+        closeButtonSize?: CloseButtonProps["size"];
+        /**
+         * @default false
+         */
+        unmountOnExit?: boolean;
+        /**
+         * @default "slide-in-bottom"
+         */
+        enterAnimation?: Dialog$1.RootProps["motionPreset"];
+        /**
+         * @default "outside"
+         */
+        scrollBehavior?: Dialog$1.RootProps["scrollBehavior"];
+        controller?: UseDialogControllerReturn<T>;
+        /**
+         * Whether to close the dialog when the escape key is pressed
+         * @default true
+         */
+        closeOnEscape?: boolean;
+        /**
+         * Whether to close the dialog when the outside is clicked
+         * @default true
+         */
+        closeOnInteractOutside?: boolean;
+        rerenderOnClose?: boolean;
+        onOpenChange?: (isOpen: boolean) => void;
+        onClose?: () => void;
+    }
+}
+
+interface FancyFormDialogProps<Section extends string> {
+    triggerElement?: JSX$1.Element;
+    controller?: UseDialogControllerReturn;
+    title?: React.ReactNode;
+    defaultSection?: Section;
+    sections: BasicOlProps<Section>["items"];
+    sectionMapper: Record<Section, {
+        title: string;
+        description: string;
+        element: JSX$1.Element | (() => JSX$1.Element) | ((props: {
+            incompleteSections: Section[];
+        }) => JSX$1.Element);
+    }>;
+    checkCompletionOnMount?: boolean;
+    /**
+     * @default false
+     */
+    unmountOnExit?: boolean;
+    rerenderOnClose?: boolean;
+    isSectionComplete: (section: Section) => boolean;
+    onSectionsStatusChange?: (incompleteSections: Section[], completedSections: Section[]) => void;
+    ignoredSections?: Section[];
+    hideSubmitButton?: boolean;
+    onSubmit?: () => Promise<void>;
+}
+declare function FancyFormDialog<Sections extends string>(props: FancyFormDialogProps<Sections>): react_jsx_runtime.JSX.Element;
+
+interface SimpleFormDialogProps<T extends string> {
+    controller?: UseDialogControllerReturn;
+    title?: string;
+    triggerElement?: JSX$1.Element;
+    /**@default "md" */
+    closeButtonSize?: DialogProps.RootProps["closeButtonSize"];
+    /**@default "2rem"*/
+    titleFontSize?: BasicDivProps["fontSize"];
+    /**@default "md" */
+    textfieldSize?: TextFieldProps["size"];
+    /**@default "lg" */
+    actionButtionSize?: BasicButtonProps["size"];
+    width?: BasicDivProps["width"];
+    /**A shortcut for defining the default value for fields where: `<"field">.defaultValue === undefined`.*/
+    defaultValue?: Partial<Record<T, string>>;
+    fields: Record<T, {
+        /**
+         * @default "prop-name" */
+        label?: (string & {}) | "prop-name" | ((propName: string) => string);
+        placeholder: string;
+        disabled?: boolean;
+        defaultValue?: string;
+        allowedChars?: RegExp;
+        options?: string[];
+    }>;
+    /**A shortcut to format the property name for all fields where: `typeof <"field">.label !== "function" && [undefined, "prop-name"].includes(<"field">.label)`
+     * - Useful for field's that use `prop-name` as the label.
+     */
+    formatFieldPropName?: (propName: string) => string;
+    /**A shortcut to set the allowed characters for all fields where: `<"field">.allowedChars === undefined`
+     */
+    allowedChars?: RegExp;
+    onSave?: (form: Record<T, string>) => void;
+    onCancel?: () => void;
+}
+declare function SimpleFormDialog<T extends string>(props: SimpleFormDialogProps<T>): react_jsx_runtime.JSX.Element;
 
-declare function Root$2(props: FileViewerProps.RootProps): react_jsx_runtime.JSX.Element;
-declare function Indicator(props: FileViewerProps.IndicatorProps): react_jsx_runtime.JSX.Element;
+declare function Root$1(props: FileViewerProps.RootProps): react_jsx_runtime.JSX.Element;
+declare function Indicator$1(props: FileViewerProps.IndicatorProps): react_jsx_runtime.JSX.Element;
 declare function Topbar(props: FileViewerProps.TopbarProps): react_jsx_runtime.JSX.Element;
 declare function SidebarRoot<T extends string>(props: FileViewerProps.SidebarRootProps<T>): react_jsx_runtime.JSX.Element;
 declare function SidebarOption(props: FileViewerProps.SidebarOptionProps): react_jsx_runtime.JSX.Element;
 declare function Viewer(props: FileViewerProps.ViewerProps): react_jsx_runtime.JSX.Element;
 declare const FileViewer: {
-    Root: typeof Root$2;
+    Root: typeof Root$1;
     Sidebar: typeof SidebarRoot;
     SidebarOption: typeof SidebarOption;
     Topbar: typeof Topbar;
     Viewer: typeof Viewer;
-    Indicator: typeof Indicator;
+    Indicator: typeof Indicator$1;
 };
 type SanitizedBasicDivProps = SafeOmit<BasicDivProps, "row" | "id" | "height" | "width" | "align" | "padding" | "size" | "minHeight" | "minWidth" | "maxHeight" | "maxWidth" | "asChildren" | "aspectRatio">;
 declare namespace FileViewerProps {
@@ -1925,13 +2030,13 @@ declare namespace FileViewerProps {
         /**The height of the `Topbar` and the width of the `Sidebar`
          * @default "3rem" */
         navThickness?: `${number}${"rem" | "em" | "px"}`;
-        children: JSX$1.Element | [JSX$1.Element, JSX$1.Element] | [JSX$1.Element, JSX$1.Element, JSX$1.Element];
+        children: JSX.Element | [JSX.Element, JSX.Element] | [JSX.Element, JSX.Element, JSX.Element];
     }
     interface TopbarProps extends SanitizedBasicDivProps {
-        children?: JSX$1.Element | JSX$1.Element[];
+        children?: JSX.Element | JSX.Element[];
     }
     interface SidebarRootProps<T> extends SanitizedBasicDivProps {
-        children: JSX$1.Element | JSX$1.Element[];
+        children: JSX.Element | JSX.Element[];
         /**@default "md" */
         gap?: BasicDivProps["gap"];
         onOptionClick?: (option: T) => void;
@@ -1960,7 +2065,7 @@ declare namespace FileViewerProps {
         onClick?: () => void;
     }
     interface ViewerProps {
-        children: JSX$1.Element;
+        children: JSX.Element;
         /**@default "onSurface[0.1]"*/
         backgroundColor?: BasicColor$1;
         /**@default "onSurface" */
@@ -2004,102 +2109,6 @@ declare namespace FileViewerProps {
     }
 }
 
-interface BasicImgProps extends BasicHtmlElementStyleProps, BasicHtmlElementCoreProps<HTMLImageElement> {
-    src: string;
-    alt?: string;
-    fill?: boolean;
-    cover?: boolean;
-    noFit?: boolean;
-    scaleDown?: boolean;
-    tint?: BasicColor$1;
-    sx?: InlineCss;
-}
-/**
- *
- *
- * @returns A modded version of the <img/> html tag.
- */
-declare function BasicImg(props: BasicImgProps): react_jsx_runtime.JSX.Element;
-
-type TableColumnConfig<T extends string = string> = {
-  name: T;
-  weight?: "auto" | `${number}${"rem" | "fr" | "px"}`;
-  backgroundColor?: BasicColor;
-  color?: BasicColor;
-  /**The value that should be used if a cell doesn't have any data. */
-  placeholder?: string;
-};
-
-type RootStyles = {
-    gap?: BasicHtmlElementStyleProps["gap"];
-    rowGap?: BasicHtmlElementStyleProps["gap"];
-    /**@default "onSurface[0.25]" */
-    separatorColor?: BasicColor$1;
-    /**@default "lg" */
-    columnGap?: BasicHtmlElementStyleProps["gap"];
-    textAlign?: "left" | "center" | "right";
-    /**@default "sm" */
-    padding?: BasicHtmlElementStyleProps["padding"];
-    corners?: BasicDivProps["corners"];
-    spill?: BasicDivProps["spill"];
-    fontSize?: BasicDivProps["fontSize"];
-    fontWeight?: BasicDivProps["fontWeight"];
-    defaultSelectedRows?: number[];
-    selectedRows?: number[];
-    onSelectedRowsChange?: (selectedRows: number[]) => void;
-    slotProps?: Partial<{
-        selectColumn?: Partial<{
-            separatorColor: BasicColor$1;
-            disableSeparator: boolean;
-        }>;
-    }>;
-};
-declare function Root$1<T extends string>(props: BasicTableProps.RootProps<T>): react_jsx_runtime.JSX.Element;
-declare function Header(props: BasicTableProps.HeaderProps): react_jsx_runtime.JSX.Element;
-declare function Body(props: BasicTableProps.BodyProps): react_jsx_runtime.JSX.Element;
-declare const BasicTable: {
-    Root: typeof Root$1;
-    Header: typeof Header;
-    Body: typeof Body;
-};
-declare namespace BasicTableProps {
-    interface RootProps<T extends string> extends RootStyles, Partial<Record<"width" | "height" | `${"min" | "max"}${"Height" | "Width"}`, BasicHtmlElementStyleProps["width"]>> {
-        selectable?: boolean;
-        columns: (T | TableColumnConfig<T>)[];
-        backgroundColor?: BasicColor$1;
-        color?: BasicColor$1;
-        entries: {
-            [Key in T]?: React__default.ReactElement | string;
-        }[];
-        /**Applies a columnWeight to columns where: <"column">.weight === undefined
-         * @default "1fr"
-         */
-        columnWeight?: TableColumnConfig["weight"];
-        children: [JSX$1.Element, JSX$1.Element];
-    }
-    interface HeaderProps {
-        /**@default "left" */
-        textAlign?: "left" | "center" | "right";
-        /**@default "onSurface[0.1]" */
-        separatorColor?: BasicColor$1 | 0 | "none";
-        /**@default "camelToLetter" */
-        formatColumnName?: "camelToLetter" | ((name: string) => string);
-        color?: BasicColor$1;
-        backgroundColor?: BasicColor$1;
-        borderColor?: BasicDivProps["borderColor"];
-        fontSize?: BasicDivProps["fontSize"];
-        fontWeight?: BasicDivProps["fontWeight"];
-        padding?: BasicDivProps["padding"];
-        corners?: BasicDivProps["corners"];
-    }
-    interface BodyProps {
-        /**@default [RootProps.rowGap, "top"] */
-        padding?: BasicDivProps["padding"];
-        color?: BasicColor$1;
-        fontSize?: BasicDivProps["fontSize"];
-    }
-}
-
 declare enum Size {
     "2xl" = "2rem",
     xl = "1.75rem",
@@ -2109,7 +2118,7 @@ declare enum Size {
     xs = ".85rem",
     "2xs" = ".5rem"
 }
-interface BasicIndicatorProps {
+interface IndicatorProps {
     content?: number | string;
     /**
      * @default "orange"
@@ -2133,9 +2142,9 @@ interface BasicIndicatorProps {
     padding?: BasicDivProps["padding"];
     hide?: boolean;
 }
-declare function BasicIndicator(props: BasicIndicatorProps): react_jsx_runtime.JSX.Element;
+declare function Indicator(props: IndicatorProps): react_jsx_runtime.JSX.Element;
 
-interface BasicItemInfoProps {
+interface ItemInfoProps {
     item: {
         title: string;
         description?: string;
@@ -2143,15 +2152,15 @@ interface BasicItemInfoProps {
     };
     info: string | object | (() => string | object);
 }
-declare function BasicItemInfo(props: BasicItemInfoProps): react_jsx_runtime.JSX.Element;
+declare function ItemInfo(props: ItemInfoProps): react_jsx_runtime.JSX.Element;
 
-type BasicMenuPlacement = MenuRootProps["positioning"]["placement"];
-interface BasicMenuProps<Item extends string> extends Partial<Record<`${"max" | "min"}${"Height" | "Width"}` | "height" | "width", HtmlElementDim | 0>> {
+type MenuPlacement = MenuRootProps["positioning"]["placement"];
+interface MenuProps<Item extends string> extends Partial<Record<`${"max" | "min"}${"Height" | "Width"}` | "height" | "width", HtmlElementDim | 0>> {
     inDialog?: boolean;
     /**
      * @default "right-start"
      */
-    placement?: BasicMenuPlacement;
+    placement?: MenuPlacement;
     /**
      * @default "onSurface"
      */
@@ -2161,7 +2170,7 @@ interface BasicMenuProps<Item extends string> extends Partial<Record<`${"max" |
      */
     backgroundColor?: BasicColor$1;
     wrapTrigger?: boolean;
-    children: JSX.Element;
+    children: JSX$1.Element;
     gutter?: number;
     items: MenuItems<Item>;
     /**@default "xs" */
@@ -2171,10 +2180,10 @@ interface BasicMenuProps<Item extends string> extends Partial<Record<`${"max" |
         divWrapper: React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
     }>;
 }
-declare function BasicMenu<Item extends string>(props: BasicMenuProps<Item>): react_jsx_runtime.JSX.Element;
+declare function Menu<Item extends string>(props: MenuProps<Item>): react_jsx_runtime.JSX.Element;
 type MenuItems<Key extends string = string> = Record<Key, ({
-    leadingEl?: JSX.Element;
-    trailingEl?: JSX.Element | {
+    leadingEl?: JSX$1.Element;
+    trailingEl?: JSX$1.Element | {
         command: string;
     };
     sx?: Partial<Record<`:${"hover" | "active"}`, Partial<Record<"backgroundColor" | "color", BasicColor$1>>>>;
@@ -2246,7 +2255,7 @@ interface PageSliderProps<T> {
 }
 declare function PageSlider<T>(props: PageSliderProps<T>): react_jsx_runtime.JSX.Element;
 
-interface BasicSegmentedControlsProps<ControlType extends string> {
+interface SegmentedControlsProps<ControlType extends string> {
     controls: ControlType[] | {
         value: ControlType;
         icon: IconType;
@@ -2258,33 +2267,35 @@ interface BasicSegmentedControlsProps<ControlType extends string> {
     borderColor?: BasicColor$1 | 0;
     onChange?: (control: ControlType) => void;
 }
-declare function BasicSegmentedControls<ControlType extends string>(props: BasicSegmentedControlsProps<ControlType>): react_jsx_runtime.JSX.Element;
+declare function SegmentedControls<ControlType extends string>(props: SegmentedControlsProps<ControlType>): react_jsx_runtime.JSX.Element;
 
-type BaseProps$1 = {
-    size?: SeparatorProps["size"];
-    color?: BasicColor$1;
-    variant?: SeparatorProps["variant"];
-    orientation?: SeparatorProps["orientation"];
-};
-type OptionalProps$1 = {
+interface TagProps {
     label: string;
-    labelPosition: "left" | "center" | "right";
-    labelColor?: BasicColor$1;
-} | {
-    label?: never;
-    labelPosition?: never;
-    labelColor?: never;
-};
-declare function BasicSeparator(props: BaseProps$1 & OptionalProps$1): react_jsx_runtime.JSX.Element;
+    opacity?: number;
+    labelOpacity?: number;
+    color?: BasicColor$1;
+}
+declare function Tag(props: TagProps): react_jsx_runtime.JSX.Element;
+
+interface PaperProps {
+    size: "A4" | "A6";
+    /** Allows the paper's dimensions to be adaptable to different container sizes.
+     * @default true */
+    responsive?: boolean;
+    children: JSX$1.Element | JSX$1.Element[];
+    style?: CSS.Properties;
+    id?: string;
+}
+declare function Paper(props: PaperProps): react_jsx_runtime.JSX.Element;
 
-interface BasicStatusProps {
+interface StatusProps {
     status: TaskResultStatus;
     indicatorSize?: HtmlElementDim;
     indicatorOnly?: boolean;
 }
-declare function BasicStatus(props: BasicStatusProps): react_jsx_runtime.JSX.Element;
+declare function Status(props: StatusProps): react_jsx_runtime.JSX.Element;
 
-interface BasicStepperProps extends StepsVariant {
+interface StepperProps extends StepsVariant {
     steps: {
         title: string;
         description: React__default.ReactNode | (() => React__default.ReactNode);
@@ -2292,81 +2303,38 @@ interface BasicStepperProps extends StepsVariant {
     }[];
     showBg?: boolean;
     defaultStep?: number;
-    completedel?: JSX.Element | "none";
+    completedel?: JSX$1.Element | "none";
     colorScheme?: Steps.RootProps["colorPalette"];
     indent?: Steps.RootProps["paddingLeft"] | boolean;
     nested?: boolean;
     value?: Steps.RootProviderProps["value"];
     footer?: (props: {
         PrevTrigger: (props: {
-            children: JSX.Element;
-        }) => JSX.Element;
+            children: JSX$1.Element;
+        }) => JSX$1.Element;
         NextTrigger: (props: {
-            children: JSX.Element;
-        }) => JSX.Element;
-    }) => JSX.Element;
-}
-declare function BasicStepper(props: BasicStepperProps): react_jsx_runtime.JSX.Element;
-
-interface BasicTagProps {
-    label: string;
-    opacity?: number;
-    labelOpacity?: number;
-    color?: BasicColor$1;
-}
-declare function BasicTag(props: BasicTagProps): react_jsx_runtime.JSX.Element;
-
-interface RootProps {
-    /**@default "fit-content" */
-    width?: BasicHtmlElementStyleProps["width"];
-    /**@default "onSurface[0.5]" */
-    lineSeparatorColor?: BasicColor$1;
-    rowGap?: string;
-    /**@default ".5rem" */
-    columnGap?: string;
-    children: JSX.Element | JSX.Element[];
-}
-declare function Root(props: RootProps): react_jsx_runtime.JSX.Element;
-interface ItemProps {
-    indicator?: React.ReactNode;
-    /**The node that should be placed `before` (to the left of) the separator */
-    before?: React.ReactNode;
-    /**The node that should be placed `after` (to the right of) the separator */
-    after?: React.ReactNode;
-    disabled?: boolean;
-    styles?: Partial<Record<"before" | "after", BasicHtmlElementStyleProps> & {
-        indicator: Partial<BasicHtmlElementStyleProps & {
-            /**@default ".6rem" */
-            size: BasicHtmlElementStyleProps["size"];
-            /**@default "circle" */
-            corners: BasicHtmlElementStyleProps["corners"];
-            /**@default "onSurface" */
-            backgroundColor: BasicColor$1;
-        }>;
-    }>;
+            children: JSX$1.Element;
+        }) => JSX$1.Element;
+    }) => JSX$1.Element;
 }
-declare function Item(props: ItemProps): react_jsx_runtime.JSX.Element;
-declare const BasicTimeline: {
-    Root: typeof Root;
-    Item: typeof Item;
-};
+declare function Stepper(props: StepperProps): react_jsx_runtime.JSX.Element;
 
-interface TooltipProps extends Tooltip.RootProps {
+interface TooltipProps$1 extends Tooltip$1.RootProps {
     showArrow?: boolean;
     portalled?: boolean;
     portalRef?: React$1.RefObject<HTMLElement | null>;
     content: React$1.ReactNode;
-    contentProps?: Tooltip.ContentProps;
+    contentProps?: Tooltip$1.ContentProps;
     disabled?: boolean;
 }
 
-type BasicTooltipPlacement = TooltipProps["positioning"]["placement"];
-interface BasicTooltipProps {
+type TooltipPlacement = TooltipProps$1["positioning"]["placement"];
+interface TooltipProps {
     asChild?: boolean;
-    children: JSX.Element;
+    children: JSX$1.Element;
     tooltip: React__default.ReactNode;
     arrow?: boolean;
-    placement?: BasicTooltipPlacement;
+    placement?: TooltipPlacement;
     backgroundColor?: BasicColor$1;
     color?: BasicColor$1;
     corners?: BasicDivProps["corners"];
@@ -2380,55 +2348,99 @@ interface BasicTooltipProps {
         spanWrapper: Partial<BasicDivProps>;
     }>;
 }
-declare function BasicTooltip(props: BasicTooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip(props: TooltipProps): react_jsx_runtime.JSX.Element;
 
-interface BasicSelectProps<T> extends SafeOmit<BasicPopoverProps, "displayAction" | "content" | "placement" | "allowInteractions"> {
-    isSelected?: (option: BasicSelectProps<T>["options"][number]) => boolean;
-    options: {
-        value: T;
+declare function Root(props: TimelineProps.RootProps): react_jsx_runtime.JSX.Element;
+declare function Item(props: TimelineProps.ItemProps): react_jsx_runtime.JSX.Element;
+declare const Timeline: {
+    Root: typeof Root;
+    Item: typeof Item;
+};
+declare namespace TimelineProps {
+    interface RootProps {
+        /**@default "fit-content" */
+        width?: BasicHtmlElementStyleProps["width"];
+        /**@default "onSurface[0.5]" */
+        lineSeparatorColor?: BasicColor$1;
+        rowGap?: string;
+        /**@default ".5rem" */
+        columnGap?: string;
+        children: JSX$1.Element | JSX$1.Element[];
+    }
+    interface ItemProps {
+        indicator?: React.ReactNode;
+        /**The node that should be placed `before` (to the left of) the separator */
+        before?: React.ReactNode;
+        /**The node that should be placed `after` (to the right of) the separator */
+        after?: React.ReactNode;
         disabled?: boolean;
-        onClick?: () => void;
-    }[];
-    /**@default "md" */
-    corners?: BasicDivProps["corners"];
-    /**@default "md" */
-    padding?: BasicDivProps["padding"];
-    /**@default "sm" */
-    gap?: BasicDivProps["gap"];
-    onOptionClick?: (option: BasicSelectProps<T>["options"][number], index: number, options: BasicSelectProps<T>["options"]) => void;
+        styles?: Partial<Record<"before" | "after", BasicHtmlElementStyleProps> & {
+            indicator: Partial<BasicHtmlElementStyleProps & {
+                /**@default ".6rem" */
+                size: BasicHtmlElementStyleProps["size"];
+                /**@default "circle" */
+                corners: BasicHtmlElementStyleProps["corners"];
+                /**@default "onSurface" */
+                backgroundColor: BasicColor$1;
+            }>;
+        }>;
+    }
 }
-declare function BasicSelect<T extends string | number>(props: BasicSelectProps<T>): react_jsx_runtime.JSX.Element;
 
-interface BasicOptionProps {
-    value: string | number;
-    selected?: boolean;
-    /**@default "full" */
+type BaseProps$1 = {
+    size?: SeparatorProps$1["size"];
+    color?: BasicColor$1;
+    variant?: SeparatorProps$1["variant"];
+    orientation?: SeparatorProps$1["orientation"];
+};
+type OptionalProps$1 = {
+    label: string;
+    labelPosition: "left" | "center" | "right";
+    labelColor?: BasicColor$1;
+} | {
+    label?: never;
+    labelPosition?: never;
+    labelColor?: never;
+};
+type SeparatorProps = BaseProps$1 & OptionalProps$1;
+declare function Separator(props: SeparatorProps): react_jsx_runtime.JSX.Element;
+
+interface DisclaimerProps extends Partial<Record<"top" | "left" | "bottom" | "right", HtmlElementDim | 0>> {
+    severity: "warning" | "error" | "info";
+    message: string;
+    pos?: BasicDivProps["pos"];
+    /**
+     * @default false
+     */
+    disableShadow?: boolean;
+    facade?: (severity: DisclaimerProps["severity"]) => DisclaimerProps["severity"];
     width?: BasicDivProps["width"];
-    /**@default "sm" */
+    /**
+     * @default "1rem"
+     */
+    iconSize?: HtmlElementDim;
+    /**
+     * @default "md"
+     */
+    gap?: BasicSpanProps["gap"];
+    /**
+     * @default "md"
+     */
     padding?: BasicDivProps["padding"];
-    /**@default "md" */
+    /**
+     * @default "md"
+     */
     corners?: BasicDivProps["corners"];
-    /**@default "sm" */
+    /**
+     * @default "sm"
+     */
     fontSize?: BasicSpanProps["fontSize"];
-    color?: BasicColor$1;
-    disabled?: boolean;
-    backgroundColor?: BasicColor$1;
-    sx?: InlineCss;
-    scrollIntoView?: boolean;
-    onClick?: () => void;
-}
-declare function BasicOption(props: BasicOptionProps): react_jsx_runtime.JSX.Element;
-
-interface PaperProps {
-    size: "A4" | "A6";
-    /** Allows the paper's dimensions to be adaptable to different container sizes.
-     * @default true */
-    responsive?: boolean;
-    children: JSX.Element | JSX.Element[];
-    style?: CSS.Properties;
-    id?: string;
+    /**
+     * @default false
+     */
+    hideLabel?: boolean;
 }
-declare function Paper(props: PaperProps): react_jsx_runtime.JSX.Element;
+declare function Disclaimer(props: DisclaimerProps): react_jsx_runtime.JSX.Element;
 
 type ContextType = Prettify<Partial<Record<`onAttachment${"Added" | "Deleted"}`, (attachement: Attachment) => void>> & Partial<Record<`${"delete" | "open"}Disabled`, boolean | ((attachment: Attachment) => boolean)>> & {
     attachments: Email["attachments"];
@@ -2443,7 +2455,7 @@ type ContextType = Prettify<Partial<Record<`onAttachment${"Added" | "Deleted"}`,
 }>;
 interface AttachmentsDialogProps extends ContextType {
     readOnly?: boolean;
-    triggerElement?: JSX$1.Element;
+    triggerElement?: JSX.Element;
     unmountOnExit?: boolean;
     rerenderOnClose?: boolean;
     controller?: UseDialogControllerReturn;
@@ -2654,7 +2666,7 @@ interface MoneyDisplayCardProps {
     slotProps?: Partial<Record<"label" | "fee" | "currency", Partial<{
         fontSize: BasicDivProps["fontSize"];
     }>>>;
-    children?: JSX.Element | JSX.Element[];
+    children?: JSX$1.Element | JSX$1.Element[];
 }
 declare function MoneyDisplayCard(props: MoneyDisplayCardProps): react_jsx_runtime.JSX.Element;
 
@@ -2698,7 +2710,7 @@ interface CalendarDialogProps extends CalendarProps {
     title?: string;
     titleFontSize?: BasicSpanProps["fontSize"];
     controller?: UseDialogControllerReturn;
-    triggerElement?: JSX.Element;
+    triggerElement?: JSX$1.Element;
     /**@default "onSurface[0.1]" */
     backgroundColor?: BasicColor$1;
     /**@default ".5rem" */
@@ -2711,7 +2723,7 @@ interface CalendarDialogProps extends CalendarProps {
 declare function CalendarDialog(props: CalendarDialogProps): react_jsx_runtime.JSX.Element;
 
 interface PaymentOptionsDialogProps<Variables extends Record<string, any>> {
-    triggerElement?: JSX.Element;
+    triggerElement?: JSX$1.Element;
     controller?: UseDialogControllerReturn;
     options: {
         icon: IconType;
@@ -2721,8 +2733,8 @@ interface PaymentOptionsDialogProps<Variables extends Record<string, any>> {
         disabled?: boolean;
         onClick?: (variables: Variables) => void;
         dropDownContent?: string | Record<string, string>;
-        "pre-element"?: (variables: Variables) => JSX.Element;
-        "post-element"?: (variables: Variables) => JSX.Element;
+        "pre-element"?: (variables: Variables) => JSX$1.Element;
+        "post-element"?: (variables: Variables) => JSX$1.Element;
     }[];
 }
 declare function PaymentOptionsDialog(props: PaymentOptionsDialogProps<{}>): react_jsx_runtime.JSX.Element;
@@ -2743,8 +2755,8 @@ declare const bankTransferPaymentOption: (bankAccount: {
     disabled?: boolean;
     onClick?: (variables: Record<string, any>) => void;
     dropDownContent?: string | Record<string, string>;
-    "pre-element"?: (variables: Record<string, any>) => JSX.Element;
-    "post-element"?: (variables: Record<string, any>) => JSX.Element;
+    "pre-element"?: (variables: Record<string, any>) => JSX$1.Element;
+    "post-element"?: (variables: Record<string, any>) => JSX$1.Element;
 };
 declare const inAppPaymentOption: () => {
     icon: IconType;
@@ -2754,8 +2766,8 @@ declare const inAppPaymentOption: () => {
     disabled?: boolean;
     onClick?: (variables: {}) => void;
     dropDownContent?: string | Record<string, string>;
-    "pre-element"?: (variables: {}) => JSX.Element;
-    "post-element"?: (variables: {}) => JSX.Element;
+    "pre-element"?: (variables: {}) => JSX$1.Element;
+    "post-element"?: (variables: {}) => JSX$1.Element;
 };
 
 interface TaskResultDialogProps {
@@ -2862,7 +2874,7 @@ interface SignInWidgetProps<Auth extends AuthProvider> {
     width?: BasicDivProps["width"];
     backgroundColor?: BasicColor$1;
     color?: BasicColor$1;
-    header?: JSX.Element;
+    header?: JSX$1.Element;
     zIndex?: number;
     onAuthProviderClick: (provider: Auth) => Promise<void>;
 }
@@ -2906,7 +2918,7 @@ declare function VerifyTextField(props: SafeOmit<TextFieldProps, "leadingAdornme
     onVerifyClick: () => Promise<TaskResult>;
 }): react_jsx_runtime.JSX.Element;
 
-declare function ErrorTooltip(props: SafeOmit<BasicTooltipProps, "tooltip"> & {
+declare function ErrorTooltip(props: SafeOmit<TooltipProps, "tooltip"> & {
     error: ErrorMessage | undefined;
 }): react_jsx_runtime.JSX.Element;
 
@@ -2981,7 +2993,7 @@ interface BasicFileInputProps extends BasicHtmlElementStyleProps {
      */
     multiple?: boolean;
     accepts?: KnownFileTypeAlias[] | KnownFileTypeAlias;
-    children?: JSX.Element;
+    children?: JSX$1.Element;
     disabled?: boolean;
     getFilePath?: (file: File) => string;
     onAccept?: (files: File[], localFiles: LocalFile[]) => void;
@@ -3016,6 +3028,8 @@ interface ButtonProps {
 declare const YesButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
 declare const NoButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
 
+declare const DownloadButton: (props: Omit<BasicButtonProps, "text" | "leadingEl" | "trailingEl">) => react_jsx_runtime.JSX.Element;
+
 type JwtVerificationStatus = {
     verified: boolean;
     payload: string;
@@ -3143,4 +3157,4 @@ declare function remAsPx(rem: number): string;
 declare function isOverflown(element: HTMLElement): boolean;
 declare function computedCssVariable(cssVariable: string): string;
 
-export { AttachmentsButton, AttachmentsDialog, BasicAvatar, BasicBadge, BasicButton, BasicCard, type BasicColor$1 as BasicColor, BasicConfirmationDialog, BasicDialog, BasicDisclaimer, BasicDiv, BasicDropzone, BasicFormDialog, type BasicHtmlElementStyleProps, BasicImg, BasicIndicator, BasicItemInfo, BasicMediaCard, BasicMenu, type BasicMenuPlacement, BasicOl, BasicOption, BasicPopover, BasicProfileCard, BasicSegmentedControls, BasicSelect, BasicSeparator, BasicSpan, BasicStatus, BasicStepper, BasicTable, BasicTableProps, BasicTag, BasicTimeline, BasicTooltip, type BasicTooltipPlacement, _default as Calendar, CalendarDialog, CancelButton, Checkbox, ColorResources, CopyButton, CssColors, type CssProperties, CssShapes, CssSpacing, DeleteButton, EditButton, Editable, EmailComposer, EmptyState, ErrorTooltip, ExpandableButton, FileViewer, FileViewerProps, FontSize, type InlineCss, JsonViewer, type JwtVerificationStatus, JwtVerifier, type JwtVerifierProps, MoneyDisplayCard, NegativeButton, NextButton, NoButton, OpenButton, OptionsButton, PageSlider, Paper, PasteButton, PaymentOptionsButton, PaymentOptionsDialog, PictureUploader, PositiveButton, PreviousButton, ReceiptCard, SaveButton, SearchTextField, SendButton, SignInWidget, SimpleFormDialog, SubmitButton, TaskLogger, TaskResultDialog, Terminal, TextField, UploadButton, UploadReceiptButton, type UseDialogControllerReturn, type UsePageSliderControllerReturn, UserProfile, VerifyButton, VerifyTextField, UiProvider as WavyUi, YesButton, YesNoButtonGroup, YesOrNoForm, applyBasicStyle, bankTransferPaymentOption, borderRadius, buildCSS, computedCssVariable, convertHexUnitTo256, cssTransition, definePaymentOption, disabledBorderRadius, dragElement, ellipsis, flexCenter, getFileIcon, getScrollParent, hexToRgba, inAppPaymentOption, isOverflown, isSpanMultiLine, isValidHex, nativeEllipsis, noSpaceStyle, remAsPx, remToPx, resolveBasicColor, restrictLineCount, rgbToRgba, screenHasMaxWidth, screenHasMinWidth, solidBorder, tiledBackground, useAsyncEffect, useChangeEffect, useDialogController, useEventEmitter, useManagedRef, usePageSliderController, usePopoverContext, useRerender, useSessionStorage };
+export { AttachmentsButton, AttachmentsDialog, Avatar, type AvatarProps, Badge, type BadgeProps, BasicButton, type BasicColor$1 as BasicColor, BasicDiv, type BasicHtmlElementStyleProps, BasicImg, type MenuPlacement as BasicMenuPlacement, BasicOl, BasicOption, BasicSelect, BasicSpan, BasicTable, BasicTableProps, type TooltipPlacement as BasicTooltipPlacement, _default as Calendar, CalendarDialog, CancelButton, Card, CardProps, Checkbox, type CheckboxProps, ColorResources, ConfirmationDialog, type ConfirmationDialogProps, CopyButton, CssColors, type CssProperties, CssShapes, CssSpacing, DeleteButton, Dialog, DialogProps, Disclaimer, type DisclaimerProps, DownloadButton, EditButton, Editable, type EditableProps, EmailComposer, EmptyState, EmptyStateProps, ErrorTooltip, ExpandableButton, FancyFormDialog, type FancyFormDialogProps, FileDropzone, type FileDropzoneProps, FileViewer, FileViewerProps, FontSize, Indicator, type IndicatorProps, type InlineCss, ItemInfo, type ItemInfoProps, JsonViewer, type JwtVerificationStatus, JwtVerifier, type JwtVerifierProps, MediaCard, MediaCardProps, Menu, type MenuPlacement, MoneyDisplayCard, NegativeButton, NextButton, NoButton, OpenButton, OptionsButton, PageSlider, type PageSliderProps, Paper, type PaperProps, PasteButton, PaymentOptionsButton, PaymentOptionsDialog, PictureUploader, Popover, type PopoverProps, PositiveButton, PreviousButton, ProfileCard, ProfileCardProps, ReceiptCard, SaveButton, SearchTextField, SegmentedControls, type SegmentedControlsProps, SendButton, Separator, type SeparatorProps, SignInWidget, SimpleFormDialog, type SimpleFormDialogProps, Status, type StatusProps, Stepper, type StepperProps, SubmitButton, Tag, type TagProps, TaskLogger, TaskResultDialog, Terminal, TextField, type TextFieldProps, Timeline, TimelineProps, Tooltip, type TooltipPlacement, type TooltipProps, UploadButton, UploadReceiptButton, type UseDialogControllerReturn, type UsePageSliderControllerReturn, UserProfile, VerifyButton, VerifyTextField, UiProvider as WavyUi, YesButton, YesNoButtonGroup, YesOrNoForm, applyBasicStyle, bankTransferPaymentOption, borderRadius, buildCSS, computedCssVariable, convertHexUnitTo256, cssTransition, definePaymentOption, disabledBorderRadius, dragElement, ellipsis, flexCenter, getFileIcon, getScrollParent, hexToRgba, inAppPaymentOption, isOverflown, isSpanMultiLine, isValidHex, nativeEllipsis, noSpaceStyle, remAsPx, remToPx, resolveBasicColor, restrictLineCount, rgbToRgba, screenHasMaxWidth, screenHasMinWidth, solidBorder, tiledBackground, useAsyncEffect, useChangeEffect, useDialogController, useEventEmitter, useManagedRef, usePageSliderController, usePopoverContext, useRerender, useSessionStorage };